:root {
  --canvas:#17171f; --surface:#242430; --muted:#1d1d2a; --line:#3c394f;
  --ink:#f3f3fa; --soft:#b8b6ca; --faint:#a29eb6;
  --signal:#bd91ff; --signal-soft:#39304e;
  --warn:#e6bc7a; --ok:#80dcc0; --err:#ff9f9f;
  --radius:8px;
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--canvas); color:var(--ink);
  font-size:15px; line-height:1.6;
}
button,input,select { font:inherit; }
a { color:var(--signal); text-underline-offset:4px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--signal); outline-offset:3px; }
[hidden] { display:none!important; }
.skip { position:absolute; top:-100px; padding:8px 18px; background:var(--surface); z-index:10; }
.skip:focus { top:0; }
header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 24px; border-bottom:1px solid var(--line); background:var(--muted);
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-size:17px; font-weight:650; }
.brand svg { width:26px; height:26px; fill:none; stroke:var(--signal); stroke-width:1.6; stroke-linejoin:round; }
.brand-secondary { color:var(--soft); font-size:13px; font-weight:400; margin-left:10px; padding-left:10px; border-left:1px solid var(--line); }
.local-tag { color:var(--soft); font-size:12px; }
main { max-width:1080px; margin:0 auto; padding:18px 20px 0; min-width:0; }
h1,h2,h3 { line-height:1.35; margin:0; }
p { color:var(--soft); }
code,pre { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.subtle { color:var(--faint); font-size:12px; }
.footnote { color:var(--faint); font-size:12px; line-height:1.8; margin:10px 0 0; }

.notice {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; background:#2b2624; border:1px solid #63503b; border-radius:10px;
  color:var(--warn); margin-bottom:16px;
}
.notice .status-mark { width:9px; height:9px; border-radius:50%; background:var(--warn); flex:none; }
.notice strong { font-size:14px; font-weight:600; }
.notice p { margin:3px 0 0; color:#d5c4ad; font-size:13px; max-width:80ch; }
.notice-stats { margin-left:auto; display:flex; gap:18px; color:#d5c4ad; font-size:12px; flex-wrap:wrap; }
.notice-stats strong { color:var(--ink); font-size:13px; font-weight:600; }
.clock { color:#d5c4ad; white-space:nowrap; font-variant-numeric:tabular-nums; }
.notice.connected { background:#1b2b29; border-color:#3b6558; color:var(--ok); }
.notice.connected p, .notice.connected .notice-stats, .notice.connected .clock { color:#b0d9cb; }
.notice.connected .status-mark { background:var(--ok); }
.error { padding:12px 16px; border:1px solid #8e505d; border-radius:8px; background:#351d2a; color:var(--err); font-size:13px; margin-bottom:16px; }

.market { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.market-toolbar { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.scope { display:flex; gap:12px; flex-wrap:wrap; }
.scope label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--soft); }
select,input[type="search"] {
  background:var(--muted); border:1px solid #625b79; color:var(--ink); border-radius:6px;
  padding:8px 10px; min-height:38px; font-size:13px;
}
select { min-width:100px; }
input::placeholder { color:var(--faint); }
.search-row { display:flex; gap:8px; min-width:300px; }
.search-row input { flex:1; }
button {
  background:var(--surface); color:var(--ink); border:1px solid #625b79; border-radius:7px;
  padding:9px 16px; font-size:13px; cursor:pointer; min-height:38px; white-space:nowrap;
}
button:hover { background:#343349; }
button:disabled { opacity:.55; cursor:not-allowed; }
button.secondary { box-shadow:inset 0 0 0 1px #625b79; }

.table-head { display:flex; align-items:baseline; gap:14px; margin-bottom:10px; font-size:14px; flex-wrap:wrap; }
.table-head #page-number { margin-left:auto; }
.table-wrap { overflow:auto; max-height:540px; border-radius:8px; background:var(--muted); }
table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
thead { position:sticky; top:0; background:var(--muted); z-index:1; }
th { font-size:11px; font-weight:500; color:var(--faint); padding:11px 14px; border-bottom:1px solid var(--line); }
td { font-size:13px; padding:10px 14px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
td button { color:var(--ink); background:none; padding:0; border:0; font-size:13px; text-align:left; }
td button:hover { color:var(--signal); }
td small { display:block; color:var(--faint); font-size:11px; }
.number { text-align:right; }
.badge { font-size:11px; }
.badge.sampled { color:var(--ok); }
.badge.stale { color:var(--warn); }

.empty {
  min-height:200px; padding:36px 22px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; background:var(--muted); border-radius:10px;
}
.empty h3 { font-size:17px; margin-bottom:4px; }
.empty p { margin:0; font-size:13px; max-width:420px; }
.pagination { display:flex; justify-content:flex-end; gap:12px; margin-top:12px; }

details { margin-top:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
details > summary {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:12px 16px; cursor:pointer; font-size:14.5px; color:var(--ink); list-style:none;
}
details > summary::-webkit-details-marker { display:none; }
details > summary::before { content:"▸"; color:var(--signal); margin-right:8px; }
details[open] > summary::before { content:"▾"; }
details > summary .subtle { font-size:12px; }
.history { padding-bottom:6px; }
.chart-empty { min-height:120px; display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:12px; }
#chart { display:block; width:100%; height:auto; max-height:220px; margin-top:10px; }
#chart path { fill:none; stroke:var(--signal); stroke-width:2; }
#chart circle { fill:var(--signal); }
#chart text { font-size:11px; fill:var(--soft); }
#chart line { stroke:var(--line); stroke-width:1; }
.history .footnote { padding:0 16px 12px; }

.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; padding:4px 16px 16px; }
.guide-grid article { border-top:1px solid var(--line); padding:16px 0 4px; }
.guide-grid h3 { font-size:14px; margin-bottom:6px; }
.guide-grid p { font-size:13px; margin:8px 0 0; max-width:75ch; }
.guide-grid .footnote { margin-top:8px; }
pre { background:var(--muted); padding:12px 14px; border-radius:8px; font-size:11.5px; line-height:1.8; overflow:auto; color:#d6c5ed; margin:8px 0 0; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }

footer { border-top:1px solid var(--line); margin-top:28px; padding:18px 0 26px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--faint); font-size:11.5px; }

@media (min-width:1600px) { main { max-width:1240px; } }
@media (max-width:900px) { .guide-grid { grid-template-columns:1fr; } }
@media (max-width:680px) {
  header { padding:12px 16px; }
  .brand { font-size:15px; }
  .local-tag { font-size:0; }
  main { padding:14px 12px 0; }
  .notice { padding:12px 14px; gap:10px; }
  .notice-stats { margin-left:0; gap:14px; }
  .market { padding:12px 14px; }
  .scope { width:100%; gap:10px; }
  .scope label { flex-direction:column; align-items:flex-start; gap:4px; font-size:11px; }
  .scope select { min-width:84px; font-size:11px; padding:7px; }
  .search-row { min-width:100%; }
  .table-wrap { max-height:510px; }
  .pagination { justify-content:space-between; }
  .guide-grid { padding:4px 12px 12px; }
  footer { flex-direction:column; gap:4px; }
}