/* === Nino — Indigo Aurora === */

/* Smooth same-origin page navigations. The left nav is a multi-page app (each
   link is a full document load); without this the browser hard-cuts between
   documents and shows a blank inter-page frame (the "flash"). Cross-document
   View Transitions cross-fade the old → new page instead. Unsupported browsers
   (e.g. Firefox today) just navigate normally — graceful, no regression. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

:root {
  --bg: #fafbff;
  --bg-elev: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.72);
  /* OPAQUE so the sidebar looks identical on every page. It used to be
     translucent (rgba white) over a backdrop-blur, which let each page's own
     body background-gradient bleed through — giving the rail a cyan tint on the
     legacy-CSS pages (Browse / AI Search) and an indigo tint everywhere else.
     A constant opaque fill removes the bleed-through entirely. Value ≈ the
     indigo-glass look most pages already showed. */
  --bg-sidebar: #eef0fb;
  --bg-subtle: #f5f7ff;

  /* Darkened for WCAG AA: white text on --primary now ~5.3:1 (was ~4.0:1 and
     failed). Hover steps one shade darker so it still reads as a hover. */
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-soft: #eef2ff;
  --primary-text-on-soft: #4338ca;

  --text: #0f172a;
  /* Darkened for WCAG AA: muted ~7.5:1, quiet ~5.8:1 on white (were 4.6 / 2.8). */
  --text-muted: #4b5563;
  --text-quiet: #5b6678;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-soft: #eef1f6;

  --tiktok-bg: #fce7f3;
  --tiktok-fg: #be185d;
  --facebook-bg: #dbeafe;
  --facebook-fg: #1d4ed8;

  --success: #10b981;
  --success-soft: #d1fae5;
  --danger:  #ef4444;
  --warn:    #f59e0b;
  --warn-soft: #fef3c7;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
  --shadow:    0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(99,102,241,0.06);
  --shadow-lg: 0 2px 4px rgba(15,23,42,0.04), 0 16px 40px rgba(99,102,241,0.10);

  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 16px; --r-3xl: 20px; --r-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
}

* { box-sizing: border-box; }

/* Visually-hidden but screen-reader-readable (page-level headings, labels). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Brand focus ring for keyboard users (brand.md: 2px accent). Only shows for
   keyboard navigation (:focus-visible), never on mouse click. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* App-wide styled tooltip (driven by ui.js — reads data-tip / title / aria-label
   on any control). Replaces the slow, unstyled native title tooltip. */
.nino-tooltip {
  position: fixed; z-index: 9999; top: 0; left: 0;
  max-width: 260px;
  background: #0f172a; color: #fff;
  padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 6px 20px rgba(15,23,42,0.28);
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.nino-tooltip.show { opacity: 1; transform: translateY(0); }

html, body {
  margin: 0; padding: 0;
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(at 18% -2%,   rgba(99,102,241,0.16) 0%, transparent 55%),
    radial-gradient(at 88% 6%,    rgba(236,72,153,0.10) 0%, transparent 55%),
    radial-gradient(at 50% 38%,   rgba(139,92,246,0.08) 0%, transparent 60%),
    radial-gradient(at 92% 96%,   rgba(6,182,212,0.10)  0%, transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* === Layout shell === */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

/* === Sidebar === */
/* width pinned with !important so library + ai-search (which still import
   legacy /style.css with its 260px sidebar rule) don't end up wider than the
   grid track. */
/* Style #sidebar (the always-present element) as well as .sidebar (the class
   the JS adds once it renders), so the panel is fully styled at first paint and
   doesn't flash blank → styled on every page navigation. */
#sidebar, .sidebar {
  position: sticky; top: 0;
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: 100vh;
  /* Opaque, constant fill (see --bg-sidebar). No backdrop-filter: it was only
     blurring the per-page body gradient behind the translucent rail, which is
     exactly what made the tint differ between sections. */
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  padding: 18px 12px 12px;
  gap: var(--s-4);
  overflow: hidden;            /* brand + footer stay put; the middle scrolls */
}
/* The brand (top) and the footer (Credits/Upgrade/Settings/Help/profile) are
   PINNED and always visible; only the nav list between them scrolls when the
   window is too short to fit everything. */
.brand { flex-shrink: 0; }
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;               /* lets the flex child actually scroll */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column;
  gap: 12px;                   /* was 16px — tighter group spacing (nav-density pass) */
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.sidebar-scroll::-webkit-scrollbar { width: 7px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-strong, rgba(100,116,139,.4)); border-radius: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 12px;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.brand-name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.brand-name span { color: var(--primary); }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-quiet);
  padding: 8px 10px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;               /* was 7px — denser rows so the nav fits a 900px laptop */
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 13.5px; font-weight: 500;
  transition: background 120ms, color 120ms;
  cursor: pointer;
  border: none; background: transparent;
  width: 100%; text-align: left;
  position: relative;
  white-space: nowrap;
}
.nav-item svg { flex-shrink: 0; }
.nav-item > .lbl { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);
}
/* "Featured" (AI Search) is emphasised via a primary tint + the AI badge —
   NOT a filled background, so it never reads as the currently-selected page.
   The filled background + left bar are reserved for .active (current page). */
.nav-item.featured {
  background: transparent;
  color: var(--primary);
  font-weight: 600;
}
.nav-item.featured svg { color: var(--primary); }
.nav-item.featured:hover { background: var(--primary-soft); }
/* When a featured item is ALSO the current page (soft-nav adds .active on top of
   the persisted .featured node), the selected look must win over the featured
   tint — otherwise it reads as "featured", not "selected". */
.nav-item.featured.active { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.nav-item .badge {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
}
.nav-item .count {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--text-quiet);
  background: var(--border-soft);
  padding: 1px 7px;
  border-radius: var(--r-pill);
}
/* Honest "coming soon": visible but clearly not clickable-to-a-real-page —
   quiet text, dimmed icon, no hover tint, never .active. */
.nav-item.soon { color: var(--text-quiet); cursor: default; }
.nav-item.soon svg { opacity: .55; }
.nav-item.soon:hover { background: transparent; color: var(--text-quiet); }
.nav-item .soon-pill {
  margin-left: auto; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--text-quiet); background: transparent;
  border: 1px solid var(--border-strong);
  padding: 1px 6px; border-radius: var(--r-pill); text-transform: uppercase;
}

.sidebar-foot {
  flex-shrink: 0;             /* pinned + always fully visible */
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 6px;
}
.credits-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.credits-card .label {
  font-size: 11px; color: var(--text-muted); font-weight: 500;
}
.credits-card .value {
  font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em;
}
.credits-card .progress {
  height: 4px; border-radius: var(--r-pill); background: var(--border-soft); margin-top: 4px; overflow: hidden;
}
.credits-card .progress > div {
  height: 100%; background: linear-gradient(90deg, var(--primary), #8b5cf6); border-radius: inherit;
}
.credits-card .meta {
  font-size: 10.5px; color: var(--text-quiet); margin-top: 2px;
}
.upgrade-btn {
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff; border: none;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

.user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.user-row:hover { background: var(--primary-soft); }
.avatar {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-plan { font-size: 11px; color: var(--text-muted); }

/* Compact footer (nav redesign): one-line credits card + a single row holding
   the user chip and icon-only Settings/Help — frees ~110px of rail height. */
.credits-card.compact { padding: 8px 12px; gap: 6px; }
.credits-card.compact .row1 { display: flex; align-items: baseline; justify-content: space-between; }
.credits-card.compact .value { font-size: 13px; }
.credits-card.compact .progress { margin-top: 0; }
.foot-row { display: flex; align-items: center; gap: 4px; }
.foot-row .user-row { flex: 1; min-width: 0; padding: 5px 6px; }
.foot-row .user-name, .foot-row .user-plan { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--text-quiet); border-radius: var(--r-sm);
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary-text-on-soft); }

/* === Top bar === */
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 28px;
  display: flex; align-items: center; gap: 16px;
}
.crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted);
}
.crumbs strong { color: var(--text); font-weight: 600; }
.crumbs svg { color: var(--text-quiet); }

.topbar-spacer { flex: 1; }

.search-shortcut {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  min-width: 220px;
}
.search-shortcut kbd {
  margin-left: auto;
  background: var(--border-soft);
  color: var(--text-muted);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  font-size: 11px; font-family: inherit; font-weight: 600;
}
.search-shortcut:hover { border-color: var(--primary); color: var(--text); }
/* The ⌘K hint is meaningless on a touch device with no keyboard — hide it on mobile. */
@media (max-width: 768px) { .search-shortcut kbd { display: none; } }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.icon-btn .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg-elev);
}

/* === Page === */
.page {
  display: flex; flex-direction: column;
  min-width: 0;
}
.page-body {
  padding: 28px 32px 80px;
  display: flex; flex-direction: column;
  gap: 28px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

.h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0;
}
.h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
}
.h3 {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
.muted { color: var(--text-muted); }
.quiet { color: var(--text-quiet); }

/* === Cards === */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.card.hover:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  transition: transform 160ms, box-shadow 160ms;
}

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms;
}
.btn-primary {
  background: var(--primary); color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text-on-soft); }

/* === Chips === */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
  background: var(--border-soft);
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid transparent;
}
.chip:hover { background: var(--primary-soft); color: var(--primary-text-on-soft); }
.chip.active {
  background: var(--primary-soft);
  color: var(--primary-text-on-soft);
  font-weight: 600;
  border-color: rgba(99,102,241,0.25);
}
.chip.tiktok { background: var(--tiktok-bg); color: var(--tiktok-fg); }
.chip.facebook { background: var(--facebook-bg); color: var(--facebook-fg); }

/* === Top banner promo === */
.promo {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #be185d 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
}
.promo strong { font-weight: 700; }
.promo .promo-tag {
  background: rgba(255,255,255,0.18);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.promo a {
  margin-left: auto;
  background: #fff;
  color: var(--primary-hover);
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-weight: 600; font-size: 12.5px;
}

/* === Sparkle === */
.sparkle {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
}

/* === Ad card === */
.nino-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 160ms, box-shadow 160ms;
  cursor: pointer;
  position: relative;
}
.nino-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.nino-thumb {
  aspect-ratio: 9 / 16;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  position: relative;
  overflow: hidden;
}
.nino-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.nino-thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,0.9);
}
.nino-thumb .play svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); }
.nino-thumb .platform-badge {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  color: #fff;
}
.nino-thumb .platform-badge.tiktok { background: rgba(0,0,0,0.7); }
.nino-thumb .platform-badge.facebook { background: rgba(24,119,242,0.92); }
.nino-thumb .status-dot {
  position: absolute; top: 10px; left: 10px;
  width: 10px; height: 10px; border-radius: var(--r-pill);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45);
}
.nino-thumb .status-dot.match { background: var(--success); }
.nino-thumb .status-dot.no-match { background: var(--danger); }
.nino-thumb .duration {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nino-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.nino-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nino-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.nino-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.nino-stat { display: flex; flex-direction: column; gap: 1px; }
.nino-stat .label { font-size: 10px; color: var(--text-quiet); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.nino-stat .value { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.nino-actions {
  display: flex; gap: 4px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.nino-action {
  flex: 1;
  background: transparent; border: none;
  padding: 6px 4px;
  font-size: 11.5px; font-weight: 500; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nino-action:hover { background: var(--primary-soft); color: var(--primary-text-on-soft); }

/* === Empty states === */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === Utility === */
.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-ads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }

/* === Toast === */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--text); color: #fff;
  padding: 12px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 500;
  display: none;
  z-index: 99;
  animation: slideUp 200ms ease-out;
}
.toast.show { display: flex; align-items: center; gap: 8px; }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === Sidebar collapse === */
.sidebar-collapse-btn {
  margin-left: auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.sidebar-collapse-btn:hover { color: var(--primary); border-color: var(--primary); }

/* Collapsed sidebar → 64px ICON RAIL (nav redesign 2026-07-09; replaces the old
   vanish-to-0px + floating expand button). Labels/badges/pills hide, icons stay
   centered, tooltips (data-tip via ui.js) name the items, and the rail's own
   collapse button — chevron flipped — expands it back. Desktop only: the ≤820px
   mobile drawer below is a separate mechanism and must not inherit rail sizing.
   The same localStorage key ('sidebar-collapsed') carries users' preference over. */
@media (min-width: 821px) {
  html.sidebar-collapsed .app { grid-template-columns: 64px 1fr; }
  html.sidebar-collapsed #sidebar,
  html.sidebar-collapsed .sidebar {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 18px 10px 12px;
  }
  html.sidebar-collapsed .brand { flex-direction: column; gap: 8px; justify-content: center; padding: 4px 0 12px; }
  html.sidebar-collapsed .brand-name,
  html.sidebar-collapsed .nav-label,
  html.sidebar-collapsed .nav-item .lbl,
  html.sidebar-collapsed .nav-item .badge,
  html.sidebar-collapsed .nav-item .count,
  html.sidebar-collapsed .nav-item .soon-pill,
  html.sidebar-collapsed .credits-card .meta,
  html.sidebar-collapsed .credits-card .row1 .label,
  html.sidebar-collapsed .credits-card .progress,
  html.sidebar-collapsed .user-meta,
  html.sidebar-collapsed .upgrade-btn .lbl { display: none; }
  html.sidebar-collapsed .sidebar-collapse-btn { margin: 0; }
  html.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
  html.sidebar-collapsed .nav-item { justify-content: center; padding: 9px 0; }
  html.sidebar-collapsed .nav-group { gap: 4px; }
  html.sidebar-collapsed .credits-card { padding: 8px; align-items: center; }
  html.sidebar-collapsed .credits-card .row1 { justify-content: center; }
  html.sidebar-collapsed .credits-card .value { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  html.sidebar-collapsed .upgrade-btn { padding: 8px; }
  html.sidebar-collapsed .user-row { justify-content: center; padding: 6px 0; }
  html.sidebar-collapsed .foot-row { flex-direction: column; gap: 2px; }
}

/* === Dark theme === */
[data-theme="dark"] {
  --bg: #0b1020;
  --bg-elev: #131a30;
  --bg-glass: rgba(19, 26, 48, 0.78);
  --bg-sidebar: #121a31;   /* opaque, page-independent (see light-mode note) */
  --bg-subtle: #161e38;

  --primary: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-soft: rgba(99,102,241,0.16);
  --primary-text-on-soft: #c7d2fe;

  --text: #e6e9f5;
  --text-muted: #aab4c5;
  /* Lightened for AA on the dark background (quiet was #6b7493 ≈ 3.9:1). */
  --text-quiet: #8b98ab;

  --border: #2a3252;
  --border-strong: #3b446a;
  --border-soft: #1e2747;

  --tiktok-bg: rgba(190,24,93,0.18);
  --tiktok-fg: #f9a8d4;
  --facebook-bg: rgba(29,78,216,0.18);
  --facebook-fg: #93c5fd;

  --success-soft: rgba(16,185,129,0.16);
  --warn-soft: rgba(245,158,11,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow:    0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.55);
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(at 18% -2%,   rgba(99,102,241,0.20) 0%, transparent 55%),
    radial-gradient(at 88% 6%,    rgba(236,72,153,0.10) 0%, transparent 55%),
    radial-gradient(at 50% 38%,   rgba(139,92,246,0.10) 0%, transparent 60%),
    radial-gradient(at 92% 96%,   rgba(6,182,212,0.10)  0%, transparent 55%);
}

/* === Sample / example data — must be unmistakable, never read as live data ===
   A bold amber banner above sample lists, plus a dimmed look + corner tag on
   each sample card. Used by Collections, Alerts (and any future sample state). */
.sample-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--warn-soft);
  color: #92400e;
  border: 1px solid var(--warn);
  border-left: 5px solid var(--warn);
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  margin-bottom: 16px;
}
.sample-banner::before {
  content: 'EXAMPLE';
  flex: 0 0 auto;
  background: var(--warn); color: #ffffff;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: var(--r-pill);
}
.sample-card { opacity: 0.72; position: relative; }
.sample-card::after {
  content: 'Example';
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--warn); color: #ffffff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: var(--r-pill);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* === Mobile drawer shell ===========================================
   Desktop-first app: above the breakpoint the hamburger + overlay are
   hidden and the sidebar is the normal fixed column. At ≤820px the
   sidebar becomes an off-canvas drawer toggled by .mobile-nav-toggle
   (injected by /mobile-nav.js) via body.nav-open. */
.mobile-nav-toggle, .sidebar-overlay { display: none; }

@media (max-width: 820px) {
  html, body { overflow-x: hidden; max-width: 100%; }

  .app { grid-template-columns: 1fr !important; }

  /* Sidebar slides in from the left; out of flow so content gets full width. */
  #sidebar, .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(15,23,42,0.18);
  }
  body.nav-open #sidebar, body.nav-open .sidebar { transform: translateX(0); }

  .sidebar-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    z-index: 250;
  }
  body.nav-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* Hamburger — fixed top-left, above content. */
  .mobile-nav-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px;
    width: 40px; height: 40px;
    z-index: 260;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }

  /* Give page content room for the hamburger and let it shrink. */
  .app > main, .app > .page, .app > .main, main.page, main.main { min-width: 0; }
  .topbar { padding-left: 56px; }
}