:root { --bg:#f6f7f9; --card:#fff; --text:#1c2330; --muted:#6b7585; --line:#e3e6eb; --accent:#2f6fed; --accent2:#18a874; --accent3:#e0912f; --danger:#d23b3b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151b; --card:#1b2029; --text:#e6e9ef; --muted:#8b95a7; --line:#2a3140; --accent:#5b8dff; --accent2:#3fcf9b; --accent3:#f0a94a; --danger:#ff6b6b; }
}
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:20px; padding:10px 24px; background:var(--card); border-bottom:1px solid var(--line); }
header.top .brand { font-weight:700; color:var(--text); }
header.top nav { display:flex; gap:16px; flex:1; } header.top nav a.active { color:var(--text); font-weight:600; }
header.top .who { color:var(--muted); font-size:13px; display:flex; gap:12px; align-items:center; }
main { max-width:1100px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:15px; margin:0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.stats { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:16px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; }
.stat .v { font-size:24px; font-weight:700; } .stat .l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:12px; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.bar-cell { position:relative; } .bar { position:absolute; inset:2px auto 2px 0; background:var(--accent); opacity:.14; border-radius:3px; }
.bar-cell span { position:relative; padding-left:4px; word-break:break-all; }
input, select, button, textarea { font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
button { cursor:pointer; } button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:var(--danger); border-color:var(--danger); } button:disabled { opacity:.5; cursor:default; }
form.inline, .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
label.row { flex-direction:row; align-items:center; gap:8px; margin:0 0 6px; font-size:14px; color:var(--text); cursor:pointer; }
label.row input[type=checkbox] { margin:0; width:16px; height:16px; flex:none; }
.muted { color:var(--muted); } .error { color:var(--danger); margin:8px 0; } .ok { color:var(--accent2); }
.login { max-width:340px; margin:12vh auto; } .login form { display:flex; flex-direction:column; gap:12px; }
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.tabs a { padding:8px 14px; color:var(--muted); border-bottom:2px solid transparent; } .tabs a.active { color:var(--text); border-color:var(--accent); }
pre.code { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
.chart-box { position:relative; }
.plot { position:relative; outline:none; } .plot:focus-visible { box-shadow:0 0 0 2px var(--accent); border-radius:6px; }
.chart { display:block; width:100%; height:auto; user-select:none; touch-action:pan-y; }
.chart text { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.chart .grid { stroke:var(--line); stroke-width:1; } .chart .grid.v { stroke-dasharray:2 4; opacity:.7; } .chart .axis { stroke:var(--muted); opacity:.5; }
.chart .line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .chart .line.cmp { stroke-dasharray:5 4; stroke-width:1.5; opacity:.6; }
.chart .cursor { stroke:var(--muted); stroke-width:1; } .chart .overlay { fill:transparent; cursor:crosshair; }
.chart .dot { stroke:var(--card); stroke-width:2; }
.s-visitors { --c:var(--accent); } .s-sessions { --c:var(--accent2); } .s-pageviews { --c:var(--accent3); }
.chart .line, .chart .dot { stroke:var(--c); } .chart .dot { fill:var(--c); stroke:var(--card); }
.legend { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; font-size:12px; color:var(--muted); }
.legend-btn { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:14px; font-size:12px; }
.legend-btn.off { opacity:.5; text-decoration:line-through; }
.swatch { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c); }
.legend-note { margin-left:auto; }
.tooltip { position:absolute; z-index:5; pointer-events:none; min-width:190px; max-width:300px; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; box-shadow:0 6px 20px rgba(0,0,0,.18); font-size:12px; }
.tooltip[hidden] { display:none; }
.tip-title { font-weight:600; margin-bottom:6px; }
.tip-row { display:flex; align-items:center; gap:6px; } .tip-label { flex:1; } .tip-val { font-weight:700; font-variant-numeric:tabular-nums; }
.tip-prev { display:flex; justify-content:space-between; gap:8px; color:var(--muted); margin:0 0 4px 16px; font-size:11px; }
.tip-delta { font-variant-numeric:tabular-nums; } .tip-prevdate { color:var(--muted); font-size:11px; margin-top:4px; border-top:1px solid var(--line); padding-top:4px; }
.range-bar { display:flex; flex-direction:column; gap:10px; } .range-bar .row { margin:0; gap:10px 16px; } .range-bar .error { margin:0; } .range-bar .error:empty { display:none; }
.range-top { justify-content:space-between; } .range-top label.row { font-size:12px; color:var(--muted); margin:0; cursor:default; }
.range-row { align-items:flex-end; } .range-row label.row { align-self:center; }
.seg { display:inline-flex; flex-wrap:wrap; } .seg button { border-radius:0; margin-left:-1px; padding:5px 12px; }
.seg button:first-child { border-radius:6px 0 0 6px; margin-left:0; } .seg button:last-child { border-radius:0 6px 6px 0; }
.seg button.on { background:var(--accent); border-color:var(--accent); color:#fff; position:relative; z-index:1; }
.range-summary { margin:-6px 0 12px; font-size:13px; }
.delta { font-size:12px; font-weight:600; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; } .delta.good { color:var(--accent2); } .delta.bad { color:var(--danger); }
.timeline { list-style:none; margin:0; padding:0; } .timeline li { padding:6px 0; border-bottom:1px dashed var(--line); display:flex; gap:12px; }
.timeline time { color:var(--muted); min-width:150px; font-variant-numeric:tabular-nums; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; background:var(--bg); border:1px solid var(--line); font-size:12px; }
.sitelist { margin:0 0 12px; padding-left:18px; }

/* all sites */
.c0 { --c:#2f6fed; } .c1 { --c:#18a874; } .c2 { --c:#e0912f; } .c3 { --c:#8e5cd9; } .c4 { --c:#e5484d; }
.c5 { --c:#12a5b8; } .c6 { --c:#d6409f; } .c7 { --c:#8a9a1b; } .c8 { --c:#a0693b; } .c9 { --c:#64748b; }
.table-scroll { overflow-x:auto; } table.compare { min-width:860px; }
table.compare th, table.compare td { padding:8px 10px; } table.compare td .delta { margin-top:0; }
table.compare tr.clickable { cursor:pointer; } table.compare tbody tr.clickable:hover { background:var(--bg); }
table.compare tbody td:first-child, table.compare tfoot th { white-space:normal; }
table.compare tfoot th, table.compare tfoot td { border-top:2px solid var(--line); border-bottom:0; font-weight:700; } table.compare tfoot th .small { font-weight:400; }
table.compare .swatch { margin-right:8px; } table.compare tbody td:first-child a { font-weight:600; }
.small { font-size:11px; } .note { font-size:11px; margin-top:6px; font-weight:400; }
button.sort { border:0; background:none; padding:0; font:inherit; font-weight:600; color:var(--muted); display:inline-flex; gap:4px; align-items:center; white-space:nowrap; }
button.sort.on { color:var(--text); } button.sort .arrow { font-size:9px; min-width:9px; }
.spark { display:inline-block; vertical-align:middle; overflow:visible; } .spark path { fill:none; stroke:var(--c); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; } .spark circle { fill:var(--c); }
.spark.total { --c:var(--muted); }
.stat.combined { grid-column:span 2; } .stat.combined .note { text-transform:none; letter-spacing:0; }
.chart-head { justify-content:space-between; } .chart-head h2 { margin:0; }
.tip-sub { color:var(--muted); font-size:11px; margin:-4px 0 6px; }