/* =================================================================
   SOLARA — design system
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden;
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  text-rendering: optimizeLegibility;
}
:root { --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

:root {
  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
  /* radius */
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px; --r5: 28px;
  /* brand */
  --brand-1: #FFD56B; --brand-2: #FF8A5B; --brand-3: #FF5E8A; --brand-4: #A95BFF;
  --brand-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2) 40%, var(--brand-3) 70%, var(--brand-4));
  --accent: #0a84ff;
  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Dark theme (default) ---- */
html[data-theme="dark"], html[data-theme="mono"] {
  --text: #f5f5f7;
  --text-2: rgba(235,235,245,0.62);
  --text-3: rgba(235,235,245,0.35);
  --glass: color-mix(in srgb, var(--accent) 8%, rgba(24,24,30,0.70));
  --glass-2: color-mix(in srgb, var(--accent) 7%, rgba(38,38,46,0.74));
  --glass-strong: color-mix(in srgb, var(--accent) 9%, rgba(16,16,22,0.84));
  --win-solid: color-mix(in srgb, var(--accent) 8%, #15151b);
  --hairline: rgba(255,255,255,0.10);
  --hairline-2: rgba(255,255,255,0.06);
  --field: rgba(255,255,255,0.07);
  --field-2: rgba(255,255,255,0.12);
  --menubar-bg: rgba(0,0,0,0.28);
  --menubar-text: rgba(255,255,255,0.92);
  --shadow-win: 0 24px 70px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(0,0,0,0.6);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.08);
  --hover: rgba(255,255,255,0.08);
  color-scheme: dark;
}
/* ---- Light theme ---- */
html[data-theme="light"] {
  --text: #1d1d1f;
  --text-2: rgba(60,60,67,0.6);
  --text-3: rgba(60,60,67,0.32);
  --glass: color-mix(in srgb, var(--accent) 7%, rgba(250,250,252,0.78));
  --glass-2: color-mix(in srgb, var(--accent) 5%, rgba(255,255,255,0.82));
  --glass-strong: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,0.88));
  --win-solid: color-mix(in srgb, var(--accent) 5%, #f3f3f7);
  --hairline: rgba(0,0,0,0.10);
  --hairline-2: rgba(0,0,0,0.06);
  --field: rgba(0,0,0,0.05);
  --field-2: rgba(0,0,0,0.09);
  --menubar-bg: rgba(255,255,255,0.45);
  --menubar-text: rgba(0,0,0,0.85);
  --shadow-win: 0 24px 70px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(0,0,0,0.12);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.08);
  --hover: rgba(0,0,0,0.06);
  color-scheme: light;
}
/* ---- Full black (OLED) ---- */
html[data-theme="black"] {
  --text: #f5f5f7;
  --text-2: rgba(235,235,245,0.6);
  --text-3: rgba(235,235,245,0.34);
  --glass: rgba(12,12,14,0.8);
  --glass-2: rgba(18,18,20,0.85);
  --glass-strong: rgba(0,0,0,0.92);
  --win-solid: #000000;
  --hairline: rgba(255,255,255,0.13);
  --hairline-2: rgba(255,255,255,0.07);
  --field: rgba(255,255,255,0.06);
  --field-2: rgba(255,255,255,0.11);
  --menubar-bg: rgba(0,0,0,0.5);
  --menubar-text: rgba(255,255,255,0.92);
  --shadow-win: 0 24px 70px rgba(0,0,0,0.72), 0 8px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.08);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.65), 0 0 0 0.5px rgba(255,255,255,0.08);
  --hover: rgba(255,255,255,0.07);
  color-scheme: dark;
}
/* ---- Mono (black & white): shares the dark palette above, then desaturates the whole desktop ---- */
html[data-theme="mono"] { filter: grayscale(1); }

body { background: #000; color: var(--text); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input { font: inherit; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
::selection { background: rgba(10,132,255,0.35); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--field-2); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

/* reduce-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =================================================================
   Desktop + dynamic wallpaper
   ================================================================= */
#desktop { position: relative; width: 100%; height: 100%; overflow: hidden; }
#wallpaper { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wp-layer { position: absolute; inset: -10%; }

/* Mesh-gradient wallpapers (original, time-of-day driven via [data-wp]) */
.wp-mesh { transition: background 1.2s ease, opacity 1.2s ease; background-blend-mode: screen; }
body[data-wp="dawn"] .wp-mesh {
  background:
    radial-gradient(40% 50% at 18% 22%, #ffd9a0 0%, transparent 60%),
    radial-gradient(45% 55% at 82% 18%, #ff9aa8 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 92%, #ffc187 0%, transparent 65%),
    radial-gradient(70% 70% at 75% 75%, #c98bd6 0%, transparent 70%),
    linear-gradient(160deg, #2a1a44, #5a2c5e 45%, #b65a6b 75%, #ffb27a);
}
body[data-wp="day"] .wp-mesh {
  background:
    radial-gradient(40% 50% at 15% 20%, #9fd8ff 0%, transparent 60%),
    radial-gradient(45% 55% at 85% 15%, #7aa8ff 0%, transparent 60%),
    radial-gradient(60% 65% at 50% 95%, #8fe3ff 0%, transparent 65%),
    radial-gradient(70% 70% at 78% 70%, #6f7bff 0%, transparent 70%),
    linear-gradient(160deg, #16235e, #2b4ba0 45%, #4f86d6 80%, #8fd0f5);
}
body[data-wp="dusk"] .wp-mesh {
  background:
    radial-gradient(42% 52% at 20% 24%, #ffb36b 0%, transparent 60%),
    radial-gradient(46% 56% at 84% 16%, #ff6f9c 0%, transparent 60%),
    radial-gradient(60% 60% at 48% 94%, #ff7e5f 0%, transparent 65%),
    radial-gradient(72% 72% at 76% 72%, #7b4dff 0%, transparent 70%),
    linear-gradient(160deg, #170d33, #4a1d57 42%, #a23a63 72%, #ff8a5b);
}
body[data-wp="night"] .wp-mesh {
  background:
    radial-gradient(40% 50% at 16% 20%, #3a4f8a 0%, transparent 60%),
    radial-gradient(44% 54% at 84% 16%, #5b3a8a 0%, transparent 60%),
    radial-gradient(60% 62% at 50% 96%, #2a3f7a 0%, transparent 65%),
    radial-gradient(72% 72% at 74% 70%, #6a3aa0 0%, transparent 72%),
    linear-gradient(160deg, #05040f, #0e0a26 45%, #1b1240 78%, #2a1b54);
}
/* fixed wallpaper choices */
body[data-wp="aurora"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 25% 30%, #34e0c0 0%, transparent 60%),
    radial-gradient(50% 60% at 78% 22%, #4a9bff 0%, transparent 62%),
    radial-gradient(60% 60% at 50% 95%, #2effa8 0%, transparent 65%),
    linear-gradient(160deg, #04122a, #0a2f4d 50%, #14736f 85%, #34e0a0);
}
body[data-wp="mono"] .wp-mesh { background: linear-gradient(160deg, #0c0c10, #141418 60%, #1c1c22); }
body[data-wp="custom"] .wp-mesh { background: var(--wp-custom, #14141a) center center / cover no-repeat; }
body[data-wp="ocean"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 20% 25%, #2af5ff 0%, transparent 60%),
    radial-gradient(50% 60% at 82% 18%, #1f7bff 0%, transparent 62%),
    radial-gradient(60% 60% at 50% 96%, #00e0c0 0%, transparent 65%),
    linear-gradient(160deg, #03142e, #0a3a6e 55%, #1278a0 85%, #2af5d0);
}
body[data-wp="sunset"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 22% 26%, #ffd16b 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 16%, #ff5e62 0%, transparent 62%),
    radial-gradient(60% 60% at 50% 96%, #ff2e63 0%, transparent 65%),
    linear-gradient(160deg, #2a0e3a, #7a1e4e 50%, #d8443e 80%, #ffb24d);
}
body[data-wp="grape"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 22% 24%, #d08bff 0%, transparent 60%),
    radial-gradient(50% 60% at 82% 18%, #7b4dff 0%, transparent 62%),
    radial-gradient(60% 62% at 50% 96%, #5a1d9a 0%, transparent 66%),
    linear-gradient(160deg, #14072e, #3a168a 55%, #7b3ad0 88%, #c86bff);
}
body[data-wp="ember"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 22% 26%, #ffb24d 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 18%, #ff5e2e 0%, transparent 62%),
    radial-gradient(60% 60% at 50% 96%, #b3122e 0%, transparent 66%),
    linear-gradient(160deg, #1a0608, #5a1110 55%, #b3331a 85%, #ff8a2f);
}
body[data-wp="mint"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 22% 24%, #9ffce0 0%, transparent 60%),
    radial-gradient(50% 60% at 82% 18%, #2ad0c0 0%, transparent 62%),
    radial-gradient(60% 62% at 50% 96%, #1aa5b0 0%, transparent 66%),
    linear-gradient(160deg, #04201f, #0e5a55 55%, #1aa59a 88%, #7af5c0);
}
body[data-wp="sakura"] .wp-mesh {
  background:
    radial-gradient(45% 55% at 22% 24%, #ffd6ec 0%, transparent 60%),
    radial-gradient(50% 60% at 82% 18%, #ff9ad0 0%, transparent 62%),
    radial-gradient(60% 62% at 50% 96%, #c86bd8 0%, transparent 66%),
    linear-gradient(160deg, #2a1030, #7a2a6e 52%, #d86bb0 82%, #ffc2e0);
}
body[data-wp="noir"] .wp-mesh {
  background:
    radial-gradient(50% 60% at 30% 20%, #2a2a34 0%, transparent 62%),
    radial-gradient(55% 60% at 78% 80%, #1a1a22 0%, transparent 66%),
    linear-gradient(160deg, #050507, #16161c 60%, #26262e);
}

/* subtle vignette + soft glow for depth (cheap, no filters) */
.wp-grain {
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.05), transparent 50%),
    radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,0.35), transparent 60%);
}

/* Cursor-reactive fluid backdrop (canvas) — glows over the mesh wallpaper */
.wp-fluid { inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.92; }
html[data-theme="light"] .wp-fluid { mix-blend-mode: soft-light; opacity: 0.72; }
body[data-wp="mono"] .wp-fluid, body[data-wp="noir"] .wp-fluid { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .wp-fluid { opacity: 0.62; } }

/* =================================================================
   Menu bar
   ================================================================= */
#menubar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 28px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 8px;
  background: var(--menubar-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  z-index: 5000;
  font-size: 13px;
  color: var(--menubar-text);
  border-bottom: 0.5px solid var(--hairline-2);
}
.mb-left { display: flex; align-items: center; gap: 14px; }
.mb-right { display: flex; align-items: center; gap: 11px; }
.mb-div { width: 1px; height: 14px; background: var(--hairline); opacity: 0.7; }
body.hide-dock #dock { opacity: 0; transform: translate(-50%, 120%); pointer-events: none; }
.mb-logo { display: flex; align-items: center; padding: 2px 4px; border-radius: 6px; }
.mb-logo img { width: 16px; height: 16px; display: block; }
.mb-logo:hover { background: var(--hover); }
.mb-brand { font-weight: 700; letter-spacing: -0.01em; }
.mb-app { font-weight: 400; opacity: 0.7; }
.mb-app::before { content: "—"; opacity: 0.4; margin-right: 8px; }
.mb-online { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--menubar-text); }
.mb-online b { font-weight: 700; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 7px rgba(52,199,89,0.8); }
.mb-weather { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--menubar-text); font-variant-numeric: tabular-nums; }
.mb-weather span:first-child { font-size: 13px; }
.mb-icon { display: flex; align-items: center; justify-content: center; width: 27px; height: 22px; border-radius: 7px; color: var(--menubar-text); transition: background 0.14s var(--ease-out), transform 0.1s var(--ease-out); }
.mb-icon:hover { background: var(--hover); }
.mb-icon:active { transform: scale(0.88); background: var(--field-2); }
.mb-icon svg { width: 16px; height: 16px; }
.mb-status { display: flex; align-items: center; gap: 4px; color: var(--menubar-text); }
.mb-battery-pct { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.9; }
.mb-clock { display: flex; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mb-clock #clock-time { font-weight: 500; }

/* =================================================================
   Desktop icons
   ================================================================= */
#icon-grid {
  position: absolute; inset: 36px 0 88px 0;
  z-index: 1;
}
.desktop-icon {
  position: absolute;
  width: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 6px 6px;
  border-radius: 12px;
  cursor: default; outline: none;
  transition: background 0.12s ease, transform 0.12s var(--ease-out);
}
.desktop-icon.dragging { transition: none; z-index: 50; transform: scale(1.06); cursor: grabbing; }
.desktop-icon:hover .app-tile { transform: translateY(-2px); }

/* -------- Unified squircle app icon -------- */
.app-tile {
  border-radius: 23%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  flex: 0 0 auto;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.30),
    0 2px 5px rgba(0,0,0,0.22),
    inset 0 1px 0.5px rgba(255,255,255,0.45),
    inset 0 -2px 6px rgba(0,0,0,0.18);
  transition: transform 0.14s var(--ease-out);
}
.app-tile::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
  pointer-events: none;
}
.app-tile svg { width: 56%; height: 56%; position: relative; z-index: 1; display: block; }
/* size variants */
.desktop-icon .app-tile { width: 60px; height: 60px; }
.dock-app .app-tile     { width: 100%; height: 100%; border-radius: 24%; }
.store-card .app-tile   { width: 46px; height: 46px; }
.tile-sm                { width: 30px; height: 30px; border-radius: 26%; }
.tile-sm svg            { width: 60%; height: 60%; }
.tile-folder            { width: 64px; height: 64px; }

/* -------- iOS-style folder icon (mini app previews on frosted glass) -------- */
.app-tile.is-folder {
  background: rgba(118,122,138,0.34);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.app-tile.is-folder::after { display: none; }
.ft-grid {
  position: absolute; inset: 15%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 11%;
}
.ft-mini {
  border-radius: 26%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.ft-mini svg { width: 66%; height: 66%; display: block; }
.desktop-icon:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.desktop-icon.selected { background: rgba(120,150,255,0.22); }
.icon-label {
  font-size: 11.5px; text-align: center; line-height: 1.25;
  max-width: 84px; word-break: break-word;
  color: #fff;
  padding: 0 4px; border-radius: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.desktop-icon.selected .icon-label { background: var(--accent); text-shadow: none; }

/* -------- Folder window (Launchpad-style grid of apps) -------- */
.folder { height: 100%; overflow: auto; padding: 30px 24px; display: flex; }
.folder-grid {
  margin: auto; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, 96px);
  gap: 24px 10px; justify-content: center; align-content: start;
}
.folder-item {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer; padding: 10px 4px;
  border-radius: 16px; transition: background .15s var(--ease-out), transform .12s var(--ease-out);
}
.folder-item:hover { background: var(--hover); }
.folder-item:hover .app-tile { transform: translateY(-2px); }
.folder-item:active { transform: scale(.95); }
.folder-label { font-size: 12.5px; color: var(--text); text-align: center; line-height: 1.25; max-width: 88px; word-break: break-word; }

/* =================================================================
   Dock
   ================================================================= */
#dock {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}
.dock-inner {
  display: flex; align-items: flex-end; gap: 7px;
  padding: 8px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), var(--glass));
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 26px;
  backdrop-filter: blur(70px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(70px) saturate(200%) brightness(1.06);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
.dock-app {
  width: 54px; height: 54px;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  cursor: default;
  transition: transform 0.16s var(--ease-out);
  transform-origin: bottom center;
  will-change: transform;
}
.dock-app img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  -webkit-user-drag: none; pointer-events: none;
}
.dock-badge {
  position: absolute; top: -3px; right: -3px; z-index: 3;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--glass-2), 0 2px 5px rgba(0,0,0,0.4);
}
.dock-app .dock-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.92);
  background: var(--glass-strong);
  color: var(--text);
  border: 0.5px solid var(--hairline);
  padding: 5px 11px; border-radius: 9px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s var(--ease-out);
  box-shadow: var(--shadow-pop);
}
.dock-app .dock-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--glass-strong);
}
.dock-app:hover .dock-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.dock-app.running::after {
  content: ""; position: absolute; bottom: -5px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text);
  opacity: 0.55;
}
.dock-sep { width: 1px; align-self: stretch; margin: 8px 3px; background: var(--hairline); }

/* =================================================================
   Windows
   ================================================================= */
#windows-layer { position: absolute; inset: 28px 0 0 0; z-index: 100; pointer-events: none; }
.window {
  position: absolute;
  min-width: 380px; min-height: 240px;
  display: flex; flex-direction: column;
  background: var(--glass-strong);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r2);
  box-shadow: var(--shadow-win);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform, opacity;
}
.window.opening { animation: win-open 0.26s var(--ease-out); }
@keyframes win-open { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.window.closing { animation: win-close 0.18s var(--ease-out) forwards; }
@keyframes win-close { to { transform: scale(0.9); opacity: 0; } }
.window.minimizing { animation: win-min 0.32s var(--ease-out) forwards; }
@keyframes win-min { to { transform: translateY(120vh) scale(0.2); opacity: 0; } }
.window.maximized { inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; transition: all 0.22s var(--ease-out); }
.window:not(.active) { box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(0,0,0,0.4); }
/* True full screen — show only the app content, no titlebar/chrome.
   In the browser top layer the glass has nothing to blur, so use a solid
   themed surface instead of falling back to black/transparent. */
.window:fullscreen { border-radius: 0; background: var(--win-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.window:fullscreen .titlebar, .window:fullscreen .rz { display: none !important; }
.window:fullscreen .window-body { height: 100%; background: var(--win-solid); }
.window:fullscreen::backdrop { background: var(--win-solid); }

.titlebar {
  height: 42px; flex: 0 0 42px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px;
  padding: 0 12px 0 14px;
  cursor: grab;
  border-bottom: 0.5px solid var(--hairline-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));
}
html[data-theme="light"] .titlebar { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.12)); }
.titlebar:active { cursor: grabbing; }
.tb-back { grid-column: 1; width: 26px; height: 26px; border-radius: 8px; font-size: 19px; line-height: 1; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.tb-back[hidden] { display: none; }
.tb-back:hover { background: var(--hover); color: var(--text); }
.tb-controls { grid-column: 3; display: flex; gap: 9px; align-items: center; }
.tb-fs { width: 22px; height: 22px; border-radius: 6px; color: var(--text-2); display: flex; align-items: center; justify-content: center; margin-right: 2px; }
.tb-fs svg { width: 14px; height: 14px; }
.tb-fs:hover { background: var(--hover); color: var(--text); }
.tbc {
  width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; border: 0.5px solid rgba(0,0,0,0.14);
  transition: filter 0.12s;
}
.tbc-close { background: #ff5f57; } .tbc-min { background: #febc2e; } .tbc-max { background: #28c840; }
.tbc:hover { filter: brightness(1.08); }
.tbc svg { width: 7px; height: 7px; opacity: 0; transition: opacity 0.1s; }
.tb-controls:hover .tbc svg { opacity: 0.6; }
.window:not(.active) .tbc { background: var(--field-2); }
.tb-title { grid-column: 2; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; letter-spacing: -0.01em; }
.window-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.rz { position: absolute; z-index: 6; }
.rz-n { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.rz-s { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.rz-e { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.rz-w { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.rz-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.rz-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }

/* =================================================================
   Generic UI atoms
   ================================================================= */
.btn, .input, .select {
  background: var(--field); border: 0.5px solid var(--hairline);
  color: var(--text); padding: 7px 12px; border-radius: var(--r1);
  font-size: 13px; outline: none; transition: background 0.12s, border-color 0.12s;
}
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,0.25); }
.btn { background: var(--accent); border-color: transparent; color: #fff; font-weight: 500; }
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn.secondary { background: var(--field); color: var(--text); }
.btn.secondary:hover { background: var(--field-2); }
/* Native dropdown popups: force readable colours (fixes white-on-white options) */
.select, select { color: var(--text); }
.select option, select option, .proxy-select option {
  background: #1f1f24; color: #fff;
}
html[data-theme="light"] .select option, html[data-theme="light"] select option, html[data-theme="light"] .proxy-select option {
  background: #fff; color: #1d1d1f;
}

/* Spinner loader for proxied apps */
.app-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--glass-strong); color: var(--text-2); transition: opacity 0.4s ease; }
.app-loading.gone { opacity: 0; pointer-events: none; }
.app-loading .spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--field-2); border-top-color: var(--accent); animation: spin 0.7s linear infinite; }
.app-loading-tx { font-size: 13px; }

/* Control Center online tile */
.cc-online-tile { display: flex; align-items: center; }
.cc-online-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cc-online-row b { font-weight: 700; }

/* =================================================================
   Browser app
   ================================================================= */
/* Chrome-style tab strip */
.browser-tabs {
  display: flex; align-items: flex-end; gap: 3px;
  padding: 5px 6px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
  -webkit-app-region: no-drag;
}
html[data-theme="light"] .browser-tabs { background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02)); }
.browser-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 9px 0 11px;
  font-size: 12.5px; font-weight: 500;
  border-radius: 10px 10px 0 0;
  color: var(--text-2);
  min-width: 110px; max-width: 200px; flex: 0 1 200px;
  cursor: default;
  transition: background 0.14s var(--ease-out), color 0.14s;
}
.browser-tab:hover { background: var(--hover); color: var(--text); }
.browser-tab.active {
  background: var(--glass-strong); color: var(--text);
  box-shadow: 0 -0.5px 0 var(--hairline) inset, -0.5px 0 0 var(--hairline) inset, 0.5px 0 0 var(--hairline) inset;
}
/* the little curved "feet" that blend the active tab into the toolbar */
.browser-tab.active::before, .browser-tab.active::after {
  content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; background: var(--glass-strong);
}
.browser-tab.active::before { left: -8px; -webkit-mask: radial-gradient(circle at 0 0, transparent 8px, #000 8px); mask: radial-gradient(circle at 0 0, transparent 8px, #000 8px); }
.browser-tab.active::after  { right: -8px; -webkit-mask: radial-gradient(circle at 100% 0, transparent 8px, #000 8px); mask: radial-gradient(circle at 100% 0, transparent 8px, #000 8px); }
.browser-tab .fav { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 16px; }
.browser-tab .tab-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-tab .x { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; opacity: 0; flex: 0 0 18px; }
.browser-tab:hover .x, .browser-tab.active .x { opacity: 0.6; }
.browser-tab .x:hover { background: var(--field-2); opacity: 1; }
.browser-newtab { width: 28px; height: 28px; align-self: center; margin-bottom: 3px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-2); flex: 0 0 28px; }
.browser-newtab:hover { background: var(--hover); color: var(--text); }

.browser-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.nav-group { display: flex; align-items: center; gap: 2px; }
.nav-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
.nav-btn svg { width: 18px; height: 18px; display: block; }
.nav-btn:hover { background: var(--hover); color: var(--text); }
.nav-btn:active { transform: scale(0.92); }
.url-wrap { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--field); border: 0.5px solid var(--hairline); border-radius: 11px; padding: 0 12px; transition: all 0.14s var(--ease-out); }
.url-wrap:focus-within { background: var(--glass-strong); border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(10,132,255,0.2); }
.url-lock { display: inline-flex; color: var(--text-3); }
.url-lock svg { width: 15px; height: 15px; }
.browser-bar .url { flex: 1; background: transparent; border: 0; color: var(--text); padding: 8px 0; font-size: 13px; outline: none; }
.browser-bar .url::placeholder { color: var(--text-3); }
/* Search-suggestion dropdown (address bar + home search) */
.url-wrap, .bh-search { position: relative; }
.sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100; padding: 5px; max-height: 320px; overflow-y: auto;
  background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-pop);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
.sugg.hidden { display: none; }
.sugg-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.sugg-item svg { width: 15px; height: 15px; opacity: 0.45; flex: 0 0 auto; }
.sugg-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-item.sel, .sugg-item:hover { background: var(--accent); color: #fff; }
.sugg-item.sel svg, .sugg-item:hover svg { opacity: 0.9; }
/* Engine toggle (UV / Scramjet) */
.engine-seg { display: inline-flex; background: var(--field); border: 0.5px solid var(--hairline); border-radius: 9px; padding: 2px; gap: 2px; }
.engine-seg button { padding: 5px 11px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; }
.engine-seg button:hover { color: var(--text); }
.engine-seg button.active { background: var(--accent); color: #fff; }
.browser-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

/* Browser home — theme-aware */
.browser-home {
  position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  --bh-pink: #ff4da6; --bh-pink2: #ff8ac0; --bh-fg: #e6e6ea; --bh-sub: #8b8b93;
  --bh-line: rgba(255,255,255,0.08); --bh-line-h: rgba(255,255,255,0.22);
  --bh-tile: transparent; --bh-tile-h: rgba(255,255,255,0.05); --bh-search: rgba(255,255,255,0.04);
  background: radial-gradient(130% 100% at 50% -10%, #14060f 0%, #000 62%);
}
/* Browser keeps the dark strawberri skin in both OS themes. */
.bh-stars { position: absolute; inset: 0; background-image:
  radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.45), transparent),
  radial-gradient(1.6px 1.6px at 48% 18%, rgba(255,180,220,0.6), transparent), radial-gradient(1px 1px at 67% 48%, rgba(255,255,255,0.5), transparent),
  radial-gradient(1.4px 1.4px at 82% 28%, rgba(255,255,255,0.55), transparent), radial-gradient(1.6px 1.6px at 90% 70%, rgba(255,140,200,0.5), transparent),
  radial-gradient(1px 1px at 38% 84%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,0.4), transparent),
  radial-gradient(1.2px 1.2px at 20% 46%, rgba(255,255,255,0.4), transparent), radial-gradient(1.2px 1.2px at 58% 76%, rgba(255,255,255,0.4), transparent);
  animation: bh-tw 5s ease-in-out infinite; }
@keyframes bh-tw { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
.bh-glow { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 520px; height: 260px; background: radial-gradient(ellipse at center, rgba(255,77,166,0.35), transparent 70%); filter: blur(26px); pointer-events: none; }
.bh-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(560px, 90%); padding: 16px; }
.bh-title { font-family: "Outfit", system-ui, sans-serif; font-size: clamp(48px, 11vw, 82px); font-weight: 900; letter-spacing: -0.037em; line-height: 0.95; margin: 0;
  background: linear-gradient(180deg, var(--bh-pink), var(--bh-pink2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 34px rgba(255,77,166,0.45)); }
.bh-wi { position: relative; }
.bh-berry { position: absolute; left: 50%; top: -0.30em; transform: translateX(-50%); width: 0.60em; height: 0.64em; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)); }
.bh-tagline { margin-top: 10px; font-size: 15px; color: var(--bh-fg); opacity: 0.9; font-weight: 500; }
.bh-search { width: 100%; max-width: 542px; margin-top: 26px; display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 58px;
  background: var(--bh-search); border: 1px solid var(--bh-line); border-radius: 20px; color: var(--bh-sub);
  transition: border-color 0.15s, box-shadow 0.15s; }
.bh-search:focus-within { border-color: var(--bh-pink); box-shadow: 0 0 0 4px rgba(255,77,166,0.15); }
.bh-search svg { color: var(--bh-sub); flex: 0 0 auto; }
.bh-search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--bh-fg); font-size: 15px; font-family: inherit; }
.bh-search input::placeholder { color: var(--bh-sub); }
.bh-cards { margin-top: 20px; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.bh-card { height: 108px; border-radius: 16px; background: var(--bh-tile); border: 1px solid var(--bh-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; cursor: pointer; padding: 8px;
  transition: transform 0.14s var(--ease-out), border-color 0.14s, background 0.14s; }
.bh-card:hover { transform: translateY(-3px); border-color: var(--bh-line-h); background: var(--bh-tile-h); }
.bh-card img { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; }
.bh-card span { font-size: 12.5px; color: var(--bh-fg); font-weight: 600; text-align: center; }
/* Strawberri-pink chrome accents (scoped to the Browser app) */
.browser-bar .url-wrap:focus-within { border-color: #ff4da6; box-shadow: 0 0 0 3.5px rgba(255,77,166,0.20); }
.browser-tab.active { box-shadow: inset 0 -2.5px 0 rgba(255,77,166,0.7); }

/* Strawberri dark chrome — tabs + toolbar (always dark, pink accents) */
.browser-tabs, html[data-theme="light"] .browser-tabs { background: #0c0c10; border-bottom: none; }
.browser-tab { color: rgba(255,255,255,0.55); }
.browser-tab:hover { background: rgba(255,255,255,0.06); color: #fff; }
.browser-tab.active { background: #171319; color: #fff; }
.browser-tab .x:hover { background: rgba(255,255,255,0.14); }
.browser-newtab { color: rgba(255,255,255,0.5); }
.browser-newtab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.browser-bar { position: relative; background: #0c0c10; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.browser-bar .nav-btn { color: rgba(255,255,255,0.62); }
.browser-bar .nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.browser-bar .url-wrap { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
.browser-bar .url-lock { color: rgba(255,255,255,0.4); }
.browser-bar .url { color: #fff; }
.browser-bar .url::placeholder { color: rgba(255,255,255,0.4); }

/* In-browser Settings panel (Solara/strawberri style) */
.br-settings { position: absolute; top: calc(100% + 6px); right: 8px; z-index: 40; width: 258px; padding: 14px;
  background: #141216; border: 0.5px solid rgba(255,255,255,0.1); border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(0,0,0,0.5); animation: pop-in 0.14s var(--ease-out); }
.br-settings[hidden] { display: none; }
.br-set-title { font-size: 15px; font-weight: 700; color: #fff; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 0.5px solid rgba(255,255,255,0.08); }
.br-set-lab { display: block; font-size: 12px; color: rgba(255,255,255,0.55); margin: 11px 0 5px; }
.br-set-selwrap { position: relative; }
.br-set-selwrap::after { content: ""; position: absolute; right: 13px; top: 44%; width: 6px; height: 6px; border-right: 1.5px solid rgba(255,255,255,0.5); border-bottom: 1.5px solid rgba(255,255,255,0.5); transform: rotate(45deg); pointer-events: none; }
.br-set-select { width: 100%; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: 9px; padding: 9px 30px 9px 11px; font-size: 13px; font-family: inherit; cursor: pointer; outline: none; }
.br-set-select:focus { border-color: #ff4da6; }
.br-set-input { width: 100%; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12); color: #fff; border-radius: 9px; padding: 9px 11px; font-size: 13px; font-family: inherit; outline: none; }
.br-set-input:focus { border-color: #ff4da6; }
.br-set-toggle { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 2px; font-size: 13px; color: #fff; cursor: pointer; }
.br-set-toggle input { width: 18px; height: 18px; accent-color: #ff4da6; cursor: pointer; }
.br-set-action { width: 100%; margin-top: 10px; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); color: #fff; border-radius: 9px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.br-set-action:hover { background: rgba(255,255,255,0.11); }
.br-set-action:active { background: rgba(255,77,166,0.22); border-color: #ff4da6; }

/* iframe host + skeleton */
.iframe-host { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.app-skeleton { position: absolute; inset: 0; padding: 0; background: var(--glass-strong); overflow: hidden; }
.sk-bar { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 0.5px solid var(--hairline-2); }
.sk-chip, .sk-line, .sk-card { background: linear-gradient(90deg, var(--field) 25%, var(--field-2) 37%, var(--field) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-chip { width: 90px; height: 22px; border-radius: 6px; }
.sk-grid { padding: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.sk-card { height: 110px; }
.app-skeleton .sk-foot { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 8px; }
.sk-foot .sk-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--field-2); border-top-color: var(--text-2); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =================================================================
   Settings / Files / editors / chat / about
   ================================================================= */
.settings-grid { display: grid; grid-template-columns: 210px 1fr; height: 100%; }
.settings-side { background: var(--glass-2); padding: 10px 8px; border-right: 0.5px solid var(--hairline-2); overflow:auto; }
.settings-side-title { font-size: 17px; font-weight: 700; padding: 6px 10px 12px; letter-spacing: -0.02em; }
.settings-side .item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 13px; color: var(--text); cursor: default; margin-bottom: 2px; }
.settings-side .item:hover { background: var(--hover); }
.settings-side .item.active { background: var(--accent); color: #fff; }
.si-badge { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.si-badge svg { width: 15px; height: 15px; display: block; }
.set-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.set-accents { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-main { padding: 24px 26px; overflow: auto; }
.settings-main h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.wp-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; }
.wp-opt { aspect-ratio: 16/10; border-radius: 10px; cursor: default; border: 2px solid transparent; box-shadow: inset 0 0 0 0.5px var(--hairline); }
.wp-opt.active { border-color: var(--accent); }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; }
.switch input { display: none; }
.switch .knob { width: 38px; height: 22px; background: var(--field-2); border-radius: 12px; position: relative; transition: background 0.18s; }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s var(--ease-out); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.switch input:checked + .knob { background: #34c759; }
.switch input:checked + .knob::after { transform: translateX(16px); }

/* ===== File manager ===== */
.fm { display: grid; grid-template-columns: 180px 1fr; height: 100%; min-height: 0; }
.fm-side { background: var(--glass-2); padding: 12px 8px; border-right: 0.5px solid var(--hairline-2); display: flex; flex-direction: column; gap: 2px; }
.fm-side-item { padding: 8px 11px; border-radius: 8px; font-size: 13px; color: var(--text); cursor: default; display: flex; align-items: center; gap: 9px; }
.fm-side-item span { font-size: 15px; }
.fm-side-item:hover { background: var(--hover); }
.fm-side-item.active { background: var(--accent); color: #fff; }
.fm-main { display: flex; flex-direction: column; min-height: 0; }
.fm-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 0.5px solid var(--hairline-2); background: var(--glass-2); flex-wrap: wrap; }
.fm-icbtn { width: 30px; height: 30px; border-radius: 8px; color: var(--text-2); font-size: 16px; }
.fm-icbtn:hover { background: var(--hover); color: var(--text); }
.fm-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; overflow: hidden; }
.fm-crumb { padding: 3px 7px; border-radius: 6px; cursor: default; white-space: nowrap; color: var(--text); }
.fm-crumb:hover { background: var(--hover); }
.fm-sep { color: var(--text-3); }
.fm-seg { display: inline-flex; background: var(--field); border-radius: 8px; padding: 2px; }
.fm-seg button { width: 28px; height: 24px; border-radius: 6px; font-size: 13px; color: var(--text-2); }
.fm-seg button.active { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.fm-list { flex: 1; overflow: auto; padding: 14px; }
.fm-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; align-content: start; }
.fm-list.list { display: flex; flex-direction: column; gap: 1px; }
.fm-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px; cursor: default; }
.fm-list.list .fm-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px; }
.fm-item:hover { background: var(--hover); }
.fm-item.sel { background: rgba(10,132,255,0.2); }
.fm-emoji { font-size: 38px; line-height: 1; }
.fm-list.list .fm-emoji { font-size: 22px; }
.fm-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.fm-list.list .fm-thumb { width: 24px; height: 24px; }
.fm-name { font-size: 12px; text-align: center; word-break: break-word; line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-list.list .fm-name { text-align: left; -webkit-line-clamp: 1; }
.fm-empty { grid-column: 1/-1; text-align: center; color: var(--text-2); font-size: 14px; padding: 50px 20px; }
.fm-empty span { font-size: 12px; color: var(--text-3); }
.fm-status { padding: 6px 14px; font-size: 11.5px; color: var(--text-3); border-top: 0.5px solid var(--hairline-2); background: var(--glass-2); }
.fm-ctx { position: fixed; }

.editor-wrap { display: flex; flex-direction: column; height: 100%; }
.editor-toolbar { padding: 8px 10px; display: flex; gap: 8px; align-items: center; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.editor { flex: 1; background: transparent; color: var(--text); border: 0; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 14px; resize: none; outline: none; width: 100%; line-height: 1.5; }
.editor-output { height: 32%; background: rgba(0,0,0,0.25); color: var(--text); font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; padding: 10px 12px; overflow: auto; border-top: 0.5px solid var(--hairline-2); white-space: pre-wrap; }

/* ===== Solara Chat ===== */
.wa { display: grid; grid-template-columns: 320px 1fr; height: 100%; min-height: 0;
  --wa-recv: color-mix(in srgb, #fff 8%, var(--win-solid)); --wa-online: #30d158; }
html[data-theme="light"] .wa { --wa-recv: #ffffff; }
.wa-av { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex: 0 0 42px; overflow: hidden; font-weight: 600; }
.wa-av img { width: 100%; height: 100%; object-fit: cover; }
.wa-av svg { width: 56%; height: 56%; }
.wa-av.sm { width: 36px; height: 36px; flex-basis: 36px; font-size: 15px; }
.wa-av.lg { width: 88px; height: 88px; flex-basis: 88px; font-size: 40px; }
.wa-av-global { background: linear-gradient(150deg, #2aa9ff, #6a5cff); }
.wa-avw { position: relative; display: inline-flex; flex: 0 0 auto; }
.wa-st { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--wa-online); border: 2.5px solid var(--glass-2); }

.wa-side { display: flex; flex-direction: column; min-height: 0; border-right: 0.5px solid var(--hairline-2); background: var(--glass-2); }
.wa-side-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 0.5px solid var(--hairline-2); }
.wa-me-name { font-weight: 700; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.wa-iconbtn { width: 34px; height: 34px; border-radius: 50%; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.wa-iconbtn svg { width: 19px; height: 19px; }
.wa-iconbtn:hover { background: var(--hover); color: var(--text); }
.wa-search { position: relative; padding: 10px 12px; }
.wa-search-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: inline-flex; pointer-events: none; }
.wa-search-ico svg { width: 15px; height: 15px; }
.wa-search-in { width: 100%; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 20px; padding: 9px 14px 9px 36px; font-size: 13px; outline: none; transition: border-color .14s, background .14s; }
.wa-search-in:focus { border-color: var(--accent); background: var(--glass-strong); }
.wa-search-in::placeholder { color: var(--text-3); }
.wa-find { padding: 0 8px; }
.wa-find-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.wa-find-item:hover { background: var(--hover); }
.wa-find-tx { min-width: 0; } .wa-find-item b { font-size: 13.5px; display: block; } .wa-find-item span { font-size: 11.5px; color: var(--text-2); }
.wa-find-empty { padding: 12px; font-size: 12px; color: var(--text-3); text-align: center; }
.wa-convos { flex: 1; overflow: auto; padding: 4px 6px; }
.wa-convo { display: flex; align-items: center; gap: 12px; padding: 9px 10px; cursor: pointer; border-radius: 12px; }
.wa-convo:hover { background: var(--hover); }
.wa-convo.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wa-convo-tx { flex: 1; min-width: 0; }
.wa-convo-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wa-convo-top b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-convo-top span { font-size: 11px; color: var(--text-3); white-space: nowrap; flex: 0 0 auto; }
.wa-convo-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.wa-convo-last { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-unread { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex: 0 0 auto; }

.wa-main { position: relative; min-height: 0; display: flex; background: var(--win-solid); }
.wa-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.wa-back { display: none; align-items: center; justify-content: center; color: var(--text-2); width: 30px; height: 30px; border-radius: 50%; }
.wa-back svg { width: 22px; height: 22px; } .wa-back:hover { background: var(--hover); }
.wa-chat-peer { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.wa-peer-tx { min-width: 0; } .wa-peer-tx b { font-size: 15px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.wa-peer-tx span { font-size: 12px; color: var(--text-3); } .wa-peer-tx span.on { color: var(--wa-online); }
.wa-banner { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--text-3); background: color-mix(in srgb, var(--accent) 7%, transparent); padding: 7px 12px; }
.wa-banner svg { width: 13px; height: 13px; }
.wa-thread { flex: 1; overflow: auto; padding: 14px 7% 10px; display: flex; flex-direction: column; gap: 2px;
  background: var(--win-solid);
  background-image: radial-gradient(120% 55% at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.wa-day { align-self: center; margin: 14px 0 8px; }
.wa-day span { background: color-mix(in srgb, var(--text) 9%, var(--win-solid)); color: var(--text-2); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
.wa-row { display: flex; align-items: flex-end; gap: 5px; margin-top: 8px; }
.wa-row.grouped { margin-top: 2px; }
.wa-row.mine { flex-direction: row-reverse; }
.wa-col { display: flex; flex-direction: column; align-items: flex-start; max-width: 74%; min-width: 0; }
.wa-row.mine .wa-col { align-items: flex-end; }
.wa-actbtn { opacity: 0; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: var(--text-3); display: flex; align-items: center; justify-content: center; transition: opacity 0.12s; }
.wa-actbtn svg { width: 17px; height: 17px; }
.wa-row:hover .wa-actbtn { opacity: 0.6; }
.wa-actbtn:hover { opacity: 1 !important; background: var(--hover); color: var(--text); }
.wa-bubble { max-width: 100%; width: fit-content; padding: 7px 11px 6px; border-radius: 16px 16px 16px 5px; font-size: 14px; line-height: 1.38; word-break: break-word; position: relative;
  background: var(--wa-recv); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.14); border: 0.5px solid var(--hairline-2); }
.wa-quote { border-left: 3px solid currentColor; padding: 3px 8px; margin-bottom: 5px; border-radius: 5px; background: rgba(0,0,0,0.13); display: flex; flex-direction: column; }
.wa-quote b { font-size: 11.5px; font-weight: 700; }
.wa-quote span { font-size: 12px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.wa-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.wa-react { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; padding: 1px 7px; border-radius: 12px; background: var(--wa-recv); border: 0.5px solid var(--hairline); color: var(--text); cursor: pointer; }
.wa-react i { font-style: normal; font-size: 11px; opacity: 0.7; }
.wa-react.mine { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.wa-react:hover { filter: brightness(1.12); }
.wa-act-pop { position: absolute; z-index: 25; display: flex; align-items: center; gap: 1px; padding: 5px; border-radius: 24px;
  background: var(--glass-strong); border: 0.5px solid var(--hairline); box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); animation: pop-in 0.13s var(--ease-out); }
.wa-act-pop[hidden] { display: none; }
.wa-act-pop button { font-size: 20px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.wa-act-pop button:hover { background: var(--hover); transform: scale(1.18); }
.wa-act-reply { color: var(--text-2); border-left: 0.5px solid var(--hairline); margin-left: 2px; }
.wa-act-reply svg { width: 18px; height: 18px; }
.wa-row.mine .wa-bubble { border-radius: 16px 16px 5px 16px; border: 0; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 86%, #fff 14%), var(--accent)); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.wa-sender { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.wa-text { white-space: pre-wrap; }
.wa-meta { float: right; font-size: 10px; opacity: 0.7; margin: 7px 0 -1px 10px; display: inline-flex; align-items: center; gap: 4px; }
.wa-row.mine .wa-meta { opacity: 0.85; }
.wa-lock svg { width: 9px; height: 9px; vertical-align: middle; }
.wa-ticks { font-size: 11px; letter-spacing: -2px; }
.wa-ticks.seen { color: #8fd3ff; }
.wa-empty { text-align: center; color: var(--text-3); font-size: 13px; margin: auto; max-width: 280px; }
.wa-composer { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--glass-2); border-top: 0.5px solid var(--hairline-2); }
.wa-composer-row { display: flex; gap: 8px; align-items: center; }
.wa-replybar[hidden] { display: none; }
.wa-rb-bar { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--field); border-left: 3px solid var(--accent); border-radius: 8px; }
.wa-rb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-rb-tx b { font-size: 12px; color: var(--accent); }
.wa-rb-tx span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-rb-x { width: 26px; height: 26px; border-radius: 50%; color: var(--text-2); flex: 0 0 26px; font-size: 12px; }
.wa-rb-x:hover { background: var(--hover); color: var(--text); }
.wa-peer-tx span.typing { color: var(--accent); font-style: italic; }
.wa-cbtn { width: 38px; height: 38px; border-radius: 50%; color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: 0 0 38px; }
.wa-cbtn svg { width: 21px; height: 21px; } .wa-cbtn:hover { background: var(--hover); color: var(--text); }
.wa-input { flex: 1; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 22px; padding: 10px 16px; font-size: 14px; outline: none; transition: border-color .14s; }
.wa-input:focus { border-color: var(--accent); } .wa-input::placeholder { color: var(--text-3); }
.wa-send { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.wa-send svg { width: 20px; height: 20px; } .wa-send:hover { filter: brightness(1.08); } .wa-send:active { transform: scale(0.94); }
.wa-emoji-pop { position: absolute; left: 10px; bottom: 58px; width: 300px; max-height: 210px; overflow-y: auto; z-index: 40; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
.wa-emoji-pop[hidden] { display: none; }
.wa-emoji-pop button { font-size: 20px; padding: 4px; border-radius: 8px; } .wa-emoji-pop button:hover { background: var(--hover); }
.wa-gifbtn { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }
.wa-gif-pop { position: absolute; left: 10px; bottom: 58px; width: 300px; max-height: 300px; z-index: 40; display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
.wa-gif-pop[hidden] { display: none; }
.wa-gif-cats { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-bottom: 0.5px solid var(--hairline-2); flex: 0 0 auto; }
.wa-gif-cats button { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 14px; color: var(--text-2); white-space: nowrap; background: var(--field); }
.wa-gif-cats button.active { background: var(--accent); color: #fff; }
.wa-gif-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; overflow-y: auto; }
.wa-gif-cell { border-radius: 10px; padding: 4px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wa-gif-cell:hover { background: var(--hover); }
.wa-gif-cell img { width: 100%; height: 100%; object-fit: contain; }
.wa-bubble.media { background: transparent !important; border: 0; box-shadow: none; padding: 0; }
.wa-media { max-width: 128px; max-height: 128px; border-radius: 16px; display: block; }
.wa-bubble.media .wa-meta { float: none; display: block; text-align: right; margin: 3px 2px 0; color: var(--text-3); opacity: 1; }
.wa-bubble.media .wa-quote { margin-bottom: 6px; }
.wa-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px; color: var(--text-2);
  background: var(--win-solid); background-image: radial-gradient(120% 55% at 50% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.wa-ph-badge { width: 76px; height: 76px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 86%, #fff 14%), var(--accent)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent); }
.wa-ph-badge svg { width: 38px; height: 38px; }
.wa-placeholder div { font-size: 21px; font-weight: 700; color: var(--text); }
.wa-placeholder p { font-size: 13.5px; max-width: 320px; }
.wa-ph-e2e { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.wa-ph-e2e svg { width: 13px; height: 13px; }
.wa-modal { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 20px; animation: fade 0.12s ease; }
.wa-modal-card { width: 320px; max-width: 100%; background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; animation: pop-in 0.16s var(--ease-out); }
.wa-modal-h { width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; }
.wa-prof-av { margin: 4px 0; }
.wa-modal-card .btn { width: 100%; }
.wa-prof-name { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

/* ---- Chat v3: roles, badges, moderation ---- */
.wa-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px; margin-left: 5px; width: 15px; height: 15px; border-radius: 5px; flex: 0 0 auto; }
.wa-badge svg { width: 10.5px; height: 10.5px; }
.wa-badge.owner { background: linear-gradient(160deg,#FFD56B,#F4A300); color: #5a3d00; box-shadow: 0 1px 3px rgba(244,163,0,.4); }
.wa-badge.mod { background: linear-gradient(160deg,#5AB0FF,#1E6BFF); color: #fff; box-shadow: 0 1px 3px rgba(30,107,255,.4); }
.wa-bubble.del { background: var(--field) !important; color: var(--text-3); font-style: italic; font-size: 12.5px; }
.wa-del-ic { font-style: normal; margin-right: 2px; }
.wa-act-sep { width: 0.5px; align-self: stretch; background: var(--hairline); margin: 4px 3px; }
.wa-act-mod { font-size: 16px !important; }
.wa-act-mod:hover { background: color-mix(in srgb, #ff5f57 24%, transparent) !important; }
.wa-mod-card { align-items: stretch !important; gap: 0 !important; width: 360px; max-height: 82%; overflow-y: auto; padding: 0 !important; }
.wa-mod-card .wa-modal-h { padding: 16px 18px 12px; position: sticky; top: 0; background: var(--glass-strong); z-index: 1; }
.wa-mod-title { display: inline-flex; align-items: center; gap: 8px; }
.wa-mod-title svg { width: 18px; height: 18px; color: var(--accent); }
.wa-mod-sec { padding: 8px 18px 14px; border-top: 0.5px solid var(--hairline-2); }
.wa-mod-sec h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.wa-mod-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; font-size: 13.5px; }
.wa-mod-row span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-mod-row i { font-style: normal; font-size: 11px; color: var(--text-3); }
.wa-mod-empty { font-size: 12.5px; color: var(--text-3); padding: 3px 2px; }
.wa-mod-add { display: flex; gap: 8px; margin-top: 8px; }
.wa-mod-in { flex: 1; min-width: 0; background: var(--field); border: 0.5px solid var(--hairline); border-radius: 9px; padding: 8px 11px; color: var(--text); font-size: 13px; outline: none; }
.wa-mod-in:focus { border-color: var(--accent); }
.wa-mini { flex: 0 0 auto; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wa-mini:hover { background: var(--field-2); }
.wa-mini.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.wa-prof-on { font-size: 11px; font-weight: 600; color: #fff; background: var(--wa-online); padding: 2px 8px; border-radius: 10px; }
.wa-prof-about { font-size: 13px; color: var(--text-2); text-align: center; }
.wa-prof-e2e { font-size: 11.5px; color: var(--text-3); text-align: center; display: inline-flex; align-items: center; gap: 5px; }
.wa-prof-e2e svg { width: 12px; height: 12px; }

/* ===== Solara AI ===== */
.ai { position: relative; display: grid; grid-template-columns: 256px 1fr; height: 100%; min-height: 0; background: var(--win-solid); }
.ai-spark { width: 24px; height: 24px; display: inline-flex; color: #fff; border-radius: 8px; align-items: center; justify-content: center; background: linear-gradient(150deg, #7c5cff, #ff5e8a); flex: 0 0 auto; }
.ai-spark svg { width: 15px; height: 15px; }
/* sidebar */
.ai-side { display: flex; flex-direction: column; min-height: 0; background: var(--glass-2); border-right: 0.5px solid var(--hairline-2); }
.ai-side-head { display: flex; align-items: center; gap: 8px; padding: 12px; }
.ai-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; flex: 1; min-width: 0; }
.ai-newbtn { width: 32px; height: 32px; border-radius: 9px; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ai-newbtn svg { width: 18px; height: 18px; } .ai-newbtn:hover { background: var(--field-2); }
.ai-chats { flex: 1; overflow: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; }
.ai-chat-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text-2); }
.ai-chat-item > svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.7; }
.ai-chat-item:hover { background: var(--hover); color: var(--text); }
.ai-chat-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.ai-chat-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-chat-del { width: 24px; height: 24px; border-radius: 7px; color: var(--text-3); display: none; align-items: center; justify-content: center; flex: 0 0 auto; }
.ai-chat-item:hover .ai-chat-del { display: flex; } .ai-chat-del:hover { background: var(--hover); color: #ff5f57; } .ai-chat-del svg { width: 14px; height: 14px; opacity: 1; }
.ai-chats-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.ai-side-foot { padding: 8px 10px; border-top: 0.5px solid var(--hairline-2); }
.ai-modsel { width: 100%; appearance: none; -webkit-appearance: none; background-color: var(--field); color: var(--text); border: 0.5px solid var(--hairline); border-radius: 9px; padding: 8px 30px 8px 11px; font-size: 12.5px; font-family: inherit; cursor: pointer; outline: none; transition: background-color .12s var(--ease-out), border-color .12s var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
.ai-modsel:hover { background-color: var(--field-2); }
.ai-modsel:focus { border-color: var(--accent); }
.ai-modsel:disabled { opacity: 0.6; cursor: default; }
.ai-modsel optgroup { font-weight: 700; color: var(--text); }
.ai-modsel option { font-weight: 400; color: var(--text); }
/* main */
.ai-main { display: flex; flex-direction: column; min-height: 0; }
.ai-main-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 0.5px solid var(--hairline-2); }
.ai-side-toggle { display: none; width: 32px; height: 32px; border-radius: 8px; color: var(--text-2); align-items: center; justify-content: center; flex: 0 0 auto; }
.ai-side-toggle svg { width: 20px; height: 20px; } .ai-side-toggle:hover { background: var(--hover); }
.ai-main-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-thread { flex: 1; overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.ai-msg { display: flex; gap: 11px; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user .ai-bubble { max-width: 78%; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 86%, #fff 14%), var(--accent)); color: #fff; padding: 9px 13px; border-radius: 16px 16px 5px 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); word-break: break-word; }
.ai-av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, #7c5cff, #ff5e8a); }
.ai-av svg { width: 18px; height: 18px; }
.ai-col { min-width: 0; flex: 1; }
.ai-content { font-size: 14px; line-height: 1.6; color: var(--text); word-break: break-word; padding-top: 4px; }
.ai-content a { color: var(--accent); }
.ai-content code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; background: color-mix(in srgb, var(--text) 10%, transparent); padding: 1px 5px; border-radius: 5px; }
.ai-content pre { background: #0d1117; border: 0.5px solid var(--hairline); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
.ai-content pre code { background: none; padding: 0; color: #e6edf3; font-size: 12.5px; line-height: 1.5; }
.ai-copy { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--field); border: 0.5px solid var(--hairline); padding: 4px 10px; border-radius: 8px; }
.ai-copy:hover { background: var(--field-2); color: var(--text); }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: ai-blink 1.2s infinite both; }
.ai-typing i:nth-child(2){ animation-delay: .2s; } .ai-typing i:nth-child(3){ animation-delay: .4s; }
@keyframes ai-blink { 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
.ai-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; }
.ai-logo { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, #7c5cff, #ff5e8a); box-shadow: 0 12px 34px rgba(124,92,255,0.4); }
.ai-logo svg { width: 40px; height: 40px; }
.ai-welcome h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ai-welcome p { font-size: 13.5px; color: var(--text-2); max-width: 360px; }
.ai-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; width: min(440px, 100%); }
.ai-ex { text-align: left; font-size: 12.5px; color: var(--text); background: var(--glass-2); border: 0.5px solid var(--hairline); border-radius: 12px; padding: 11px 13px; transition: background .12s, transform .1s; cursor: pointer; }
.ai-ex:hover { background: var(--field-2); transform: translateY(-1px); }
.ai-composer { display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px 6px; }
.ai-input { flex: 1; resize: none; max-height: 140px; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 18px; padding: 11px 16px; font: inherit; font-size: 14px; line-height: 1.4; outline: none; transition: border-color .14s; }
.ai-input:focus { border-color: var(--accent); }
.ai-input::placeholder { color: var(--text-3); }
.ai-send { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.ai-send svg { width: 19px; height: 19px; }
.ai-send:hover { filter: brightness(1.08); } .ai-send:active { transform: scale(0.94); }
.ai-send.stop { background: var(--text-2); box-shadow: none; }
.ai-foot { text-align: center; font-size: 11px; color: var(--text-3); padding: 4px 12px 10px; }
.ai-head-btns { display: flex; align-items: center; gap: 8px; }
.ai-icbtn { width: 32px; height: 32px; border-radius: 50%; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.ai-icbtn svg { width: 18px; height: 18px; } .ai-icbtn:hover { background: var(--hover); color: var(--text); }
.ai-setup { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.42); backdrop-filter: blur(4px); animation: fade 0.12s ease; }
.ai-setup[hidden] { display: none; }
.ai-setup-card { position: relative; width: min(420px, 100%); background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 18px; box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); padding: 22px; animation: pop-in 0.16s var(--ease-out); }
.ai-setup-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; color: var(--text-2); font-size: 12px; } .ai-setup-x:hover { background: var(--hover); color: var(--text); }
.ai-logo.sm { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 6px; box-shadow: none; } .ai-logo.sm svg { width: 26px; height: 26px; }
.ai-setup-card h3 { font-size: 18px; font-weight: 800; margin-top: 6px; }
.ai-setup-card > p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 6px 0 8px; }
.ai-lab { display: block; font-size: 12px; color: var(--text-2); margin: 12px 0 5px; }
.ai-link { color: var(--accent); font-weight: 600; }
.ai-select, .ai-keyin { width: 100%; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; outline: none; }
.ai-select:focus, .ai-keyin:focus { border-color: var(--accent); }
.ai-note { font-size: 12px; color: var(--text-2); background: color-mix(in srgb, #ffd60a 12%, transparent); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
.ai-save { width: 100%; margin-top: 16px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 11px; border-radius: 12px; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.ai-setup-card code { font-family: var(--font-mono); font-size: 12px; background: var(--field); border-radius: 5px; padding: 1px 5px; }
/* model picker */
.ai-model-card { width: min(440px, 100%); }
.ai-model-list { margin-top: 12px; max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.ai-model-group { display: flex; flex-direction: column; gap: 6px; }
.ai-model-grouphd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); padding: 0 2px; }
.ai-model-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 11px; padding: 11px 13px; font-size: 13.5px; transition: background .12s var(--ease-out), border-color .12s var(--ease-out); }
.ai-model-opt:hover { background: var(--field-2); }
.ai-model-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.ai-model-check { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.ai-save:hover { filter: brightness(1.08); }
.ai-once { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 4px; }
.ai-err { font-size: 12px; color: #ff5f57; min-height: 14px; margin-top: 8px; }
/* narrow: sidebar collapses to an overlay */
@media (max-width: 620px) {
  .ai { grid-template-columns: 1fr; }
  .ai-side { position: absolute; inset: 0 auto 0 0; width: 78%; max-width: 280px; z-index: 20; transform: translateX(-100%); transition: transform 0.2s var(--ease-out); box-shadow: var(--shadow-pop); }
  .ai.side-open .ai-side { transform: none; }
  .ai.side-open::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 15; }
  .ai-side-toggle { display: flex; }
}

/* ===== Voice / Video calls ===== */
.call { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--win-solid); }
.call-join { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px;
  background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.call-join-card { width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.call-logo { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 4px; }
.call-voice .call-logo { background: linear-gradient(160deg,#34E07A,#0E9F6E); box-shadow: 0 12px 30px rgba(16,185,129,0.4); }
.call-video .call-logo { background: linear-gradient(160deg,#7C9BFF,#3B4EE0); box-shadow: 0 12px 30px rgba(59,78,224,0.4); }
.call-logo svg { width: 38px; height: 38px; }
.call-join-card h2 { font-size: 23px; font-weight: 800; }
.call-join-card p { font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 320px; }
.call-or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text-3); font-size: 11.5px; margin: 6px 0 2px; }
.call-or::before, .call-or::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }
.call-joinrow { display: flex; gap: 8px; width: 100%; }
.call-code-in { flex: 1; min-width: 0; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 12px; padding: 11px 14px; font-size: 15px; text-align: center; letter-spacing: 3px; text-transform: uppercase; font-family: "JetBrains Mono", ui-monospace, monospace; outline: none; }
.call-code-in:focus { border-color: var(--accent); }
.call-code-in::placeholder { letter-spacing: normal; text-transform: none; font-family: Inter, system-ui, sans-serif; color: var(--text-3); }
.call-join2 { flex: 0 0 auto; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); font-weight: 600; font-size: 14px; padding: 0 18px; border-radius: 12px; }
.call-join2:hover { background: var(--field-2); }
.call-join-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 12px; border-radius: 14px; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.call-join-btn svg { width: 18px; height: 18px; } .call-join-btn:hover { filter: brightness(1.08); }
.call-join-err { font-size: 12.5px; color: #ff5f57; min-height: 16px; }
.call-join-note { font-size: 11.5px; color: var(--text-3); }
.call-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.call-join[hidden], .call-stage[hidden] { display: none; }
.call-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 0.5px solid var(--hairline-2); background: var(--glass-2); }
.call-bar-code { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.call-bar-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); font-weight: 700; }
.call-code-show { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 16px; font-weight: 700; letter-spacing: 2px; color: var(--text); }
.call-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.call-copy svg { width: 15px; height: 15px; } .call-copy:hover { filter: brightness(1.08); }
.call-count { font-size: 12px; color: var(--text-2); background: var(--field); border-radius: 20px; padding: 3px 10px; flex: 0 0 auto; }
.call-count::before { content: "👥 "; }
.call-grid { flex: 1; min-height: 0; overflow: auto; display: flex; flex-wrap: wrap; gap: 12px; align-content: center; justify-content: center; padding: 18px; }
.call-tile { position: relative; width: clamp(190px, 42%, 320px); aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 20%, #21212b, #121218); border: 0.5px solid var(--hairline); box-shadow: 0 8px 24px rgba(0,0,0,0.32); transition: box-shadow .14s; }
.call-tile.speaking { box-shadow: 0 0 0 2.5px var(--accent), 0 8px 24px rgba(0,0,0,0.32); }
.call-feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }
.call-tile.self .call-feed { transform: scaleX(-1); }
.call-tile.video-on .call-feed { display: block; }
.call-tile.video-on .call-avatar { display: none; }
.call-avatar { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 25px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.call-tile-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.62)); color: #fff; font-size: 12px; }
.call-mic { display: inline-flex; flex: 0 0 auto; } .call-mic svg { width: 13px; height: 13px; } .call-mic.muted { color: #ff6b61; }
.call-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* voice mode → compact avatar cards (Discord-style) */
.call-voice .call-grid { gap: 10px 26px; }
.call-voice .call-tile { width: 104px; aspect-ratio: auto; background: none; border: 0; box-shadow: none; overflow: visible; flex-direction: column; gap: 9px; }
.call-voice .call-avatar { width: 74px; height: 74px; font-size: 29px; transition: box-shadow .12s; }
.call-voice .call-tile.speaking .call-avatar { box-shadow: 0 0 0 3px var(--accent), 0 4px 14px rgba(0,0,0,0.35); }
.call-voice .call-tile-foot { position: static; background: none; padding: 0; justify-content: center; color: var(--text); font-size: 12.5px; }
.call-voice .call-name { color: var(--text); }
.call-voice .call-mic.muted { color: #ff5f57; }
.call-bar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.call-tbtn { width: 34px; height: 34px; border-radius: 50%; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; }
.call-tbtn svg { width: 18px; height: 18px; }
.call-tbtn:hover { background: var(--field-2); } .call-tbtn:active { transform: scale(0.92); }
.call-tbtn.off { background: #ff453a; color: #fff; }
.call-end { background: #ff453a; color: #fff; } .call-end:hover { background: #ff2d20; }
/* host moderation */
.call-host-only { display: none; }
.call.is-host .call-host-only { display: flex; }
.call-host-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.5); color: #fff; display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.call-host-btn svg { width: 16px; height: 16px; }
.call.is-host .call-tile:not(.self):hover .call-host-btn { display: flex; }
.call-host-badge { display: none; margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 6px; flex: 0 0 auto; }
.call-tile.host-tile .call-host-badge { display: inline-block; }
.call-voice .call-host-btn { top: 2px; right: 2px; }
.call-voice .call-host-badge { margin-left: 4px; }
.call-pop { position: absolute; z-index: 40; min-width: 196px; padding: 5px; background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-pop); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); animation: pop-in 0.13s var(--ease-out); }
.call-pop[hidden] { display: none; }
.call-pop-head { font-size: 11px; color: var(--text-3); font-weight: 600; padding: 6px 9px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-pop-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 8px; font-size: 13px; color: var(--text); }
.call-pop-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-2); }
.call-pop-item:hover { background: var(--hover); }
.call-pop-item.danger { color: #ff5f57; } .call-pop-item.danger svg { color: #ff5f57; }

/* ===== Watch Together ===== */
.wt { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--win-solid); }
.wt-join { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.wt-join[hidden], .wt-stage[hidden] { display: none; }
.wt-join-card { width: min(380px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wt-logo { width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg,#FF6B9D,#C2185B); box-shadow: 0 12px 30px rgba(194,24,91,.4); }
.wt-logo svg { width: 36px; height: 36px; }
.wt-join-card h2 { font-size: 23px; font-weight: 800; }
.wt-join-card p { font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 320px; }
.wt-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 12px; border-radius: 14px; box-shadow: 0 2px 10px color-mix(in srgb,var(--accent) 40%,transparent); }
.wt-btn svg { width: 18px; height: 18px; } .wt-btn:hover { filter: brightness(1.08); }
.wt-or { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text-3); font-size: 11.5px; margin: 6px 0 2px; }
.wt-or::before, .wt-or::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }
.wt-joinrow { display: flex; gap: 8px; width: 100%; }
.wt-code-in { flex: 1; min-width: 0; background: var(--field); border: .5px solid var(--hairline); color: var(--text); border-radius: 12px; padding: 11px 14px; font-size: 15px; text-align: center; letter-spacing: 3px; text-transform: uppercase; font-family: "JetBrains Mono",ui-monospace,monospace; outline: none; }
.wt-code-in:focus { border-color: var(--accent); } .wt-code-in::placeholder { letter-spacing: normal; text-transform: none; font-family: Inter,sans-serif; color: var(--text-3); }
.wt-join2 { flex: 0 0 auto; background: var(--field); border: .5px solid var(--hairline); color: var(--text); font-weight: 600; padding: 0 18px; border-radius: 12px; } .wt-join2:hover { background: var(--field-2); }
.wt-err { font-size: 12.5px; color: #ff5f57; min-height: 16px; }
.wt-stage { flex: 1; min-height: 0; display: flex; }
.wt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wt-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: .5px solid var(--hairline-2); background: var(--glass-2); }
.wt-bar-code { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.wt-bar-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); font-weight: 700; }
.wt-code-show { font-family: "JetBrains Mono",ui-monospace,monospace; font-size: 15px; font-weight: 700; letter-spacing: 2px; }
.wt-count { font-size: 12px; color: var(--text-2); background: var(--field); border-radius: 20px; padding: 3px 10px; } .wt-count::before { content: "👥 "; }
.wt-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; background: var(--field); color: var(--text); font-size: 12px; font-weight: 600; } .wt-copy svg { width: 14px; height: 14px; } .wt-copy:hover { background: var(--field-2); }
.wt-leave { height: 30px; padding: 0 12px; border-radius: 9px; background: #ff453a; color: #fff; font-size: 12.5px; font-weight: 600; } .wt-leave:hover { background: #ff2d20; }
.wt-urlrow { display: flex; gap: 8px; padding: 8px 12px; border-bottom: .5px solid var(--hairline-2); }
.wt-url { flex: 1; min-width: 0; background: var(--field); border: .5px solid var(--hairline); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 13px; outline: none; } .wt-url:focus { border-color: var(--accent); }
.wt-load { background: var(--accent); color: #fff; font-weight: 600; padding: 0 16px; border-radius: 10px; font-size: 13px; } .wt-load:hover { filter: brightness(1.08); }
.wt-sample { background: var(--field); color: var(--text-2); padding: 0 12px; border-radius: 10px; font-size: 12.5px; } .wt-sample:hover { background: var(--field-2); }
.wt-video-wrap { flex: 1; min-height: 0; position: relative; background: #000; display: flex; align-items: center; justify-content: center; }
.wt-video { width: 100%; height: 100%; display: none; }
.wt-frame { width: 100%; height: 100%; border: 0; background: #000; }
.wt-frame[hidden] { display: none; }
.wt-empty { color: rgba(255,255,255,.7); font-size: 13.5px; text-align: center; padding: 24px; max-width: 360px; }
.wt-side { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; min-height: 0; border-left: .5px solid var(--hairline-2); background: var(--glass-2); }
.wt-side-head { padding: 11px 14px; font-weight: 700; font-size: 14px; border-bottom: .5px solid var(--hairline-2); }
.wt-chat { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.wt-msg { display: flex; flex-direction: column; font-size: 13px; max-width: 92%; }
.wt-msg.mine { align-self: flex-end; align-items: flex-end; }
.wt-from { font-size: 11px; color: var(--text-3); font-weight: 600; margin-bottom: 1px; }
.wt-bubble { background: var(--field); padding: 6px 10px; border-radius: 12px; color: var(--text); word-break: break-word; }
.wt-msg.mine .wt-bubble { background: var(--accent); color: #fff; }
.wt-chatbar { display: flex; gap: 6px; padding: 10px; border-top: .5px solid var(--hairline-2); }
.wt-chat-in { flex: 1; min-width: 0; background: var(--field); border: .5px solid var(--hairline); color: var(--text); border-radius: 18px; padding: 8px 14px; font-size: 13px; outline: none; } .wt-chat-in:focus { border-color: var(--accent); }
.wt-chat-send { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; } .wt-chat-send svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (max-width: 640px) { .wt-side { display: none; } }

/* ===== Camera / Photo Booth ===== */
.cam { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #0c0c10; }
.cam-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cam-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #000; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { animation: cam-flash .4s ease; }
@keyframes cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; font-size: 14px; background: #15151b; }
.cam-error span { color: rgba(255,255,255,.6); font-size: 12px; }
.cam-error[hidden] { display: none; }
.cam-retry { margin-top: 8px; background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 10px; font-weight: 600; }
.cam-filters { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; background: rgba(0,0,0,.4); }
.cam-filter { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #ddd; background: rgba(255,255,255,.1); padding: 6px 12px; border-radius: 16px; }
.cam-filter.active { background: var(--accent); color: #fff; }
.cam-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px; background: #0c0c10; }
.cam-roll { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.cam-shoot { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: #0c0c10; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.cam-shoot svg { width: 28px; height: 28px; } .cam-shoot:active { transform: scale(.94); }
.cam-shot { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.cam-shot img { width: 100%; height: 100%; object-fit: cover; }
.cam-shot-acts { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .12s; }
.cam-shot:hover .cam-shot-acts { opacity: 1; }
.cam-shot-acts button { color: #fff; font-size: 11px; width: 23px; height: 23px; }

/* ===== Music Player ===== */
.mp { display: flex; height: 100%; min-height: 0; background: var(--win-solid); }
.mp-side { width: 240px; flex: 0 0 240px; display: flex; flex-direction: column; min-height: 0; border-right: .5px solid var(--hairline-2); background: var(--glass-2); }
.mp-side-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 14px; border-bottom: .5px solid var(--hairline-2); }
.mp-side-head span { flex: 1; }
.mp-add { width: 30px; height: 30px; border-radius: 8px; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; } .mp-add svg { width: 18px; height: 18px; } .mp-add:hover { background: var(--field-2); }
.mp-list { flex: 1; overflow: auto; padding: 6px; }
.mp-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--text-2); }
.mp-item:hover { background: var(--hover); color: var(--text); }
.mp-item.active { background: color-mix(in srgb,var(--accent) 16%,transparent); color: var(--text); }
.mp-item-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.mp-item-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-item-del { width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); display: none; flex: 0 0 auto; } .mp-item:hover .mp-item-del { display: block; } .mp-item-del:hover { background: var(--hover); color: #ff5f57; }
.mp-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--text-3); line-height: 1.6; }
.mp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.mp-art { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mp-disc { position: relative; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#7C5CFF,#15151b 75%); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 42px; font-weight: 800; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.mp-disc::after { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--win-solid); border: 4px solid rgba(0,0,0,.3); }
.mp-disc.spin { animation: mp-spin 6s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-viz { width: 260px; height: 54px; opacity: .9; }
.mp-now { font-size: 16px; font-weight: 700; text-align: center; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-seek { display: flex; align-items: center; gap: 10px; width: min(420px, 92%); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mp-range { flex: 1; accent-color: var(--accent); height: 4px; }
.mp-controls { display: flex; align-items: center; gap: 20px; }
.mp-cbtn { width: 42px; height: 42px; border-radius: 50%; color: var(--text); display: flex; align-items: center; justify-content: center; } .mp-cbtn svg { width: 22px; height: 22px; } .mp-cbtn:hover { background: var(--hover); }
.mp-play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent); } .mp-play svg { width: 26px; height: 26px; } .mp-play:hover { filter: brightness(1.08); }
.mp-vol { display: flex; align-items: center; gap: 8px; width: min(220px, 72%); color: var(--text-2); } .mp-vol svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 560px) { .mp-side { display: none; } }

@media (max-width: 640px) {
  .wa { grid-template-columns: 1fr; }
  .wa-side { grid-column: 1; }
  .wa-main { display: none; }
  .wa.wa-show-chat .wa-side { display: none; }
  .wa.wa-show-chat .wa-main { display: flex; }
  .wa-back { display: inline-flex; }
}

/* Auth screen */
.auth-wrap { height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 320px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.auth-logo { width: 60px; height: 60px; margin: 0 auto; }
.auth-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.auth-tabs { display: flex; background: var(--field); border-radius: 10px; padding: 3px; }
.auth-tab { flex: 1; padding: 7px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.auth-tab.active { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.auth-card .input { text-align: left; }
.auth-go { padding: 10px; font-size: 14px; }
.auth-err { color: #ff5f57; font-size: 12.5px; min-height: 16px; }
.auth-hint { font-size: 12px; color: var(--text-3); }

.about2 { height: 100%; overflow: auto; padding: 36px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about2-hero { display: flex; flex-direction: column; align-items: center; }
.about2-logo { width: 88px; height: 88px; filter: drop-shadow(0 8px 24px rgba(255,140,80,0.4)); }
.about2-word { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; margin-top: 12px; }
.about2-word span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about2-slogan { font-size: 15px; font-weight: 600; margin-top: 10px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about2-ver { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.about2-tag { max-width: 440px; color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin: 16px 0 0; }
.about2-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.about2-chips span { background: var(--field); border: 0.5px solid var(--hairline); padding: 5px 12px; border-radius: 20px; font-size: 12px; color: var(--text-2); }
.about2-specs { width: 100%; max-width: 460px; margin: 26px 0 0; background: var(--field); border: 0.5px solid var(--hairline-2); border-radius: 14px; overflow: hidden; }
.about2-spec { display: flex; justify-content: space-between; padding: 11px 16px; font-size: 13px; border-bottom: 0.5px solid var(--hairline-2); }
.about2-spec:last-child { border-bottom: 0; }
.about2-spec span { color: var(--text-2); }
.about2-spec b { font-weight: 600; }
.about2-actions { display: flex; gap: 10px; margin-top: 24px; }
.about2-foot { margin-top: 22px; font-size: 11.5px; color: var(--text-3); }

/* App Store grid uses generic tiles */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; }
.store-card { padding: 14px; border-radius: 14px; background: var(--field); display: flex; align-items: center; gap: 12px; cursor: default; transition: background 0.12s, transform 0.12s var(--ease-out); }
.store-card:hover { background: var(--field-2); transform: translateY(-2px); }
.store-get { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--accent); padding: 5px 13px; border-radius: 20px; flex: 0 0 auto; }
.store-card:hover .store-get { filter: brightness(1.08); }

/* =================================================================
   Paint
   ================================================================= */
.paint-wrap { display: flex; flex-direction: column; height: 100%; }
.paint-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); flex-wrap: wrap; }
.paint-tools { display: flex; gap: 4px; background: var(--field); border-radius: 9px; padding: 3px; }
.ptool { width: 32px; height: 30px; border-radius: 7px; font-size: 15px; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.ptool:hover { background: var(--hover); color: var(--text); }
.ptool.active { background: var(--accent); color: #fff; }
.psep { width: 1px; height: 24px; background: var(--hairline); margin: 0 2px; }
.paint-toolbar input[type=color] { width: 34px; height: 30px; border: 0.5px solid var(--hairline); border-radius: 8px; background: transparent; padding: 0; cursor: pointer; }
.paint-toolbar input[type=range] { width: 110px; accent-color: var(--accent); }
.p-size-val { font-size: 12px; color: var(--text-2); min-width: 18px; font-variant-numeric: tabular-nums; }
.p-swatches { display: flex; gap: 4px; }
.p-sw { width: 18px; height: 18px; border-radius: 5px; border: 0.5px solid var(--hairline); }
.p-sw:hover { transform: scale(1.15); }
.paint-canvas-wrap { flex: 1; background: #fff; overflow: hidden; position: relative; }
#p-canvas { display: block; cursor: crosshair; }

/* =================================================================
   Soundboard
   ================================================================= */
.sb2 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sb2-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 0.5px solid var(--hairline-2); background: var(--glass-2); flex-wrap: wrap; }
.sb2-search { flex: 1; min-width: 160px; border-radius: 9px; }
.sb2-toggle.on { background: var(--accent); color: #fff; border-color: transparent; }
.sb2-count { font-size: 12px; color: var(--text-3); margin-left: auto; }
.sb2-grid { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 52px; gap: 10px; align-content: start; }
.sb2-card { position: relative; height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 12px 0 14px; border-radius: 12px; background: var(--field); border: 0.5px solid var(--hairline); cursor: default; text-align: left; transition: transform 0.08s, background 0.12s; overflow: hidden; box-sizing: border-box; }
.sb2-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.sb2-card:hover { background: var(--field-2); transform: translateY(-1px); }
.sb2-card.playing { box-shadow: 0 0 0 2px var(--accent) inset; }
.sb2-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: 0 0 11px; box-shadow: 0 0 6px var(--c); }
.sb2-name { font-size: 12px; font-weight: 500; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.sb2-fav { position: absolute; top: 4px; right: 6px; font-size: 13px; color: var(--text-3); opacity: 0; }
.sb2-card:hover .sb2-fav, .sb2-card.faved .sb2-fav { opacity: 1; }
.sb2-card.faved .sb2-fav { color: #ffcc33; }

/* =================================================================
   Themes
   ================================================================= */
.th-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-width: 560px; }
.th-preset { display: flex; flex-direction: column; gap: 8px; cursor: default; }
.th-preset-sw { position: relative; aspect-ratio: 16/10; border-radius: 12px; box-shadow: inset 0 0 0 0.5px var(--hairline), 0 4px 12px rgba(0,0,0,0.25); border: 2px solid transparent; transition: transform 0.12s var(--ease-out); }
.th-preset:hover .th-preset-sw { transform: translateY(-2px); }
.th-preset.active .th-preset-sw { border-color: var(--text); }
.th-preset-sw i { position: absolute; bottom: 8px; left: 8px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 0 0 1.5px rgba(255,255,255,0.5); }
.th-preset-name { font-size: 12.5px; font-weight: 600; text-align: center; }
.btn.secondary.active { background: var(--accent); color: #fff; border-color: transparent; }
.th-accents { display: flex; gap: 10px; flex-wrap: wrap; }
.th-acc { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2); }
.th-acc.active { border-color: var(--text); transform: scale(1.08); }
.th-wps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 480px; }
.th-wp { aspect-ratio: 16/10; border-radius: 10px; border: 2px solid transparent; box-shadow: inset 0 0 0 0.5px var(--hairline); }
.th-wp.active { border-color: var(--accent); }

/* =================================================================
   App Creator
   ================================================================= */
.ac2 { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--win-solid); }
.ac2-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.ac2-grow { flex: 1; }
.ac2-seg { display: flex; background: var(--field); border-radius: 9px; padding: 2px; gap: 2px; }
.ac2-seg button { width: 30px; height: 26px; border-radius: 7px; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.ac2-seg button svg { width: 17px; height: 17px; }
.ac2-seg button:hover { color: var(--text); }
.ac2-seg button.active { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ac2-run { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.ac2-run svg { width: 15px; height: 15px; } .ac2-run:hover { filter: brightness(1.08); }
.ac2-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.ac2-select { background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 9px; padding: 6px 10px; font-size: 12.5px; outline: none; }
.ac2-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--field); color: var(--text); font-size: 12.5px; font-weight: 600; } .ac2-tbtn svg { width: 16px; height: 16px; } .ac2-tbtn:hover { background: var(--field-2); }
.ac2-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ac2-body.mode-code { grid-template-columns: 1fr; } .ac2-body.mode-code .ac2-right { display: none; }
.ac2-body.mode-preview { grid-template-columns: 1fr; } .ac2-body.mode-preview .ac2-left { display: none; }
.ac2-body.mode-preview .ac2-console-h, .ac2-body.mode-preview .ac2-console { display: none; }
.ac2-left { display: flex; flex-direction: column; min-height: 0; border-right: 0.5px solid var(--hairline-2); }
.ac2-tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--glass-2); }
.ac2-tab { padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 12.5px; font-family: var(--font-mono); color: var(--text-2); }
.ac2-tab:hover { background: var(--hover); }
.ac2-tab.active { background: #14111e; color: var(--text); }
html[data-theme="light"] .ac2-tab.active { background: #fff; }
.ac2-editor { flex: 1; display: flex; min-height: 0; background: #14111e; }
html[data-theme="light"] .ac2-editor { background: #fff; }
.ac2-gutter { padding: 12px 8px; text-align: right; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--text-3); background: rgba(0,0,0,0.2); user-select: none; overflow: hidden; min-width: 38px; }
.ac2-code { flex: 1; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 12.5px; padding: 12px; line-height: 1.55; white-space: pre; overflow: auto; }
.ac2-right { display: flex; flex-direction: column; min-height: 0; }
.ac2-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.ac2-dots { display: flex; gap: 5px; } .ac2-dots i { width: 9px; height: 9px; border-radius: 50%; }
.ac2-dots i:nth-child(1){ background:#ff5f57; } .ac2-dots i:nth-child(2){ background:#febc2e; } .ac2-dots i:nth-child(3){ background:#28c840; }
.ac2-bar-title { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); background: var(--field); border-radius: 7px; padding: 4px 12px; font-family: var(--font-mono); }
.ac2-bar-btn { width: 28px; height: 28px; border-radius: 7px; color: var(--text-2); display: flex; align-items: center; justify-content: center; } .ac2-bar-btn svg { width: 16px; height: 16px; } .ac2-bar-btn:hover { background: var(--hover); color: var(--text); }
.ac2-frame { flex: 1; border: 0; background: #fff; min-height: 0; }
.ac2-console-h { display: flex; align-items: center; justify-content: space-between; padding: 5px 12px; background: var(--glass-2); border-top: 0.5px solid var(--hairline-2); font-size: 11px; font-weight: 600; color: var(--text-2); }
.ac2-clear { font-size: 11px; color: var(--text-2); padding: 2px 8px; border-radius: 6px; }
.ac2-clear:hover { background: var(--hover); color: var(--text); }
.ac2-console { height: 110px; overflow: auto; padding: 6px 12px; background: rgba(0,0,0,0.28); font-family: var(--font-mono); font-size: 11.5px; }
.ac2-log { padding: 2px 0; white-space: pre-wrap; word-break: break-word; border-bottom: 0.5px solid var(--hairline-2); }
.ac2-log.error { color: #ff6b6b; } .ac2-log.warn { color: #ffcf5b; } .ac2-log.log, .ac2-log.info { color: var(--text); }

/* =================================================================
   Notepad extras / Python
   ================================================================= */
.np-name { max-width: 180px; }
.np-status { display: flex; justify-content: space-between; padding: 6px 14px; font-size: 11.5px; color: var(--text-3); background: var(--glass-2); border-top: 0.5px solid var(--hairline-2); }
.np-picker { position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 20; }
.np-picker-box { width: 300px; max-height: 70%; overflow: auto; background: var(--glass-strong); border: 0.5px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 8px; }
.np-picker-h { font-weight: 600; padding: 8px 10px; font-size: 13px; }
.np-pick { padding: 9px 10px; border-radius: 8px; font-size: 13px; cursor: default; }
.np-pick:hover { background: var(--accent); color: #fff; }
.np-picker-f { padding: 8px; display: flex; justify-content: flex-end; }
.py-status { font-size: 12px; color: var(--text-2); margin-left: auto; }

/* =================================================================
   Flash Games
   ================================================================= */
.fg-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.fg-browse { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.fg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 12px; flex-wrap: wrap; }
.fg-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.fg-count { font-size: 15px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.fg-actions { display: flex; align-items: center; gap: 8px; }
.fg-search { width: 200px; border-radius: 9px; }
.fg-grid { flex: 1; overflow: auto; padding: 6px 22px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 14px; align-content: start; }
.fg-card { cursor: pointer; }
.fg-thumb { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.14s var(--ease-out), box-shadow 0.14s; position: relative; overflow: hidden; }
.fg-thumb span { font-size: 30px; font-weight: 800; color: rgba(255,255,255,0.92); text-shadow: 0 2px 4px rgba(0,0,0,0.3); letter-spacing: -0.02em; }
.fg-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fg-card:hover .fg-thumb { box-shadow: 0 10px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.3); }
.fg-hover { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 8px 7px; background: linear-gradient(transparent 42%, rgba(0,0,0,0.8)); opacity: 0; transition: opacity 0.14s; }
.fg-thumb:hover .fg-hover { opacity: 1; }
.fg-hovername { font-size: 12px; font-weight: 600; color: #fff; text-align: center; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.7); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fg-player { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.fg-stage { flex: 1; background: #000; min-height: 0; position: relative; }
.fg-stage ruffle-player, .fg-stage canvas { width: 100% !important; height: 100% !important; display: block; }
.fg-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.fg-stage { overflow: hidden; }
.fg-frame.fit { position: absolute; top: 0; left: 0; transform-origin: top left; will-change: transform; }
.lumin-frame { width: 100%; height: 100%; border: 0; display: block; background: #0b0b12; }
.lumin-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 36px; background: var(--glass-strong); }
.lumin-fb-ico { font-size: 46px; }
.lumin-fallback h3 { margin: 0; font-size: 18px; font-weight: 600; }
.lumin-fallback p { margin: 0; max-width: 420px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.lumin-fb-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* Game Center */
.gc { height: 100%; overflow: auto; padding: 30px 26px; display: flex; flex-direction: column; align-items: center; }
.gc-hero { text-align: center; margin-bottom: 24px; }
.gc-logo { font-size: 46px; }
.gc-hero h2 { margin: 8px 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.gc-hero p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.gc-cards { display: flex; flex-direction: column; gap: 12px; width: min(440px, 100%); }
.gc-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--field); border: 0.5px solid var(--hairline-2); text-align: left; transition: transform 0.12s var(--ease-out), background 0.12s; }
.gc-card:hover { background: var(--field-2); transform: translateY(-2px); }
.gc-card-ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 48px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.gc-card-tx b { display: block; font-size: 15px; font-weight: 600; }
.gc-card-tx span { font-size: 12px; color: var(--text-2); }
.gc-note { max-width: 440px; margin-top: 22px; font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.5; }
.fg-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; background: #000; text-align: center; }
.fg-loading .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.18); border-top-color: #ff8a3a; animation: spin 0.7s linear infinite; }

/* =================================================================
   Calculator
   ================================================================= */
.calc { display: flex; flex-direction: column; height: 100%; background: #1c1c1e; }
.calc-display { flex: 0 0 auto; min-height: 110px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px 24px; color: #fff; font-weight: 300; font-size: 54px; line-height: 1; overflow: hidden; font-variant-numeric: tabular-nums; }
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); }
.calc-key { background: #4a4a4c; color: #fff; font-size: clamp(18px, 4vw, 26px); font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: default; transition: filter 0.1s; user-select: none; }
.calc-key:hover { filter: brightness(1.15); }
.calc-key:active { filter: brightness(0.85); }
.calc-key.fn { background: #6a6a6c; color: #fff; }
.calc-key.op { background: #ff9f0a; color: #fff; font-size: 30px; }
.calc-key.op.active { background: #fff; color: #ff9f0a; }
.calc-key.zero { grid-column: span 2; justify-content: flex-start; padding-left: 7%; }

/* =================================================================
   Clock
   ================================================================= */
.clk { display: flex; flex-direction: column; height: 100%; }
.clk-tabs { display: flex; gap: 2px; padding: 8px 10px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.clk-tab { padding: 6px 14px; border-radius: 8px; font-size: 13px; color: var(--text-2); }
.clk-tab:hover { background: var(--hover); color: var(--text); }
.clk-tab.active { background: var(--accent); color: #fff; }
.clk-body { flex: 1; overflow: auto; min-height: 0; }
.clk-world { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px; }
.clk-city { background: var(--field); border-radius: 12px; padding: 14px; }
.clk-city-n { font-size: 12px; color: var(--text-2); }
.clk-city-t { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.clk-city-d { font-size: 11px; color: var(--text-3); }
.clk-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; min-height: 100%; }
.clk-big { font-size: 64px; font-weight: 200; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.clk-btns { display: flex; gap: 14px; }
.clk-btns .btn { min-width: 90px; }
.clk-set { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-2); }
.clk-set input { width: 64px; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); font-size: 28px; text-align: center; border-radius: 10px; padding: 8px 4px; }
.clk-laps { width: min(320px, 90%); margin-top: 8px; }
.clk-lap { display: flex; justify-content: space-between; padding: 8px 4px; border-top: 0.5px solid var(--hairline-2); font-size: 13px; font-variant-numeric: tabular-nums; }

/* =================================================================
   Calendar
   ================================================================= */
.cal { display: flex; flex-direction: column; height: 100%; }
.cal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.cal-title { font-size: 19px; font-weight: 700; flex: 1; }
.cal-nav { width: 30px; height: 30px; border-radius: 8px; font-size: 18px; color: var(--text-2); }
.cal-nav:hover { background: var(--hover); color: var(--text); }
.cal-today { padding: 6px 12px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 14px; }
.cal-dow div { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-3); padding-bottom: 6px; text-transform: uppercase; }
.cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; gap: 4px; padding: 0 14px 14px; min-height: 0; }
.cal-cell { border-radius: 8px; padding: 4px 5px; font-size: 12px; cursor: default; overflow: hidden; display: flex; flex-direction: column; gap: 2px; border: 0.5px solid transparent; }
.cal-cell:not(.empty):hover { background: var(--hover); }
.cal-cell.today { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.cal-num { font-weight: 600; align-self: flex-start; }
.cal-cell.today .cal-num { background: var(--accent); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-ev { font-size: 10.5px; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-more { font-size: 10px; color: var(--text-3); }

/* =================================================================
   Image Viewer
   ================================================================= */
.iv { display: flex; flex-direction: column; height: 100%; }
.iv-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); }
.iv-zoom { font-size: 12px; color: var(--text-2); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.iv-stage { flex: 1; min-height: 0; background: repeating-conic-gradient(#1a1a1f 0% 25%, #15151a 0% 50%) 0 / 24px 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.iv-img { max-width: 100%; max-height: 100%; transition: transform 0.12s ease; object-fit: contain; }
.iv-empty { color: var(--text-3); font-size: 13px; padding: 30px; text-align: center; }
.iv-strip { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: var(--glass-2); border-top: 0.5px solid var(--hairline-2); }
.iv-strip:empty { display: none; }
.iv-thumb { flex: 0 0 auto; width: 66px; cursor: default; border-radius: 8px; overflow: hidden; border: 2px solid transparent; }
.iv-thumb.active { border-color: var(--accent); }
.iv-thumb img { width: 100%; height: 46px; object-fit: cover; display: block; }
.iv-thumb span { display: block; font-size: 9.5px; color: var(--text-3); padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =================================================================
   Terminal
   ================================================================= */
.term { height: 100%; overflow: auto; background: #0c0c10; color: #d8d8e0; font-family: var(--font-mono); font-size: 13px; padding: 12px 14px; line-height: 1.5; }
.term-row { white-space: pre-wrap; word-break: break-word; margin-bottom: 1px; }
.term-prompt { color: #30d158; font-weight: 600; }
.term-tilde { color: #5ac8fa; }
.term-line { display: flex; align-items: baseline; gap: 8px; }
.term-in { flex: 1; background: transparent; border: 0; outline: none; color: #d8d8e0; font-family: var(--font-mono); font-size: 13px; }
.term-err { color: #ff6b6b; } .term-dim { color: #6b6b78; } .term-accent { color: #ff9f0a; }
.term-app { color: #5ac8fa; } .term-fetch { margin: 0; line-height: 1.4; } .term-fetch b { color: #fff; }

/* =================================================================
   Retro (webretro)
   ================================================================= */
.retro { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.retro-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--glass-2); border-bottom: 0.5px solid var(--hairline-2); flex-wrap: wrap; }
.retro-sys { padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--field); border: 0.5px solid var(--hairline); }
.retro-sys:hover { background: var(--field-2); color: var(--text); }
.retro-sys.active { background: var(--accent); color: #fff; border-color: transparent; }
.retro-stage { flex: 1; min-height: 0; position: relative; background: #000; }
.retro-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.retro-welcome { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px; overflow: auto; background: radial-gradient(circle at 50% 35%, #1a1430, #0a0814 70%); color: var(--text); }
.retro-logo { font-size: 44px; }
.retro-welcome h2 { margin: 0; font-size: 22px; font-weight: 700; }
.retro-welcome p { margin: 0; font-size: 13px; color: var(--text-2); max-width: 420px; }
.retro-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: min(560px, 100%); margin: 14px 0; }
.retro-card { padding: 16px 10px; border-radius: 14px; background: var(--g); color: #fff; display: flex; flex-direction: column; gap: 3px; cursor: default; box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.12s var(--ease-out); }
.retro-card:hover { transform: translateY(-2px) scale(1.02); }
.retro-card b { font-size: 15px; font-weight: 700; }
.retro-card span { font-size: 11px; opacity: 0.85; }
.retro-note { font-size: 11.5px !important; color: var(--text-3) !important; }

/* =================================================================
   Control Center
   ================================================================= */
.cc {
  position: absolute; top: 34px; right: 8px;
  width: 320px; z-index: 6000;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--glass);
  border: 0.5px solid var(--hairline);
  border-radius: var(--r3);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  box-shadow: var(--shadow-pop);
  transform-origin: top right;
  animation: pop-in 0.2s var(--ease-out);
}
@keyframes pop-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cc-row { display: flex; gap: 10px; }
.cc-tile { background: var(--glass-2); border: 0.5px solid var(--hairline-2); border-radius: var(--r2); padding: 12px; }
.cc-wide { flex: 1; }
.cc-square { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cc-square-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--field-2); display: flex; align-items: center; justify-content: center; color: var(--text); }
.cc-square-ico svg { width: 18px; height: 18px; display: block; }
.cc-square.on .cc-square-ico { background: var(--accent); color: #fff; }
.cc-square-label { font-size: 12.5px; font-weight: 500; }
.cc-tile-grid { display: flex; flex-direction: column; gap: 6px; }
.cc-pill { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.cc-pill:hover { background: var(--hover); }
.cc-pill-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--field-2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cc-pill.on .cc-pill-ico { background: var(--accent); }
.cc-pill-tx { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.cc-pill-tx b { font-size: 12.5px; font-weight: 600; }
.cc-pill-tx i { font-size: 11px; font-style: normal; color: var(--text-2); }
.cc-slider-tile { display: flex; flex-direction: column; gap: 8px; }
.cc-slider-label { font-size: 12.5px; font-weight: 600; }
.cc-slider { display: flex; align-items: center; gap: 10px; }
.cc-slider-ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--text-2); flex: 0 0 18px; }
.cc-slider-ico svg { width: 16px; height: 16px; display: block; }
.cc-slider input[type=range] { flex: 1; -webkit-appearance: none; height: 26px; border-radius: 13px; background: var(--field-2); outline: none; }
.cc-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); cursor: pointer; }
.cc-wp-swatches { display: flex; gap: 8px; }
.cc-wp-swatches .sw { width: 40px; height: 28px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; }
.cc-wp-swatches .sw.active { border-color: var(--accent); }

/* =================================================================
   Spotlight
   ================================================================= */
.spot { position: absolute; inset: 0; z-index: 7000; display: flex; align-items: flex-start; justify-content: center; padding-top: 16vh; background: rgba(0,0,0,0.18); animation: fade 0.12s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.spot-box { width: min(620px, 90vw); background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r3); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop-in 0.18s var(--ease-out); }
.spot-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.spot-ico { color: var(--text-2); flex: 0 0 auto; }
#spot-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-size: 21px; font-weight: 400; }
#spot-input::placeholder { color: var(--text-3); }
.spot-results { max-height: 50vh; overflow: auto; border-top: 0.5px solid var(--hairline-2); padding: 6px; }
.spot-results:empty { display: none; }
.spot-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: default; }
.spot-item.sel { background: var(--accent); color: #fff; }
.spot-item img { width: 28px; height: 28px; flex: 0 0 28px; }
.spot-item .si-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--field-2); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.spot-item .si-tx { display: flex; flex-direction: column; line-height: 1.25; }
.spot-item .si-tx b { font-size: 13.5px; font-weight: 500; }
.spot-item .si-tx span { font-size: 11.5px; opacity: 0.7; }

/* =================================================================
   Context menus
   ================================================================= */
.ctx { position: fixed; z-index: 8000; min-width: 220px; padding: 5px; background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r2); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--text); animation: pop-in 0.14s var(--ease-out); transform-origin: top left; }
.ctx-item { padding: 7px 11px; border-radius: 6px; cursor: default; }
.ctx-item:hover { background: var(--accent); color: #fff; }
.ctx-sep { height: 0.5px; background: var(--hairline); margin: 4px 6px; }

/* =================================================================
   In-OS dialogs (alert / confirm / prompt)
   ================================================================= */
.dlg-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,0.32); backdrop-filter: blur(2px); animation: fade 0.12s ease; }
.dlg-overlay.closing { animation: fade 0.14s ease reverse; }
.dlg { width: min(340px, 100%); background: var(--glass); border: 0.5px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-pop); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); padding: 22px 22px 18px; text-align: center; animation: pop-in 0.18s var(--ease-out); }
.dlg-icon { font-size: 30px; margin-bottom: 8px; }
.dlg-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.dlg-msg { font-size: 13px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; }
.dlg-input { width: 100%; margin-top: 14px; background: var(--field); border: 0.5px solid var(--hairline); color: var(--text); border-radius: 9px; padding: 9px 12px; font-size: 13.5px; outline: none; resize: vertical; }
.dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,0.25); }
.dlg-btns { display: flex; gap: 8px; margin-top: 18px; }
.dlg-btns .btn { flex: 1; padding: 9px; }
.btn.danger { background: #ff3b30; border-color: transparent; color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
/* Get Info panel */
.info-dlg { text-align: left; width: min(360px, 100%); }
.info-head { display: flex; align-items: center; gap: 14px; }
.info-head .app-tile { width: 56px; height: 56px; flex: 0 0 56px; }
.info-name { font-size: 18px; font-weight: 700; }
.info-kind { font-size: 12.5px; color: var(--text-2); }
.info-desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 14px; }
.info-rows { margin-top: 14px; border-top: 0.5px solid var(--hairline); }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 0.5px solid var(--hairline-2); font-size: 12.5px; }
.info-row span { color: var(--text-3); }
.info-row b { font-weight: 600; }

/* =================================================================
   Notifications
   ================================================================= */
#notif-stack { position: absolute; top: 36px; right: 10px; z-index: 6500; display: flex; flex-direction: column; gap: 10px; width: 320px; }
.notif { background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r2); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--shadow-pop); animation: notif-in 0.3s var(--ease-spring); }
@keyframes notif-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.notif.leaving { animation: notif-out 0.25s var(--ease-out) forwards; }
@keyframes notif-out { to { transform: translateX(120%); opacity: 0; } }
.notif img { width: 30px; height: 30px; flex: 0 0 30px; }
.notif .n-tx b { font-size: 13px; display: block; }
.notif .n-tx span { font-size: 12px; color: var(--text-2); }

/* =================================================================
   Notification Center
   ================================================================= */
.ncenter { position: absolute; top: 34px; right: 8px; width: 330px; max-height: 72vh; z-index: 6000; display: flex; flex-direction: column; background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r3); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); box-shadow: var(--shadow-pop); overflow: hidden; animation: pop-in 0.18s var(--ease-out); transform-origin: top right; }
.ncenter-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; font-size: 14px; border-bottom: 0.5px solid var(--hairline-2); }
.nc-clear { font-size: 12px; color: var(--accent); font-weight: 500; }
.ncenter-list { overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.nc-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--glass-2); }
.nc-item .app-tile { flex: 0 0 30px; }
.nc-tx { flex: 1; min-width: 0; } .nc-tx b { font-size: 13px; display: block; } .nc-tx span { font-size: 12px; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-at { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.nc-empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 36px 12px; }

/* =================================================================
   Account menu (top bar)
   ================================================================= */
.mb-account { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 50%; }
.mb-account:hover { background: var(--hover); }
.acct-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #888; color: #fff; font-weight: 600; overflow: hidden; flex: 0 0 auto; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-av.sm { width: 22px; height: 22px; font-size: 11px; }
.acct-av.lg { width: 64px; height: 64px; font-size: 28px; }
.acct-av.guest { background: var(--field-2); color: var(--text-2); }
.acct { position: absolute; top: 34px; right: 8px; width: 300px; z-index: 6000; background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r3); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); box-shadow: var(--shadow-pop); padding: 16px; animation: pop-in 0.18s var(--ease-out); transform-origin: top right; }
.acct-head { display: flex; align-items: center; gap: 12px; }
.acct-av-edit { position: relative; }
.acct-cam { position: absolute; bottom: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--glass-strong); }
.acct-name { font-size: 16px; font-weight: 700; }
.acct-sub { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.acct-note { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 12px 0; }
.acct-emoji { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 12px 0 4px; }
.acct-emoji button { font-size: 17px; padding: 4px; border-radius: 7px; } .acct-emoji button:hover { background: var(--hover); }
.acct-upload { grid-column: span 7; font-size: 12px; color: var(--accent); cursor: pointer; padding: 6px; text-align: center; }
.acct-label { font-size: 12px; color: var(--text-2); display: block; margin: 12px 0 6px; }
.acct-bio { width: 100%; resize: none; height: 54px; border-radius: 10px; }
.acct-save { width: 100%; margin-top: 10px; }
.acct .btn { padding: 9px; }
.acct-actions { display: flex; gap: 8px; margin-top: 10px; }
.acct-actions .btn { flex: 1; }

/* =================================================================
   Desktop weather — frameless, sits right on the wallpaper
   ================================================================= */
#widget-layer { position: absolute; inset: 28px 0 0 0; z-index: 2; pointer-events: none; }
.weather-widget {
  position: absolute; pointer-events: auto; cursor: grab; user-select: none;
  color: #fff; min-width: 104px; line-height: 1.2; text-align: right;
  text-shadow: 0 0 3px rgba(0,0,0,0.72), 0 1px 4px rgba(0,0,0,0.62), 0 2px 14px rgba(0,0,0,0.4);
  transition: transform 0.12s var(--ease-out);
}
.weather-widget.dragging { cursor: grabbing; transform: scale(1.04); }
.weather-widget .ww-top { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.weather-widget .ww-ic { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.weather-widget .ww-tp { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; }
.weather-widget .ww-cond { font-size: 13.5px; font-weight: 500; opacity: 0.95; margin-top: 3px; }
.weather-widget .ww-city { display: inline-block; font-size: 12px; opacity: 0.85; margin-top: 5px; cursor: pointer; }
.weather-widget .ww-city:hover { opacity: 1; text-decoration: underline; }
/* Weather city picker (live autocomplete) */
.city-overlay { position: fixed; inset: 0; z-index: 8500; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(0,0,0,0.32); backdrop-filter: blur(3px); animation: fade 0.12s ease; }
.city-picker { width: min(420px, 92%); background: var(--glass); border: 0.5px solid var(--hairline); border-radius: var(--r3); box-shadow: var(--shadow-pop); backdrop-filter: blur(50px) saturate(180%); -webkit-backdrop-filter: blur(50px) saturate(180%); overflow: hidden; animation: pop-in 0.16s var(--ease-out); }
.city-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 0.5px solid var(--hairline); }
.city-head svg { width: 18px; height: 18px; color: var(--text-3); flex: 0 0 auto; }
.city-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-size: 15px; }
.city-input::placeholder { color: var(--text-3); }
.city-x { width: 24px; height: 24px; border-radius: 50%; background: var(--field); color: var(--text); font-size: 11px; flex: 0 0 auto; cursor: pointer; }
.city-x:hover { background: var(--field-2); }
.city-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.city-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.city-item.sel, .city-item:hover { background: var(--accent); color: #fff; }
.city-flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
img.city-flag { width: 27px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.18); }
.city-name { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; overflow: hidden; }
.city-name small { font-size: 12px; font-weight: 400; opacity: 0.7; }
.city-item.sel small, .city-item:hover small { opacity: 0.9; }
.city-empty { padding: 18px; text-align: center; color: var(--text-3); font-size: 13px; }

/* =================================================================
   Lock / login screen
   ================================================================= */
html[data-unlocked="1"] #lockscreen { display: none !important; }
.lock { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; color: #fff; background: rgba(10,10,16,0.45); backdrop-filter: blur(44px) saturate(160%); -webkit-backdrop-filter: blur(44px) saturate(160%); transition: opacity 0.5s ease, transform 0.5s var(--ease-out); }
.lock.unlocking { opacity: 0; transform: scale(1.05); pointer-events: none; }
.lk-clock { margin-top: 11vh; text-align: center; text-shadow: 0 4px 30px rgba(0,0,0,0.45); }
.lk-time { font-size: clamp(64px, 13vw, 116px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lk-date { font-size: 17px; font-weight: 500; opacity: 0.92; margin-top: 6px; }
.lk-auth { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 11vh; }
.lk-av { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 600; color: #fff; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.lk-av img { width: 100%; height: 100%; object-fit: cover; }
.lk-logo { width: 70px; height: 70px; filter: drop-shadow(0 6px 20px rgba(255,140,80,0.5)); }
.lk-name { font-size: 19px; font-weight: 600; }
.lk-form { display: flex; align-items: center; gap: 8px; }
.lk-form-col { flex-direction: column; }
.lk-input { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; outline: none; width: 220px; text-align: center; }
.lk-input.wide { width: 264px; }
.lk-input::placeholder { color: rgba(255,255,255,0.6); }
.lk-input:focus { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.2); }
.lk-go { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; font-size: 18px; flex: 0 0 42px; }
.lk-go:hover { background: rgba(255,255,255,0.38); }
.lk-submit { width: 264px; padding: 11px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
.lk-submit:hover { filter: brightness(1.08); }
.lk-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.12); border-radius: 10px; padding: 3px; }
.lk-tab { padding: 6px 16px; border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.8); }
.lk-tab.active { background: rgba(255,255,255,0.26); color: #fff; }
.lk-err { color: #ff9a9a; font-size: 12.5px; min-height: 15px; }
.lk-links { font-size: 12.5px; opacity: 0.85; }
.lk-links a { color: #fff; cursor: pointer; text-decoration: underline; }

/* =================================================================
   Boot
   ================================================================= */
.boot { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #14121f, #060509 70%); transition: opacity 0.7s ease; }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.boot-logo { width: 92px; height: 92px; animation: boot-logo 2s var(--ease-out) infinite alternate; }
@keyframes boot-logo { from { transform: scale(0.96); filter: drop-shadow(0 0 16px rgba(255,150,80,0.4)); } to { transform: scale(1.04); filter: drop-shadow(0 0 30px rgba(255,120,140,0.6)); } }
.boot-word { font-size: 22px; font-weight: 600; letter-spacing: 0.32em; text-transform: lowercase; color: #fff; padding-left: 0.32em; }
.boot-bar { width: 180px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.boot-bar-fill { width: 0%; height: 100%; border-radius: 3px; background: var(--brand-grad); transition: width 0.2s ease; }

/* =================================================================
   Dimmer
   ================================================================= */
#dimmer { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9000; transition: opacity 0.2s ease; }

/* =================================================================
   Mobile
   ================================================================= */
@media (max-width: 720px) {
  #icon-grid { grid-template-columns: repeat(2, 84px); top: 36px; right: 6px; }
  .window:not(.maximized) { inset: 28px 0 0 0 !important; width: 100% !important; height: calc(100% - 28px) !important; border-radius: 0; }
  .dock-app { width: 46px; height: 46px; }
  .mb-menu { display: none; }
  .settings-grid, .fe-wrap { grid-template-columns: 1fr; }
}

/* ===== Movies / Anime / Music (Solara-native, theme-aware) ======== */
.mvapp, .anapp, .muapp { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--win-solid); color:var(--text); font-family:'Outfit','Inter',system-ui,sans-serif; overflow:hidden; }
.mv-spin, .an-spin, .mu-spin { width:26px; height:26px; border-radius:50%; border:2.5px solid var(--field-2); border-top-color:var(--accent); animation:musp .7s linear infinite; margin:0 auto; }
@keyframes musp { to { transform:rotate(360deg); } }

.mv-top, .an-top, .mu-top { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--hairline-2); flex-wrap:wrap; flex:0 0 auto; }
.mv-brand, .an-brand, .mu-brand { font-size:22px; font-weight:800; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.02em; }
.mv-seg, .an-seg, .mu-seg { display:flex; gap:2px; background:var(--field); border-radius:11px; padding:3px; }
.mv-seg-b, .an-seg-b, .mu-seg-b { border:0; background:transparent; color:var(--text-2); font:inherit; font-size:13px; font-weight:600; padding:6px 13px; border-radius:8px; cursor:pointer; }
.mv-seg-b.active, .an-seg-b.active, .mu-seg-b.active { background:var(--accent); color:#fff; }
.mv-search, .an-search, .mu-search { margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--hairline); border-radius:12px; padding:8px 12px; color:var(--text-2); flex:0 1 300px; min-width:180px; }
.mv-search input, .an-search input, .mu-search input { border:0; background:transparent; color:var(--text); font:inherit; font-size:14px; outline:none; width:100%; }
.mv-search:focus-within, .an-search:focus-within, .mu-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.25); }

.mv-scroll, .an-scroll { flex:1; overflow-y:auto; padding:18px; }
.mv-rowlabel, .an-rowlabel { font-size:15px; font-weight:700; margin:0 2px 14px; color:var(--text); }
.mv-grid, .an-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px 14px; }
.mv-card, .an-card { border:0; background:transparent; padding:0; cursor:pointer; text-align:left; color:inherit; font:inherit; display:flex; flex-direction:column; gap:8px; }
.mv-poster, .an-poster { position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; background:var(--field-2); box-shadow:0 6px 20px rgba(0,0,0,.3); transition:transform .18s, box-shadow .18s; }
.mv-card:hover .mv-poster, .an-card:hover .an-poster { transform:translateY(-4px); box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.mv-poster img, .an-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.mv-noimg, .an-noimg { width:100%; height:100%; display:grid; place-items:center; font-size:34px; font-weight:800; color:var(--text-3); }
.mv-rate, .an-score { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.72); color:#ffd166; font-size:11.5px; font-weight:700; padding:3px 7px; border-radius:8px; backdrop-filter:blur(6px); }
.mv-ct, .an-ct { display:flex; flex-direction:column; gap:1px; padding:0 2px; }
.mv-cttitle, .an-cttitle { font-size:13.5px; font-weight:600; line-height:1.25; color:var(--text); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mv-ctyear, .an-ctsub { font-size:12px; color:var(--text-2); }
.mv-empty, .an-empty, .mu-msg { color:var(--text-2); text-align:center; padding:50px 20px; font-size:14px; }
.mv-more, .an-more { min-height:24px; padding:10px 0; }

.mv-detail, .an-detail, .mv-player, .an-player { position:absolute; inset:0; z-index:5; background:var(--win-solid); overflow-y:auto; animation:mvfade .2s ease; }
@keyframes mvfade { from { opacity:0; } to { opacity:1; } }
.mv-dbg, .an-dbg { position:absolute; top:0; left:0; right:0; height:320px; background-size:cover; background-position:center top; z-index:0; }
.mv-dbg::after, .an-dbg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 25%, var(--win-solid)); }
.mv-dbody, .an-dbody { position:relative; z-index:1; padding:64px 28px 28px; max-width:920px; margin:0 auto; }
.mv-dhead, .an-dhead { display:flex; gap:22px; align-items:flex-end; }
.mv-dposter, .an-dposter { width:150px; flex:0 0 150px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.mv-dmeta { min-width:0; }
.mv-dmeta h2, .an-dmeta h2 { margin:0 0 6px; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.mv-dsub, .an-dsub { color:var(--text-2); font-size:13.5px; margin-bottom:10px; }
.mv-dgenres, .an-dgenres { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.mv-dgenres span, .an-dgenres span { font-size:11.5px; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); padding:3px 9px; border-radius:20px; }
.mv-doverview, .an-doverview { color:var(--text-2); font-size:13.5px; line-height:1.55; margin:0 0 16px; max-height:120px; overflow-y:auto; }
.mv-play { border:0; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:14px; padding:11px 22px; border-radius:12px; cursor:pointer; box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.mv-play:hover { filter:brightness(1.08); }
.mv-dloading { display:flex; justify-content:center; align-items:center; padding:90px; color:var(--text-2); }

.mv-eps { margin-top:26px; }
.mv-epsbar { margin-bottom:14px; }
.mv-seasonsel { background:var(--field); border:1px solid var(--hairline); color:var(--text); font:inherit; font-size:13px; padding:8px 12px; border-radius:10px; cursor:pointer; }
.mv-eplist { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; min-height:40px; }
.mv-ep { display:flex; gap:10px; align-items:center; border:1px solid var(--hairline-2); background:var(--field); border-radius:12px; padding:8px; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.mv-ep:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.mv-epthumb { position:relative; width:76px; height:44px; flex:0 0 76px; border-radius:8px; overflow:hidden; background:var(--field-2); }
.mv-epthumb img { width:100%; height:100%; object-fit:cover; }
.mv-epthumb span { position:absolute; left:4px; bottom:3px; font-size:10.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.6); padding:1px 5px; border-radius:5px; }
.mv-eptitle { font-size:12.5px; font-weight:600; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.an-epwrap { margin-top:26px; }
.an-eplabel { font-size:15px; font-weight:700; margin-bottom:12px; color:var(--text); }
.an-eps { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; }
.an-epb { border:1px solid var(--hairline); background:var(--field); color:var(--text-2); font:inherit; font-size:13px; font-weight:600; padding:10px 0; border-radius:10px; cursor:pointer; }
.an-epb:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--text); }
.an-epb.active { background:var(--accent); color:#fff; border-color:transparent; }

.mv-player, .an-player { display:flex; flex-direction:column; background:#000; overflow:hidden; }
.mv-pframe, .an-pframe { position:relative; flex:1; background:#000; }
.mv-pframe iframe, .an-pframe iframe { width:100%; height:100%; border:0; display:block; }
.mv-ploading, .an-ploading, .an-punavail { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; color:rgba(235,235,245,.62); font-size:14px; background:#000; }
.an-punavail { gap:6px; text-align:center; }
.an-punavail span { font-size:12.5px; color:rgba(235,235,245,.4); }

.mu-scroll { flex:1; overflow-y:auto; padding:14px 14px 0; }
.mu-label { font-size:15px; font-weight:700; margin:4px 4px 12px; color:var(--text); }
.mu-list { display:flex; flex-direction:column; gap:2px; padding-bottom:16px; }
.mu-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:12px; cursor:pointer; transition:background .12s; }
.mu-row:hover { background:var(--hover); }
.mu-row.playing { background:color-mix(in srgb, var(--accent) 14%, transparent); }
.mu-rc { position:relative; width:46px; height:46px; flex:0 0 46px; border-radius:9px; overflow:hidden; background:var(--field-2); }
.mu-rc img { width:100%; height:100%; object-fit:cover; }
.mu-rcbars { position:absolute; inset:0; display:none; place-items:center; background:rgba(0,0,0,.45); fill:#fff; }
.mu-row:hover .mu-rcbars { display:grid; }
.mu-row.playing .mu-rcbars { display:grid; fill:var(--accent); }
.mu-rt { flex:1; min-width:0; display:flex; flex-direction:column; }
.mu-rtitle { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-row.playing .mu-rtitle { color:var(--accent); }
.mu-rartist { font-size:12.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-rfav { border:0; background:transparent; fill:var(--text-3); cursor:pointer; padding:4px; opacity:0; transition:opacity .12s; flex:0 0 auto; }
.mu-row:hover .mu-rfav { opacity:1; }
.mu-rfav.on { fill:var(--accent); opacity:1; }
.mu-rd { font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:34px; text-align:right; }
.mu-loading { padding:44px; }

.mu-bar { flex:0 0 auto; display:grid; grid-template-columns:minmax(150px,1fr) minmax(260px,1.8fr) minmax(96px,.7fr); align-items:center; gap:16px; padding:12px 18px; background:var(--glass-strong); border-top:1px solid var(--hairline-2); }
.mu-np { display:flex; align-items:center; gap:11px; min-width:0; }
.mu-npcover { width:48px; height:48px; flex:0 0 48px; border-radius:9px; background:var(--field-2) center/cover no-repeat; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.mu-npmeta { min-width:0; display:flex; flex-direction:column; }
.mu-nptitle { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-npartist { font-size:12px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mu-npfav { border:0; background:transparent; fill:var(--text-3); cursor:pointer; padding:4px; flex:0 0 auto; }
.mu-npfav.on { fill:var(--accent); }
.mu-ctrls { display:flex; flex-direction:column; gap:5px; }
.mu-btns { display:flex; align-items:center; justify-content:center; gap:6px; }
.mu-ic { border:0; background:transparent; color:var(--text); fill:var(--text); cursor:pointer; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.mu-ic:hover { background:var(--hover); }
.mu-ic.mu-sm { color:var(--text-2); fill:var(--text-2); }
.mu-ic.mu-sm.on { color:var(--accent); fill:var(--accent); }
.mu-ic.mu-play { background:var(--accent); fill:#fff; color:#fff; width:42px; height:42px; }
.mu-ic.mu-play:hover { transform:scale(1.06); background:var(--accent); }
.mu-seekrow { display:flex; align-items:center; gap:9px; }
.mu-t { font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:30px; text-align:center; }
.mu-seek, .mu-volslider { -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:var(--field-2); cursor:pointer; outline:none; }
.mu-seek { flex:1; }
.mu-seek::-webkit-slider-thumb, .mu-volslider::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.mu-vol { display:flex; align-items:center; gap:8px; justify-content:flex-end; fill:var(--text-2); color:var(--text-2); }
.mu-volslider { width:88px; }

/* ===== YouTube (Solara-native, theme-aware) ====================== */
.ytapp { position:absolute; inset:0; display:flex; flex-direction:column; background:var(--win-solid); color:var(--text); font-family:'Outfit','Inter',system-ui,sans-serif; overflow:hidden; }
.yt-top { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--hairline-2); flex-wrap:wrap; flex:0 0 auto; }
.yt-brand { font-size:22px; font-weight:800; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:-.02em; }
.yt-search { margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--field); border:1px solid var(--hairline); border-radius:12px; padding:8px 12px; color:var(--text-2); flex:0 1 340px; min-width:180px; }
.yt-search input { border:0; background:transparent; color:var(--text); font:inherit; font-size:14px; outline:none; width:100%; }
.yt-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.25); }
.yt-scroll { flex:1; overflow-y:auto; padding:18px; }
.yt-status { color:var(--text-2); font-size:13.5px; padding:6px 2px; }
.yt-status:empty { display:none; }
.yt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px 16px; }
.yt-card { border:0; background:transparent; padding:0; cursor:pointer; text-align:left; color:inherit; font:inherit; display:flex; flex-direction:column; gap:9px; }
.yt-thumb { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--field-2); box-shadow:0 6px 18px rgba(0,0,0,.28); transition:transform .16s, box-shadow .16s; }
.yt-card:hover .yt-thumb { transform:translateY(-3px); box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent); }
.yt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-dur { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.82); color:#fff; font-size:11.5px; font-weight:600; padding:2px 6px; border-radius:6px; }
.yt-cinfo { display:flex; flex-direction:column; gap:2px; padding:0 2px; }
.yt-ctitle { margin:0; font-size:14px; font-weight:600; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-cchan { margin:0; font-size:12.5px; color:var(--text-2); }
.yt-cmeta { margin:0; font-size:12px; color:var(--text-3); }

.yt-watch { position:absolute; inset:0; z-index:5; background:var(--win-solid); overflow-y:auto; animation:mvfade .2s ease; }
.yt-wmain { max-width:960px; margin:0 auto; padding:18px 24px 32px; }
.yt-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.4); }
.yt-player video { width:100%; height:100%; display:block; background:#000; }
.yt-vmsg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--text-2); font-size:14px; background:#000; }
.yt-wtitle { margin:16px 0 8px; font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text); line-height:1.3; }
.yt-wmeta { font-size:13px; color:var(--text-2); }
.yt-wchan { display:flex; align-items:center; gap:10px; margin:14px 0; padding:12px 0; border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2); }
.yt-av { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.yt-channame { font-size:14px; font-weight:600; color:var(--text); }
.yt-wdesc { font-size:13.5px; line-height:1.55; color:var(--text-2); white-space:pre-wrap; margin:0 0 8px; max-height:180px; overflow-y:auto; }
.yt-relh, .yt-cmh { font-size:15px; font-weight:700; color:var(--text); margin:24px 0 12px; }
.yt-rel { display:flex; gap:11px; align-items:flex-start; border:0; background:transparent; padding:6px; border-radius:12px; cursor:pointer; text-align:left; color:inherit; font:inherit; width:100%; margin-bottom:2px; }
.yt-rel:hover { background:var(--hover); }
.yt-relthumb { position:relative; width:150px; height:84px; flex:0 0 150px; border-radius:10px; overflow:hidden; background:var(--field-2); }
.yt-relthumb img { width:100%; height:100%; object-fit:cover; }
.yt-relinfo { min-width:0; padding-top:2px; }
.yt-reltitle { margin:0 0 4px; font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yt-relchan { margin:0; font-size:12.5px; color:var(--text-2); }
.yt-cm { display:flex; gap:11px; margin-bottom:16px; }
.yt-cmav { width:36px; height:36px; flex:0 0 36px; border-radius:50%; object-fit:cover; background:var(--field-2); }
.yt-cmbody { min-width:0; }
.yt-cmhead { margin:0 0 3px; font-size:13px; font-weight:600; color:var(--text); }
.yt-cmtime { font-size:12px; font-weight:400; color:var(--text-3); margin-left:5px; }
.yt-cmtext { margin:0; font-size:13.5px; line-height:1.5; color:var(--text-2); white-space:pre-wrap; word-break:break-word; }

/* ===== Meet (video meetings) ===================================== */
.meet { display:flex; flex-direction:column; height:100%; min-height:0; background:var(--win-solid); position:relative; }
.meet-join { flex:1; display:flex; align-items:center; justify-content:center; padding:24px; overflow:auto; }
.meet-join[hidden], .meet-stage[hidden] { display:none; }
.meet-join-card { width:min(400px,100%); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.meet-logo { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--accent); color:#fff; box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent); }
.meet-logo svg { width:26px; height:26px; }
.meet-join-card h2 { font-size:24px; font-weight:800; margin:2px 0 0; }
.meet-join-card p { font-size:13px; color:var(--text-2); line-height:1.5; max-width:320px; margin:0 0 6px; }
.meet-preview { position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:radial-gradient(120% 120% at 50% 20%, #21212b, #121218); display:grid; place-items:center; margin-bottom:4px; }
.meet-preview-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none; }
.meet-preview.live:not(.cam-off) .meet-preview-vid { display:block; }
.meet-preview.live:not(.cam-off) .meet-preview-av { display:none; }
.meet-preview-av { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:26px; font-weight:700; }
.meet-preview-ctl { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:2; }
.meet-pre-btn { width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; backdrop-filter:blur(6px); }
.meet-pre-btn svg { width:18px; height:18px; }
.meet-pre-btn.off { background:#ea4335; }
.meet-join-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#fff; font-weight:600; font-size:14px; padding:12px; border-radius:14px; box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 40%,transparent); }
.meet-join-btn svg { width:18px; height:18px; } .meet-join-btn:hover { filter:brightness(1.08); }
.meet-or { display:flex; align-items:center; gap:10px; width:100%; color:var(--text-3); font-size:11.5px; }
.meet-or::before, .meet-or::after { content:""; height:1px; flex:1; background:var(--hairline); }
.meet-joinrow { display:flex; gap:8px; width:100%; }
.meet-code-in { flex:1; background:var(--field); border:.5px solid var(--hairline); color:var(--text); font:inherit; font-size:14px; letter-spacing:2px; text-transform:uppercase; padding:11px 14px; border-radius:12px; outline:none; }
.meet-code-in:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
.meet-join2 { background:var(--field); border:.5px solid var(--hairline); color:var(--text); font-weight:600; font-size:14px; padding:0 18px; border-radius:12px; }
.meet-join2:hover { background:var(--field-2); }
.meet-join-err { font-size:12.5px; color:#ff5f57; min-height:16px; }

.meet-stage { flex:1; min-height:0; display:flex; flex-direction:column; }
.meet-body { flex:1; min-height:0; display:flex; }
.meet-main { flex:1; min-width:0; position:relative; display:flex; }
.meet-main .call-grid { flex:1; }
.meet-reacts { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.meet-react-fly { position:absolute; bottom:12%; font-size:34px; animation:meet-fly 2.6s ease-out forwards; }
@keyframes meet-fly { 0%{ transform:translateY(0) scale(.6); opacity:0; } 12%{ transform:translateY(-10px) scale(1.1); opacity:1; } 100%{ transform:translateY(-220px) scale(1); opacity:0; } }

.meet-side { flex:0 0 300px; display:flex; flex-direction:column; background:var(--glass-2); border-left:.5px solid var(--hairline-2); min-height:0; }
.meet-side[hidden] { display:none; }
.meet-side-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:700; font-size:14px; border-bottom:.5px solid var(--hairline-2); }
.meet-side-x { width:28px; height:28px; border-radius:8px; color:var(--text-2); display:grid; place-items:center; } .meet-side-x:hover { background:var(--hover); color:var(--text); } .meet-side-x svg{ width:16px; height:16px; }
.meet-people { flex:1; overflow:auto; padding:8px; } .meet-people[hidden]{ display:none; }
.meet-pcount { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); font-weight:700; padding:6px 8px; }
.meet-prow { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; } .meet-prow:hover{ background:var(--hover); }
.meet-pav { width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:14px; font-weight:700; }
.meet-pmeta { flex:1; min-width:0; display:flex; flex-direction:column; }
.meet-pname { font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meet-ptag { font-size:10.5px; color:var(--accent); font-weight:700; } .meet-ptag.hand{ color:#ffb020; }
.meet-pmic { color:var(--text-3); } .meet-pmic svg{ width:15px; height:15px; } .meet-pmic.muted{ color:#ff6b61; }
.meet-pkick { width:28px; height:28px; border-radius:8px; color:var(--text-2); display:grid; place-items:center; } .meet-pkick:hover{ background:var(--hover); } .meet-pkick svg{ width:16px; height:16px; }

.meet-chat { flex:1; display:flex; flex-direction:column; min-height:0; } .meet-chat[hidden]{ display:none; }
.meet-msgs { flex:1; overflow:auto; padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.meet-msg { display:flex; flex-direction:column; gap:1px; } .meet-msg.mine{ align-items:flex-end; }
.meet-msg-who { font-size:11px; color:var(--text-3); font-weight:600; }
.meet-msg-tx { font-size:13.5px; line-height:1.4; background:var(--field); padding:7px 11px; border-radius:12px; word-break:break-word; max-width:92%; }
.meet-msg.mine .meet-msg-tx { background:var(--accent); color:#fff; }
.meet-compose { display:flex; gap:8px; padding:10px; border-top:.5px solid var(--hairline-2); }
.meet-msg-in { flex:1; background:var(--field); border:.5px solid var(--hairline); color:var(--text); font:inherit; font-size:13.5px; padding:9px 12px; border-radius:20px; outline:none; }
.meet-msg-in:focus { border-color:var(--accent); }
.meet-send { width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; } .meet-send svg{ width:18px; height:18px; }

.meet-bar { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--glass-strong); border-top:.5px solid var(--hairline-2); }
.meet-bar-l { flex:1; min-width:0; display:flex; }
.meet-bar-c { display:flex; align-items:center; gap:8px; }
.meet-bar-r { flex:1; display:flex; justify-content:flex-end; gap:8px; }
.meet-code-chip { display:inline-flex; align-items:center; gap:7px; background:var(--field); border:.5px solid var(--hairline); padding:7px 12px; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); } .meet-code-chip:hover{ background:var(--field-2); } .meet-code-chip svg{ width:15px; height:15px; color:var(--text-2); }
.meet-code-show { letter-spacing:1.5px; }
.meet-ctl { width:46px; height:46px; border-radius:50%; background:var(--field); color:var(--text); display:grid; place-items:center; transition:background .12s, transform .08s; } .meet-ctl:hover{ background:var(--field-2); } .meet-ctl:active{ transform:scale(.94); } .meet-ctl svg{ width:22px; height:22px; }
.meet-ctl.off { background:#ea4335; color:#fff; }
.meet-ctl.on { background:color-mix(in srgb,var(--accent) 26%, transparent); color:var(--accent); }
.meet-ctl.dim { opacity:.5; }
.meet-ctl.meet-leave { background:#ea4335; color:#fff; width:58px; } .meet-ctl.meet-leave:hover{ background:#d33; }
.meet-host-only { display:none; } .meet.is-host .meet-host-only { display:grid; }
.meet-ctl2 { position:relative; height:42px; min-width:42px; padding:0 12px; border-radius:12px; background:transparent; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; } .meet-ctl2:hover{ background:var(--hover); color:var(--text); } .meet-ctl2.on{ background:color-mix(in srgb,var(--accent) 20%,transparent); color:var(--accent); } .meet-ctl2 svg{ width:20px; height:20px; }
.meet-count { font-size:13px; font-weight:700; }
.meet-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#ea4335; color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; } .meet-badge[hidden]{ display:none; }

.meet-reactbar { position:absolute; left:50%; bottom:74px; transform:translateX(-50%); display:flex; gap:4px; padding:6px; background:var(--glass-strong); border:.5px solid var(--hairline); border-radius:16px; box-shadow:var(--shadow-pop); z-index:30; backdrop-filter:blur(30px); }
.meet-reactbar[hidden]{ display:none; }
.meet-reactbar button { font-size:22px; width:40px; height:40px; border-radius:10px; } .meet-reactbar button:hover{ background:var(--hover); transform:scale(1.15); }

.meet-pin { position:absolute; top:8px; left:8px; z-index:2; width:28px; height:28px; border-radius:8px; background:rgba(0,0,0,.5); color:#fff; display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); } .meet-pin svg{ width:15px; height:15px; }
.call-tile:hover .meet-pin { display:flex; } .meet-pin.on { display:flex; background:var(--accent); }
.meet .call-tile:not(.self):hover .call-host-btn { display:flex; }
.meet-tile-hand { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:20px; display:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation:meet-wave 1s ease-in-out infinite; z-index:2; }
.call-tile.hand-up .meet-tile-hand { display:block; }
@keyframes meet-wave { 0%,100%{ transform:translateX(-50%) rotate(-8deg); } 50%{ transform:translateX(-50%) rotate(8deg); } }
.meet-tile-present { position:absolute; top:8px; right:8px; display:none; align-items:center; gap:5px; background:color-mix(in srgb,var(--accent) 85%, #000); color:#fff; font-size:11px; font-weight:600; padding:3px 8px 3px 6px; border-radius:8px; z-index:2; } .meet-tile-present svg{ width:13px; height:13px; }
.call-tile.sharing .meet-tile-present { display:flex; }
.call-tile.self.sharing .call-feed { transform:none; }
.call-tile.sharing .call-feed { object-fit:contain; background:#000; }

.call-grid.has-pin { align-content:flex-start; }
.call-grid.has-pin .call-tile { width:clamp(110px,14%,170px); aspect-ratio:16/10; }
.call-grid.has-pin .call-tile.is-pinned { width:100%; flex-basis:100%; aspect-ratio:16/9; max-height:72%; order:-1; }