:root {
  --ink-0:#0b0907; --ink-1:#12100e; --ink-2:#1c1915; --ink-3:#28241e; --ink-4:#362f27;
  --rule:#3a342b; --rule-strong:#4d453a;
  --bone-0:#fbf8f0; --bone-1:#ede6d7; --bone-2:#c4baa3; --bone-3:#8f8670; --bone-4:#645c4c;
  --brick:#b8413a; --brick-hi:#d45a52; --brick-wash:rgba(184,65,58,.10); --brick-rule:rgba(184,65,58,.32);
  --moss:#6b9460; --amber:#c8872e; --rust:#c85a3c; --slate:#7a8a9c;
  --format-static:#6b8ead; --format-video:#c8872e; --format-creator:#a8555e;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 4px 14px rgba(0,0,0,.45); --shadow-3:0 20px 48px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing:border-box; }

body {
  margin:0; min-height:100vh;
  background:
    radial-gradient(circle at 18% -4%, rgba(184,65,58,.10), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(122,138,156,.05), transparent 26rem),
    var(--ink-1);
  color:var(--bone-1);
  font:14px/1.45 "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* subtle paper grain — the DESIGN.md signature that kills the flat-UI feel */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

button, select, input { font:inherit; }
.shell { position:relative; z-index:1; max-width:1720px; margin:0 auto; padding:32px 26px 80px; }

.top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:22px; border-bottom:1px solid var(--rule); }
.eyebrow, .label {
  display:inline-flex; align-items:center; gap:9px;
  color:var(--bone-3); font:500 11px/1.2 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before { content:""; width:26px; height:1px; background:var(--brick); }
h1 { margin:14px 0 0; color:var(--bone-0); font:500 46px/.96 "Fraunces", Georgia, serif; letter-spacing:-.025em; }
h1 em { font-style:italic; font-weight:400; color:var(--brick); }
.sub { max-width:760px; margin-top:11px; color:var(--bone-2); }
.controls { display:flex; align-items:center; gap:8px; }

.btn {
  min-height:34px; padding:8px 13px; border:1px solid var(--rule); border-radius:6px;
  background:var(--ink-3); color:var(--bone-2); cursor:pointer; transition:all var(--ease) .18s;
}
.btn:hover { color:var(--bone-0); border-color:var(--rule-strong); background:var(--ink-4); }
.btn:disabled { opacity:.6; cursor:default; }
.btn-cost { color:var(--amber); border-color:rgba(200,135,46,.42); background:rgba(200,135,46,.10); }
.btn-cost:hover { color:#f1d9b0; border-color:rgba(200,135,46,.6); background:rgba(200,135,46,.18); }

.backfill-progress {
  margin-top:14px; padding:10px 14px; border:1px solid rgba(200,135,46,.38); border-radius:8px;
  background:rgba(200,135,46,.08); color:var(--bone-1);
  font:500 12px/1.4 var(--mono); letter-spacing:.02em;
  display:flex; align-items:center; gap:9px;
}
.backfill-progress::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); flex:none;
  animation:pulse 1.4s var(--ease) infinite;
}
.backfill-progress.warn { border-color:rgba(200,90,60,.5); background:rgba(200,90,60,.10); color:var(--bone-1); }
.backfill-progress.warn::before { background:var(--rust); animation:none; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.seg { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--rule); border-radius:7px; background:var(--ink-2); }
.seg button {
  min-height:30px; padding:6px 11px; border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--bone-3); cursor:pointer; transition:all var(--ease) .15s;
  font-variant-numeric:tabular-nums;
}
.seg button:hover { color:var(--bone-0); }
.seg button.active { background:var(--ink-4); color:var(--bone-0); border-color:var(--rule-strong); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.sort-seg button.active.desc::after { content:" ▾"; color:var(--brick-hi); }
.sort-seg button.active.asc::after { content:" ▴"; color:var(--brick-hi); }

/* ── Layout ──────────────────────────────────────────────────── */
.layout { display:grid; grid-template-columns:312px 1fr; gap:26px; align-items:start; margin-top:24px; }

.rail { position:sticky; top:18px; border:1px solid var(--rule); border-radius:12px; background:var(--ink-2); overflow:hidden; box-shadow:var(--shadow-1); }
.rail-head { display:flex; flex-direction:column; gap:11px; padding:15px 14px 13px; border-bottom:1px solid var(--rule); }
.rail-search { width:100%; padding:9px 11px; border:1px solid var(--rule); border-radius:6px; background:var(--ink-1); color:var(--bone-1); }
.rail-search:focus { outline:none; border-color:var(--brick); box-shadow:0 0 0 3px var(--brick-wash); }
.rail-head-top { display:flex; align-items:center; justify-content:space-between; }
.matched-toggle { display:inline-flex; align-items:center; gap:6px; color:var(--bone-3); font:500 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.matched-toggle input { accent-color:var(--brick); cursor:pointer; margin:0; }
.rail-sort { display:flex; align-items:center; gap:9px; }
.rail-sort .tb-label { color:var(--bone-4); margin:0; }
.sel-sm { flex:1; min-height:30px; max-width:none; padding:5px 9px; font-size:12px; }

.rail-list { max-height:74vh; overflow-y:auto; padding:6px; }
.rail-list::-webkit-scrollbar { width:9px; } .rail-list::-webkit-scrollbar-thumb { background:var(--ink-4); border-radius:9px; }

.prod {
  display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border:1px solid transparent; border-radius:9px; background:transparent;
  color:var(--bone-1); text-align:left; cursor:pointer; transition:all var(--ease) .15s;
}
.prod:hover { background:var(--ink-3); }
.prod.active { background:var(--ink-3); border-color:var(--rule-strong); box-shadow:inset 3px 0 0 var(--brick); }
.prod-thumb { width:42px; height:42px; border-radius:7px; object-fit:cover; background:var(--ink-1); border:1px solid var(--rule); }
.prod-thumb.broken { visibility:hidden; }
.prod-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
.prod-name small { display:block; margin-top:1px; color:var(--bone-3); font:500 10px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.prod-count { color:var(--bone-1); font:600 13px/1 var(--mono); font-variant-numeric:tabular-nums; }
.prod-count.zero { color:var(--bone-4); }

.main { min-width:0; }

/* ── Summary strip ───────────────────────────────────────────── */
.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:22px 0 0; border:1px solid var(--rule); border-radius:11px; background:var(--rule); overflow:hidden; }
.sum-cell { min-height:78px; padding:14px 16px; background:var(--ink-2); }
.sum-cell span { color:var(--bone-3); font:500 10px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.sum-cell strong { display:block; margin-top:7px; color:var(--bone-0); font:600 24px/1.05 var(--mono); font-variant-numeric:tabular-nums; }

/* ── Product hero (selected) ─────────────────────────────────── */
.hero {
  display:grid; grid-template-columns:138px 1fr; gap:22px; padding:20px; margin-bottom:18px;
  border:1px solid var(--rule); border-radius:14px;
  background:linear-gradient(180deg, rgba(184,65,58,.07), transparent 58%), var(--ink-2);
  box-shadow:var(--shadow-2); animation:rise .34s var(--ease) both;
}
.hero[hidden] { display:none; }
.hero-thumb { width:138px; height:138px; border-radius:11px; object-fit:cover; border:1px solid var(--rule); background:var(--ink-1); }
.hero-thumb.broken { display:grid; place-items:center; color:var(--bone-4); font:500 11px var(--mono); }
.hero-main { min-width:0; display:flex; flex-direction:column; gap:14px; }
.hero-name { color:var(--bone-0); font:500 30px/1.02 "Fraunces", Georgia, serif; letter-spacing:-.02em; }
.hero-name em { font-style:italic; color:var(--brick-hi); font-weight:400; }
.hero-stats { display:flex; flex-wrap:wrap; gap:1px; border:1px solid var(--rule); border-radius:9px; background:var(--rule); overflow:hidden; }
.hstat { flex:1; min-width:108px; padding:11px 14px; background:var(--ink-1); }
.hstat span { color:var(--bone-3); font:500 9px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.hstat strong { display:block; margin-top:5px; color:var(--bone-0); font:600 21px/1 var(--mono); font-variant-numeric:tabular-nums; }
.hstat.accent strong { color:var(--brick-hi); }

/* match-source composition bar */
.match-bar { display:flex; flex-direction:column; gap:7px; }
.mbar-track { display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--ink-1); border:1px solid var(--rule); }
.mbar-seg { height:100%; }
.mbar-seg.bundle { background:var(--bone-1); } .mbar-seg.ocr { background:var(--brick); }
.mbar-seg.visual { background:var(--amber); } .mbar-seg.aaof { background:var(--slate); }
.mbar-legend { display:flex; flex-wrap:wrap; gap:13px; }
.mlg { display:inline-flex; align-items:center; gap:6px; color:var(--bone-3); font:500 10px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.mlg i { width:8px; height:8px; border-radius:2px; display:inline-block; }
.mlg b { color:var(--bone-1); font-weight:600; }

/* ── Format-mix mini viz ─────────────────────────────────────── */
.viz { padding:16px 18px; margin-bottom:18px; border:1px solid var(--rule); border-radius:12px; background:var(--ink-2); }
.viz-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:13px; }
.viz-rows { display:grid; gap:9px; }
.vbar { display:grid; grid-template-columns:130px 1fr 92px; align-items:center; gap:12px; }
.vbar-label { color:var(--bone-2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vbar-track { height:10px; border-radius:6px; background:var(--ink-1); border:1px solid var(--rule); overflow:hidden; }
.vbar-fill { height:100%; border-radius:6px; transition:width .5s var(--ease); }
.vbar-fill.static { background:var(--format-static); } .vbar-fill.video { background:var(--format-video); }
.vbar-fill.creator { background:var(--format-creator); } .vbar-fill.other { background:var(--bone-4); }
.vbar-val { text-align:right; color:var(--bone-2); font:500 11px/1.2 var(--mono); font-variant-numeric:tabular-nums; }
.vbar-val b { color:var(--bone-0); }

/* ── Toolbar ─────────────────────────────────────────────────── */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.toolbar[hidden] { display:none; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sel { min-height:34px; max-width:210px; padding:7px 10px; border:1px solid var(--rule); border-radius:7px; background:var(--ink-2); color:var(--bone-1); cursor:pointer; }
.sel:focus { outline:none; border-color:var(--brick); box-shadow:0 0 0 3px var(--brick-wash); }
.tb-label { color:var(--bone-3); font:500 10px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-right:2px; }

/* ── Ad card grid ────────────────────────────────────────────── */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:18px; }
.ad-card {
  display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:13px;
  background:var(--ink-2); overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform var(--ease) .2s, border-color var(--ease) .2s, box-shadow var(--ease) .2s;
  animation:rise .3s var(--ease) both;
}
.ad-card:hover { transform:translateY(-3px); border-color:var(--rule-strong); box-shadow:var(--shadow-2); }
.ad-card.top { border-color:var(--brick-rule); }
.ad-card.top::before { content:"Top performer"; display:block; padding:5px 13px; background:var(--brick); color:var(--bone-0); font:600 9px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; }

.ad-media { position:relative; aspect-ratio:1/1; background:var(--ink-1); border-bottom:1px solid var(--rule); overflow:hidden; }
.ad-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.ad-card:hover .ad-media img { transform:scale(1.03); }
.ad-media .noimg { display:grid; place-items:center; width:100%; height:100%; color:var(--bone-4); font:500 11px var(--mono); background:linear-gradient(135deg,var(--ink-3),var(--ink-1)); }
.media-tag { position:absolute; top:9px; left:9px; padding:3px 8px; border-radius:999px; border:1px solid; font:600 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); }
.media-tag.static { color:#cfe0ee; border-color:rgba(107,142,173,.6); background:rgba(107,142,173,.28); }
.media-tag.video { color:#f1d9b0; border-color:rgba(200,135,46,.6); background:rgba(200,135,46,.26); }

.ad-body { display:flex; flex-direction:column; gap:12px; padding:13px 14px 15px; }
.ad-name { color:var(--bone-0); font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* hero ROAS row with bar */
.roas-row { display:flex; align-items:center; gap:10px; }
.roas-num { color:var(--bone-0); font:600 20px/1 var(--mono); font-variant-numeric:tabular-nums; min-width:62px; }
.roas-num small { color:var(--bone-3); font-size:10px; letter-spacing:.1em; }
.roas-track { flex:1; height:7px; border-radius:5px; background:var(--ink-1); border:1px solid var(--rule); overflow:hidden; }
.roas-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--brick),var(--brick-hi)); transition:width .5s var(--ease); }

.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--rule); border-radius:8px; background:var(--rule); overflow:hidden; }
.m { padding:7px 9px; background:var(--ink-2); }
.m span { color:var(--bone-3); font:500 9px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.m strong { display:block; margin-top:3px; color:var(--bone-1); font:600 13px/1.1 var(--mono); font-variant-numeric:tabular-nums; }

.badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; border:1px solid var(--rule); background:var(--ink-1); color:var(--bone-2); font:600 10px/1.2 var(--mono); white-space:nowrap; }
.badge--bundle { color:var(--bone-0); border-color:var(--brick-rule); background:var(--brick-wash); }
.badge--ocr { color:var(--brick-hi); border-color:var(--brick-rule); background:var(--brick-wash); }
.badge--visual { color:var(--amber); border-color:rgba(200,135,46,.42); background:rgba(200,135,46,.11); }
.badge--aaof { color:var(--slate); border-color:rgba(122,138,156,.42); background:rgba(122,138,156,.11); }
.badge--consensus { color:var(--moss); border-color:rgba(107,148,96,.45); background:rgba(107,148,96,.13); }
.badge--angle, .badge--format { color:var(--bone-2); }
/* tiny confidence meter inside match badge */
.cmeter { width:24px; height:4px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; }
.cmeter i { display:block; height:100%; background:currentColor; }

/* ── States ──────────────────────────────────────────────────── */
.status { padding:46px 0; color:var(--bone-3); text-align:center; }
.error { margin-top:16px; padding:16px; border:1px solid rgba(200,90,60,.44); border-radius:8px; background:rgba(200,90,60,.11); color:var(--bone-1); }
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px; }
.skel { height:340px; border:1px solid var(--rule); border-radius:13px; background:linear-gradient(100deg,var(--ink-2) 30%,var(--ink-3) 50%,var(--ink-2) 70%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; }

@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation:none !important; transition:none !important; } }

@media (max-width: 1040px) {
  .layout { grid-template-columns:1fr; }
  .rail { position:static; } .rail-list { max-height:330px; }
  .summary { grid-template-columns:repeat(2,1fr); }
  .hero { grid-template-columns:1fr; } .hero-thumb { width:120px; height:120px; }
}
@media (max-width: 620px) {
  .shell { padding:22px 14px 56px; } .top { display:block; } .controls { margin-top:14px; }
  .summary { grid-template-columns:1fr; } h1 { font-size:36px; } .vbar { grid-template-columns:96px 1fr 70px; }
}