:root{
  --bg:#0a0e1a;
  --surface:#121729;
  --surface-raised:#171d33;
  --border:#252d49;
  --border-soft:#1a2038;
  --text:#f5f7fb;
  --text-dim:#8992ad;
  --text-faint:#565f7d;
  --accent:#f0b429;
  --accent-ink:#1a1305;
  --profit:#34d399;
  --profit-dim:#0f2e28;
  --loss:#fb6f6f;
  --loss-dim:#38191c;
  --google:#5b8def;
  --meta:#8b7cf6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0e1a;--surface:#121729;--surface-raised:#171d33;--border:#252d49;--border-soft:#1a2038;
    --text:#f5f7fb;--text-dim:#8992ad;--text-faint:#565f7d;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0e1a;--surface:#121729;--surface-raised:#171d33;--border:#252d49;--border-soft:#1a2038;
  --text:#f5f7fb;--text-dim:#8992ad;--text-faint:#565f7d;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--bg);}
body{
  background:
    radial-gradient(1100px 520px at 12% -8%,rgba(240,180,41,.10),transparent 60%),
    radial-gradient(900px 460px at 100% 0%,rgba(91,141,239,.07),transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--accent),transparent 70%);}
.num{font-family:ui-monospace,"SF Mono","Roboto Mono","Cascadia Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}

.wrap{max-width:1400px;margin:0 auto;padding:22px 24px 64px;}

/* ---------- login gate ---------- */
.login-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1100px 520px at 12% -8%,rgba(240,180,41,.10),transparent 60%),var(--bg);
  padding:20px;
}
.login-overlay.is-hidden{display:none;}
.login-card{
  width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:28px 26px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);text-align:center;
}
.login-logo{height:34px;width:auto;margin:0 auto 18px;display:block;}
.login-card h2{font-size:18px;font-weight:800;margin:0 0 22px;}
.login-label{display:block;text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin:0 0 6px;}
.login-name-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.login-name-btn{
  flex:1 1 auto;padding:8px 12px;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--surface-raised);border:1px solid var(--border);color:var(--text-dim);
}
.login-name-btn:hover{border-color:var(--text-faint);color:var(--text);}
.login-name-btn.is-selected{background:linear-gradient(180deg,#f6c34d,var(--accent));border-color:var(--accent);color:var(--accent-ink);}
.login-name-btn--big{flex-basis:100%;padding:14px 12px;font-size:15px;font-weight:700;}
.login-pin-row{display:flex;gap:10px;justify-content:center;margin-bottom:10px;}
.login-pin-digit{
  width:46px;height:52px;text-align:center;font-size:22px;font-weight:700;
  background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;color:var(--text);
  font-family:ui-monospace,"SF Mono","Roboto Mono",monospace;
}
.login-pin-digit:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,180,41,.18);}
.login-input{
  width:100%;box-sizing:border-box;margin-bottom:16px;padding:11px 12px;font-size:14px;text-align:left;
  background:var(--surface-raised);border:1px solid var(--border);border-radius:10px;color:var(--text);
}
.login-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,180,41,.18);}
.login-error{color:var(--loss);font-size:12.5px;margin:6px 0 0;}
.menu-wrap{position:relative;display:inline-block;}
.menu-panel{
  position:absolute;top:calc(100% + 8px);right:0;z-index:160;min-width:210px;padding:6px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.menu-panel a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13px;font-weight:600;
}
.menu-panel a:hover{background:var(--surface-raised);}
.menu-panel a.is-current{color:var(--accent);}
.menu-panel a small{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--text-faint);}
.login-submit{
  width:100%;margin-top:18px;padding:11px 14px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#f6c34d,var(--accent));color:var(--accent-ink);font-weight:800;font-size:13.5px;
}
.login-submit:hover{filter:brightness(1.05);}

.logged-in-pill{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);
  padding:6px 12px;border-radius:100px;background:var(--surface-raised);border:1px solid var(--border);
}
.logged-in-pill strong{color:var(--text);}
.logout-btn{
  background:none;border:1px solid var(--border);color:var(--text-faint);
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:100px;cursor:pointer;
}
.logout-btn:hover{border-color:var(--text-faint);color:var(--text);}

.visitors-panel{
  position:fixed;top:70px;right:24px;z-index:150;width:300px;max-height:70vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.visitors-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:700;
  position:sticky;top:0;background:var(--surface);
}
.visitors-list{padding:6px 8px;}
.visitors-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 8px;font-size:12.5px;border-bottom:1px solid var(--border-soft);}
.visitors-row:last-child{border-bottom:none;}
.visitors-row span{white-space:nowrap;}
.visitors-row span{color:var(--text-faint);font-size:11px;}
.visitors-empty{padding:18px 10px;text-align:center;color:var(--text-faint);font-size:12px;}

/* ---------- brand strip ---------- */
.brandbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.brandlogo{height:34px;width:auto;display:block;}
.live-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;
  background:var(--surface-raised);border:1px solid var(--border);
  font-size:12px;color:var(--text-dim);
}
.brandbar-right{display:flex;align-items:center;gap:8px;}
.refresh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--surface-raised);border:1px solid var(--border);color:var(--text-dim);
  cursor:pointer;transition:color .12s,border-color .12s,transform .12s;
}
.refresh-btn:hover{color:var(--accent);border-color:var(--accent);transform:rotate(45deg);}
.refresh-btn.is-spinning svg{animation:spin .7s linear infinite;}
.refresh-btn.is-spinning{color:var(--accent);border-color:var(--accent);}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex:none;}
.live-pill--live .live-dot{background:var(--profit);box-shadow:0 0 0 3px var(--profit-dim);animation:pulse 2s infinite;}
.live-pill--live{color:var(--profit);border-color:rgba(52,211,153,.25);box-shadow:0 0 0 1px rgba(52,211,153,.08),0 4px 14px rgba(52,211,153,.10);}
.live-pill--stale .live-dot{background:var(--accent);}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 3px var(--profit-dim);}50%{opacity:.55;box-shadow:0 0 0 6px transparent;}}

.active-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--profit);box-shadow:0 0 0 3px var(--profit-dim);animation:pulse 2s infinite;margin-right:7px;vertical-align:middle;flex:none;}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:16px;}
.brand-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 6px;}
h1{font-size:28px;font-weight:800;letter-spacing:-.01em;margin:0;text-wrap:balance;}
.topbar-sub{color:var(--text-dim);font-size:13.5px;margin-top:6px;}
#range-label{color:var(--accent);}

/* ---------- date bar ---------- */
.date-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.date-bar .select-wrap select{min-width:0;}
.select-wrap{position:relative;display:inline-flex;align-items:center;}
.select-wrap select{
  appearance:none;background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:13px;font-weight:600;font-family:inherit;padding:9px 30px 9px 13px;border-radius:9px;
  cursor:pointer;min-width:170px;
}
.select-wrap select:hover{border-color:var(--text-faint);}
.select-caret{position:absolute;right:12px;color:var(--text-faint);pointer-events:none;}
.date-inputs{display:flex;align-items:center;gap:8px;}
.date-inputs input[type="date"]{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:13px;font-family:inherit;padding:8px 10px;border-radius:9px;
  color-scheme:dark;
}
.date-arrow{color:var(--text-faint);font-size:13px;}
.clear-btn{
  background:none;border:1px solid var(--border);color:var(--text-dim);
  font-size:12.5px;font-weight:600;padding:9px 14px;border-radius:9px;cursor:pointer;
}
.clear-btn:hover{border-color:var(--text-faint);color:var(--text);}

/* ---------- KPI row ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.kpi-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:600;}
.kpi-value{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.1;}
.kpi-value.profit{color:var(--profit);}
.kpi-value.loss{color:var(--loss);}

/* ---------- section titles ---------- */
.section-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px;}
.table-title{margin-top:30px;}

/* ---------- leaderboard tabs ---------- */
.leaderboard-tabs{margin:-6px 0 14px;gap:4px;border-bottom:1px solid var(--border);padding-bottom:0;}
.leaderboard-tabs .chip{
  background:none;border:none;border-radius:0;color:var(--text-faint);
  padding:9px 4px;margin-right:18px;position:relative;font-size:13px;
}
.leaderboard-tabs .chip:hover{color:var(--text-dim);border-color:transparent;}
.leaderboard-tabs .chip.is-active{background:none;color:var(--accent);}
.leaderboard-tabs .chip.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
  box-shadow:0 0 10px rgba(240,180,41,.55);
}
.dimension-entry:first-child .dimension-row{border-top:none;}
.dimension-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:start;gap:14px;padding:13px 10px;border-top:1px solid var(--border-soft);border-radius:10px;transition:background .12s;cursor:pointer;}
.row-thumb-slot{width:64px;flex:none;}
.row-thumb-slot:empty{width:0;}
.row-thumb-slot .ad-thumb{width:64px;height:36px;}
.dimension-row:hover{background:var(--surface-raised);}
.dimension-name{font-size:14px;font-weight:700;overflow-wrap:anywhere;}
.dimension-chevron{color:var(--text-faint);margin-left:7px;vertical-align:middle;transition:transform .18s ease,color .12s;}
.dimension-chevron.is-open{transform:rotate(180deg);color:var(--accent);}
.dimension-expand{
  margin:0 10px 10px;padding:6px 4px 2px;
  border-top:1px dashed var(--border);
  animation:expandIn .15s ease;
}
@keyframes expandIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

.dimension-expand--nested{
  margin:0 10px 10px;padding:2px 0 2px 14px;
  border-top:1px dashed var(--border);border-left:2px solid var(--border);
}
.dimension-row--sub{grid-template-columns:auto 1fr auto;gap:14px;padding:10px 10px;}
.dimension-row--sub .dimension-name{font-size:13px;}
.dimension-row--sub .dimension-expand{margin:0;padding:6px 0 2px;}
.dimension-expand .table-scroll{border-top:none;margin-top:6px;}
.dimension-count{font-size:11.5px;color:var(--text-faint);margin-top:2px;}
.dimension-meta{display:flex;align-items:center;gap:9px;row-gap:8px;margin-top:8px;flex-wrap:wrap;}
.dimension-figs{text-align:right;padding-top:1px;display:flex;align-items:flex-start;}
.figs-table{display:flex;gap:18px;}
.figs-col{text-align:right;min-width:56px;}
.figs-label{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin-bottom:3px;}
.figs-value{font-size:14px;font-weight:700;font-family:ui-monospace,"SF Mono","Roboto Mono",monospace;font-variant-numeric:tabular-nums;}
.figs-col--active .figs-label{color:var(--accent);}
.figs-col--active .figs-value{font-size:15px;}
.dimension-bar-track{width:110px;height:5px;border-radius:3px;background:var(--border-soft);margin-top:6px;overflow:hidden;margin-left:auto;}
.dimension-bar-track .bar-fill{transition:width .35s ease;}

.dimension-row.row-active{border:1px solid var(--google);background:rgba(91,141,239,.08);border-radius:10px;}

.dimension-row--top{
  background:linear-gradient(90deg,rgba(240,180,41,.12),rgba(240,180,41,.02) 65%);
  border:1px solid rgba(240,180,41,.35);border-top:1px solid rgba(240,180,41,.35);
  border-radius:12px;box-shadow:0 0 0 1px rgba(240,180,41,.06),0 10px 26px -14px rgba(240,180,41,.35);
  position:relative;overflow:hidden;
}
.dimension-row--top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 45%,transparent 60%);
  background-size:220% 100%;animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%{background-position:140% 0;}55%,100%{background-position:-60% 0;}}
.rank-top{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#f6c34d,var(--accent));color:var(--accent-ink);
  box-shadow:0 0 10px rgba(240,180,41,.55);
}
.top-badge{
  display:inline-flex;align-items:center;margin-left:8px;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;vertical-align:middle;
  background:linear-gradient(180deg,#f6c34d,var(--accent));color:var(--accent-ink);
}

.dim-tag{background:var(--surface-raised);color:var(--text-faint);border:1px solid var(--border);}
.dim-tag--hookType{background:var(--surface-raised);color:var(--text-faint);border-color:var(--border);}
.dim-tag--actor,.dim-tag--writer,.dim-tag--editor{background:rgba(240,180,41,.12);color:var(--accent);border-color:rgba(240,180,41,.35);}

.dimension-stats{display:flex;align-items:center;gap:6px;row-gap:6px;margin-top:7px;flex-wrap:wrap;}
.stat-tag{background:rgba(91,141,239,.12);color:var(--google);border:1px solid rgba(91,141,239,.3);letter-spacing:.02em;}
.stat-tag--cost{background:rgba(52,211,153,.12);color:var(--profit);border-color:rgba(52,211,153,.3);}
.stat-tag--spend,.stat-tag--revenue,.stat-tag--roas{background:var(--surface-raised);color:var(--text-dim);border-color:var(--border);}
.stat-tag--profit-pos{background:rgba(52,211,153,.12);color:var(--profit);border-color:rgba(52,211,153,.3);}
.stat-tag--profit-neg{background:rgba(251,111,111,.12);color:var(--loss);border-color:rgba(251,111,111,.3);}
.date-tag{background:var(--surface-raised);color:var(--text-dim);border-color:var(--border);}
.date-tag--unknown{color:var(--text-faint);border-color:var(--border);font-style:italic;}
.dimension-name-clickable{cursor:pointer;}
.dimension-name-clickable:hover{color:var(--accent);text-decoration:underline;}
.dimension-filter-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);
  font-size:12px;font-weight:700;padding:7px 12px;border-radius:8px;cursor:pointer;
}
.dimension-filter-pill:hover{opacity:.85;}

/* ---------- platform cards ---------- */
.platform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px;}
.platform-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;position:relative;overflow:hidden;}
.platform-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;}
.platform-card.google::before{background:var(--google);}
.platform-card.meta::before{background:var(--meta);}
.platform-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.platform-name{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;}
.platform-swatch{width:9px;height:9px;border-radius:2px;}
.platform-swatch.google{background:var(--google);}
.platform-swatch.meta{background:var(--meta);}
.platform-count{font-size:12px;color:var(--text-dim);}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pg-label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;}
.pg-value{font-size:19px;font-weight:700;}
.status-chip{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:600;}
.status-chip.ok{background:var(--profit-dim);color:var(--profit);}
.status-chip.bad{background:var(--loss-dim);color:var(--loss);}

/* ---------- two column ranked panels ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start;}
.split[hidden]{display:none;}
.panel{background:linear-gradient(180deg,var(--surface-raised),var(--surface));border:1px solid var(--border);border-radius:18px;padding:20px 20px 8px;box-shadow:0 12px 30px -14px rgba(0,0,0,.55);}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px;}
.panel-title{font-size:14.5px;font-weight:700;}
.panel-title.win{color:var(--profit);}
.panel-title.lose{color:var(--loss);}
.panel-count{font-size:11.5px;color:var(--text-faint);}

.row-list{margin-top:10px;}
.row-item{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--border-soft);}
.row-item:first-child{border-top:none;}
.rank{font-size:11px;color:var(--text-faint);font-weight:700;}
.row-main{min-width:0;}
.row-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-meta{display:flex;align-items:center;gap:8px;margin-top:4px;}
.tag{font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:6px;}
.dim-tag--actor,.dim-tag--writer,.dim-tag--editor{
  font-size:14.5px;font-weight:800;letter-spacing:.01em;
  padding:5px 12px;border-width:1.5px;border-radius:7px;
}
.dim-tag--actor,.dim-tag--writer,.dim-tag--editor{box-shadow:0 0 0 1px rgba(240,180,41,.12),0 3px 10px -3px rgba(240,180,41,.4);}
.tag.google{background:rgba(91,141,239,.15);color:var(--google);}
.tag.meta{background:rgba(139,124,246,.15);color:var(--meta);}
.row-spend{font-size:11px;color:var(--text-faint);}
.row-figs{text-align:right;}
.row-profit{font-size:14px;font-weight:700;}
.row-profit.profit{color:var(--profit);}
.row-profit.loss{color:var(--loss);}
.bar-track{width:78px;height:4px;border-radius:3px;background:var(--border-soft);margin-top:6px;overflow:hidden;margin-left:auto;}
.bar-fill{height:100%;border-radius:3px;}
.bar-fill.profit{background:var(--profit);}
.bar-fill.loss{background:var(--loss);}

/* ---------- board controls (search + sort) ---------- */
.board-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.view-toggle{display:inline-flex;align-items:center;gap:6px;margin-left:auto;}
.board-controls .search-box{flex:1;min-width:180px;max-width:320px;}
.sort-tabs{align-items:center;}
.sort-label{font-size:11.5px;color:var(--text-faint);font-weight:600;margin-right:2px;}

/* ---------- interactive table ---------- */
.table-panel{padding:16px 16px 4px;}
.table-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 4px 14px;}
.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--border);border-radius:100px;
  padding:8px 14px;flex:1;min-width:200px;color:var(--text-faint);
  transition:border-color .12s;
}
.search-box:focus-within{border-color:var(--accent);}
.search-box input{
  background:none;border:none;outline:none;color:var(--text);
  font-size:13px;width:100%;font-family:inherit;
}
.search-box input::placeholder{color:var(--text-faint);}
.chip-group{display:flex;gap:6px;}
.chip{
  background:var(--bg);border:1px solid var(--border);color:var(--text-dim);
  font-size:12px;font-weight:600;padding:7px 13px;border-radius:100px;
  cursor:pointer;transition:background .12s,color .12s,border-color .12s,box-shadow .12s,transform .12s;
}
.chip:hover{border-color:var(--text-faint);color:var(--text);transform:translateY(-1px);}
.chip.is-active{
  background:linear-gradient(180deg,#f6c34d,var(--accent));border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 4px 14px -2px rgba(240,180,41,.45);
}
.row-count{font-size:11.5px;color:var(--text-faint);margin-left:auto;white-space:nowrap;}

/* ---------- asset links ---------- */
.asset-link{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.02em;
  padding:1.5px 6px;border-radius:5px;text-decoration:none;
  background:var(--surface-raised);border:1px solid var(--border);color:var(--text-dim);
}
.asset-link:hover{color:var(--accent);border-color:var(--accent);}
.assets-cell{display:flex;gap:5px;padding-top:12px;}
.no-assets{color:var(--text-faint);}
.row-clickable{cursor:pointer;}
tbody tr.row-clickable:hover .name-cell{color:var(--accent);}

.table-scroll{overflow-x:auto;border-top:1px solid var(--border);}
.detail-panel{scroll-margin-top:20px;border-color:rgba(240,180,41,.35);box-shadow:0 12px 30px -14px rgba(0,0,0,.55),0 0 0 1px rgba(240,180,41,.08);}
.detail-close{font-size:11.5px;padding:5px 11px;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
thead th{
  text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;padding:11px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap;
  cursor:pointer;user-select:none;
}
thead th.num-col{text-align:right;}
thead th:hover{color:var(--text-dim);}
thead th.is-sorted{color:var(--accent);}
thead th .sort-arrow{font-size:9px;margin-left:3px;opacity:.7;}
tbody td{padding:10px;border-bottom:1px solid var(--border-soft);white-space:nowrap;}
tbody td.num-col{text-align:right;font-family:ui-monospace,"SF Mono","Roboto Mono",monospace;font-variant-numeric:tabular-nums;}
tbody tr:hover{background:var(--surface-raised);}
.table-toggle-row{cursor:pointer;}
.table-toggle-row .dimension-chevron{margin-left:7px;}
.table-toggle-row.row-active{background:rgba(91,141,239,.1);box-shadow:inset 3px 0 0 var(--google);}
.table-expand-row td{background:var(--surface);padding:12px 10px 14px;border-bottom:1px solid var(--border-soft);white-space:normal;}
.table-expand-row .dimension-expand{margin:0;padding:0;border-top:none;}
.table-expand-row .dimension-expand--nested{margin:0;padding:0 0 0 14px;border-top:none;}
tbody td.name-cell{max-width:340px;overflow:hidden;text-overflow:ellipsis;font-weight:600;white-space:normal;}
.name-sub{margin-top:2px;font-size:10.5px;font-weight:500;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
td.profit-pos,.profit-pos{color:var(--profit);}
td.profit-neg,.profit-neg{color:var(--loss);}
.empty-row td{text-align:center;color:var(--text-faint);padding:32px 10px;}

.footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

.back-to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s ease,opacity .15s ease;z-index:40;}
.back-to-top:hover{transform:translateY(-2px);}
.back-to-top[hidden]{display:none;}

@media (max-width:860px){
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .platform-row{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .table-controls{flex-direction:column;align-items:stretch;}
  .row-count{margin-left:0;}
}

/* ---------- inline video thumbnail + player modal ---------- */
.thumb-cell{padding:6px 6px 6px 10px !important;width:1%;}
.ad-thumb{
  position:relative;display:block;width:96px;height:54px;padding:0;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;background:var(--surface-raised);cursor:pointer;flex:none;
}
.ad-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ad-thumb-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;background:rgba(0,0,0,.28);transition:background .12s;
}
.ad-thumb:hover .ad-thumb-play{background:rgba(0,0,0,.5);}
.ad-thumb--empty{
  width:96px;height:54px;display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);border:1px dashed var(--border);border-radius:6px;cursor:default;
}

/* A persistent side panel, not a blocking overlay — the leaderboard stays visible and
   scrollable to the left of it while a video plays. */
.video-panel{
  position:fixed;top:0;right:0;height:100vh;width:min(520px,45vw);z-index:90;
  background:var(--surface);border-left:1px solid var(--border);
  box-shadow:-24px 0 50px -10px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease;
}
.video-panel.is-open{transform:translateX(0);}

/* Push the whole page over rather than letting the fixed panel sit on top of it, so nothing
   in the leaderboard (columns, tags, etc.) ends up hidden underneath. */
body{transition:margin-right .25s ease;}
body.video-panel-open{width:auto;margin-right:min(520px,45vw);overflow-x:hidden;}
body.video-panel-open .back-to-top{right:calc(24px + min(520px,45vw));}
.video-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 14px 12px;border-bottom:1px solid var(--border);flex:none;
  position:sticky;top:0;z-index:1;background:var(--surface);
}
.video-panel-titlewrap{min-width:0;overflow:hidden;}
.video-panel-title{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.video-panel-views{display:block;font-size:11px;color:var(--text-faint);margin-top:2px;}
.video-panel-close{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--surface-raised);border:1px solid var(--border);color:var(--text-dim);
  font-size:16px;line-height:1;cursor:pointer;
}
.video-panel-close:hover{color:var(--accent);border-color:var(--accent);}
.video-panel-embed{flex:none;aspect-ratio:16/9;background:#000;}
.video-panel-embed iframe{width:100%;height:100%;border:0;display:block;}
.video-panel-body{flex:none;padding:16px 14px;}
.video-panel-figs{justify-content:space-between;gap:8px;}
.video-panel-figs .figs-col{text-align:left;min-width:0;}

.variant-heading{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);font-weight:700;margin:18px 0 8px;}
.variant-row{padding:12px 10px;border:1px solid transparent;border-top:1px solid var(--border-soft);border-radius:8px;cursor:pointer;}
.variant-row:hover{background:var(--surface-raised);}
.variant-row:first-of-type{border-top:1px solid transparent;}
.variant-row.is-active{border:1px solid var(--google);background:rgba(91,141,239,.08);}
.variant-row-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.variant-row-name{min-width:0;}
.variant-row-name .name-cell{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.variant-row-name .name-sub{font-size:11px;color:var(--text-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.variant-row-name .name-sub--creative{white-space:normal;overflow:visible;text-overflow:clip;color:var(--text-dim,var(--text-faint));font-weight:600;}
.variant-row .video-panel-figs{margin-bottom:8px;}

@media (max-width:640px){
  .wrap{padding:14px 14px 84px;}

  .brandbar{margin-bottom:14px;}
  .brandbar-right{width:100%;align-items:stretch;}
  .brandbar-controls{justify-content:flex-end;}
  .brandlogo{height:26px;}
  .live-pill{padding:5px 9px;font-size:10.5px;}
  .live-pill .live-dot{width:6px;height:6px;}

  h1{font-size:21px;}
  .brand-eyebrow{font-size:10px;}
  .topbar-sub{font-size:12px;}

  .date-bar{flex-direction:column;align-items:stretch;gap:8px;justify-content:flex-start;}
  .select-wrap,.select-wrap select{width:100%;}
  .date-inputs{width:100%;}
  .date-inputs input[type="date"]{flex:1;min-width:0;}
  .clear-btn{width:100%;}

  .leaderboard-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;}
  .leaderboard-tabs::-webkit-scrollbar{display:none;}
  .leaderboard-tabs .chip{flex:none;margin-right:16px;padding:8px 2px;font-size:12.5px;white-space:nowrap;}

  .board-controls{flex-direction:column;align-items:stretch;gap:10px;}
  .board-controls .search-box{max-width:none;}
  .sort-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px;}
  .sort-tabs::-webkit-scrollbar{display:none;}
  .sort-label{white-space:nowrap;}

  .panel{border-radius:14px;padding:14px 14px 4px;}
  .panel-head{flex-wrap:wrap;gap:4px;}

  .dimension-row{
    grid-template-columns:18px minmax(0,1fr);grid-template-areas:"rank name" "rank figs" "rank bar";
    gap:2px 10px;padding:12px 4px;
  }
  .dimension-row .rank{grid-area:rank;align-self:start;}
  .dimension-row .row-thumb-slot{display:none;}
  .dimension-row>div:nth-child(2){grid-area:name;}
  .dimension-figs{grid-area:figs;text-align:left;min-width:0;margin-top:8px;}
  .dimension-bar-track{grid-area:bar;margin-left:0;margin-top:6px;width:100%;max-width:none;}
  .dimension-name{font-size:13.5px;}
  .dimension-meta{gap:5px;}
  .dim-tag,.tag{font-size:10px;}
  .dim-tag--actor,.dim-tag--writer,.dim-tag--editor{font-size:13px;padding:4px 10px;}

  .table-scroll{margin:0 -14px;padding:0 14px;}
  table{min-width:560px;}

  .footer{flex-direction:column;gap:6px;font-size:10.5px;}

  .back-to-top{right:14px;bottom:14px;width:40px;height:40px;}

  .video-panel{width:100vw;}
}