@font-face{
  font-family:"Bryant";
  src:url("../fonts/BryantWebRegular.woff2") format("woff2"),
      url("../fonts/BryantWebRegular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Bryant";
  src:url("../fonts/BryantWebBold.woff2") format("woff2"),
      url("../fonts/BryantWebBold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Single locked brand theme (not adaptive to system light/dark preference) —
   Geeks on the Beach brand base: white ground, #F48322 orange accent
   (unchanged from the prior dark theme). Everything else here is a derived
   shade of those two, or a deliberately-separate ranking/status color (see
   the rank-* and good/warn/bad tokens below) — never the accent hue. */
:root{
  --bg:#ffffff;
  --bg-raised:#faf9f7;
  --ink:#221f1c;
  --ink-soft:#6e6a65;
  --line:#e6e3de;
  --line-soft:#efece7;
  --accent:#f48322;
  --accent-ink:#241505;
  --accent-soft:#fdead6;

  /* Ranking / grading scale — position pills, KD difficulty, anything with a
     best-to-worst grade. Deliberately never uses --accent (orange) or any
     pink: kept as a clean green→yellow-green→amber→red scale so "good rank"
     and "brand orange" are never visually confused. Colors are darkened
     versions of the old dark-theme hues so text stays legible on white. */
  --rank1:#1f8a5a; --rank1-soft:#e3f5ec;
  --rank2:#6b8f1f; --rank2-soft:#eef5da;
  --rank3:#9c6b13; --rank3-soft:#faf0da;
  --rank4:#c0392b; --rank4-soft:#fbe4e1;

  --gold:#96702c;
  --gold-soft:#f5ecd9;
  --good:#1f8a5a;
  --good-soft:#e3f5ec;
  --warn:#9c6b13;
  --warn-soft:#faf0da;
  --bad:#c0392b;
  --bad-soft:#fbe4e1;
  --neutral-soft:#f1efeb;
  --shadow: 0 1px 2px rgba(30,20,10,.06), 0 12px 28px -14px rgba(30,20,10,.18);
  --font-display: "Bryant", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Bryant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  /* Thin all-caps label treatment (badges, buttons, eyebrows) — Bryant has no
     Thin cut in the files we have, so "thin" is approximated with Regular
     weight + wide letter-spacing + small size rather than a lighter font-file.
     Real tabular numbers (table cells, KPI values, KD/position pills) stay on
     --font-mono on purpose — Bryant is proportional, not monospace, and
     swapping it into dense number columns would misalign them. */
  --font-label: "Bryant", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-weight:700;
}
::selection{background:var(--accent-soft);}
.wrap{max-width:1320px;margin:0 auto;padding:32px 24px 80px;}

/* ---------- Shared section nav (every page) ---------- */
.section-nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:60px; margin-bottom:28px; flex-wrap:wrap; row-gap:10px;
  /* a fixed height:60px here doesn't grow when .section-nav-links wraps to a
     second row on narrow viewports, so the wrapped row visually overlaps
     whatever comes after — min-height lets the box grow with its content */
}
.section-nav .brandmark{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink);
  text-decoration:none; white-space:nowrap; flex:none; letter-spacing:-.01em;
}
.section-nav .brandmark span{
  color:var(--ink-soft); font-family:var(--font-label); font-size:10.5px;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-left:6px;
}
.section-nav-links{ display:flex; gap:2px; flex-wrap:wrap; }
.section-nav-links a{
  font-size:12.5px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:8px 12px; border-radius:7px; transition:background .12s ease, color .12s ease;
}
.section-nav-links a:hover{ background:var(--neutral-soft); color:var(--ink); }
.section-nav-links a.active{ background:var(--accent-soft); color:var(--accent); }

header.top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  font-family:var(--font-label); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:6px;
}
h1{
  font-family:var(--font-display); font-weight:700; font-size:32px;
  margin:0 0 4px; text-wrap:balance; letter-spacing:.01em; text-transform:uppercase;
}
.top .meta{color:var(--ink-soft);font-size:13px;}
.top .right{display:flex;flex-direction:column;align-items:flex-end;gap:10.5px;}

.page-intro{
  font-size:14.5px; color:var(--ink-soft); line-height:1.6; max-width:72ch;
  margin:-4px 0 24px;
}

.scandate{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-label); font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent);
  padding:5px 12px; border-radius:20px;
}
.scandate .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}

.data-source-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-label); font-size:11px; font-weight:600;
  color:var(--ink-soft); background:var(--neutral-soft);
  padding:4px 10px; border-radius:20px; margin-bottom:12px;
}
.data-source-pill b{ color:var(--ink); font-weight:700; }

.controlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}

.dbtoggle{
  display:inline-flex; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; background:var(--bg-raised); box-shadow:var(--shadow);
}
.dbtoggle button{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:var(--font-label); font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 16px; color:var(--ink-soft);
  transition:background .12s ease, color .12s ease;
}
.dbtoggle button + button{border-left:1px solid var(--line);}
.dbtoggle button.active{background:var(--accent);color:var(--accent-ink);}
.dbtoggle button:hover:not(.active){background:var(--neutral-soft);color:var(--ink);}

.comparepicker{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:8px; background:var(--bg-raised);
  padding:6px 10.5px; box-shadow:var(--shadow); font-size:12px;
}
.comparepicker label{color:var(--ink-soft); font-weight:600; white-space:nowrap;}
.comparepicker select{
  font-family:var(--font-label); font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--ink);
  border:none; background:none; outline:none; cursor:pointer;
}

/* ---------- Trend header (stat tiles + area chart) ---------- */
.trendcard{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);
  box-shadow:var(--shadow); margin-bottom:24px; overflow:hidden;
}
.stat-tiles{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-tiles-3{ grid-template-columns:repeat(3,1fr); }
.stat-tiles-2{ grid-template-columns:repeat(2,1fr); }
.stat-tile{
  padding:18px 22px; position:relative; cursor:default;
  min-width:0; /* grid items default to min-content width, which silently overflows a card with overflow:hidden (a classic CSS Grid gotcha) instead of shrinking/wrapping on narrow viewports */
}
.stat-tiles:not(.stat-tiles-3):not(.stat-tiles-2) .stat-tile:not(:nth-child(4n+1)){ border-left:1px solid var(--line); }
.stat-tiles:not(.stat-tiles-3):not(.stat-tiles-2) .stat-tile:nth-child(n+5){ border-top:1px solid var(--line); }
.stat-tiles-3 .stat-tile:not(:nth-child(3n+1)){ border-left:1px solid var(--line); }
.stat-tiles-3 .stat-tile:nth-child(n+4){ border-top:1px solid var(--line); }
.stat-tiles-2 .stat-tile:not(:nth-child(2n+1)){ border-left:1px solid var(--line); }
.stat-tiles-2 .stat-tile:nth-child(n+3){ border-top:1px solid var(--line); }
.stat-tile .label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); margin-bottom:10.5px; overflow-wrap:break-word;
}
.stat-tile .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; row-gap:6px; }
.stat-tile .value-group{ display:flex; align-items:baseline; gap:8px; }
.stat-tile .value{
  font-family:var(--font-mono); font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat-tile .delta{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:2px 6px; border-radius:20px;
}
.stat-tile .delta.up{ background:var(--good-soft); color:var(--good); }
.stat-tile .delta.down{ background:var(--bad-soft); color:var(--bad); }
.stat-tile .delta.flat{ background:var(--neutral-soft); color:var(--ink-soft); }
.stat-tile canvas{ display:block; width:90px; height:28px; }
.stat-tile .sub{ font-size:12px; color:var(--ink-soft); margin-top:8px; }
.split-bar{ height:6px; border-radius:4px; background:var(--neutral-soft); overflow:hidden; margin-top:9px; }
.split-bar i{ display:block; height:100%; background:var(--accent); }
.stat-tile .sub b{ color:var(--ink); font-weight:600; }
.gap-nav{ display:flex; align-items:center; gap:4px; }
.gap-nav-btn{
  appearance:none; border:1px solid var(--line); background:var(--bg-raised); color:var(--ink);
  width:20px; height:20px; border-radius:50%; font-size:12px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.gap-nav-btn:disabled{ opacity:.35; cursor:default; }
.gap-nav-btn:not(:disabled):hover{ background:var(--neutral-soft); }
.gap-nav-count{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); min-width:28px; text-align:center; }

@media (max-width:900px){ .stat-tiles{ grid-template-columns:repeat(2,1fr); } .stat-tile:nth-child(n+3){ border-top:1px solid var(--line); } .stat-tile:not(:nth-child(2n+1)){ border-left:1px solid var(--line); } .stat-tile:nth-child(2n+1){ border-left:none; } }

.trend-panel{ border-top:1px solid var(--line); padding:18px 24px 20px; }
.trend-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:14px; flex-wrap:wrap;
}
.trend-title{ font-size:19px; font-weight:700; font-family:var(--font-display); }
.trend-subnote{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; max-width:46ch; line-height:1.4; }
.range-pills{ display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.range-pills button{
  appearance:none; border:none; background:none; cursor:pointer;
  font-family:var(--font-label); font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  padding:5px 11.5px;
}
.range-pills button + button{ border-left:1px solid var(--line); }
.range-pills button.active{ background:var(--accent); color:var(--accent-ink); }

.range-pills button:hover:not(.active){ background:var(--neutral-soft); color:var(--ink); }

.donut-row{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.donut-canvas{ flex:none; width:52px; height:52px; }
.donut-legend{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.donut-legend-row{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--ink-soft); }
.donut-legend-row.client{ color:var(--ink); font-weight:700; }
.donut-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.donut-legend-row .dname{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.donut-legend-row .dpct{ flex:none; font-family:var(--font-mono); }
.range-pills button:disabled{ opacity:.4; cursor:default; }

.trend-chart-wrap{ position:relative; }
#trend-canvas, #serp-trend-canvas{ display:block; width:100%; height:220px; }
.tc-chart-canvas{ display:block; width:100%; height:170px; }
.tc-charts-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin:0 22px 18px; }
.tc-chart-block .trend-title{ margin-bottom:8px; }
.tc-chart-legend{ display:flex; gap:16px; margin-bottom:8px; font-size:11.5px; color:var(--ink-soft); font-weight:700; }
.tc-chart-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.row-spark{ display:block; }
.trend-empty-note{
  position:absolute; left:0; right:0; bottom:8px; text-align:center;
  font-size:12px; color:var(--ink-soft); pointer-events:none;
}

.kpis{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10.5px;
  overflow:hidden; margin-bottom:32px; box-shadow:var(--shadow);
}
.kpi{background:var(--bg-raised); padding:18px 18px 16px; min-width:0; cursor:default;}
.kpi .label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px;}
.kpi .value{font-family:var(--font-mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.kpi .sub{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.kpi .sub b{color:var(--ink);font-weight:600;}

nav.tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
nav.tabs button{
  appearance:none;border:none;background:none;font-family:var(--font-body);
  font-size:15px;font-weight:600;color:var(--ink-soft);padding:10.5px 16px 12px;
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .12s ease, border-color .12s ease;
}
nav.tabs button:hover{color:var(--ink);}
nav.tabs button.active{color:var(--accent);border-bottom-color:var(--accent);}
nav.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
nav.tabs .count{
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);
  background:var(--neutral-soft);border-radius:20px;padding:1px 7px;margin-left:6px;
}
nav.tabs button.active .count{background:var(--accent-soft);color:var(--accent);}

.panel{display:none;} .panel.active{display:block;}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.toolbar .desc{font-size:13.5px;color:var(--ink-soft);max-width:56ch;}
.toolbar .controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.search{position:relative;}
.search input{
  font-family:var(--font-body);font-size:13px;padding:7px 10.5px 7px 28px;
  border-radius:7px;border:1px solid var(--line);background:var(--bg-raised);
  color:var(--ink);width:220px;outline:none;
}
.search input:focus{border-color:var(--accent);}
.search svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none;}
select.filter{
  font-family:var(--font-body);font-size:12.5px;padding:7px 10.5px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink);outline:none;
}
.rowcount{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10.5px;box-shadow:var(--shadow);background:var(--bg-raised);}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:760px;}
thead th{
  position:sticky;top:0;background:var(--bg-raised);text-align:left;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:10.5px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;font-weight:600;
}
thead th:hover{color:var(--ink);}
thead th.num{text-align:right;}
thead th .arrow{opacity:0;font-size:10px;margin-left:3px;}
thead th.sorted .arrow{opacity:1;color:var(--accent);}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-variant-numeric:tabular-nums;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--neutral-soft);}
td.kw{font-weight:600;max-width:320px;}
td.num{text-align:right;font-family:var(--font-mono);font-size:13.5px;color:var(--ink-soft);}
td.num.strong{color:var(--ink);}
td.url{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);}

.pill{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  padding:3px 8px;border-radius:20px;font-family:var(--font-mono);font-size:12px;
  font-weight:700;font-variant-numeric:tabular-nums;cursor:default;
}
.pos-1{background:var(--rank1-soft);color:var(--rank1);}
.pos-2{background:var(--rank2-soft);color:var(--rank2);}
.pos-3{background:var(--rank3-soft);color:var(--rank3);}
.pos-4{background:var(--rank4-soft);color:var(--rank4);}

.kd-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;font-weight:600;padding:2px 0;}
.kd-dot{width:7px;height:7px;border-radius:50%;flex:none;}

.diff{
  display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);
  font-size:12px;font-weight:700;padding:2px 7px;border-radius:20px;cursor:default;
}
.diff.up{background:var(--good-soft);color:var(--good);}
.diff.down{background:var(--bad-soft);color:var(--bad);}
.diff.flat{background:var(--neutral-soft);color:var(--ink-soft);}
.diff.newkw{background:var(--gold-soft);color:var(--gold);}

.badge{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);white-space:nowrap;}

.cannib-list{ display:flex; flex-direction:column; gap:14px; }
.cannib-group{ border:1px solid var(--line); border-radius:10.5px; box-shadow:var(--shadow); background:var(--bg-raised); overflow:hidden; }
.cannib-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px; background:var(--neutral-soft); cursor:pointer; user-select:none; list-style:none;
}
.cannib-group-head::-webkit-details-marker{ display:none; }
.cannib-group-head::before{ content:'▸'; font-size:14px; color:var(--ink-soft); margin-right:2px; transition:transform .12s ease; order:-1; }
.cannib-group[open] .cannib-group-head::before{ transform:rotate(90deg); }
.cannib-group[open] .cannib-group-head{ border-bottom:1px solid var(--line); }
.cannib-group-query{ font-weight:700; font-size:14.5px; margin-right:auto; }
.cannib-group-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cannib-group-clicks{ font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); }
.cannib-group-table{ width:100%; border-collapse:collapse; font-size:14px; min-width:0; }
.cannib-group-table thead th{ position:static; box-shadow:none; cursor:default; }
.cannib-group-table thead th:hover{ color:var(--ink-soft); }

.info-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; border-radius:50%; margin-left:4px;
  background:var(--neutral-soft); color:var(--ink-soft); font-size:10px; font-weight:700;
  font-family:var(--font-body); text-transform:none; letter-spacing:normal; cursor:help;
}

.collapsible summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  list-style:none; display:inline-flex; align-items:center; gap:5px; padding:4px 0; user-select:none;
}
.collapsible summary::-webkit-details-marker{ display:none; }
.collapsible summary::before{ content:'▸'; font-size:15px; transition:transform .12s ease; }
.collapsible[open] summary::before{ transform:rotate(90deg); }
.collapsible summary:hover{ color:var(--ink); }
.collapsible .tablewrap{ margin-top:8px; }

.scorebar{position:relative;width:96px;height:6px;border-radius:4px;background:var(--neutral-soft);overflow:hidden;}
.scorebar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--rank2),var(--rank1));border-radius:4px;}

footer.note{
  margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;
  color:var(--ink-soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
footer.note code{font-family:var(--font-mono);background:var(--neutral-soft);padding:1px 5px;border-radius:4px;}

#tooltip{
  position:fixed; z-index:999; pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .1s ease, transform .1s ease;
  background:var(--ink); color:var(--bg); font-family:var(--font-body);
  font-size:12px; line-height:1.45; padding:10px 12px; border-radius:8px;
  max-width:240px; box-shadow:0 8px 24px -8px rgba(30,20,10,.35);
}
#tooltip.show{opacity:1;transform:translateY(0);}
#tooltip b{font-family:var(--font-mono);}
#tooltip .tt-date{opacity:.65;font-size:11.5px;display:block;margin-top:3px;}

#tooltip .tt-compare{ min-width:190px; }
#tooltip .tt-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:3px 0; font-size:12px;
}
#tooltip .tt-row span{ opacity:.75; }
#tooltip .tt-row b{ font-size:12.5px; }
#tooltip .tt-divider{ border:none; border-top:1px solid currentColor; opacity:.2; margin:5px 0; }
#tooltip .tt-diff b{ font-family:var(--font-mono); }
#tooltip .tt-diff.up b{ color:var(--good); }
#tooltip .tt-diff.down b{ color:var(--bad); }
#tooltip .tt-diff.flat b{ opacity:.75; }

.loading{padding:60px 0;text-align:center;color:var(--ink-soft);font-family:var(--font-mono);font-size:13px;}
.hidden{ display:none !important; }

.table-loading{ padding:40px 16px; text-align:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:13px; }
.cannib-loading{
  padding:40px 16px; text-align:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:13px;
  border:1px solid var(--line); border-radius:10.5px; background:var(--bg-raised); box-shadow:var(--shadow);
}

.btn-ghost{
  appearance:none; font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid transparent;
  border-radius:7px; padding:7px 12px; cursor:pointer;
}
.btn-ghost:hover{ filter:brightness(0.97); }

.upload-empty{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10.5px; background:var(--bg-raised);
  box-shadow:var(--shadow); min-height:340px; padding:40px 24px;
}
.upload-empty-inner{ max-width:420px; text-align:center; }
.upload-icon{
  width:40px; height:40px; margin:0 auto 14px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.upload-empty-inner h3{ font-size:15px; font-weight:700; margin:0 0 8px; }
.upload-empty-inner p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0 0 20px; }
.upload-dropzone{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1.5px dashed var(--line); border-radius:10.5px; padding:22px;
  cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.upload-dropzone:hover, .upload-dropzone.dragover{
  border-color:var(--accent); background:var(--accent-soft);
}
.upload-cta{ font-weight:700; font-size:13.5px; color:var(--accent); }
.upload-hint{ font-size:12px; color:var(--ink-soft); }
.upload-error{
  margin-top:14px; font-size:12px; color:var(--bad); font-weight:600; min-height:1em;
}

.empty-note{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:10.5px; background:var(--bg-raised);
  box-shadow:var(--shadow); min-height:200px; padding:40px 24px;
}
.empty-note p{ font-size:13.5px; color:var(--ink-soft); margin:0; text-align:center; }

.note-callout{
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px;
  background:var(--bg-raised); padding:12px 14px; font-size:12.5px; line-height:1.55; color:var(--ink-soft);
}
.note-callout b{ color:var(--ink); }

.ts-row{ display:grid; grid-template-columns:170px 1fr 90px; align-items:center; gap:14px; padding:9px 0; }
.ts-row + .ts-row{ border-top:1px solid var(--line-soft); }
.ts-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ts-bar-wrap{ background:var(--neutral-soft); border-radius:5px; height:10px; overflow:hidden; }
.ts-bar{ background:var(--accent); height:100%; border-radius:5px; }
.ts-stat{ display:flex; align-items:center; justify-content:flex-end; gap:5px; font-family:var(--font-mono); font-size:12.5px; font-weight:700; white-space:nowrap; }
.ts-stat.up{ color:var(--good); }
.ts-stat.down{ color:var(--bad); }
.ts-stat.flat{ color:var(--ink-soft); }

.coming-soon{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);
  box-shadow:var(--shadow); min-height:min(60vh, 460px); padding:48px 24px;
}
.coming-soon-inner{ max-width:480px; text-align:center; }
.coming-soon-icon{
  width:44px; height:44px; margin:0 auto 18px; border-radius:50%;
  background:var(--neutral-soft); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
}
.coming-soon-inner h2{ font-family:var(--font-display); font-weight:700; font-size:22px; margin:0 0 10.5px; }
.coming-soon-inner p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 16px; }
.coming-soon-need{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--gold); background:var(--gold-soft); padding:6px 14px; border-radius:20px;
}

.upsell-card{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);
  box-shadow:var(--shadow); padding:26px 28px;
}
.upsell-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.upsell-head h2{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0; }
.upsell-price{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:700;
  color:var(--gold); background:var(--gold-soft); padding:6px 14px; border-radius:20px; white-space:nowrap;
}
.upsell-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px; max-width:640px; }
.upsell-list{ margin:0; padding-left:20px; font-size:13.5px; color:var(--ink); line-height:1.9; }
.upsell-list li{ margin:0; }
.upsell-active-note{
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised); box-shadow:var(--shadow);
  padding:20px 24px;
}
.upsell-active-note b{ color:var(--ink); }

.split-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.split-row > *{ margin:0; }
.split-row > div{ display:flex; flex-direction:column; }
/* A column flex container's default align-items:stretch only stretches
   children along the CROSS axis (width, for a column) — height still has to
   be requested explicitly, hence flex:1 here, not just on the wrapper. */
.split-row > div > *{ flex:1; }
.split-row .upsell-card, .split-row .upsell-active-note{ height:100%; box-sizing:border-box; }
.split-row.wide-left{ grid-template-columns:1.7fr 1fr; }
@media (max-width:900px){ .split-row, .split-row.wide-left{ grid-template-columns:1fr; } }

.tri-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:stretch; }
.tri-row > *{ margin:0; }
.tri-row > div{ display:flex; flex-direction:column; }
.tri-row .trendcard, .tri-row .empty-note{ height:100%; box-sizing:border-box; }
@media (max-width:1100px){ .tri-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .tri-row{ grid-template-columns:1fr; } }

.cwv-panel{
  border:1px solid var(--line); border-radius:10.5px; background:var(--bg-raised);
  box-shadow:var(--shadow); padding:16px 20px; margin-bottom:16px;
}
.cwv-panel-head{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
.cwv-panel-body{ font-size:12.5px; color:var(--ink-soft); }
.cwv-rows{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:20px; }
.cwv-row-head{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:8px; }
.cwv-row-metrics{ display:flex; gap:18px; flex-wrap:wrap; row-gap:10px; }
.cwv-metric{ display:flex; flex-direction:column; gap:2px; }
.cwv-metric-label{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.cwv-metric-value{ font-family:var(--font-mono); font-size:16px; font-weight:700; }

.sev-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:2px 10px; border-radius:20px; white-space:nowrap;
}
.sev-badge.error{ background:var(--bad-soft); color:var(--bad); }
.sev-badge.warning{ background:var(--warn-soft); color:var(--warn); }
.sev-badge.notice{ background:var(--neutral-soft); color:var(--ink-soft); }

.status-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
  padding:2px 10px; border-radius:20px; white-space:nowrap;
}
.status-badge.resolved{ background:var(--good-soft); color:var(--good); }
.status-badge.new{ background:var(--bad-soft); color:var(--bad); }
.status-badge.improved{ background:var(--good-soft); color:var(--good); }
.status-badge.worsened{ background:var(--bad-soft); color:var(--bad); }
.status-badge.unchanged{ background:var(--neutral-soft); color:var(--ink-soft); }

/* ---------- Homepage bento ---------- */
.home-bento{ display:flex; flex-direction:column; gap:16px; }
.home-bento-secondary{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;
}
.home-card{
  border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);
  box-shadow:var(--shadow); padding:26px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:16px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.home-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.home-card.featured{
  flex-direction:row; align-items:center; justify-content:space-between; gap:36px;
  padding:34px 38px;
}
.home-card-icon{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.home-card.muted .home-card-icon{ background:var(--neutral-soft); color:var(--ink-soft); }
.home-card-head{ display:flex; align-items:center; gap:14px; }
.home-card.featured .home-card-head{ flex:1; }
.home-card h2{
  font-family:var(--font-display); font-weight:700; font-size:19px; margin:0;
}
.home-card.featured h2{ font-size:26px; }
.home-card p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0; }
.home-card .home-card-stat{
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent);
  display:flex; align-items:center; gap:6px;
}
.home-card.muted .home-card-stat{ color:var(--ink-soft); }
.home-card .home-card-arrow{ color:var(--ink-soft); font-size:16px; flex:none; }
.home-card.featured .home-card-body{ display:flex; flex-direction:column; gap:10.5px; max-width:60ch; }
.home-card:not(.featured) .home-card-body{ display:flex; flex-direction:column; gap:8px; flex:1; }

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .home-bento-secondary{ grid-template-columns:1fr; }
  .home-card, .home-card.featured{ flex-direction:column; align-items:flex-start; padding:22px; }
}