/* ============================================================
   Reel Radar — signal-room UI
   Dark by default, light on request, one accent system throughout.
   ============================================================ */

:root {
  /* Clone Labs palette: violet, indigo, lilac, white and grey */
  --accent:   #661AFF;
  --accent-2: #9B7BFF;
  --accent-3: #4C5BE6;
  --hot:      #D93A4A;
  --warm:     #E08A12;
  --cool:     #12A07F;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --rail-w: 268px;

  --f-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-logo: "Quicksand", "Figtree", sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);

  font-synthesis: none;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:        #0C0E2E;
  --bg-2:      #141742;
  --surface:   rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);
  --solid:     #161A4A;
  --line:      rgba(220, 211, 255, .12);
  --line-2:    rgba(220, 211, 255, .07);
  --ink:       #F5F3FF;
  --ink-2:     #CBC6E6;
  --muted:     #8F92B5;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 18px 46px -12px rgba(5,6,30,.7);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --glow:      0 0 0 1px rgba(155,123,255,.4), 0 10px 40px -10px rgba(102,26,255,.55);
  --aurora-op: .3;
  --grain-op:  .03;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #F7F5FD;
  --bg-2:      #EFEBFF;
  --surface:   #FFFFFF;
  --surface-2: #F6F4FC;
  --solid:     #FFFFFF;
  --line:      #E2E2EE;
  --line-2:    #ECEBF5;
  --ink:       #1A1C33;
  --ink-2:     #4A4D63;
  --muted:     #8B8EA6;
  --shadow:    0 1px 2px rgba(20,23,66,.05), 0 14px 36px -16px rgba(20,23,66,.28);
  --shadow-sm: 0 2px 8px rgba(20,23,66,.07);
  --glow:      0 0 0 1px rgba(102,26,255,.25), 0 12px 32px -14px rgba(102,26,255,.45);
  --aurora-op: .16;
  --grain-op:  .015;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* html paints the base colour; body stays transparent so the aurora shows through. */
html { background: var(--bg); }
body { background: transparent; overflow-x: hidden; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
code { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: #fff; }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg:not(.ic):not(.chart):not(.ring):not(.spark) { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.muted { color: var(--muted); }
.warn  { color: var(--hot); }
.small { font-size: 12px; }

/* ---------------- ambient background ---------------- */

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, var(--bg-2), var(--bg) 60%); }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--aurora-op); }
.aurora .b1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle, var(--accent), transparent 68%); animation: drift1 26s var(--ease) infinite alternate; }
.aurora .b2 { width: 40vw; height: 40vw; right: -6vw; top: 8vh; background: radial-gradient(circle, var(--accent-2), transparent 68%); animation: drift2 32s var(--ease) infinite alternate; }
.aurora .b3 { width: 34vw; height: 34vw; left: 26vw; bottom: -24vw; background: radial-gradient(circle, var(--accent-3), transparent 70%); opacity: calc(var(--aurora-op) * .7); animation: drift3 38s var(--ease) infinite alternate; }
.aurora .grain {
  position: absolute; inset: -50%; opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift1 { to { transform: translate(6vw, 8vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-7vw, 12vh) scale(1.1); } }
@keyframes drift3 { to { transform: translate(4vw, -8vh) scale(1.2); } }

/* ---------------- shell ---------------- */

.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 901px) {
  body.rail-collapsed { --rail-w: 76px; }
}

.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 14px 14px;
  background: color-mix(in oklab, var(--solid) 72%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid var(--line);
  overflow: hidden auto;
  scrollbar-width: thin;
  z-index: 20;
  transition: width .24s var(--ease);
}

.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  position: relative; width: 32px; height: 32px; border-radius: 11px; flex: none;
  background: conic-gradient(from 210deg, var(--accent-2), var(--accent), var(--accent-3), var(--accent-2));
  display: grid; place-items: center;
  box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--accent) 70%, transparent);
}
.brand-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 8px; background: var(--solid); }
.brand-mark i {
  position: absolute; inset: 4px; border-radius: 8px; overflow: hidden;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--accent-3) 75%, transparent) 40deg, transparent 70deg);
  animation: sweep 3.4s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.brand-sub { font-size: 11px; color: var(--muted); }

.rail-collapse { transition: transform .24s var(--ease); }
@media (min-width: 901px) {
  body.rail-collapsed .rail-collapse { transform: rotate(180deg); }
  body.rail-collapsed .brand-text,
  body.rail-collapsed .nav-label,
  body.rail-collapsed .rail-heading,
  body.rail-collapsed .add-form input,
  body.rail-collapsed .add-form .at,
  body.rail-collapsed .competitor-meta,
  body.rail-collapsed .competitor-spark,
  body.rail-collapsed .competitor .icon-btn,
  body.rail-collapsed .key-warning,
  body.rail-collapsed .theme-label,
  body.rail-collapsed .chip-btn span,
  body.rail-collapsed .rail-empty { display: none; }
  body.rail-collapsed .competitor { justify-content: center; padding: 8px; }
  body.rail-collapsed .nav-item { justify-content: center; }
  body.rail-collapsed .add-form { justify-content: center; }
  body.rail-collapsed .rail-foot-row { flex-direction: column; }
}

/* nav */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 600; font-size: 13.5px;
  position: relative; transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item .ic { font-size: 17px; opacity: .85; }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.on { color: var(--ink); background: color-mix(in oklab, var(--accent) 16%, transparent); }
.nav-item.on::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.nav-item.on .ic { opacity: 1; color: var(--accent); }
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: #fff;
}

/* competitor list */
.rail-section { display: flex; flex-direction: column; gap: 9px; min-height: 0; flex: 1; }
.rail-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 0 6px;
}
.count-pill { background: var(--surface-2); border-radius: 999px; padding: 1px 7px; font-size: 10.5px; letter-spacing: 0; }

.add-form {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 2px 4px 2px 9px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.add-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); background: var(--surface-2); }
.add-form .at { color: var(--muted); font-weight: 600; }
.add-form input { flex: 1; min-width: 0; border: none; outline: none; background: none; padding: 8px 0; font-size: 13px; }
.add-go { color: var(--accent); }

.competitor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.rail-empty { font-size: 12px; color: var(--muted); padding: 10px 8px; line-height: 1.5; }
.competitor {
  display: flex; align-items: center; gap: 10px; padding: 8px 9px;
  border-radius: var(--r-sm); cursor: pointer; position: relative;
  border: 1px solid transparent;
  transition: background .14s var(--ease), border-color .14s;
}
.competitor:hover { background: var(--surface); }
.competitor.on { background: color-mix(in oklab, var(--accent) 14%, transparent); border-color: color-mix(in oklab, var(--accent) 28%, transparent); }
.competitor-av, .avatar, .hero-avatar {
  display: grid; place-items: center; border-radius: 50%; flex: none;
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.competitor-av { width: 30px; height: 30px; font-size: 11px; }
.avatar { font-size: 11px; }
.competitor-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.competitor-handle { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.competitor-note { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.competitor-note.warn { color: var(--hot); }
.competitor-spark { flex: none; width: 44px; height: 18px; opacity: .55; }
.competitor .icon-btn.tiny { opacity: 0; font-size: 13px; padding: 4px; }
.competitor:hover .icon-btn.tiny { opacity: .55; }
.competitor .icon-btn.tiny:hover { opacity: 1; color: var(--hot); }
.competitor.busy { background: color-mix(in oklab, var(--warm) 12%, transparent); }

.mini-spinner, .spinner {
  border-radius: 50%; flex: none;
  border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.mini-spinner { width: 9px; height: 9px; border-width: 1.5px; }
.spinner { width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.rail-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.key-warning {
  display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--warm); background: color-mix(in oklab, var(--warm) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--warm) 28%, transparent);
  border-radius: var(--r-sm); padding: 9px 10px;
}
.key-warning .ic { font-size: 14px; margin-top: 1px; }
.rail-foot-row { display: flex; gap: 6px; }
.chip-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600;
  transition: color .14s, border-color .14s, background .14s;
}
.chip-btn:hover { color: var(--ink); background: var(--surface); border-color: var(--accent); }
:root[data-theme="dark"] .ic-sun, :root[data-theme="light"] .ic-moon { display: none; }

/* ---------------- content ---------------- */

.content { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 26px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.crumb-view { font-weight: 700; letter-spacing: -.01em; }
.crumb-sep { color: var(--muted); }
.crumb-sub { color: var(--muted); }
.crumb-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; color: var(--ink-2);
}
.crumb-chip:hover { border-color: var(--hot); color: var(--hot); }

.omni {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  min-width: 260px; max-width: 420px; flex: 1;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 12.5px; text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.omni:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--glow); color: var(--ink-2); }
.omni span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.omni kbd, kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 5px; background: var(--surface-2); color: var(--muted);
}
.topbar-actions { display: flex; gap: 4px; }

.main { padding: 24px 26px 96px; max-width: 1360px; width: 100%; margin-inline: auto; }
.view { display: flex; flex-direction: column; gap: 18px; animation: viewIn .28s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- buttons & inputs ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 13px; font-weight: 650;
  transition: background .14s, border-color .14s, color .14s, transform .08s var(--spring), box-shadow .14s;
}
.btn:hover { background: var(--surface-2); color: var(--ink); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ic { font-size: 15px; }
.btn-solid {
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent-2) 55%, var(--accent)));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px -8px color-mix(in oklab, var(--accent) 85%, transparent);
}
.btn-solid:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 10px 30px -8px color-mix(in oklab, var(--accent) 90%, transparent); }

.icon-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; color: var(--muted); font-size: 16px;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s, transform .12s var(--spring);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.tiny { width: 26px; height: 26px; font-size: 13px; }
.icon-btn.star.on { color: var(--warm); }
.icon-btn.star.on .ic { fill: color-mix(in oklab, var(--warm) 45%, transparent); }

.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 12.5px; font-weight: 650; padding: 4px 0;
}
.ghost-btn:hover { text-decoration: underline; }
.link-btn { color: var(--accent); font-size: inherit; text-align: left; }
.link-btn:hover { text-decoration: underline; }

.input, .select {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 9px; padding: 8px 11px; font-size: 12.5px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
.select { appearance: none; padding-right: 26px; cursor: pointer; }
.select-wrap { position: relative; display: inline-flex; align-items: center; gap: 0; }
.select-wrap > .ic { position: absolute; left: 10px; font-size: 14px; color: var(--muted); pointer-events: none; }
.select-wrap .select { padding-left: 30px; }

.inline-search { position: relative; display: flex; align-items: center; }
.inline-search .ic { position: absolute; left: 10px; font-size: 14px; color: var(--muted); pointer-events: none; }
.inline-search input {
  border: 1px solid var(--line); background: var(--surface); border-radius: 9px;
  padding: 8px 11px 8px 30px; font-size: 12.5px; outline: none; width: 200px;
  transition: width .2s var(--ease), border-color .15s, box-shadow .15s;
}
.inline-search input:focus { width: 260px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); }
.seg.tight { padding: 2px; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: background .14s, color .14s;
}
.seg-btn:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
.seg-btn.on { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
.seg-btn:disabled { opacity: .4; cursor: not-allowed; }
.seg-count { font-size: 10.5px; font-weight: 700; opacity: .6; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
  background: var(--solid); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .14s, transform .14s var(--spring);
}
.menu.in { opacity: 1; transform: none; }
.menu-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2); text-align: left;
}
.menu-item:hover { background: var(--surface-2); color: var(--ink); }
.menu-item .ic { font-size: 15px; color: var(--muted); }

/* ---------------- cards & sections ---------------- */

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.card-grid { display: grid; gap: 18px; }
.card-grid.two { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }

.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2 { font-size: 15.5px; font-weight: 750; }
.section-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; max-width: 62ch; }
.section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ghost-card { display: flex; align-items: center; gap: 14px; color: var(--muted); border-style: dashed; }
.ghost-card .ic { font-size: 26px; color: var(--accent); }

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 62px 28px; border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--muted);
}
.empty-mark {
  width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 24px;
  background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent);
  box-shadow: var(--glow);
}
.empty h2 { color: var(--ink); font-size: 17px; }
.empty p { max-width: 50ch; line-height: 1.6; font-size: 13.5px; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

/* ---------------- hero ---------------- */

.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface) 55%);
  box-shadow: var(--shadow-sm);
}
.hero-glow { position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 40%, transparent), transparent 66%); pointer-events: none; }
.hero-id { display: flex; align-items: center; gap: 15px; min-width: 0; flex: 1; }
.hero-avatar { width: 56px; height: 56px; font-size: 20px; }
.hero-text { min-width: 0; }
.hero-text h1 { font-size: 22px; font-weight: 820; letter-spacing: -.025em; }
.hero-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.hero-sub .sep { opacity: .5; }
.hero-spark { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10.5px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 8px; }
.hero-note { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--warm); }

/* ---------------- refresh progress ---------------- */

.progress-panel {
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
  border-radius: var(--r); padding: 15px 18px; background: var(--surface);
  display: flex; flex-direction: column; gap: 11px;
}
.progress-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.progress-since { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-track { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  background-size: 200% 100%; animation: slide 2s linear infinite;
  transition: width .5s var(--ease);
}
@keyframes slide { to { background-position: -200% 0; } }
.progress-steps { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); }
.pstep { display: flex; align-items: center; gap: 6px; }
.pstep::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.pstep.on { color: var(--ink-2); }
.pstep.on::before { background: var(--accent); }
.pstep.current::before { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(1.4); } }

/* ---------------- stat tiles ---------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden;
  padding: 14px 15px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  transition: transform .18s var(--spring), border-color .18s, box-shadow .18s;
}
.tile:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-sm); }
.tile::after { content: ""; position: absolute; inset: auto -30% -70% auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%); opacity: .5; pointer-events: none; }
.tile-hot::after { background: radial-gradient(circle, color-mix(in oklab, var(--hot) 26%, transparent), transparent 70%); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile-label { font-size: 11px; font-weight: 650; color: var(--muted); letter-spacing: .02em; }
.tile-ic { font-size: 14px; color: var(--accent); opacity: .8; }
.tile-value { font-size: 23px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile-value.words { text-transform: capitalize; font-size: 19px; }
.tile-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---------------- insight row ---------------- */

.insight-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.insight {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r); font-size: 12.5px; line-height: 1.5;
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border: 1px solid var(--line-2); color: var(--ink-2);
}
.insight .ic { font-size: 16px; color: var(--accent); margin-top: 1px; }
.insight b { color: var(--ink); font-weight: 700; }

/* ---------------- toolbar ---------------- */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: -6px; }

/* ---------------- reel cards ---------------- */

.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.reel-grid.as-list { grid-template-columns: 1fr; }

.reel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-sm); cursor: pointer;
  animation: cardIn .4s var(--ease) backwards; animation-delay: var(--stagger, 0ms);
  transition: transform .2s var(--spring), border-color .2s, box-shadow .2s;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.reel:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.reel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reel.spotlight { grid-column: 1 / -1; flex-direction: row; }
.reel.spotlight .reel-thumb { width: 216px; flex: none; aspect-ratio: auto; }
.reel.spotlight .reel-body { padding: 20px 22px; }
.reel.compact { flex-direction: row; }
.reel.compact .reel-thumb { width: 104px; flex: none; aspect-ratio: auto; }
.reel.compact .reel-caption { -webkit-line-clamp: 2; }

.thumb {
  position: relative; overflow: hidden; background: var(--bg-2);
  display: grid; place-items: center;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-fallback { background: var(--seed, linear-gradient(135deg, var(--accent), var(--accent-3))); }
.thumb-fallback::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 60%); }
.reel-thumb { aspect-ratio: 9 / 15; }
.thumb-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,4,10,.55), transparent 45%); pointer-events: none; }
.thumb-play {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff;
  opacity: 0; transition: opacity .2s var(--ease), transform .25s var(--spring); transform: scale(.85);
  text-shadow: 0 4px 16px rgba(0,0,0,.6); pointer-events: none;
}
.thumb-play .ic { fill: currentColor; stroke: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.reel:hover .thumb-play { opacity: .95; transform: scale(1); }

.rank {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  background: rgba(8,8,16,.72); color: #fff; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
}
.rank.gold { background: linear-gradient(135deg, var(--warm), var(--hot)); border-color: transparent; }
.badge-breakout {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--hot), var(--warm)); color: #fff;
  box-shadow: 0 4px 14px -4px var(--hot);
}
.badge-breakout .ic { font-size: 11px; }
.badge-dur {
  position: absolute; bottom: 9px; right: 9px; z-index: 2;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: rgba(8,8,16,.7); color: #fff; backdrop-filter: blur(4px); font-variant-numeric: tabular-nums;
}

.reel-body { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px 14px; flex: 1; min-width: 0; }
.reel-creator { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.reel-caption {
  font-size: 12.8px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.reel.spotlight .reel-caption { -webkit-line-clamp: 4; font-size: 14px; }

.reel-metrics { display: flex; gap: 14px; flex-wrap: wrap; }
.metric { display: flex; align-items: baseline; gap: 5px; font-size: 12px; }
.metric-ic { font-size: 12px; color: var(--muted); align-self: center; }
.metric-v { font-weight: 750; font-variant-numeric: tabular-nums; }
.metric-k { font-size: 10.5px; color: var(--muted); }

.reel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.vir { display: flex; align-items: center; gap: 10px; }
.vir-meta { display: flex; flex-direction: column; line-height: 1.35; }
.vir-meta b { font-size: 12.5px; font-weight: 750; }
.vir-meta span { font-size: 10.5px; color: var(--muted); text-transform: capitalize; }
.vir.muted .vir-meta b { color: var(--muted); font-weight: 600; }
.dot-idle { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--line); flex: none; }
.reel-quick { display: flex; gap: 2px; }

.hook-strip {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  padding: 11px 13px; border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border-left: 2px solid var(--accent);
}
.hook-tag {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent);
  padding: 2px 7px; border-radius: 5px; margin-right: 7px;
}
.win-chips { display: flex; flex-direction: column; gap: 6px; }
.win-chip {
  display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; color: var(--ink-2);
  padding: 7px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-2);
}
.win-chip .ic { font-size: 13px; color: var(--cool); flex: none; margin-top: 1px; }

.reel-when { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--muted); }
.reel-when .ic { font-size: 12px; }
.reel-tagcount { margin-left: auto; }
.card-note {
  display: flex; gap: 7px; font-size: 11.5px; color: var(--muted); line-height: 1.5;
  padding: 9px 10px; border-radius: 9px; background: var(--surface-2); border: 1px dashed var(--line);
}

/* skeletons */
.reel.skeleton { pointer-events: none; }
.sk { background: linear-gradient(90deg, var(--surface-2), var(--line-2), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; }
.sk-thumb { aspect-ratio: 9/15; border-radius: 0; }
.sk-line { height: 11px; }
.sk-line.short { width: 55%; }
.sk-row { height: 30px; margin-top: auto; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- charts ---------------- */

.chart-box { position: relative; width: 100%; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-area, .chart-scatter { height: 230px; }
.grid-line { stroke: var(--line-2); stroke-width: 1; }
.axis-label { fill: var(--muted); font-size: 10px; font-family: inherit; }
.chart-line { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--solid); stroke: var(--accent); stroke-width: 2; transition: r .15s var(--spring); }
.chart-dot:hover { r: 7; }
.chart-dot.hot { fill: var(--hot); stroke: var(--hot); }
.chart-dot.clickable, .scatter-dot.clickable, .clickable { cursor: pointer; }
.scatter-dot { fill: color-mix(in oklab, var(--accent) 70%, transparent); stroke: var(--accent); stroke-width: 1.2; transition: r .15s var(--spring); }
.scatter-dot:hover { r: 9; fill: var(--accent); }
.trend-line { stroke: var(--accent-2); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .75; }

.chart-tip {
  position: absolute; z-index: 30; transform: translate(-50%, -100%);
  background: var(--solid); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 10px; font-size: 11.5px; line-height: 1.45; pointer-events: none;
  box-shadow: var(--shadow); white-space: nowrap;
}
.chart-tip b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.chart-tip span { color: var(--muted); }
.chart-empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed var(--line); border-radius: var(--r); }
.chart-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.chart-foot .ic { font-size: 14px; color: var(--accent); flex: none; }
.chart-foot b { color: var(--ink); }

.spark { display: block; overflow: visible; max-width: 100%; }
.spark-empty { display: inline-block; width: 44px; height: 18px; }

/* bars */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row.clickable:hover .bar-label { color: var(--accent); }
.bar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.bar-track { height: 9px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar-fill {
  display: block; height: 100%; border-radius: 99px; width: var(--w);
  background: linear-gradient(90deg, color-mix(in oklab, var(--bar, var(--accent)) 60%, transparent), var(--bar, var(--accent)));
  animation: barIn .7s var(--ease) backwards; animation-delay: var(--d, 0ms);
}
@keyframes barIn { from { width: 0; } }
.bar-value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.bar-sub { grid-column: 2 / -1; font-size: 10.5px; color: var(--muted); margin-top: -4px; }

/* heatmap */
.heat-box { overflow-x: auto; padding-bottom: 4px; }
.heat { display: flex; flex-direction: column; gap: 3px; min-width: 520px; }
.heat-row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 3px; align-items: center; }
.heat-day { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.heat-hour { font-size: 9px; color: var(--muted); text-align: center; }
.heat-cell {
  aspect-ratio: 1; border-radius: 3px; background: var(--surface-2);
  transition: transform .12s var(--spring), box-shadow .12s;
}
.heat-cell.on {
  background: color-mix(in oklab, var(--accent) calc(var(--i) * 100%), transparent);
  cursor: pointer;
}
.heat-cell.on:hover { transform: scale(1.3); box-shadow: 0 0 0 1px var(--accent); z-index: 2; }

/* radar */
.chart-radar { max-width: 340px; }
.radar-ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar-spoke { stroke: var(--line-2); stroke-width: 1; }
.radar-axis { fill: var(--muted); font-size: 10.5px; font-weight: 600; font-family: inherit; }
.radar-shape {
  fill: color-mix(in oklab, var(--c) 22%, transparent); stroke: var(--c); stroke-width: 2; stroke-linejoin: round;
  animation: radarIn .6s var(--ease) backwards; animation-delay: var(--d, 0ms); transform-origin: center;
}
@keyframes radarIn { from { opacity: 0; transform: scale(.7); } }

/* ring gauge */
.ring { flex: none; }
.ring-track { stroke: var(--line-2); }
.ring-value { animation: ringIn .9s var(--ease) backwards; }
@keyframes ringIn { from { stroke-dashoffset: var(--circ); } }
.ring-text { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: inherit; font-variant-numeric: tabular-nums; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.chart-donut { width: 170px; height: 170px; flex: none; }
.donut-slice { animation: fadeIn .5s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes fadeIn { from { opacity: 0; } }
.donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 180px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-row i, .legend-item i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-label { text-transform: capitalize; color: var(--ink-2); }
.legend-val { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-direction: column; gap: 6px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }

/* factor grid */
.factor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.factor-card { padding: 13px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.factor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.factor-head b { font-size: 12.5px; text-transform: capitalize; }
.factor-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.factor-bar { height: 4px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.factor-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.factor-card p { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------------- tables ---------------- */

.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  text-align: left; font-weight: 650; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; line-height: 1.5; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr.clickable:hover { background: var(--surface-2); }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.data-table .num.best { color: var(--cool); font-weight: 750; }
.cell-id { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.data-table.cmp td:first-child { color: var(--muted); }
.cmp-col { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink-2); }
.cmp-col::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--c); }

/* ---------------- drawer ---------------- */

.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4, 4, 10, .6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s var(--ease); }
.scrim.in { opacity: 1; }
.modal-root { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; pointer-events: none; }
.modal-root.in .drawer { transform: none; opacity: 1; }
.drawer {
  pointer-events: auto; width: min(560px, 100%); height: 100%;
  background: var(--solid); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; box-shadow: -30px 0 70px -30px rgba(0,0,0,.7);
  transform: translateX(28px); opacity: 0; transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.drawer-loading { display: flex; align-items: center; gap: 10px; padding: 26px; color: var(--muted); font-size: 13px; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drawer-id > div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.drawer-id b { font-size: 13.5px; }
.drawer-id span { font-size: 11.5px; color: var(--muted); }
.drawer-head-actions { display: flex; gap: 2px; }
.drawer-body { overflow-y: auto; padding: 18px 20px 60px; display: flex; flex-direction: column; gap: 22px; scrollbar-width: thin; }

.drawer-media { display: flex; flex-direction: column; gap: 14px; }
.player { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg-2); aspect-ratio: 9/14; max-height: 360px; display: grid; place-items: center; }
.player-thumb { position: absolute; inset: 0; }
.player-video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r); background: #000; }
.player-note { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 7px 10px; font-size: 10.5px; color: rgba(255,255,255,.8); background: linear-gradient(transparent, rgba(0,0,0,.8)); pointer-events: none; }

.drawer-headline { display: flex; flex-direction: column; gap: 14px; }
.drawer-score { display: flex; align-items: center; gap: 13px; }
.drawer-score b { display: block; font-size: 15px; font-weight: 780; }
.drawer-score span { font-size: 11.5px; color: var(--muted); }
.drawer-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.big-metric { padding: 10px 12px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line-2); }
.big-metric b { display: block; font-size: 16px; font-weight: 780; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.big-metric span { font-size: 10.5px; color: var(--muted); }

.d-block { display: flex; flex-direction: column; gap: 9px; }
.d-block h3 { font-size: 12px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: baseline; gap: 9px; }
.d-sub { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: .8; }
.prose { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.caption-text { white-space: pre-wrap; max-height: 230px; overflow-y: auto; padding-right: 6px; }

.hook-quote {
  margin: 0; padding: 13px 15px; border-radius: var(--r);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-left: 3px solid var(--accent); font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.kv { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--muted); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.kv dd { margin: 0; color: var(--ink-2); line-height: 1.55; }

.factors { display: flex; flex-direction: column; gap: 9px; }
.factor { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 12.8px; line-height: 1.55; color: var(--ink-2); }
.impact { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.impact.high { background: color-mix(in oklab, var(--hot) 18%, transparent); color: var(--hot); }
.impact.medium, .impact.med { background: color-mix(in oklab, var(--warm) 18%, transparent); color: var(--warm); }
.impact.low { background: color-mix(in oklab, var(--cool) 18%, transparent); color: var(--cool); }

.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bullets li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.bullets li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bullets.steal li::before { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }

.transcript {
  display: none; font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
  max-height: 260px; overflow-y: auto; padding: 13px 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); white-space: pre-wrap;
}
.transcript.open { display: block; animation: viewIn .22s var(--ease); }

.notes {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 11px 13px; font-size: 13px; line-height: 1.6; resize: vertical; outline: none; min-height: 84px;
  transition: border-color .15s, box-shadow .15s;
}
.notes:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.notes-state { font-size: 11px; color: var(--muted); }

.cost-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.cost-note { font-size: 11.5px; color: var(--muted); }
.cost-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--warm); background: color-mix(in oklab, var(--warm) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--warm) 30%, transparent);
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .14s, color .14s, transform .14s var(--spring), background .14s;
}
.tag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.tag-cloud.big { gap: 8px; align-items: center; }
.cloud-tag {
  font-size: var(--size, 1rem); padding: 5px 12px; display: inline-flex; align-items: baseline; gap: 6px;
  background: color-mix(in oklab, var(--accent) calc(var(--heat, .2) * 26%), var(--surface-2));
  border-color: color-mix(in oklab, var(--accent) calc(var(--heat, .2) * 45%), var(--line));
}
.cloud-tag.word { background: color-mix(in oklab, var(--accent-3) calc(var(--heat, .2) * 24%), var(--surface-2)); }
.tag-n { font-size: .68em; opacity: .55; font-variant-numeric: tabular-nums; }

/* ---------------- library ---------------- */

.hook-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.hook-card {
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  padding: 15px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2);
  animation: cardIn .4s var(--ease) backwards; animation-delay: var(--stagger, 0ms);
  transition: transform .18s var(--spring), border-color .18s, box-shadow .18s;
}
.hook-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.hook-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hook-card blockquote { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.hook-why { font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.hook-rate { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--warm); }
.hook-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--line-2); }
.hook-src { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hook-src span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hook-stats { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.hook-stats .ic { font-size: 12px; }
.hook-score { color: var(--accent); font-weight: 700; }

.play-list { display: flex; flex-direction: column; gap: 4px; }
.play {
  display: flex; align-items: flex-start; gap: 13px; padding: 13px 12px; border-radius: var(--r);
  animation: cardIn .35s var(--ease) backwards; animation-delay: var(--stagger, 0ms);
  transition: background .14s;
}
.play:hover { background: var(--surface-2); }
.play + .play { border-top: 1px solid var(--line-2); }
.play-num { font-size: 12px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 1px; }
.play-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.play-body p { font-size: 13.2px; line-height: 1.55; color: var(--ink-2); }
.play-src { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.play-rep { font-size: 10.5px; font-weight: 700; color: var(--accent-2); background: color-mix(in oklab, var(--accent-2) 14%, transparent); padding: 2px 8px; border-radius: 999px; }
.play-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted);
  padding: 2px 8px 2px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.play-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- compare ---------------- */

.scope-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scope-note { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-left: auto; }
.scope-note .ic { font-size: 13px; }

.pick-scroll { max-height: 430px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; margin-right: -4px; }
.pick-group { margin-bottom: 14px; }
.pick-group .pick-head { position: sticky; top: 0; z-index: 2; padding: 7px 0; margin-bottom: 4px; background: var(--solid); }
.pick-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.pick-count { font-size: 10.5px; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: 999px; }
.pick-row {
  display: flex; align-items: center; gap: 11px; padding: 7px 11px 7px 9px; margin-bottom: 5px;
  border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; background: var(--surface);
  transition: border-color .14s, background .14s, transform .12s var(--spring);
}
.pick-row:hover { background: var(--surface-2); transform: translateX(2px); }
.pick-row.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.pick-row input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.pick-thumb { width: 34px; height: 44px; border-radius: 7px; flex: none; }
.pick-cap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-cap b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-cap span { font-size: 10.5px; color: var(--muted); }
.pick-metrics { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-metrics > span { display: inline-flex; align-items: center; gap: 4px; }
.pick-vir { font-weight: 800; color: var(--accent); }
.pick-raw { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }

.verdict-local {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border-radius: var(--r);
  background: linear-gradient(135deg, color-mix(in oklab, var(--hot) 12%, var(--surface-2)), var(--surface-2));
  border: 1px solid color-mix(in oklab, var(--hot) 25%, var(--line)); margin-bottom: 18px;
}
.verdict-local .ic { font-size: 20px; color: var(--hot); flex: none; }
.verdict-local b { display: block; font-size: 14px; margin-bottom: 3px; }
.verdict-local span { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

.radar-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.radar-side { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 12px; }

.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.cmp-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface-2); border-top: 3px solid var(--c); }
.cmp-card-head { display: flex; gap: 11px; padding: 12px; cursor: pointer; align-items: center; }
.cmp-card-head:hover { background: var(--surface); }
.cmp-card-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-card-head b { font-size: 12.5px; }
.cmp-card-head span { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-thumb { width: 42px; height: 56px; border-radius: 8px; flex: none; }
.cmp-card-body { padding: 0 13px 14px; display: flex; flex-direction: column; gap: 12px; }
.cmp-field h5 { font-size: 10.5px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; display: flex; gap: 8px; align-items: baseline; }
.cmp-field h5 span { text-transform: capitalize; letter-spacing: 0; font-weight: 600; color: var(--accent); }
.cmp-field p { font-size: 12.3px; line-height: 1.55; color: var(--ink-2); }

.ai-card { border-color: color-mix(in oklab, var(--warm) 25%, var(--line)); }
.ai-out { margin-top: 16px; }
.ai-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 16px 0; }
.ai-result { display: flex; flex-direction: column; gap: 18px; }
.verdict { display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--r); background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); }
.verdict .ic { font-size: 19px; color: var(--accent); flex: none; }
.verdict p { font-size: 13.5px; line-height: 1.6; }
.ai-block h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 9px; }
.rank-row { display: flex; align-items: baseline; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; line-height: 1.55; }
.rank-row:last-child { border-bottom: none; }
.rank-num { font-weight: 800; color: var(--accent); }

.tray {
  position: sticky; bottom: 16px; z-index: 12; align-self: center;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--solid) 92%, transparent); border: 1px solid var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
  animation: trayIn .3s var(--spring);
}
@keyframes trayIn { from { opacity: 0; transform: translateY(14px); } }
.tray-label { font-size: 12px; font-weight: 700; color: var(--muted); padding-left: 6px; }
.tray-items { display: flex; gap: 6px; }
.tray-item { position: relative; border-radius: 8px; overflow: hidden; }
.tray-thumb { width: 30px; height: 40px; border-radius: 8px; }
.tray-x { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,8,16,.6); color: #fff; font-size: 11px; opacity: 0; transition: opacity .14s; }
.tray-item:hover .tray-x { opacity: 1; }

/* ---------------- swipe ---------------- */

.swipe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.saved-hooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.saved-hook {
  margin: 0; padding: 14px 15px; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .14s, transform .16s var(--spring);
}
.saved-hook:hover { border-color: var(--accent); transform: translateY(-2px); }
.saved-hook cite { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; color: var(--muted); }
.note-list { display: flex; flex-direction: column; gap: 8px; }
.note-row { display: flex; gap: 12px; padding: 11px; border-radius: var(--r); cursor: pointer; transition: background .14s; }
.note-row:hover { background: var(--surface-2); }
.note-row > div { min-width: 0; }
.note-row b { font-size: 12.5px; }
.note-row p { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.note-thumb { width: 40px; height: 52px; border-radius: 8px; flex: none; }

/* ---------------- command palette ---------------- */

.palette-root { position: fixed; inset: 0; z-index: 90; opacity: 0; transition: opacity .16s var(--ease); }
.palette-root.in { opacity: 1; }
.palette-shell { position: absolute; inset: 0; background: rgba(4,4,10,.55); backdrop-filter: blur(4px); display: flex; justify-content: center; padding: 12vh 20px 20px; }
.palette {
  width: min(620px, 100%); max-height: 62vh; display: flex; flex-direction: column;
  background: var(--solid); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.65), var(--glow); overflow: hidden;
  transform: translateY(-10px) scale(.985); transition: transform .2s var(--spring);
}
.palette-root.in .palette { transform: none; }
.palette-top { display: flex; align-items: center; gap: 11px; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.palette-top .ic { font-size: 18px; color: var(--accent); }
.palette-input { flex: 1; border: none; outline: none; background: none; font-size: 15px; font-weight: 500; }
.palette-input::placeholder { color: var(--muted); }
.palette-list { overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.palette-group { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 5px; }
.palette-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 10px; color: var(--ink-2);
}
.palette-item.on { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--ink); }
.palette-ic { font-size: 16px; color: var(--muted); }
.palette-item.on .palette-ic { color: var(--accent); }
.palette-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette-label b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-label span { font-size: 11px; color: var(--muted); }
.palette-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.palette-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.palette-hint { display: flex; align-items: center; gap: 14px; padding: 9px 15px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.palette-hint span { display: inline-flex; align-items: center; gap: 5px; }
.palette-free { margin-left: auto; color: var(--cool); }

/* ---------------- help sheet ---------------- */

.help-sheet { position: fixed; inset: 0; z-index: 95; background: rgba(4,4,10,.6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .18s var(--ease); }
.help-sheet.in { opacity: 1; }
.help-panel {
  width: min(760px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--solid); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: var(--shadow); transform: scale(.97); transition: transform .2s var(--spring);
}
.help-sheet.in .help-panel { transform: none; }
.help-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.help-panel h2 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
.help-panel h2 .ic { color: var(--accent); }
.help-panel h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 18px 0 10px; }
.help-panel h3:first-child { margin-top: 0; }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.keys { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 14px; align-items: baseline; }
.keys dt { display: flex; gap: 4px; align-items: center; }
.key-sep { color: var(--muted); font-size: 11px; }
.keys dd { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* ---------------- toasts ---------------- */

.toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px);
  padding: 11px 13px 11px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
  background: var(--solid); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .22s var(--ease), transform .22s var(--spring);
}
.toast.in { opacity: 1; transform: none; }
.toast-ic { font-size: 16px; color: var(--cool); flex: none; }
.toast.err { border-color: color-mix(in oklab, var(--hot) 45%, var(--line)); }
.toast.err .toast-ic { color: var(--hot); }
.toast-x { color: var(--muted); font-size: 11px; padding: 2px 4px; }
.toast-x:hover { color: var(--ink); }

/* ---------------- responsive ---------------- */

@media (max-width: 1100px) {
  .reel.spotlight { flex-direction: column; }
  .reel.spotlight .reel-thumb { width: 100%; aspect-ratio: 16/9; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .rail {
    position: fixed; left: 0; top: 0; width: 280px; z-index: 80;
    transform: translateX(-100%); transition: transform .26s var(--ease);
    background: var(--solid);
  }
  body.rail-open .rail { transform: none; box-shadow: var(--shadow); }
  body.rail-open .scrim { display: block; }
  .only-desktop { display: none; }
  .main { padding: 18px 16px 90px; }
  .topbar { padding: 11px 16px; gap: 9px; }
  .omni span, .omni kbd { display: none; }
  .omni { min-width: 0; width: 38px; flex: none; justify-content: center; padding: 8px; }
  .crumbs { flex: 1; }
  .drawer { width: 100%; }
  .drawer-metrics { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; border-radius: var(--r); }
  .card-grid.two { grid-template-columns: 1fr; }
  .reel-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .inline-search input, .inline-search input:focus { width: 150px; }
  .toolbar { gap: 8px; }
  .seg { overflow-x: auto; max-width: 100%; }
}
@media (min-width: 901px) { .only-mobile { display: none; } }

@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 16px; }
  .hero-text h1 { font-size: 18px; }
  .hero-spark { display: none; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .reel-grid { grid-template-columns: 1fr 1fr; }
  .reel-metrics { gap: 9px; }
  .metric-k { display: none; }
}

/* ---------------- print ---------------- */

@media print {
  .aurora, .rail, .topbar, .tray, .toast-stack, .reel-quick, .toolbar, .scope-bar, .hero-actions { display: none !important; }
  body, .app { background: #fff; color: #000; display: block; }
  .main { padding: 0; max-width: none; }
  .card, .reel, .tile, .hero { break-inside: avoid; box-shadow: none; border-color: #ddd; background: #fff; }
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- motion preferences ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .aurora .blob { animation: none; }
}


/* =================================================================
   Clone Labs look
   ================================================================= */
h1, h2, h3, h4, .brand-name, .hero-name, .view-title, .tile-value { font-family: var(--f-display); letter-spacing: -.02em; }
a.brand { color: inherit; text-decoration: none; }
a.brand:hover { text-decoration: none; }
.brand-mark.cl { background: linear-gradient(135deg, #661AFF, #2C3479); box-shadow: 0 8px 22px -8px rgba(102,26,255,.8); }
.brand-mark.cl::after, .brand-mark.cl i { display: none; }
.brand-mark.cl svg { position: relative; z-index: 1; }
.brand-sub { color: var(--accent-2); font-weight: 600; }
:root[data-theme="light"] .brand-sub { color: var(--accent); }

/* account box in the sidebar */
.account { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 10px; }
.acct-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #661AFF, #2C3479); color: #fff; font-weight: 800; font-size: 13px; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; }
.acct-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.acct-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-txt small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 901px) {
  body.rail-collapsed .acct-txt { display: none; }
}

/* sign-in screen */
body.gated .app, body.gated .aurora { display: none; }
body.gated { background: #141742; }
.gate { position: relative; min-height: 100vh; overflow: hidden; color: rgba(255,255,255,.78); font-family: var(--f-body);
  background: radial-gradient(800px 480px at 85% -10%, rgba(102,26,255,.55), transparent 70%), radial-gradient(700px 500px at -5% 110%, rgba(58,68,160,.6), transparent 70%), #141742; }
.gate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); pointer-events: none; }
.gate-top { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px); }
.gate-logo { display: inline-flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; line-height: 1; }
.gate-logo:hover { text-decoration: none; }
.logo-word { font-family: var(--f-logo); font-weight: 700; font-size: 28px; letter-spacing: -.02em; white-space: nowrap; }
.logo-flask { display: inline-block; width: .6em !important; height: .95em !important; margin: 0 .02em; overflow: visible; vertical-align: baseline; }
.logo-flask .glass { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.logo-flask .liquid, .logo-flask .bubble { fill: #9B7BFF; stroke: none; }
.logo-sub { font-family: var(--f-logo); font-weight: 600; font-size: 11px; letter-spacing: .32em; padding-left: .32em; margin-top: 2px; color: #DCD3FF; }
.gate-back { color: rgba(255,255,255,.75); font-weight: 600; }
.gate-back:hover { color: #fff; text-decoration: none; }
.gate-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 40px) 80px; }
.gate-kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: #9B7BFF; margin-bottom: 16px; }
.gate-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(155,123,255,.2); }
.gate h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; margin-bottom: 18px; }
.gate h1 em { font-style: normal; background: linear-gradient(90deg, #B79CFF, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; max-width: 56ch; }
.gate-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.gate-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.gate-list li > span { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(155,123,255,.18); color: #C9B8FF; font-weight: 800; font-family: var(--f-display); }
.gate-list b { display: block; color: #fff; font-weight: 600; }
.gate-card { position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 28px; background: #fff; color: #1A1C33; text-align: center; box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); }
.gate-card h2 { font-size: 1.6rem; margin: 18px 0 6px; color: #1A1C33; }
.gate-card > p { color: #4A4D63; margin: 0 0 18px; }
.gbtn { display: flex; justify-content: center; min-height: 44px; }
.gate-err { color: #A02232; background: #FDE8EA; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 14px 0 0 !important; }
.gate-fine { font-size: 12.5px; color: #8B8EA6 !important; margin: 18px 0 0 !important; }
.gate-fine a { color: #661AFF; font-weight: 600; }
.gate-radar { position: relative; width: 120px; height: 120px; margin: 4px auto 0; border-radius: 50%; background: radial-gradient(circle, #F4F0FF 0 60%, transparent 61%); }
.gate-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #DCD3FF; }
.gate-radar i:nth-child(2) { inset: 20px; } .gate-radar i:nth-child(3) { inset: 40px; background: #661AFF; border-color: #661AFF; box-shadow: 0 0 24px rgba(102,26,255,.6); }
.gate-radar b { position: absolute; left: 50%; top: 50%; width: 50%; height: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, #661AFF, transparent); animation: sweep 3s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .gate-in { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gate-radar b { animation: none; } }

/* Start-up: show nothing but a small loader until we know if you're signed in */
.boot-loader { display: none; }
body.booting .app, body.booting .gate, body.booting .aurora { display: none !important; }
body.booting .boot-loader { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; gap: 12px; font: 600 15px var(--font-body, Figtree, sans-serif); color: #6B6E8A; background: var(--bg, #F7F5FD); }
.boot-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #E3DAFF; border-top-color: #661AFF; animation: bootspin .8s linear infinite; }
@keyframes bootspin { to { transform: rotate(360deg); } }

/* Login + paid access (gate card) */
.gate-login { display: grid; gap: 10px; text-align: left; }
.gate-login label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #4A4D63; }
.gate-login input { font: 500 15px var(--font-body, Figtree, sans-serif); padding: 12px 14px; border-radius: 12px; border: 1.5px solid #E2E2EE; background: #fff; color: #1A1C33; outline: none; }
.gate-login input:focus { border-color: #661AFF; box-shadow: 0 0 0 4px rgba(102,26,255,.12); }
.gate-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border-radius: 999px; border: 0; background: #661AFF; color: #fff; font: 700 15px var(--font-body, Figtree, sans-serif); cursor: pointer; text-decoration: none; margin-top: 4px; transition: background .2s, transform .2s; }
.gate-btn:hover { background: #5512E0; transform: translateY(-1px); }
.gate-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.gate-btn-buy { background: #fff; color: #661AFF; border: 1.5px solid #661AFF; }
.gate-btn-buy:hover { background: #F4F0FF; }
.gate-or { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; font-size: 13px; color: #8B8EA6; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: #E2E2EE; }
.gate-prices { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; font-size: 13.5px; color: #4A4D63; border: 1px solid #EEEAF8; border-radius: 14px; overflow: hidden; }
.gate-prices li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.gate-prices li + li { border-top: 1px solid #EEEAF8; }
.gate-prices b { color: #1A1C33; white-space: nowrap; }

/* Balance in the account box + history */
.acct-recharge { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent, #661AFF); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.acct-recharge + .acct-recharge { margin-left: 10px; }
.acct-low small { color: #C62828 !important; font-weight: 700; }
.ledger-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12,14,46,.55); padding: 16px; }
.ledger-box { width: min(560px, 100%); max-height: min(80vh, 720px); overflow: auto; background: var(--solid, #fff); color: var(--ink, #1A1C33); border-radius: 22px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.ledger-box h3 { margin: 0 0 4px; font-size: 1.25rem; }
.ledger-box .lb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ledger-box .lb-bal { font-size: 1.6rem; font-weight: 800; }
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line, #E2E2EE); font-size: 14px; }
.ledger-list small { color: var(--muted, #8B8EA6); }
.ledger-list .amt { font-weight: 700; text-align: right; }
.ledger-list .amt.plus { color: #1B7F3B; }
.ledger-list .bal { text-align: right; }
.toast a { color: inherit; font-weight: 700; margin-left: 6px; }

/* ============ Landing page (shown when logged out) ============ */
body.lp-on .app, body.lp-on .aurora, body.lp-on #toast-stack { display: none !important; }
body.lp-on { background: #F7F5FD; color: #1A1C33; overflow-x: hidden; }
.lp { --v: #661AFF; --ink: #1A1C33; --gr: #4A4D63; --st: #8B8EA6; --ln: #E6E4F0; font-family: var(--f-body); color: #1A1C33; line-height: 1.55; }
.lp a { color: inherit; }
.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.lp-hdr { position: sticky; top: 0; z-index: 30; transition: background .3s, box-shadow .3s; }
.lp-hdr.solid { background: rgba(12,14,46,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(220,211,255,.1); }
.lp-hdr .lp-wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px; }
.lp-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: #fff !important; text-decoration: none; }
.lp-logo .logo-word { font-family: var(--f-logo); font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.lp-logo .logo-flask { display: inline-block; width: .6em; height: .95em; margin: 0 .02em; overflow: visible; vertical-align: baseline; }
.lp-logo .glass { fill: none; stroke: currentColor; stroke-width: 9; stroke-linecap: round; }
.lp-logo .liquid, .lp-logo .bubble { fill: #9B7BFF; }
.lp-logo .logo-sub { font-family: var(--f-logo); font-weight: 600; font-size: 10.5px; letter-spacing: .32em; padding-left: .32em; margin-top: 2px; color: #DCD3FF; }
.lp-hdr nav { display: flex; align-items: center; gap: 4px; }
.lp-hdr nav a { color: #DCD3FF !important; text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: 999px; }
.lp-hdr nav a:hover { color: #fff !important; background: rgba(155,123,255,.16); }
.lp-hdr nav .lp-cta { background: linear-gradient(135deg, #7A33FF, #5512E0); color: #fff !important; margin-left: 6px; }
@media (max-width: 640px) { .lp-hide-sm { display: none; } .lp-hdr nav a { padding: 8px 10px; } }

.lp-hero { position: relative; overflow: hidden; margin-top: -74px; padding: 140px 0 100px; color: #fff; background: radial-gradient(900px 520px at 80% 20%, rgba(102,26,255,.45), transparent 62%), radial-gradient(700px 500px at 0% 100%, rgba(224,71,91,.22), transparent 60%), linear-gradient(180deg, #0C0E2E, #141742 70%, #191C52); }
.lp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(220,211,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(220,211,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); pointer-events: none; }
.lp-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(155,123,255,.14); border: 1px solid rgba(155,123,255,.35); font-size: 14px; font-weight: 600; color: #E5DDFF; }
.lp-pill b { background: linear-gradient(135deg, #FF7A8A, #E0475B); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.lp-hero h1 { font-family: var(--f-display); font-size: clamp(2.5rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -.035em; margin: 20px 0; color: #fff; }
.lp-hero h1 em { font-style: normal; background: linear-gradient(100deg, #FFB3BC, #C9B8FF 55%, #9B7BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #CBC6E6; margin: 0; max-width: 560px; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font: 700 16px var(--f-body); text-decoration: none; border: 1.5px solid transparent; transition: transform .2s, background .2s; }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn svg { width: 18px; height: 18px; }
.lp-btn-glow { background: linear-gradient(135deg, #7A33FF, #5512E0); color: #fff !important; box-shadow: 0 20px 50px -18px rgba(122,51,255,.95); }
.lp-btn-ghost { color: #fff !important; border-color: rgba(220,211,255,.35); background: rgba(255,255,255,.04); }
.lp-note { margin: 22px 0 0; font-size: 14px; color: #A9A3CC; }
.lp-art { position: relative; padding: 18px; border-radius: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(220,211,255,.14); box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); }
.lp-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-reel { border-radius: 14px; overflow: hidden; background: #fff; color: #1A1C33; animation: lpbob 6s ease-in-out infinite; }
.lp-reel:nth-child(2) { animation-delay: -2s; } .lp-reel:nth-child(3) { animation-delay: -4s; }
.lp-reel .th { height: 140px; position: relative; background: linear-gradient(160deg, #6A3CFF, #2C3479); }
.lp-reel:nth-child(2) .th { background: linear-gradient(160deg, #FF7A8A, #7A2BFF); }
.lp-reel:nth-child(3) .th { background: linear-gradient(160deg, #22C1A7, #2C3479); }
.lp-reel .th::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-left: 16px solid rgba(255,255,255,.9); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.lp-reel .th span { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; background: rgba(0,0,0,.45); color: #fff; padding: 3px 7px; border-radius: 999px; }
.lp-reel .meta { padding: 9px 10px; font-size: 12px; }
.lp-reel .meta b { display: block; font-size: 12.5px; }
.lp-reel .vs { display: inline-block; margin-top: 4px; font-weight: 800; color: #1B7F3B; background: #E7F6EC; border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.lp-panel { margin-top: 12px; border-radius: 16px; background: #fff; color: #1A1C33; padding: 14px 16px; }
.lp-panel small { color: #661AFF; font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.lp-panel ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: #4A4D63; }
.lp-panel li b { color: #1A1C33; margin-right: 6px; }
.lp-float { position: absolute; right: -18px; top: -26px; width: 190px; border-radius: 16px; background: #fff; color: #1A1C33; padding: 12px 14px; box-shadow: 0 30px 60px -25px rgba(0,0,0,.65); animation: lpbob 7s ease-in-out infinite; }
.lp-float small { display: block; color: #8B8EA6; font-weight: 700; font-size: 11px; }
.lp-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 8px; }
.lp-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #9B7BFF, #661AFF); }
.lp-bars i.hot { background: linear-gradient(180deg, #FF9AA8, #E0475B); }
@keyframes lpbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 960px) { .lp-hero-in { grid-template-columns: 1fr; } .lp-float { right: 0; } }
@media (max-width: 520px) { .lp-reel .th { height: 100px; } .lp-float { display: none; } }

.lp-sec { padding: clamp(64px, 8vw, 110px) 0; }
.lp-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.lp-eyebrow { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #661AFF; margin-bottom: 12px; }
.lp h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.07; letter-spacing: -.03em; margin: 0 0 14px; }
.lp-head p, .lp-sub { color: #4A4D63; font-size: 1.08rem; margin: 0; }
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-card { background: #fff; border: 1px solid #E6E4F0; border-radius: 22px; padding: 26px; transition: transform .25s, box-shadow .25s; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(20,23,66,.5); }
.lp-card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #661AFF, #E0475B); color: #fff; margin-bottom: 16px; }
.lp-card .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lp-card h3 { font-family: var(--f-display); font-size: 1.2rem; margin: 0 0 6px; }
.lp-card p { margin: 0; color: #4A4D63; }
@media (max-width: 860px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-dark { background: linear-gradient(180deg, #0C0E2E, #141742); color: #fff; }
.lp-dark .lp-eyebrow { color: #9B7BFF; }
.lp-dark .lp-sub { color: #CBC6E6; }
.lp-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-list li { padding: 18px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(220,211,255,.12); }
.lp-list b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.lp-list span { color: #CBC6E6; font-size: 14.5px; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lp-list { grid-template-columns: 1fr; } }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-steps li { background: #fff; border: 1px solid #E6E4F0; border-radius: 20px; padding: 22px; }
.lp-steps span { font-family: var(--f-display); font-size: 2.6rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #661AFF, rgba(102,26,255,.2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-steps h3 { font-family: var(--f-display); font-size: 1.1rem; margin: 10px 0 6px; }
.lp-steps p { margin: 0; color: #4A4D63; font-size: 15px; }
@media (max-width: 900px) { .lp-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.lp-faq details { background: #fff; border: 1px solid #E6E4F0; border-radius: 18px; padding: 18px 20px; }
.lp-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: #661AFF; font-size: 1.4rem; line-height: 1; }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq p { margin: 10px 0 0; color: #4A4D63; }
.lp-faq a { color: #661AFF; font-weight: 600; }
.lp-final { text-align: center; padding: clamp(46px, 7vw, 80px) 24px; border-radius: 32px; color: #fff; background: radial-gradient(700px 400px at 50% 0%, rgba(224,71,91,.35), transparent 60%), linear-gradient(160deg, #2C1A8F, #141742 60%, #0C0E2E); box-shadow: 0 50px 100px -50px rgba(102,26,255,.8); }
.lp-final h2 { color: #fff; max-width: 720px; margin-left: auto; margin-right: auto; }
.lp-final p { color: #CBC6E6; margin: 0 auto; max-width: 560px; }
.lp-final .lp-ctas { justify-content: center; }
.lp-foot { text-align: center; color: #8B8EA6; font-size: 14px; padding: 10px 16px 40px; }
.lp-foot a { color: #8B8EA6 !important; font-weight: 600; margin: 0 6px; }
@media (prefers-reduced-motion: reduce) { .lp-reel, .lp-float { animation: none; } }


/* =================================================================
   Phone and tablet experience
   Bigger type and tap targets, a bottom tab bar, a proper slide-in
   menu, single-column cards and charts that fit the screen.
   ================================================================= */
.tabbar { display: none; }
.card-grid > * { min-width: 0; }

@media (max-width: 900px) {
  html, body { font-size: 15.5px; }
  body { -webkit-tap-highlight-color: transparent; }
  .app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

  /* --- slide-in menu --- */
  .rail { width: min(86vw, 330px); height: 100dvh; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); gap: 18px; border-right: 1px solid var(--line); }
  .rail-top { padding: 0; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 12.5px; }
  .rail-collapse { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; }
  .nav { gap: 4px; }
  .nav-item { padding: 12px 12px; font-size: 15.5px; border-radius: 12px; min-height: 48px; }
  .nav-item .ic { font-size: 20px; }
  .nav-item.on::before { left: -16px; height: 22px; }
  .rail-heading { font-size: 12px; padding: 0 4px; }
  .count-pill { font-size: 12px; padding: 2px 9px; }
  .add-form { border-radius: 12px; padding: 3px 4px 3px 12px; }
  .add-form input { font-size: 16px; padding: 10px 0; }
  .add-go { width: 40px; height: 40px; }
  .competitor-list { gap: 4px; }
  .competitor { padding: 10px; border-radius: 12px; min-height: 56px; }
  .competitor-av { width: 36px; height: 36px; font-size: 12.5px; }
  .competitor-handle { font-size: 15px; }
  .competitor-note { font-size: 12.5px; }
  .competitor .icon-btn.tiny { opacity: .55; width: 36px; height: 36px; font-size: 15px; }
  .rail-empty { font-size: 14px; }
  .account { padding: 12px; border-radius: 14px; }
  .acct-av { width: 40px; height: 40px; font-size: 14px; }
  .acct-txt b { font-size: 15px; }
  .acct-txt small { font-size: 13px; }
  .acct-recharge { font-size: 13.5px; }
  .key-warning { font-size: 13px; }
  .chip-btn { padding: 12px; font-size: 14px; border-radius: 12px; }
  #help-btn { display: none; }

  /* --- top bar --- */
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; gap: 6px; }
  .crumbs { flex: 1; min-width: 0; gap: 6px; font-size: 14px; flex-wrap: nowrap; }
  .crumb-view { font-family: var(--f-display); font-size: 17.5px; font-weight: 750; white-space: nowrap; }
  .crumb-sep { display: none; }
  .crumb-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
  .crumb-chip { font-size: 13px; padding: 4px 10px; flex: none; max-width: 40%; overflow: hidden; }
  .icon-btn { width: 42px; height: 42px; font-size: 19px; border-radius: 12px; }
  .omni { width: 42px; height: 42px; padding: 0; border-radius: 12px; font-size: 18px; }
  .topbar-actions { gap: 2px; }

  /* --- bottom tab bar --- */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--solid) 90%, transparent);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -18px rgba(20,23,66,.35);
  }
  body.rail-open .tabbar { visibility: hidden; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; min-height: 54px; justify-content: center; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; border-radius: 14px; }
  .tab-ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; font-size: 21px; transition: background .2s var(--ease), color .2s var(--ease); }
  .tab:active .tab-ic { transform: scale(.94); }
  .tab.on { color: var(--ink); }
  .tab.on .tab-ic { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
  .tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tab .nav-badge { position: absolute; top: -3px; right: 4px; margin: 0; font-size: 10px; line-height: 16px; padding: 0 5px; min-width: 16px; text-align: center; }
  .toast-stack { bottom: calc(84px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .toast { width: 100%; font-size: 14px; }
  .tray { bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 100%; }

  /* --- page --- */
  .main { padding: 14px 14px 28px; }
  .view { gap: 14px; }
  .card { padding: 16px; border-radius: 18px; }
  .card-grid, .card-grid.two { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .section-head { margin-bottom: 12px; gap: 10px; }
  .section-head h2 { font-size: 17.5px; }
  .section-head p { font-size: 13.5px; }
  .section-actions { width: 100%; }
  .empty { padding: 40px 18px; }
  .empty h2 { font-size: 19px; }
  .empty p { font-size: 14.5px; }
  .pill { font-size: 12px; }

  /* --- buttons and inputs (16px stops phones zooming in) --- */
  .btn { padding: 11px 16px; font-size: 14.5px; border-radius: 12px; min-height: 44px; justify-content: center; }
  .ghost-btn { font-size: 14px; padding: 8px 0; }
  .input, .select, .inline-search input, .palette-input, .notes, textarea, input[type="text"], input[type="search"] { font-size: 16px; }
  .input, .select { padding: 11px 12px; border-radius: 12px; }
  .select { padding-right: 30px; }
  .select-wrap { flex: 1; }
  .select-wrap .select { padding-left: 34px; width: 100%; }
  .inline-search { flex: 1 1 100%; }
  .inline-search input, .inline-search input:focus { width: 100%; padding: 11px 12px 11px 36px; border-radius: 12px; }
  .seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 13px; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex: none; padding: 9px 13px; font-size: 14px; border-radius: 10px; white-space: nowrap; min-height: 40px; }
  .seg-count { font-size: 12px; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar > * { max-width: 100%; }
  .toolbar-right { width: 100%; flex-wrap: wrap; gap: 8px; }
  .toolbar-right > .select-wrap, .toolbar-right > .menu-wrap { flex: 1 1 auto; }
  .grid-meta { font-size: 13px; margin-top: 0; }
  .scope-bar { gap: 8px; }
  .scope-note { margin-left: 0; font-size: 12.5px; }
  .menu { min-width: 230px; }
  .menu-item { padding: 12px; font-size: 14.5px; }

  /* --- hero, tiles and insights --- */
  .hero { padding: 16px; gap: 14px; }
  .hero-avatar { width: 52px; height: 52px; font-size: 18px; }
  .hero-text h1 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
  .hero-sub { font-size: 13px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-solid { flex: 1; }
  .hero-note { font-size: 13px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 13px 14px; }
  .tile:hover { transform: none; }
  .tile-label { font-size: 12.5px; }
  .tile-ic { font-size: 15px; }
  .tile-value { font-size: 24px; }
  .tile-value.words { font-size: 19px; overflow-wrap: anywhere; }
  .tile-sub { font-size: 12px; }
  .insight-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .insight { font-size: 14px; padding: 13px 14px; }
  .progress-panel { padding: 14px; }
  .progress-head { font-size: 14px; }
  .progress-steps { flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; }

  /* --- charts --- */
  .chart-area, .chart-scatter { height: 220px; }
  .axis-label { font-size: 11px; }
  .chart-foot { font-size: 13px; align-items: flex-start; }
  .chart-tip { font-size: 12.5px; }
  .heat-box { overflow: visible; }
  .heat { min-width: 0; gap: 2px; }
  .heat-row { grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .heat-day { font-size: 11.5px; }
  .heat-hour { font-size: 10px; white-space: nowrap; overflow: visible; }
  .heat-cell { border-radius: 2px; }
  .bars { gap: 12px; }
  .bar-row { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; font-size: 14px; }
  .bar-value { font-size: 14px; }
  .bar-sub { font-size: 12px; }
  .donut-wrap { justify-content: center; }
  .donut-legend { min-width: 100%; }
  .legend-row { font-size: 14px; }
  .legend-val { font-size: 12.5px; }
  .factor-grid { grid-template-columns: minmax(0, 1fr); }
  .factor-head b { font-size: 14.5px; }
  .factor-count { font-size: 12.5px; }
  .factor-card p { font-size: 13.5px; }
  .factor { font-size: 14px; }
  .impact { font-size: 11.5px; }
  .data-table { font-size: 13.5px; }
  .data-table td, .data-table th { padding: 10px 8px; }

  /* --- reel detail sheet --- */
  .drawer { width: 100%; border-left: 0; }
  .drawer-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .drawer-id b { font-size: 15px; }
  .drawer-id span { font-size: 12.5px; }
  .drawer-body { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); font-size: 14.5px; gap: 20px; }
  .drawer-score b { font-size: 16px; }
  .drawer-score span { font-size: 12.5px; }
  .cost-note { font-size: 12.5px; }
  .drawer-head { padding-left: 12px; padding-right: 8px; gap: 6px; }
  .drawer-id { flex: 1; }
  .drawer-id b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drawer-head-actions { gap: 0; flex: none; }
  .drawer-head-actions .icon-btn { width: 38px; height: 38px; font-size: 18px; }
  .big-metric { padding: 12px 13px; }
  .big-metric b { font-size: 18px; }
  .big-metric span { font-size: 12.5px; }
  .player { max-height: 62dvh; }
  .player-note { font-size: 12px; }
  .section-actions > * { flex: 1 1 130px; }
  .section-actions .select-wrap .select { width: 100%; }
  .pick-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 4px; }
  .pick-thumb { width: 40px; height: 52px; grid-row: span 2; }
  .pick-row input { grid-row: span 2; }
  .pick-metrics { grid-column: 3; }

  /* --- library, compare, saved --- */
  .hook-card blockquote { font-size: 15px; }
  .pick-scroll { max-height: 58dvh; }
  .pick-row { padding: 10px; gap: 10px; min-height: 60px; }
  .pick-row:hover { transform: none; }
  .pick-row input { width: 20px; height: 20px; }
  .pick-cap b { font-size: 14px; }
  .pick-cap span { font-size: 12px; }
  .pick-metrics { font-size: 12.5px; gap: 8px; }
  .saved-hooks { grid-template-columns: minmax(0, 1fr); }

  /* --- search, help --- */
  .palette-shell { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
  .palette { max-height: 80dvh; border-radius: 18px; }
  .palette-item { padding: 12px; }
  .palette-label b { font-size: 15px; }
  .palette-label span, .palette-meta { font-size: 12.5px; }
  .palette-hint { display: none; }
}

/* Phones: each reel becomes an easy-to-scan row */
@media (max-width: 560px) {
  .reel-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .reel:hover { transform: none; }
  .reel:not(.spotlight) { flex-direction: row; }
  .reel:not(.spotlight) .reel-thumb { width: 108px; flex: none; aspect-ratio: auto; min-height: 172px; }
  .reel:not(.spotlight) .reel-body { padding: 12px 12px 12px 13px; gap: 8px; }
  .reel.spotlight { flex-direction: column; }
  .reel.spotlight .reel-thumb { width: 100%; aspect-ratio: 16 / 10; }
  .reel.spotlight .reel-body { padding: 16px; }
  .reel.spotlight .reel-caption { font-size: 15px; }
  .reel-caption { font-size: 14.5px; line-height: 1.45; -webkit-line-clamp: 2; color: var(--ink); }
  .reel-creator { font-size: 12.5px; }
  .reel-metrics { gap: 6px 12px; }
  .metric { font-size: 13.5px; }
  .metric-ic { font-size: 13px; }
  .vir { gap: 8px; }
  .vir .ring { width: 40px !important; height: 40px !important; }
  .vir-meta b { font-size: 13.5px; }
  .vir-meta span { font-size: 12px; }
  .dot-idle { width: 32px; height: 32px; }
  .reel-quick .icon-btn { width: 38px; height: 38px; }
  .reel-when { font-size: 12px; }
  .reel-tagcount { display: none; }
  .rank { font-size: 12px; top: 7px; left: 7px; }
  .badge-breakout { font-size: 11.5px; top: auto; bottom: 7px; left: 7px; right: auto; }
  .badge-dur { font-size: 11.5px; bottom: 7px; right: 7px; }
  .reel.spotlight .badge-breakout { top: 9px; right: 9px; bottom: auto; left: auto; }
  .hook-strip { font-size: 14px; }
  .win-chip { font-size: 13.5px; }
}
.factor-card .impact { align-self: flex-start; }


/* =================================================================
   Same look as the other Clone Labs tools: dark header, heading band,
   white cards that lift over the band, competitors in a side card and
   the views as tabs above the content.
   ================================================================= */
:root[data-theme="light"] {
  --bg: #F7F5FD; --bg-2: #EFEBFF; --surface: #FFFFFF; --surface-2: #F6F4FC; --solid: #FFFFFF;
  --line: #E6E4F0; --line-2: #EEEDF5; --ink: #1A1C33; --ink-2: #4A4D63; --muted: #8B8EA6;
  --shadow: 0 30px 60px -40px rgba(20,23,66,.45), 0 1px 0 rgba(20,23,66,.04);
  --shadow-sm: 0 18px 40px -34px rgba(20,23,66,.5), 0 1px 0 rgba(20,23,66,.03);
}
:root { --r: 16px; --r-lg: 22px; }
html, body { font-size: 16px; }
body:not(.lp-on) { background: var(--bg); }
.aurora { display: none !important; }
.app { display: block; min-height: 100vh; }

/* header (same as the rest of tools.clonelabs.in) */
.site-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.site-top { background: #141742; color: #fff; }
.site-top .site-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.site-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; text-decoration: none; }
.site-logo:hover { text-decoration: none; }
.site-logo .logo-word { font-size: 26px; }
.site-logo .logo-sub { font-size: 10.5px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { color: #DCD3FF; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.site-nav a:hover { color: #fff; background: rgba(155,123,255,.16); text-decoration: none; }
.site-nav .site-cta { background: #fff; color: #661AFF; margin-left: 6px; padding: 9px 16px; }
.site-nav .site-cta:hover { background: #F4F0FF; color: #661AFF; }

/* heading band */
.site-band { background: radial-gradient(1100px 380px at 85% -20%, rgba(102,26,255,.55), transparent 60%), #141742; color: #fff; padding: 34px 0 96px; }
.band-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.band-kicker { color: #9B7BFF; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.site-band h1 { font-family: var(--f-display); font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 10px; color: #fff; font-weight: 800; }
.site-band p { color: #CBC6E6; margin: 0; max-width: 620px; font-size: 1.05rem; line-height: 1.55; }
.balchip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(220,211,255,.2); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; }
.balchip.low { border-color: rgba(255,180,90,.6); }
.balchip a { background: #fff; color: #661AFF; text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.balchip a:hover { text-decoration: none; background: #F4F0FF; }

/* page layout */
.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: -64px; position: relative; padding-bottom: 64px; }
.content { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.main { padding: 0; max-width: none; margin: 0; }
.view { gap: 18px; }

/* competitors card */
.rail { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: none; -webkit-backdrop-filter: none; gap: 14px; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; }
.rail-heading { font-family: var(--f-display); font-size: 1.25rem; font-weight: 750; letter-spacing: -.01em; text-transform: none; color: var(--ink); padding: 0; justify-content: flex-start; gap: 10px; }
.count-pill { font-family: var(--f-body); font-size: 12.5px; font-weight: 700; color: #661AFF; background: #F4F0FF; padding: 2px 10px; }
.add-form { border-radius: 14px; border-width: 1.5px; padding: 3px 4px 3px 12px; }
.add-form input { font-size: 15px; padding: 10px 0; }
.competitor { border-radius: 14px; padding: 10px; }
.competitor-handle { font-size: 14.5px; }
.competitor-note { font-size: 12.5px; }
.competitor-av { width: 36px; height: 36px; font-size: 12.5px; }
.account { border-radius: 16px; padding: 12px; }
.acct-txt b { font-size: 14.5px; }
.acct-txt small { font-size: 13px; }
.key-warning { font-size: 13px; border-radius: 14px; }
.chip-btn { border-radius: 999px; padding: 10px; font-size: 13.5px; border-width: 1.5px; }
@media (min-width: 901px) {
  .rail { position: sticky; top: 16px; height: auto; max-height: calc(100vh - 32px); padding: 20px; width: auto; z-index: 2; }
  .rail-collapse { display: none; }
  body.rail-collapsed { --rail-w: 268px; }
}

/* view tabs + search */
.topbar { position: relative; top: auto; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px; gap: 8px; }
.nav { flex-direction: row; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-item { flex: none; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.nav-item .ic { font-size: 17px; }
.nav-item.on { background: #F4F0FF; color: #661AFF; }
.nav-item.on::before { display: none; }
.nav-item .nav-badge { margin-left: 2px; }
.crumbs { flex: none; }
.omni { margin-left: auto; flex: 0 1 200px; min-width: 44px; max-width: 200px; border-radius: 999px; padding: 10px 14px; font-size: 14px; border-width: 1.5px; }
.omni kbd { display: none; }
.topbar-actions .icon-btn { border-radius: 999px; }
.rail-open-btn { display: none; }

/* cards, buttons and type closer to the other tools */
.card, .hero, .empty, .progress-panel { border-radius: 22px; }
.card { padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--shadow-sm); backdrop-filter: none; }
.hero { background: var(--surface); box-shadow: var(--shadow-sm); padding: 22px 24px; }
.hero-glow { display: none; }
.hero-text h1 { font-size: 24px; }
.hero-sub { font-size: 14px; }
.section-head h2 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 750; }
.section-head p { font-size: 14px; }
.btn { border-radius: 999px; font-size: 14.5px; padding: 10px 18px; font-weight: 700; }
.btn-solid { background: #661AFF; box-shadow: none; }
.btn-solid:hover { background: #5512E0; filter: none; box-shadow: none; }
.tile { border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.tile::after { display: none; }
.tile-label { font-size: 13px; }
.tile-value { font-size: 26px; }
.tile-sub { font-size: 12.5px; }
.insight { font-size: 14px; border-radius: 16px; background: #F4F0FF; border-color: transparent; }
:root[data-theme="dark"] .insight { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
.seg { border-radius: 999px; padding: 4px; }
.seg-btn { border-radius: 999px; font-size: 14px; padding: 8px 14px; }
.seg-btn.on { background: #F4F0FF; color: #661AFF; box-shadow: none; }
:root[data-theme="dark"] .seg-btn.on, :root[data-theme="dark"] .nav-item.on { background: rgba(155,123,255,.18); color: #fff; }
.inline-search input, .select, .input { border-radius: 999px; font-size: 14px; border-width: 1.5px; }
.reel { border-radius: 18px; }
.reel-caption { font-size: 14px; color: var(--ink); }
.metric { font-size: 13px; }
.reel-when { font-size: 12px; }
.vir-meta b { font-size: 13.5px; }
.vir-meta span { font-size: 12px; }
.bar-row { font-size: 14px; }
.chart-foot { font-size: 13.5px; }
.axis-label { font-size: 11px; }

/* tablets and phones */
@media (max-width: 900px) {
  .site-top .site-wrap { height: 62px; padding: 0 14px; }
  .site-logo .logo-word { font-size: 23px; }
  .site-nav a:not(.site-cta) { padding: 8px 8px; font-size: 14px; }
  .site-band { padding: 18px 0 78px; }
  .site-band .site-wrap { padding: 0 14px; }
  .site-band h1 { font-size: 1.7rem; margin: 4px 0 6px; }
  .site-band p { font-size: .98rem; }
  .balchip { font-size: 14px; padding: 8px 10px 8px 14px; }
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 12px 24px; margin-top: -60px; gap: 14px; }
  .content { gap: 14px; }
  .rail { border-radius: 0 22px 22px 0; max-height: none; box-shadow: var(--shadow); }
  .rail-collapse { display: inline-grid; }
  .topbar { padding: 6px; gap: 6px; border-radius: 18px; }
  .nav { display: none; }
  .rail-open-btn { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #F4F0FF; color: #661AFF; font-weight: 700; font-size: 15px; }
  :root[data-theme="dark"] .rail-open-btn { background: rgba(155,123,255,.18); color: #fff; }
  .rail-open-btn svg { font-size: 19px; flex: none; }
  .rail-open-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-open-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: auto; flex: none; }
  .omni { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .omni span { display: none; }
  .crumbs { display: none; }
  .main { padding: 0; }
  .app { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .site-nav a[href="/pricing/"] { display: none; }
}

@media (min-width: 901px) {
  .omni { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: auto; }
  .omni span { display: none; }
  .competitor-spark { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .nav-item { padding: 10px 12px; }
  .nav-item .ic { display: none; }
}

/* =================================================================
   Simple reel cards: picture, short caption, views, score, one button.
   ================================================================= */
.view.quiet, .view.quiet * { animation: none !important; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.toolbar.simple { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.toolbar-title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 750; }
.toolbar.simple .select-wrap { flex: none; }
.toolbar.simple .select { padding-top: 9px; padding-bottom: 9px; }

.reel-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.reel.rcard { flex-direction: column; }
.reel.rcard .reel-thumb { width: 100%; aspect-ratio: 4 / 5; min-height: 0; }
.reel.rcard .reel-body { padding: 12px 14px 14px; gap: 10px; }
.reel.rcard .reel-caption { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; color: var(--ink); min-height: 2.9em; }
.rc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-views { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.rc-views .ic { color: var(--muted); font-size: 15px; }
.rc-views small { font-weight: 600; color: var(--muted); font-size: 13px; }
.rc-score { display: inline-flex; align-items: baseline; gap: 1px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--c, var(--accent)) 14%, transparent); }
.rc-score b { font-size: 15px; font-weight: 800; color: var(--c, var(--accent)); }
.rc-score.none { background: var(--surface-2); font-size: 12px; }
.rc-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 999px; background: #F4F0FF; color: #661AFF; font-weight: 700; font-size: 14px; transition: background .15s, color .15s; }
:root[data-theme="dark"] .rc-btn { background: rgba(155,123,255,.16); color: #DCD3FF; }
.reel.rcard:hover .rc-btn { background: #661AFF; color: #fff; }
.reel.rcard .badge-breakout { top: 9px; right: 9px; left: auto; bottom: auto; }
.drawer-note { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hot); }
.swipe-actions { align-items: center; }
.swipe-count { font-family: var(--f-display); font-size: 1.2rem; font-weight: 750; margin-right: auto; }
.pick-vir { font-size: 12.5px; }

@media (max-width: 560px) {
  .reel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reel.rcard { flex-direction: column; }
  .reel.rcard .reel-thumb { width: 100%; aspect-ratio: 4 / 5; min-height: 0; }
  .reel.rcard .reel-body { padding: 10px; gap: 8px; }
  .reel.rcard .reel-caption { font-size: 13.5px; }
  .rc-row { flex-wrap: wrap; gap: 6px; }
  .rc-views { font-size: 14px; }
  .rc-views small { display: none; }
  .rc-btn { padding: 9px 8px; font-size: 13px; }
  .reel.rcard .badge-breakout { top: 7px; right: 7px; bottom: auto; left: auto; }
}

/* five stat tiles on the dashboard */
.tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .tiles.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.five > :last-child { grid-column: 1 / -1; } }

/* Takeaways: captions and show-more */
.more-btn { margin: 14px auto 0; display: flex; }
.cap-list { display: grid; gap: 12px; }
.cap { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.cap-text { white-space: pre-line; font-size: 14.5px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cap-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cap-foot .hook-stats { margin-right: auto; }

/* =================================================================
   Ask AI: chat box fixed at the bottom centre
   ================================================================= */
body.has-chat .shell { padding-bottom: 130px; }
.ai-chat { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; width: min(680px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.chat-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 26px; background: var(--solid); border: 1.5px solid color-mix(in oklab, var(--accent) 35%, var(--line)); box-shadow: 0 18px 50px -18px rgba(102,26,255,.55), 0 2px 10px rgba(20,23,66,.08); }
.chat-bar:focus-within { border-color: var(--accent); }
.chat-bar-ic { color: var(--accent); font-size: 20px; align-self: center; flex: none; }
.chat-input { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; font: 500 15.5px var(--f-body); line-height: 1.45; padding: 9px 0; max-height: 120px; color: var(--ink); }
.chat-input::placeholder { color: var(--muted); }
.chat-send { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #661AFF; color: #fff; font-size: 19px; transition: background .15s, transform .15s; }
.chat-send:hover { background: #5512E0; }
.chat-send:disabled { opacity: .5; cursor: wait; }
.chat-price { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.chat-panel { display: none; flex-direction: column; max-height: min(60vh, 560px); border-radius: 22px; background: var(--solid); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(20,23,66,.55); overflow: hidden; }
.ai-chat.open .chat-panel { display: flex; animation: chatIn .2s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateY(10px); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.chat-head b { display: block; font-size: 15px; }
.chat-head small { display: block; font-size: 12.5px; color: var(--muted); }
.chat-head > div { flex: 1; min-width: 0; }
.chat-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, #661AFF, #2C3479); color: #fff; font-size: 17px; flex: none; }
.chat-close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); font-size: 17px; }
.chat-close:hover { background: var(--surface-2); color: var(--ink); }
.chat-log { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.chat-empty p { margin: 0 0 12px; color: var(--ink-2); font-size: 14.5px; }
.chat-sugs { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-sug { padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: 600 13.5px var(--f-body); color: var(--ink-2); }
.chat-sug:hover { border-color: var(--accent); color: var(--accent); }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; }
.msg.me { align-self: flex-end; background: #661AFF; color: #fff; border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; }
.msg.ai.err { background: color-mix(in oklab, var(--hot) 12%, transparent); color: var(--hot); }
.msg-body p { margin: 0; }
.msg-body p + p, .msg-body p + ul, .msg-body ul + p { margin-top: 8px; }
.msg-body ul { margin: 0; padding-left: 18px; }
.msg-body li + li { margin-top: 4px; }
.msg.typing { display: flex; gap: 5px; padding: 14px 16px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blinkDot 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blinkDot { 50% { opacity: .25; transform: translateY(-2px); } }
@media (max-width: 900px) {
  .ai-chat { bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100% - 20px); }
  body.has-chat .app { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-chat .shell { padding-bottom: 24px; }
  .chat-input { font-size: 16px; }
  .chat-panel { max-height: 58dvh; }
  body.rail-open .ai-chat { display: none; }
  .toast-stack { bottom: calc(150px + env(safe-area-inset-bottom)); }
}
body.lp-on .ai-chat, body.booting .ai-chat { display: none; }

/* =================================================================
   AI chat page (all saved chats) + chat box header buttons
   ================================================================= */
body[data-view="chat"] .ai-chat { display: none; }
body[data-view="chat"].has-chat .shell { padding-bottom: 40px; }
.chat-mini { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; font: 700 12.5px var(--f-body); color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); flex: none; }
.chat-mini:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.chat-mini .ic { font-size: 14px; }

.chatv { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: stretch; height: calc(100vh - 120px); min-height: 520px; max-height: 900px; }
.chatv-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.chatv-new { justify-content: center; width: 100%; }
.chatv-label { margin: 6px 4px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.chatv-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.chatv-none { font-size: 14px; color: var(--muted); padding: 6px 4px; }
.chatv-item { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 12px; border-radius: 14px; cursor: pointer; border: 1px solid transparent; }
.chatv-item:hover { background: var(--surface-2); }
.chatv-item.on { background: #F4F0FF; border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
:root[data-theme="dark"] .chatv-item.on { background: rgba(155,123,255,.16); }
.chatv-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chatv-item-t b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatv-item-t small { font-size: 12px; color: var(--muted); }
.chatv-item .icon-btn { opacity: .45; }
.chatv-item:hover .icon-btn { opacity: 1; }
.chatv-main { display: flex; flex-direction: column; min-height: 0; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.chatv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.chatv-title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 750; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chatv-head .chat-price { flex: none; }
.chatv-log { flex: 1; min-height: 0; padding: 22px; gap: 12px; }
.chatv-log .msg { max-width: 78%; font-size: 15px; }
.chatv-log .chat-empty { max-width: 560px; margin: auto; text-align: center; }
.chatv-log .chat-empty p { font-size: 15.5px; margin-bottom: 16px; }
.chatv-log .chat-sugs { justify-content: center; }
.chatv-compose { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.chat-bar.big { box-shadow: none; border-radius: 20px; }
.chatv-hint { margin: 8px 4px 0; font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .chatv { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; min-height: 0; }
  .chatv-side { padding: 12px; }
  .chatv-list { max-height: 190px; }
  .chatv-main { height: calc(100dvh - 210px); min-height: 440px; }
  .chatv-head { padding: 12px 16px; }
  .chatv-log { padding: 14px; }
  .chatv-log .msg { max-width: 90%; }
  .chatv-hint { display: none; }
  .chat-mini span { display: none; }
  .tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tab { font-size: 10.5px; }
  .tab-ic { width: 44px; }
}

@media (min-width: 901px) {
  .nav-item { padding: 10px 13px; font-size: 14.5px; gap: 8px; }
}
@media (min-width: 901px) and (max-width: 1320px) {
  .nav-item .ic { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .shell { grid-template-columns: 250px minmax(0, 1fr); }
  .nav-item { padding: 9px 10px; font-size: 14px; }
  .topbar-actions .icon-btn[title^="Refresh"] { display: none; }
}
/* the AI chat page uses the full width */
@media (min-width: 901px) {
  body[data-view="chat"] .shell { grid-template-columns: minmax(0, 1fr); }
  body[data-view="chat"] .rail { display: none; }
  body[data-view="chat"] .chatv { grid-template-columns: 300px minmax(0, 1fr); }
}