:root{
  --ground:#0F1317; --panel:#161C22; --rule:#232C35; --ink:#E7ECF1;
  --muted:#8C97A3; --data:#4C9AFF; --data-2:#3FBFAD; --alert:#F0714F;
  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --body:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --figure:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:14px}
a{color:inherit;text-decoration:none}

.topbar{display:flex;align-items:center;gap:20px;padding:12px 20px;border-bottom:1px solid var(--rule);background:var(--panel);position:sticky;top:0;z-index:5}
.topbar__site{font-weight:600;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--data-2);box-shadow:0 0 8px var(--data-2)}
.periods{display:flex;gap:2px;margin-left:auto}
.periods a,.topbar__actions a{padding:5px 10px;border-radius:6px;color:var(--muted);font-size:13px}
.periods a:hover,.topbar__actions a:hover{background:var(--rule);color:var(--ink)}
.periods a.active,.topbar__actions a.active{background:var(--data);color:#04121f}

.pills{display:flex;flex-wrap:wrap;gap:8px;padding:10px 20px;border-bottom:1px solid var(--rule)}
.pill{background:var(--rule);padding:4px 10px;border-radius:20px;font-size:12px;color:var(--ink)}
.pill span{color:var(--muted);margin-left:4px}
.pill--clear{background:transparent;color:var(--alert)}

.wrap{max-width:1120px;margin:0 auto;padding:18px}
.page-h{font-family:var(--display);font-weight:600}

.live{display:flex;align-items:center;gap:8px;font-family:var(--figure);font-size:15px;color:var(--muted);margin:6px 2px 14px}
.live strong{color:var(--ink);font-size:20px}
.live__dot{width:9px;height:9px;border-radius:50%;background:var(--data-2);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.live__dot{animation:none}}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.panel__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.panel__title{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--muted);margin:0}
.panel__meta{font-size:11px;color:var(--muted);margin-left:auto}
.badge{font-size:11px;background:rgba(240,113,79,.15);color:var(--alert);padding:2px 7px;border-radius:6px}
.badge--raw{background:var(--rule);color:var(--muted)}

.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.metric__label{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:.62rem;color:var(--muted)}
.metric__value{font-family:var(--figure);font-variant-numeric:tabular-nums;font-size:1.9rem;letter-spacing:-.02em;line-height:1.2}
.metric__delta{font-family:var(--figure);font-size:.72rem}
.metric__delta.up{color:var(--data-2)} .metric__delta.down{color:var(--alert)} .metric__delta.flat{color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel--wide{grid-column:1 / -1}

.tabs{display:flex;gap:4px;margin-bottom:10px}
.tab{font-size:12px;color:var(--muted);padding:3px 8px;border-radius:6px;cursor:pointer}
.tab.active{background:var(--rule);color:var(--ink)}

.bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;overflow:hidden}
.bar::before{content:"";position:absolute;inset:0;width:var(--fill,0%);background:linear-gradient(90deg,rgba(76,154,255,.22),rgba(76,154,255,.06));border-radius:6px;z-index:0}
.bar__label,.bar__value{position:relative;z-index:1}
.bar__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:76%}
.bar__label:hover{color:var(--data)}
.bar__value{font-family:var(--figure);font-variant-numeric:tabular-nums;color:var(--ink)}

.empty{color:var(--muted);font-size:13px;padding:8px 2px}
.retry{display:flex;align-items:center;gap:10px}
.retry button{background:var(--data);color:#04121f;border:0;border-radius:6px;padding:5px 12px;cursor:pointer}
.retry__msg{color:var(--muted);font-size:12px}

.skeleton-rows{height:60px;background:linear-gradient(90deg,var(--panel),var(--rule),var(--panel));background-size:200% 100%;animation:sh 1.4s infinite;border-radius:6px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton-rows{animation:none}}

.sitelist{list-style:none;padding:0;max-width:560px}
.sitelist li a{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;margin-bottom:10px}
.sitelist__dot{width:8px;height:8px;border-radius:50%;background:var(--data-2)}
.sitelist__tz{margin-left:auto;color:var(--muted);font-size:12px}

.u-legend{font-family:var(--figure);font-size:11px}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}

input[type=email],input[type=password],input[type=text]{background:var(--ground);border:1px solid var(--rule);color:var(--ink);border-radius:6px;padding:7px 9px;font-size:14px;margin-top:4px}
label{font-size:12px;color:var(--muted)}
.btn{background:var(--data);color:#04121f;border:0;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.08)}
.linklike{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:5px 10px}
.linklike:hover{color:var(--ink)}
.linklike.danger:hover{color:var(--alert)}
.utable{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.utable th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--rule)}
.utable td{padding:8px;border-bottom:1px solid var(--rule)}
.tag{background:var(--rule);color:var(--muted);font-size:10px;padding:1px 6px;border-radius:10px}
.snippet{background:var(--ground);border:1px solid var(--rule);border-radius:6px;padding:12px;font-family:var(--figure);font-size:12px;overflow-x:auto;white-space:pre;color:var(--data)}
.verify{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;padding:4px 0}
.verify--ok{color:var(--data-2)}
.verify--ok a{color:var(--data);text-decoration:underline}
code{font-family:var(--figure);font-size:.92em;background:var(--rule);padding:1px 5px;border-radius:4px}