/* ===========================================================================
   AdSpy v2 — the design system, ported from v1 ("Pixellab Ad Spy", port 4021).
   ---------------------------------------------------------------------------
   This file is v1's face. The owner rejected v2's own light theme:
   "design same banao jo v1 tool hai uske" — so every token, radius, colour and
   component below is v1's, taken verbatim from meta_main14/static/app.css and
   from the per-tab <style> blocks that actually won the cascade.

   Three deliberate differences from v1, and only three:

     1. ONE stylesheet. v1 layered app.css + an !important shell override
        injected by services/web.py + a 500-2700 line namespaced <style> per
        tab. The *effective* numbers from those layers are baked in here
        directly (sidebar 208px, nav-item 38px, ...) — no !important anywhere.

     2. Fonts are self-hosted (section 0). v1 pulled them from the Google CDN;
        v2 is a local tool and must render identically with the network
        unplugged.

     3. --muted / --panel / --panel-2 are DEFINED (section 1). v1 used them in
        tab CSS without ever declaring them, so those rules silently did
        nothing.

   Themes: html[data-theme="black"] (default) and html[data-theme="light"].
   Not "dark" — v1 says "black", and the toggle + localStorage agree.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. FONTS — self-hosted variable woff2. No CDN, no network.
   Same three families v1 asked Google for:
     Space Grotesk 400/500/600/700 - Inter 400/450/500/600 - JetBrains Mono
     400/500/600/700.
   The variable cut is deliberate: v1's tab CSS asks for 650/750/800/850/900
   weights that the static Google cuts silently round off. A face declared
   `font-weight: 300 700` / `100 900` renders them as written.
   Devanagari is not in these subsets — the owner's Hindi copy falls through to
   the system stack at the end of each font-family list, exactly as in v1.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   1. TOKENS — verbatim from v1 app.css:2-10.
--------------------------------------------------------------------------- */
:root{
  --bg:#08090b; --surface:#101216; --surface-2:#16191f; --surface-3:#1c2026;
  --border:#23272f; --border-soft:#1a1d23; --text:#e9ebef; --text-dim:#9aa1ab; --text-faint:#646b76;
  --amber:#f5a623; --amber-bright:#ffb838; --amber-dim:rgba(245,166,35,.10); --amber-line:rgba(245,166,35,.28);
  --green:#3ddc84; --green-dim:rgba(61,220,132,.12); --red:#ff6b6b; --red-dim:rgba(255,107,107,.12);
  --blue:#5ea8ff; --blue-dim:rgba(94,168,255,.1); --purple:#b794f6;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk',system-ui,'Noto Sans Devanagari',sans-serif;
  --sans:'Inter',system-ui,'Noto Sans Devanagari',sans-serif;
  --radius:14px; --radius-sm:10px;

  /* Declared here, not in v1: v1's tab CSS reached for these and got nothing.
     Aliases, so a rule written against either name lands in the same place. */
  --muted:var(--text-dim);
  --panel:var(--surface);
  --panel-2:var(--surface-2);

  /* One z-index ladder. v1 had six competing ones (topbar 20, drawer 90/100,
     modal 110, overview drawer 1090/1100, toast 1200, ad drawer 1500). */
  --z-topbar:20; --z-overlay:900; --z-drawer:1000; --z-toast:1100;
}

/* ---------------------------------------------------------------------------
   2. GLOBAL BASE — v1 app.css:11-19.
   The amber radial glow at 80% -10% is the signature of the look. Do not drop
   it: without it the whole thing reads flat.
--------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 600px at 80% -10%, rgba(245,166,35,.06), transparent 60%), var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;letter-spacing:.1px}
.mono,code{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.3px}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.small{font-size:11.5px}
.nowrap{white-space:nowrap}
.wrap{white-space:normal;overflow-wrap:anywhere}
.right{text-align:right}
.hide-md{}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#23272f;border-radius:10px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#2e333c}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);font-weight:600}

/* ---------------------------------------------------------------------------
   3. SHELL — effective geometry (app.css base + web.py's !important override,
   collapsed into one layer).
     sidebar column 208px (190px <=980px, 72px icon rail <=860px)
     sidebar padding 14px 10px 12px, gap 5px, sticky, full height
--------------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100vh}

.sidebar{width:208px;min-width:208px;background:linear-gradient(180deg,#0c0e12,#0a0b0e);border-right:1px solid var(--border-soft);padding:14px 10px 12px;display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}

.brand{display:flex;align-items:center;gap:9px;min-height:52px;padding:4px 8px 14px}
.brand-mark{width:34px;height:34px;min-width:34px;border-radius:10px;background:linear-gradient(135deg,var(--amber),#d6850f);display:grid;place-items:center;flex-shrink:0;box-shadow:0 0 0 1px rgba(245,166,35,.3),0 4px 16px rgba(245,166,35,.18);color:#0a0b0e}
.brand-mark svg{width:17px;height:17px}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-text .name{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.1;letter-spacing:.2px}
.brand-text .sub{margin-top:2px;font-size:11px;color:var(--text-faint);letter-spacing:.15em;text-transform:uppercase;font-weight:500}

.nav-label{font-size:11px;line-height:1;color:var(--text-faint);letter-spacing:.16em;text-transform:uppercase;padding:14px 10px 6px;margin:14px 9px 6px;font-weight:600}

.nav-item{display:flex;align-items:center;gap:10px;min-height:38px;margin:2px 0;padding:9px 10px;border-radius:9px;color:var(--text-dim);font-weight:500;font-size:14px;line-height:1.2;transition:.15s;text-align:left;width:100%;position:relative;text-decoration:none}
.nav-item span{text-decoration:none}
.nav-item svg{width:16px;height:16px;min-width:16px;flex-shrink:0;opacity:.85}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--amber-dim);color:var(--amber-bright);font-weight:600}
.nav-item.active svg{opacity:1}
/* v1's amber rail. It sits 4px outside the (10px-padded, overflow-x:hidden)
   sidebar, so v1 clips it and the owner has never seen it. Kept at exactly
   v1's offset so v2's sidebar is pixel-identical; the active state the owner
   actually reads is the amber-dim pill + amber-bright text + weight 600. */
.nav-item.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;background:var(--amber);border-radius:0 3px 3px 0}
/* v1 discarded every nav badge (nav_item() does `del badge`) and the shell
   override hid .nav-badge. No counts in v1's sidebar; none here. */
.nav-badge{display:none}
/* An item whose route is not registered yet renders inert rather than linking
   into the 404 page. `.disabled` is v1's name for it, `.is-soon` is v2's. */
.nav-item.disabled,.nav-item.is-soon{opacity:.45;cursor:not-allowed}
.nav-item.disabled:hover,.nav-item.is-soon:hover{background:transparent;color:var(--text-dim)}
.nav-soon{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}

.sidebar-foot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--border-soft)}
.sync-row{display:flex;align-items:center;gap:8px;padding:8px 6px;font-size:11px;color:var(--text-faint)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite;flex-shrink:0}
.sync-row.build-row{padding-top:0;padding-left:21px;font-family:var(--mono);font-size:10px;opacity:.75}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:var(--z-topbar);background:rgba(8,9,11,.82);backdrop-filter:blur(14px)}
.page-title{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:.2px}
.page-sub{font-size:12px;color:var(--text-faint);margin-top:1px}

.topbar-search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);padding:8px 13px;border-radius:10px;width:300px;transition:.15s}
.topbar-search:focus-within{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-dim)}
.topbar-search svg{width:15px;height:15px;color:var(--text-faint);flex-shrink:0}
.topbar-search input{background:none;border:none;color:var(--text);width:100%;font-size:13px;padding:0}
.topbar-search input:focus{box-shadow:none;border:none}
.topbar-search input::placeholder{color:var(--text-faint)}
.topbar-search kbd{font-family:var(--mono);font-size:10px;color:var(--text-faint);background:var(--surface-3);padding:2px 6px;border-radius:5px;border:1px solid var(--border);white-space:nowrap}

.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.theme-quick{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);display:grid;place-items:center;color:var(--text-dim);text-decoration:none}
.theme-quick:hover{background:var(--surface-2);color:var(--text)}
.theme-quick.wide{min-width:38px}
.avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#2a2e36,#1a1d22);display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--amber);border:1px solid var(--border)}

.content{padding:24px 28px 60px;max-width:1280px;width:100%}
.view{display:none;animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   4. PANELS, CARDS, KPI TILES
   .panel is the workhorse container. There is no .card in v1 and there is none
   here — a "card" is a .panel. Tables go in a bare .panel-body (6px 0) so the
   row rules reach the panel edge; prose and forms go in .panel-body.pad.
--------------------------------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
/* Page Analyzer's later, better .panel-head: a title that may wrap, actions
   that stay right-aligned. */
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;padding:17px 19px;border-bottom:1px solid var(--border-soft)}
.panel-head > div:first-child{min-width:0}
.panel-head h3{font-family:var(--display);font-size:clamp(15px,calc(.3vw + 13.5px),18px);font-weight:600;letter-spacing:.2px;line-height:1.3;margin:0}
.panel-head .desc{margin-top:4px;font-size:11.5px;color:var(--text-faint);line-height:1.45;overflow-wrap:anywhere}
.panel-head .actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.panel-body{padding:6px 0}
.panel-body.pad{padding:18px}
.panel-body.scroll{overflow-x:auto}

.result-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:18px}
.result-head{display:flex;align-items:flex-start;gap:14px}
.result-head .main-copy{flex:1;min-width:0}
.result-head h2{font:600 20px var(--display)}

.metric-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:16px}
.mini-metric{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;padding:11px}
.mini-metric .v{font:600 18px var(--mono)}
.mini-metric .l{font-size:10px;color:var(--text-faint);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.mini-metric.stale .v{color:var(--amber)}
.mini-metric.very-stale .v{color:#ef4444}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent 40%);pointer-events:none}
.kpi-label{font-size:11.5px;color:var(--text-dim);display:flex;align-items:center;gap:7px;font-weight:500}
.kpi-label .ic{width:26px;height:26px;border-radius:7px;background:var(--amber-dim);display:grid;place-items:center;color:var(--amber);font-family:var(--mono);font-size:12px;font-weight:600;flex-shrink:0}
.kpi-label .ic svg{width:14px;height:14px;color:var(--amber)}
.kpi-val{font-family:var(--mono);font-size:30px;font-weight:600;margin-top:12px;letter-spacing:-1px;line-height:1}
.kpi-delta{font-size:11.5px;margin-top:8px;display:flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:500;min-height:17px}
.kpi-delta.up{color:var(--green)}.kpi-delta.down{color:var(--red)}
.kpi-delta .lbl{color:var(--text-faint);font-family:var(--sans)}

/* pinned strip */
.pin-section-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin:0 0 11px;display:flex;align-items:center;gap:7px}
.pin-section-label svg{width:13px;height:13px;color:var(--amber)}
.pin-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:24px}
.pin-card{flex:0 0 200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:.15s;position:relative;text-align:left;color:inherit}
.pin-card:hover{border-color:var(--amber-line);transform:translateY(-2px)}
.pin-card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pin-card .pc-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pin-card .pc-name{font-weight:600;font-size:12.5px;line-height:1.2}
.pin-card .pc-cat{font-size:10px;color:var(--text-faint);margin-top:1px}
.pin-card .pc-ads{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--amber);line-height:1}
.pin-card .pc-ads span{font-family:var(--sans);font-size:10.5px;color:var(--text-faint);font-weight:400}
.pin-card .pc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:10.5px}
.pc-results{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.pc-results strong{font-family:var(--mono);font-size:13px;color:#82b9ff}
.pc-results span{font-size:9.5px;color:var(--text-faint)}
.pc-meta{font-size:10px;color:var(--text-faint);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-star{position:absolute;right:8px;top:8px;z-index:2}
.pin-empty{flex:1;padding:20px;border:1.5px dashed var(--border);border-radius:12px;text-align:center;color:var(--text-faint);font-size:12px}

/* ---------------------------------------------------------------------------
   5. TABLES — one table style, .tbl.
   No zebra striping in v1: separation is the 1px --border-soft bottom rule and
   the only shading is :hover -> --surface-2. `table.data` is v2's older name
   for the same object and is kept as an alias.
--------------------------------------------------------------------------- */
.table-wrap{width:100%;overflow-x:auto}
.tbl,table.data{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,table.data th{text-align:left;padding:10px 18px;font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.8px;font-weight:600;border-bottom:1px solid var(--border-soft);white-space:nowrap}
.tbl th.num,.tbl td.num,table.data th.num,table.data td.num{text-align:right;font-family:var(--mono)}
.tbl td,table.data td{padding:12px 18px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.tbl tr:last-child td,table.data tr:last-child td{border-bottom:none}
.tbl tbody tr,table.data tbody tr{transition:.12s}
.tbl tbody tr:hover,table.data tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.clickable,table.data tbody tr.clickable{cursor:pointer}
.tbl tbody tr:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.tbl th.tight,.tbl td.tight,table.data th.tight,table.data td.tight{width:28px;padding-right:0}
.tbl td.wrap,table.data td.wrap{white-space:normal;max-width:420px}
.rank{font-family:var(--mono);font-size:12px;color:var(--text-faint);width:24px}
.rank.top{color:var(--amber)}
.tbl code,table.data code{font-size:12px;background:var(--surface-2);padding:5px 7px;border-radius:6px;color:var(--text)}

/* the signature row: avatar + name + a muted second line */
.page-cell{display:flex;align-items:center;gap:10px;min-width:0}
.page-ava{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;flex-shrink:0;color:#08090b}
.page-name{font-weight:600;font-size:13.5px;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
/* The meta line under a name is ONE line by design. The truncation rule above
   only matched span/strong, and .page-meta is a div — so a product landing URL
   carrying its click-tracking tail (?c=…&fbclid=… , 300+ chars) wrapped to
   three lines, grew the row, and pushed Domain / Active / Pages / Age /
   Actions off the right edge. The full URL still lives in the title attribute. */
.page-meta{font-size:11px;color:var(--text-faint);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:330px}
/* A product cell is sized by its TITLE, not by whatever URL sits beneath it.
   min-width matters more than max here: once the URL stopped forcing the cell
   wide, the browser squeezed this column down to a single character and the
   titles became "r…". Give it a floor to sit on and a ceiling so it cannot go
   back to eating the row. */
.col-product{min-width:210px;max-width:400px}
/* A 9-column table cannot afford 18px of padding on both sides of every cell:
   that is 324px of air, and it was pushing Actions off the right edge inside
   the brand-group panel (876px of usable width for a 1152px table). */
.tbl.dense th,.tbl.dense td{padding-left:10px;padding-right:10px}
.tbl.dense .btn.sm{padding:4px 8px}
.tbl.dense .btn-row{gap:4px}
.col-product .page-name{max-width:300px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.col-product .page-meta{max-width:300px}
.page-copy{display:grid;gap:2px;min-width:0}
.page-copy strong,.page-copy span{display:block;max-width:310px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-copy span{color:var(--text-dim);font-size:12px}

/* numeric / live-count cells */
.adcount{font-family:var(--mono);font-weight:600;font-size:15px}
.adcount-live{display:inline-flex;align-items:center;gap:6px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1.8s infinite}
.trend-up,.delta-up{color:var(--green);font-family:var(--mono);font-size:11.5px;font-weight:600}
.trend-down,.delta-down{color:var(--red);font-family:var(--mono);font-size:11.5px;font-weight:600}
.trend-flat,.delta-flat{color:var(--text-faint);font-family:var(--mono);font-size:11.5px}
.trend-wrap{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.result-change{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--mono);font-size:9px;font-weight:750}
.result-change.up{color:var(--green)}
.result-change.down{color:var(--red)}
.result-change.flat,.result-change.neutral{color:var(--text-faint)}

/* "FB results" freshness colouring: >7d amber, >30d red */
.fb-cell{white-space:nowrap}
.fb-cell .fb-value{display:block;font-weight:750}
.fb-cell small{display:block;margin-top:2px;font:600 10px/1.3 var(--mono);color:var(--text-dim)}
.fb-cell.empty-value .fb-value{color:var(--text-dim);font-weight:650}
.fb-cell.empty-value small{opacity:.72;font-style:italic}
.fb-cell.stale .fb-value{color:var(--amber)}
.fb-cell.very-stale .fb-value{color:#ef4444}
.fb-cell.stale small,.fb-cell.very-stale small{color:inherit;opacity:.85}

/* staleness words used by the Pages screen */
.stale-ok{color:var(--green)}
.stale-warn{color:var(--amber-bright)}
.stale-bad{color:var(--red);font-weight:600}

/* pagination under a table */
.pagination{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 15px;flex-wrap:wrap}
.pagination .range,.pagination .page-controls{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-size:12px}
.pagination strong{color:var(--text);font-family:var(--mono)}

/* a sortable column header */
a.sort{color:inherit;display:inline-flex;align-items:center;gap:3px}
a.sort:hover{color:var(--text)}
a.sort.is-sorted{color:var(--amber-bright)}
.sort-caret{font-size:9px}

/* ---------------------------------------------------------------------------
   6. BUTTONS
   .btn.danger / .btn.warn are promoted from Page Analyzer's moderation pair —
   v1 had no shared danger button, so every tab reinvented one.
--------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;border-radius:9px;font-size:12.5px;font-weight:600;background:var(--surface-2);border:1px solid var(--border);color:var(--text);transition:.15s;text-decoration:none;white-space:nowrap}
.btn svg{width:14px;height:14px}
.btn:hover{background:var(--surface-3);border-color:#2e333c;color:var(--text)}
.btn.primary,.btn.btn-primary{background:linear-gradient(135deg,var(--amber),#e0900f);color:#0a0b0e;border:none;box-shadow:0 2px 12px rgba(245,166,35,.25)}
.btn.primary:hover,.btn.btn-primary:hover{background:linear-gradient(135deg,var(--amber-bright),var(--amber));box-shadow:0 4px 18px rgba(245,166,35,.35);color:#0a0b0e}
.btn.sm,.btn.small{padding:6px 11px;font-size:11.5px}
.btn.ghost{background:transparent;border-color:var(--border-soft)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.warn{color:#ffc14d;background:rgba(245,166,35,.16);border-color:rgba(245,166,35,.68)}
.btn.warn:hover,.btn.warn.on{color:#181006;background:#f5a623;border-color:#d88900}
.btn.danger{color:#ff6b78;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.58)}
.btn.danger:hover{color:#fff;background:#d73543;border-color:#d73543}
.btn.good{color:var(--green);background:var(--green-dim);border-color:rgba(61,220,132,.45)}
.btn[disabled],.btn:disabled{opacity:.52;cursor:not-allowed}
.btn-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.btn-stack{display:grid;grid-template-columns:1fr;gap:5px}
.btn-stack > .btn{width:100%}

/* icon-square toggles: favourite star, track pin */
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:#66758a;cursor:pointer;transition:.15s;flex-shrink:0}
.icon-btn svg{display:block;width:18px;height:18px;overflow:visible}
.icon-btn svg *{vector-effect:non-scaling-stroke}
.icon-btn:hover,.icon-btn.on{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 62%,var(--border));background:color-mix(in srgb,var(--amber) 10%,var(--surface-2))}
.icon-btn.track:hover,.icon-btn.track.on{color:#2f86dc;border-color:color-mix(in srgb,#5ea8ff 62%,var(--border));background:color-mix(in srgb,#5ea8ff 10%,var(--surface-2))}
.icon-btn[disabled]{opacity:.55;cursor:wait}

/* borderless star (Overview's variant — the one that wins there) */
.fav-star{border:0;background:transparent;color:var(--text-faint);cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;flex-shrink:0;transition:.15s}
.fav-star svg{width:18px;height:18px}
.fav-star:hover{background:var(--surface-2);color:var(--amber)}
.fav-star.on{color:var(--amber)}
.fav-star.on svg{filter:drop-shadow(0 0 4px rgba(245,166,35,.5))}

/* link-style pill buttons (internal / external) */
.page-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:5px;width:100%}
.page-link{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:30px;padding:0 7px;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--border);border-radius:8px;text-decoration:none;font-size:11px;font-weight:850;white-space:nowrap}
.page-link.internal{color:#2f86dc;border-color:rgba(47,134,220,.45);background:rgba(47,134,220,.08)}
.page-link.external{color:#d77d00;border-color:rgba(245,166,35,.52);background:rgba(245,166,35,.09)}
.page-link.disabled{opacity:.42;cursor:not-allowed}

.linklike{background:none;border:none;padding:0;font:inherit;font-size:12px;color:var(--blue);cursor:pointer}
.linklike:hover{text-decoration:underline}

/* ---------------------------------------------------------------------------
   7. INPUTS
--------------------------------------------------------------------------- */
.field{margin-bottom:14px}.field:last-child{margin-bottom:0}
.field label{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:7px;font-weight:500}
.field-hint,.field-note{font-size:10.5px;color:var(--text-faint);font-weight:400}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.input-lg,input[type=text],input[type=search],input[type=url],input[type=number],input[type=password],input[type=date]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 15px;color:var(--text);font-size:14px;transition:.15s}
.input-lg:focus,input[type=text]:focus,input[type=search]:focus,input[type=url]:focus,input[type=number]:focus,input[type=date]:focus{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-dim);outline:none}
.input-lg::placeholder,input::placeholder{color:var(--text-faint)}
input.sm,.input-sm,.inline-form input{padding:9px 12px;font-size:13px;border-radius:9px}
input[readonly]{color:var(--text-dim)}

.input-icon-wrap{position:relative}
.input-icon-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-faint)}
.input-icon-wrap input{padding-left:42px}

.select-pill,select{width:100%;background-color:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:13px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23646b76' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;cursor:pointer}
select:focus{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-dim);outline:none}
select.sm,.settings-select,.inline-form select{min-width:0;padding:9px 30px 9px 12px;font-size:12.5px;border-radius:9px}
.settings-select{min-width:145px}

.bulk-area,textarea{width:100%;min-height:120px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:13px 15px;color:var(--text);font-family:var(--mono);font-size:12.5px;resize:vertical;line-height:1.7}
.bulk-area:focus,textarea:focus{border-color:var(--amber-line);box-shadow:0 0 0 3px var(--amber-dim);outline:none}

.checkbox,input[type=checkbox]{accent-color:var(--amber);width:15px;height:15px;cursor:pointer}
.check{display:inline-flex;gap:6px;align-items:center;color:var(--text-dim);font-size:12.5px;cursor:pointer}

input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:5px;background:var(--surface-3);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 0 4px rgba(245,166,35,.18),0 2px 6px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 0 4px rgba(245,166,35,.18)}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.slider-val{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--amber-bright)}
.slider-val small{font-size:11px;color:var(--text-faint);font-family:var(--sans);font-weight:400;margin-left:4px}
.slider-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-top:8px}

.dropzone{border:1.5px dashed var(--border);border-radius:10px;padding:22px;text-align:center;color:var(--text-faint);font-size:12.5px;transition:.15s;cursor:pointer}
.dropzone:hover{border-color:var(--amber-line);background:var(--amber-dim);color:var(--text-dim)}
.dropzone svg{width:24px;height:24px;margin-bottom:8px;opacity:.7}

/* in-panel search box with a clear button */
.search-box{position:relative;width:min(430px,100%);min-width:0}
.search-box input{width:100%;height:42px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);padding:0 40px 0 13px;font-size:14px}
.search-box input::placeholder{color:var(--text-dim);opacity:1}
.search-box button{position:absolute;right:6px;top:5px;width:30px;height:30px;border:0;background:transparent;color:var(--text-dim);cursor:pointer;border-radius:7px}
.search-box button:hover{background:var(--surface-3);color:var(--text)}

.toolbar-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.toolbar-row .spacer{margin-left:auto}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{width:auto}

/* ---------------------------------------------------------------------------
   8. BADGES, CHIPS, PILLS
   Colour rule: completed/active green - failed/cancelled red - pending/claimed
   amber - running/info blue - neutral --text-dim on --surface-3. Always mono,
   10-10.5px, radius 20px/999px.
--------------------------------------------------------------------------- */
.tag{font-size:10.5px;font-family:var(--mono);padding:3px 9px;border-radius:20px;background:var(--surface-3);color:var(--text-dim);font-weight:500;white-space:nowrap}
.tag.live{background:var(--green-dim);color:var(--green)}
.tag.amber{background:var(--amber-dim);color:var(--amber-bright)}
.tag.blue{background:var(--blue-dim);color:var(--blue)}
.tag.red{background:var(--red-dim);color:var(--red)}
/* OLD DATA / NEW DATA — the dataset chip in every screen's title, and the
   switch button beside the theme toggle (templates/base.html, app/dataset.py). */
.dataset-chip{margin-left:10px;vertical-align:middle;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.dataset-switch{display:contents}
.dataset-switch-btn{width:auto;padding:0 10px;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;font-weight:600;color:var(--amber-bright)}
.dataset-switch-btn svg{width:14px;height:14px}
body[data-dataset="new"] .dataset-switch-btn{color:var(--text-dim)}
body[data-dataset="new"] .topbar{box-shadow:inset 0 2px 0 var(--green)}
body[data-dataset="old"] .topbar{box-shadow:inset 0 2px 0 var(--amber-line)}
.dataset-card.is-active{border-color:var(--amber-line)}
body[data-dataset="new"] .dataset-card.is-active{border-color:var(--green)}

.chip{font-size:11px;padding:3px 9px;border-radius:7px;background:var(--surface-3);color:var(--text-dim);font-weight:500;white-space:nowrap;display:inline-block}
.chip.prod{background:var(--blue-dim);color:var(--blue)}
.stack-chip{font-size:10.5px;font-family:var(--mono);padding:2px 8px;border-radius:6px;background:var(--blue-dim);color:var(--blue)}

.days-pill{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:6px;font-weight:500}
.days-pill.hot{background:var(--red-dim);color:var(--red)}
.days-pill.warm{background:var(--amber-dim);color:var(--amber-bright)}
.days-pill.cool{background:var(--surface-3);color:var(--text-dim)}

.status-pill,.badge{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--mono);padding:3px 8px;border-radius:20px;background:var(--surface-3);color:var(--text-dim);white-space:nowrap}
.status-pill.pending,.status-pill.claimed,.status-pill.queued,.status-pill.testing,
.badge-pending,.badge-claimed,.badge-queued{color:var(--amber-bright);background:var(--amber-dim)}
.status-pill.running,.status-pill.processing,
.badge-running{color:var(--blue);background:var(--blue-dim)}
.status-pill.completed,.status-pill.done,.status-pill.winner,.status-pill.active,
.badge-completed,.badge-done,.badge-active{color:var(--green);background:var(--green-dim)}
.status-pill.failed,.status-pill.cancelled,.status-pill.killed,.status-pill.error,
.badge-failed,.badge-cancelled,.badge-error{color:var(--red);background:var(--red-dim)}
.badge-inactive{color:var(--text-dim);background:var(--surface-3)}

.grp-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);color:var(--blue);background:var(--blue-dim);padding:1px 7px;border-radius:5px;margin-left:7px;font-weight:500}
.grp-badge svg{width:10px;height:10px}

.micro-badge{display:inline-flex;margin-left:7px;padding:2px 6px;border-radius:999px;background:rgba(94,168,255,.12);border:1px solid rgba(94,168,255,.28);color:#82b9ff;font-size:8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.45px;vertical-align:middle}
.micro-badge.amber{background:rgba(255,184,56,.1);border-color:rgba(255,184,56,.26);color:#ffc25f}
.micro-badge.green{background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 45%,var(--border));color:var(--green)}

.alias-badge{display:inline-flex;align-items:center;height:23px;padding:0 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--amber) 42%,var(--border));background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}

.live-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid rgba(61,220,132,.16);background:rgba(61,220,132,.09);color:var(--green);font-family:var(--mono);font-size:10px;font-weight:750;text-transform:lowercase}
.live-badge > span{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(245,166,35,.8)}
.live-badge.busy > span{animation:live-pulse 1.1s ease-in-out infinite}
.live-badge.stale{border-color:rgba(255,107,107,.2);background:rgba(255,107,107,.09);color:var(--red)}
.live-badge.stale > span{background:var(--red);box-shadow:none}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){
  .live-badge.busy > span,.sync-dot,.live-dot,.scan-spinner{animation:none}
}

/* ---------------------------------------------------------------------------
   9. PILL TABS — the in-page section switcher.
   v1 had three variants; .pill-tabs is variant A (Page Analyzer / Keyword
   Research / Products), which is what the owner means by "pill tabs".
   .filter-group is variant B (Overview's segmented tray).
   .u-tabs is variant C (Brand Groups' underline row).
--------------------------------------------------------------------------- */
.pill-tabs{display:flex;align-items:center;gap:7px;width:100%;max-width:100%;background:transparent;flex-wrap:wrap;margin-bottom:16px}
.pill-tab{min-height:40px;border:1px solid transparent;background:transparent;color:var(--text);padding:9px 15px;border-radius:8px;font-weight:750;font-size:14px;line-height:1.2;cursor:pointer;white-space:nowrap;display:flex;align-items:center;justify-content:center;text-decoration:none}
.pill-tab:hover{color:var(--text);background:var(--surface-2)}
.pill-tab.on,.pill-tab.is-active{color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:color-mix(in srgb,var(--amber) 42%,var(--border))}
.tab-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--muted);font:800 10px/1 var(--mono)}
.pill-tab.on .tab-count,.pill-tab.is-active .tab-count{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber-bright)}

.filter-group{display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);padding:4px;border-radius:10px}
.filter-btn{border:0;background:transparent;padding:6px 10px;border-radius:7px;font-size:11.5px;color:var(--text-dim);font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.filter-btn:hover{color:var(--text);background:var(--surface-2)}
.filter-btn.on,.filter-btn.is-active{background:rgba(245,166,35,.13);color:var(--amber-bright)}
.count-pill{display:inline-flex;min-width:22px;justify-content:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:rgba(255,184,56,.11);border:1px solid rgba(255,184,56,.26);color:#ffc25f;font-family:var(--mono);font-size:10px}
.result-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.section-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}
/* A .pill-tabs row is full-width on its own, which is right when it is the only
   thing on the line. Inside a .section-toolbar it is not alone — v1 keeps the
   trailing control on the SAME row (Products' "Extract All" sits at the end of
   the tab row, Winners' formula group sits opposite the mode segment) and the
   100% width was pushing every one of them onto a second row. Shrink to content
   there, and drop the 16px bottom margin that was stacking with the toolbar's
   own 18px. Above the 900px breakpoint only, so the mobile grid is untouched. */
@media(min-width:901px){
  .section-toolbar>.pill-tabs{width:auto;flex:0 1 auto;margin-bottom:0}
}

.u-tabs{display:flex;gap:5px;margin-top:15px;border-bottom:1px solid var(--border)}
.u-tab{height:34px;padding:0 11px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;font-weight:750;text-decoration:none;display:inline-flex;align-items:center}
.u-tab.active,.u-tab.is-active{color:var(--amber-bright);border-color:var(--amber)}

.toggle-grp{display:flex;gap:6px;background:var(--bg);padding:4px;border-radius:9px;border:1px solid var(--border)}
.toggle-grp button{flex:1;padding:7px;border-radius:6px;font-size:12px;color:var(--text-dim);font-weight:500;transition:.15s}
.toggle-grp button.on{background:var(--surface-3);color:var(--text)}
.toggle-grp button.on.amber{background:var(--amber);color:#0a0b0e}

@media(max-width:900px){
  .pill-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .pill-tab{width:100%;justify-content:center;white-space:normal;text-align:center;min-height:36px;padding:7px 12px}
}
@media(max-width:520px){.pill-tabs{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   10. AVATARS
   Deterministic 8-colour palette (Overview's). Foreground is always near-black
   because every swatch is light enough in both themes — avatars do not change
   with the theme.
--------------------------------------------------------------------------- */
.avatar-stack{display:flex}
.avatar-stack .mini{width:23px;height:23px;border-radius:6px;margin-left:-7px;border:2px solid var(--surface);display:grid;place-items:center;font-size:9px;font-weight:700;color:#0a0b0e;font-family:var(--display)}
.avatar-stack .mini:first-child{margin-left:0}

/* ---------------------------------------------------------------------------
   11. SPARKLINES, BARS, GRAPHS
--------------------------------------------------------------------------- */
.spark{display:inline-block;vertical-align:middle}

.prod-bars{display:flex;flex-direction:column;gap:2px;padding:8px 18px 14px}
.prod-bar{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit}
.prod-bar:last-child{border-bottom:none}
.prod-bar:hover{color:inherit}
.prod-bar .pname{width:200px;flex-shrink:0;font-weight:500;font-size:13px;display:flex;align-items:center;gap:8px;min-width:0}
.prod-rank{font-family:var(--mono);font-size:11px;color:var(--text-faint);width:18px;flex-shrink:0}
.prod-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod-title small{display:block;font-size:10px;color:var(--text-faint)}
.prod-track{flex:1;height:24px;background:var(--surface-2);border-radius:6px;overflow:hidden;position:relative}
.prod-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,rgba(245,166,35,.7),var(--amber));display:flex;align-items:center;justify-content:flex-end;padding-right:9px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.prod-fill .pv{font-family:var(--mono);font-size:11px;font-weight:600;color:#0a0b0e}
.prod-bar .ppages{width:90px;text-align:right;font-size:11px;color:var(--text-faint);font-family:var(--mono);flex-shrink:0}

.graph-wrap{padding:4px 14px 16px;overflow:auto}
.graph{display:block;width:100%;min-width:650px;height:auto}
.grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:4 6}
.axis-label{fill:var(--text-dim);font-size:11px;font-family:var(--mono)}
.gline{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gline.active{stroke:var(--amber)}
.gline.represented{stroke:#5ea8ff;opacity:.9}
.graph-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--text-dim);font-size:12px;padding:0 14px 10px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend-dot.active{background:var(--amber)}
.legend-dot.represented{background:#5ea8ff}

/* ---------------------------------------------------------------------------
   12. EMPTY STATES — three variants, all of them v1's.
--------------------------------------------------------------------------- */
.empty-state{padding:48px 24px;text-align:center;color:var(--text-faint)}
.empty-state svg{width:40px;height:40px;margin-bottom:12px;opacity:.4}
.empty-state .t{font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:4px}
.empty-inline{padding:28px;text-align:center;color:var(--text-faint)}
.empty-two{display:grid;place-items:center;text-align:center;gap:6px;padding:44px;color:var(--text-dim)}
.empty-two strong{font-size:16px;color:var(--text);font-family:var(--display)}
.empty-line{margin:6px 0;color:var(--text-faint)}
/* the 404 / boot placeholder */
.empty{padding:48px 24px;text-align:center;color:var(--text-dim);background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius)}
.empty h2{font-family:var(--display);font-size:20px;margin-bottom:6px;color:var(--text)}
.empty p{margin:4px 0}
@media(max-width:640px){.empty-two{padding:22px 15px}}

/* ---------------------------------------------------------------------------
   13. TOASTS, NOTICES, PROGRESS
   One toast: the global inverted chip (--text background on --bg text). That
   inversion is the distinguishing look — a black chip on dark, white on light.
--------------------------------------------------------------------------- */
.toast-host{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast);display:grid;gap:8px}
.toast-msg{background:var(--text);color:var(--bg);padding:10px 13px;border-radius:9px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:fade .2s ease}
.toast-msg.error{background:var(--red);color:#0a0b0e}

.notice,.flash{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);font-size:12px;color:var(--text-dim)}
.notice.amber,.flash-warning{background:var(--amber-dim);border-color:var(--amber-line);color:var(--amber-bright)}
.flash-error{background:var(--red-dim);border-color:rgba(255,107,107,.4);color:var(--red)}
.flash-success{background:var(--green-dim);border-color:rgba(61,220,132,.35);color:var(--green)}
.flashes{margin:16px 28px 0;max-width:1280px;display:flex;flex-direction:column;gap:8px}
.queue-hint{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:9px;background:var(--blue-dim);color:var(--blue);font-size:11.5px;margin-top:12px}
.queue-hint svg{width:15px;height:15px;flex-shrink:0}
.true-size{background:linear-gradient(135deg,var(--amber-dim),transparent);border:1px solid var(--amber-line);border-radius:10px;padding:11px 14px;font-size:12px;color:var(--text-dim);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.true-size svg{width:18px;height:18px;color:var(--amber);flex-shrink:0}
.true-size b{color:var(--amber-bright);font-family:var(--mono)}
.json-code{font:11px/1.65 var(--mono);white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:12px;max-height:220px;overflow:auto}

.progress{display:block;width:100%;min-width:120px}
.progress-track{display:flex;width:100%;height:8px;border-radius:999px;overflow:hidden;background:rgba(128,128,128,.22)}
.progress-seg{height:100%;transition:width .3s ease}
.progress-seg.done{background:#3bc86f}
.progress-seg.proc{background:repeating-linear-gradient(45deg,#f5a623,#f5a623 6px,#c9861a 6px,#c9861a 12px)}
.progress-seg.fail{background:#ef4444}
.progress-text{margin-top:4px;font:650 11px/1.4 var(--mono);color:var(--muted)}
.progress[data-state="stalled"] .progress-text,.progress[data-state="error"] .progress-text{color:#ef8f8f}
.progress[data-state="done"] .progress-text{color:#3bc86f}

/* live scrape console */
.scan-console{background:linear-gradient(180deg,#0a0c10,#080a0d);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:none}
.scan-console.show{display:block;animation:fade .3s}
.scan-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border-soft);background:rgba(245,166,35,.03)}
.scan-spinner{width:18px;height:18px;border:2px solid rgba(245,166,35,.25);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-title{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--amber-bright)}
.scan-meta{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-dim)}
.scan-progress{height:4px;background:var(--surface-3)}
.scan-bar{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-bright));width:0%;transition:width .2s;box-shadow:0 0 12px var(--amber)}
.scan-log{padding:14px 18px;font-family:var(--mono);font-size:11.5px;max-height:160px;overflow-y:auto;line-height:1.9}
.scan-log .ln{color:var(--text-dim)}.scan-log .ln .t{color:var(--text-faint)}.scan-log .ln .ok{color:var(--green)}.scan-log .ln .hl{color:var(--amber-bright)}
.scan-stats{display:flex;border-top:1px solid var(--border-soft)}
.scan-stat{flex:1;padding:14px 18px;border-right:1px solid var(--border-soft);text-align:center}.scan-stat:last-child{border-right:none}
.scan-stat .v{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text)}
.scan-stat .l{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px;margin-top:3px}

/* ---------------------------------------------------------------------------
   14. DRAWER + MODAL — app.css's own pair. v1 designed them and then never
   used them; every tab hand-rolled its own. One ladder, one look.
--------------------------------------------------------------------------- */
.drawer-overlay,.drawer-backdrop{position:fixed;inset:0;background:rgba(4,5,7,.7);backdrop-filter:blur(4px);z-index:var(--z-overlay);transition:.25s}
.drawer-overlay{opacity:0;pointer-events:none}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,92vw);background:var(--surface);border-left:1px solid var(--border);z-index:var(--z-drawer);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.5);overflow:hidden}
.drawer.slide{transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.drawer.slide.open{transform:none}
.drawer-head{padding:20px 22px;border-bottom:1px solid var(--border-soft);position:relative;flex:0 0 auto}
.drawer-close{position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;color:var(--text-faint);border:0;cursor:pointer;z-index:2}
.drawer-close:hover{background:var(--surface-3);color:var(--text)}
.drawer-close svg{width:15px;height:15px}
.drawer-kicker{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:5px}
.drawer-pagehead{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:42px}
.drawer-pagehead .page-ava{width:48px;height:48px;font-size:18px;border-radius:12px}
.drawer-pagehead .nm{font-family:var(--display);font-size:18px;font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.drawer-pagehead .mt{font-size:12px;color:var(--text-faint);margin-top:2px}
.drawer-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.drawer-statgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.dstat{background:var(--bg);border:1px solid var(--border-soft);border-radius:10px;padding:12px}
.dstat .v{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1.1}
.dstat .l{font-size:10.5px;color:var(--text-faint);margin-top:2px}
.drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:18px 22px 40px;scrollbar-gutter:stable}
.drawer-sec-title,.drawer-block h3{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin:18px 0 12px;font-family:var(--sans)}
.drawer-sec-title:first-child{margin-top:0}
.drawer-block{margin-top:20px}
.drawer-block:first-child{margin-top:0}
.drawer-block:first-child h3{margin-top:0}
.drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.creative-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.creative{background:var(--bg);border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;transition:.15s}
.creative:hover{border-color:var(--border)}
.creative-thumb{height:120px;background:linear-gradient(135deg,var(--surface-3),var(--surface-2));display:grid;place-items:center;position:relative}
.creative-thumb .fmt{position:absolute;top:8px;left:8px;font-size:9.5px;font-family:var(--mono);background:rgba(0,0,0,.6);padding:2px 7px;border-radius:5px;color:var(--text-dim)}
.creative-thumb svg{width:28px;height:28px;opacity:.3}
.creative-info{padding:10px}
.creative-info .ci-prod{font-size:11.5px;font-weight:600;margin-bottom:5px}
.creative-info .ci-meta{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--text-faint);font-family:var(--mono)}

.modal-overlay{position:fixed;inset:0;background:rgba(4,5,7,.72);backdrop-filter:blur(4px);z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;opacity:0;transition:.2s;padding:20px}
.modal-overlay.open{display:flex;opacity:1}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:460px;max-width:100%;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.6);z-index:var(--z-drawer)}
.modal.wide{width:820px}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-head h3{font-family:var(--display);font-size:16px;font-weight:600}
.modal-body{padding:18px 20px;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border-soft);display:flex;gap:10px;justify-content:flex-end}
.page-check-list{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;margin-top:8px;border:1px solid var(--border-soft);border-radius:10px;padding:6px}
.page-check{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:.12s}
.page-check:hover{background:var(--surface-2)}
.page-check input{width:16px;height:16px;accent-color:var(--amber);cursor:pointer}
.sheet{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:820px;max-width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.6)}

/* facts list used inside drawers */
.facts{display:grid;grid-template-columns:120px 1fr;gap:5px 12px;margin:0;font-size:12.5px}
.facts dt{color:var(--text-faint)}
.facts dd{margin:0;overflow-wrap:anywhere}
ul.plain{list-style:none;margin:0;padding:0}

/* ---------------------------------------------------------------------------
   15. KANBAN (Test Queue) — app.css's polished .kanban, not the tab's .tq-*.
--------------------------------------------------------------------------- */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(245px,1fr));gap:14px;align-items:start}
.kanban.four{grid-template-columns:repeat(4,1fr)}
.kanban.auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.kcol{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0}
.kcol-head{padding:13px 15px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:13px;font-weight:600;min-height:47px}
.kcol-head .dot{width:8px;height:8px;border-radius:50%;background:#798493;flex:0 0 auto}
.kcol[data-status="testing"] .dot{background:var(--amber)}
.kcol[data-status="running"] .dot{background:var(--blue)}
.kcol[data-status="winner"] .dot{background:var(--green)}
.kcol[data-status="killed"] .dot{background:var(--red)}
.kcol-head .kct{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint);background:var(--surface-3);padding:1px 8px;border-radius:20px}
.kcol-body{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:80px}
.kcard{background:var(--bg);border:1px solid var(--border-soft);border-radius:10px;padding:12px;transition:.15s;position:relative}
.kcard:hover{border-color:var(--border)}
.kcard .kc-kicker{font-family:var(--mono);font-size:10px;color:var(--text-faint);margin-bottom:4px}
.kcard .kc-prod{font-weight:600;font-size:13px;margin-bottom:8px;line-height:1.3}
.kcard .kc-meta{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--text-dim);margin-bottom:10px}
.kcard .kc-row{display:flex;justify-content:space-between;gap:8px}
.kcard .kc-row .v{font-family:var(--mono);color:var(--text)}
.kcard .kc-mb{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}
.kcard .kc-mb .mb-ava{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:8px;font-weight:700;color:#0a0b0e;font-family:var(--display)}
.kcard .kc-foot{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--border-soft);padding-top:9px}
.kmove{flex:1;padding:5px;border-radius:6px;font-size:10.5px;font-weight:600;background:var(--surface-2);color:var(--text-dim);border:1px solid var(--border-soft);transition:.12s}
.kmove:hover{background:var(--surface-3);color:var(--text)}
.kmove.win{color:var(--green)}.kmove.kill{color:var(--red)}
.kcard-del{position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:6px;color:var(--text-faint);display:grid;place-items:center;font-size:14px;line-height:1}
.kcard-del:hover{background:var(--surface-3);color:var(--red)}
.kcol-empty{color:var(--text-faint);font-size:11.5px;text-align:center;padding:14px 0}

/* ---------------------------------------------------------------------------
   16. FLOW STRIP - WINNER SCORE - DECISION SHEET
--------------------------------------------------------------------------- */
.flow-strip{display:flex;align-items:center;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.flow-step{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--text-dim)}
.flow-step.done{border-color:var(--amber-line);background:var(--amber-dim);color:var(--amber-bright)}
.flow-step .fs-num{width:20px;height:20px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.flow-step.done .fs-num{background:var(--amber);color:#0a0b0e}
.flow-arrow{width:16px;height:16px;color:var(--text-faint);flex-shrink:0}

.wscore{display:flex;align-items:center;gap:11px}
.wscore-ring{width:42px;height:42px;flex-shrink:0;position:relative}
.wscore-ring svg{transform:rotate(-90deg)}
.wscore-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}
.wscore-lbl{font-size:12px;font-weight:600}
.wscore-tag{font-size:10px;font-family:var(--mono);padding:1px 7px;border-radius:5px;margin-top:3px;display:inline-block}
.wt-proven{background:var(--green-dim);color:var(--green)}
.wt-rising{background:var(--amber-dim);color:var(--amber-bright)}
.wt-test{background:var(--blue-dim);color:var(--blue)}
.wt-weak{background:var(--surface-3);color:var(--text-faint)}

.ds-step{border:1px solid var(--border-soft);border-radius:12px;margin-bottom:14px;overflow:hidden}
.ds-step-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.ds-step-head .num{width:24px;height:24px;border-radius:7px;background:var(--amber);color:#0a0b0e;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:12px;flex-shrink:0}
.ds-step-head h4{font-family:var(--display);font-size:13.5px;font-weight:600}
.ds-step-head .hint{margin-left:auto;font-size:11px;color:var(--text-faint)}
.ds-step-body{padding:16px}
.score-factors{display:flex;flex-direction:column;gap:11px}
.sf-row{display:flex;align-items:center;gap:12px}
.sf-name{width:140px;flex-shrink:0;font-size:12.5px;color:var(--text-dim)}
.sf-track{flex:1;height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.sf-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,rgba(245,166,35,.6),var(--amber))}
.sf-val{width:54px;text-align:right;font-family:var(--mono);font-size:12px;font-weight:600}
.lp-grid{display:grid;grid-template-columns:200px 1fr;gap:16px}
.lp-shot{background:linear-gradient(135deg,var(--surface-3),var(--surface-2));border-radius:10px;height:150px;display:grid;place-items:center;color:var(--text-faint);font-size:11px;position:relative;overflow:hidden}
.lp-shot svg{width:30px;height:30px;opacity:.3}
.lp-shot .lp-url{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);padding:5px 9px;font-family:var(--mono);font-size:9.5px;color:var(--text-dim);text-align:left}
.lp-facts{display:flex;flex-direction:column;gap:9px}
.lp-fact{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding-bottom:9px;border-bottom:1px solid var(--border-soft)}
.lp-fact:last-child{border:none;padding:0}
.lp-fact .lf-k{color:var(--text-faint)}
.lp-fact .lf-v{font-weight:600;display:flex;align-items:center;gap:7px}
.ds-cta{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface-2);border-radius:12px;margin-top:4px;flex-wrap:wrap}
.ds-cta .assign{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}
.ds-cta select{width:auto;background-color:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:12.5px}
.ds-cta .btn{margin-left:auto}

/* ---------------------------------------------------------------------------
   17. BRAND GROUPS RAIL - SEARCH BUILDER - SAVED REPORTS
--------------------------------------------------------------------------- */
.search-builder{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:18px}

.groups-layout{display:grid;grid-template-columns:272px 1fr;gap:16px;align-items:start}
.group-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:84px}
.group-rail-head{padding:14px 16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:8px}
.group-rail-head h3{font-family:var(--display);font-size:13.5px;font-weight:600}
.group-rail-head .btn{margin-left:auto}
.group-item{padding:13px 16px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:.12s;border-left:3px solid transparent;display:block;width:100%;text-align:left;color:inherit}
.group-item:hover{background:var(--surface-2)}
.group-item.active{background:var(--amber-dim);border-left-color:var(--amber)}
.group-item .gi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:8px}
.group-item .gi-site{font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px;min-width:0}
.group-item .gi-site svg{width:13px;height:13px;color:var(--blue);flex-shrink:0}
.group-item .gi-ads{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--amber-bright)}
.group-item .gi-bot{display:flex;align-items:center;justify-content:space-between}
.group-item .gi-count{font-size:11px;color:var(--text-faint);font-family:var(--mono)}
.group-item.active .avatar-stack .mini{border-color:#1a160d}
.suggest-group{margin:10px;padding:12px;background:var(--blue-dim);border:1px dashed rgba(94,168,255,.32);border-radius:10px;font-size:11.5px;color:var(--text-dim);line-height:1.5}
.suggest-group b{color:var(--blue)}
.suggest-group .sg-act{margin-top:9px;display:flex;gap:8px}
.suggest-group button{font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px}
.sg-yes{background:rgba(94,168,255,.15);color:var(--blue)}
.sg-no{color:var(--text-faint)}

.report-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-bottom:18px}
.report-intro{padding:22px;background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);position:relative;overflow:hidden}
.report-intro::after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-100px;top:-130px;background:var(--amber-dim);filter:blur(2px)}
.report-intro h2{font-family:var(--display);font-size:20px;letter-spacing:.1px;margin-bottom:7px;position:relative;z-index:1}
.report-intro p{color:var(--text-dim);font-size:12.5px;max-width:660px;position:relative;z-index:1}
.report-intro .report-actions{display:flex;gap:9px;margin-top:18px;position:relative;z-index:1;flex-wrap:wrap}
.report-stat-card{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.report-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px}
.report-stat .rs-label{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.7px}
.report-stat .rs-value{font-family:var(--mono);font-size:23px;font-weight:600;margin-top:7px}
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.report-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px;transition:.16s;cursor:pointer}
.report-card:hover{transform:translateY(-2px);border-color:var(--amber-line);box-shadow:0 8px 26px rgba(0,0,0,.08)}
.report-card .rc-top{display:flex;align-items:flex-start;gap:11px}
.report-card .rc-icon{width:35px;height:35px;border-radius:9px;background:var(--amber-dim);color:var(--amber);display:grid;place-items:center;flex-shrink:0}
.report-card .rc-icon svg{width:17px;height:17px}
.report-card h3{font-family:var(--display);font-size:13.5px;font-weight:600}
.report-card p{font-size:11px;color:var(--text-faint);margin-top:3px;line-height:1.5}
.report-card .rc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:10.5px;color:var(--text-faint)}

/* ---------------------------------------------------------------------------
   18. SETTINGS
   v1's own /settings screen is an account manager (users, roles, switch
   account, logout) — decision #4 deletes all of that. What survives is these
   latent app.css components, which were designed for exactly this screen and
   never wired up.
--------------------------------------------------------------------------- */
.settings-layout{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.settings-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;position:sticky;top:84px}
.settings-rail a,.settings-rail button{width:100%;display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:8px;color:var(--text-dim);font-size:12.5px;font-weight:500;text-align:left;text-decoration:none}
.settings-rail a svg,.settings-rail button svg{width:15px;height:15px}
.settings-rail a:hover,.settings-rail button:hover{background:var(--surface-2);color:var(--text)}
.settings-rail a.active,.settings-rail button.active{background:var(--amber-dim);color:var(--amber-bright);font-weight:600}
.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.settings-section{padding:20px}
.settings-section+.settings-section{border-top:1px solid var(--border-soft)}
.settings-section h3{font-family:var(--display);font-size:15px;font-weight:600}
.settings-section>.desc{font-size:11.5px;color:var(--text-faint);margin-top:3px;margin-bottom:16px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.theme-choice{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px;text-align:left;transition:.16s;width:100%}
.theme-choice:hover{border-color:var(--amber-line)}
.theme-choice.active{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-dim)}
.theme-preview{height:128px;border-radius:9px;border:1px solid;display:grid;grid-template-columns:34px 1fr;gap:7px;padding:8px;overflow:hidden}
.theme-preview.dark{background:#08090b;border-color:#23272f}
.theme-preview.light{background:#f5f6f8;border-color:#d7dce2}
.theme-preview .tp-side,.theme-preview .tp-top,.theme-preview .tp-card{border-radius:5px;border:1px solid}
.theme-preview.dark .tp-side,.theme-preview.dark .tp-top,.theme-preview.dark .tp-card{background:#101216;border-color:#23272f}
.theme-preview.light .tp-side,.theme-preview.light .tp-top,.theme-preview.light .tp-card{background:#fff;border-color:#d7dce2}
.theme-preview .tp-main{display:grid;grid-template-rows:20px 1fr;gap:7px}
.theme-choice .tc-label{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.theme-choice .tc-label strong{font-size:12.5px}
.theme-choice .tc-label span{font-size:10.5px;color:var(--text-faint);display:block;margin-top:1px}
.theme-radio{width:18px;height:18px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;flex-shrink:0}
.theme-choice.active .theme-radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--amber)}
.setting-row{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border-soft)}
.setting-row:first-of-type{border-top:none}
.setting-copy strong{display:block;font-size:12.5px;font-weight:600}
.setting-copy span{display:block;font-size:10.5px;color:var(--text-faint);margin-top:2px}
.pref-switch{width:40px;height:23px;padding:2px;border-radius:20px;background:var(--surface-3);border:1px solid var(--border);transition:.16s;flex-shrink:0}
.pref-switch::after{content:"";display:block;width:17px;height:17px;border-radius:50%;background:var(--text-faint);transition:.16s}
.pref-switch.on{background:var(--amber);border-color:var(--amber)}
.pref-switch.on::after{transform:translateX(17px);background:#0a0b0e}
.settings-save-row{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

/* ---------------------------------------------------------------------------
   19. LIGHT THEME — v1's full override set, verbatim, plus the handful of
   components this file promoted out of tab CSS.
--------------------------------------------------------------------------- */
html[data-theme="light"]{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --surface-2:#f2f4f7;
  --surface-3:#e8ebef;
  --border:#d7dce2;
  --border-soft:#e8ebef;
  --text:#17191d;
  --text-dim:#58616d;
  --text-faint:#89919b;
  --amber:#d98a08;
  --amber-bright:#b96f00;
  --amber-dim:rgba(217,138,8,.11);
  --amber-line:rgba(217,138,8,.34);
  --green:#148653;
  --green-dim:rgba(20,134,83,.11);
  --red:#c53d43;
  --red-dim:rgba(197,61,67,.10);
  --blue:#256fc5;
  --blue-dim:rgba(37,111,197,.10);
  --purple:#7651bd;
}
html[data-theme="light"] body{background:radial-gradient(1200px 600px at 80% -10%, rgba(217,138,8,.08), transparent 60%), var(--bg)}
html[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff,#f8f9fb)}
html[data-theme="light"] .topbar{background:rgba(250,251,252,.88)}
html[data-theme="light"] .avatar{background:linear-gradient(135deg,#ffffff,#edf0f4)}
html[data-theme="light"] .scan-console{background:linear-gradient(180deg,#ffffff,#f7f8fa)}
html[data-theme="light"] .modal-overlay{background:rgba(40,45,52,.38)}
html[data-theme="light"] .drawer-overlay,
html[data-theme="light"] .drawer-backdrop{background:rgba(40,45,52,.30)}
html[data-theme="light"] .drawer{box-shadow:-20px 0 60px rgba(40,45,52,.18)}
html[data-theme="light"] .modal,
html[data-theme="light"] .sheet{box-shadow:0 30px 80px rgba(40,45,52,.22)}
html[data-theme="light"] .lp-shot .lp-url{background:rgba(255,255,255,.82)}
html[data-theme="light"] .brand-mark{box-shadow:0 0 0 1px rgba(217,138,8,.32),0 4px 16px rgba(217,138,8,.18)}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cbd1d8;border-color:var(--bg)}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#b6bec8}
html[data-theme="light"] .btn:hover{border-color:#c4cad2}
html[data-theme="light"] .group-item.active .avatar-stack .mini{border-color:#fff6e7}
html[data-theme="light"] .kpi::after{background:linear-gradient(135deg,rgba(0,0,0,.018),transparent 40%)}
html[data-theme="light"] .creative-thumb .fmt{background:rgba(255,255,255,.78);color:var(--text-dim)}
html[data-theme="light"] .media-count{background:rgba(23,25,29,.68)}
html[data-theme="light"] .toast-msg{box-shadow:0 12px 30px rgba(40,45,52,.18)}
/* the moderation pair inverts: v1's base colours for these are the light ones */
html[data-theme="light"] .btn.warn{color:#8a5400;background:rgba(245,166,35,.13);border-color:rgba(213,133,0,.58)}
html[data-theme="light"] .btn.warn:hover,html[data-theme="light"] .btn.warn.on{color:#181006;background:#f5a623;border-color:#d88900}
html[data-theme="light"] .btn.danger{color:#cf2638;background:rgba(239,68,68,.08);border-color:rgba(220,38,38,.48)}
html[data-theme="light"] .btn.danger:hover{color:#fff;background:#d73543;border-color:#d73543}
html[data-theme="light"] .topbar-search input,
html[data-theme="light"] .input-lg,
html[data-theme="light"] .bulk-area,
html[data-theme="light"] textarea,
html[data-theme="light"] input,
html[data-theme="light"] .select-pill,
html[data-theme="light"] select{color-scheme:light}
html[data-theme="black"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* ---------------------------------------------------------------------------
   20. RESPONSIVE — one ladder, not v1's three conflicting ones.
     >=981px   full 208px sidebar
     861-980   190px sidebar
     <=860     72px icon rail. (v1 had a rule that deleted the sidebar entirely
               at <=860 and another that resurrected it as a 72px rail at
               <=640; the second won by cascade order, so the rail is what the
               owner actually has.)
--------------------------------------------------------------------------- */
@media(max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .search-builder{grid-template-columns:1fr}
  .groups-layout{grid-template-columns:1fr}
  .group-rail{position:static}
  .settings-layout{grid-template-columns:1fr}
  .settings-rail{position:static;display:flex;overflow-x:auto}
  .settings-rail a,.settings-rail button{width:auto;white-space:nowrap}
  .report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-hero{grid-template-columns:1fr}
  .hide-md{display:none}
}
@media(max-width:980px){
  .app{grid-template-columns:190px minmax(0,1fr)}
  .sidebar{width:190px;min-width:190px}
}
@media(max-width:900px){.metric-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:72px minmax(0,1fr)}
  .sidebar{width:72px;min-width:72px;padding-left:10px;padding-right:10px}
  .brand-text,.nav-item span:not(.nav-badge),.nav-label,.nav-soon,.sidebar-foot{display:none}
  .nav-item{justify-content:center}
  .nav-item.active::before{left:-10px}
  .content{padding:18px 16px 50px}
  .flashes{margin:14px 16px 0}
  .topbar{padding:14px 16px}
  .topbar-search{width:auto;flex:1;min-width:0}
  .topbar-search kbd{display:none}
  .kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .report-grid,.theme-grid{grid-template-columns:1fr}
  .report-stat-card{grid-template-columns:1fr 1fr}
  .setting-row{align-items:flex-start;padding:14px 0}
  .settings-select{min-width:120px}
  .drawer-statgrid,.drawer-statgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .metric-row{grid-template-columns:repeat(2,1fr)}
  .topbar-search{display:none}
  .content{padding:18px 14px 50px}
  .kanban{grid-template-columns:1fr}
  .creative-grid{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   21. SCREEN COMPONENTS
   Things v1's mockup never had a class for, because v1 built them inside a
   per-tab <style> block: the real ad card (v1's .creative is a placeholder
   with no image in it), the job card, the "since the last scan" band, the
   extension-token box. Written with the same tokens and the same radii as
   everything above, so they read as part of the system rather than bolted on.
--------------------------------------------------------------------------- */

/* --- ad card + grid (Page Analyzer, page detail, drawer) ------------------ */
.ad-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ad-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.ad-card:hover{border-color:var(--amber-line)}
.ad-card-open{all:unset;cursor:pointer;display:block;position:relative}
.ad-card-open:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.ad-media{display:block;width:100%;height:150px;object-fit:cover;background:var(--surface-2);border-bottom:1px solid var(--border-soft)}
.ad-media.is-tall{height:auto;max-height:420px;object-fit:contain;border:1px solid var(--border-soft);border-radius:var(--radius-sm)}
.ad-media-empty{display:grid;place-items:center;color:var(--text-faint);font-size:12px}
.media-count{position:absolute;right:6px;bottom:6px;background:rgba(4,5,7,.68);color:#fff;border-radius:999px;padding:1px 8px;font-family:var(--mono);font-size:10px}
.ad-card-body{padding:10px 11px;display:flex;flex-direction:column;gap:5px}
.ad-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11.5px;font-family:var(--mono);color:var(--text-dim)}
.days-running{color:var(--text-faint)}
.ad-headline{font-weight:600;font-size:13px;line-height:1.35}
.ad-text{color:var(--text-dim);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.ad-body{color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6}
.ad-card-foot{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;margin-top:2px;color:var(--blue)}
.ad-card-foot a{color:var(--blue)}
.ad-card-foot a:hover{color:var(--blue);text-decoration:underline}
.drawer-media-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:11.5px}
/* A drawer fragment is dropped INTO .drawer-body, so its own .drawer-head has
   to pull back out to the drawer's edges or it is padded twice. */
.drawer-body > .drawer-head:first-child{margin:-18px -22px 18px}
.versions{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:14px}
.versions li{padding-left:2px}
.version-head{display:flex;gap:8px;align-items:baseline}
.version-head strong{font-family:var(--mono);color:var(--amber-bright);font-size:12px}

/* --- the "since the last scan" band (page detail) ------------------------- */
.changes-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.changes-col{border-top:3px solid var(--border);padding-top:12px}
.changes-col.new{border-top-color:var(--green)}
.changes-col.stopped{border-top-color:var(--red)}
.changes-col h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-faint);margin-bottom:10px;font-family:var(--sans);font-weight:600;display:flex;align-items:center;gap:7px}
@media(max-width:900px){.changes-cols{grid-template-columns:1fr}}

/* --- job card (Queue) ---------------------------------------------------- */
.job{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.job.is-open{border-color:var(--amber-line)}
.job.is-bad{border-color:rgba(255,107,107,.45)}
.job-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.job-title{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.job-title a{font-family:var(--mono);color:var(--text-faint)}
.job-title a:hover{color:var(--amber-bright)}
.job-title strong{font-weight:600}
.job-actions{display:flex;gap:6px;align-items:center}
.job-progress{height:6px;background:var(--surface-2);border-radius:999px;margin:12px 0 9px;overflow:hidden}
.job-progress-fill{height:100%;background:linear-gradient(90deg,rgba(245,166,35,.7),var(--amber));transition:width .3s ease}
.job.is-bad .job-progress-fill{background:var(--red)}
.job-facts{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;font-family:var(--mono);color:var(--text-faint);margin-bottom:10px}
.job-error{border-left:3px solid var(--red);background:var(--red-dim);color:var(--text-dim);padding:9px 12px;border-radius:var(--radius-sm);margin:0 0 12px;font-size:12px}
.job-error strong{font-family:var(--mono);color:var(--red);margin-right:6px}
.job .table-wrap{border:1px solid var(--border-soft);border-radius:var(--radius-sm);overflow:auto}
.job .tbl th,.job table.data th{padding:9px 12px}
.job .tbl td,.job table.data td{padding:9px 12px}

/* --- stat strip used above a list (Pages, page detail) ------------------- */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 17px;min-width:118px;display:flex;flex-direction:column;gap:3px}
.stat-num{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.stat-label{color:var(--text-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.stat-spark{color:var(--amber);justify-content:center}

/* --- extension connection box (Pages) ------------------------------------ */
.token-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px}
.token-box summary{cursor:pointer;color:var(--text-dim);font-size:12.5px;font-weight:600;list-style:none}
.token-box summary::-webkit-details-marker{display:none}
.token-box summary::before{content:"+ ";font-family:var(--mono);color:var(--amber)}
.token-box[open] summary::before{content:"- "}
.token-inner{padding-top:12px;display:flex;flex-direction:column;gap:6px;min-width:330px}
.token-inner label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px}
.copy-row{display:flex;gap:6px;align-items:center}
.copy-row input{flex:1 1 auto;font-family:var(--mono);font-size:12px}

/* --- misc row helpers ---------------------------------------------------- */
.bulk-bar{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.screen-toolbar{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
tr.is-hidden-page td{opacity:.55}
.delta-btn{background:none;border:none;font:600 13px var(--mono);cursor:pointer;padding:0 2px}
.delta-btn.delta-up{color:var(--green)}
.delta-btn.delta-down{color:var(--red)}
.delta-btn.delta-flat{color:var(--text-faint);font-weight:400}
.delta-btn:hover{text-decoration:underline}