/* ============================================================
   Faceless Goldmine — light design system
   ============================================================ */

:root {
  --bg: #f4f5fb;
  --surface: #ffffff;
  --surface-2: #fafbff;
  --surface-3: #eef0f8;
  --line: #e4e5ef;
  --line-soft: #edeef6;

  --ink: #141420;
  --ink-2: #4f5160;
  --ink-3: #888a9c;

  --accent: #5244e3;
  --accent-2: #7b5ff0;
  --accent-soft: #eef0ff;
  --accent-line: #d7d9ff;
  --accent-grad: linear-gradient(135deg, #6d5cf5 0%, #4f3fe0 100%);

  /* The product is a goldmine — the brand wears gold. */
  --gold: #c6922e;
  --gold-grad: linear-gradient(135deg, #f6c766 0%, #c6922e 100%);

  /* Deep button fill: a near-black with a touch of depth. */
  --ink-grad: linear-gradient(180deg, #27273200 0%, rgba(0,0,0,.14) 100%), #17171f;

  --good: #0f8a52;
  --good-soft: #e8f6ee;
  --warn: #a86200;
  --warn-soft: #fdf3e2;
  --bad: #c0324a;
  --bad-soft: #fdecef;

  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(23, 23, 44, .06);
  --sh-2: 0 3px 10px rgba(23, 23, 44, .07), 0 1px 3px rgba(23, 23, 44, .05);
  --sh-3: 0 16px 40px rgba(23, 23, 44, .12), 0 3px 10px rgba(23, 23, 44, .06);
  --sh-4: 0 30px 80px rgba(23, 23, 44, .20);
  --ring: 0 0 0 4px rgba(82, 68, 227, .16);

  /* Chart roles: the first two slots of the validated categorical palette
     (blue, orange). They pass the colour-vision and contrast checks on this
     surface, and text never wears them.

     They live here rather than on the Patterns tab, which is where they used
     to be defined. A report is drawn in two places now - that tab and the
     chat's deep read - and a custom property only reaches what is inside the
     element that declares it, so every bar drawn in the chat resolved to
     nothing and came out invisible. Nothing else was wrong with it; the
     colour simply was not in scope. */
  --series-1: #2a78d6;
  --series-2: #eb6834;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.021em; font-weight: 650; }
h1 { font-size: 2.6rem; font-weight: 760; letter-spacing: -.032em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 640; }
code, .mono { font-family: var(--mono); font-size: .88em; }

.dim { color: var(--ink-3); font-size: .84rem; }
.muted { color: var(--ink-2); }
.hide { display: none !important; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 17px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 560; font-size: .9rem; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s;
  white-space: nowrap; box-shadow: var(--sh-1);
}
.btn:hover { background: var(--surface-3); border-color: #dadae2; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--ink-grad); border-color: transparent; color: #fff; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.09); }
.btn-primary:hover { filter: brightness(1.13); border-color: transparent; box-shadow: var(--sh-3); }
.btn-primary:active { filter: brightness(1); }

.btn-quiet { border-color: transparent; background: transparent; box-shadow: none; }
.btn-quiet:hover { background: var(--surface-3); }

.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn-danger { color: var(--bad); }

.icon-btn {
  width: 38px; height: 38px; padding: 0; border-radius: var(--r-sm);
  display: grid; place-items: center; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* ---------------- forms ---------------- */

label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; letter-spacing: .005em; }
input, select, textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .92rem; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}
input::placeholder { color: var(--ink-3); }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.switch { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-bottom: 14px; }
.switch input { width: auto; margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.switch span { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.switch b { color: var(--ink); font-weight: 580; display: block; }

/* ---------------- chips ---------------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 6px 13px; border-radius: var(--r-full); border: 1px solid var(--line);
  background: var(--surface); font-size: .83rem; color: var(--ink-2);
  cursor: pointer; transition: .14s; font-weight: 500; user-select: none;
}
.chip:hover { border-color: #d3d3dd; background: var(--surface-3); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 560; }
.chip.static { cursor: default; }
.chip.static:hover { border-color: var(--line); background: var(--surface); }

/* ---------------- badges ---------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-xs); font-size: .68rem; font-weight: 640;
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge-good { background: var(--good-soft); color: var(--good); border-color: #cbe9d8; }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: #f2e1c4; }
.badge-bad { background: var(--bad-soft); color: var(--bad); border-color: #f6d5db; }

/* ============================================================
   App shell
   ============================================================ */

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  flex: 0 0 auto; height: 58px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft); z-index: 40;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); font-size: .98rem; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gold-grad); color: #3c2b07; font-size: .72rem; font-weight: 800; letter-spacing: -.03em;
  box-shadow: 0 2px 7px rgba(198,146,46,.38), inset 0 1px 0 rgba(255,255,255,.45);
}

.setup-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 8px 6px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .82rem; color: var(--ink-2); cursor: pointer; box-shadow: var(--sh-1);
  transition: .15s; overflow: hidden;
}
.setup-pill:hover { border-color: #d3d3dd; box-shadow: var(--sh-2); }
.setup-pill b { color: var(--ink); font-weight: 580; }
.setup-pill .sep { color: var(--line); }
.setup-pill.empty { border-style: dashed; color: var(--ink-3); }

.usage-line { font-size: .74rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

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

.scrim {
  position: fixed; inset: 0; background: rgba(18, 18, 28, .32);
  backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(400px, 90vw);
  background: var(--surface); z-index: 70; box-shadow: var(--sh-4);
  transform: translateX(-101%); transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }

.drawer-head {
  flex: 0 0 auto; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.drawer-foot {
  flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.sect { margin-bottom: 26px; }
.sect-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); margin-bottom: 11px; display: flex; align-items: center; gap: 8px;
}
.sect-title .n {
  width: 18px; height: 18px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: 0;
}

.niche-picked {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: .85rem; color: var(--accent); font-weight: 550;
}
.niche-picked.none { background: var(--surface-3); border-color: var(--line); color: var(--ink-3); font-weight: 400; }

/* ---------------- thread ---------------- */

.thread { flex: 1 1 auto; overflow-y: auto; scroll-behavior: smooth; }
.thread-inner { max-width: 780px; margin: 0 auto; padding: 26px 20px 8px; }

.msg { margin-bottom: 22px; display: flex; gap: 12px; align-items: flex-start; }
.msg.user { justify-content: flex-end; }

.bubble {
  max-width: 82%; padding: 11px 16px; border-radius: var(--r-lg);
  background: var(--ink); color: #fff; font-size: .93rem; line-height: 1.55;
  border-bottom-right-radius: 6px; box-shadow: var(--sh-2);
  overflow-wrap: anywhere;
}

.avatar {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  background: var(--ink); color: #fff; margin-top: 1px; letter-spacing: -.03em;
}
.msg .body { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.msg .body > p { font-size: .95rem; line-height: 1.62; }
.msg.error .avatar { background: var(--bad); }
.msg.refusal .avatar { background: var(--ink-3); }

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.progress-note { font-size: .85rem; color: var(--ink-3); margin-top: 4px; }

/* ---------------- welcome ---------------- */

.welcome { padding: 40px 0 18px; text-align: center; }
.welcome h2 { font-size: 1.8rem; margin-bottom: 10px; letter-spacing: -.03em; }
.welcome p { color: var(--ink-2); max-width: 470px; margin: 0 auto 24px; }

.starter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; text-align: left; }
.starter {
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; transition: .16s; box-shadow: var(--sh-1);
}
.starter:hover { border-color: #d3d3dd; box-shadow: var(--sh-2); transform: translateY(-1px); }
.starter b { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 3px; }
.starter span { font-size: .81rem; color: var(--ink-3); }

/* ---------------- composer ---------------- */

.composer-wrap {
  flex: 0 0 auto; background: linear-gradient(to top, var(--bg) 62%, rgba(247, 247, 249, 0));
  padding: 10px 20px 16px;
}
.composer {
  max-width: 780px; margin: 0 auto; display: flex; align-items: flex-end; gap: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 7px 7px 7px 17px; box-shadow: var(--sh-3); transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--accent-line); box-shadow: var(--sh-3), var(--ring); }
.composer textarea {
  flex: 1 1 auto; border: 0; padding: 8px 0; background: transparent; resize: none;
  font-size: .95rem; line-height: 1.5; max-height: 170px; box-shadow: none;
}
.composer textarea:focus { outline: none; box-shadow: none; border: 0; }
.send {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-full); border: 0;
  background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: .15s;
}
.send:hover:not(:disabled) { background: #000; }
.send:disabled { opacity: .28; cursor: not-allowed; }
.composer-hint { max-width: 780px; margin: 8px auto 0; text-align: center; font-size: .73rem; color: var(--ink-3); }

/* ============================================================
   Result cards
   ============================================================ */

.cards { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 17px; box-shadow: var(--sh-1);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card-tight { padding: 13px 15px; }

.ch-top { display: flex; gap: 12px; align-items: flex-start; }
.ch-av { width: 42px; height: 42px; border-radius: var(--r-full); flex: 0 0 42px; background: var(--surface-3); object-fit: cover; }
.ch-name { font-weight: 620; font-size: .96rem; color: var(--ink); line-height: 1.35; }
.ch-name:hover { text-decoration: underline; }
.ch-sub { font-size: .81rem; color: var(--ink-3); margin-top: 1px; }

.score {
  --pct: 0;
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--r-full); position: relative;
  background: conic-gradient(var(--ring, var(--accent)) calc(var(--pct) * 1%), var(--surface-3) 0);
  display: grid; place-items: center;
}
.score::after { content: ''; position: absolute; inset: 4px; border-radius: var(--r-full); background: var(--surface); }
.score span { position: relative; z-index: 1; font-size: .86rem; font-weight: 700; letter-spacing: -.03em; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 1px; margin-top: 14px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.metric { background: var(--surface-2); padding: 9px 11px; }
.metric .k { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 620; }
.metric .v { font-size: 1rem; font-weight: 660; margin-top: 1px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric .v.good { color: var(--good); }
.metric .v.accent { color: var(--accent); }

/* ---------------- what a number means ----------------
   A label that can explain itself: the same label, with a faint dotted line
   under it. Nothing is added to the page until somebody asks, and asking is a
   tap - the title attribute this replaces was invisible on a phone, which is
   where most of this is read. */
button.explains {
  all: unset; cursor: help; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; font-weight: inherit;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
button.explains:hover, button.explains[aria-expanded='true'] { color: var(--accent); }
button.explains:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* A whole element that explains itself - the score rings, where a dotted
   underline would sit oddly under a circle. */
.tap-explain { cursor: help; }

.explain-pop {
  position: absolute; z-index: 300; padding: 10px 13px;
  background: var(--ink); color: #fff; border-radius: var(--r-sm);
  font-size: .82rem; line-height: 1.55; font-weight: 450; letter-spacing: normal;
  text-transform: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }

.evidence {
  margin-top: 11px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: .79rem; color: var(--ink-2); line-height: 1.5;
}
.evidence .tag { font-weight: 620; color: var(--ink); }

details.acc { border-top: 1px solid var(--line-soft); margin-top: 12px; }
details.acc > summary {
  padding: 10px 0 0; cursor: pointer; font-weight: 560; font-size: .85rem;
  color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 7px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: '▸'; color: var(--ink-3); transition: transform .16s; font-size: .8em; }
details.acc[open] > summary::before { transform: rotate(90deg); }
details.acc > .inner { padding: 10px 0 4px; }

.vid { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
.vid:last-child { border-bottom: 0; }
.vid img { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 64px; background: var(--surface-3); }
.vid .x { font-weight: 650; font-size: .86rem; text-align: right; flex: 0 0 46px; font-variant-numeric: tabular-nums; }
.vid .x.hot { color: var(--good); }

.script-body {
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 14px; white-space: pre-wrap; font-size: .88rem; line-height: 1.8;
  max-height: 380px; overflow-y: auto; color: var(--ink-2);
}
.script-body mark { background: var(--accent-soft); color: var(--accent); padding: 1px 4px; border-radius: 4px; }

/* An idea being written. The text arrives a line at a time, so the box grows
   to a comfortable reading height and then scrolls itself. */
.idea-progress { display: flex; flex-direction: column; gap: 12px; }
.idea-progress #ideaStream { min-height: 120px; max-height: 300px; }

/* The five videos worth making, each with its own controls. */
/* What the demand numbers are actually about, when it is not obvious. */
.coverage-line {
  margin: 10px 0 0; padding: 9px 12px; font-size: .84rem; line-height: 1.55;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-2);
}

.idea-list { display: flex; flex-direction: column; gap: 10px; }
.idea-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 12px 14px; background: var(--surface-2);
}
.idea-card .idea-title { font-weight: 600; color: var(--ink); line-height: 1.45; }
.idea-card .dim { margin-top: 4px; font-size: .84rem; }
.idea-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.idea-acts .idea-len { width: auto; padding: 5px 8px; font-size: .82rem; }
.idea-acts .idea-custom { width: 80px; padding: 5px 8px; font-size: .82rem; }
@media (max-width: 520px) {
  .idea-acts { gap: 6px; }
  .idea-acts .btn { flex: 1 1 auto; }
}

ul.tight { margin: 0 0 10px; padding-left: 18px; color: var(--ink-2); font-size: .87rem; }
ul.tight li { margin-bottom: 4px; }

.stat-line { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--ink-3); margin-top: 10px; }
.stat-line b { color: var(--ink-2); font-weight: 600; }

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

#toasts { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 11px 15px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
  box-shadow: var(--sh-3); font-size: .86rem; max-width: 340px; animation: pop .2s ease;
}
.toast.err { background: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

/* ============================================================
   Landing + auth
   ============================================================ */

.page { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

.nav { height: 66px; display: flex; align-items: center; justify-content: space-between; }

.hero { padding: 76px 0 54px; text-align: center; }
.hero h1 { max-width: 800px; margin: 0 auto 18px; font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
.hero p { max-width: 560px; margin: 0 auto 30px; font-size: 1.05rem; color: var(--ink-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; margin-bottom: 20px;
  border-radius: var(--r-full); background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-size: .78rem; font-weight: 620; box-shadow: var(--sh-1);
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; padding-bottom: 70px; }
.feature { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s, border-color .18s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--accent-line); }
.feature .ic { font-size: 1.4rem; display: block; margin-bottom: 10px; }
.feature h3 { margin-bottom: 6px; font-size: 1rem; }
.feature p { font-size: .87rem; color: var(--ink-2); }

.foot { margin-top: auto; padding: 24px 0; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--ink-3); text-align: center; }

.auth-screen { flex: 1; display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-3); position: relative; }
.auth-tabs { display: flex; gap: 3px; background: var(--surface-3); padding: 3px; border-radius: var(--r-sm); margin-bottom: 22px; }
.auth-tabs button {
  flex: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: inherit; font-weight: 570; font-size: .87rem; cursor: pointer; transition: .15s;
}
.auth-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

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

@media (max-width: 720px) {
  .topbar { padding: 0 8px; gap: 8px; }
  .setup-pill { font-size: .76rem; padding: 5px 8px 5px 11px; }
  .usage-line { display: none; }
  .thread-inner { padding: 18px 14px 6px; }
  .composer-wrap { padding: 8px 12px 12px; }
  .bubble { max-width: 88%; }
  .field-row { grid-template-columns: 1fr; }
  .welcome { padding: 26px 0 14px; }
  .welcome h2 { font-size: 1.45rem; }
}

/* ============================================================
   Body row: conversation + history
   ============================================================ */

.body-row { flex: 1 1 auto; display: flex; min-height: 0; }
.chat-col { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.history {
  flex: 0 0 268px; width: 268px; border-left: 1px solid var(--line-soft);
  background: var(--surface-2); display: flex; flex-direction: column; min-height: 0;
}
.history.closed { display: none; }

.history-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--line-soft);
}
.history-title { font-size: .8rem; font-weight: 680; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); flex: 1; }
.history-close { display: none; }

.history-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.history-foot { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--line-soft); }

.hitem {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: var(--r-sm); cursor: pointer; transition: background .14s;
  border: 1px solid transparent;
}
.hitem:hover { background: var(--surface-3); }
.hitem.on { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-1); }
.hitem .t { flex: 1; min-width: 0; font-size: .86rem; font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hitem .meta { font-size: .7rem; color: var(--ink-3); }
.hitem .del {
  opacity: 0; border: 0; background: transparent; cursor: pointer; color: var(--ink-3);
  padding: 2px 4px; border-radius: 6px; font-size: .95rem; line-height: 1;
}
.hitem:hover .del { opacity: 1; }
.hitem .del:hover { background: var(--bad-soft); color: var(--bad); }
.history-empty { padding: 22px 12px; text-align: center; color: var(--ink-3); font-size: .82rem; }

/* ============================================================
   Drawer: niche groups
   ============================================================ */

.ngroup { margin-top: 14px; }
.ngroup + .ngroup { border-top: 1px dashed var(--line); padding-top: 14px; }
.ngroup-name {
  font-size: .7rem; font-weight: 660; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}

.or-line {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  color: var(--ink-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px dashed var(--line); }

/* ============================================================
   Format column on channel cards
   ============================================================ */

.fmt-bar {
  display: flex; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); margin-top: 5px;
}
.fmt-bar i { display: block; height: 100%; }
.fmt-bar .l { background: var(--accent); }
.fmt-bar .s { background: var(--warn); }

/* ============================================================
   Playbook card
   ============================================================ */

.pb-section { margin-top: 16px; }
.pb-section > h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 680; margin-bottom: 8px;
}
.keypoint {
  border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; margin-bottom: 12px;
}
.keypoint b { display: block; font-size: .9rem; margin-bottom: 3px; }
.keypoint .ev { font-size: .8rem; color: var(--ink-3); margin-bottom: 3px; }
.keypoint .do { font-size: .84rem; color: var(--ink-2); }

.angle {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft); font-size: .87rem;
}
.angle:last-child { border-bottom: 0; }
.angle .tag { flex: 0 0 auto; }

@media (max-width: 980px) {
  .history {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw);
    z-index: 65; box-shadow: var(--sh-4); transform: translateX(101%);
    transition: transform .24s cubic-bezier(.32,.72,0,1); display: flex;
    background: var(--surface);
  }
  .history.open { transform: none; }
  .history.closed { display: flex; transform: translateX(101%); }
  .history-close { display: grid; }
}

/* ==================================================================
   Filter toggles
   ================================================================== */

/* A switch beside a filter, so it can be ignored without being cleared. */
.toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex: none;
}
.toggle.inline { margin-left: 8px; vertical-align: middle; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .16s ease;
}
.toggle .track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
  transition: transform .16s ease;
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(15px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A section whose switch is off stays readable but stops looking active. */
.sect.muted .chips,
.sect.muted .field,
.field.muted { opacity: .45; }

.sect-title { display: flex; align-items: center; gap: 8px; }

/* ==================================================================
   Slash command menu
   ================================================================== */

.slash-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
  padding: 6px;
  z-index: 40;
}
.composer-wrap { position: relative; }

.slash-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.slash-item:hover,
.slash-item[aria-selected='true'] { background: var(--surface-3); }
.slash-item .cmd { font-weight: 700; color: var(--accent); }
.slash-item .args { color: var(--ink-3); font-weight: 500; margin-left: 5px; }
.slash-item .sum { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* ==================================================================
   Modal
   ================================================================== */

/**
 * The hidden attribute has to win, and by default it does not.
 *
 * A browser styles [hidden] as display:none, but that is a user-agent rule and
 * any author rule setting display beats it. `.modal { display: flex }` did
 * exactly that, so the dialog was painted from page load and the close button
 * appeared to do nothing - it was removing the scrim behind a panel that had
 * never been hidden in the first place.
 *
 * Declared once for everything rather than patched onto .modal, because the
 * same trap is waiting for any element that is toggled with `hidden` and
 * styled with a display.
 */
[hidden] { display: none !important; }

/* Nothing behind the dialog should scroll while it is open. */
body.modal-open { overflow: hidden; }

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .38);
  z-index: 60;
}
.modal {
  position: fixed;
  z-index: 61;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(16, 24, 40, .24);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 15.5px; }
.modal-body { padding: 16px 18px 20px; overflow-y: auto; }

/* ==================================================================
   Demand table
   ================================================================== */

.demand-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.demand-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.part { background: var(--surface-3); border-radius: 11px; padding: 10px 12px; }
.part .k { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.part .bar { height: 5px; border-radius: 999px; background: var(--line); margin-top: 7px; overflow: hidden; }
.part .bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.part .v { font-weight: 700; font-size: 16px; margin-top: 5px; }

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th,
table.tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
table.tbl td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl tr.small td { background: rgba(16, 185, 129, .07); }
table.tbl a { color: inherit; font-weight: 500; }

/* ==================================================================
   Per-video actions
   ================================================================== */

.vid { position: relative; }
.vid-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.btn-icon {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
}
.btn-icon:hover { background: var(--surface-3); }
.btn-icon:disabled { opacity: .5; cursor: default; }

.angle-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

@media (max-width: 640px) {
  .vid-acts { flex-direction: column; align-items: stretch; }
  .modal { width: calc(100vw - 16px); max-height: 92vh; }
}

/* ==================================================================
   Watch time
   ================================================================== */

/* Estimated, and the interface should never let that be forgotten - hence the
   tilde on every figure and the explanation in the title attribute. */
.vid .watch { font-size: .78rem; opacity: .85; }

.watch-verdict { margin-top: 10px; }
.watch-verdict.good .tag { color: var(--good); }
.watch-verdict.accent .tag { color: var(--accent); }
.watch-verdict.warn .tag { color: var(--warn); }
.watch-verdict.bad .tag { color: var(--bad); }

.metric .v.accent { color: var(--accent); }
.metric .v.warn { color: var(--warn); }
.metric .v.bad { color: var(--bad); }

/* ==================================================================
   Clarifying questions
   ================================================================== */

.mcq fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.mcq legend { font-weight: 650; margin-bottom: 8px; padding: 0; }
.mcq-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 6px;
  cursor: pointer;
}
.mcq-opt:hover { background: var(--surface-3); }
/* The app styles every input as a full-width text field; a radio must opt out,
   or it stretches across the row and pushes its label to the far edge. */
.mcq-opt input { flex: none; width: auto; height: auto; margin: 3px 0 0; padding: 0; accent-color: var(--accent); }
.mcq-opt span { flex: 1 1 auto; text-align: left; font-weight: 400; color: var(--ink); font-size: .9rem; }
.mcq-opt span b { font-weight: 600; }
.mcq-opt small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.mcq-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.relevance-line { margin: 6px 0 10px; }

/* ==================================================================
   Tabs
   ================================================================== */

.tabs { display: flex; gap: 2px; background: var(--surface-3); border-radius: var(--r-sm); padding: 4px; }
.tab {
  border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 600;
  padding: 6px 13px; border-radius: 8px; color: var(--ink-2); cursor: pointer;
}
.tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-2); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==================================================================
   Patterns layout
   ================================================================== */

.patterns-view { flex: 1 1 auto; display: flex; min-height: 0; }
.pt-side {
  flex: 0 0 250px; border-right: 1px solid var(--line-soft); background: var(--surface-2);
  display: flex; flex-direction: column; min-height: 0;
}
.pt-side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px; border-bottom: 1px solid var(--line-soft); font-weight: 650;
}
.pt-list { overflow-y: auto; padding: 6px; }
/* A saved report or search: open it, or throw it away. Two actions, so the row
   is a row holding two buttons rather than one button - a button inside a
   button is not markup a browser will keep. */
.pt-item {
  display: flex; align-items: center; gap: 4px;
  border-radius: 10px; color: inherit;
}
.pt-item:hover { background: var(--surface-3); }
.pt-item.on { background: var(--accent-soft); }
.pt-open {
  flex: 1 1 auto; min-width: 0; display: block; text-align: left;
  border: 0; background: none; font: inherit; color: inherit;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.pt-item-title { display: block; font-weight: 600; font-size: .88rem; }
.pt-item-sub { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 2px; }
/* Faint rather than hidden: a delete that only appears on hover cannot be
   reached at all on a phone, which is where this list is read most. */
.pt-item .del {
  flex: none; opacity: .5; border: 0; background: transparent; cursor: pointer; color: var(--ink-3);
  margin-right: 5px; padding: 3px 6px; border-radius: 6px; font-size: 1rem; line-height: 1;
}
.pt-item:hover .del, .pt-item .del:focus-visible { opacity: 1; }
.pt-item .del:hover { background: var(--bad-soft); color: var(--bad); }
.pt-item .del:disabled { opacity: .3; cursor: default; }

.pt-main { flex: 1 1 auto; overflow-y: auto; padding: 18px; min-width: 0; }
.pt-main > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.pt-main .card { margin-bottom: 14px; }
.pt-main h2 { font-size: 1.15rem; margin: 0 0 6px; }
.pt-main h3 { font-size: 1rem; margin: 0 0 10px; }
.pt-main h4 { font-size: .9rem; margin: 16px 0 8px; }

.seg { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; margin: 12px 0; }
.seg-btn {
  border: 0; background: none; font: inherit; font-size: .86rem; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--ink-2);
}
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

.pt-progress-head { display: flex; align-items: center; gap: 12px; }
.pt-steps { margin: 12px 0 0; padding-left: 20px; font-size: .86rem; color: var(--ink-3); }
.pt-steps li { margin: 3px 0; }
.pt-steps li.done { color: var(--ink-2); }
.pt-steps li.done::marker { content: '✓  '; color: var(--good); }
.pt-steps li.now { color: var(--ink); font-weight: 650; }

.pt-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* ==================================================================
   Carrying a report on

   A second round searches past the channels the report already has. Three
   things say so: a line in the form when the subject in the box has a report
   already, a marker where a later round's rows start, and the bar at the foot
   that asks for the next one.

   The bar sticks to the bottom of the page the way the box you type in does
   on the research side. The control somebody wants is the one they want after
   reading to the end, and it used to be at the top.
   ================================================================== */

.pt-known {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.pt-known-text { font-size: .86rem; margin-bottom: 9px; }

.pt-cont {
  position: sticky; bottom: 0; z-index: 3;
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--accent-line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--sh-3);
}
.pt-cont-row { display: flex; align-items: center; gap: 14px; }
.pt-cont-what { flex: 1 1 auto; min-width: 0; }
.pt-cont-subject { font-size: .88rem; margin-bottom: 2px; }
.pt-cont-note {
  margin-bottom: 9px; padding: 8px 11px; border-radius: 9px;
  background: var(--warn-soft); font-size: .84rem;
}
.pt-cont .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .pt-cont-row { flex-direction: column; align-items: stretch; }
  .pt-cont .btn { width: 100%; }
}

/* Where a round's rows begin, inside a list that holds several rounds. */
.round-row {
  font-size: .8rem; color: var(--ink-3);
}
.round-row > td { padding: 14px 10px 6px; border-top: 1px solid var(--line); }
div.round-row { grid-column: 1 / -1; padding: 6px 0 0; }
.round-tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px; margin-right: 6px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
.tstruct .shape-top .round-tag { vertical-align: 1px; }
.notice {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--warn-soft); color: var(--ink); font-size: .86rem;
}

/* ==================================================================
   Title structure

   The first thing on a report and the thing it is read for. One block per
   shape: the shape itself in monospace with its blanks marked, a two-column
   list of what goes in each blank, then the real titles it was counted on.
   Short lines throughout - this is scanned, not read.
   ================================================================== */

.tstruct .shape {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; margin-bottom: 14px; background: var(--surface-2);
}
.tstruct .shape:last-of-type { margin-bottom: 0; }
.tstruct .shape-top {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 10px;
}
.tstruct .shape-top h4 { margin: 0; font-size: .95rem; }
.tstruct .shape-count { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.tstruct .shape-count b { color: var(--ink-2); font-weight: 600; }

.tstruct .tmpl {
  font-family: var(--mono); font-size: .88rem; line-height: 1.7;
  background: var(--surface-3); border-radius: var(--r-xs);
  padding: 9px 11px; margin-bottom: 11px; overflow-wrap: anywhere;
}
/* A blank, marked wherever it appears: in the shape, and as its own label. */
.tstruct .slot, .evidence .slot {
  background: var(--accent-soft); border-bottom: 2px solid var(--accent-line);
  padding: 0 3px; border-radius: 3px; font-weight: 650; font-style: normal;
}

.tstruct .slots {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px;
  font-size: .84rem; margin-bottom: 11px;
}
.tstruct .slot-name { font-family: var(--mono); font-size: .8rem; color: var(--accent); white-space: nowrap; }
.tstruct .slot-what { color: var(--ink-2); }

/* The wider version of the shape above it: a note, not a finding of its own. */
.tstruct .shape-widens { margin: -4px 0 9px; padding-left: 9px; border-left: 2px solid var(--line); }
.tstruct .shape-why { font-size: .86rem; margin: 0 0 9px; }
.tstruct .shape-marks { font-size: .78rem; color: var(--ink-3); margin-bottom: 11px; }
.tstruct .shape h5 { margin: 0 0 6px; font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.tstruct .shape-ex { list-style: none; padding: 0; margin: 0 0 11px; }
.tstruct .shape-ex li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: .86rem; }
.tstruct .shape-ex li:last-child { border-bottom: 0; }
.tstruct .slot-fill { font-size: .8rem; color: var(--ink-2); margin-top: 2px; }
.tstruct .shape-write {
  border-top: 1px solid var(--line); padding-top: 9px; font-size: .86rem;
}
.tstruct .shape-write .mono { overflow-wrap: anywhere; }

/* ==================================================================
   Show more, show less
   ================================================================== */

.fold-btn { margin-top: 11px; }

/* ==================================================================
   Citations
   ================================================================== */

.cites { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.cite {
  border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .72rem;
  padding: 2px 8px; border-radius: 999px; cursor: pointer; color: var(--ink-2);
}
.cite:hover { border-color: var(--accent); color: var(--accent); }
[data-fid].flash, .round-row.flash, .pt-cont.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }

/* ==================================================================
   Finding rows: label | paired bars | lift
   ================================================================== */

.legend { display: flex; gap: 16px; font-size: .8rem; color: var(--ink-2); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
.sw.s1, .pb-bar.s1 { background: var(--series-1); }
.sw.s2, .pb-bar.s2 { background: var(--series-2); }

.fr {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(140px, 1.4fr) 110px;
  gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.fr.weak { opacity: .55; }
.fr-label span { font-size: .88rem; }
.fr-label small { display: block; color: var(--ink-3); font-size: .76rem; }
.fr-lift { text-align: right; font-size: .86rem; font-variant-numeric: tabular-nums; }
.sec-tag {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin-top: 8px;
}

/* One shared trait: a single bar, because there is nothing to compare it with -
   it is a share of the whole corpus, not winners against the rest. */

.share { display: flex; align-items: center; gap: 8px; }
.share-bar { flex: 0 0 110px; height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.share-bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 999px; }
.wchip[data-fid] b { color: var(--ink-2); }

.pb { position: relative; outline: none; }
.pb-row { display: flex; align-items: center; gap: 6px; height: 10px; margin: 2px 0; }
/* Thin bars, rounded at the data end only, with a surface gap between the pair. */
.pb-bar { height: 7px; border-radius: 0 4px 4px 0; min-width: 2px; }
.pb-val { font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.tip {
  display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 6px);
  background: var(--ink); color: #fff; font-size: .76rem; line-height: 1.5;
  padding: 8px 10px; border-radius: 8px; width: max-content; max-width: 260px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .22); pointer-events: none;
}
.pb:hover .tip, .pb:focus .tip, .bc-col:hover .tip, .bc-col:focus .tip { display: block; }

/* ==================================================================
   Bucket charts: one series, one hue
   ================================================================== */

.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.bc-head { display: flex; flex-direction: column; margin-bottom: 8px; font-size: .88rem; }
.bc-plot {
  display: flex; align-items: flex-end; gap: 2px; height: 150px;
  border-bottom: 1px solid var(--line); padding-top: 18px;
}
.bc-col {
  position: relative; flex: 1 1 0; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; outline: none;
}
.bc-bar { width: 70%; max-width: 34px; background: var(--series-1); border-radius: 4px 4px 0 0; }
.bc-col.thin .bc-bar {
  background: repeating-linear-gradient(45deg, var(--series-1) 0 2px, transparent 2px 5px);
  opacity: .6;
}
.bc-col.best .bc-bar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink-2); }
/* The value sits above its bar, out of the flow: in the flow it took height
   from the column, and every bar above ~88% of the scale drew the same. */
.bc-v {
  position: absolute; left: 0; right: 0; bottom: calc(var(--h, 0%) + 3px); text-align: center;
  font-size: .68rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bc-col:not(.best) .bc-v { opacity: 0; }
.bc-col:hover .bc-v, .bc-col:focus .bc-v { opacity: 1; }
.bc-l {
  position: absolute; top: 100%; margin-top: 5px; font-size: .66rem; color: var(--ink-3);
  text-align: center; line-height: 1.2; width: 100%;
}
.bc-plot { margin-bottom: 34px; }
.bc-col .tip { top: auto; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); }
.bc-foot { font-size: .8rem; }

/* ==================================================================
   Words, hooks, gallery
   ================================================================== */

.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { padding: 4px 10px; border-radius: 999px; font-size: .82rem; border: 1px solid var(--line); background: var(--surface); }
.wchip.up b { color: var(--good); }
.wchip.down b { color: var(--ink-3); }

.hooks { list-style: none; padding: 0; margin: 0; }
.hooks li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.hooks q { font-style: italic; }
.ex { font-size: .78rem; margin: -2px 0 6px; }

.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gal-item { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--surface); }
.gal-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--surface-3); }
.gal-body { padding: 9px 11px 11px; font-size: .82rem; }
.gal-title { font-weight: 600; color: var(--ink); display: block; margin-bottom: 3px; }

@media (max-width: 760px) {
  .patterns-view { flex-direction: column; }
  .pt-side { flex: 0 0 auto; max-height: 170px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .pt-main { padding: 12px; }
  .fr { grid-template-columns: 1fr; gap: 4px; }
  .fr-lift { text-align: left; }
  .tabs .tab { padding: 6px 9px; }
}

/* ==================================================================
   Setup drawer, in tabs
   ================================================================== */

.drawer { width: min(480px, 94vw); }
.dtabs {
  display: flex; gap: 2px; margin: 0 20px; padding: 3px;
  background: var(--surface-3); border-radius: 11px; flex: 0 0 auto;
}
.dtab {
  flex: 1 1 0; border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600;
  padding: 8px 6px; border-radius: 8px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.dtab.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.dtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dtab-badge {
  font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
}
.dpanel-intro { font-size: .82rem; color: var(--ink-3); margin: 0 0 18px; line-height: 1.5; }
.drawer .sect { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.drawer .dpanel .sect:last-child { border-bottom: 0; margin-bottom: 0; }
.drawer .sect-title { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.dsummary {
  font-size: .8rem; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsummary .sep { color: var(--ink-3); margin: 0 3px; }
.drawer-head { padding-bottom: 14px; }
.drawer-body { padding-top: 18px; }

/* Action buttons inside a table cell: the cell stays a table cell so row
   borders line up; the flex layout lives on the inner div. */
table.tbl td.acts { width: 1%; white-space: nowrap; vertical-align: middle; }
.chip-sm {
  display: inline-block; font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft, #e8f1fc); color: var(--ink-2); white-space: nowrap; margin: 1px 0;
}

/* ==================================================================
   Setup drawer v3: search, categories, quick picks
   ================================================================== */

.hint { font-size: .78rem; color: var(--ink-3); line-height: 1.45; margin-top: 8px; }
.nsearch {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink-3);
}
.nsearch:focus-within { border-color: #c9c9d6; box-shadow: 0 0 0 3px var(--accent-soft); }
.nsearch input { border: 0; outline: none; box-shadow: none; padding: 0; height: 100%; flex: 1; background: none; font: inherit; font-size: .9rem; }
.nsearch input:focus { box-shadow: none; border: 0; }

/* Categories as a two-row strip that scrolls sideways: all 22 reachable
   without pushing the niches below the fold. */
.cat-row {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 6px;
  overflow-x: auto; margin: 12px -20px 4px; padding: 0 20px 6px; scrollbar-width: thin;
}
.cat {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: inherit; font-size: .8rem; font-weight: 560; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.cat .ic { font-size: .95rem; }
.cat:hover { background: var(--surface-3); }
.cat.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.drawer .ngroup { margin-top: 12px; }
.drawer .ngroup + .ngroup { padding-top: 12px; }
button.chip { font: inherit; font-size: .82rem; }
.niche-picked { margin-top: 14px; }
.dpanel[data-dpanel="niche"] .sect:first-of-type { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset {
  text-align: left; font: inherit; border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.preset b { font-size: .85rem; font-weight: 640; color: var(--ink); }
.preset span { font-size: .74rem; color: var(--ink-3); line-height: 1.35; }
.preset:hover { background: var(--surface-3); }
.preset.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--surface-2); }
@media (max-width: 420px) { .presets { grid-template-columns: 1fr; } }

.qmark {
  display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line); font-size: .66rem; color: var(--ink-3); cursor: help; text-transform: none;
}
details.mini { margin-top: 10px; }
details.mini summary { font-size: .8rem; color: var(--ink-2); cursor: pointer; }
details.mini .field-row { margin-top: 8px; }

/* ==================================================================
   Found channels: sort bar, lean cards, folded details
   ================================================================== */

.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: .8rem; }
.sortbar .chip { padding: 4px 10px; font-size: .78rem; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ch-tags .tag {
  font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2);
}
.ch-tags .tag.ok { background: var(--good-soft, #e7f6ee); color: var(--good); }
.metrics.key { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric.m-vps { background: var(--accent-soft); }
.metric.m-vps .v { color: var(--accent); font-size: 1.15rem; }
@media (max-width: 560px) { .metrics.key { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric.m-vps { grid-column: 1 / -1; } }
.top3 { margin-top: 10px; }
.card.ch details.acc { margin-top: 8px; }
details.how { margin-top: 10px; }
details.how .stat-line { margin-top: 8px; }

/* ==================================================================
   The deep read, inside the chat message that asked for it

   It draws the same report the Patterns tab draws, so it arrives as a stack
   of cards. Nested inside a card they would be boxes in a box; here they are
   flattened into sections divided by a rule, and the whole thing is offset so
   it reads as an answer that opened out rather than a second page.
   ================================================================== */

.deep {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.deep > .row-between b { font-size: .92rem; }
/* "small" is only a size here; elsewhere it marks a row in a table. */
.deep .small { font-size: .82rem; }
.deep-out:not(:empty) { margin-top: 12px; }
.deep-report { display: flex; flex-direction: column; }
.deep-report > .card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 16px 0 0; margin-top: 16px; border-top: 1px solid var(--line-soft);
}
.deep-report > .card:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* The Patterns tab gives the report's headings their spacing through
   .pt-main; in the chat there is no .pt-main, so they are given it here. */
.deep-report h3 { font-size: .98rem; margin: 0 0 10px; }
.deep-report h4 { font-size: .9rem; margin: 16px 0 8px; }
.deep-report .gal { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.deep-report .bc-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ==================================================================
   Slash menu, compact: one line per command, under the composer's width
   ================================================================== */

.slash-menu {
  left: max(12px, calc((100% - 780px) / 2));
  right: auto;
  width: min(520px, calc(100% - 24px));
  max-height: 300px;
  padding: 5px;
  border-radius: 12px;
}
.slash-item {
  display: grid; grid-template-columns: 64px 70px 1fr; column-gap: 8px; align-items: baseline;
  padding: 7px 10px; border-radius: 8px; font-size: .86rem;
}
.slash-item .cmd { white-space: nowrap; }
.slash-item .args { margin: 0; font-size: .76rem; white-space: nowrap; }
.slash-item .sum { margin: 0; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==================================================================
   Phones: the setup pill shows only the niche, and a video row puts its
   buttons under the title instead of squeezing the title into a column.
   ================================================================== */
@media (max-width: 640px) {
  .setup-pill { min-width: 0; max-width: 42vw; flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
  .setup-pill #setupText { display: block; overflow: hidden; text-overflow: ellipsis; }
  .setup-pill #setupText .bit, .setup-pill #setupText .sep { display: none; }
  .vid { flex-wrap: wrap; }
  .vid .grow { flex: 1 1 calc(100% - 130px); min-width: 0; }
  .vid .vid-acts { order: 3; flex-direction: row; width: 100%; padding-left: 74px; }
  .vid .x { flex: 0 0 auto; }
}
.warn-t { color: var(--warn); font-weight: 600; }
.ch-av-l { display: grid; place-items: center; font-weight: 700; color: var(--ink-2); background: var(--surface-3); }

/* The shared niche picker inside the Patterns form: the card has its own
   padding, so the category strip does not bleed to the edges as in the drawer. */
.pt-form .cat-row { margin: 12px 0 4px; padding: 0 0 6px; }
.pt-form .np-groups { max-height: 280px; overflow-y: auto; padding-right: 4px; }
.pt-form .or-line { margin: 4px 0 10px; }
.ch-tags .tag.warn { background: var(--warn-soft, #fbf0e1); color: var(--warn); }

/* ---------- live: announcements, maintenance, switched-off features ---------- */
/* Announcement pop-up - quiet, product-style "what's new" card */
.ann-pop-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); display: grid; place-items: center; padding: 20px; animation: annFade .16s ease-out; }
.ann-pop {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; color: #0d0d0d; border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  animation: annIn .18s ease-out;
}
.ann-pop-media { background: #f4f4f4; }
.ann-pop-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ann-pop-body { padding: 26px 26px 22px; text-align: left; }
.ann-pop.has-media .ann-pop-body { padding-top: 22px; }
.ann-pop h2 { margin: 0 0 8px; padding-right: 28px; font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #0d0d0d; }
.ann-pop.has-media h2 { padding-right: 0; }
.ann-pop-text { color: #5d5d5d; font-size: .95rem; line-height: 1.55; }
.ann-pop-text p { margin: 0 0 10px; }
.ann-pop-text ul { margin: 4px 0 10px; padding: 0; list-style: none; }
.ann-pop-text li { position: relative; padding-left: 22px; margin: 0 0 8px; }
.ann-pop-text li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #0d0d0d; }
.ann-pop-when { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 11px; background: #f7f7f8; border-radius: 10px; font-size: .84rem; color: #5d5d5d; }
.ann-pop-when svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #8f8f8f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ann-pop-when b { color: #0d0d0d; font-weight: 600; }
.ann-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.ann-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.ann-btn-primary { background: #0d0d0d; color: #fff; }
.ann-btn-primary:hover { background: #2f2f2f; }
.ann-btn-ghost { background: transparent; color: #0d0d0d; border-color: #e3e3e3; }
.ann-btn-ghost:hover { background: #f4f4f4; }
.ann-btn:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }
.ann-pop-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; }
.ann-pop-x svg { width: 18px; height: 18px; fill: none; stroke: #5d5d5d; stroke-width: 2; stroke-linecap: round; }
.ann-pop-x:hover { background: #f0f0f0; }
.ann-pop.has-media .ann-pop-x { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.ann-pop.has-media .ann-pop-x svg { stroke: #0d0d0d; }
.ann-pop-more { margin-top: 12px; font-size: .78rem; color: #8f8f8f; text-align: right; }
@keyframes annFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes annIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ann-pop-back, .ann-pop { animation: none; } }
@media (max-width: 480px) {
  .ann-pop-body { padding: 22px 20px 18px; }
  .ann-pop-actions { flex-direction: column-reverse; }
  .ann-btn { width: 100%; }
}
.maintenance { position: fixed; inset: 0; z-index: 100; background: rgba(247, 247, 249, .96); display: grid; place-items: center; padding: 16px; }
.maintenance-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 32px 28px; max-width: 440px; text-align: center; }
.maintenance-card h2 { margin: 8px 0 8px; }
.maintenance-card p { margin: 0 0 8px; color: var(--ink-2); }
.maintenance-icon { font-size: 36px; }
.off-idea .act-script, .off-demand .act-demand { display: none !important; }
.signup-closed { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-xs); padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.tab[hidden] { display: none !important; }

/* ---------- premium auth screen ---------- */
.auth-screen { flex: 1; display: grid; place-items: center; padding: 28px 18px 48px; }
.auth-split { width: 100%; max-width: 940px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 34px; align-items: center; }
.auth-aside { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 40px 36px; color: #fff; background: linear-gradient(150deg, #141225 0%, #2a2358 52%, #43317e 100%); box-shadow: var(--sh-3); }
.auth-aside::after { content: ''; position: absolute; width: 360px; height: 360px; right: -140px; top: -160px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.auth-aside .brand { color: #fff; position: relative; margin-bottom: 30px; display: inline-flex; }
.auth-aside .brand-mark { background: #fff; color: #16161c; }
.auth-aside h2 { position: relative; margin: 0 0 22px; font-size: 1.7rem; line-height: 1.25; letter-spacing: -.02em; }
.auth-points { position: relative; list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.auth-points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .82); font-size: .95rem; line-height: 1.5; }
.auth-points li span { flex: none; width: 17px; height: 17px; margin-top: 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); position: relative; }
.auth-points li span::after { content: ''; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.auth-quote { position: relative; margin: 0; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .28); }
.auth-quote blockquote { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.auth-main { display: flex; flex-direction: column; gap: 12px; }
.auth-card { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-3); }
.auth-card h2 { margin: 0 0 4px; font-size: 1.35rem; letter-spacing: -.02em; }
.auth-sub { margin: 0 0 20px; }
.auth-card.shake, form.shake { animation: authShake .32s; }
@keyframes authShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.in-wrap { position: relative; }
.in-wrap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.in-wrap input { width: 100%; padding-left: 38px; padding-right: 42px; }
.in-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--r-xs); cursor: pointer; display: grid; place-items: center; }
.in-eye svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.in-eye:hover { background: var(--surface-3); }
.in-eye.on svg { stroke: var(--accent); }
.pw-meter { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.pw-meter i { height: 4px; flex: 1; border-radius: 999px; background: var(--surface-3); }
.pw-meter span { font-size: .76rem; color: var(--ink-3); min-width: 62px; text-align: right; }
.pw-meter[data-score="1"] i:nth-child(1), .pw-meter[data-score="2"] i:nth-child(-n+2), .pw-meter[data-score="3"] i:nth-child(-n+3), .pw-meter[data-score="4"] i { background: var(--warn); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #b8860b; }
.pw-meter[data-score="4"] i { background: var(--good); }
.auth-err { color: var(--bad); font-size: .86rem; min-height: 18px; margin: 2px 0 8px; }
.auth-go { padding: 12px; font-size: .98rem; }
.auth-switch { margin: 14px 0 0; text-align: center; font-size: .88rem; color: var(--ink-3); }
.linkish { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.linkish:hover { text-decoration: underline; }
.auth-legal { margin: 0; text-align: center; font-size: .78rem; color: var(--ink-3); }
@media (max-width: 880px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); max-width: 440px; gap: 18px; }
  .auth-aside { display: none; }
}

/* ---------- the research plan, folded above the cards ---------- */

.acc.plan .inner ul.tight { margin: 0 0 10px; }
/* A chip that is not a button does not move under the cursor, and its text
   can be selected - a search phrase is worth being able to copy. */
.chip.static { user-select: text; }
.chip.static:hover { border-color: var(--line); background: var(--surface); }
.plan-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.plan-row > .dim { flex: 0 0 128px; }
.plan-row .chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 220px; }
.plan-row ul.tight { flex: 1 1 220px; margin: 0; }
@media (max-width: 560px) {
  .plan-row > .dim { flex-basis: 100%; }
}

/* ---------- the setup could not load ---------- */

.setup-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--bad);
  border-radius: var(--r-md);
  background: var(--bad-soft, #fdf0f0);
  font-size: .9rem;
}
.setup-error b { color: var(--bad); }
.setup-error span { color: var(--ink-2); flex: 1 1 200px; }

/* ---------- which subject the next search uses ---------- */

/*
 * Inside the composer, between the box and the send button.
 *
 * It was above the composer and that was far enough away to be scenery. The
 * subject is what the send button is about to spend a search on, so it belongs
 * against it. Names are clipped rather than allowed to push the typing area
 * about; the full one is on the hover title either way.
 */
.subject-switch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 46%;
  margin-bottom: 5px;
}
.subject-switch .dim { font-size: .7rem; white-space: nowrap; }
.subject-switch .chip {
  padding: 4px 10px;
  font-size: .78rem;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* One subject is a label, not an offer - nothing to click, so nothing hovers. */
.subject-switch span.chip { cursor: default; }
@media (max-width: 620px) {
  .subject-switch { max-width: 52%; }
  .subject-switch .dim { display: none; }
  .subject-switch .chip { max-width: 84px; }
}

/* ============================================================
   Premium refinements (2026-10-18)
   Appended, not surgical — layered on top of the system above.
   CSS only: no markup or ids changed, so wiring/logic are untouched.
   ============================================================ */

/* Text selection and focus wear the brand accent. */
::selection { background: rgba(82, 68, 227, .16); }
:focus-visible { outline-color: var(--accent); }

/* Quiet, rounded scrollbars so long threads and reports feel considered. */
* { scrollbar-width: thin; scrollbar-color: #cfd0dc transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cfd0dc; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #b7b9c8; border: 3px solid transparent; background-clip: padding-box; }

/* The landing page gets a soft premium wash instead of a flat grey. */
#landing { background:
  radial-gradient(1100px 520px at 50% -10%, rgba(123, 95, 240, .10), transparent 60%),
  radial-gradient(760px 420px at 85% 0%, rgba(246, 199, 102, .10), transparent 55%);
}

/* Landing nav: a floating glass bar. */
#landing + .wrap, .page .wrap > .nav { }
.nav { backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); }

/* Buttons lift a hair on hover — premium, not bouncy. */
.btn { transition: background .15s, border-color .15s, transform .12s, box-shadow .15s, filter .15s; }
.btn-primary:hover { transform: translateY(-1px); }

/* Hero headline: a deep, confident ink with the faintest gradient. */
.hero h1 {
  background: linear-gradient(180deg, #17171f 0%, #35334a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #17171f;
}

/* Auth card: a hairline sheen along the top edge. */
.auth-card::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,95,240,.5), transparent);
}

/* Auth aside: a warm gold glow in the corner, over the existing white one. */
.auth-aside::before {
  content: ''; position: absolute; width: 300px; height: 300px; left: -120px; bottom: -150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(246,199,102,.22), transparent 70%);
  pointer-events: none;
}

/* Setup pill and section tabs: a touch more lift when live. */
.setup-pill:not(.empty) { border-color: var(--accent-line); background: var(--accent-soft); }
.setup-pill:not(.empty) b { color: var(--accent); }

/* Feature icons sit in a soft tinted tile. */
.feature .ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 14px;
}

/* Primary CTA on the hero carries the accent, not just ink — it is the one
   action the page is built around. */
#ctaStart, #navSignup {
  background: var(--accent-grad); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(82,68,227,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
#ctaStart:hover, #navSignup:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(82,68,227,.34); }

/* ============================================================
   Marketing site: new sections (nav links, stats, how, pricing,
   FAQ, contact, footer). CSS only; ids match index.html + site.js.
   ============================================================ */

/* Sticky glass nav on the marketing page. */
.page .wrap:first-child { position: sticky; top: 0; z-index: 50; background: rgba(244,245,251,.72); backdrop-filter: saturate(170%) blur(14px); -webkit-backdrop-filter: saturate(170%) blur(14px); border-bottom: 1px solid var(--line-soft); }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--ink-2); font-size: .9rem; font-weight: 540; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

/* Hero trust stats. */
.hero-stats { display: inline-flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.hero-stats > div { display: flex; flex-direction: column; align-items: center; }
.hero-stats b { font-size: 1.5rem; font-weight: 740; letter-spacing: -.02em; }
.hero-stats span { font-size: .82rem; color: var(--ink-3); margin-top: 2px; }

/* Section headings. */
.section-title { text-align: center; font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 72px 0 8px; letter-spacing: -.028em; scroll-margin-top: 86px; }
.section-sub { text-align: center; color: var(--ink-2); max-width: 560px; margin: 0 auto 30px; font-size: 1.02rem; }

/* A soft band for alternating sections. */
.band { margin: 20px 0; padding: 48px 34px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-soft); scroll-margin-top: 86px; }
.band .section-title { margin-top: 0; }

/* How it works — numbered steps. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-1); }
.step-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-grad); color: #fff; font-weight: 760; font-size: 1.05rem; margin-bottom: 14px; box-shadow: 0 6px 16px rgba(82,68,227,.28); }
.step h3 { margin-bottom: 7px; }
.step p { color: var(--ink-2); font-size: .92rem; margin: 0; }

/* Pricing. */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.price { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.price:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.price.featured { border-color: var(--accent-line); box-shadow: var(--sh-3); }
.price-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent-grad); color: #fff; font-size: .72rem; font-weight: 680; padding: 4px 12px; border-radius: var(--r-full); box-shadow: 0 6px 16px rgba(82,68,227,.3); white-space: nowrap; }
.price h3 { font-size: 1.1rem; }
.price-amt { font-size: 2.3rem; font-weight: 780; letter-spacing: -.03em; margin: 8px 0 2px; }
.price-amt span { font-size: 1rem; font-weight: 560; color: var(--ink-3); letter-spacing: 0; }
.price-note { color: var(--ink-3); font-size: .88rem; margin: 0 0 16px; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-list li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--ink-2); }
.price-list li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 5px; height: 9px; border: solid var(--good); border-width: 0 2px 2px 0; transform: rotate(42deg); }

/* FAQ — native details/summary accordion. */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px 18px; box-shadow: var(--sh-1); }
.faq-item summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 600; font-size: .98rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--ink-3); line-height: 1; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; color: var(--ink-2); font-size: .93rem; line-height: 1.6; }

/* Contact. */
.contact-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 36px; align-items: start; }
.contact-intro { padding-top: 6px; }
.contact-mail { display: inline-block; font-size: 1.1rem; font-weight: 640; color: var(--accent); }
.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-2); }

/* Footer. */
.site-foot { margin-top: 20px; padding: 48px 0 30px; border-top: 1px solid var(--line); background: var(--surface-2); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand .brand { margin-bottom: 12px; }
.foot-brand p { max-width: 280px; font-size: .88rem; }
.foot-col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 12px; }
.foot-col a { display: block; color: var(--ink-2); font-size: .9rem; margin-bottom: 9px; }
.foot-col a:hover { color: var(--ink); text-decoration: none; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: .84rem; color: var(--ink-3); gap: 12px; flex-wrap: wrap; }

/* Toasts on the marketing page. */
#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-full); font-size: .88rem; box-shadow: var(--sh-3); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .contact-split { grid-template-columns: 1fr; gap: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .band { padding: 34px 20px; }
  .hero-stats { gap: 26px; }
}

/* ============================================================
   Multi-page marketing: pages, demo mockups, CTA bands.
   CSS only; classes match the generated .html pages + site.js.
   ============================================================ */

.site-main { min-height: 50vh; }
.btn-lg { padding: 13px 24px; font-size: 1rem; }

/* Nav: active link + mobile drawer. */
.nav-links a.on { color: var(--ink); font-weight: 640; }
.nav-burger { display: none; }
.nav-drawer { display: none; flex-direction: column; gap: 2px; padding: 8px 4px 14px; }
.nav-drawer a { padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 540; }
.nav-drawer a:hover, .nav-drawer a.on { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.nav-drawer.open { display: flex; }

/* Sub-page hero. */
.page-hero { text-align: center; padding: 72px 0 36px; }
.page-hero h1 { max-width: 760px; margin: 14px auto 14px; font-size: clamp(2rem, 5vw, 3rem); }
.page-hero p { max-width: 580px; margin: 0 auto; color: var(--ink-2); font-size: 1.08rem; }

/* ---- App window mockup ---- */
.mock { max-width: 940px; margin: 8px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e0e1ea; }
.mock-bar i:nth-child(1) { background: #ff5f57; } .mock-bar i:nth-child(2) { background: #febc2e; } .mock-bar i:nth-child(3) { background: #28c840; }
.mock-url { margin-left: 12px; font-size: .78rem; color: var(--ink-3); background: var(--surface-3); padding: 4px 14px; border-radius: var(--r-full); font-family: var(--mono); }
.mock-body { padding: 22px; }
.mock-thread { max-width: 640px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 10px; }
.mock-msg { padding: 11px 15px; border-radius: 16px; font-size: .92rem; max-width: 85%; }
.mock-msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.mock-msg.bot { align-self: flex-start; background: var(--surface-3); color: var(--ink); border-bottom-left-radius: 5px; }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---- Video/channel cards ---- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.vcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s; }
.vcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.vthumb { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; }
.vplay { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9); color: #17171f; display: grid; place-items: center; font-size: .9rem; padding-left: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.vx { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); }
.vtitle { padding: 11px 13px 3px; font-size: .86rem; font-weight: 600; line-height: 1.35; }
.vmeta { padding: 0 13px 13px; font-size: .77rem; color: var(--ink-3); }

/* ---- Pattern cards ---- */
.pstack { display: flex; flex-direction: column; gap: 12px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 17px; box-shadow: var(--sh-1); }
.pcard-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pcard-head b { font-size: .9rem; }
.px { background: var(--accent-soft); color: var(--accent); font-weight: 720; font-size: .82rem; padding: 2px 10px; border-radius: var(--r-full); white-space: nowrap; }
.pbar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent-grad); }
.pmeta { margin-top: 8px; font-size: .78rem; color: var(--ink-3); }

/* ---- Feature rows (alternating text + demo) ---- */
.frow { display: grid; grid-template-columns: 1fr 1.1fr; gap: 46px; align-items: center; padding: 46px 0; }
.frow.rev .frow-text { order: 2; }
.frow-text h2 { font-size: 1.7rem; margin-bottom: 12px; letter-spacing: -.02em; }
.frow-text p { color: var(--ink-2); font-size: 1.02rem; max-width: 440px; }
.frow-demo .mock { margin: 0; }

/* ---- How-it-works steps ---- */
.hsteps { display: flex; flex-direction: column; gap: 10px; }
.hstep { display: grid; grid-template-columns: 1fr 1.1fr; gap: 46px; align-items: center; padding: 40px 0; }
.hstep.rev .hstep-text { order: 2; }
.hstep-text .step-n { margin-bottom: 16px; }
.hstep-text h2 { font-size: 1.6rem; margin-bottom: 10px; }
.hstep-text p { color: var(--ink-2); font-size: 1.02rem; max-width: 440px; }
.hstep-demo .mock { margin: 0; }
.chips-demo { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.chips-demo .chip { padding: 9px 16px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-size: .9rem; font-weight: 540; color: var(--ink-2); }
.chips-demo .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.script-demo { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 10px; }
.sd-line { font-size: .9rem; color: var(--ink-2); padding-left: 60px; position: relative; line-height: 1.5; }
.sd-line b { position: absolute; left: 0; top: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); font-weight: 700; width: 54px; }

/* ---- CTA band ---- */
.cta-band { text-align: center; margin: 80px 0 20px; padding: 56px 34px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, #2a2358 0%, #4f3fe0 60%, #6d5cf5 100%); box-shadow: var(--sh-3); position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: rgba(246,199,102,.18); }
.cta-band h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 8px; position: relative; }
.cta-band p { color: rgba(255,255,255,.82); margin-bottom: 22px; position: relative; }
.cta-band .btn { position: relative; }
.cta-band .btn-primary { background: #fff; color: var(--ink); }
.cta-band .btn-primary:hover { background: #fff; filter: brightness(.96); }

/* ---- Pricing comparison table ---- */
.cmp { max-width: 820px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.cmp table { width: 100%; border-collapse: collapse; background: var(--surface); }
.cmp th, .cmp td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.cmp th { background: var(--surface-2); font-weight: 680; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--ink-2); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td.y { color: var(--good); font-weight: 700; }

/* ---- Contact + About ---- */
.contact-item { margin-bottom: 22px; }
.contact-item h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-1); }
.about-card h3 { margin-bottom: 8px; }
.about-card p { color: var(--ink-2); font-size: .94rem; margin: 0; }

@media (max-width: 860px) {
  .nav-burger { display: grid; }
  .nav-links, .page .wrap > .nav > .row { display: none; }
  .mock-grid { grid-template-columns: 1fr; }
  .frow, .hstep { grid-template-columns: 1fr; gap: 24px; padding: 30px 0; }
  .frow.rev .frow-text, .hstep.rev .hstep-text { order: 0; }
  .cta-band { padding: 40px 22px; }
}

/* ============================================================
   SaaS additions: legal prose, testimonials, cookie banner.
   ============================================================ */

/* ---- Legal / prose pages ---- */
.legal { max-width: 760px; margin: 0 auto; padding: 8px 0 20px; }
.legal-meta { color: var(--ink-3); font-size: .86rem; margin: -8px 0 30px; text-align: center; }
.legal h2 { font-size: 1.25rem; margin: 34px 0 10px; letter-spacing: -.02em; scroll-margin-top: 90px; }
.legal h3 { font-size: 1rem; margin: 20px 0 6px; }
.legal p, .legal li { color: var(--ink-2); font-size: .96rem; line-height: 1.7; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 5px 0; }
.legal a { font-weight: 560; }
.legal .toc { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 30px; }
.legal .toc h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 10px; }
.legal .toc a { display: block; padding: 4px 0; font-size: .9rem; font-weight: 500; }

/* ---- Testimonials ---- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.tcard .stars { color: #e8a33d; font-size: .95rem; letter-spacing: 2px; margin-bottom: 12px; }
.tcard blockquote { margin: 0 0 18px; font-size: .98rem; line-height: 1.6; color: var(--ink); flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 11px; }
.tcard .ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .9rem; }
.tcard .who b { display: block; font-size: .9rem; }
.tcard .who span { display: block; font-size: .8rem; color: var(--ink-3); }

/* ---- Cookie banner ---- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; z-index: 300;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-4);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cookie.hide { display: none; }
.cookie p { margin: 0; font-size: .86rem; color: var(--ink-2); flex: 1 1 260px; }
.cookie p a { font-weight: 560; }
.cookie .row { gap: 8px; }

/* ============================================================
   Hero: a 3D-tilted, floating product view. CSS only.
   ============================================================ */

.hero { padding: 84px 0 34px; }
.hero-stage { position: relative; max-width: 980px; margin: 58px auto 40px; perspective: 1700px; }
.hero-glow { position: absolute; inset: -30px 6% 6%; z-index: 0; filter: blur(34px);
  background: radial-gradient(58% 62% at 46% 38%, rgba(109,92,245,.30), transparent 70%),
              radial-gradient(40% 46% at 82% 70%, rgba(246,199,102,.22), transparent 70%); }

.stage { position: relative; z-index: 1; transform: rotateX(11deg) rotateY(-17deg) rotateZ(1.2deg); animation: stageFloat 10s ease-in-out infinite; transform-style: preserve-3d; }
.stage-win { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 48px 100px rgba(23,23,60,.30), 0 14px 34px rgba(23,23,60,.16); overflow: hidden; }
.stage-body { padding: 20px 22px 24px; }
.stage-body .mock-msg.user { margin-left: auto; }
.stage-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.srow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--sh-1); }
.sthumb { width: 48px; height: 32px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.smeta { flex: 1; min-width: 0; }
.smeta b { display: block; font-size: .9rem; }
.smeta span { font-size: .76rem; color: var(--ink-3); }
.sx { background: var(--ink); color: #fff; font-weight: 740; font-size: .8rem; padding: 4px 11px; border-radius: var(--r-full); flex: none; }

.float-card { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-4); padding: 15px 17px; z-index: 3; }
.fcA { right: -46px; top: 54px; text-align: center; animation: floatA 6.5s ease-in-out infinite; }
.fcA-x { font-size: 1.9rem; font-weight: 820; line-height: 1; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fcA-l { font-size: .72rem; color: var(--ink-3); margin-top: 3px; }
.fcB { left: -58px; bottom: 56px; width: 234px; animation: floatB 8s ease-in-out infinite; }
.fcB b { font-size: .84rem; }
.fcB .pbar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: 9px 0 7px; }
.fcB .pbar i { display: block; height: 100%; background: var(--accent-grad); border-radius: var(--r-full); }
.fcB span { font-size: .72rem; color: var(--ink-3); }
.float-badge { position: absolute; left: 34px; top: -18px; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 580; padding: 8px 15px; border-radius: var(--r-full); display: inline-flex; align-items: center; gap: 9px; box-shadow: var(--sh-3); z-index: 4; animation: floatA 5.5s ease-in-out infinite; }
.float-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #28c840; animation: pulse 1.9s infinite; }

@keyframes stageFloat { 0%,100% { transform: rotateX(11deg) rotateY(-17deg) rotateZ(1.2deg) translateY(0); } 50% { transform: rotateX(8.5deg) rotateY(-13deg) rotateZ(.6deg) translateY(-12px); } }
@keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(13px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40,200,64,.6); } 70% { box-shadow: 0 0 0 8px rgba(40,200,64,0); } 100% { box-shadow: 0 0 0 0 rgba(40,200,64,0); } }

@media (prefers-reduced-motion: reduce) { .stage, .float-card, .float-badge, .float-badge .dot { animation: none !important; } }
@media (max-width: 900px) {
  .hero-stage { perspective: none; max-width: 560px; }
  .stage { transform: none; animation: none; }
  .float-card, .float-badge { position: static; animation: none; margin: 12px auto 0; display: block; width: auto; max-width: 320px; }
  .float-badge { width: max-content; }
}