:root{
  --bg:#f3f6fa; --card:#fff; --ink:#1d2733; --muted:#5b6b7c; --line:#dbe3ec;
  --brand:#1b4f8a; --brand-2:#4d9aef; --ok:#2b8a3e; --down:#c92a2a; --radius:12px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font)}
a{color:var(--brand)}
a:focus-visible,select:focus-visible,.btn:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}

.site-header{background:linear-gradient(135deg,var(--brand),#2c7be0);color:#fff;box-shadow:0 2px 6px rgb(0 0 0/.15)}
.header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand strong{display:block;font-size:1.25rem;line-height:1.1}
.brand small{opacity:.85}
.brand-ico{width:34px;height:34px}
.nav{display:flex;flex-wrap:wrap;gap:4px}
.nav a{color:#fff;text-decoration:none;padding:7px 12px;border-radius:8px}
.nav a:hover{background:rgb(255 255 255/.18)}
.nav a.on{background:rgb(255 255 255/.28);font-weight:600}

main{padding-top:20px;padding-bottom:36px}
h1{font-size:1.6rem;margin:.2em 0 .6em}
h2{font-size:1.2rem;margin:1.4em 0 .6em}
h2 small{font-weight:400;color:var(--muted);font-size:.85em}
.crumb{font-size:.9rem;color:var(--muted);margin-bottom:4px}
.notice{background:#fff3cd;border:1px solid #ffe69c;padding:12px 14px;border-radius:var(--radius)}
.hint{color:var(--muted);font-size:.88rem}

.now{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.now-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.now-head h2{margin:0}
.stamp{margin:.2em 0 1em;color:var(--muted);font-size:.92rem}
.status{font-size:.85rem;font-weight:600;padding:3px 10px;border-radius:999px;color:#fff}
.status.ok{background:var(--ok)}.status.down{background:var(--down)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{position:relative;grid-column:span 2;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tile.big{grid-column:span 3}
.lbl{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.val{font-size:2rem;font-weight:700;line-height:1.15}
.tile.big .val{font-size:2.8rem}
.val small{font-size:.5em;font-weight:500;color:var(--muted);margin-left:4px}
.sub{font-size:.9rem;color:var(--muted)}
.compass{position:absolute;right:12px;top:12px;width:78px;height:78px;color:var(--muted)}

.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:4px 18px 14px}
.card h2{margin:.8em 0 .4em}
dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0}
dt{color:var(--muted)}dd{margin:0;font-weight:600;text-align:right}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:16px}
.chart{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;height:300px;position:relative}
.chart canvas{width:100%!important;height:100%!important}

.picker{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:0 0 8px}
.picker label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
.picker-row{display:flex;gap:8px;align-items:center}
select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;min-width:200px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;font-size:1.2rem;cursor:pointer}
.btn:hover{background:#eef3f9}

.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
table.data{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
.data th,.data td{padding:6px 10px;text-align:right;white-space:nowrap}
.data thead th{background:#eaf1fa;position:sticky;top:0;font-size:.82rem}
.data tbody tr:nth-child(even){background:#f8fafc}
.data tbody th,.data tfoot th{text-align:center}
.data tfoot{font-weight:700;background:#eaf1fa}

.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 24px 20px;max-width:860px}
.prose img{max-width:100%;height:auto;border-radius:8px}
.prose h3{margin:1.4em 0 .3em;color:#b8461a}

.site-footer{background:#1d2733;color:#cdd6e0;padding:18px 0;font-size:.9rem}
.site-footer p{margin:.2em 0}.site-footer a{color:#9ec5fe}

@media (max-width:760px){
  .tiles{grid-template-columns:1fr 1fr}
  .tile,.tile.big{grid-column:span 2}
  .tile.big .val{font-size:2.3rem}
  .chart{height:260px}
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f151c;--card:#18212b;--ink:#e6edf4;--muted:#93a4b6;--line:#2a3745}
  a{color:#8ab8ff}
  .tile{background:#1c2733}
  .data thead th,.data tfoot{background:#223245}.data tbody tr:nth-child(even){background:#1c2733}
  select,.btn{background:#1c2733;color:var(--ink)}
  .notice{background:#3b3414;border-color:#665a1e}
}
@media print{.site-header,.site-footer,.picker{display:none}.chart{break-inside:avoid}}