:root { color-scheme: light; --bg:#faf8f2; --panel:#fffdf8; --text:#252621; --muted:#68695f; --line:#dedfd4; --accent:#c4482e; --accent-soft:#f4e7dd; font:14px/1.5 Arial,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.topbar,main,body>footer { width:min(1240px,calc(100% - 64px)); margin:auto; }
.topbar { padding:20px 0; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:27px; font-weight:600; letter-spacing:-1.4px; text-decoration:none; }
.brand-accent { color:var(--accent); }
main { padding:32px 0; }
.intro { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
h1,h2,p { margin:0; }
h1 { font:44px/1.15 Georgia,"Times New Roman",serif; letter-spacing:-1.5px; }
h2 { font-size:17px; font-weight:500; }
.filters label,.search-label { font-size:12px; color:var(--muted); }
select,input { display:block; margin-top:6px; padding:10px 4px; background:transparent; border:0; border-bottom:1px solid var(--muted); border-radius:0; }
select { min-width:190px; }
input { width:100%; }
.workspace { display:grid; grid-template-columns:320px minmax(0,1fr); gap:32px; }
.picker { padding-right:24px; border-right:1px solid var(--line); min-width:0; }
.analysis-column { min-width:0; }
.picker-title,.chart-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.picker-title span { color:var(--muted); font-size:12px; }
.search-label { display:block; margin-top:20px; }
.list-caption { margin:16px 0 8px; font-size:12px; color:var(--muted); }
.results { display:grid; gap:4px; }
.result { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; border:0; border-radius:4px; background:transparent; padding:12px 9px; text-align:left; }
.result:hover,.result.active { background:var(--accent-soft); }
.result:disabled { opacity:.5; cursor:not-allowed; }
.result strong,.result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result strong { font-weight:500; font-size:14px; }
.result small,.rank { color:var(--muted); font-size:12px; }
.result small { margin-top:3px; }
.chart-panel { min-width:0; }
.period-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.period-tabs button { border:0; border-bottom:3px solid transparent; padding:0 0 12px; background:transparent; color:var(--muted); }
.period-tabs button[aria-pressed=true] { border-bottom-color:var(--accent); color:var(--text); }
.chart-heading h2 { display:none; }
.eyebrow { font-size:14px; }
.interval-toggle { display:inline-flex; padding:3px; border:1px solid var(--muted); border-radius:5px; white-space:nowrap; }
.interval-toggle button { background:transparent; border:0; border-radius:3px; padding:7px 10px; font-size:13px; }
.interval-toggle button[aria-pressed=true] { background:var(--text); color:var(--bg); }
.chart { min-height:370px; margin-top:12px; }
.chart svg { display:block; width:100%; height:auto; }
.grid-line { stroke:var(--line); stroke-width:1; }
.hour-line { stroke:var(--line); stroke-width:1; opacity:.35; }
.axis-label { fill:var(--muted); font-size:12px; }
.selected { display:flex; flex-wrap:wrap; gap:8px 18px; min-height:36px; margin-top:8px; }
.chip { display:flex; align-items:center; gap:7px; max-width:230px; min-width:0; padding:6px 0; background:transparent; border:0; font-size:13px; }
.chip span,.site-name span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--series); flex:none; }
.chip::after { content:'×'; color:var(--muted); }
.empty { min-height:300px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.message { color:#963922; padding:12px 0; }
.retry { background:var(--panel); border:1px solid var(--muted); border-radius:4px; padding:8px 14px; }
.summary-panel { min-width:0; margin-top:28px; }
.table-wrap { overflow-x:auto; }
table { width:100%; margin-top:14px; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
th,td { padding:14px 8px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child,td:first-child { padding-left:0; text-align:left; }
th { font-size:12px; font-weight:400; color:var(--muted); }
.site-name { display:flex; align-items:center; gap:8px; max-width:220px; }
.dot { width:8px; height:8px; border-radius:50%; flex:none; }
.positive { color:#606a3d; }.negative { color:#a13b29; }
body>footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:22px 0; font-size:12px; color:var(--muted); }
.loading { display:flex; align-items:center; gap:10px; min-height:40px; color:var(--muted); font-size:13px; }
.pizza-loader { width:30px; height:30px; position:relative; flex:none; }
.pizza-loader i { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#f4bb44 0deg 41deg,transparent 41deg); animation:slice-away 1.8s steps(1) infinite; }
.pizza-loader i:nth-child(2) { transform:rotate(45deg); animation-delay:.2s; }
.pizza-loader i:nth-child(3) { transform:rotate(90deg); animation-delay:.4s; }
.pizza-loader i:nth-child(4) { transform:rotate(135deg); animation-delay:.6s; }
.pizza-loader i:nth-child(5) { transform:rotate(180deg); animation-delay:.8s; }
.pizza-loader i:nth-child(6) { transform:rotate(225deg); animation-delay:1s; }
.pizza-loader i:nth-child(7) { transform:rotate(270deg); animation-delay:1.2s; }
.pizza-loader i:nth-child(8) { transform:rotate(315deg); animation-delay:1.4s; }
@keyframes slice-away { 0%,100% { opacity:1; } 10%,90% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .pizza-loader i { animation:none; } }
@media(max-width:820px) { .workspace { grid-template-columns:1fr; gap:24px; }.picker { border:0; padding:0; grid-row:auto; }.results { grid-template-columns:repeat(2,minmax(0,1fr)); }.summary-panel { grid-column:1; }.chart { min-height:260px; }.intro { align-items:start; flex-direction:column; } }
@media(max-width:520px) { .topbar,main,body>footer { width:calc(100% - 32px); }main { padding-top:24px; }h1 { font-size:34px; }.brand { font-size:24px; }.brand img { width:48px; height:48px; }input,select { font-size:16px; }.chart-heading { flex-wrap:wrap; }.site-name { max-width:145px; }th { min-width:100px; }.axis-label { font-size:12px; } }
@media(pointer:coarse) { button { min-height:44px; } }

.filters { display:flex; flex-wrap:wrap; gap:12px 24px; }
.filters select { max-width:100%; }

.history-notice { margin:12px 0; padding:12px 16px; color:#74451d; background:#f5ead8; border-radius:8px; }