/* ============================================================================
   CHALKLE DESIGN SYSTEM
   One visual language for every view: warm near-black chalk surfaces, one
   primary accent, per-section accent hues used ONLY as small highlights,
   fast restrained motion, and a single card/button/input language.
   ========================================================================== */

/* Self-hosted fonts (latin subsets). Loaded from the same origin as the app
   so they work on every mirror and in srcdoc embeds - no Google Fonts. */
@font-face {
  font-family: "Boogaloo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/boogaloo-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/fonts/space-grotesk-latin.woff2") format("woff2");
}

[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;

  /* ---- Surfaces (warm chalk, never pure black) ---- */
  --bg: #0d0c0a;                 /* page background */
  --bg-elevated: #14120f;        /* top bar, sidebar, dropdowns */
  --surface: #1a1815;            /* cards, panels, inputs */
  --surface-hover: #211e1a;      /* hover fill / raised */
  --surface-active: #28241f;     /* pressed / active fill */

  /* ---- Borders ---- */
  --border: #2b2823;             /* default 1px borders */
  --border-soft: #201e1a;        /* quiet internal dividers */
  --border-strong: #3e3930;      /* hover / clearly-read borders */

  /* ---- Text ---- */
  --text: #ece9e1;               /* warm off-white */
  --text-secondary: #a7a196;     /* secondary */
  --text-muted: #8a8477;         /* muted: 4.6:1 on --surface (AA small text) */

  /* ---- Accent (one primary: chalk green from the logo) ---- */
  --accent: #4cc56f;
  --accent-ink: #06240f;
  --accent-soft: rgba(76, 197, 111, 0.13);

  /* ---- Section accent hues (identity only, applied through the same
         component language - never full backgrounds) ---- */
  --blue: #5b93ff;
  --blue-soft: rgba(91, 147, 255, 0.13);
  --yellow: #f5b301;
  --yellow-soft: rgba(245, 179, 1, 0.13);
  --red: #ea4335;
  --red-soft: rgba(234, 67, 53, 0.13);
  --red-ink: #ff6b5e;
  --tv: #3fbf8b;
  --tv-soft: rgba(63, 191, 139, 0.13);
  --tv-ink: #04281a;
  --teal: #23b8a5;
  --teal-soft: rgba(35, 184, 165, 0.13);
  --cyan: #35c4dc;
  --cyan-soft: rgba(53, 196, 220, 0.13);
  --orange: #ff9d3c;
  --orange-soft: rgba(255, 157, 60, 0.13);
  --purple: #a06bff;
  --purple-soft: rgba(160, 107, 255, 0.13);
  --lime: #b7e63f;
  --lime-soft: rgba(183, 230, 63, 0.14);
  --cloud: #5fbeff;
  --cloud-soft: rgba(95, 190, 255, 0.13);
  --movies: #a06bff;
  --movies-soft: rgba(160, 107, 255, 0.13);
  --movies-ink: #22103f;
  --magenta: #e6438f;
  --magenta-soft: rgba(230, 67, 143, 0.13);
  --pink: #ff5c8a;
  --pink-soft: rgba(255, 92, 138, 0.13);
  --brown: #d8a368;
  --brown-soft: rgba(216, 163, 104, 0.13);

  /* ---- Semantic ---- */
  --danger: #ff5c4d;
  --danger-soft: rgba(255, 92, 77, 0.13);
  --success: var(--accent);
  --warning: var(--yellow);

  /* ---- Legacy aliases (older rules keep working; new code uses the
         canonical names above) ---- */
  --base: var(--bg);
  --panel: var(--surface);
  --panel-2: var(--surface-hover);
  --panel-3: var(--surface-active);
  --line: var(--border);
  --line-soft: var(--border-soft);
  --line-strong: var(--border-strong);
  --line-2: var(--border-strong);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --green: var(--accent);
  --muted-2: var(--text-muted);

  /* ---- Typography ---- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display: "Boogaloo", system-ui, "Segoe UI", Roboto, Arial, sans-serif;   /* wordmark only */
  --display-geo: "Space Grotesk", system-ui, "Segoe UI", Roboto, Arial, sans-serif; /* headings */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 46px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Geometry: tiles, not bubbles ---- */
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-card: var(--shadow-1);
  --shadow-pop: var(--shadow-3);

  /* ---- Motion: fast and restrained ---- */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);

  /* ---- Layout ---- */
  --side-w: 220px;
  --side-w-collapsed: 60px;
  --side-w-fallback: 220px;
  --side-w-collapsed-fallback: 60px;
  --topbar-h: 56px;
  --topbar-bg: var(--bg-elevated); /* theme.js writes this live (header surface) */
  --pink-ink: #2a0716;             /* theme.js writes this live (pink CTA text) */
  --content-max: 1240px;
  --content-pad: clamp(16px, 2.6vw, 30px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  /* No background-attachment: fixed here - it fails to paint on ChromeOS /
     some Chromebooks, leaving a flat green page. The body only shows through
     the gaps anyway; each tab paints its own colored layer on top. */
  background-color: var(--base);
  background-image: var(--wallpaper-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: var(--custom-cursor, auto);
}

/* Wallpaper scrim: when a bright custom wallpaper is set, darken it so panels
   and text stay readable. Drawn above the image, below everything else. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--wallpaper-scrim, 0));
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Bold, unified tab icon weight: thick strokes like the filled YouTube
   logo, so every sidebar icon reads as one consistent heavy set. */
.nav-item .icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.6;
}

/* Round the joystick/grid accents to read as one consistent set. */
.nav-item .tab-ico circle[fill="currentColor"],
.nav-item .tab-ico circle:not([stroke]) {
  stroke: none;
}

/* Tiny dot accents on the game controls: solid, not stroked. */
.nav-item .tab-ico path[stroke="none"],
.nav-item .tab-ico circle[stroke="none"] { stroke: none; }

/* ---------- Chalkle wordmark ----------
   Boogaloo bubble letters, Google colors, red first.
   Static, flat, no animation. That is the brand moment. */

.chalkle-logo {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  display: inline-block;
}

.chalkle-logo .bubble-letter {
  display: inline-block;
  vertical-align: baseline;
}

/* Bubble pop: a soft dark outline drawn behind each glyph (paint-order puts
   the stroke behind the fill) plus a floating drop shadow under the letter
   row - the same 3D "chalk button" effect as the wordmark example. */
.bubble-letter,
.title-letter {
  -webkit-text-stroke: 4px rgba(0, 0, 0, 0.18);
  paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25));
  position: relative;
}

.title-letter {
  -webkit-text-stroke: 2.5px rgba(0, 0, 0, 0.16);
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.22));
}

.bubble-letter.big {
  font-size: 67px;
  line-height: 1;
  margin-bottom: 18px;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- Layout ---------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
  z-index: 1;
}

/* ---------- Skip link (items 690/697) ----------
   First tab stop on every view: jumps keyboard users past the topbar
   straight to #main. Hidden until focused, same yellow as the cloak
   workaround buttons. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--yellow);
  color: #241a00;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transform: translateY(-200%);
  transition: transform 120ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Top bar ---------- */

.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--topbar-bg, #101317); /* solid, always. No tint washes, no translucency. theme.js writes --topbar-bg live. */
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
  /* No overflow clip here: the search dropdown is absolutely positioned
     inside this bar and must be able to paint below it. */
  overflow: visible;
}

/* Chalkle 2.0: the top bar is a fixed neutral. Section color lives in the
   view content and a 2px accent line under the bar, nothing else. */
body[data-view="home"] .topbar { border-bottom-color: var(--line); }
body[data-view="games"] .topbar { border-bottom-color: var(--line); }
body[data-view="sites"] .topbar { border-bottom-color: var(--line); }
body[data-view="music"] .topbar { border-bottom-color: var(--line); }
body[data-view="apps-tools"] .topbar { border-bottom-color: var(--line); }
body[data-view="proxies"] .topbar { border-bottom-color: var(--line); }
body[data-view="docs"] .topbar { border-bottom-color: var(--line); }
body[data-view="board"] .topbar { border-bottom-color: var(--line); }
body[data-view="partners"] .topbar { border-bottom-color: var(--line); }
body[data-view="settings"] .topbar { border-bottom-color: var(--line); }
body[data-view="cloud"] .topbar { border-bottom-color: var(--line); }
body[data-view="livetv"] .topbar { border-bottom-color: var(--line); }
body[data-view="youtube"] .topbar { border-bottom-color: var(--line); }
body[data-view="ai"] .topbar { border-bottom-color: var(--line); }
body[data-view="bookmarklets"] .topbar { border-bottom-color: var(--line); }
body[data-view="movies"] .topbar { border-bottom-color: var(--line); }

.brand {
  width: var(--side-w);
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  transition: width 160ms ease;
  min-width: 0;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.brand-name {
  flex: none;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--text);
}

.brand-name {
  font-size: 36px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  margin-top: 4px; /* optical centering for Boogaloo */
}

/* ---------- Search ---------- */

.search {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-width: 0;
  position: relative;
}

.search .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 40px;
  padding: 0 64px 0 40px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  caret-color: var(--accent);
}

.search input::placeholder { color: var(--text-3); }

.search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-2);
}

.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Global search dropdown - shows matches across every library, each labeled
   with the tab it lives in (Games / Sites / Apps-Tools), so you never get
   bounced to another view just by typing. */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  padding: 6px;
  overscroll-behavior: contain;
}

.search-results-group {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 10px 4px;
}

.search-r {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.search-r:hover,
.search-r.is-active {
  background: var(--panel-2);
}

.search-r-img {
  width: 42px;
  height: 30px;
  flex: none;
  border-radius: 7px;
  object-fit: cover;
  background: var(--panel-2);
  display: block;
}

.search-r-txt {
  min-width: 0;
}

.search-r-title {
  display: block;
  font-family: var(--display-geo);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-r-sub {
  display: block;
  color: var(--text-3);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-r-in {
  flex: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.search-empty {
  padding: 14px 10px;
  color: var(--text-3);
  font-size: 14px;
}

.kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  pointer-events: none;
}

.topbar-spacer {
  width: var(--side-w);
  flex: none;
}

/* Live clock in the top bar - the Minecraft clock gif sits left of the time.
   Boogaloo numerals with the bubble shadow so it matches the wordmark. */
.topbar-clock {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  padding: 5px 12px 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.topbar-clock:hover {
  border-color: var(--line-soft);
  background: var(--panel);
}

/* Chromebook / laptop widths: the centered search bar eats the
   flex slack and crowds the clock. Shrink the search cap and give the clock
   a real gap so it never sits against the search box. */
@media (min-width: 861px) and (max-width: 1280px) {
  .search { max-width: 400px; }
  .topbar-clock { margin-left: 18px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand-name { font-size: 31px; }
}

/* Clock dial: a plain line-art clock face drawn with the shared icon
   stroke. Static on purpose - the digits are the clock, the dial is a label. */
.topbar-clock .clock-dial {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clock-time {
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.clock-ampm {
  font-family: var(--display-geo);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-3);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .topbar-clock { display: none; }
}

.hamburger {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.hamburger:hover { background: var(--panel); color: var(--text); }

/* ---------- Shell ---------- */

.shell {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--side-w-fallback);
  width: var(--side-w);
  min-width: var(--side-w-collapsed-fallback);
  flex: none;
  display: flex;
  flex-direction: column;
  background: #101318; /* solid, same family as the topbar */
  border-right: 1px solid var(--line);
  transition: width 160ms ease;
  position: relative;
  z-index: 20;
  touch-action: pan-y;
}

.nav {
  flex: 1;
  padding: 12px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.nav-bottom {
  flex: none;
  padding: 14px 10px 0;
  border-top: 1px solid var(--line-soft);
}

/* Brand socials (row of icon buttons above the Board item) */
.nav-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 2px 12px;
}

.nav-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--text-2);
  text-decoration: none;
  transition: transform 130ms ease, color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.nav-social .icon { width: 20px; height: 20px; }

.nav-social:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.nav-social .youtube-icon { fill: currentColor; stroke: none; }
.nav-social .disc-icon { fill: currentColor; stroke: none; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  /* Never let flexbox squish nav items on short screens (Chromebooks) -
     overflow must scroll inside .nav instead of crushing the buttons. */
  flex-shrink: 0;
  touch-action: manipulation;
}

.nav-item:hover { background: var(--panel-2); color: var(--text); }

/* Active tab: solid raised tile, bright text, and a 2px accent bar on the
   left edge in the section color. Reads instantly, no glow, no wash. */
.nav-item.is-active {
  background: var(--panel-3);
  color: var(--text);
  font-weight: 650;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}

/* Per-view accent variables: kept (content tints with the section color),
   but Chalkle 2.0 uses them sparingly: section identity in headers, the nav
   bar, and small highlights. No washes, no glow. */
.view { --va: var(--accent); --va-ink: var(--accent-ink); --va-soft: var(--accent-soft); }
.view[data-view="home"] { --va: var(--pink); --va-ink: #3a0a22; --va-soft: var(--pink-soft); }
.view[data-view="games"] { --va: var(--accent); --va-ink: var(--accent-ink); --va-soft: var(--accent-soft); }
.view[data-view="sites"] { --va: var(--blue); --va-ink: #0a1f3a; --va-soft: var(--blue-soft); }
.view[data-view="music"] { --va: var(--magenta); --va-ink: #47001f; --va-soft: var(--magenta-soft); }
.view[data-view="apps-tools"] { --va: var(--yellow); --va-ink: #3a2b00; --va-soft: var(--yellow-soft); }
.view[data-view="proxies"] { --va: var(--teal); --va-ink: #042522; --va-soft: var(--teal-soft); }
.view[data-view="cloud"] { --va: var(--cloud); --va-ink: #041a29; --va-soft: var(--cloud-soft); }
.view[data-view="docs"] {
  --va: var(--cyan);
  --va-ink: #04222e;
  --va-soft: var(--cyan-soft);
}
.view[data-view="board"] { --va: var(--orange); --va-ink: #3a2300; --va-soft: var(--orange-soft); }
.view[data-view="livetv"] { --va: var(--tv); --va-ink: var(--tv-ink); --va-soft: var(--tv-soft); }
.view[data-view="partners"] { --va: var(--brown); --va-ink: #2b1a05; --va-soft: var(--brown-soft); }
.view[data-view="settings"] { --va: var(--purple); --va-ink: #1d1140; --va-soft: var(--purple-soft); }
.view[data-view="ai"] {
  --va: #b06bff;
  --va-ink: #1d0936;
  --va-soft: rgba(176, 107, 255, 0.16);
}
.view[data-view="youtube"] {
  --va: #ff0033;
  --va-ink: #3a000a;
  --va-soft: rgba(255, 0, 51, 0.15);
}
.view[data-view="bookmarklets"] {
  --va: var(--lime);
  --va-ink: #2b3a00;
  --va-soft: var(--lime-soft);
}
.view[data-view="movies"] {
  --va: var(--movies);
  --va-ink: var(--movies-ink);
  --va-soft: var(--movies-soft);
}

.view[data-view="chat"] {
  --va: #008080;
  --va-ink: #001a1a;
  --va-soft: rgba(0, 128, 128, 0.16);
  /* Lunchbreak palette: teal desktop + navy titlebar (Win95 chat). The embed
     themes itself with its own built-in theme system; these vars only tint
     the Chalkle chrome around the frame. */
  --bc-bg: #0a1f1f;
  --bc-accent: #008080;
  --bc-fg: #eafffa;
}

/* Chat: the 92% color-mix teal wash further down is the tab background;
   a full-opacity teal here would glare against --base. */

.view[data-view="chat"] #chat-frame {
  --bc-bg: #0a1f1f;
  --bc-accent: #008080;
  --bc-fg: #eafffa;
}

/* Every section gets its own color when active - one per tab, matching the theme. */
/* (Chalkle 2.0: active tiles stay solid neutral; section color is the
   2px ::before bar only. The old per-view tinted backgrounds are gone.) */
.nav-item.is-active[data-view="chat"] { color: var(--text); }

.youtube-icon {
  stroke: none;
}

/* Per-section accent bar color for the active nav item. */
.nav-item.is-active[data-view="home"]::before { background: var(--pink); }
.nav-item.is-active[data-view="games"]::before { background: var(--accent); }
.nav-item.is-active[data-view="cloud"]::before { background: var(--cloud); }
.nav-item.is-active[data-view="sites"]::before { background: var(--blue); }
.nav-item.is-active[data-view="music"]::before { background: var(--magenta); }
.nav-item.is-active[data-view="apps-tools"]::before { background: var(--yellow); }
.nav-item.is-active[data-view="proxies"]::before { background: var(--teal); }
.nav-item.is-active[data-view="docs"]::before { background: var(--cyan); }
.nav-item.is-active[data-view="board"]::before { background: var(--orange); }
.nav-item.is-active[data-view="partners"]::before { background: var(--brown); }
.nav-item.is-active[data-view="settings"]::before { background: var(--purple); }
.nav-item.is-active[data-view="ai"]::before { background: #b06bff; }
.nav-item.is-active[data-view="livetv"]::before { background: var(--tv); }
.nav-item.is-active[data-view="youtube"]::before { background: #ff0033; }
.nav-item.is-active[data-view="bookmarklets"]::before { background: var(--lime); }
.nav-item.is-active[data-view="movies"]::before { background: var(--movies); }
.nav-item.is-active[data-view="chat"]::before { background: #008080; }

.nav-label {
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  transition: opacity 120ms ease;
}

.collapse-btn {
  margin: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-3);
  white-space: nowrap;
}

.collapse-btn:hover { color: var(--text); }

/* Collapsed state (desktop) */

body.sidebar-collapsed .sidebar {
  width: var(--side-w-collapsed-fallback);
  width: var(--side-w-collapsed);
  min-width: 56px;
}
body.sidebar-collapsed .brand {
  width: var(--side-w-collapsed);
  overflow: visible;
}

/* Keep the full wordmark visible even when the navigation is collapsed. */
body.sidebar-collapsed .brand-name {
  position: relative;
  z-index: 2;
}
body.sidebar-collapsed .topbar-spacer { width: var(--side-w-collapsed); }

body.sidebar-collapsed .brand-mark { display: none; }

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .collapse-btn {
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .nav-label { display: none; }

/* Collapsed rail: the social icons stack vertically (the row of 40px buttons
   would overflow a 64px rail), and the More menu opens as a compact icon
   column inside the rail instead of forcing the sidebar back open. */
body.sidebar-collapsed .nav-socials { flex-direction: column; }
body.sidebar-collapsed .nav-more-label { display: none; }
body.sidebar-collapsed .nav-more .nav-item { justify-content: center; padding: 0; }
body.sidebar-collapsed .nav-more .nav-label { display: none; }

body.sidebar-collapsed .collapse-btn .icon { transform: rotate(180deg); }

/* Collapsed rail: a small ghost icon button - minimal, no text, no shadow.
   The label swaps to "Expand" via JS (used for the aria-label), the chevron
   flips, and hover gives a quiet lift so it is never mistaken for a card. */
body.sidebar-collapsed .collapse-btn {
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 38px;
  min-width: 0;
  margin: 10px auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-3);
  box-shadow: none;
}
body.sidebar-collapsed .collapse-btn:hover {
  background: var(--panel);
  border-color: var(--line-2);
  color: var(--text);
}
body.sidebar-collapsed .collapse-btn:active { transform: scale(0.96); }

/* Real phones only: keep the sidebar ON SCREEN (never hide it behind the
   hamburger) but auto-collapse it to the icon rail so the content keeps real
   room. EVERYTHING wider keeps the full labeled sidebar - Chromebook display
   scaling does not shrink CSS width, but page zoom does, and a zoomed school
   Chromebook can sit anywhere below 560px; collapsing the nav to an icon
   strip there makes it look like the sidebar vanished. So the auto-rail
   stays below real phone widths. The rail state is never permanently stuck:
   the collapse button becomes a floating, labeled Expand pill that always
   juts out of the rail (see .sidebar-collapsed rules above). */
@media (max-width: 480px) {
  .sidebar { width: var(--side-w-collapsed); }
  .brand { width: var(--side-w-collapsed); }
  .brand-mark { display: none; }
  .topbar-spacer { width: var(--side-w-collapsed); }
  .nav-item, .collapse-btn { justify-content: center; padding: 0; }
  .nav-label { display: none; }
  .collapse-btn .icon { transform: rotate(180deg); }
  .nav-socials { flex-direction: column; }
  /* Icon-only rail: keep the expand handle visible but quiet. */
  .collapse-btn {
    width: 44px;
    margin: 10px auto;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text-3);
  }
}

/* ---------- Main ---------- */

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 26px 48px;
  position: relative;
}

.view { display: none; }
.view.is-visible { display: block; }

/* ---------- Background ----------
   ONE background for the whole app: the warm chalk --bg. Views no longer
   paint their own colors; a single crossfade layer keeps tab switches
   smooth and every page visually part of the same site. A faint warm
   vignette adds depth without gradients or glow. */
.view { position: relative; }
.view::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 300ms ease;
}
.view.is-visible::before { opacity: 1; }

/* ---------- View headers ---------- */

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-soft);
}

/* The home view lays out as a column, but only while it is the active tab.
   Declared with .is-visible so it can never override .view { display:none }
   and stay layered on top of every other page. */
.home-view.is-visible {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
}










.home-panel-chip {
  font-family: var(--display);
  font-size: 12px;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid rgba(66, 133, 244, 0.2);
  border-radius: 999px;
  padding: 5px 10px;
}

button.home-panel-chip {
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

button.home-panel-chip:hover {
  color: var(--text);
  border-color: rgba(66, 133, 244, 0.5);
  background: rgba(66, 133, 244, 0.22);
  transform: translateY(-1px);
}










.home-block {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.home-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.home-block-title {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.home-block-note {
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  white-space: nowrap;
}


/* Featured home card: Minecraft James Edition. A wide, first-class banner so
   the flagship game is one tap away. Tints with Home's pink accent. */
.home-featured {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.home-featured .home-featured-cta {
  margin-left: auto;
  flex: none;
  align-self: center;
}

.home-featured:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.home-featured-img {
  position: relative;
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
  display: grid;
  place-items: center;
}

.home-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-featured-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.home-featured-eyebrow {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
}

.home-featured-title {
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.home-featured-desc {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
  max-width: 54ch;
  margin: 2px 0 4px;
}

.home-featured-cta {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--pink);
  background: rgba(255, 77, 141, 0.14);
  border: 1px solid rgba(255, 77, 141, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
}

.home-recs-loading {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-soft);
  color: var(--text-secondary);
  font-size: 14px;
}

.view-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.view-title {
  margin: 0;
  font-family: var(--display);   /* Boogaloo: the Chalkle display voice */
  font-size: 32px;
  font-weight: 400;              /* Boogaloo only ships 400; synthesized bold looks lumpy */
  line-height: 1.05;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  user-select: none;
}

.title-letter {
  display: inline-block;
  vertical-align: baseline;
}

.view-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 10px;
  white-space: nowrap;
}

.view-meta.has-content { color: var(--accent); }

/* All views share the same chrome: titles, meta and buttons stay on the
   neutral system. Section identity lives in the nav bar only. */

.game-command {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.game-stats {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.game-stat {
  min-width: 0;
  padding: 6px 12px;
  border-right: 1px solid var(--line-soft);
}

.game-stat:last-child { border-right: 0; }

.game-stat-value {
  display: block;
  font-family: var(--display-geo);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Library stats in the four brand colors. */
#stat-games { color: var(--accent); }
#stat-ports { color: var(--blue); }
#stat-favs { color: var(--yellow); }
#stat-clicks { color: var(--red); }

.game-stat-label {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.game-filters {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Second row of toggles below the stats: category / genre chips. */
.genre-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.genre-filters .chip { background: var(--panel); }

/* Recently played section on Home - head + a responsive card grid. */
.home-recents {
  margin: 18px 0;
}

.home-recents-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.home-recents-title {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}

.home-recents-clear {
  font-family: var(--display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

.home-recents-clear:hover { color: var(--text); }

/* Continue playing: horizontal snap-scroll strip with edge fade + arrows. */
.home-recents-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-recents-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, opacity 140ms ease;
}

.home-recents-arrow .icon { width: 16px; height: 16px; }

.home-recents-arrow:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--pink);
  background: var(--pink-soft);
}

.home-recents-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.home-recents-scroll {
  position: relative;
  margin-top: 4px;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-recents-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 22px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-recents-track::-webkit-scrollbar { display: none; }

.home-recents-track .home-card {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
}

@media (max-width: 520px) {
  .home-recents-track .home-card { width: 150px; }
  .home-recents-arrow { display: none; }
}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 10px;
}

/* Chromebook perf: off-screen cards skip layout and paint entirely, so a
   480-card grid only pays for the rows actually near the viewport. The
   intrinsic-size hint keeps the scrollbar stable while cards are skipped
   (auto remembers each card's real height after first render). Pure CSS:
   no JS observer, no cost on the cards that are visible. */
.grid > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}

.grid-more {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 14px 0 4px;
}

.grid-more .btn {
  height: 38px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.grid-more .btn:hover {
  border-color: var(--va, var(--accent));
  background: rgba(52, 168, 83, 0.12);
  transform: translateY(-1px);
}

.card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* While a thumbnail is still loading (lazy images), pulse a flat highlight
   over the tile. The img covers it once it arrives, so no JS needed. */
/* Loading state: the tile's own background shows while artwork loads, and
   .thumb-fallback covers the empty case. No animated sheen - the old
   infinite thumb-pulse was constant movement the card never needed. */

.game-card {
  overflow: hidden;
}

/* "How to open" button: a small three-dot affordance on every card (games,
   sites, apps) that always pops the method menu, including about:blank,
   regardless of the saved default mode. Sits at the card's far edge so it
   never fights the favorite button or the launch link. */
.open-with {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
}

.open-with .icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.card:hover .open-with,
.open-with:focus-visible {
  opacity: 1;
}

.open-with:hover {
  border-color: var(--va);
  color: var(--va);
}

/* Apps/tools tiles: keep the dots in the top-right corner, clear of the
   "Open" text at the bottom right, and only reveal them on hover. */
.open-with-tool {
  top: 10px;
  right: 10px;
  bottom: auto;
  width: 24px;
  height: 24px;
  opacity: 0;
}

.tool-tile-link:hover .open-with-tool,
.open-with-tool:focus-visible {
  opacity: 1;
}

.game-launch {
  display: block;
  min-width: 0;
}

.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(8, 10, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(232, 234, 237, 0.62);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.fav-btn .icon {
  width: 15px;
  height: 15px;
  fill: none;
}

.fav-btn:hover {
  color: #fbbc05;
  border-color: rgba(251, 188, 5, 0.5);
  background: rgba(10, 11, 13, 0.85);
  transform: scale(1.1);
}

.fav-btn.is-fav {
  color: #fbbc05;
  background: rgba(251, 188, 5, 0.15);
  border-color: rgba(251, 188, 5, 0.4);
}

.fav-btn.is-fav .icon {
  fill: currentColor;
}

/* Game-card proxy escape hatch - sits left of the favorite star. Same
   treatment as .fav-btn; accent glow on hover. */
.proxy-btn {
  position: absolute;
  top: 8px;
  right: 44px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(8, 10, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(232, 234, 237, 0.62);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.proxy-btn .icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.proxy-btn:hover {
  color: var(--va, #8ab4f8);
  border-color: var(--va-soft, rgba(138, 180, 248, 0.5));
  background: rgba(10, 11, 13, 0.85);
  transform: scale(1.1);
}

.card:hover {
  border-color: var(--va);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--va-soft);
  transform: translateY(-3px);
}

.card:active { transform: translateY(0); }

.game-card:hover .card-thumb img {
  transform: scale(1.04);
}

.game-card:has(.thumb-art) .thumb-fallback {
  opacity: 0;
  transition: opacity 160ms ease;
}

.card-thumb .thumb-fallback {
  z-index: 0;
}

.card-thumb .thumb-art {
  z-index: 2;
}

.card-thumb .thumb-art.thumb-failed {
  display: none;
}

.card-thumb:has(.thumb-art.thumb-failed) .thumb-fallback,
.card-thumb:has(.thumb-art.thumb-icon) .thumb-fallback {
  opacity: 0;
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 160ms ease;
  transform-origin: center;
}

.card:hover .card-thumb img { transform: scale(1.03); }

/* Square/icon-style images stay clean without turning into letter cards. */
.card-thumb img.thumb-icon {
  width: 58%;
  height: 58%;
  inset: 21%;
  object-fit: contain;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-2);
  image-rendering: auto;
}

.card-thumb img.thumb-icon + .thumb-fallback,
.card-thumb:has(img.thumb-icon) .thumb-fallback {
  opacity: 0;
}

.card-thumb .thumb-art {
  mix-blend-mode: normal;
  opacity: 1;
}

/* Game-card thumbnail fallback is a clean brand-tinted tile with a subtle
   controller icon - not a big JS letter block. (music.js uses its own
   .card-thumb .fallback class further down, so scoping is safe.) */
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-2);
  background: var(--base);
}

.thumb-fallback .icon {
  width: 30px;
  height: 30px;
  opacity: 0.55;
}

.card-thumb .fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display-geo);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  background: var(--panel-2);
}


/* Game cards launch from the whole card; avoid a distracting hover overlay. */
.card-play { display: none; }

.card-body {
  min-height: 62px;
  padding: 12px 13px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}


.card-body > .card-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.card-main {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
}

/* Title always gets its own full line so badges / port labels never cover it. */
.card-main > .card-title {
  flex: 1 1 100%;
  min-width: 0;
}

.card-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Slight chalk-pop: a whisper of the accent under the letterforms. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.card-count {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  max-width: 42%;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.card-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  flex: none;
  max-width: 46%;
}

.card-source {
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text-3);
  background: rgba(12, 18, 16, 0.46);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-source-link {
  margin-left: 4px;
  color: var(--va, var(--accent));
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.card-source-link:hover { color: var(--text); }

.card-count::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--va);
  flex: none;
  animation: count-pulse 2.4s ease-in-out infinite;
}

.game-card .card-count {
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(12, 18, 16, 0.54);
  max-width: 100%;
}

/* Library card meta row: one line under the title - category, credits and
   honest status. Pushes Ready to the right edge so the row reads as
   'info ... status' at any card width. */
.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  min-width: 0;
}

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

.card-meta .card-cat {
  color: var(--accent);
  font-weight: 600;
}

.card-meta .card-src {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Your own clock: the one figure on a card that only this device can know, so
   it reads a step stronger than the source and credit labels beside it. */
.card-meta .card-time {
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.card-meta .meta-sep {
  opacity: 0.6;
}

.game-feature-meta .meta-sep {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Ready status: quiet dot + label, right-aligned in the meta row. The row
   reserves right padding so the hover-revealed open-with button (bottom-right
   corner of the card) never lands on top of the label. */
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.game-card .card-meta-row {
  padding-right: 26px;
}

.card-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Recently played tag: tiny accent chip so a recent game reads as
   'pick this up again' without shouting. */
.card-recent-tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Play chip: appears over the art on hover/focus. A real element (not a
   pseudo) so it can carry the play glyph and sit above the scrim. */
.quick-launch {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms var(--ease, ease), transform 150ms var(--ease, ease);
}

.quick-launch .icon {
  width: 13px;
  height: 13px;
}

.game-card:hover .quick-launch,
.game-card:focus-within .quick-launch,
.cloud-card:hover .quick-launch,
.cloud-card:focus-within .quick-launch {
  opacity: 1;
  transform: translateY(0);
}

/* Cloud card: same scrim treatment as the library so Stream/Play reads the
   same way across sections. */
.cloud-card .card-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(8, 10, 12, 0.42);
  opacity: 0;
  transition: opacity 150ms var(--ease, ease);
  pointer-events: none;
}

.cloud-card:hover .card-thumb::before,
.cloud-card:focus-within .card-thumb::before {
  opacity: 1;
}

.cloud-card:hover .card-thumb img {
  transform: scale(1.045);
}

/* Launch feedback: the whole card gives a quick press when clicked. */
.game-card.launch-pop {
  animation: launch-pop 320ms ease;
}

@keyframes launch-pop {
  0% { transform: scale(1); }
  35% { transform: scale(0.97); }
  70% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Favorite heart pops when toggled. */
.fav-btn.pop {
  animation: fav-pop 360ms ease;
}

@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45) rotate(-8deg); }
  75% { transform: scale(0.9) rotate(4deg); }
  100% { transform: scale(1); }
}

@keyframes count-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* "New this week" corner ribbon. The one thing with visual weight on cards. */

.ribbon {
  position: absolute;
  top: 10px;
  left: 0;
  background: var(--va);
  color: var(--va-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 4px 10px 4px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  border-radius: 0 4px 0 0;
}

/* ---------- Empty state ---------- */

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 64px 24px;
  text-align: center;
  color: var(--text-3);
}

.empty .icon {
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  color: var(--text-3);
}

.empty-title {
  margin: 0 0 4px;
  color: var(--text-2);
  font-size: 18px;
  font-weight: 600;
}

.empty-hint {
  margin: 0;
}

/* Call-to-action button inside an empty state. */
.empty-cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--va, var(--accent));
  background: var(--va-soft, var(--accent-soft));
  color: var(--va, var(--accent));
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.empty-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* AdSense slots: quiet, site-styled, never loud. A small muted "Sponsored"
   label above a responsive unit. Slots stay hidden until configured, so an
   unconfigured page shows nothing at all. */
.ad-slot {
  margin: 20px auto 8px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ad-slot-label {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.7;
}

.ad-slot ins.adsbygoogle {
  display: block;
  min-height: 90px;
  background: rgba(20, 24, 29, 0.55);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

/* In-grid footer unit on Home spans the full row like a wide board. */
.ad-slot--grid {
  max-width: none;
  margin: 10px 0 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .ad-slot { content-visibility: auto; contain-intrinsic-size: auto 110px; }
}

/* ---------- Panels ---------- */

.panel {
  background: rgba(20, 24, 29, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.panel-title {
  margin: 0 0 14px;
  font-family: var(--display-geo);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.setting {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}

.setting-name { color: var(--text-2); font-size: 16px; }

.setting-hint {
  display: block;
  color: var(--text-3);
  font-size: 13px;
  margin-top: 2px;
}

.setting-value { color: var(--text); font-size: 16px; }

/* Settings: saved proxies listed as clickable links (like the Sites tab). */
.setting-col {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.setting-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.proxy-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proxy-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.proxy-link:hover {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.proxy-link-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--teal);
  color: var(--va-ink, #042522);
  font-weight: 800;
  font-size: 14px;
}

.proxy-link-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.proxy-link-name {
  font-weight: 650;
  font-size: 14px;
}

.proxy-link-url {
  color: var(--text-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proxy-link-open {
  margin-left: auto;
  color: var(--teal);
  font-weight: 650;
  font-size: 13px;
  flex: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 550;
  user-select: none;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.chip:hover { border-color: var(--line-strong); color: var(--text); }

.chip input { display: none; }

.chip:has(input:checked),
.chip.is-active {
  background: var(--panel-3);
  border-color: var(--va, var(--accent));
  color: var(--va, var(--accent));
  font-weight: 650;
}

/* Docs type filter (All / Lists / SVGs / HTMLs). Sits in the view header next
   to the sort control; uses the same pill chips as everywhere else. */
.docs-filter-row {
  justify-content: flex-end;
  margin: 0;
}

.docs-filter-row .chip {
  font-size: 13px;
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.docs-filter-row .chip:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.docs-filter-row .chip.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.setting-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.mono { font-family: var(--mono); font-size: 15px; color: var(--accent); }

.panel-note { margin-top: 14px; }

/* ---------- Proxy form ---------- */

.view[data-view="proxies"] {
  max-width: none;
}

.view[data-view="proxies"] .view-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}



/* Apps/Tools is now a flat app/tool launcher grid, like Sites. */

.view[data-view="apps-tools"] .grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.proxy-form {
  max-width: none;
  margin-bottom: 20px;
  padding: 18px;
  background: var(--panel);
}

.proxy-form .panel-title {
  margin-bottom: 6px;
  font-size: 20px;
}

.proxy-form .panel-note {
  max-width: 680px;
  margin: 0 0 16px;
  color: var(--text-2);
}

.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.field {
  height: 38px;
  padding: 0 12px;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.field:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}

.field-name { flex: 1 1 140px; min-width: 120px; }
.field-url { flex: 3 1 260px; min-width: 200px; }
.field-mode { flex: none; }

.btn {
  height: 38px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 9px;
  font-weight: 650;
  font-size: 16px;
  flex: none;
}

.btn:hover { filter: brightness(1.1); }

.btn:active { transform: translateY(1px) scale(0.98); }

.btn-danger {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.btn-danger:hover {
  color: #f2555a;
  border-color: #5a2a2e;
  background: #2a1f21;
}

/* Toggle switch */

.switch {
  position: relative;
  display: inline-flex;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch .track {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  display: block;
}

.switch .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform 140ms ease, background 140ms ease;
}

.switch input:checked + .track {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.switch input:checked + .track::after {
  transform: translateX(16px);
  background: var(--accent);
}

.switch input:focus-visible + .track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Segmented control */

.seg {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}

.seg-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  transition: color 140ms ease, background 140ms ease;
}

.seg-btn:hover:not(.is-active) { color: var(--text); }

.seg-btn.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Tab cloak ---------- */

.cloak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.cloak-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text-2);
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.cloak-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloak-btn .cloak-ico {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 4px;
  object-fit: contain;
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.cloak-btn .cloak-ico-none {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.cloak-btn:hover:not(.is-active) {
  color: var(--text);
  border-color: var(--line-soft);
}

.cloak-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- Appearance: theme pickers, wallpapers, cursors ---------- */

.theme-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.theme-color-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.theme-color-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

.theme-color-field input[type="color"] {
  width: 68px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.theme-color-field input[type="color"]:hover { border-color: var(--text-3); }
.theme-color-field input[type="color"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.theme-color-field input[type="color"]:active { transform: scale(0.96); }
/* Round the native swatch itself so the colour chip follows the field's
   rounded shape instead of showing a hard-edged square inside it. */
.theme-color-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.theme-color-field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 10px;
}
.theme-color-field input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 10px;
}

.theme-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-theme {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text-2);
  font-family: var(--display-geo);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.btn-theme:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line-soft);
}

.btn-theme.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.btn-theme:disabled { opacity: 0.5; cursor: default; }

.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.wallpaper-swatch {
  height: 56px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
  cursor: pointer;
  padding: 0;
  transition: border-color 140ms ease, transform 140ms ease;
}

.wallpaper-swatch:hover { transform: translateY(-2px); }

.wallpaper-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.preset-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
  overflow: hidden;
  text-align: left;
}

.preset-swatch > span:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-swatch:hover { transform: translateY(-2px); border-color: var(--line-soft); }

.preset-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  color: var(--text);
}

.preset-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex: none;
}

.preset-dot.is-accent {
  margin-left: -9px;
}

.theme-custom-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.theme-custom-row .field { flex: 1 1 220px; min-width: 0; }

/* The file picker is a hidden input behind a label styled as a button, so the
   row stays one consistent set of controls. */
.theme-file-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  cursor: pointer;
}
.theme-file-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cursor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.cursor-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-2);
  font-family: var(--display-geo);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.cursor-swatch:hover:not(.is-active) { color: var(--text); border-color: var(--line-soft); }

.cursor-swatch.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.cursor-swatch img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.cursor-swatch .cursor-none-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Settings overhaul: card grid ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.settings-card {
  padding: 20px;
  border-radius: 16px;
}

/* Collapsible settings panels: the header is one big click target. */
.settings-panel {
  padding: 0;
  overflow: hidden;
}

.settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.settings-toggle:hover { background: var(--panel-2); }

.settings-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 16px;
}

.settings-toggle-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-toggle-title {
  font-family: var(--display-geo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.settings-toggle-sub {
  font-size: 12.5px;
  color: var(--text-3);
}

.settings-chev {
  width: 18px;
  height: 18px;
  color: var(--text-3);
  flex: none;
  transition: transform 180ms ease;
}

.settings-panel.is-open .settings-chev { transform: rotate(180deg); }

.settings-panel .settings-body {
  padding: 0 20px 20px;
}

.settings-panel .settings-body[hidden] { display: none; }

.settings-panel + .settings-panel .settings-body { border-top: 1px solid var(--line-soft); }

/* Count chip in the collapsed section header ("3 options", "offline"). */
.settings-count {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 3px 9px;
}

.settings-count.is-on {
  color: var(--accent);
  border-color: rgba(52, 168, 83, 0.4);
  background: var(--accent-soft);
}

/* Inline action row inside a settings block. */
.settings-block-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* Debug info box in Advanced. */
.debug-box {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--base);
  border: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 18px;
}

.debug-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-2);
}

.debug-row b {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.settings-head .panel-title { margin: 0; }

.settings-note {
  margin: 0 0 16px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.settings-block {
  padding: 14px 0 6px;
  border-top: 1px solid var(--line-soft);
}

.settings-block:first-of-type { border-top: none; padding-top: 4px; }

.settings-block-label {
  font-family: var(--display-geo);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.settings-block-hint {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 12.5px;
}

/* Compact row: label on the left, control on the right. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  border-top: 1px solid var(--line-soft);
}

.settings-card .settings-row:first-of-type { border-top: none; padding-top: 4px; }

.settings-row-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.settings-row-txt .setting-name {
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
}

.settings-row-txt .setting-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-3);
}

.settings-row .chip-row { justify-content: flex-end; }

.settings-select {
  width: min(230px, 45vw);
  min-width: 0;
  flex: none;
}

.settings-input {
  width: min(230px, 45vw);
  min-width: 0;
  flex: none;
}

/* Appearance: let the color pickers sit in a tidy row and presets breathe. */
.settings-card .theme-color-row { margin-bottom: 0; }
.settings-card .preset-grid { margin-top: 10px; }
.settings-card .wallpaper-grid { margin-top: 4px; }
.settings-card .cursor-grid { margin-top: 4px; }

.settings-about { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card-wide, .settings-about { grid-column: auto; }
  .settings-select, .settings-input { width: min(200px, 40vw); }
}

@media (max-width: 520px) {
  .settings-row { flex-wrap: wrap; }
  .settings-select, .settings-input { width: 100%; }
}

/* ---------- HTML Editor app modal ---------- */
/* The editor is a full-page surface, not a window: it fills the viewport so
   there is real room to write and preview side by side. */
.editor-modal {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.editor-modal .admin-cover {
  background: rgba(5, 6, 9, 0.94);
}

.editor-modal .admin-card {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.editor-modal .admin-head {
  flex: none;
  padding: 12px 18px;
}

.editor-modal .editor-tools {
  flex: 1;
  min-width: 0;
}

.editor-modal .admin-really-button { }

.editor-modal .editor {
  flex: 1;
  min-height: 0;
  margin: 12px 0 0;
}

.editor-modal .editor-pane {
  min-height: 0;
}

/* Editor panes get full height inside the full-page card. */
.editor-modal .editor-card {
  height: 100vh;
}

.editor-modal .editor {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  margin-top: 0;
}

.editor-modal .editor-preview {
  min-height: 0;
}

/* ---------- Card category tag ---------- */

.card-cat {
  display: inline-block;
  margin-left: 6px;
  align-self: center;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---------- Admin panel ---------- */

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-cover {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.88);
}

.admin-card {
  position: relative;
  width: min(680px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #14171c;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.admin-title {
  font-family: var(--display-geo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-gate {
  padding: 24px;
}

.admin-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px 9px 0 0;
  color: var(--text-2);
  font-family: var(--display-geo);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  border-bottom: none;
  transition: color 140ms ease, background 140ms ease;
}

.admin-tab .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.admin-tab:hover:not(.is-active) { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.admin-tab.is-active {
  color: var(--accent);
  background: var(--panel-2);
  border-color: var(--line);
}

.admin-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 20px;
  flex: 1;
  min-height: 0;
}

.admin-form {
  margin-bottom: 18px;
}

.field-stack {
  display: grid;
  gap: 10px;
}

.field-textarea {
  min-height: 72px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}

.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.admin-check input { accent-color: var(--accent); }

.admin-spacer { flex: 1; }

.admin-form-panel[hidden] { display: none; }

.admin-list {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.admin-row-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.admin-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--display-geo);
  font-weight: 600;
  font-size: 15.5px;
  white-space: nowrap;
}

.admin-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.admin-row-title .admin-tag {
  flex: none;
}

.admin-row-ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-geo);
  font-weight: 800;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid;
}

.admin-row-sub {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent);
}
.admin-tag.is-html { background: rgba(234, 67, 53, 0.15); color: #ff8a80; }
.admin-tag.is-empty { background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.admin-tag.is-credit { background: rgba(18, 181, 165, 0.16); color: #4fd8c8; }

.btn-ghost.danger:hover { color: #ff6b5e; }

.tool-tile {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 140ms ease, transform 140ms ease;
}

.tool-tile:hover {
  border-color: var(--va);
  transform: translateY(-1px);
}

.tool-tile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  height: 100%;
}

.tool-tile-art {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.tool-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tool-tile-letter {
  font-family: var(--display-geo);
  font-size: 22px;
  color: var(--va);
}

.tool-tile-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tool-tile-title {
  font-family: var(--display-geo);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-tile-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
}

.tool-tile-meta .card-cat { margin-left: 0; }

.tool-tile-open {
  margin-left: auto;
  color: var(--text-2);
  font-weight: 600;
  transition: color 140ms ease;
}

.tool-tile-link:hover .tool-tile-open { color: var(--va); }

/* Proxy apps: a small "proxy" tag in the meta row + a subtle accent ring so
   they read as "these open through your proxy" at a glance. */
.tool-tile-via {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--va);
  background: var(--va-soft);
  border: 1px solid var(--va);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* Small disclaimer line under app tiles (e.g. emulators that need
   you to bring your own ROM/.swf). Sits below the meta row. */
.tool-tile-note {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-3);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-tile.is-proxy .tool-tile-art {
  position: relative;
  outline: 2px solid var(--va-soft);
  outline-offset: 2px;
}

@keyframes adminShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}
.admin-card.shake { animation: adminShake 0.28s ease; }

@media (max-width: 640px) {
  .admin-row { flex-direction: column; align-items: flex-start; }
  .admin-row-actions { width: 100%; }
  .admin-row-actions .btn-ghost { flex: 1; text-align: center; }
}

.proxy-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.proxy-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 158px;
  padding: 16px;
  background: #1a1d23;
}

.proxy-card:hover {
  background: #20242b;
}

.proxy-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.proxy-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  overflow: hidden;
  background: var(--va-soft);
  border: 1px solid var(--va);
  color: var(--va);
  font-family: var(--display-geo);
  font-size: 21px;
  font-weight: 700;
}

.proxy-mark span {
  line-height: 1;
}

.proxy-mark .proxy-fav {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1a1d23;
}

.proxy-copy {
  min-width: 0;
}

.proxy-card .card-title {
  font-size: 19px;
  margin-bottom: 3px;
}

.proxy-url {
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proxy-meta-line {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.proxy-pill {
  height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 14px;
  font-weight: 700;
}

.proxy-pill.is-live {
  background: rgba(45, 166, 92, 0.13);
  border-color: rgba(45, 166, 92, 0.34);
  color: #62d18f;
}

.proxy-pill.is-missing {
  background: rgba(52, 168, 83, 0.12);
  border-color: rgba(52, 168, 83, 0.28);
  color: var(--accent);
}

.proxy-pill.is-credit {
  background: rgba(169, 112, 255, 0.13);
  border-color: rgba(169, 112, 255, 0.34);
  color: #c39aff;
  font-weight: 650;
}

.proxy-link-credit {
  color: #c39aff;
  font-size: 11px;
  margin-left: 8px;
}

.proxy-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ---------- The Board ---------- */

.board-view.is-visible {
  min-height: calc(100vh - var(--topbar-h) - 156px);
  display: flex;
  flex-direction: column;
}

.chalkboard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px;
  overflow: hidden;
  background: #244b37;
  border: 10px solid #8d9298;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 3px #c2c5c8,
    inset 0 0 42px rgba(0, 0, 0, 0.35),
    0 18px 44px rgba(0, 0, 0, 0.3);
  color: #eef0e8;
  font-family: "Comic Sans MS", "Bradley Hand ITC", cursive;
}

.board-title {
  margin: 0;
  text-align: center;
  font-family: var(--display);   /* bubble font, matching every other tab header */
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(255,255,255,0.08);
}

.board-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.board-col {
  min-width: 0;
  padding: 18px;
  border: 2px solid rgba(238, 240, 232, 0.62);
  border-radius: 8px;
}

.board-col h2 {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 43px);
  font-weight: 700;
  letter-spacing: 0;
}

.board-members {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Empty board column: "N spots are open" + an Apply here CTA so
   open roles read as an invitation instead of dead space. */
.board-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  text-align: center;
  color: var(--text-3);
}
.board-open-label {
  font-size: 15px;
  font-weight: 600;
}
.board-apply-btn { margin-top: 2px; }

.board-person {
  width: min(132px, 42%);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.board-pfp {
  width: 84px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(238, 240, 232, 0.78);
  border-radius: 8px;
  color: #f5f3df;
  background: rgba(12, 18, 16, 0.12);
  font-family: var(--display-geo);
  font-size: 50px;
  font-weight: 700;
}

.board-pfp.has-img { padding: 0; }

.board-pfp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.board-pfp-img.img-failed {
  display: none;
}

.board-pfp.has-img.img-failed-noimg {
  font-family: var(--display-geo);
  font-size: 50px;
  font-weight: 700;
  color: #f5f3df;
  background: rgba(12, 18, 16, 0.12);
}

/* Keep letter badge styling when an added image link is blank or broken. */
.board-pfp.img-failed-letter {
  display: grid;
  place-items: center;
  font-family: var(--display-geo);
  font-size: 50px;
  font-weight: 700;
  color: #f5f3df;
  background: rgba(12, 18, 16, 0.12);
}

.board-name,
.board-empty {
  color: #f4f1dc;
  text-align: center;
  font-size: 26px;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.board-empty {
  margin-top: 34px;
  color: rgba(244, 241, 220, 0.58);
}

.btn-ghost {
  flex: 1;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-ghost:hover { color: var(--text); background: #2a2f38; }

.btn-ghost.is-set { background: var(--accent-soft); color: var(--accent); }

/* ---------- Proxy overlay ---------- */

/* ---------- Chalkle Browser (in-app) ----------
   Full browser chrome hosted inside #proxy-overlay: tabs, toolbar,
   address bar, new-tab page, loading progress, blocked/error panel. */

.overlay.browser {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.browser-chrome {
  flex: none;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

/* Tab bar */
.browser-tabbar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 8px 0;
  min-height: 40px;
}
.browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.browser-tabs::-webkit-scrollbar { display: none; }
.browser-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 190px;
  min-width: 96px;
  max-width: 210px;
  height: 33px;
  padding: 0 6px 0 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.browser-tab:hover { background: var(--surface); color: var(--text); }
.browser-tab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.browser-tab-fav {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #0d0c0a;
  user-select: none;
  overflow: hidden;
}
/* The site's real favicon, layered over the letter tile. Invisible until the
   image actually decodes (the markup flips opacity on load), so a dead mirror
   or a slow fetch leaves the letter showing instead of a blank square. */
.browser-tab-fav-img {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #fff;
  opacity: 0;
}
.browser-tab.is-loading .browser-tab-fav {
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: bzSpin 0.8s linear infinite;
}
.browser-tab-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-tab-x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.browser-tab-x:hover { background: var(--surface-active); color: var(--text); }
.browser-tab-x .icon { width: 11px; height: 11px; }
.browser-newtab {
  display: grid;
  place-items: center;
  width: 30px;
  height: 33px;
  flex: none;
  align-self: flex-end;
  margin-bottom: 1px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.browser-newtab:hover { background: var(--surface); color: var(--text); }
.browser-newtab .icon { width: 15px; height: 15px; }

/* Toolbar */
.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.browser-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.browser-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.browser-btn:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.browser-btn:disabled { opacity: 0.38; cursor: default; }
.browser-btn .icon { width: 18px; height: 18px; }
.browser-home .icon { width: 19px; height: 19px; }
.browser-close .icon { width: 17px; height: 17px; }
.browser-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

/* Address bar */
.browser-address {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.browser-address:hover { border-color: var(--border-strong); }
.browser-address:focus-within {
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.browser-addr-ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.browser-addr-ico.is-editing { color: var(--accent); }
.browser-star {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.browser-star:hover { color: var(--text); background: var(--surface-active); }
.browser-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.browser-star:disabled { opacity: 0.4; cursor: default; }
.browser-star svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.browser-star.is-on { color: #f5b301; }
.browser-star.is-on:hover { background: rgba(245, 179, 1, 0.12); }
.browser-star.is-on svg { fill: currentColor; }
.browser-addr {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13.5px;
  caret-color: var(--accent);
}
.browser-addr::placeholder { color: var(--text-muted); font-family: var(--font); }
/* Address bar + omnibox. The wrapper exists only so the suggestion panel can
   hang off the field's own box - the toolbar itself is not positioned, and
   anchoring the panel to the overlay would drift on the small-screen layouts
   where the toolbar wraps. */
.browser-address-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.browser-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;
  max-height: min(52vh, 360px);
  overflow-y: auto;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
  overscroll-behavior: contain;
}
.browser-sg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.browser-sg-row:hover,
.browser-sg-row.is-active { background: var(--surface-hover); }
.browser-sg-badge {
  flex: none;
  min-width: 62px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.browser-sg-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.browser-sg-label,
.browser-sg-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-sg-label { font-size: 13px; }
.browser-sg-sub { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.browser-go {
  flex: none;
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}
.browser-go:hover { filter: brightness(1.08); }
.browser-go:active { filter: brightness(0.95); }

/* Progress */
.browser-progress {
  height: 2px;
  flex: none;
  overflow: hidden;
  background: transparent;
}
.browser-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 260ms var(--ease), opacity 200ms var(--ease);
}

/* Notice bar (known frame-blocking hosts) */
.browser-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 8px 12px 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
}
.browser-notice span { flex: 1; min-width: 0; }
.browser-notice-ext {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.browser-notice-ext:hover { border-color: var(--accent); }
.browser-notice-x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.browser-notice-x:hover { background: var(--surface-active); color: var(--text); }
.browser-notice-x .icon { width: 13px; height: 13px; }

/* Body */
.browser-body {
  flex: 1;
  position: relative;
  min-height: 0;
  background: var(--bg);
}
.browser-viewport { position: absolute; inset: 0; }
.browser-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* New-tab page */
.browser-newtab-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  overflow-y: auto;
  text-align: center;
}
.browser-nt-logo {
  font-size: clamp(38px, 6vw, 52px);
}
.browser-nt-tag {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13.5px;
}
.browser-nt-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
}
.browser-nt-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.browser-nt-link:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
  transform: translateY(-1px);
}
.browser-nt-note {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* New-tab bookmarks shelf */
.browser-nt-bookmarks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.browser-nt-sublabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.browser-nt-bk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.browser-nt-bk {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.browser-nt-bk-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 230px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.browser-nt-bk-go:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
  transform: translateY(-1px);
}
.browser-nt-bk-fav {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.browser-nt-bk-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-nt-bk-x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-hover);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.browser-nt-bk:hover .browser-nt-bk-x { display: inline-flex; }
.browser-nt-bk-x:hover { color: var(--danger); background: var(--surface-active); }
.browser-nt-bk-x svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: none) {
  .browser-nt-bk-x { display: inline-flex; }
}

/* Blocked / error */
.browser-blocked {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  z-index: 5;
}
.browser-blocked-card {
  max-width: 420px;
  width: 100%;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-3);
}
.browser-blocked-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
}
.browser-blocked-title {
  margin: 0 0 6px;
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 600;
}
.browser-blocked-msg {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
}
/* What to do next, then which route actually failed - the two lines that turn
   "page unavailable" into something the user can act on. */
.browser-blocked-hint {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.browser-blocked-hint:empty { display: none; }
.browser-blocked-detail {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.browser-blocked-detail:empty { display: none; }
.browser-blocked-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.browser-bbtn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-hover);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.browser-bbtn:hover { border-color: var(--border-strong); background: var(--surface-active); }
.browser-bbtn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.browser-bbtn.primary:hover { filter: brightness(1.08); }

/* Fullscreen: hide chrome, keep an exit pill. */
.overlay.browser.fs .browser-chrome,
.overlay.browser.fs .browser-notice { display: none; }
.browser-exitfs {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.92);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms var(--ease);
}

@keyframes bzSpin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .browser-toolbar { gap: 5px; padding: 7px 8px; }
  .browser-nav { gap: 0; }
  .browser-btn { width: 32px; height: 32px; }
  .browser-address { padding-left: 10px; }
  .browser-go { display: none; }
  .browser-tab { flex-basis: 150px; min-width: 84px; }
}
@media (max-width: 480px) {
  .bz-hide-sm { display: none !important; }
  .browser-notice { padding: 7px 10px 7px 12px; }
}

/* ---------- Launch picker ---------- */

.launch-modal {
  --launch-green: #4ab88c;
  --launch-green-bright: #5dd1a6;
  --launch-teal: #3db39a;
  position: fixed;
  inset: 0;
  z-index: 80;
  /* Flat dark backdrop with a faint green tint, no gradient. */
  background: rgba(10, 12, 14, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.launch-card {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(74, 184, 140, 0.06);
}

.launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.launch-titles {
  min-width: 0;
}

.launch-name {
  display: block;
  font-family: var(--display-geo);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.launch-sub {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--text-3);
  line-height: 1.4;
}

.launch-x {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}

.launch-x:hover { color: var(--text); background: var(--panel-2); }

.launch-x .icon { width: 16px; height: 16px; }

.launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 1.5rem 0 1.75rem;
}

.launch-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px 12px;
  border-radius: 12px;
  background: rgba(74, 184, 140, 0.04);
  border: 1px solid rgba(74, 184, 140, 0.18);
  color: var(--text-2);
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.launch-opt .icon {
  width: 24px;
  height: 24px;
  color: var(--launch-teal);
  transition: color 180ms ease;
}

.launch-opt-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

.launch-opt-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.35;
  opacity: 0.85;
  transition: opacity 180ms ease;
}

.launch-opt:hover {
  transform: translateY(-2px);
  border-color: rgba(74, 184, 140, 0.55);
  background: rgba(74, 184, 140, 0.1);
  color: var(--launch-green-bright);
  box-shadow: inset 0 0 0 1px rgba(74, 184, 140, 0.18), inset 0 0 18px rgba(74, 184, 140, 0.09), 0 16px 32px rgba(0, 0, 0, 0.32);
}

.launch-opt:hover .icon { color: var(--launch-green-bright); }

.launch-opt:hover .launch-opt-desc { opacity: 1; }

/* Featured "Direct" card: 2px accent border + inner glow + floating badge. */
.launch-opt.launch-featured {
  border: 2px solid var(--launch-green);
  background: rgba(74, 184, 140, 0.13);
  box-shadow: inset 0 0 0 1px rgba(74, 184, 140, 0.22), inset 0 0 24px rgba(74, 184, 140, 0.12), 0 14px 34px rgba(0, 0, 0, 0.3);
}

.launch-opt.launch-featured .icon { color: var(--launch-green); }

.launch-opt.launch-featured:hover .icon { color: var(--launch-green-bright); }

.launch-opt.launch-featured:hover {
  border-color: var(--launch-green-bright);
  box-shadow: inset 0 0 0 1px rgba(74, 184, 140, 0.25), inset 0 0 26px rgba(74, 184, 140, 0.14), 0 0 26px rgba(74, 184, 140, 0.18), 0 18px 36px rgba(0, 0, 0, 0.35);
}

.launch-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--launch-green);
  color: #08211a;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.launch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.launch-proxy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.launch-label {
  font-size: 14.5px;
  color: var(--text-3);
}

.launch-set {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 560px) {
  .launch-card { padding: 1.5rem; }
  .launch-name { font-size: 22px; }
  .launch-grid { grid-template-columns: repeat(2, 1fr); }
  .launch-foot { flex-direction: column; align-items: stretch; }
}

/* ---------- HTML editor ---------- */

.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.editor-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-tools .btn-ghost { flex: none; }

.editor-tools .file { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

.editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 14px;
}

.editor-wrap {
  position: relative;
  background: var(--base);
  overflow: auto;
}

.editor-hl,
.editor-code {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.editor-hl {
  position: absolute;
  inset: 0;
  padding: 12px;
  pointer-events: none;
  color: var(--text);
  overflow: hidden;
  white-space: pre;
  word-break: normal;
}

.editor-code {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
  border: 0;
  outline: none;
  padding: 12px;
}

.tok-tag { color: #34a853; }
.tok-comment { color: #62686f; font-style: italic; }
.tok-plain { color: var(--text); }

.editor-preview {
  width: 100%;
  min-height: 460px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
}

.editor-shell {
  padding-bottom: 16px;
}

.editor-status {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-3);
}

.panel-chip {
  font-family: var(--mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(52, 168, 83, 0.24);
  border-radius: 999px;
  padding: 4px 8px;
}

@media (max-width: 760px) {
  .boot-logo {
    font-size: clamp(40px, 14vw, 90px);
  }

  .editor { grid-template-columns: 1fr; }
  .editor-preview { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Boot intro ---------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.boot-logo-wrap {
  width: 100%;
  max-width: none;
  padding: 0 18px;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  justify-content: center;
  animation: bootLogoIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.boot-logo {
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 36px);
  overflow: visible;
  white-space: nowrap;
  font-size: clamp(50px, 14vw, 126px);
  letter-spacing: 0;
  transform-origin: center;
}

.boot-logo .bubble-letter {
  animation: bootLetterPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  letter-spacing: -0.025em;
}

@keyframes bootLetterPop {
  from { opacity: 0; transform: translateY(18px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bootLogoIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.boot-tag {
  font-family: var(--display-geo);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 0.4em;
  animation: bootTagIn 0.6s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes bootTagIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.boot-log {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  min-height: 5px;
  animation: bootTagIn 0.5s 0.7s both;
}

.boot-log.ready {
  color: var(--accent);
}

.boot-bar {
  width: min(320px, 64vw);
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.boot-progress {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
}

.boot-skip {
  position: absolute;
  bottom: 22px;
  right: 26px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 200ms ease, color 140ms ease;
}

.boot-skip:hover { color: var(--text); }

.boot.done .boot-skip { opacity: 0.7; }

.boot-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.boot-hud-line {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid var(--line);
}

.boot-hud-line.left { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.boot-hud-line.right { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---------- Scrollbars ---------- */

.main::-webkit-scrollbar,
.nav::-webkit-scrollbar {
  width: 10px;
}

.main::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.main::-webkit-scrollbar-thumb:hover,
.nav::-webkit-scrollbar-thumb:hover {
  background: #3a404a;
  background-clip: content-box;
}

/* ---------- Sidebar footer ---------- */

.side-foot {
  padding: 11px 16px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--text-3);
  border-top: 1px solid var(--line-soft);
  white-space: nowrap;
  overflow: hidden;
}

body.sidebar-collapsed .side-foot { display: none; }

/* ---------- Compact cards ---------- */

body.size-compact .grid {
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 11px;
}

body.size-compact .card-body { padding: 9px 10px 11px; }

body.size-compact .card-title { font-size: 16.5px; }

body.size-compact .card-source { display: none; }

/* ---------- 2026 surface refresh ---------- */
.topbar {
  height: 60px;
  padding: 0 18px;
  background: #101419;
  border-bottom-width: 2px;
}
.brand-name { font-size: 34px; }
.search { max-width: 620px; }
.search input {
  height: 42px;
  border-radius: 11px;
  background: #171b21;
  border-color: #303640;
}
.search input:focus { background: #1b2027; }
.sidebar {
  width: 244px;
  background: #11151a;
  border-right-color: #2b3139;
}
.nav { padding: 14px 12px 0; gap: 5px; }
.nav-item { height: 42px; padding: 0 13px; border-radius: 10px; font-size: 15px; }
.nav-item:hover { background: #1b2026; }
.nav-item.is-active { font-weight: 700; }
.nav-item.is-active::before { left: 0; top: 8px; bottom: 8px; }
.nav-bottom { padding: 12px 12px 0; }
.nav-social { width: 38px; height: 38px; border-radius: 10px; }
.collapse-btn { margin: 9px 12px; }
.main { padding: 30px 32px 56px; }
.view-head { margin-bottom: 18px; }
.grid { gap: 14px; }
.card { border-radius: 12px; border-color: #2b3138; background: #15191f; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.card:hover { border-color: #3b444f; transform: translateY(-2px); }
.card-body { padding: 11px 12px 13px; }
.card-title { font-size: 16px; }
.field, .select, input, textarea { border-radius: 10px; }
.chip { border-radius: 999px; padding: 7px 11px; }

@media (min-width: 481px) {
  .sidebar { min-width: 244px; }
  body.sidebar-collapsed .sidebar { min-width: 64px; }
}
@media (max-width: 860px) {
  .topbar { padding: 0 12px; }
  .search { max-width: none; }
  .main { padding: 24px 20px 48px; }
}
@media (max-width: 480px) {
  .topbar { height: 56px; }
  .main { padding: 18px 14px 40px; }
  .sidebar { width: 64px; min-width: 64px; }
  .brand-name { font-size: 29px; }
  .grid { gap: 10px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation: none !important;
  transition: none !important;
}

/* Low-power default: index.html's early boot script adds motion-off before
   first paint on small-memory Chromebooks and phones. app.js seeds the
   same default into state.motion, so the Settings checkbox reflects it and
   an explicit user choice always wins from then on. No CSS needed here
   beyond the existing class rules above. */

/* ---------- Mobile (phones and small screens; Chromebooks stay laptop) ---------- */

@media (max-width: 560px) {
  .brand { width: auto; }
  .topbar-spacer { display: none; }
  /* The sidebar itself only drops to the icon rail on real phones (see the
     480px block). Even a heavily zoomed Chromebook keeps the full labeled
     sidebar, so the nav can never look like it vanished; the manual
     collapsed state always shows the labeled Expand pill. */
  .kbd { display: none; }
  .main { padding: 16px 16px 28px; }

  /* Touch has no hover: keep the affordances visible and cards fatter. */
  .grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
  .card-title { font-size: 16.5px; }
  .open-with { opacity: 1; }
  .quick-launch { opacity: 1; transform: translateY(0); }
  .fav-btn { width: 34px; height: 34px; }
  .proxy-btn { width: 34px; height: 34px; right: 50px; }
  .view-head,
  .game-command {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .view-head {
    display: grid;
  }

  .view-actions,
  .game-filters {
    justify-content: flex-start;
  }

  .game-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-stat:nth-child(2) {
    border-right: 0;
  }

  .game-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-soft);
  }

  .board-view {
    height: auto;
    min-height: 0;
  }

  .chalkboard {
    min-height: calc(100vh - var(--topbar-h) - 56px);
    overflow: auto;
  }

  .board-columns {
    grid-template-columns: 1fr;
  }
}

/* Very narrow screens: keep cards at a readable two-column-ish width. */
@media (max-width: 420px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 10px; }
  .card-body { padding: 9px 10px 11px; }
  .card-title { font-size: 15.5px; }
}

/* ---------- Music ---------- */

.main { padding-bottom: 132px; }

/* Music page search: rebuilt in the music design system block near the end
   of this file. This space intentionally retired the old toolbar styles. */


.music-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.chip:hover { color: var(--text); border-color: #3a404a; }

.chip.is-active {
  background: var(--va-soft);
  border-color: var(--va);
  color: var(--va);
}

.chip-upload { cursor: pointer; }

.music-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 14px;
}

.music-head {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.music-status {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Song cards */

.song-card { cursor: pointer; }

.song-card .card-thumb img {
  object-fit: cover;
  padding: 0;
}

.song-card .card-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.song-card .card-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.card-badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.5;
}

.card-sub {
  display: block;
  font-size: 14px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-desc {
  display: none;
}

.song-card .card-sub {
  font-size: 14.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-card .card-dur {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-3);
  flex: none;
}

.song-card.is-current {
  border-color: var(--accent);
  background: var(--panel-2);
}

.song-card.is-current .card-title { color: var(--accent); }

.song-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 22, 26, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease;
  z-index: 2;
}

.song-fav .icon {
  width: 16px;
  height: 16px;
}

.song-card:hover .song-fav,
.song-card:focus-within .song-fav { opacity: 1; }

.song-fav:hover { color: var(--text); }

.song-fav.is-on { opacity: 1; color: var(--accent); }

.song-fav.is-on svg { fill: var(--accent); stroke: var(--accent); }

@media (hover: none) {
  .song-fav { opacity: 1; }
}
/* Final surface pass (Chalkle 2.0): solid topbar, no blur, no wash. */
.topbar {
  background: #101317;
}

.search input { border-radius: 8px; }
.search:focus-within .icon { color: var(--accent); }

.main { padding: 34px 34px 52px; }
.view.is-visible { animation: view-in 180ms ease both; }

/* Opacity-only fade. A transform here would stick around after the animation
   (fill-mode: both) and turn .view into the containing block for its fixed
   background layer, which breaks the per-tab backgrounds on some devices
   (Chromebooks show the plain green body instead). No transform, no break. */
@keyframes view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Launcher-style entrance: the view's direct children (header, panels,
   shelves) rise into place with a tiny stagger so tab switches feel alive.
   Never applied to .view itself - a transform there would trap the fixed
   background layer (Chromebook bug above). Killed by motion-off and
   prefers-reduced-motion, which force animation:none globally. */
@keyframes view-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.view.is-visible > * {
  animation: view-rise 260ms var(--ease) both;
}
.view.is-visible > *:nth-child(2) { animation-delay: 40ms; }
.view.is-visible > *:nth-child(3) { animation-delay: 80ms; }
.view.is-visible > *:nth-child(4) { animation-delay: 120ms; }
.view.is-visible > *:nth-child(5) { animation-delay: 140ms; }
.view.is-visible > *:nth-child(n + 6) { animation-delay: 160ms; }

.view-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
}


.home-block { border-radius: 18px; }

.view-title { font-size: 31px; }
.view-meta { border-radius: 999px; }

.game-stats { border-radius: 12px; }
.grid { gap: 16px; }

.card {
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.card:hover { transform: translateY(-4px); }

.empty {
  border-radius: 14px;
  padding: 70px 24px;
  background: rgba(12, 18, 16, 0.28);
}

.panel {
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.view[data-view="settings"] { max-width: none; }
.view[data-view="settings"] .panel + .panel { margin-top: 16px; }

.field,
.btn { border-radius: 10px; }

.proxy-form { background: rgba(20, 24, 29, 0.94); }
.proxy-card,
.tool-tile-art {
  position: relative;
  background: var(--panel);
}
.proxy-card:hover { background: #17271f; }

.chalkboard { border-radius: 14px; }
.board-col {
  border-radius: 12px;
  background: rgba(4, 20, 11, 0.08);
}

.editor { border-radius: 14px; }
.editor-wrap:focus-within { box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 900px) {
  .main { padding: 22px 16px 36px; }
}

@media (max-width: 640px) {
  .livetv-block-head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .livetv-block-note { white-space: normal; }
  .livetv-match-grid { grid-template-columns: 1fr; }
  .livetv-match-badge { width: 44px; height: 44px; }
  .home-title { font-size: clamp(38px, 13vw, 52px); }
  .home-block { padding: 16px; }
  .home-block-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-block-note { white-space: normal; }
  .view-title { font-size: 29px; }
  .view-meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .music-toolbar { padding: 10px; }
}

/* ---------- URL Auditor app modal ---------- */

.ua-modal .ua-card {
  width: min(940px, 100%);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.ua-body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ua-title-icon { display: inline-flex; align-items: center; margin-right: 2px; color: var(--accent); }
.ua-title-icon .icon { width: 18px; height: 18px; }

.ua-hint {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
}
.ua-hint b { color: var(--accent); font-weight: 600; }

.ua-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ua-row .field-name { flex: 1 1 240px; }

.ua-paste {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.ua-count { color: var(--text-3); font-size: 12.5px; }

.ua-scan-row { display: flex; align-items: center; gap: 10px; }

.ua-progress { display: flex; flex-direction: column; gap: 6px; }
.ua-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.ua-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 180ms ease;
}
.ua-progress-label { color: var(--text-2); font-size: 12.5px; }

.ua-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ua-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12.5px;
}
.ua-chip .ua-dot { --cs: rgba(255,255,255,0.12); }
.ua-chip b { font-size: 13.5px; }
.ua-chip i { font-style: normal; color: var(--text-2); }
.ua-chip-total { border-color: var(--accent); }
.ua-chip-total b { color: var(--accent); }

.ua-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--text-3));
  box-shadow: 0 0 0 3px var(--cs, rgba(255,255,255,0.08));
  flex: none;
}

.ua-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-fbtn { font-size: 13px; padding: 6px 12px; }

.ua-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.ua-table thead th {
  text-align: left;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}
.ua-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.ua-table tbody tr:hover { background: var(--panel-2); }
.ua-col-url { min-width: 220px; }
.ua-col-status { width: 150px; white-space: nowrap; }
.ua-col-code { width: 70px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ua-col-ms { width: 80px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ua-col-act { width: 120px; text-align: right; white-space: nowrap; }

.ua-url {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  color: var(--text);
}

.ua-status { margin-left: 7px; font-weight: 500; }
.ua-status-ok        { color: var(--accent); }
.ua-status-redirect  { color: var(--blue); }
.ua-status-blocked   { color: var(--red); }
.ua-status-dead      { color: #fbbc05; }
.ua-status-error     { color: var(--red); }
.ua-status-unreachable { color: var(--text-3); }
.ua-status-checking  { color: var(--text-2); font-style: italic; }
.ua-code-ok          { color: var(--accent); }
.ua-code-redirect    { color: var(--blue); }
.ua-code-blocked,.ua-code-error { color: var(--red); }
.ua-code-dead        { color: #fbbc05; }

.ua-mini {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 8px;
  font-size: 11.5px;
  padding: 4px 9px;
  cursor: pointer;
  margin-left: 6px;
  transition: border-color 120ms ease, color 120ms ease;
}
.ua-mini:hover { border-color: var(--accent); color: var(--accent); }

.ua-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 3000;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  max-width: 70vw;
}
.ua-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .ua-table .ua-col-ms { display: none; }
  .ua-table .ua-col-act { width: 96px; }
  .ua-mini { padding: 4px 7px; margin-left: 4px; }
}/* ---------- HTML Editor v2 ---------- */

/* The editor is a full-page surface (see .editor-modal rules above). */
.editor-card {
  width: 100vw;
  height: 100vh;
}

.editor-modal .editor-statusbar { padding: 8px 18px; }

.editor-modal .ed-toolbar, .editor-modal .ed-launch { gap: 6px; }

.editor-modal .ed-btn { width: 36px; height: 36px; }

.editor-title-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-right: 4px;
  vertical-align: -4px;
}

.editor-card .admin-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.editor-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ed-toolbar,
.ed-launch {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ed-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex: none;
}

.ed-btn {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text-2);
  cursor: pointer;
  position: relative;
}

.ed-btn .icon { width: 18px; height: 18px; }

.ed-btn:hover { color: var(--text); background: #2a2f38; }
.ed-btn.is-on { color: var(--accent); background: var(--accent-soft); }
.ed-btn.danger:hover { color: #ff6b5e; background: var(--red-soft); }
.ed-btn.file { cursor: pointer; }
.ed-btn.file input { display: none; }

.editor-statusbar {
  display: none; /* JS not yet; keep layout stable */
}

/* Status bar is a slim row above the editor panes. */
.editor-card .editor-statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.ed-status-left { color: var(--text-2); font-family: var(--display-geo); font-weight: 600; }
.ed-status-right { margin-left: auto; }
.ed-status-right.mono { font-family: var(--mono); }

.editor-modal .editor {
  flex: 1;
  margin: 0;
  min-height: 0;
}

.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;
  background: var(--base);
  gap: 0;
}

.editor-pane {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 430px;
}

/* Inside the full-page editor modal the panes must be able to fill height. */
.editor-modal .editor-pane,
.editor-modal .editor-wrap {
  min-height: 0;
}

.editor-modal .editor-wrap {
  height: 100%;
}

.editor-gutter {
  width: 46px;
  flex: none;
  padding: 12px 6px 12px 10px;
  text-align: right;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
  overflow: hidden;
  background: #101317;
  border-right: 1px solid var(--line);
  user-select: none;
  box-sizing: border-box;
  white-space: pre;
}

.editor-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--base);
}

.editor-hl,
.editor-code {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

.editor-hl {
  position: absolute;
  inset: 0;
  padding: 12px;
  pointer-events: none;
  color: var(--text);
  overflow: hidden;
  white-space: pre;
  word-break: normal;
}

.editor-code {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
  border: 0;
  outline: none;
  padding: 12px;
  white-space: pre;
  overflow: hidden;
}

/* Line-wrap mode on both the highlight and the textarea. */
.editor-hl.is-wrap,
.editor-code.is-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.tok-tag { color: #34a853; }
.tok-comment { color: #62686f; font-style: italic; }
.tok-attr { color: #8ab0ff; }
.tok-str { color: #f7c46c; }
.tok-plain { color: var(--text); }

.editor-hl.ed-active-find {
  animation: edPulse 900ms ease 1;
}
@keyframes edPulse {
  0% { box-shadow: inset 0 0 0 9999px rgba(66, 133, 244, 0.22); }
  100% { box-shadow: inset 0 0 0 9999px rgba(66, 133, 244, 0); }
}

.editor-preview {
  width: 100%;
  min-height: 460px;
  border: 0;
  border-left: 1px solid var(--line);
  background: #fff;
}

/* Find bar floating over the code pane. */
.ed-find {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.ed-find .icon {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  flex: none;
}
.ed-find input {
  width: 180px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.ed-find-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}.ed-find-x {
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.ed-find-x:hover { color: var(--text); }

/* Horizontal cover-card shelves for Continue / Popular / Watch next. */
.home-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px;
  padding: 2px 0 10px;
}

.home-card {
  width: 100%;
  min-width: 0;
  background: rgba(20, 24, 29, 0.94);
  border: 1px solid rgba(132, 180, 146, 0.12);
  border-radius: 16px;
  padding: 10px;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease;
}
.home-card:hover { transform: translateY(-3px); border-color: rgba(255, 77, 141, 0.5); }
.home-card:active { transform: translateY(-1px) scale(0.99); }

.home-card-art {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  overflow: hidden;
  background: var(--panel-2);
  display: grid;
  place-items: center;
}
.home-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-card-fall {
  font-family: var(--display);
  font-size: 30px;
  color: var(--va);
}
.home-card-txt { display: block; padding: 10px 2px 2px; }
.home-card-title {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.12;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-card-meta {
  display: block;
  margin-top: 5px;
  color: var(--text-3);
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.home-block-feat { margin-top: 18px; }

/* Editor's picks shelf inside the Games view sits flush under the
   filter chips before the ad slot + grid. */
.picks-on-games { margin-top: 2px; }

/* Recents box: head + its own card grid. */
.home-recents .home-shelf { margin-top: -4px; }

@media (max-width: 900px) {
}
@media (max-width: 520px) {
  .home-shelf { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Live viewer pill (top bar, right of the clock) ---------- */
.viewer-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--display);
  color: var(--text);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.viewer-eye {
  width: 15px;
  height: 15px;
  color: var(--green);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: chalkle-eyedot 2.4s ease-in-out infinite;
}
@keyframes chalkle-eyedot {
  0%, 82% { opacity: 1; }
  86%, 94% { opacity: 0.35; }
  100% { opacity: 1; }
}
.viewer-count {
  min-width: 1.2em;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}
.viewer-count.is-pop {
  animation: viewer-pop 380ms ease;
}
@keyframes viewer-pop {
  0% { transform: scale(1); color: var(--green); }
  45% { transform: scale(1.55); color: #b6ffb9; }
  100% { transform: scale(1); color: var(--green); }
}
.viewer-tip {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  white-space: nowrap;
  background: #0b0e11;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--display);
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 80;
}
.viewer-pill:hover .viewer-tip { opacity: 1; transform: translateY(0); }

/* ---------- Docs page ----------
   A library of saved link lists. Each doc is a hoverable card; hover reveals
   the action row (download, copy links, open all, edit, delete). Links inside
   the text are detected and rendered as clickable tiles. Cyan theme, matching
   the Docs tab color. */

.docs-view {
  --va: #6ec6ff;
  --va-ink: #04222e;
  --va-soft: rgba(110, 198, 255, 0.16);
  --docs-txt: #a9d8ff;
  --docs-txt-soft: #7fb8e8;
  --docs-line: rgba(110, 198, 255, 0.35);
}

.docs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  background: rgba(10, 26, 34, 0.88);
  border: 1px solid var(--docs-line);
}

.docs-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.docs-btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #6ec6ff;
  color: #04222e;
}

.docs-btn-upload:hover { background: #8fd4ff; }

.docs-count {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.docs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(10, 24, 34, 0.92);
  border: 1px solid var(--docs-line);
  border-radius: 14px;
  padding: 16px;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.docs-card:hover {
  border-color: rgba(110, 198, 255, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.docs-card-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.docs-card-title {
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--docs-txt);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.docs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
}

.docs-type-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--docs-line);
  border-radius: 6px;
  color: var(--docs-accent, #6ec6ff);
  background: rgba(110, 198, 255, 0.10);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.docs-meta-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(110, 198, 255, 0.12);
  border: 1px solid rgba(110, 198, 255, 0.24);
}

.docs-meta-chip.is-list {
  background: rgba(143, 214, 194, 0.14);
  border-color: rgba(143, 214, 194, 0.35);
  color: #9fe6cc;
}

.docs-meta-time { color: var(--text-3); background: rgba(255, 255, 255, 0.03); border-color: var(--line); }

.docs-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 160ms ease, transform 160ms ease;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}

.docs-card:hover .docs-card-actions,
.docs-card.is-open .docs-card-actions { opacity: 1; transform: translateY(0); }

.docs-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 9px;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.docs-act:hover { background: rgba(110, 198, 255, 0.16); color: var(--docs-txt); border-color: rgba(110, 198, 255, 0.4); }

.docs-act .icon { width: 15px; height: 15px; }

.docs-act-danger:hover { background: var(--red-soft); color: var(--red); border-color: rgba(234, 67, 53, 0.4); }

/* Doc body: plain lines + clickable link tiles */

.docs-card-body-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 240ms ease, opacity 200ms ease;
}

.docs-card.is-open .docs-card-body-wrap {
  max-height: 460px;
  overflow-y: auto;
  opacity: 1;
}

.docs-body { display: flex; flex-direction: column; gap: 8px; }

.docs-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--docs-txt-soft);
  word-break: break-word;
}

.docs-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  padding-top: 4px;
}

.docs-link-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(110, 198, 255, 0.14);
  border: 1px solid rgba(110, 198, 255, 0.3);
  color: var(--docs-txt);
  text-decoration: none;
  transition: background 130ms ease, transform 130ms ease;
}

.docs-link-tile:hover { background: rgba(110, 198, 255, 0.28); transform: translateY(-1px); }

.docs-link-tile .icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-bottom: 2px;
}

.docs-link-label {
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-link-url {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--docs-txt-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toast */

.docs-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(6, 20, 30, 0.95);
  border: 1px solid rgba(110, 198, 255, 0.4);
  color: var(--docs-txt);
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transition: opacity 300ms ease;
}

.docs-toast.is-out { opacity: 0; }

/* New doc modal */

.docs-modal .docs-card {
  width: min(760px, 100%);
}

.docs-edit-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 2px;
}

.docs-edit-title {
  width: 100%;
}

.docs-edit-text {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.docs-edit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.docs-edit-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--docs-txt);
  letter-spacing: 0.03em;
}

.docs-edit-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 640px) {
  .docs-bar { flex-direction: column; align-items: flex-start; }
  .docs-grid { grid-template-columns: 1fr; }
}

/* ---------- Partners tab ----------
   Brown theme matching the Partners tab. Cards show a square clickable
   icon, the partner name, then "Official link" with "Discord" underneath.
   Add/edit/delete is admin-only; everyone else just opens the links. */

.partners-view {
  --ptxt: #e8c9a3;
  --ptxt-soft: #c9a878;
  --pline: rgba(216, 163, 104, 0.35);
}

.partners-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  background: rgba(40, 26, 12, 0.88);
  border: 1px solid var(--pline);
}

.partners-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.partners-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brown);
  color: #2b1a05;
}

.partners-btn-add:hover { background: #e4b57c; }

.partners-btn-add .icon { width: 16px; height: 16px; }

.partners-count {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(38, 24, 11, 0.92);
  border: 1px solid var(--pline);
  border-radius: 14px;
  padding: 14px;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.partner-card:hover {
  border-color: rgba(216, 163, 104, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.partner-icon-wrap {
  width: 84px;
  height: 84px;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid rgba(216, 163, 104, 0.5);
  background: rgba(255, 255, 255, 0.05);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.partner-icon-wrap:hover {
  transform: scale(1.05);
  border-color: var(--brown);
  box-shadow: 0 8px 20px rgba(216, 163, 104, 0.25);
}

.partner-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.partner-icon-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 900;
  color: var(--ptxt);
  background: var(--brown-soft);
}

.partner-name {
  font-family: var(--display-geo);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: var(--ptxt);
  line-height: 1.25;
  min-height: 2.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.partner-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.partner-btn {
  position: relative;
}
.partner-btn.partner-coming::after {
  content: "coming soon";
  position: absolute;
  right: 6px;
  top: -9px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

.partner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 130ms ease, transform 130ms ease, border-color 130ms ease, color 130ms ease;
}

.partner-btn .icon { width: 16px; height: 16px; flex: none; }

/* Discord brand mark is a filled glyph, not a stroked icon. */
.partner-btn .disc-icon { fill: currentColor; stroke: none; }

.partner-btn-off {
  background: var(--brown);
  color: #2b1a05;
  border: 1px solid transparent;
}

.partner-btn-off:hover { background: #e4b57c; transform: translateY(-1px); }

.partner-btn-disc {
  background: rgba(88, 101, 242, 0.18);
  color: #aab1ff;
  border: 1px solid rgba(88, 101, 242, 0.45);
}

.partner-btn-disc:hover {
  background: rgba(88, 101, 242, 0.32);
  color: #c4c9ff;
  transform: translateY(-1px);
}

.partner-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }

.partner-btn.partner-coming {
  background: rgba(120, 120, 120, 0.14);
  color: #9aa0a8;
  border: 1px dashed rgba(160, 160, 160, 0.35);
  cursor: not-allowed;
  box-shadow: none;
}

.partner-btn.partner-coming:hover {
  background: rgba(120, 120, 120, 0.14);
  color: #9aa0a8;
  transform: none;
}

/* ---------- Admin library lists (Docs / Partners) ---------- */

.admin-lib {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-height: 300px;
  overflow-y: auto;
}

.admin-lib-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-2);
}

.admin-lib-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.admin-lib-icon .icon { width: 17px; height: 17px; }

.admin-lib-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-lib-tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-2);
}

.admin-lib-edit {
  flex: none;
  font-size: 12px;
  padding: 5px 10px;
}

/* Admin row (edit / delete) - only rendered for admins */

.partner-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  margin-top: 2px;
}

.partner-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.partner-admin-actions { display: flex; gap: 6px; }

.partner-act {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 8px;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.partner-act:hover {
  background: rgba(216, 163, 104, 0.16);
  color: var(--ptxt);
  border-color: rgba(216, 163, 104, 0.4);
}

.partner-act-danger:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(234, 67, 53, 0.4);
}

/* Toast */

.partners-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(40, 24, 10, 0.96);
  border: 1px solid rgba(216, 163, 104, 0.4);
  color: var(--ptxt);
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transition: opacity 300ms ease;
}

.partners-toast.is-out { opacity: 0; }

/* Add / edit partner modal */

.partners-modal .partners-card { width: min(540px, 100%); }

.partners-edit-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 2px;
}

.partners-edit-name { width: 100%; }

.partners-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.partners-edit-icon-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.partners-edit-icon-label .icon { width: 15px; height: 15px; }

.partners-edit-icon-url { flex: 1; min-width: 160px; }

.partners-icon-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
}

.partners-edit-icon-preview {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--pline);
  background: rgba(255, 255, 255, 0.05);
}

.partners-edit-foot {
  display: flex;
  justify-content: flex-end;
}

.partners-edit-actions { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .partners-bar { flex-direction: column; align-items: flex-start; }
  .partners-grid { grid-template-columns: 1fr 1fr; }
  .partner-icon-wrap { width: 72px; height: 72px; }
}

@media (max-width: 420px) {
  .partners-grid { grid-template-columns: 1fr; }
}

/* ---------- Editor fixes: bigger preview + draggable splitter ----------
   The preview now defaults wider than the code (5/7 split) and the divider
   between the two panes is draggable. The highlight overlay and line-number
   gutter are glued to the code as it scrolls. */

.editor-modal .editor {
  grid-template-columns: minmax(0, 5fr) 6px minmax(0, 7fr);
}

.ed-split {
  width: 6px;
  cursor: col-resize;
  background: var(--line);
  position: relative;
  z-index: 3;
  transition: background 120ms ease;
}

.ed-split:hover,
.ed-split:active { background: var(--accent); }

body.ed-resizing { cursor: col-resize; user-select: none; }
body.ed-resizing .ed-split { background: var(--accent); }
body.ed-resizing iframe { pointer-events: none; }

/* Highlight overlay: content-sized + translated on scroll (it lives outside
   the scrolling wrap, so we move it manually to stay glued to the code). */
.editor-hl {
  box-sizing: border-box;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  will-change: transform;
}

/* Textarea grows to its content; the wrap scrolls (so the gutter + highlight
   can follow it). */
.editor-modal .editor-code {
  box-sizing: border-box;
  height: auto;
  min-height: 100%;
}

/* Keep the live document a real full-height canvas. Without an explicit
   stretch, an iframe with a tiny srcdoc can collapse to its content height,
   leaving the dark editor background showing beneath the preview. */
.editor-modal .editor {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}
.editor-modal .editor-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  background: #fff;
  color-scheme: light;
}
.editor-modal .editor-pane {
  height: 100%;
  overflow: hidden;
  background: #0d1014;
}
.editor-modal .editor-wrap {
  background: #0d1014;
}
.editor-modal .editor-gutter {
  background: #11151a;
  color: #67717d;
}

@media (max-width: 760px) {
  .ed-split { display: none; }
}

/* ---------- Channels & recommendations ---------- */

.channel-back {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
}
.channel-back[hidden] { display: none; }

.channel-card { cursor: pointer; }
.channel-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
}
.channel-thumb .fallback {
  position: static;
  inset: auto;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-geo);
  font-size: 42px;
  color: #fff;
  background: var(--red);
}
.channel-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.channel-thumb img + .fallback { display: none; }

.song-card .card-author-wrap {
  display: block;
  min-width: 0;
}
.song-card .card-author {
  display: inline-block;
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--red);
  font-size: 12px;
  text-align: left;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 120ms ease;
}
.song-card .card-author:hover { color: var(--red-ink); text-decoration: underline; }

/* ---------- Docs - HTML single-file pages ---------- */

.docs-meta-html {
  background: rgba(110, 198, 255, 0.14);
  border: 1px solid rgba(110, 198, 255, 0.55);
  color: var(--docs-txt);
  font-weight: 700;
}

.docs-act-primary {
  background: rgba(110, 198, 255, 0.18);
  color: var(--docs-txt);
  font-weight: 700;
}

.docs-html-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(110, 198, 255, 0.4);
  border-radius: 10px;
  background: rgba(110, 198, 255, 0.06);
}
.docs-html-hint {
  margin: 0;
  flex: 1 1 100%;
  font-size: 13px;
  line-height: 1.45;
  color: var(--docs-txt-soft);
}
.docs-html-source {
  margin: 0;
  padding: 12px;
  max-height: 340px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--docs-txt-soft);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(110, 198, 255, 0.2);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==================== Pixel Sprite Editor (Aseprite-style) ====================
   Docked dark editor chrome mirroring the real Aseprite: a left icon toolbar,
   a color well, options, a right layer/asset column and a bottom timeline. */
.pixel-modal .pixel-card { width: min(1400px, 98vw); height: min(90vh, 920px); max-width: none; display: flex; flex-direction: column; overflow: hidden; background: #2c2e35; color: #d5d8dd; }
.pixel-modal .admin-head { background: #26282e; border-bottom: 1px solid #141519; padding: 8px 12px; }
.pixel-modal .admin-title { font-size: 16px; color: #d5d8dd; }
.pixel-modal .launch-x { color: #a4a7ab; background: transparent; border: none; }
.pixel-modal .pixel-app { font-size: 11px; }
/* ═════════ Pixel Sprite Editor - Aseprite dark theme ═════════
   Colors match Aseprite's default dark skin: face #2c2e35, face-top
   #3a3d44, border #1a1c20, darker border #141519, muted text #a4a7ab,
   selection/hover blue #4d76ff (rgba(77,118,255,.45) glow). */
.pixel-app {
  --px-face: #2c2e35;
  --px-face-top: #3a3d44;
  --px-face-dark: #26282e;
  --px-border: #1a1c20;
  --px-border-dark: #141519;
  --px-muted: #a4a7ab;
  --px-text: #d5d8dd;
  --px-accent: #4d76ff;
  flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 0; padding: 0;
  background: var(--px-face);
  color: var(--px-text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 11px;
}
.pixel-main { flex: 1; display: flex; gap: 0; min-height: 0; }
.pixel-leftcol { width: 230px; flex: none; display: flex; flex-direction: column; gap: 0; overflow-y: auto; border-right: 1px solid var(--px-border-dark); background: var(--px-face); }
.pixel-centercol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; background: var(--px-face-dark); }
.pixel-right { width: 230px; flex: none; display: flex; flex-direction: column; gap: 0; overflow-y: auto; border-left: 1px solid var(--px-border-dark); background: var(--px-face); }
.pixel-bottom { display: flex; flex-direction: column; gap: 6px; background: var(--px-face); border-top: 1px solid var(--px-border-dark); padding: 6px 8px; }

/* Menu bar: Aseprite-style text menus (click to open, hover sweeps) */
.pixel-menubar { display: flex; align-items: stretch; background: var(--px-face); border-bottom: 1px solid var(--px-border-dark); padding: 0; user-select: none; }
.pixel-menu { position: relative; }
.pixel-menu-btn { background: transparent; border: none; color: var(--px-muted); font: inherit; font-weight: 600; padding: 5px 10px; cursor: pointer; }
.pixel-menu-btn:hover, .pixel-menu.is-open .pixel-menu-btn { background: var(--px-accent); color: #fff; }
.pixel-menu-drop { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--px-face); border: 1px solid var(--px-border-dark); box-shadow: 0 6px 16px rgba(0,0,0,.5); z-index: 80; padding: 2px; }
.pixel-menu.is-open .pixel-menu-drop { display: block; }
.pixel-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; background: transparent; border: none; color: var(--px-text); font: inherit; padding: 4px 10px; cursor: pointer; text-align: left; }
.pixel-menu-item:hover { background: var(--px-accent); color: #fff; }
.pixel-menu-item:hover .pixel-menu-key { color: rgba(255,255,255,.8); }
.pixel-menu-key { color: var(--px-muted); font-size: 10px; }
.pixel-menu-sep { height: 1px; background: var(--px-border); margin: 3px 6px; }

/* Toolbar: narrow vertical strip, icon-only buttons in 2 columns */
.pixel-toolstrip { width: 68px; flex: none; background: var(--px-face); border-right: 1px solid var(--px-border-dark); overflow-y: auto; padding: 4px 3px 8px; }
.pixel-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.pixel-tool { position: relative; width: 100%; height: 27px; font-size: 15px; border: 1px solid transparent; border-radius: 0; background: transparent; color: #b9c0c8; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pixel-tool .pixel-tool-ico { width: 18px; height: 18px; display: block; }
.pixel-tool:hover { background: var(--px-face-top); color: #eef1f6; border-color: var(--px-border); }
.pixel-tool.is-active { background: var(--px-face-dark); color: #fff; border-color: var(--px-border-dark); box-shadow: inset 0 0 0 1px var(--px-accent), inset 0 0 4px rgba(77,118,255,.45); }
.pixel-tool.is-active::after { content: ""; position: absolute; left: -3px; top: 4px; bottom: 4px; width: 2px; background: var(--px-accent); }

/* Per-tool cursors on the canvas viewport */
.pixel-view[data-tool="pick"] { cursor: copy; }
.pixel-view[data-tool="hand"], .pixel-view[data-tool="move"] { cursor: move; }
.pixel-view[data-tool="zoom"] { cursor: zoom-in; }
.pixel-view[data-tool="bucket"] { cursor: cell; }
.pixel-view[data-tool="marquee"], .pixel-view[data-tool="lasso"], .pixel-view[data-tool="wand"] { cursor: crosshair; }

.pixel-toprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--px-border-dark); background: var(--px-face); }
.pixel-toprow span:last-child { color: var(--px-muted); font-size: 10px; }
.pixel-btn { background: var(--px-face-top); border: 1px solid var(--px-border); color: var(--px-text); padding: 4px 9px; border-radius: 0; font-weight: 600; font-size: 11px; cursor: pointer; }
.pixel-btn:hover { background: #454950; border-color: var(--px-border-dark); }
.pixel-btn:active { background: var(--px-face-dark); }
.pixel-btn.accent { background: var(--px-accent); color: #fff; border-color: var(--px-border-dark); }
.pixel-btn.accent:hover { background: #3d68e8; }
.pixel-btn.danger { color: #ff8a80; }
.pixel-dim { font-size: 10.5px; font-weight: 600; color: var(--px-muted); padding: 3px 7px; background: var(--px-face-dark); border: 1px solid var(--px-border); border-radius: 0; font-family: ui-monospace, monospace; }

/* Panels: flat, no rounded pastel cards */
.pixel-panel { background: transparent; border: none; border-radius: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.pixel-panel + .pixel-panel { border-top: 1px solid var(--px-border); }
.pixel-panel-title { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-muted); }
.pixel-panel-title-row { display: flex; align-items: center; gap: 4px; }

.pixel-row { display: flex; align-items: center; gap: 6px; }
.pixel-mini-lbl { font-size: 10.5px; font-weight: 600; color: var(--px-muted); white-space: nowrap; }
.pixel-mini { background: var(--px-face-top); border: 1px solid var(--px-border); color: var(--px-text); border-radius: 0; font-size: 10.5px; cursor: pointer; padding: 2px 6px; line-height: 1.2; }
.pixel-mini:hover { border-color: var(--px-border-dark); background: #454950; }
.pixel-mini.danger { color: #ff8a80; }

/* Color well: Aseprite-style stacked fg/bg swatches */
.pixel-swatch { width: 28px; height: 28px; border-radius: 0; border: 1px solid #000; background: #fff; flex: none; box-shadow: inset 0 0 0 1px #000; }
.pixel-swatch.alt { margin-left: -10px; margin-top: 10px; }
.pixel-hex { flex: 1; min-width: 0; background: var(--px-face-dark); border: 1px solid var(--px-border); color: var(--px-text); border-radius: 0; padding: 5px 7px; font-family: ui-monospace, monospace; font-size: 11px; }
.pixel-colpick { width: 28px; height: 28px; border: 1px solid var(--px-border); border-radius: 0; cursor: pointer; background: transparent; padding: 0; }
.pixel-colpick::-webkit-color-swatch { border: none; border-radius: 0; }
.pixel-rgb { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.pixel-rgb-item { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--px-muted); }
.pixel-rgb-item input { flex: 1; accent-color: var(--px-accent); }
.pixel-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.pixel-palette-swatch { height: 18px; border: 1px solid #000; border-radius: 0; cursor: pointer; padding: 0; }
.pixel-palette-swatch:hover { filter: brightness(1.25); }
.pixel-ramp { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; }
.pixel-ramp-cell { height: 14px; border: 1px solid rgba(0,0,0,.55); cursor: pointer; padding: 0; }
.pixel-ramp-cell:hover { outline: 1px solid var(--px-accent); }

.pixel-check { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--px-text); }
.pixel-check input { accent-color: var(--px-accent); }

/* Layers */
.pixel-layers-panel { min-height: 120px; flex: none; }
.pixel-layer { display: flex; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 0; cursor: pointer; border: 1px solid transparent; color: var(--px-text); }
.pixel-layer.is-active { background: var(--px-face-dark); border-color: var(--px-accent); }
.pixel-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; }
.pixel-layer-flag { font-size: 10.5px; color: #ffd479; }
.pixel-layers { display: flex; flex-direction: column; gap: 1px; max-height: 180px; overflow-y: auto; }
.pixel-thumb { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--px-border-dark); flex: none; }
.pixel-blend { max-width: 116px; font-size: 10.5px; background: var(--px-face-dark); color: var(--px-text); border: 1px solid var(--px-border); border-radius: 0; padding: 3px 4px; }

/* Context menu (layers panel + timeline right-click, Aseprite style) */
.pixel-ctxmenu { position: fixed; z-index: 90; min-width: 170px; background: var(--px-face); border: 1px solid var(--px-border-dark); box-shadow: 0 6px 16px rgba(0,0,0,.5); padding: 2px; }
.pixel-ctxitem { display: block; width: 100%; background: transparent; border: none; color: var(--px-text); font: inherit; text-align: left; padding: 4px 10px; cursor: pointer; }
.pixel-ctxitem:hover { background: var(--px-accent); color: #fff; }
.pixel-ctxitem.is-dis { color: #6d7076; cursor: default; }
.pixel-ctxitem.is-dis:hover { background: transparent; color: #6d7076; }
.pixel-ctxsep { height: 1px; background: var(--px-border); margin: 3px 6px; }

/* Canvas viewport: Aseprite's dark checkered work area */
.pixel-view { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background-color: #1e2025; background-image: linear-gradient(45deg, #26282e 25%, transparent 25%), linear-gradient(-45deg, #26282e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #26282e 75%), linear-gradient(-45deg, transparent 75%, #26282e 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; border: 1px solid var(--px-border-dark); border-radius: 0; overflow: auto; cursor: crosshair; min-height: 220px; }
.pixel-canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; image-rendering: crisp-edges; box-shadow: 0 0 0 1px #0e1013, 0 8px 24px rgba(0,0,0,.3); }
.pixel-grid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none; }

.pixel-canvasbox { position: relative; }

/* Rulers: Aseprite's edge rulers hug the canvas box */
.pixel-ruler { position: sticky; background: var(--px-face); color: var(--px-muted); font-size: 9px; font-family: ui-monospace, monospace; z-index: 5; }
.pixel-ruler-top { top: 0; height: 18px; width: 100%; display: block; }
.pixel-ruler-left { left: 0; width: 22px; height: 100%; position: absolute; top: 0; }

.pixel-status { display: flex; gap: 14px; font-size: 10.5px; color: var(--px-muted); font-weight: 600; padding: 4px 8px; border-top: 1px solid var(--px-border-dark); align-items: center; }
.pixel-status span { font-family: ui-monospace, monospace; }
.pixel-zoomwrap { background: var(--px-face-top); border: 1px solid var(--px-border); padding: 1px 6px; cursor: pointer; color: var(--px-text); }
.pixel-zoomwrap:hover { border-color: var(--px-accent); }
.pixel-zoom-pct { color: var(--px-text); }

.pixel-preview { width: 200px; height: 200px; image-rendering: pixelated; border: 1px solid var(--px-border-dark); border-radius: 0; background: var(--px-face-dark); }
.pixel-preview-hint { margin: 0; font-size: 10.5px; color: var(--px-muted); }

/* Timeline: Aseprite's layer-rows x frame-columns grid */
.pixel-timeline-panel { background: var(--px-face); padding: 4px 6px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--px-border); border-radius: 0; }
.pixel-timeline { overflow-x: auto; min-height: 60px; }
.pixel-tl-grid { display: flex; gap: 4px; align-items: stretch; }
.pixel-tl-rail { display: flex; flex-direction: column; gap: 2px; width: 88px; flex: none; }
.pixel-tl-railbtn { background: var(--px-face-top); border: 1px solid var(--px-border); color: var(--px-text); font-size: 11px; line-height: 1; padding: 4px 0; cursor: pointer; }
.pixel-tl-railbtn:hover { background: #454950; }
.pixel-tl-railbtn.is-on { background: var(--px-face-dark); border-color: var(--px-accent); box-shadow: inset 0 0 3px rgba(77,118,255,.45); color: #fff; }
.pixel-tl-area { flex: 1; min-width: 0; position: relative; }
.pixel-tl-tagrow { position: relative; height: 13px; margin-bottom: 2px; }
.pixel-tl-tag { position: absolute; top: 1px; height: 11px; font-size: 9px; line-height: 11px; color: #14161a; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: context-menu; border: 1px solid rgba(0,0,0,.5); padding-left: 3px; box-sizing: border-box; }
.pixel-tl-hdr { display: flex; }
.pixel-tl-corner { width: 68px; flex: none; border: 1px solid transparent; }
.pixel-tl-fnum { width: 66px; flex: none; text-align: center; font-size: 9.5px; font-family: ui-monospace, monospace; color: var(--px-muted); border: 1px solid var(--px-border); border-bottom: none; border-right: none; background: var(--px-face-top); padding: 1px 0; cursor: pointer; }
.pixel-tl-fnum:last-child { border-right: 1px solid var(--px-border); }
.pixel-tl-fnum:hover { background: #454950; }
.pixel-tl-fnum.is-active { background: var(--px-face-dark); color: #fff; border-color: var(--px-accent); }
.pixel-tl-row { display: flex; }
.pixel-tl-lname { width: 68px; flex: none; font-size: 10px; padding: 3px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--px-border); border-right: none; background: var(--px-face-top); color: var(--px-text); cursor: pointer; }
.pixel-tl-lname.is-active { background: var(--px-face-dark); border-color: var(--px-accent); }
.pixel-tl-cell { width: 64px; height: 40px; flex: none; border: 1px solid var(--px-border); border-right: none; background: var(--px-face-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
.pixel-tl-cell:last-child { border-right: 1px solid var(--px-border); }
.pixel-tl-lname { border-right: 1px solid var(--px-border); }
.pixel-tl-cell:hover { border-color: var(--px-muted); }
.pixel-tl-cell.is-active { border-color: var(--px-accent); box-shadow: inset 0 0 3px rgba(77,118,255,.45); }
.pixel-tl-cell.is-curframe { background: #232733; }
.pixel-tl-cell.is-onion-prev { box-shadow: inset 0 0 0 1px rgba(255,140,66,.55); }
.pixel-tl-cell.is-onion-next { box-shadow: inset 0 0 0 1px rgba(96,205,255,.55); }
.pixel-tl-thumb { max-width: 56px; max-height: 34px; image-rendering: pixelated; pointer-events: none; }

/* Shortcuts dialog */
.pixel-shortcuts-card { min-width: 320px; max-height: 80vh; overflow-y: auto; }
.pixel-sc-row { display: flex; gap: 12px; align-items: baseline; }
.pixel-sc-key { min-width: 110px; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--px-accent); font-weight: 700; }
.pixel-sc-lbl { color: var(--px-text); font-size: 11px; }

.pixel-export-row { display: flex; gap: 6px; flex-wrap: wrap; }

.pixel-newdims { position: fixed; inset: 0; background: rgba(10,12,16,0.6); display: flex; align-items: center; justify-content: center; z-index: 95; }
.pixel-newdims[hidden] { display: none; }
.pixel-newdims-card { background: var(--px-face); border: 1px solid var(--px-border-dark); box-shadow: 0 8px 24px rgba(0,0,0,.5); border-radius: 0; padding: 14px; display: flex; flex-direction: column; gap: 9px; min-width: 260px; color: var(--px-text); }
.pixel-newdims-card h3 { color: var(--px-text); }
.pixel-newdims-card input[type=number] { width: 90px; background: var(--px-face-dark); border: 1px solid var(--px-border); color: var(--px-text); border-radius: 0; padding: 5px 7px; font: inherit; }

/* ════════════════════ Domain Hub ════════════════════ */
.domainhub-modal .domainhub-card {
  width: min(1100px, 97vw);
  height: min(88vh, 860px);
  max-width: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.domainhub-modal .admin-head {
  flex: none;
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}
.domainhub-modal .admin-title {
  font-size: 19px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 9px;
}
.domainhub-modal .admin-title .ed-title-icon {
  color: var(--cyan);
  width: 20px;
  height: 20px;
}
.domainhub-modal .launch-x { color: var(--text-2); background: transparent; border: none; }
.domainhub-modal .launch-x:hover { color: var(--text); }
.domainhub-app {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: block;
}

/* tabs - flat, sit on a bottom border like the admin modal */
.dh-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.dh-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-2);
  border-radius: 8px 8px 0 0;
  padding: 9px 15px;
  font: 600 14px/1 var(--font);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.dh-tab:hover:not(.is-active) { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.dh-tab.is-active {
  color: var(--cyan);
  background: var(--panel-2);
  border-color: var(--line);
}

/* hero */
.dh-hero { margin-bottom: 18px; }
.dh-hero-title { display: flex; align-items: center; gap: 10px; }
.dh-hero-title .dh-ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--cyan-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--cyan);
  flex: none;
}
.dh-title {
  font-family: var(--display-geo);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.dh-hero-sub {
  margin: 4px 0 10px;
  color: var(--text-2);
  font-size: 13.5px;
}
.dh-sysline {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--yellow);
  background: var(--yellow-soft);
  border: 1px solid rgba(251, 188, 5, 0.22);
  padding: 4px 11px; border-radius: 999px;
}
.dh-sysline.ok { color: var(--accent); background: var(--accent-soft); border-color: rgba(52, 168, 83, 0.26); }

/* summary cards */
.dh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.dh-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: transform 120ms ease, border-color 140ms ease;
}
.dh-card:hover { transform: translateY(-2px); border-color: var(--line); }
.dh-card-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--cyan-soft); color: var(--cyan);
  margin-bottom: 6px;
}
.dh-card-ico .dh-ico { width: 16px; height: 16px; }
.dh-card-v { font-family: var(--display-geo); font-size: 25px; font-weight: 700; color: var(--text); line-height: 1.1; }
.dh-card-l { font-size: 12.5px; color: var(--text-2); font-weight: 600; }

/* blocks + quick actions */
.dh-block { margin-bottom: 16px; }
.dh-block-title {
  font-family: var(--display-geo);
  font-size: 16px; font-weight: 700; color: var(--text);
  margin: 0 0 10px;
}
.dh-quick { display: flex; gap: 10px; flex-wrap: wrap; }
.dh-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-2);
  border-radius: 9px;
  padding: 9px 15px;
  font: 600 13.5px/1 var(--font);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 100ms ease;
}
.dh-btn .dh-ico { width: 15px; height: 15px; }
.dh-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line); filter: brightness(1.12); }
.dh-btn:active:not(:disabled) { transform: scale(0.97); }
.dh-btn:disabled { opacity: .55; cursor: default; }
.dh-btn-big { padding: 13px 20px; font-size: 15px; }
.dh-btn-accent {
  background: var(--cyan);
  border-color: transparent;
  color: #06272b;
  font-weight: 700;
}
.dh-btn-accent:hover:not(:disabled) { color: #06272b; background: #38d3e6; border-color: transparent; filter: none; }
.dh-btn.danger { color: var(--red); }
.dh-btn.danger:hover:not(:disabled) { color: #ff8790; background: var(--red-soft); border-color: rgba(234, 67, 53, 0.3); }

/* note / empty */
.dh-note {
  margin: 14px 0 0;
  font-size: 12.5px; color: var(--text-2);
  background: var(--yellow-soft);
  border: 1px solid rgba(251, 188, 5, 0.16);
  border-radius: 10px;
  padding: 10px 13px;
  line-height: 1.5;
}
.dh-note code { background: #00000033; border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.dh-empty-card {
  text-align: center;
  padding: 40px 20px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.dh-empty-ico {
  color: var(--text-3);
  margin-bottom: 8px;
}
.dh-empty-ico .dh-ico { width: 34px; height: 34px; }
.dh-empty-card h3 { font-family: var(--display-geo); font-size: 19px; color: var(--text); margin: 0 0 6px; }
.dh-empty-card p { margin: 0 0 16px; color: var(--text-2); font-size: 13px; max-width: 420px; margin-inline: auto; line-height: 1.5; }

/* headline rows */
.dh-headline {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.dh-h2 { font-family: var(--display-geo); font-size: 20px; font-weight: 700; margin: 0; color: var(--text); }
.dh-h3 { font-family: var(--display-geo); font-size: 16px; font-weight: 700; margin: 0 0 2px; color: var(--text); }
.dh-sub { margin: 3px 0 0; color: var(--text-2); font-size: 13px; }

/* filters + search */
.dh-filterwrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dh-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dh-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 12.5px/1 var(--font);
  cursor: pointer;
  transition: all 120ms ease;
}
.dh-chip:hover { color: var(--text); border-color: var(--line); }
.dh-chip.is-active { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.dh-search { flex: 1; min-width: 180px; background: var(--base); }

/* domain rows */
.dh-domlist { display: flex; flex-direction: column; gap: 10px; }
.dh-domrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 130ms ease, transform 100ms ease;
}
.dh-domrow:hover { border-color: var(--cyan); transform: translateY(-1px); }
.dh-dom-left { min-width: 0; }
.dh-dom-name {
  font-family: var(--display-geo); font-size: 16px; font-weight: 700; color: var(--text);
  word-break: break-all;
}
.dh-dom-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 5px; font-size: 12px; color: var(--text-2); font-weight: 600;
}
.dh-dom-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }
.dh-dom-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.dh-dom-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.dh-linkbtn {
  appearance: none; background: transparent; border: none;
  color: var(--cyan); font: 600 12.5px/1 var(--font); cursor: pointer;
  padding: 5px 8px; border-radius: 6px; transition: color 130ms ease, background 130ms ease;
}
.dh-linkbtn:hover { color: var(--cyan); background: var(--cyan-soft); }
.dh-linkbtn.danger { color: var(--text-2); }
.dh-linkbtn.danger:hover { color: var(--red); background: var(--red-soft); }

/* badges */
.dh-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  letter-spacing: 0.01em;
}

/* wizard */
.dh-wizard .dh-wizard-steps {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.dh-step {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
}
.dh-step.is-active { color: var(--text); }
.dh-step.is-done { color: var(--accent); }
.dh-step-n {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px;
}
.dh-step-n .dh-ico { width: 12px; height: 12px; }
.dh-step.is-active .dh-step-n { background: var(--cyan-soft); border-color: var(--cyan); color: var(--cyan); }
.dh-step.is-done .dh-step-n { color: var(--accent); border-color: rgba(52, 168, 83, 0.5); }
.dh-step-l { text-transform: lowercase; }
.dh-wiz-body { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.dh-wiz-input { max-width: 460px; margin-bottom: 6px; }
.dh-wiz-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.dh-rec {
  background: var(--base); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.dh-rec-name { font-weight: 700; color: var(--text); font-size: 13.5px; word-break: break-all; font-family: var(--mono); }
.dh-rec-val { color: var(--cyan); font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.dh-donelist { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dh-donelist div { font-size: 14px; color: var(--text); font-weight: 600; }

/* generator panel */
.dh-genpanel {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 13px;
}
.dh-field { display: flex; flex-direction: column; gap: 5px; }
.dh-field label { font-size: 12px; font-weight: 700; color: var(--text-2); }
.dh-fieldrow { display: flex; }
.dh-select, .dh-gen-qty { background: var(--base); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 11px; font: 500 13px/1.2 var(--font); flex: 1; min-width: 0; }
.dh-gen-prefix { flex: 1; }
.dh-gen-qty { max-width: 130px; }
.dh-genpanel .dh-search, .dh-genpanel .field { width: 100%; background: var(--base); }
.dh-gen-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dh-field-sm input, .dh-field-sm select { width: 100%; }
.dh-genbtn { justify-content: center; font-size: 16px; padding: 15px 22px; margin-top: 4px; }
.dh-gen-load {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2); font-weight: 600;
}
.dh-progress { flex: 1; min-width: 140px; height: 7px; border-radius: 99px; background: var(--base); overflow: hidden; border: 1px solid var(--line); }
.dh-progress-bar {
  height: 100%; width: 0%;
  background: var(--cyan);
  border-radius: 99px;
  transition: width 120ms ease;
}
.dh-check-count { font-family: var(--mono); font-size: 12px; }

/* results */
.dh-resblock { margin-top: 16px; }
.dh-reshead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.dh-rescounts { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 2px; }
.dh-resactions { display: flex; gap: 8px; flex-wrap: wrap; }
.dh-endlist { display: flex; flex-direction: column; gap: 9px; }
.dh-endrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 14px;
}
.dh-end-main { min-width: 0; }
.dh-end-url {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text);
  word-break: break-all;
}
.dh-end-url.big { font-size: 17px; }
.dh-end-checks {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}
.dh-end-checks .chk {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text-2);
}
.dh-end-checks .chk.ok { color: var(--accent); border-color: rgba(52, 168, 83, 0.3); background: var(--accent-soft); }
.dh-end-checks .chk.x { color: var(--red); border-color: rgba(234, 67, 53, 0.3); background: var(--red-soft); }
.dh-end-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dh-lat { font-family: var(--mono); font-size: 12px; color: var(--text-2); font-weight: 700; }
.dh-end-actions { display: flex; gap: 6px; }

/* checker */
.dh-checkpanel { margin-bottom: 4px; }
.dh-textarea {
  width: 100%; background: var(--base); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font: 500 13px/1.5 var(--mono);
  resize: vertical; min-height: 130px;
}
.dh-textarea:focus { outline: none; border-color: var(--cyan); }
.dh-checkactions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.dh-checkactions label.dh-btn { position: relative; overflow: hidden; }
.dh-checkactions label.dh-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dh-check-load { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.dh-checkdock { margin-top: 8px; }

/* history */
.dh-histlist { display: flex; flex-direction: column; gap: 9px; }
.dh-histrow {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px;
}
.dh-hist-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--cyan-soft); color: var(--cyan);
}
.dh-hist-ico .dh-ico { width: 15px; height: 15px; }
.dh-hist-main { flex: 1; min-width: 0; }
.dh-hist-title { font-size: 13.5px; color: var(--text); font-weight: 600; }
.dh-hist-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.dh-hist-right { display: flex; align-items: center; gap: 10px; }
.dh-hist-ago { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* detail */
.dh-panel { display: flex; flex-direction: column; gap: 8px; }
.dh-panel > .dh-btn { align-self: flex-start; }
.dh-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 6px 0 14px;
}
.dh-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px; margin-bottom: 16px;
}
.dh-detail-row {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.dh-detail-k { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.dh-detail-v { font-size: 13.5px; color: var(--text); font-weight: 600; word-break: break-all; }
.dh-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* availability bar */
.dh-avail-bar { height: 12px; border-radius: 99px; background: var(--base); overflow: hidden; border: 1px solid var(--line); }
.dh-avail-good { height: 100%; background: var(--accent); border-radius: 99px; }
.dh-avail-leg { display: flex; gap: 16px; font-size: 12.5px; font-weight: 700; margin-top: 8px; }
.dh-avail-g { color: var(--accent); }
.dh-avail-b { color: var(--red); }

/* toast */
.dh-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 10px);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; font: 600 13px/1 var(--font);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  z-index: 2147483000;
  opacity: 0; transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.dh-toast.show { opacity: 1; transform: translate(-50%, 0); }

.mono { font-family: var(--mono); }

@media (max-width: 640px) {
  .domainhub-modal .domainhub-card { height: 96vh; width: 100vw; max-width: 100vw; border-radius: 0; }
  .domainhub-app { padding: 12px; }
  .dh-cards { grid-template-columns: repeat(2, 1fr); }
  .dh-domrow, .dh-endrow { align-items: flex-start; flex-direction: column; }
  .dh-dom-right, .dh-end-right { align-items: flex-start; }
  .dh-detail-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════ AI tab ════════════════════ */
/* NOTE: no bare .ai-view { display:block } here - .view {display:none} hides
   inactive tabs and .is-visible shows the active one. An unconditional
   display:block made the AI pane render on every page. */
.ai-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ai-head-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ai-model { max-width: 340px; min-width: 200px; }
.ai-new { white-space: nowrap; }
.ai-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 60vh;
}
.ai-side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 70vh;
  overflow: auto;
}
.ai-side-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); padding: 2px 4px 6px;
}
.ai-side-empty { color: var(--text-3); font-size: 12.5px; padding: 12px 6px; line-height: 1.5; }
.ai-convo {
  appearance: none; text-align: left;
  background: transparent; border: 1px solid transparent;
  color: var(--text-2); border-radius: 10px;
  padding: 9px 11px; cursor: pointer; font: 500 12.5px/1.4 var(--font);
  transition: background .13s, border-color .13s;
}
.ai-convo:hover { background: var(--panel-2); }
.ai-convo.is-active { background: var(--va-soft, rgba(176,107,255,.14)); border-color: #b06bff; color: var(--text); }
.ai-convo-t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-convo-m { display: block; color: var(--text-3); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 60vh;
  max-height: 75vh;
  overflow: hidden;
}
.ai-offline {
  margin: 12px 14px 0;
  background: rgba(251,188,5,.07); border: 1px solid rgba(251,188,5,.18);
  border-radius: 10px; padding: 10px 13px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.ai-offline code { background: #00000033; border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }

/* OpenRouter key row */
.ai-key-btn { white-space: nowrap; }
.ai-key-btn.is-set {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.ai-keyrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ai-key-input { flex: 1; min-width: 220px; max-width: 420px; }
.ai-key-hint { color: var(--text-3); font-size: 12px; }
.ai-modelrow {
  display: flex; gap: 8px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.ai-pill {
  font-size: 11.5px; font-weight: 700;
  color: #b06bff;
  background: rgba(176,107,255,.12);
  border: 1px solid rgba(176,107,255,.26);
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ai-pill.dim { color: var(--text-3); background: rgba(154,160,166,.1); border-color: var(--line); }
.ai-msgs {
  flex: 1;
  overflow: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.ai-empty { text-align: center; color: var(--text-3); padding: 40px 16px; }
.ai-empty-ico { font-size: 30px; color: #b06bff; margin-bottom: 8px; }
.ai-empty h3 { font-family: var(--display-geo); font-size: 19px; color: var(--text); margin: 0 0 6px; }
.ai-empty p { margin: 0; font-size: 13px; color: var(--text-2); }
.ai-msg { display: flex; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.bot { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: min(720px, 88%);
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: normal;
}
.ai-msg.user .ai-msg-bubble {
  background: #7d56d8;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg.bot .ai-msg-bubble {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.ai-composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
}
.ai-composer textarea {
  flex: 1;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 12px;
  padding: 11px 13px; font: 500 13.5px/1.5 var(--font);
  resize: none; min-height: 44px; max-height: 160px;
}
.ai-composer textarea:focus { outline: none; border-color: #b06bff; }
.ai-composer .btn-accent {
  background: #7d56d8;
  border: none; color: #fff;
  padding: 11px 20px; border-radius: 12px;
  font-weight: 700; cursor: pointer; transition: transform .1s, opacity .15s;
}
.ai-composer .btn-accent:hover { opacity: .9; }
.ai-composer .btn-accent:active { transform: scale(0.97); }
.ai-composer .btn-accent:disabled { opacity: .55; cursor: default; }
.ai-toast { z-index: 2147483001; }

/* Attachments + message extras */
.ai-paperclip {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: var(--text-2);
  background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.ai-paperclip:hover { color: var(--text); border-color: #b06bff; }
.ai-attach-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px 0;
}
.ai-att {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 6px 4px 4px;
  max-width: 220px; font-size: 12px; color: var(--text-2);
}
.ai-att-prev { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; }
.ai-att-ico { width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; }
.ai-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-att-x {
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 3px;
}
.ai-att-x:hover { color: var(--red); }
.ai-msg-img {
  max-width: 240px; max-height: 180px; border-radius: 10px;
  display: block; margin-bottom: 6px; border: 1px solid var(--line);
}
.ai-msg-actions { margin-top: 8px; display: flex; gap: 6px; }
.ai-act {
  appearance: none; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text-2); font: 600 11px var(--font); border-radius: 7px;
  padding: 3px 10px; cursor: pointer;
}
.ai-act:hover { color: var(--text); border-color: #b06bff; }
.ai-empty-sub { font-size: 12px !important; margin-top: 8px !important; }
.ai-toast { z-index: 2147483001; }

@media (max-width: 760px) {
  .ai-layout { grid-template-columns: 1fr; }
  .ai-side { max-height: 180px; order: 2; }
  .ai-pane { order: 1; min-height: 52vh; }
  .ai-model { max-width: 100%; min-width: 0; width: 100%; }
}

/* ---------- Cloud gaming ---------- */

/* Cloud's own color (sky blue) - every tab keeps a unique accent. */
.view[data-view="cloud"] { --va: var(--cloud); --va-ink: #061a2b; --va-soft: var(--cloud-soft); }
.nav-item.is-active[data-view="cloud"] { color: var(--cloud); background: var(--cloud-soft); }

/* "More" folds INTO the sidebar: an inline accordion right under the More
   button (never a floating window over the content). It pushes the rest of
   the nav down; .nav scrolls when the sidebar runs out of room. Opening it
   while the sidebar is a rail first expands the sidebar so the labels are
   always readable (handled in JS). */
.nav-more {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 8px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 10px;
  transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease, border-color 180ms ease;
}
.nav-more.is-open {
  max-height: 400px;
  overflow-y: auto;
  opacity: 1;
  padding: 8px 8px 10px;
  border-color: var(--line-soft);
}
.nav-more-label {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 10px 6px;
}
.nav-more .nav-item { justify-content: flex-start; padding: 0 12px; }
.nav-more .nav-label { display: inline; }
.nav-more-btn .tab-ico { transition: transform 180ms ease; }
.nav-more-btn.is-open { color: var(--text); background: var(--panel-2); }
.nav-more-btn.is-open .tab-ico { transform: rotate(180deg); }

/* Cloud tab: server status chip in the command row */
.cloud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  padding: 4px 0;
}
.cloud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}
.cloud-status.is-online .cloud-dot { background: var(--accent); }
.cloud-status.is-offline .cloud-dot { background: var(--red); }
.cloud-status.is-busy .cloud-dot { background: var(--yellow); animation: cloud-pulse 1s ease-in-out infinite; }
@keyframes cloud-pulse { 50% { opacity: 0.35; } }

/* Cloud game cards: same tile frame, whole card is the play button */
.cloud-card { overflow: hidden; }
.cloud-play {
  display: block;
  width: 100%;
  cursor: pointer;
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
}
.cloud-play .card-thumb { cursor: pointer; }
.cloud-play .card-body { cursor: pointer; }
.cloud-card .fav-btn {
  z-index: 6;
}

.view-actions .field-search { width: 240px; }
@media (max-width: 560px) { .view-actions .field-search { width: 100%; } }

.cloud-cfg-saved { margin-left: 10px; color: var(--accent); font-size: 13px; }

/* Cloud card thumbnail fallback letter tile (flat, no decorative flair) */
.card-thumb .thumb-letter {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-family: var(--display-geo);
  font-size: 42px;
  color: rgba(255, 255, 255, 0.88);
  background: var(--panel-2);
}
.card-thumb .thumb-art { position: relative; z-index: 1; }
.card-thumb .thumb-art + .thumb-letter { position: absolute; }

/* ---------- Music tab ----------
   All music UI styles live in the music design-system block near the end of
   this file. The legacy mrow/mpl/story classes remain only until the next
   cleanup sweep - nothing renders them. */

.mstory-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 2px 12px; }
.mstory-title { font-weight: 700; font-size: 19px; letter-spacing: 0.01em; }
.mstory-sub { color: var(--text-3); font-size: 12.5px; }

.mrail { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.mpl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; min-width: 0; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease; }
.mpl-card:hover { transform: translateY(-2px); border-color: var(--magenta); background: var(--panel-2); }
.mpl-art { position: relative; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; margin-bottom: 9px; }
.mpl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mpl-art .thumb-letter { font-size: 30px; font-weight: 700; color: var(--text-3); }
.mpl-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpl-sub { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mrow { display: grid; grid-template-columns: 30px 44px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.mrow:hover { border-color: var(--magenta); background: var(--panel-2); }
.mrow.is-playing { border-color: var(--magenta); background: var(--magenta-soft); }
.mrow-num { color: var(--text-3); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.mrow-art { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; position: relative; }
.mrow-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mrow-art .thumb-letter { font-size: 17px; font-weight: 700; color: var(--text-3); }
.mrow-txt { min-width: 0; }
.mrow-name { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-album { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow-time { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.mrow-play { color: var(--text-2); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); }
.mrow:hover .mrow-play { color: var(--magenta); border-color: var(--magenta); }

.mprofile { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 6px; }
.mprofile-art { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; }
.mprofile-art img { width: 100%; height: 100%; object-fit: cover; }
.mprofile-art .thumb-letter { font-size: 64px; font-weight: 700; color: var(--text-3); }
.mprofile-title { font-weight: 700; font-size: 30px; line-height: 1.1; margin: 0 0 6px; }
.mprofile-meta { color: var(--text-3); font-size: 13px; margin-bottom: 14px; }
.mprofile-desc { color: var(--text-2); font-size: 13.5px; }
@media (max-width: 720px) { .mprofile { grid-template-columns: 120px 1fr; gap: 16px; } .mprofile-title { font-size: 22px; } }

.music-player.is-playing { background: var(--magenta-soft); border-top-color: var(--magenta); }

/* Shared toast host (docs, Live TV, YouTube): fixed column, bottom centre. */
.toast-box {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: min(92vw, 460px);
}
.toast-box .toast {
  background: rgba(18, 24, 21, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-family: var(--display-geo);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  transition: opacity 260ms ease, transform 260ms ease;
}
.toast-box .toast.is-out {
  opacity: 0;
  transform: translateY(4px);
}

/* Sticky toast: the update prompt. It waits for an answer, so it takes a
   button, and the box above it needs pointer-events back to be clickable. */
.toast-box .toast.is-sticky {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  border-radius: 14px;
  pointer-events: auto;
}

.toast-action {
  flex: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}
.toast-action:hover { filter: brightness(1.08); }
.toast-action:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Custom cursor pointer state: interactive elements reuse the same cursor
   image as the base but a brightened copy of it, so hovering lightens the
   cursor instead of swapping to a different shape. Text inputs/areas keep
   their I-beam. */
a:not([disabled]), button:not([disabled]), [role="button"]:not([disabled]),
select:not([disabled]), summary, label[for],
input[type="checkbox"]:not([disabled]), input[type="radio"]:not([disabled]),
input[type="submit"]:not([disabled]), input[type="range"]:not([disabled]) {
  cursor: var(--custom-cursor-pointer, pointer) !important;
}

/* ---------- Live TV ---------- */

.livetv-block {
  margin-bottom: 34px;
}

.livetv-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.livetv-block-title {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--va, var(--text));
}

.livetv-block-note {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livetv-sports-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.livetv-sports-cats::-webkit-scrollbar { display: none; }

.livetv-sports-cats .chip {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.livetv-sports-cats .chip:hover {
  border-color: var(--tv);
  color: var(--text);
}

.livetv-sports-cats .chip.is-active {
  border-color: rgba(74, 184, 140, 0.55);
  background: var(--tv-soft);
  color: #5ad3a5;
}

.livetv-loading {
  grid-column: 1 / -1;
  padding: 30px 0;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* Sports match cards: poster-led, or badge-vs-badge when no poster. */
.livetv-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.livetv-match {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.livetv-match:hover {
  transform: translateY(-3px);
  border-color: rgba(74, 184, 140, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 30px rgba(0, 0, 0, 0.42);
}

.livetv-match:active { transform: translateY(-1px) scale(0.99); }

.livetv-match-art {
  position: relative;
  aspect-ratio: 16 / 8;
  background: #0f1518;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.livetv-match-post {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.livetv-match-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  width: 100%;
}

.livetv-match-badge-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.livetv-match-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px;
  object-fit: contain;
}

.livetv-match-badge-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Preserve fallback glyphs when external icons fail. */
.tool-tile-img-failed { opacity: 0; }
.proxy-link-ico-failed { opacity: 0; }

.livetv-match-badge-sport {
  color: var(--tv);
  background: rgba(74, 184, 140, 0.16);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  font-family: var(--display-geo);
  font-size: 24px;
  font-weight: 800;
  color: #5ad3a5;
}

.livetv-match-team-name {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livetv-match-vs {
  font-family: var(--display);
  font-size: 15px;
  color: var(--text-3);
  flex: none;
}

.livetv-match-blink {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(8, 9, 11, 0.62);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 150ms ease;
}

.livetv-match-blink .icon {
  width: 26px;
  height: 26px;
  color: #5ad3a5;
}

.livetv-match:hover .livetv-match-blink { opacity: 1; }

.livetv-match-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px 13px;
  min-width: 0;
}

.livetv-match-title {
  font-family: var(--display-geo);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livetv-match-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.livetv-match-time {
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 600;
}

.livetv-match-cat {
  font-size: 11.5px;
  color: var(--text-3);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}

.livetv-match-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.livetv-match-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
}

.livetv-match-tag.is-live {
  background: rgba(234, 67, 53, 0.16);
  border: 1px solid rgba(234, 67, 53, 0.4);
  color: var(--red-ink);
}

.livetv-match-tag.is-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 5px;
  box-shadow: 0 0 6px var(--red);
  animation: livetv-pulse 1.6s ease infinite;
}

.livetv-match-tag.is-up {
  background: var(--blue-soft);
  border: 1px solid rgba(66, 133, 244, 0.3);
  color: #7aa7f7;
}

.livetv-match-tag.is-hd {
  background: var(--yellow-soft);
  border: 1px solid rgba(251, 188, 5, 0.3);
  color: #ffd45e;
}

.livetv-match-tag.is-lang {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  color: var(--text-2);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.livetv-embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.livetv-hero-stage {
  margin-bottom: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.livetv-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.livetv-hero-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.livetv-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tv-soft);
  border: 1px solid rgba(74, 184, 140, 0.4);
  color: var(--tv);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.livetv-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: livetv-pulse 1.6s ease infinite;
}

@keyframes livetv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.livetv-hero-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.livetv-hero-cat {
  font-size: 12px;
  color: var(--text-3);
  padding: 2px 8px;
  background: var(--panel-2);
  border-radius: 6px;
}

.livetv-hero-fs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
}

.livetv-hero-fs:hover { color: var(--text); background: var(--panel-2); }

.livetv-hero-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 520px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.livetv-hero-screen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  outline: none;
}

.livetv-hero-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0c100e;
  text-align: center;
  padding: 24px;
}

.livetv-placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.livetv-placeholder-ico {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(74, 184, 140, 0.12);
  border: 1px solid rgba(74, 184, 140, 0.3);
  color: #4ab88c;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}

.livetv-placeholder-ico .icon { width: 28px; height: 28px; }

.livetv-placeholder-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.livetv-placeholder-content p {
  font-size: 13.5px;
  color: var(--text-3);
  margin: 0;
  max-width: 360px;
}

/* Widescreen Live TV Cards Grid */

.livetv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.livetv-card {
  display: flex;
  flex-direction: column;
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.livetv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(74, 184, 140, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 184, 140, 0.2);
}

.livetv-card.is-selected {
  border-color: #4ab88c;
  box-shadow: 0 0 0 2px rgba(74, 184, 140, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}

.livetv-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #121a1c;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.livetv-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 220ms ease;
}

.livetv-card:hover .livetv-card-preview img {
  transform: scale(1.08);
}

.livetv-preview-letter {
  font-family: var(--display-geo);
  font-size: 36px;
  font-weight: 800;
  color: #4ab88c;
  opacity: 0.85;
}

.livetv-card-live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(234, 67, 53, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.livetv-card-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 160ms ease;
}

.livetv-card-play-overlay .icon {
  width: 44px;
  height: 44px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transform: scale(0.85);
  transition: transform 160ms ease;
}

.livetv-card:hover .livetv-card-play-overlay {
  opacity: 1;
}

.livetv-card:hover .livetv-card-play-overlay .icon {
  transform: scale(1);
}

.livetv-card-meta {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
}

.livetv-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livetv-card-cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Card blurb line - channels get a one-line description under the name so
   the grid reads like a real guide instead of a list of titles. */
.livetv-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Per-category preview tints, matching each tab accent so the TV grid feels
   part of the site. The letter + blurbs follow the same color story. */
.livetv-card.is-news .livetv-card-preview {
  background: #0e1a2c;
}
.livetv-card.is-news .livetv-preview-letter { color: #7aa7f7; text-shadow: 0 0 22px rgba(66, 133, 244, 0.55); }
.livetv-card.is-news:hover { border-color: rgba(66, 133, 244, 0.55); }
.livetv-card.is-news.is-selected, .livetv-card.is-news.is-selected:hover {
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.livetv-card.is-sport .livetv-card-preview {
  background: #21130d;
}

.livetv-card.is-sport .livetv-preview-letter { color: var(--red-ink); text-shadow: 0 0 22px rgba(234, 67, 53, 0.5); }
.livetv-card.is-sport:hover { border-color: rgba(234, 67, 53, 0.55); }
.livetv-card.is-sport.is-selected, .livetv-card.is-sport.is-selected:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.livetv-card.is-movie .livetv-card-preview {
  background: #1a0f26;
}
.livetv-card.is-movie .livetv-preview-letter { color: #c79bff; text-shadow: 0 0 22px rgba(176, 107, 255, 0.5); }
.livetv-card.is-movie:hover { border-color: rgba(176, 107, 255, 0.55); }
.livetv-card.is-movie.is-selected, .livetv-card.is-movie.is-selected:hover {
  border-color: #b06bff;
  box-shadow: 0 0 0 2px rgba(176, 107, 255, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.livetv-card.is-music .livetv-card-preview {
  background: #1d0d19;
}
.livetv-card.is-music .livetv-preview-letter { color: #ff7ab8; text-shadow: 0 0 22px rgba(255, 64, 129, 0.5); }
.livetv-card.is-music:hover { border-color: rgba(255, 64, 129, 0.55); }
.livetv-card.is-music.is-selected, .livetv-card.is-music.is-selected:hover {
  border-color: #ff4081;
  box-shadow: 0 0 0 2px rgba(255, 64, 129, 0.35), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.livetv-card.is-kids .livetv-card-preview {
  background: #1d180b;
}
.livetv-card.is-kids .livetv-preview-letter { color: #ffd45e; text-shadow: 0 0 22px rgba(251, 188, 5, 0.5); }
.livetv-card.is-kids:hover { border-color: rgba(251, 188, 5, 0.55); }

.livetv-card.is-demo .livetv-card-preview {
  background: #0b1d16;
}
.livetv-card.is-demo .livetv-preview-letter { color: #4ab88c; text-shadow: 0 0 22px rgba(74, 184, 140, 0.5); }
.livetv-card.is-demo:hover { border-color: rgba(74, 184, 140, 0.55); }

.livetv-card.is-other .livetv-card-preview {
  background: #141a17;
}
.livetv-card.is-other .livetv-preview-letter { color: #8fd3b4; text-shadow: 0 0 22px rgba(74, 184, 140, 0.4); }
.livetv-card.is-other:hover { border-color: rgba(74, 184, 140, 0.5); }

/* Tiny live-signal equalizer, bottom-right of each preview. */
.livetv-card-bars {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0.9;
  pointer-events: none;
}
.livetv-card-bars i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: livetv-eq 1.1s ease-in-out infinite;
}
.livetv-card-bars i:nth-child(1) { height: 6px; }
.livetv-card-bars i:nth-child(2) { height: 14px; }
.livetv-card-bars i:nth-child(3) { height: 9px; animation-delay: 0.35s; }
.livetv-card.is-news .livetv-card-bars { color: #7aa7f7; }
.livetv-card.is-sport .livetv-card-bars { color: var(--red-ink); }
.livetv-card.is-movie .livetv-card-bars { color: #c79bff; }
.livetv-card.is-music .livetv-card-bars { color: #ff7ab8; }
.livetv-card.is-kids .livetv-card-bars { color: #ffd45e; }
.livetv-card.is-demo .livetv-card-bars { color: #4ab88c; }
.livetv-card.is-other .livetv-card-bars { color: #8fd3b4; }

@keyframes livetv-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Category label inside the preview, bottom-left. */
.livetv-card-preview-sub {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 2px 7px;
  pointer-events: none;
}

/* Grouped channel sections - each category gets a heading + its own row. */
.livetv-group {
  margin-bottom: 22px;
}
.livetv-group:last-child { margin-bottom: 0; }
.livetv-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.livetv-group-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.livetv-group-note {
  font-size: 12px;
  color: var(--text-3);
}
.livetv-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Match cards: sport chip + live pill on the art, description under title. */
.livetv-match-cat-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 11, 13, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 3px 8px;
  pointer-events: none;
}
.livetv-match-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 7px var(--red);
  animation: livetv-pulse 1.5s ease infinite;
}
.livetv-match-live-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #fff;
  background: rgba(234, 67, 53, 0.92);
  border-radius: 5px;
  padding: 3px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.livetv-match-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player overlay */

.livetv-player {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: rgba(6, 8, 10, 0.97);
  padding: 18px;
}

.livetv-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1000px, 100%);
  margin: 0 auto 12px;
}

.livetv-player-title {
  font-family: var(--display-geo);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livetv-player-stage {
  position: relative;
  width: min(1000px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 130px);
  margin: auto;
  display: grid;
  place-items: center;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.livetv-player-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  outline: none;
}

.livetv-player-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}

/* Channel editor modal */

.livetv-modal .livetv-card { width: min(560px, 100%); }

.livetv-edit-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 2px;
}

.livetv-edit-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.livetv-edit-row .field { flex: 1; min-width: 160px; }

.livetv-edit-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.livetv-edit-check input { accent-color: var(--va); }

.livetv-edit-foot {
  display: flex;
  justify-content: flex-end;
}

.livetv-edit-actions { display: flex; gap: 8px; }

.admin-lib-del { color: var(--red-ink); }
.admin-lib-del:hover { border-color: var(--red); color: var(--red-ink); }

@media (max-width: 640px) {
  .livetv-grid { grid-template-columns: 1fr; }
  .livetv-player { padding: 10px; }
}

/* ---------- In-app docs viewer ---------- */

.docs-viewer {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  background: #0c1210;
}

.docs-viewer-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.docs-viewer-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 17px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docs-viewer-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #0c1210;
}

/* Proxy brand logo inside the Settings proxy list marks. */
.proxy-link-mark .proxy-link-ico {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

/* ------------------------------------------------------------------ */
/* YouTube tab                                                         */
/* ------------------------------------------------------------------ */

.yt-tab-ico {
  stroke-width: 1.8;
}

.yt-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.yt-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
}

.yt-search .icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--text-3);
  pointer-events: none;
}

.yt-search input {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.yt-search input:focus {
  border-color: #ff0033;
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.12);
}

.yt-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.yt-block {
  margin-bottom: 30px;
}

.yt-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.yt-block-title {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--va, var(--text));
}

.yt-block-note {
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.yt-video {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.yt-video:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 51, 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.yt-video-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.yt-video-chanrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 11px;
  min-width: 0;
}

.yt-video-chan {
  background: none;
  border: 0;
  padding: 3px 6px;
  margin: -3px 0 -3px -6px;
  border-radius: 6px;
  color: var(--text-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 140ms ease, background 140ms ease;
}

.yt-video-chan:hover,
.yt-video-chan:focus-visible {
  color: #ff5c7c;
  background: rgba(255, 0, 51, 0.1);
}

.yt-video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #101216;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yt-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-video-live {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ff0033;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.yt-video-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
}

.yt-video-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px 12px;
  min-width: 0;
}

.yt-video-title {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-video-chan {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.yt-channel:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 51, 0.5);
}

.yt-chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.yt-chan-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
  border: 1px solid var(--line-soft);
}

.yt-chan-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-chan-letter {
  font-family: var(--display-geo);
  font-size: 20px;
  font-weight: 800;
  color: #ff5c7c;
}

.yt-chan-body {
  min-width: 0;
}

.yt-chan-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-chan-subs {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Shorts: horizontal snap-scroll strip with 9:16 cards */

.yt-shorts-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin: 0 -2px;
}

.yt-shorts-strip .yt-video {
  flex: 0 0 148px;
  scroll-snap-align: start;
}

.yt-shorts-strip .yt-video-thumb {
  aspect-ratio: 9 / 16;
  height: 260px;
}

.yt-shorts-strip .yt-video-body {
  padding-bottom: 8px;
}

.yt-shorts-strip .yt-video-chanrow {
  padding: 0 12px 10px;
}

/* Channel page: profile header */

.yt-channel-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yt-profile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0 8px;
}

.yt-profile-ava {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}

.yt-profile-ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-profile-ava-letter {
  font-family: var(--display-geo);
  font-size: 36px;
  font-weight: 800;
  color: #ff5c7c;
}

.yt-profile-info {
  min-width: 0;
}

.yt-profile-name {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.yt-profile-subs {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--va, #ff0033);
  background: rgba(255, 0, 51, 0.08);
  padding: 3px 10px;
  border-radius: 999px;
}

.yt-profile-desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 620px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Playlists */

.yt-play-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.yt-playlist {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font: inherit;
  transition: transform 140ms ease, border-color 140ms ease;
}

.yt-playlist:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 51, 0.5);
}

.yt-play-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #101216;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.yt-play-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-play-letter {
  font-family: var(--display-geo);
  font-size: 26px;
  font-weight: 800;
  color: #ff5c7c;
}

.yt-play-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px 12px;
}

.yt-play-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yt-play-chan {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 46px 0;
  color: var(--text-3);
  font-size: 14px;
}

.yt-loading-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: #ff0033;
  animation: yt-spin 0.8s linear infinite;
}

@keyframes yt-spin {
  to { transform: rotate(360deg); }
}

/* Player overlay */

.yt-player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(5, 6, 8, 0.92);
}

.yt-player-top {
  width: min(1080px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.yt-player-title {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-player-sub {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yt-player-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.yt-player-actions .player-action {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-2);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.yt-player-actions .player-action .icon {
  width: 16px;
  height: 16px;
}

.yt-player-actions .player-action[data-action="fullscreen"] .icon-fullscreen {
  stroke-linejoin: miter;
}

.yt-player-actions .player-action:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.yt-player-top .player-actions {
  margin-left: auto;
  flex: none;
}

.yt-player-stage {
  position: relative;
  width: min(1080px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.yt-embed-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.yt-player-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}

@media (max-width: 560px) {
  .yt-player { padding: 10px; }
  .yt-player-sub { display: none; }
  .yt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ LIVE TV CARDS REDESIGN: Fixed CSS Override                              ║
   ║ Replace the broken livetv-cards.css with this version                     ║
   ║ Link this AFTER styles.css in your HTML                                   ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────────────────
   CARD FRAME & SHADOWS
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card {
  border: 2px solid var(--line);
  border-left: 7px solid #4ab88c;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease;
}

.livetv-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(74, 184, 140, 0.8);
  border-left-color: #4ab88c;
  box-shadow: 0 14px 32px rgba(74, 184, 140, 0.2), 0 0 24px rgba(74, 184, 140, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.livetv-card.is-selected {
  border-color: #4ab88c;
  border-left-color: #fff;
  box-shadow: 0 0 0 2px #4ab88c, 0 12px 32px rgba(74, 184, 140, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREVIEW AREA: FLAT COLORS ONLY
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card-preview {
  border-bottom: 2px solid rgba(74, 184, 140, 0.12);
}

.livetv-card-preview img {
  padding: 16px;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 240ms ease;
  filter: brightness(0.95);
}

.livetv-card:hover .livetv-card-preview img {
  transform: scale(1.12);
  filter: brightness(1.1);
}

.livetv-preview-letter {
  font-size: 42px;
  font-weight: 900;
  opacity: 0.95;
  text-shadow: 0 4px 16px rgba(74, 184, 140, 0.25);
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIVE BADGE
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card-live-badge {
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(234, 67, 53, 0.95);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────────
   METADATA SECTION: TYPOGRAPHY & SPACING
   CRITICAL: Keep display: flex and flex-direction: column
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card-meta {
  padding: 16px 16px;
  display: flex;              /* MUST HAVE THIS */
  flex-direction: column;     /* MUST HAVE THIS */
  gap: 6px;
  background: var(--panel);
}

.livetv-card-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}

.livetv-card-cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0.85;
}

.livetv-card-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PLAY OVERLAY
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card-play-overlay {
  background: rgba(0, 0, 0, 0.42);
  transition: opacity 180ms ease, background 180ms ease;
}

.livetv-card-play-overlay .icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.7));
  transform: scale(0.75);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.livetv-card:hover .livetv-card-play-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
}

.livetv-card:hover .livetv-card-play-overlay .icon {
  transform: scale(1.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EQUALIZER BARS
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card-bars {
  right: 12px;
  bottom: 12px;
  gap: 4px;
  height: 18px;
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.livetv-card-bars i {
  width: 3.5px;
  animation: livetv-eq 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
  box-shadow: 0 0 8px currentColor;
}

.livetv-card-bars i:nth-child(1) { height: 7px; }
.livetv-card-bars i:nth-child(2) { height: 16px; }
.livetv-card-bars i:nth-child(3) { height: 10px; animation-delay: 0.3s; }

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY-SPECIFIC COLORS
   ───────────────────────────────────────────────────────────────────────────── */

.livetv-card.is-news {
  border-left-color: #4285f4;
}
.livetv-card.is-news .livetv-card-preview {
  background: rgba(66, 133, 244, 0.12);
  border-bottom-color: rgba(66, 133, 244, 0.2);
}
.livetv-card.is-news .livetv-preview-letter {
  color: #5fa3ff;
  text-shadow: 0 4px 16px rgba(66, 133, 244, 0.4);
}
.livetv-card.is-news:hover {
  border-color: rgba(66, 133, 244, 0.7);
  box-shadow: 0 14px 32px rgba(66, 133, 244, 0.2), 0 0 24px rgba(66, 133, 244, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-news:hover .livetv-card-preview {
  background: rgba(66, 133, 244, 0.18);
}
.livetv-card.is-news.is-selected {
  border-color: #4285f4;
  border-left-color: #fff;
}
.livetv-card.is-news .livetv-card-bars { color: #5fa3ff; }

.livetv-card.is-sport {
  border-left-color: #ea4335;
}
.livetv-card.is-sport .livetv-card-preview {
  background: rgba(234, 67, 53, 0.12);
  border-bottom-color: rgba(234, 67, 53, 0.2);
}
.livetv-card.is-sport .livetv-preview-letter {
  color: #ff6b63;
  text-shadow: 0 4px 16px rgba(234, 67, 53, 0.35);
}
.livetv-card.is-sport:hover {
  border-color: rgba(234, 67, 53, 0.7);
  box-shadow: 0 14px 32px rgba(234, 67, 53, 0.2), 0 0 24px rgba(234, 67, 53, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-sport:hover .livetv-card-preview {
  background: rgba(234, 67, 53, 0.18);
}
.livetv-card.is-sport.is-selected {
  border-color: #ea4335;
  border-left-color: #fff;
}
.livetv-card.is-sport .livetv-card-bars { color: #ff6b63; }

.livetv-card.is-movie {
  border-left-color: #b06bff;
}
.livetv-card.is-movie .livetv-card-preview {
  background: rgba(176, 107, 255, 0.12);
  border-bottom-color: rgba(176, 107, 255, 0.2);
}
.livetv-card.is-movie .livetv-preview-letter {
  color: #d8a8ff;
  text-shadow: 0 4px 16px rgba(176, 107, 255, 0.35);
}
.livetv-card.is-movie:hover {
  border-color: rgba(176, 107, 255, 0.7);
  box-shadow: 0 14px 32px rgba(176, 107, 255, 0.2), 0 0 24px rgba(176, 107, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-movie:hover .livetv-card-preview {
  background: rgba(176, 107, 255, 0.18);
}
.livetv-card.is-movie.is-selected {
  border-color: #b06bff;
  border-left-color: #fff;
}
.livetv-card.is-movie .livetv-card-bars { color: #d8a8ff; }

.livetv-card.is-music {
  border-left-color: #f340a1;
}
.livetv-card.is-music .livetv-card-preview {
  background: rgba(243, 64, 161, 0.12);
  border-bottom-color: rgba(243, 64, 161, 0.2);
}
.livetv-card.is-music .livetv-preview-letter {
  color: #ff87c7;
  text-shadow: 0 4px 16px rgba(243, 64, 161, 0.35);
}
.livetv-card.is-music:hover {
  border-color: rgba(243, 64, 161, 0.7);
  box-shadow: 0 14px 32px rgba(243, 64, 161, 0.2), 0 0 24px rgba(243, 64, 161, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-music:hover .livetv-card-preview {
  background: rgba(243, 64, 161, 0.18);
}
.livetv-card.is-music.is-selected {
  border-color: #f340a1;
  border-left-color: #fff;
}
.livetv-card.is-music .livetv-card-bars { color: #ff87c7; }

.livetv-card.is-kids {
  border-left-color: #fbbf24;
}
.livetv-card.is-kids .livetv-card-preview {
  background: rgba(251, 191, 36, 0.12);
  border-bottom-color: rgba(251, 191, 36, 0.2);
}
.livetv-card.is-kids .livetv-preview-letter {
  color: #ffd966;
  text-shadow: 0 4px 16px rgba(251, 191, 36, 0.35);
}
.livetv-card.is-kids:hover {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 14px 32px rgba(251, 191, 36, 0.2), 0 0 24px rgba(251, 191, 36, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-kids:hover .livetv-card-preview {
  background: rgba(251, 191, 36, 0.18);
}
.livetv-card.is-kids.is-selected {
  border-color: #fbbf24;
  border-left-color: #fff;
}
.livetv-card.is-kids .livetv-card-bars { color: #ffd966; }

.livetv-card.is-demo {
  border-left-color: #4ab88c;
}
.livetv-card.is-demo .livetv-card-preview {
  background: rgba(74, 184, 140, 0.12);
  border-bottom-color: rgba(74, 184, 140, 0.2);
}
.livetv-card.is-demo .livetv-preview-letter {
  color: #5ad3a5;
  text-shadow: 0 4px 16px rgba(74, 184, 140, 0.35);
}
.livetv-card.is-demo:hover {
  border-color: rgba(74, 184, 140, 0.7);
  box-shadow: 0 14px 32px rgba(74, 184, 140, 0.2), 0 0 24px rgba(74, 184, 140, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-demo:hover .livetv-card-preview {
  background: rgba(74, 184, 140, 0.18);
}
.livetv-card.is-demo.is-selected {
  border-color: #4ab88c;
  border-left-color: #fff;
}
.livetv-card.is-demo .livetv-card-bars { color: #5ad3a5; }

.livetv-card.is-other {
  border-left-color: #5ad3a5;
}
.livetv-card.is-other .livetv-card-preview {
  background: rgba(90, 211, 165, 0.1);
  border-bottom-color: rgba(90, 211, 165, 0.15);
}
.livetv-card.is-other .livetv-preview-letter {
  color: #7be3b8;
  text-shadow: 0 4px 16px rgba(90, 211, 165, 0.3);
}
.livetv-card.is-other:hover {
  border-color: rgba(90, 211, 165, 0.6);
  box-shadow: 0 14px 32px rgba(90, 211, 165, 0.2), 0 0 24px rgba(90, 211, 165, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.livetv-card.is-other:hover .livetv-card-preview {
  background: rgba(90, 211, 165, 0.16);
}
.livetv-card.is-other.is-selected {
  border-color: #5ad3a5;
  border-left-color: #fff;
}
.livetv-card.is-other .livetv-card-bars { color: #7be3b8; }

/* Chalkle visual consistency overrides. Layout-neutral: only fallback art,
   icon layering, and status treatment. */
.tool-tile-art {
  position: relative; position: relative; overflow: hidden; }
.tool-tile-art .tool-tile-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--va, var(--accent));
  font-family: var(--display);
  font-size: 42px;
  font-weight: 800;
}
.tool-tile-art .tool-tile-img { position: relative; z-index: 1; }
.proxy-mark { position: relative; }
.proxy-mark-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 800;
}

/* App launcher icon system: every tile gets the same polished, readable
   frame regardless of whether its source is a remote logo or a fallback. */
.tool-tile-art {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex: 0 0 52px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 5px 14px rgba(0,0,0,.22);
}
.tool-tile-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 7px;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.04);
}
.tool-tile-art .tool-tile-letter {
  z-index: 0;
  border-radius: inherit;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--display-geo, system-ui);
  font-size: 25px;
  letter-spacing: -.04em;
}
.tool-tile.is-proxy .tool-tile-art { outline: none; }
.tool-tile-link { gap: 13px; padding: 11px 12px; }
.tool-tile-title { font-size: 15px; font-weight: 700; }
.tool-tile-meta { font-size: 12px; }
.proxy-mark .proxy-fav { position: relative; z-index: 1; }
.partner-btn.partner-coming { position: relative; }
.partner-btn.partner-coming::after {
  content: "coming soon";
  position: absolute;
  right: 6px;
  top: -9px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}
.livetv-match-badge-sport {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tv);
  background: rgba(74, 184, 140, .16);
  font-size: 22px;
  line-height: 1;
}

/* ---------- polish pass (overhaul quick wins) ---------- */

/* Long titles wrap to two lines instead of cutting off mid-word. */
.grid .card .card-main > .card-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.home-card-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Partners: headed Live / Coming soon sections inside the shared grid.
   Headers span the full row; cards flow beneath in the auto-fill columns. */
.partners-sect-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--pline);
}
.partners-sect-head:first-child { margin-top: 0; }
.partners-sect-title {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  color: var(--ptxt);
}
.partners-sect-chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ptxt-soft);
}

/* ---------- Discord join banner on Home ---------- */
.home-join {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
}
.home-join-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #5865f2;
  color: #fff;
}
.home-join-ico .icon { width: 18px; height: 18px; }
.home-join-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 240px;
}
.home-join-title { font-family: var(--display); font-size: 15px; color: var(--text); }
.home-join-sub { font-size: 12.5px; color: var(--text-2); }
.home-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 9px;
  background: #5865f2;
  color: #fff;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.home-join-btn:hover { background: #6b76f5; }
.home-join-x {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 7px;
}
.home-join-x:hover { color: var(--text); background: var(--red-soft); }
.home-join-x .icon { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .home-join { gap: 10px; }
  .home-join-sub { display: none; }
}

/* Continue playing: fade the right edge while the strip can scroll further. */
.home-recents-scroll.is-masked {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}

/* Settings: wallpaper apply feedback under the URL row. */
.wallpaper-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--red-ink);
}
.wallpaper-hint.is-ok { color: var(--accent); }

/* Sidebar footer version text doubles as the What's-new trigger. */
button.side-foot {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}
button.side-foot:hover { color: var(--text-2); }
.side-foot.is-wn-new .side-foot-txt::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-soft);
  vertical-align: 1px;
}

/* What's new lightbox. */
.whatsnew-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 8, 10, 0.88);
}
.whatsnew-card {
  width: min(480px, 100%);
  max-height: min(82vh, 640px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.whatsnew-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 10px;
}
.whatsnew-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.whatsnew-title { margin: 2px 0 0; font-family: var(--display); font-size: 22px; color: var(--text); }
.whatsnew-list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.whatsnew-list li { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.wn-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink);
  background: var(--pink-soft);
  border: 1px solid var(--pink);
  vertical-align: 1px;
}
.whatsnew-foot {
  display: block;
  margin: 10px 18px 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(88, 101, 242, 0.14);
  border: 1px dashed rgba(114, 137, 218, 0.5);
  color: #9aa4f5;
  font-size: 12.5px;
  text-align: center;
  text-decoration: none;
}
.whatsnew-foot:hover { color: #c3c9ff; }

/* Proxy pill variants: walled targets keep the default orange, plain
   network-bypass targets switch to blue. */
.tool-tile-via.is-bypass {
  color: #4285f4;
  background: rgba(66, 133, 244, 0.13);
  border-color: #4285f4;
}

/* ---------- Section identity (restrained) ----------
   Section accent hues live in --va and appear ONLY as small highlights:
   the active nav bar, active chips, tiny icon tints. Titles, meta, cards
   and backgrounds stay on the shared neutral system. */
.view[data-view] .view-title { color: var(--text); }
.view[data-view] .view-meta {
  color: var(--text-secondary);
  background: var(--surface);
  border-color: var(--border);
}
.view .chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Music: same surfaces, accent only on the playing row ---------- */
.view[data-view="music"] .mrow {
  background: var(--surface);
  border-color: var(--border);
  margin-bottom: 7px;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.view[data-view="music"] .mrow:hover {
  background: var(--surface-hover);
  transform: translateX(3px);
}
.view[data-view="music"] .mrow.is-playing {
  background: rgba(230, 0, 115, 0.16);
  box-shadow: 0 0 0 1px rgba(230, 0, 115, 0.6), 0 4px 18px rgba(230, 0, 115, 0.25);
}
/* While a track plays, its art shows a dim overlay with a live-style EQ. */
.view[data-view="music"] .mrow.is-playing .mrow-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 2, 7, 0.45) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cpath%20d='M5%2018v-9M9.5%2018V6M14%2018v-11M18.5%2018V9'/%3E%3C/svg%3E") center / 18px no-repeat;
  animation: p-eq-breathe 1.6s ease-in-out infinite;
}
@keyframes p-eq-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.45; }
}
.view[data-view="music"] .mrow.is-playing .mrow-play {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
/* The "Most popular" header doubles as the page banner. */
.view[data-view="music"] .mstory-head {
  margin: 2px 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(230, 0, 115, 0.13);
  border: 1px solid rgba(230, 0, 115, 0.38);
}
.view[data-view="music"] .mstory-title {
  color: var(--magenta);
}
.view[data-view="music"] .mrow:last-child { margin-bottom: 6px; }

/* ---------- Editor's picks: numbered, framed, clearly editorial ---------- */
#home-picks, #games-picks {
  counter-reset: pick;
  /* Same neutral surface as every other shelf - the numbering carries the
     editorial signal, not a color wash. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 4px;
  margin-bottom: 18px;
}
#home-picks .home-block-title, #games-picks .home-block-title { color: var(--text); }
#home-picks .home-block-note, #games-picks .home-block-note { color: var(--text-secondary); }
#home-picks .game-card, #games-picks .game-card { counter-increment: pick; }
#home-picks .game-card .card-thumb::before, #games-picks .game-card .card-thumb::before {
  content: counter(pick, decimal-leading-zero);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--va);
  color: var(--va-ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* --- Audit batch: a11y + polish ----------------------------------------- */

/* Keyboard focus ring using the active tab accent. */
:focus-visible {
  outline: 2px solid var(--va, var(--accent));
  outline-offset: 2px;
  border-radius: 6px;
}

/* Board member roles and bios. */
.board-role {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--va, var(--accent));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.board-bio {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}

/* Long URLs / sources never blow out a card. */
.card-source,
.tool-tile-meta,
.tool-tile-via {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Honor reduced-motion for everything animated. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Bookmarklets tab ---------- */
.bk-note { max-width: 860px; margin: 4px 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.bk-group { margin-bottom: 24px; }
.bk-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bk-group-title { margin: 0; color: var(--va); font-family: var(--display); font-size: 26px; }
.bk-group-hint { color: var(--text-3); font-size: 12.5px; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.bk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 140ms ease, transform 140ms ease; }
.bk-card:hover { border-color: color-mix(in srgb, var(--va) 55%, transparent); transform: translateY(-1px); }
.bk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-card-name { margin: 0; font-size: 17px; color: var(--text); }
.bk-copy { flex: none; }
.bk-copy.is-done { background: var(--va); border-color: var(--va); color: var(--va-ink); }
.bk-blurb { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.bk-code { border: 1px solid var(--line-soft); border-radius: 8px; background: #101216; }
.bk-code pre { margin: 0; padding: 10px; max-height: 140px; overflow: auto; color: #b7e08a; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; user-select: text; }
.bk-code pre::-webkit-scrollbar { height: 6px; width: 6px; }

/* ==========================================================================
   CHALKLE MUSIC - design system rebuild
   A product surface, not a card dashboard: near-black layered surfaces,
   restrained rose accent, typography-led hierarchy, and a persistent player.
   Sections: tokens, layout, header, quick access, hero, cards, rows,
   artist/album rails, detail, library/local, player, popovers, full-screen
   now playing, mobile bar, responsive.
   ========================================================================== */

.music-app {
  --m-bg: #0b0b0d;
  --m-surface-1: #111114;
  --m-surface-2: #151518;
  --m-surface-3: #1a1a1e;
  --m-line: rgba(255, 255, 255, 0.07);
  --m-line-soft: rgba(255, 255, 255, 0.045);
  --m-text: #f2f2f4;
  --m-text-2: #a6a6ad;
  --m-text-3: #6f6f78;
  --m-accent: #e6438f;
  --m-accent-hi: #f06aa8;
  --m-accent-soft: rgba(230, 67, 143, 0.12);
  --m-radius: 10px;
  --m-radius-lg: 14px;
  --m-ease: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The music tab owns its canvas: near-black behind everything, generous
   gutters, and no view-head divider fighting the music header. */
.view[data-view="music"]::before { background: var(--m-bg, #0b0b0d); }
.music-app { min-width: 0; }
body[data-view="music"] .view-head { display: none; }
/* Music uses the full canvas like a product page: opt out of the global
   1240px view cap (that cap was leaving ~340px of dead space per side on
   wide monitors) and breathe with the shared content padding instead. */
.view[data-view="music"] .view.is-visible,
body[data-view="music"] .view.is-visible { max-width: none; }

.music-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.music-header-copy { min-width: 0; }
.music-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--m-text);
}
.music-tagline {
  margin: 4px 0 0;
  color: var(--m-text-2);
  font-size: 13.5px;
}
.music-header .music-search { width: min(380px, 42vw); flex: none; }

.music-search {
  position: relative;
  display: flex;
  align-items: center;
}
.music-search .icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--m-text-3);
  pointer-events: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.music-search input {
  width: 100%;
  height: 40px;
  padding: 0 36px;
  background: var(--m-surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--m-text);
  font: inherit;
  font-size: 13.5px;
  caret-color: var(--m-accent);
  transition: background var(--m-ease), border-color var(--m-ease), box-shadow var(--m-ease);
}
.music-search input::placeholder { color: var(--m-text-3); }
.music-search input:hover { background: var(--m-surface-3); }
.music-search input:focus {
  outline: none;
  background: var(--m-surface-3);
  border-color: rgba(230, 67, 143, 0.45);
  box-shadow: 0 0 0 3px rgba(230, 67, 143, 0.12);
}
.music-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.music-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--m-text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.music-search-clear:hover { color: var(--m-text); background: rgba(255, 255, 255, 0.06); }

.music-nav {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--m-line-soft);
}
.music-nav-btn {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--m-text-2);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px 10px;
  transition: color var(--m-ease);
}
.music-nav-btn:hover { color: var(--m-text); }
.music-nav-btn.is-active { color: var(--m-text); border-bottom-color: var(--m-accent); }

/* ---- Sections ---- */
.music-home-shell { min-width: 0; }
.music-section { margin: 0 0 32px; min-width: 0; }
.music-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.music-section-head h2 {
  margin: 0;
  color: var(--m-text);
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.music-section-head > div > span { display: block; margin-top: 3px; color: var(--m-text-3); font-size: 12.5px; }
.music-show-all {
  border: 0;
  background: transparent;
  color: var(--m-text-3);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  transition: color var(--m-ease);
}
.music-show-all:hover { color: var(--m-text); }
.music-eyebrow {
  color: var(--m-accent);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.music-source-note { color: var(--m-text-3); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.music-home-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 4px 0 20px; }
.music-home-intro h1 {
  margin: 3px 0 5px;
  color: var(--m-text);
  font-family: var(--display-geo);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.music-home-intro p { margin: 0; color: var(--m-text-2); font-size: 13.5px; }

/* ---- Quick access ---- */
.music-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.music-quick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border-radius: 8px;
  background: var(--m-surface-2);
  color: var(--m-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  transition: background var(--m-ease);
}
.music-quick:hover { background: var(--m-surface-3); }
.music-quick-art {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
}
.music-quick-art svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-quick-art-a { background: #4c3de0; }
.music-quick-art-b { background: #c13a7c; }
.music-quick-art-c { background: #1f7a5c; }
.music-quick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Hero ---- */
.music-hero {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 0 0 32px;
  padding: 24px;
  border-radius: var(--m-radius-lg);
  background: var(--m-surface-1);
  overflow: hidden;
}
.music-hero-art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-surface-3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.music-hero-art .music-art { width: 100%; height: 100%; }
.music-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(11, 11, 13, 0.16);
}
.music-hero-copy { min-width: 0; }
.music-hero-title {
  margin: 10px 0 6px;
  color: var(--m-text);
  font-family: var(--display-geo);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.music-hero-artist { margin: 0 0 2px; color: var(--m-text); font-size: 15px; font-weight: 600; }
.music-hero-album { margin: 0; color: var(--m-text-3); font-size: 12.5px; }
.music-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }

.music-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--m-accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 0 22px;
  transition: background var(--m-ease), transform var(--m-ease);
}
.music-primary-btn:hover { background: var(--m-accent-hi); }
.music-primary-btn:active { transform: scale(0.98); }
.music-primary-btn svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.music-secondary-btn {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  background: transparent;
  color: var(--m-text-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  transition: color var(--m-ease), border-color var(--m-ease), background var(--m-ease);
}
.music-secondary-btn:hover { color: var(--m-text); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.03); }
.music-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--m-text-2);
  cursor: pointer;
  transition: background var(--m-ease), color var(--m-ease), transform var(--m-ease);
}
.music-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--m-text); }
.music-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-icon-btn svg.is-filled { fill: currentColor; stroke: currentColor; }
.music-icon-btn.is-saved { color: var(--m-accent); }

/* ---- Cards (songs) ---- */
/* Card rails: auto-fill columns tuned so 1920 shows 7, 1440 shows 7,
   1280 shows 6, and the rail scrolls horizontally beyond that. */
.music-card-row,
.music-cover-row,
.music-artist-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(152px, 11.5vw, 178px);
  gap: 16px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  scroll-snap-type: x proximity;
}
.music-card-row > *,
.music-cover-row > *,
.music-artist-row > * { scroll-snap-align: start; }
.music-card-row::-webkit-scrollbar,
.music-cover-row::-webkit-scrollbar,
.music-artist-row::-webkit-scrollbar { height: 8px; }
.music-card-row::-webkit-scrollbar-thumb,
.music-cover-row::-webkit-scrollbar-thumb,
.music-artist-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }

.music-card {
  position: relative;
  display: block;
  border: 0;
  border-radius: var(--m-radius);
  background: var(--m-surface-1);
  cursor: pointer;
  padding: 10px;
  text-align: left;
  transition: background var(--m-ease);
}
.music-card:hover,
.music-card:focus-visible { background: var(--m-surface-2); outline: none; }
.music-card:focus-visible { box-shadow: 0 0 0 2px rgba(230, 67, 143, 0.55); }
.music-card-art,
.music-cover-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--m-surface-3);
}
.music-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--m-text-2);
  background: #201a1f;
}
/* Artwork sits absolutely inside .music-art so the fallback letter and the
   image can share the box without the grid stacking them into rows. */
.music-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-ease); }
.music-card:hover .music-art img { transform: scale(1.04); }
.thumb-letter { font-family: var(--display-geo); font-size: 28px; font-weight: 700; }
.music-play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--m-ease);
  pointer-events: none;
  background: rgba(11, 11, 13, 0.35);
}
.music-play-overlay > svg { width: 44px; height: 44px; fill: currentColor; stroke: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.music-card:hover .music-play-overlay,
.music-card:focus-visible .music-play-overlay,
.music-cover-card:hover .music-play-overlay,
.music-cover-card:focus-visible .music-play-overlay,
.music-artist-card:hover .music-play-overlay { opacity: 1; }
.music-card-copy { display: block; min-width: 0; padding: 10px 2px 2px; }
.music-card-title,
.music-card-sub,
.music-cover-title,
.music-cover-sub,
.music-artist-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-card-title { color: var(--m-text); font-size: 13.5px; font-weight: 600; }
.music-card-sub { margin-top: 3px; color: var(--m-text-3); font-size: 12px; }
.music-save {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 13, 0.65);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--m-ease), color var(--m-ease), transform var(--m-ease);
}
.music-save svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-save:hover { transform: scale(1.08); color: var(--m-accent); }
.music-save.is-saved { opacity: 1; color: var(--m-accent); }
.music-save.is-saved svg { fill: currentColor; stroke: currentColor; }
.music-card:hover .music-save,
.music-card:focus-visible .music-save { opacity: 1; }
.music-card.is-playing .music-card-title { color: var(--m-accent); }

/* ---- Album + artist cards ---- */
.music-cover-card,
.music-artist-card {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 10px;
  border-radius: var(--m-radius);
  text-align: left;
  transition: background var(--m-ease);
}
.music-cover-card:hover,
.music-cover-card:focus-visible,
.music-artist-card:hover,
.music-artist-card:focus-visible { background: var(--m-surface-1); outline: none; }
.music-cover-card:focus-visible,
.music-artist-card:focus-visible { box-shadow: 0 0 0 2px rgba(230, 67, 143, 0.55); }
.music-cover-title { margin-top: 10px; color: var(--m-text); font-size: 13.5px; font-weight: 600; }
.music-cover-sub { margin-top: 3px; color: var(--m-text-3); font-size: 12px; }
.music-artist-card { text-align: center; }
.music-artist-art {
  position: relative;
  display: block;
  width: 78%;
  aspect-ratio: 1;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--m-surface-3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.music-artist-art .music-art { width: 100%; height: 100%; }
.music-artist-name { margin-top: 10px; color: var(--m-text); font-size: 13px; font-weight: 600; }
.music-artist-card .music-cover-sub { margin-top: 2px; }

/* ---- Track rows (recently played, search songs, library) ---- */
.music-track-list { display: flex; flex-direction: column; }
.music-track-row {
  display: grid;
  grid-template-columns: 24px 40px minmax(140px, 2.2fr) minmax(90px, 1fr) 84px 34px;
  gap: 14px;
  align-items: center;
  min-height: 54px;
  padding: 4px 12px;
  border-radius: 8px;
  color: var(--m-text-2);
  cursor: pointer;
  transition: background var(--m-ease);
}
.music-track-row:hover,
.music-track-row:focus-visible { background: var(--m-surface-1); outline: none; }
.music-track-row:focus-visible { box-shadow: inset 0 0 0 1px rgba(230, 67, 143, 0.4); }
.music-track-row.is-playing { background: var(--m-accent-soft); }
.music-track-row.is-playing .music-track-name,
.music-track-row.is-playing .music-track-num { color: var(--m-accent); }
.music-track-num { color: var(--m-text-3); font-family: var(--mono); font-size: 12px; text-align: center; }
.music-track-art { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--m-surface-3); }
.music-track-art .music-art { width: 100%; height: 100%; }
.music-track-main { min-width: 0; }
.music-track-name,
.music-track-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-name { color: var(--m-text); font-size: 13.5px; font-weight: 600; }
.music-track-artist { margin-top: 1px; color: var(--m-text-3); font-size: 12px; }
.music-track-album,
.music-track-views { overflow: hidden; color: var(--m-text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.music-track-views { text-align: right; font-family: var(--mono); font-size: 10.5px; }
.music-track-row .music-save { position: static; background: transparent; opacity: 0; }
.music-track-row:hover .music-save,
.music-track-row:focus-visible .music-save,
.music-track-row .music-save.is-saved { opacity: 1; }
.music-track-row .music-save.is-saved { color: var(--m-accent); }

.music-loading { min-height: 150px; display: grid; place-items: center; color: var(--m-text-2); }
.music-loading-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--m-accent); animation: m-pulse 1.2s ease-in-out infinite; }
@keyframes m-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- Search / library / detail ---- */
.music-search-head { margin: 4px 0 24px; }
.music-search-head h1,
.music-detail-copy h1 {
  margin: 3px 0 5px;
  color: var(--m-text);
  font-family: var(--display-geo);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.music-search-head p { margin: 0; color: var(--m-text-2); font-size: 13.5px; }
.music-detail-head {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin: 4px 0 28px;
}
.music-detail-art {
  position: relative;
  flex: 0 0 220px;
  aspect-ratio: 1;
  border-radius: var(--m-radius-lg);
  overflow: hidden;
  background: var(--m-surface-3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.music-detail-art .music-art { width: 100%; height: 100%; }
.music-detail-art img { width: 100%; height: 100%; object-fit: cover; }
.music-detail-copy { align-self: center; min-width: 0; }
.music-detail-copy p { margin: 0 0 4px; color: var(--m-text-2); font-size: 13.5px; }
.music-detail-list { max-width: 100%; }
.music-library-empty { padding: 36px 0; color: var(--m-text-2); }

/* ---- Local files ---- */
.music-local {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 32px;
  padding: 20px;
  border: 1px dashed var(--m-line);
  border-radius: var(--m-radius-lg);
  background: var(--m-surface-1);
  transition: border-color var(--m-ease), background var(--m-ease);
}
.music-local.is-drop { border-color: var(--m-accent); background: var(--m-accent-soft); }
.music-local-copy { flex: 1 1 320px; min-width: 0; }
.music-local-copy h2 { margin: 5px 0 7px; color: var(--m-text); font-family: var(--display-geo); font-size: 20px; letter-spacing: -0.015em; }
.music-local-copy p { margin: 0 0 5px; max-width: 62ch; color: var(--m-text-2); font-size: 13px; line-height: 1.55; }
.music-local-note { color: var(--m-text-3) !important; font-size: 12px !important; }
.music-local-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.music-local .music-cover-row { flex: 1 1 320px; min-width: 0; padding-bottom: 2px; }
.music-section-local .music-local { border-style: solid; }

/* ---- Bottom player (desktop) ---- */
.music-player {
  position: fixed;
  left: var(--side-w);
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(17, 17, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--m-line-soft);
}
body.sidebar-collapsed .music-player { left: var(--side-w-collapsed); }
.music-player[hidden] { display: none; }
.music-player.is-playing .music-player-title { color: var(--m-accent-hi); }
.music-player-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 220px;
  flex: none;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
  border-radius: 8px;
}
.music-player-art {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: var(--m-surface-3);
  display: grid;
  place-items: center;
}
.music-player-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-player-art .thumb-letter { font-size: 20px; color: var(--m-text-3); }
.music-player-now { min-width: 0; }
.music-player-title,
.music-player-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-player-title { color: var(--m-text); font-size: 13.5px; font-weight: 600; }
.music-player-artist { margin-top: 2px; color: var(--m-text-3); font-size: 12px; }
.music-player-main:hover .music-player-title { color: var(--m-accent-hi); }

.music-player-transport { display: flex; align-items: center; gap: 6px; flex: none; }
.music-player-seek { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 120px; }
.music-player-side { display: flex; align-items: center; gap: 2px; flex: none; }

.p-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--m-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--m-ease), color var(--m-ease);
}
.p-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--m-text); }
.p-btn.is-on { color: var(--m-accent); }
.p-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--m-text);
  color: #0b0b0d;
  transition: background var(--m-ease), transform var(--m-ease);
}
.p-play:hover { background: #fff; transform: scale(1.04); }
.p-play:active { transform: scale(0.96); }
.p-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.p-play .ico-pause { display: none; }
.p-play.is-playing .ico-play { display: none !important; }
.p-play.is-playing .ico-pause { display: block !important; }

.p-time { font-size: 11.5px; color: var(--m-text-3); font-variant-numeric: tabular-nums; width: 40px; flex: none; }
.p-time.pt-dur { text-align: right; }
.p-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--m-accent) var(--fill, 0%), rgba(255, 255, 255, 0.12) var(--fill, 0%));
  outline: none;
  cursor: pointer;
}
.p-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--m-text);
  border: 0;
  opacity: 0;
  transition: opacity 140ms ease;
}
.p-slider:hover::-webkit-slider-thumb,
.p-slider:focus-visible::-webkit-slider-thumb { opacity: 1; }
.p-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--m-text); border: 0; }
.p-slider:focus-visible { box-shadow: 0 0 0 3px rgba(230, 67, 143, 0.2); }
.p-vol { width: 88px; flex: none; }

/* ---- Popovers (lyrics, queue, tune) ---- */
.p-pop {
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 61;
  width: min(360px, calc(100vw - 24px));
  background: var(--m-surface-2);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 14px;
}
.p-pop-head { display: flex; align-items: center; justify-content: space-between; color: var(--m-text); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.p-x { border: 0; background: none; color: var(--m-text-3); font-size: 18px; line-height: 1; cursor: pointer; }
.p-x:hover { color: var(--m-text); }
.p-pop-row { display: grid; grid-template-columns: 52px 1fr 56px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--m-text-2); margin-bottom: 10px; }
.p-pop-row span { text-align: right; font-variant-numeric: tabular-nums; color: var(--m-text); }
.p-lyric-box { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px; }
.p-lyric-box p { margin: 0 0 2px; padding: 5px 8px; border-radius: 8px; color: var(--m-text-3); font-size: 14px; line-height: 1.4; transition: color 150ms ease, background 150ms ease; }
.p-lyric-box p.is-on { color: var(--m-text); background: var(--m-accent-soft); font-weight: 700; }
.p-lyric-none { color: var(--m-text-3); }
.p-queue-list { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.p-qrow { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.p-qrow:hover { background: var(--m-surface-3); }
.p-qrow.is-cur { background: var(--m-accent-soft); }
.p-qrow.is-cur .p-qname { color: var(--m-accent-hi); }
.p-qnum { color: var(--m-text-3); font-size: 12px; width: 20px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.p-qname { min-width: 0; color: var(--m-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-qsub { color: var(--m-text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-toast {
  position: fixed;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  z-index: 62;
  background: var(--m-surface-3);
  border: 1px solid var(--m-line);
  color: var(--m-text);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---- Full-screen now playing ---- */
.fsnp {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.fsnp[hidden] { display: none; }
.fsnp-bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(70px) brightness(0.32) saturate(1.15);
  transform: scale(1.1);
}
.fsnp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 13, 0.58);
}
.fsnp-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px clamp(24px, 6vw, 72px) 40px;
  overflow-y: auto;
}
.fsnp-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.fsnp-eyebrow {
  color: var(--m-text-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fsnp-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--m-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--m-ease);
}
.fsnp-close:hover { background: rgba(255, 255, 255, 0.16); }
.fsnp-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fsnp-top .p-btn { background: rgba(255, 255, 255, 0.08); }
.fsnp-top .p-btn:hover { background: rgba(255, 255, 255, 0.16); }
.fsnp-art {
  width: min(46vh, 78vw);
  aspect-ratio: 1;
  flex: none;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: grid;
  place-items: center;
}
.fsnp-art img { width: 100%; height: 100%; object-fit: cover; }
.fsnp-art .thumb-letter { font-size: 64px; color: var(--m-text-2); }
.fsnp-meta { text-align: center; min-width: 0; }
.fsnp-title {
  margin: 0 0 6px;
  color: var(--m-text);
  font-family: var(--display-geo);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.fsnp-artist { margin: 0; color: var(--m-text-2); font-size: 15px; font-weight: 600; }
.fsnp-album { margin: 2px 0 0; color: var(--m-text-3); font-size: 12.5px; }
.fsnp-progress { width: min(560px, 90vw); }
.fsnp-times { display: flex; justify-content: space-between; margin-top: 6px; color: var(--m-text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fsnp-slider { width: 100%; height: 5px; }
.fsnp-controls { display: flex; align-items: center; gap: 14px; }
.fsnp-controls .p-btn { width: 44px; height: 44px; }
.fsnp-controls .p-play { width: 60px; height: 60px; }
.fsnp-secondary { display: flex; align-items: center; gap: 10px; }
.fsnp-secondary .p-btn.is-on { color: var(--m-accent); }
.fsnp-secondary .p-btn svg.is-filled { fill: currentColor; stroke: currentColor; }

/* ---- Mobile compact bar (<900px) ---- */
.music-mobile-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--m-line);
  border-radius: 14px;
  background: rgba(21, 21, 24, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.music-mobile-bar.is-desktop { display: none; }
.music-mobile-bar-art {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: var(--m-surface-3);
  display: grid;
  place-items: center;
}
.music-mobile-bar-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-mobile-bar-txt { flex: 1; min-width: 0; display: block; }
.music-mobile-bar-title,
.music-mobile-bar-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-mobile-bar-title { color: var(--m-text); font-size: 13px; font-weight: 600; }
.music-mobile-bar-artist { margin-top: 1px; color: var(--m-text-3); font-size: 11.5px; }
.music-mobile-bar-btns { display: flex; align-items: center; gap: 2px; flex: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .music-hero { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 20px; }
}
@media (max-width: 900px) {
  .music-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .music-header .music-search { width: 100%; }
  .music-player { display: none; }
  .music-home-intro { flex-direction: column; align-items: flex-start; gap: 6px; }
  .music-source-note { white-space: normal; }
  .music-detail-head { flex-direction: column; gap: 18px; }
  .music-detail-art { width: min(220px, 64vw); flex-basis: auto; }
  .music-detail-copy { align-self: flex-start; }
}
@media (max-width: 760px) {
  .music-track-row { grid-template-columns: 22px 38px minmax(0, 1fr) 34px; gap: 10px; }
  .music-track-album,
  .music-track-views { display: none; }
  .music-hero { grid-template-columns: 128px minmax(0, 1fr); gap: 18px; padding: 16px; }
  .music-hero-title { font-size: 22px; }
  .music-hero-actions { margin-top: 14px; }
  .music-quick-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .music-card-row,
  .music-cover-row,
  .music-artist-row { grid-auto-columns: 148px; gap: 12px; }
  .music-quick-grid { grid-template-columns: 1fr; }
  .music-hero { grid-template-columns: 104px minmax(0, 1fr); padding: 14px; }
  .music-hero-title { font-size: 19px; }
  .music-hero-artist { font-size: 13px; }
  .music-primary-btn { min-height: 38px; padding: 0 16px; font-size: 12.5px; }
  .music-detail-art { width: min(180px, 60vw); }
  .fsnp-body { justify-content: flex-start; padding-top: 72px; }
  .fsnp-art { width: min(38vh, 74vw); }
}

/* Reduced-motion: the site-wide handler at the top of this file already
   kills every transition and animation, including these. */
/* Docs: one cyan voice everywhere (tab, titles, buttons, links). */
.view[data-view="docs"] {
  --va: #26c6da;
  --va-ink: #04303a;
  --va-soft: rgba(38, 198, 218, 0.16);
}
.docs-view {
  --va: #26c6da;
  --va-ink: #04303a;
  --va-soft: rgba(38, 198, 218, 0.16);
  --docs-accent: #26c6da;
  --docs-txt: #8ae4ee;
  --docs-txt-soft: #53cfdd;
  --docs-line: rgba(38, 198, 218, 0.38);
}
.docs-btn-upload {
  background: #26c6da;
}
.docs-btn-upload:hover {
  background: #4ed9e7;
}
.docs-act:hover {
  background: rgba(38, 198, 218, 0.16);
  border-color: rgba(38, 198, 218, 0.45);
}

/* JS Movies + Chat: the app fills the whole view; the frame is the page.
   Both views flex-fill the shell so the embedded canvas/input always sits
   inside the visible area - a forced viewport min-height used to push the
   bottom controls off short screens (Chromebooks) with no way to reach them. */
.view[data-view="movies"].is-visible,
.view[data-view="chat"].is-visible {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.movies-view .view-head {
  flex: 0 0 auto;
  border-bottom-color: rgba(129, 140, 248, 0.28);
}
.view[data-view="chat"] .view-head {
  flex: 0 0 auto;
}
.movies-view .view-title {
  color: var(--movies);
}
.movies-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  border: 1px solid rgba(129, 140, 248, 0.22);
  border-radius: 12px;
  background: #0d0f12;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.chat-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: auto;
  border: 1px solid rgba(244, 81, 30, 0.35);
  border-radius: 12px;
  background: #111111;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  display: block;
  margin: 0;
}

/* Standalone chat.html / tablet / mobile: keep the frame centered and not
   overly tall, so the embedded room fills the available viewport nicely. */
#chat-frame.is-standalone {
  display: block;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 12px;
  min-height: 0;
  height: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Responsive chat inside the app shell on tablets / phones. */
@media (max-width: 900px) {
  .view[data-view="chat"] .chat-frame {
    min-height: 0;
    border-radius: 10px;
  }
}

/* When JS is disabled, at least show a friendly fallback in the chat tab. */
.chat-fallback {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-2);
  text-align: center;
}
.chat-fallback-title {
  margin: 0 0 6px;
  color: var(--text);
  font-weight: 650;
}
.chat-fallback-hint { margin: 0; }
.chat-fallback a { color: var(--accent); }

/* --- In-app fullscreen (Chat / Movies): the view section goes fixed and
   covers everything, header and sidebar included. Esc or the button exits;
   on Firefox Esc is native fullscreen exit and the fullscreenchange
   handler catches it. --- */
.view.fx-full {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  padding: 0;
  background: var(--bg, #0d0f12);
  /* The chat view is block-layout normally; fullscreen needs the frame to
     flex-fill the leftover space under the titlebar. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.view.fx-full .view-head {
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: inherit;
  flex: 0 0 auto;
}
.view.fx-full .view-actions .btn {
  padding: 6px 10px;
}
.view.fx-full .movies-frame,
.view.fx-full .chat-frame {
  min-height: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}


/* ============================================================================
   CHALKLE DESIGN SYSTEM - AUTHORITATIVE LAYER
   One style per component, declared once, at the end of the cascade so it
   wins. Earlier per-tab color washes, glow passes and one-off "polish"
   sections have been removed; anything that remains is neutralized here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Links + Movies layout corrections
   Keep proxy/backend content in predictable card rows and make the movie
   surface a real viewport rather than inheriting a square media ratio. */
.view[data-view="proxies"] {
  min-width: 0;
}
.view[data-view="proxies"] .backend-bar {
  margin-bottom: 20px;
}
.view[data-view="proxies"] #proxy-backends-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.view[data-view="proxies"] .backend-group {
  margin: 0;
  min-width: 0;
}
.view[data-view="proxies"] .backend-group-title {
  min-height: 28px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.view[data-view="proxies"] .backend-group-hint {
  max-width: 100%;
}
.view[data-view="proxies"] .backend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  align-items: stretch;
  gap: 12px;
}
.view[data-view="proxies"] .backend-card {
  min-width: 0;
  min-height: 172px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 12px;
}
.view[data-view="proxies"] .backend-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}
.view[data-view="proxies"] .backend-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.view[data-view="proxies"] .backend-head .proxy-pill {
  max-width: 100%;
  white-space: normal;
  text-align: right;
}
.view[data-view="proxies"] .backend-pills {
  min-height: 26px;
}
.view[data-view="proxies"] .backend-note {
  min-height: 38px;
  overflow-wrap: anywhere;
}
.view[data-view="proxies"] .backend-actions {
  flex-wrap: wrap;
  align-items: center;
}
.view[data-view="proxies"] .backend-actions .btn-ghost,
.view[data-view="proxies"] .proxy-actions .btn-ghost {
  min-width: 72px;
}
.view[data-view="proxies"] .proxy-form {
  margin-top: 22px;
  margin-bottom: 22px;
}
.view[data-view="proxies"] .proxy-form .form-row {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.7fr) minmax(150px, .7fr) auto;
  align-items: stretch;
  gap: 10px;
}
.view[data-view="proxies"] .proxy-form .form-row > * {
  min-width: 0;
}
.view[data-view="proxies"] .proxy-grid {
  align-items: stretch;
  gap: 12px;
}
.view[data-view="proxies"] .proxy-card {
  min-width: 0;
  min-height: 176px;
  box-sizing: border-box;
}
.view[data-view="proxies"] .proxy-copy,
.view[data-view="proxies"] .proxy-url {
  min-width: 0;
}
.view[data-view="proxies"] .proxy-meta-line {
  min-height: 26px;
}
.view[data-view="proxies"] .proxy-actions {
  align-items: center;
}

/* Movies is a viewport, never a poster/card. Reset width, height and ratio
   explicitly because generic media rules can otherwise make the iframe square. */
.view[data-view="movies"],
.view[data-view="movies"].is-visible {
  min-width: 0;
  min-height: 0;
  height: calc(100dvh - var(--topbar-h));
  aspect-ratio: auto;
  overflow: hidden;
}
.view[data-view="movies"] .movies-frame,
.view[data-view="movies"] iframe#movies-frame {
  display: block;
  flex: 1 1 0;
  width: 100%;
  height: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  align-self: stretch;
  box-sizing: border-box;
}
.view[data-view="movies"] .view-head {
  flex: 0 0 auto;
}
.view.fx-full[data-view="movies"],
.view.fx-full[data-view="movies"] .movies-frame,
.view.fx-full[data-view="movies"] iframe#movies-frame {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}
@media (max-width: 760px) {
  .view[data-view="proxies"] .proxy-form .form-row {
    grid-template-columns: 1fr;
  }
  .view[data-view="proxies"] .backend-grid {
    grid-template-columns: 1fr;
  }
  .view[data-view="movies"],
  .view[data-view="movies"].is-visible {
    height: calc(100dvh - var(--topbar-h));
  }
}

/* ---------- Base ---------- */

body {
  background-color: var(--bg);
  color: var(--text);
  font-size: var(--text-md);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--accent);
}

/* ---------- Top bar ---------- */

.topbar {
  height: var(--topbar-h);
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.brand {
  width: var(--side-w);
  gap: 10px;
}

.brand-name {
  font-size: 30px;
  margin-top: 3px;
}

.topbar-spacer {
  width: var(--side-w);
}

/* Search - the front door of Chalkle. Big, quiet, obvious when focused. */
.search {
  flex: 1;
  max-width: 620px;
}

.search .icon {
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
}

.search input {
  height: 40px;
  padding: 0 60px 0 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14.5px;
  letter-spacing: 0.005em;
  caret-color: var(--accent);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.search input::placeholder {
  color: var(--text-muted);
}

.search input:hover {
  border-color: var(--border-strong);
}

.search:focus-within input {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.kbd {
  right: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  letter-spacing: 0.03em;
}

/* Search dropdown: anchored under whichever search field is focused (top bar
   or Home launcher) by a small JS positioning pass. One panel language. */
.search-results {
  position: fixed;
  z-index: 200;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 6px;
  overscroll-behavior: contain;
  animation: ddIn 140ms var(--ease);
}

.search-results-group {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 5px;
  font-family: var(--display-geo);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.search-results-group::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  opacity: 0.85;
}

.search-r {
  gap: 11px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}

.search-r:hover,
.search-r.is-active {
  background: var(--surface-hover);
}

.search-r-img {
  width: 40px;
  height: 28px;
  border-radius: var(--radius-sm);
}

.search-r-title {
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 650;
}

.search-r-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.search-r-in {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

/* Home launcher field only: one quiet line separating its two jobs, because
   that field both opens catalog matches and searches the web. */
.search-hint {
  margin-top: 4px;
  padding: 7px 12px 9px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.search-empty {
  padding: 18px 14px 14px;
  text-align: center;
}

.search-empty-title {
  font-family: var(--display-geo);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.search-empty-tip {
  margin: 5px auto 0;
  max-width: 34ch;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

.search-empty-jumps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.search-empty-jump {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.search-empty-jump:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 1100px) {
  .search input {
    padding-right: 34px;
  }
  .kbd {
    display: none;
  }
}

@media (min-width: 861px) and (max-width: 1280px) {
  .search {
    max-width: 460px;
  }
  .brand-name {
    font-size: 26px;
  }
}

/* Topbar clock + viewer: one quiet pill language. */
.topbar-clock {
  padding: 5px 12px 5px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.topbar-clock:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.clock-time {
  font-size: 13.5px;
}

.viewer-pill {
  font-variant-numeric: tabular-nums;
}

.hamburger {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.hamburger:hover {
  background: var(--surface);
  color: var(--text);
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--side-w);
  min-width: var(--side-w-collapsed);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  transition: width 180ms var(--ease);
}

.nav {
  padding: var(--space-3) var(--space-2) var(--space-2);
  gap: 2px;
}

.nav-group-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px var(--space-3) 6px;
}

.nav-group-label:first-child {
  padding-top: 2px;
}

.nav-item {
  height: 38px;
  gap: 12px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.nav-item .icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.1;
}

.nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-item:active {
  transform: scale(0.97);
}

/* Active tab: subtle filled accent, small accent bar, clear text. */
.nav-item.is-active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 650;
  box-shadow: none;
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.nav-label {
  font-size: 13.5px;
  font-weight: 500;
}

.nav-bottom {
  padding: var(--space-3) var(--space-2) var(--space-2);
  border-top: 1px solid var(--border-soft);
  gap: 2px;
}

.nav-socials {
  gap: 6px;
  padding: 0 2px var(--space-2);
}

.nav-social {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.nav-social:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: none;
}

.collapse-btn {
  margin: var(--space-1) var(--space-2);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
}

.collapse-btn:hover {
  color: var(--text);
  background: var(--surface);
}

/* Collapsed rail */
body.sidebar-collapsed .sidebar {
  width: var(--side-w-collapsed);
}

body.sidebar-collapsed .brand {
  width: var(--side-w-collapsed);
}

body.sidebar-collapsed .topbar-spacer {
  width: var(--side-w-collapsed);
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-group-label,
body.sidebar-collapsed .nav-more-label {
  display: none;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .collapse-btn {
  justify-content: center;
  padding: 0;
}

body.sidebar-collapsed .nav-socials {
  flex-direction: column;
}

body.sidebar-collapsed .collapse-btn .icon {
  transform: rotate(180deg);
}

/* More panel (inline accordion in the sidebar) */
.nav-more {
  margin: 0 var(--space-1);
}

.nav-more.is-open {
  animation: ddIn 140ms var(--ease);
  border-color: var(--border-soft);
}

.nav-more-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 6px;
}

.nav-more-btn.is-open {
  color: var(--text);
  background: var(--surface-hover);
}

/* ---------- Main + views ---------- */

.main {
  padding: var(--content-pad) calc(var(--content-pad) * 1.1) 64px;
}

/* Keep the persistent music player from covering the last rows. */
body[data-view="music"] .main { padding-bottom: 132px; }

.view.is-visible {
  max-width: var(--content-max);
  margin: 0 auto;
  animation: viewIn 160ms var(--ease);
}

.home-view.is-visible {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- View headers ---------- */

.view-head {
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.view-heading {
  min-width: 0;
}

.view-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  text-shadow: none;
}

.view-meta {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------- Chips, fields, buttons ---------- */

.chip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-hover);
}

.chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.field {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field::placeholder {
  color: var(--text-muted);
}

.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.btn:active {
  transform: scale(0.98);
}

/* Filter strips: one scannable horizontal row. */
.genre-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -6px 14px;
  padding: 0 6px 6px;
  gap: 7px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.genre-filters::-webkit-scrollbar {
  display: none;
}

.genre-filters .chip {
  flex: none;
}

/* Sticky command bar on Games / Cloud */
.game-command {
  position: sticky;
  top: 0;
  z-index: 18;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 2px 10px;
  margin: 0 -2px 16px;
}

/* ---------- Grids + cards (one system) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card:active {
  transform: translateY(0) scale(0.99);
}

.card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--surface-hover);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.card-thumb .fallback {
  background: var(--surface-hover);
  color: var(--accent);
}

.thumb-fallback {
  color: var(--text-secondary);
  background: var(--surface-hover);
}

.card-body {
  min-height: 62px;
  padding: 11px 13px 13px;
}

.card-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  text-shadow: none;
}

/* Two-line titles so cards in a row align. */
.game-card .card-title,
.cloud-card .card-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.6em;
}

.card-count {
  color: var(--text-secondary);
}

.card-source {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.game-card .card-count {
  border-color: var(--border);
  background: var(--surface);
}

/* Hover scrim over the art, library grid only. The old bare "\25B6" triangle
   pseudo-element collided with the picks numbering (also .card-thumb::before),
   so the play affordance is a real .quick-launch chip inside the markup now:
   scrim here, chip on top. Picks shelves keep their numbering chip instead. */
.games-grid .game-card .card-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(8, 10, 12, 0.42);
  opacity: 0;
  transition: opacity 150ms var(--ease, ease);
  pointer-events: none;
}

.games-grid .game-card:hover .card-thumb::before,
.games-grid .game-card:focus-within .card-thumb::before {
  opacity: 1;
}

.games-grid .game-card:hover .card-thumb img,
.games-grid .game-card:focus-within .card-thumb img {
  transform: scale(1.045);
}

.open-with,
.proxy-btn {
  border-color: var(--border);
  background: rgba(10, 10, 8, 0.82);
  color: var(--text-secondary);
}

.open-with:hover,
.proxy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fav-btn {
  border-color: var(--border);
  background: rgba(10, 10, 8, 0.82);
}

.ribbon {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---------- Panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.panel-title {
  font-family: var(--display-geo);
  font-weight: 700;
  color: var(--text);
}

/* ---------- Empty states ---------- */

.empty {
  padding: 56px 24px;
}

.empty-title {
  font-family: var(--display-geo);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.empty-hint {
  color: var(--text-muted);
}

.empty-cta {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- Home: the launcher stage ---------- */

.home-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: clamp(28px, 6vh, 64px) var(--space-4) clamp(20px, 4vh, 40px);
}

.home-logo {
  font-size: clamp(56px, 9vw, 92px);
}

.home-tag {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 44ch;
  line-height: 1.5;
}

/* The main Chalkle browser/launcher field. */
.home-search {
  position: relative;
  width: min(620px, 100%);
  margin-top: var(--space-1);
}

.home-search .icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Home search hint - a quiet border pulse every few seconds. Flat color only,
   no gradients. Respects reduced-motion and low-memory devices. */
.home-search-glow {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 2;
  border-radius: calc(var(--radius-lg) + 1px);
  border: 1.5px solid var(--accent);
  opacity: 0;
}

.home-search.glow-run .home-search-glow {
  animation: gp-glow-appear 2.2s ease forwards;
}

@keyframes gp-glow-appear {
  0% { opacity: 0; }
  18% { opacity: 0.55; }
  75% { opacity: 0.35; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-search-glow { display: none; }
}

.home-search input {
  width: 100%;
  height: 56px;
  padding: 0 108px 0 50px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-1);
  caret-color: var(--accent);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.home-search input::placeholder {
  color: var(--text-muted);
}

.home-search input:hover {
  border-color: var(--border-strong);
}

.home-search:focus-within input {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hover);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-2);
}

.home-search-go {
  position: absolute;
  right: 6px;
  top: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.home-search-go:hover { filter: brightness(1.08); }
.home-search-go:active { transform: scale(0.97); }
.home-search-go:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Home hint line: tiny mono accent under the launcher field. */
.home-hint {
  margin-top: var(--space-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}

/* Quick launcher: compact tiles, tinted icon, neutral tile. */
.home-launch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.home-launch-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 78px;
  padding: 12px 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.home-launch-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
  color: var(--text);
  transform: translateY(-1px);
}

.home-launch-btn:active {
  transform: translateY(0);
}

.home-launch-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-launch-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.home-launch-btn:hover .home-launch-ico {
  border-color: currentColor;
}

.home-launch-ico .icon {
  width: 17px;
  height: 17px;
}

.home-launch-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.home-launch-btn.c-games .home-launch-ico { color: var(--accent); }
.home-launch-btn.c-cloud .home-launch-ico { color: var(--cloud); }
.home-launch-btn.c-music .home-launch-ico { color: var(--magenta); }
.home-launch-btn.c-movies .home-launch-ico { color: var(--movies); }
.home-launch-btn.c-chat .home-launch-ico { color: var(--teal); }
.home-launch-btn.c-ai .home-launch-ico { color: var(--purple); }
.home-launch-btn.c-apps .home-launch-ico { color: var(--yellow); }
.home-launch-btn.c-tools .home-launch-ico { color: var(--blue); }

/* Featured panel */
.home-featured {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.home-featured:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.home-featured-img {
  width: 180px;
  flex: none;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-hover);
}

.home-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-featured-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-featured-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-feat-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 9.5px;
  color: var(--text-muted);
}

.home-featured-title {
  font-family: var(--display-geo);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.home-featured-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 56ch;
  margin: 2px 0 6px;
}

.home-featured-cta {
  flex: none;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.home-featured-cta:hover {
  background: color-mix(in srgb, var(--accent) 84%, #fff);
}

/* Shelves (recents, picks, popular) */
.home-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
  padding: 2px 0 10px;
}

/* Shelves that hold real library cards (picks, popular) reuse the games-grid
   density so Home and Games read as the same card system. */
.home-shelf.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
}

.home-card {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.home-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.home-card:active {
  transform: translateY(0) scale(0.99);
}

.home-card-art {
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  background: var(--surface-hover);
}

.home-card-title {
  font-family: var(--display-geo);
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.home-card-meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-block {
  margin-top: var(--space-4);
}

.home-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 var(--space-3);
}

.home-block-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-shadow: none;
}

.home-block-note {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--text-muted);
}

/* Discord banner */
.home-join {
  gap: 12px 16px;
  margin: 0 0 var(--space-3);
  padding: 10px 12px 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
}

.home-join-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: #5865f2;
  color: #fff;
}

.home-join-title {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.home-join-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.home-join-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: #5865f2;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.home-join-btn:hover {
  background: #6b76f5;
}

.home-join-x:hover {
  color: var(--text);
  background: var(--danger-soft);
}

/* Small status footer: shelf counts, quiet. */
.home-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 12.5px;
}

.home-status b {
  color: var(--text-secondary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-status .home-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 6px;
}

/* Ad slots: present but silent. */
.ad-slot {
  opacity: 0.8;
}

/* ---------- Mini music player (topbar) ---------- */

.mini-music {
  flex: none;
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding: 4px 8px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  user-select: none;
}

.mini-music:hover {
  border-color: var(--border-strong);
}

.mini-music.is-active {
  display: inline-flex;
}

.mini-music-open {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mini-music-art {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--magenta-soft);
  border: 1px solid color-mix(in srgb, var(--magenta) 35%, transparent);
}

.mini-music-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-music-art .thumb-letter {
  color: var(--magenta);
  font-family: var(--display);
  font-size: 15px;
}

.mini-music-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 128px;
  text-align: left;
  line-height: 1.15;
}

.mini-music-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-music-artist {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-music-eq {
  flex: none;
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin: 0 3px 0 6px;
}

.mini-music.is-playing .mini-music-eq {
  display: inline-flex;
}

.mini-music-eq i {
  width: 3px;
  border-radius: 1px;
  background: var(--magenta);
  animation: mini-music-eq 0.9s ease-in-out infinite;
}

.mini-music-eq i:nth-child(1) { height: 60%; animation-delay: 0s; }
.mini-music-eq i:nth-child(2) { height: 100%; animation-delay: 0.25s; }
.mini-music-eq i:nth-child(3) { height: 45%; animation-delay: 0.5s; }

@keyframes mini-music-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.mini-music-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.mini-music-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}

.mini-music-btn:hover {
  color: var(--text);
  background: var(--magenta-soft);
}

.mini-music-btn:active {
  transform: scale(0.9);
}

.mini-music-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-music-btn svg path[d^="M8 5v14"],
.mini-music-btn svg path[d^="M7 5h4"],
.mini-music-btn svg path[d^="M13 5h4"],
.mini-music-btn svg path[d^="M6 5v14"],
.mini-music-btn svg path[d^="M18 5v14"],
.mini-music-btn svg path[d^="M4 9v6"],
.mini-music-btn svg path[d^="M4 5l11"] {
  fill: currentColor;
  stroke: none;
}

.mini-music-play {
  width: 30px;
  height: 30px;
  background: var(--magenta);
  color: #fff;
  border-radius: 50%;
  transition: background 130ms ease, box-shadow 130ms ease;
}

.mini-music-play:hover {
  background: color-mix(in srgb, var(--magenta) 82%, #fff);
}

.mini-music.is-playing .mini-music-play {
  box-shadow: 0 0 8px var(--magenta-soft);
}
.mini-music-play .mm-ico-pause { display: none; }
.mini-music-play.is-playing .mm-ico-play { display: none !important; }
.mini-music-play.is-playing .mm-ico-pause { display: block !important; }

.mini-music.is-muted .mm-ico-vol { display: none; }
.mini-music:not(.is-muted) .mm-ico-muted { display: none; }
.mini-music.is-muted .mini-music-btn[aria-label="Mute"] { color: var(--text-muted); }

@media (max-width: 1280px) {
  .mini-music-txt { display: none; }
}
@media (max-width: 980px) {
  .mini-music { display: none; }
}

/* ---------- Cloud games inline player ---------- */

.cloud-player-host {
  margin: 14px 0 22px;
}

.cloud-player-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cloud-player-title {
  font-family: var(--display-geo);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-player-status {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-player-x {
  flex: none;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cloud-player-x:hover {
  color: #fff;
  border-color: var(--danger);
  background: var(--danger-soft);
}

.cloud-player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}

.cloud-player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cloud-player-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--cloud-soft);
  border-top-color: var(--cloud);
  border-radius: 50%;
  animation: cloud-player-spin 1s linear infinite;
}

@keyframes cloud-player-spin {
  to { transform: rotate(360deg); }
}

.cloud-player-err {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.cloud-player-err h3 {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 19px;
  font-weight: 700;
  color: var(--danger);
}

.cloud-player-err p {
  margin: 0;
  max-width: 480px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}

/* ---------- Settings ---------- */

.view[data-view="settings"] {
  max-width: 1040px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.settings-panel:hover {
  border-color: var(--border-strong);
}

.settings-toggle {
  padding: 16px 18px;
  border-radius: var(--radius-lg);
}

.settings-toggle:hover {
  background: var(--surface-hover);
}

.settings-toggle-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.settings-panel .settings-body {
  padding: 0 18px 18px;
}

.settings-row {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}

.settings-row-txt .setting-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.settings-row-txt .setting-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-card.settings-about {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.settings-proxy-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 8px;
}

.settings-proxy-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--teal-soft);
  color: var(--teal);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.settings-proxy-btn-link:hover {
  background: var(--teal);
  color: #042522;
}

/* ---------- Motion ---------- */

@keyframes viewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.card:active,
.home-card:active,
.chip:active,
.btn:active,
.nav-item:active {
  transform: scale(0.98);
}

html.perf-mode * {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Stealth cloak overlay */
#stealth-cover-frame {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  border: none;
  background: #fff;
}

html.stealth-active #stealth-cover-frame {
  display: block;
}

/* ---------- Scrollbars: one thin, quiet language ---------- */

.main,
.nav,
.search-results {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.main::-webkit-scrollbar,
.search-results::-webkit-scrollbar {
  width: 10px;
}

.main::-webkit-scrollbar-track,
.search-results::-webkit-scrollbar-track {
  background: transparent;
}

.main::-webkit-scrollbar-thumb,
.search-results::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.main::-webkit-scrollbar-thumb:hover,
.search-results::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .main {
    padding: var(--space-5) var(--space-4) 48px;
  }
  .view.is-visible {
    max-width: none;
  }
}

/* Real phones: the sidebar becomes an off-canvas drawer behind the
   hamburger; everything wider keeps the icon rail or full sidebar. */
@media (max-width: 700px) {
  .hamburger {
    display: flex;
  }
  .brand {
    width: auto;
    flex: 1;
  }
  .topbar-spacer {
    display: none;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    bottom: 0;
    width: var(--side-w);
    transform: translateX(-100%);
    transition: transform 200ms var(--ease);
    z-index: 40;
    box-shadow: none;
  }
  body.sidebar-collapsed .sidebar {
    width: var(--side-w);
  }
  body.sidebar-open .sidebar {
    transform: none;
    box-shadow: var(--shadow-3);
  }
  body.sidebar-open .backdrop {
    display: block !important;
  }
  .backdrop {
    background: rgba(0, 0, 0, 0.55);
  }
  /* The drawer is a full sidebar: undo the icon-rail overrides. */
  .nav-label {
    display: inline;
  }
  .nav-item,
  .collapse-btn {
    justify-content: flex-start;
    padding: 0 var(--space-3);
  }
  .nav-socials {
    flex-direction: row;
  }
  .collapse-btn .icon {
    transform: none;
  }
  .nav-more-label {
    display: block;
  }
  .main {
    padding: var(--space-4) var(--space-3) 40px;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .home-shelf {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .home-featured {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .home-featured-img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .home-search input {
    height: 50px;
    font-size: 15px;
    padding-right: 92px;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 0 var(--space-3);
    gap: 10px;
  }
  .home-launch {
    gap: 7px;
  }
  .home-launch-btn {
    width: 66px;
    gap: 6px;
    padding: 10px 4px 8px;
  }
  .home-launch-ico {
    width: 30px;
    height: 30px;
  }
  .view-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .view-actions .field-search {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .search-results {
    left: 12px !important;
    right: 12px;
    width: auto !important;
  }
}


/* ---------- Games library (Prompt 4: one coherent launcher) ---------- */

/* Toolbar: search grows, sort sits quietly on the right. */
.game-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.game-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.game-search .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: currentColor;
  color: var(--text-muted);
  pointer-events: none;
}

.game-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 36px;
  border-radius: var(--radius);
}

.game-sort-select {
  width: auto;
  flex: none;
  height: 40px;
  padding: 0 30px 0 12px;
  border-radius: var(--radius);
  font-size: 13px;
}

/* Filter chips: one scannable row under the toolbar. */
.game-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

/* Featured panel: artwork leads, copy sits on the right. */
.game-feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  margin: 0 0 var(--space-6);
  /* Big enough to feel featured, small enough that the grid stays visible. */
  min-height: 230px;
}

.game-feature-art {
  position: relative;
  background: var(--surface-hover);
  overflow: hidden;
  min-height: 230px;
}

.game-feature-art img,
.game-feature-art .thumb-art,
.game-feature-art .thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-feature-art .thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.game-feature-art .thumb-fallback .icon {
  width: 44px;
  height: 44px;
}

.game-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  min-width: 0;
}

.game-feature-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.game-feature-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.game-feature-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

.game-feature-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
}

.game-feature .btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.game-feature .btn-accent:hover {
  background: var(--success);
  border-color: var(--success);
}

/* Library grid: denser tiles on big screens so a shelf of games is visible
   at a glance; the base .grid rule still handles the fallback widths. */
.games-grid {
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: var(--space-3);
}

/* Ultrawide / large desktop: let the library breathe wider instead of
   stretching tiles into slabs. */
@media (min-width: 1800px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
}

/* Library card: artwork-first, one meta line under the title. */
.game-card .card-body {
  display: block;
  min-height: 0;
  padding: 10px 12px 12px;
}

.game-card .card-title {
  display: block;
  font-size: 15px;
}

.game-card .card-source-link {
  font-size: 11px;
  margin-left: 2px;
}

@media (max-width: 760px) {
  .game-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .game-sort-select {
    width: 100%;
  }
  .game-feature {
    grid-template-columns: 1fr;
  }
  .game-feature-art {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .game-feature-body {
    padding: var(--space-4);
  }
  .game-feature-title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ---------- Game Player (Prompt 5: the focused in-app game surface) ---------- */

.game-player {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Top player bar: back, title, quiet actions. */
.gp-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.gp-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 var(--space-1);
}

.gp-title {
  font-family: var(--display-geo);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.gp-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.gp-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border);
}

.gp-btn .icon {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.gp-btn.is-fav {
  color: var(--yellow);
}

.gp-btn.is-fav .icon {
  fill: currentColor;
}

/* Stage: viewport, then info, then related. Scrolls when short. */
.gp-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-8);
  position: relative;
}

.gp-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: width 240ms ease, opacity 300ms ease;
  z-index: 2;
}

.gp-frame-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #0a0908;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a0908;
  opacity: 0;
  transition: opacity 180ms ease;
}

/* ---------- Auto clicker panel ----------
   A narrow vertical console pinned to the frame's right edge on clicker
   games. Same language as the player chrome: elevated surface, 1px chalk
   borders, one accent, square-ish radii. No fade gradients, no glow. */
.gp-ac {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 188px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  user-select: none;
}

.gp-ac-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.gp-ac-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--text-muted);
  flex: none;
}

.gp-ac.live .gp-ac-dot {
  background: var(--accent);
}

.gp-ac-name {
  flex: 1;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-ac-min {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex: none;
}

.gp-ac-min svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.15s ease;
}

.gp-ac.min .gp-ac-min svg {
  transform: rotate(180deg);
}

.gp-ac.min .gp-ac-body {
  display: none;
}

.gp-ac-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gp-ac-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gp-ac-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gp-ac-label b {
  color: var(--text-secondary);
  font-weight: 700;
}

.gp-ac-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.gp-ac-num {
  width: 52px;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.gp-ac-num:focus {
  outline: none;
  border-color: var(--accent);
}

.gp-ac-unit {
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.gp-ac-unit:focus {
  outline: none;
  border-color: var(--accent);
}

.gp-ac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.gp-ac-chip {
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.gp-ac-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.gp-ac-chip.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.gp-ac-rand,
.gp-ac-duty {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.gp-ac-key {
  padding: 5px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.gp-ac-key.wait {
  border-color: var(--yellow);
  color: var(--yellow);
  border-style: solid;
}

.gp-ac-go {
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.gp-ac-go:hover {
  filter: brightness(1.08);
}

.gp-ac.live .gp-ac-go {
  background: var(--surface-active);
  border-color: var(--red);
  color: var(--red-ink);
}

.gp-ac-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.gp-ac.live .gp-ac-rate {
  color: var(--accent);
}

.gp-ac-pick {
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.gp-ac-pick:hover {
  border-color: var(--accent);
}

.gp-ac-pick.wait {
  border-color: var(--yellow);
  color: var(--yellow);
}

.gp-ac-pick.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.gp-ac-picked {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Loading: artwork, title, quiet spinner. */
.gp-splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  overflow: hidden;
  background: var(--bg, #0b0e14);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.gp-splash.out { opacity: 0; pointer-events: none; }

.gp-splash-wall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 130%;
  margin-left: -15%;
  transform: rotate(-8deg);
}

.gp-splash-row { display: flex; gap: 14px; justify-content: center; animation: gp-row-in 0.55s ease both; }
.gp-splash-row:nth-child(2) { animation-delay: 0.08s; }
.gp-splash-row:nth-child(3) { animation-delay: 0.16s; }

.gp-splash-cell {
  flex: 1 1 0;
  max-width: 180px;
  min-width: 96px;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.gp-splash-cell img, .gp-splash-cell .thumb-art,
.gp-splash-cell .thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.gp-splash-panel {
  position: relative;
  z-index: 2;
  width: min(300px, 78%);
  align-self: stretch;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 20px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: none;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.gp-splash.out .gp-splash-panel { transform: translateX(-110%); }

.gp-splash-logo {
  font-family: var(--display, inherit);
  font-size: 40px;
  line-height: 1;
  color: var(--accent, #fff);
}

.gp-splash-spin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--text);
  animation: gp-spin 0.85s linear infinite;
}

.gp-splash-title {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gp-splash-sub { font-size: 11px; color: var(--text-dim, var(--muted)); }

.gp-splash-skip { margin-top: 0; }

@keyframes gp-spin { to { transform: rotate(360deg); } }

@keyframes gp-row-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .gp-splash-panel {
    width: 100%;
    max-width: none;
    align-self: flex-end;
    margin-right: 0;
    margin-top: auto;
    height: auto;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    padding: 14px 16px;
    border-right: none;
    border-top: 1px solid var(--border);
  }
  .gp-splash-logo, .gp-splash-sub { display: none; }
  .gp-splash-title { max-width: 40vw; }
}

.gp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--surface-hover);
  padding: var(--space-6);
  text-align: center;
}

.gp-loading-art {
  width: 88px;
  height: 88px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.gp-loading-art img,
.gp-loading-art .thumb-art,
.gp-loading-art .thumb-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gp-loading-art .thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.gp-loading-art .thumb-fallback .icon {
  width: 30px;
  height: 30px;
}

.gp-loading-title {
  font-family: var(--display-geo);
  font-size: 17px;
  font-weight: 700;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-loading-spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gp-spin 900ms linear infinite;
}

@keyframes gp-spin {
  to { transform: rotate(360deg); }
}

/* Error: calm Chalkle panel, no raw browser noise. */
.gp-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
  background: var(--surface-hover);
}

.gp-error > .icon {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: var(--space-1);
}

.gp-error-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 20px;
  font-weight: 700;
}

.gp-error-hint {
  margin: 0 0 var(--space-2);
  max-width: 420px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.gp-error-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Info strip under the viewport. */
.gp-info {
  max-width: 1200px;
  margin: var(--space-4) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.gp-info-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gp-info-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-info-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

.gp-info-fav {
  flex: none;
  height: 38px;
}

.gp-info-fav .icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.gp-info-fav.is-fav {
  border-color: rgba(245, 179, 1, 0.5);
  color: var(--yellow);
}

.gp-info-fav.is-fav .icon {
  fill: currentColor;
}

/* Related shelf. */
.gp-related {
  max-width: 1200px;
  margin: var(--space-6) auto 0;
}

.gp-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-3);
}

.gp-related-title {
  margin: 0;
  font-family: var(--display-geo);
  font-size: 17px;
  font-weight: 700;
}

.gp-related-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  gap: var(--space-3);
}

/* Fullscreen: only the game. */
.game-player.fs .gp-bar,
.game-player.fs .gp-info,
.game-player.fs .gp-related,
.game-player.fs .gp-progress {
  display: none;
}

.game-player.fs .gp-stage {
  padding: 0;
  overflow: hidden;
  background: #0a0908;
}

.game-player.fs .gp-frame-wrap {
  max-width: none;
  border: 0;
  border-radius: 0;
  height: 100%;
  aspect-ratio: auto;
}

.gp-exitfs {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  right: 18px;
  z-index: 75;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.gp-exitfs:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 760px) {
  .gp-stage {
    padding: var(--space-3) var(--space-3) var(--space-6);
  }
  .gp-sub {
    display: none;
  }
  .gp-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .gp-info-fav {
    width: 100%;
  }
  .gp-info-title {
    white-space: normal;
  }
  .gp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gp-error-actions .btn {
    padding: 0 12px;
  }
}


/* ---------------------------------------------------------------- proxy
   backend selector (Proxies tab). One picker that decides how every game,
   app and site is fetched, plus a card per backend with its live status. */
.panel.backend-bar { display: flex; flex-direction: column; gap: 10px; }
.backend-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.backend-bar-label {
  font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 650; color: var(--text-secondary);
}
.backend-bar-select { flex: 1 1 240px; min-width: 190px; }
.backend-bar-open { flex: 0 0 auto; }
.backend-bar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.backend-bar-name { font-weight: 650; color: var(--text); }
.backend-bar-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.backend-group { margin: 18px 0 6px; }
.backend-group-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 10px;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary);
}
.backend-group-hint {
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--text-muted);
}
.backend-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.backend-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.backend-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.backend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.backend-name { font-weight: 650; color: var(--text); }
.backend-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.backend-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.backend-actions { display: flex; gap: 8px; margin-top: auto; }

/* ---------- Structured Docs link-list workspace ---------- */
.docs-workspace {
  margin: 0 0 26px;
  padding: 18px;
  border: 1px solid var(--docs-line);
  border-radius: 16px;
  background: rgba(8, 21, 28, 0.92);
}
.docs-workspace-head,
.docs-workspace-panel-head,
.docs-workspace-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.docs-workspace-head { margin-bottom: 16px; }
.docs-workspace-heading { min-width: 0; }
.docs-workspace-title,
.docs-provider-title {
  margin: 0;
  color: var(--docs-txt);
  font-family: var(--display-geo);
  font-size: 21px;
  line-height: 1.2;
}
.docs-workspace-note,
.docs-provider-note {
  margin: 4px 0 0;
  color: var(--docs-txt-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.docs-workspace-total,
.docs-provider-total,
.docs-workspace-results-meta {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.docs-workspace-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
}
.docs-collection-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}
.docs-workspace-label {
  padding: 4px 8px 7px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.docs-collection-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}
.docs-collection-btn:hover { background: rgba(110, 198, 255, .08); color: var(--text); }
.docs-collection-btn.is-active {
  border-color: var(--docs-line);
  background: var(--docs-txt-soft);
  color: #06151c;
}
.docs-collection-btn-title { font-weight: 700; }
.docs-collection-btn-count {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}
.docs-collection-btn.is-active .docs-collection-btn-count { color: #16404b; }
.docs-workspace-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, .12);
}
.docs-workspace-panel-head { align-items: flex-start; margin-bottom: 13px; }
.docs-provider-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.docs-provider-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.docs-provider-tab:hover { color: var(--text); border-color: var(--docs-line); }
.docs-provider-tab.is-active {
  border-color: var(--docs-line);
  background: var(--docs-txt-soft);
  color: #06151c;
}
.docs-provider-tab-count {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: .75;
}
.docs-workspace-tools { margin: 12px 0 8px; }
.docs-workspace-search { flex: 1 1 220px; min-width: 150px; }
.docs-workspace-copy { flex: 0 0 auto; }
.docs-workspace-results-meta { margin: 3px 0 9px; }
.docs-workspace-results { display: flex; flex-direction: column; gap: 6px; }
.docs-variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(11, 27, 34, .8);
}
.docs-variant-row:hover { border-color: var(--docs-line); background: rgba(110, 198, 255, .07); }
.docs-variant-row.is-pending { opacity: .65; }
.docs-variant-index {
  flex: 0 0 25px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
}
.docs-variant-info { flex: 1 1 auto; min-width: 0; }
.docs-variant-label,
.docs-variant-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-variant-label { color: var(--docs-txt); font-size: 13px; font-weight: 700; }
.docs-variant-url { margin-top: 2px; color: var(--text-3); font-family: var(--mono); font-size: 10.5px; }
.docs-variant-open,
.docs-variant-copy,
.docs-variant-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
}
.docs-variant-open { background: var(--docs-txt-soft); color: #06151c; text-decoration: none; }
.docs-variant-open:hover { background: var(--docs-txt); }
.docs-variant-copy { border: 1px solid var(--line); background: transparent; color: var(--text-secondary); cursor: pointer; }
.docs-variant-copy:hover { border-color: var(--docs-line); color: var(--docs-txt); }
.docs-variant-status { border: 1px solid var(--line); color: var(--text-3); font-family: var(--mono); }
.docs-workspace-empty { padding: 24px 10px; color: var(--text-3); text-align: center; }
.docs-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.docs-section-line { height: 1px; flex: 1; background: var(--line); }
@media (max-width: 720px) {
  .docs-workspace { padding: 12px; }
  .docs-workspace-layout { grid-template-columns: 1fr; }
  .docs-collection-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-workspace-label { grid-column: 1 / -1; }
}

/* --- Gamepad cursor and connected chip -----------------------------------
   The cursor reuses the app focus ring so a controller user and a keyboard
   user see the same thing. The chip sits under the top bar (the bottom of
   the screen belongs to the toast host) and never eats a click. */
.gp-cursor,
.gp-cursor:focus {
  outline: 3px solid var(--va, var(--accent));
  outline-offset: 3px;
  border-radius: var(--radius);
}

.gp-hint {
  position: fixed;
  left: 50%;
  top: 66px;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(92vw, 620px);
  padding: 9px 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--display-geo);
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.gp-hint.is-up {
  opacity: 1;
  transform: translate(-50%, 0);
}

.gp-hint-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

.gp-hint-keys {
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 620px) {
  .gp-hint-keys { display: none; }
}

/* ============================================================================
   PERFORMANCE OVERLAY (perf.js)
   A developer readout, off by default. Flat like everything else: one accent
   stroke per chart, no fills, no gradients.
   ========================================================================== */
.perf-overlay {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  width: 216px;
  padding: 10px 12px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  user-select: none;
}

.perf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.perf-title {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.perf-close {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.perf-close:hover { color: var(--text); }

.perf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.perf-row-plain { justify-content: space-between; }
.perf-label {
  flex: 0 0 auto;
  width: 48px;
  color: var(--text-muted);
}
.perf-graph {
  flex: 1 1 auto;
  height: 26px;
}
.perf-graph canvas {
  display: block;
  width: 100%;
  height: 26px;
}
.perf-value {
  flex: 0 0 auto;
  min-width: 56px;
  text-align: right;
  color: var(--text);
}
.perf-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 10px;
}

@media (max-width: 620px) {
  .perf-overlay {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ============================================================================
   HOME SEARCH ENGINE PICKER (search.js)
   One quiet line under the launcher field: which engine answers, and why.
   ========================================================================== */
.home-engine-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--text-muted);
}

.home-engine-label { flex: 0 0 auto; }

.home-engine-select {
  flex: 0 0 auto;
  max-width: 200px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.home-engine-select:hover { border-color: var(--border-strong); }
.home-engine-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.home-engine-note {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 620px) {
  .home-engine-note { display: none; }
}

/* Ad state (adcheck.js). The verdict also lands as a class on <html>, which is
   the hook for styling a blocked page; the Settings row is the visible part. */
.debug-warn { color: var(--yellow); }
html.ads-blocked .ad-slot-label { opacity: 0.6; }

/* Cloud tile art skeleton: shimmers while /api/cloud-art/lookup resolves a
   real cover for a title with no supplied artwork. The deterministic letter
   tile stays visible underneath (never a blank gray box); the skeleton is a
   translucent sheen that sweeps over it. Once the resolved image decodes,
   .thumb-loading drops off and the art covers everything; a "known missing"
   answer removes the skeleton and leaves the letter tile as before. */
.cloud-card .card-thumb .thumb-skeleton {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.13) 48%,
    rgba(255, 255, 255, 0) 66%);
  background-size: 250% 100%;
  animation: cloud-art-shimmer 1.4s ease-in-out infinite;
}

.cloud-card .card-thumb img.thumb-loading {
  visibility: hidden;
}

@keyframes cloud-art-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-card .card-thumb .thumb-skeleton {
    display: none;
  }
}

/*[data-mirror-hide] Elements flagged with this never render on static mirror
  hosts (surge.sh, GitHub Pages, jsDelivr): the runtime sets it at boot when
  ChalkleApi.isMirror() is true, because whatever it gates has no data there
  (the viewer pill counts sessions on the relay, which mirrors cannot reach). */
html[data-mirror] [data-mirror-hide] { display: none !important; }