:root{--navy:#0d2c54;--blue:#1565c0;--gold:#f2a900;--sky:#e8f1fb;--ink:#1f2933;--muted:#52606d;--line:#d9e2ec;--bg:#f5f8fc;--card:#fff}
@media (prefers-color-scheme:dark){:root{--ink:#e8eef5;--muted:#9fb0c0;--line:#2a3f58;--bg:#0b1a2e;--card:#112440;--sky:#16345a}}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
.top{background:var(--navy);display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:4px solid var(--gold)}
.logo{height:38px;max-width:60%;object-fit:contain;background:#fff;border-radius:6px;padding:3px 8px}
.top-r{color:#fff;font-size:.85rem;display:flex;gap:10px;align-items:center}
main{max-width:1100px;margin:0 auto;padding:16px}
h1,h2{color:var(--navy)} @media (prefers-color-scheme:dark){h1,h2{color:#cfe0f5}}
h2{font-size:1.1rem;margin:22px 0 10px} small{font-weight:400}
.muted{color:var(--muted)} .note{font-size:.82rem;color:var(--muted)}
.err{color:#b3261e;font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.narrow{max-width:380px;margin:40px auto;display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.9rem}
input{padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
button{font:inherit;border-radius:8px;border:1px solid var(--line);padding:9px 14px;cursor:pointer;background:var(--card);color:var(--ink)}
button.primary{background:var(--blue);color:#fff;border-color:var(--blue)} button.ghost{background:transparent;color:inherit;border-color:rgba(255,255,255,.4)}
.sheet-h .ghost{color:var(--ink);border-color:var(--line)}
.sample{background:var(--gold);color:#222;font-weight:700;text-align:center;padding:8px;position:sticky;top:0;z-index:5}
.bar{display:grid;gap:10px;margin-bottom:12px}
.presets{display:flex;flex-wrap:wrap;gap:6px}.presets button.on{background:var(--navy);color:#fff}
.dates{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sync{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tile{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:2px;border-top:4px solid var(--blue)}
.tile:hover{background:var(--sky)} .tile.static{cursor:default;border-top-color:var(--line)}
.tile .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.tile .v{font-size:1.5rem;font-weight:700;color:var(--navy)} @media (prefers-color-scheme:dark){.tile .v{color:#fff}}
.tile .d{font-size:.8rem}.up{color:#1b7a3d}.down{color:#b3261e}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.modal[hidden]{display:none}
.sheet{background:var(--card);width:100%;max-width:900px;max-height:85vh;border-radius:14px 14px 0 0;display:flex;flex-direction:column}
.sheet-h{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.sheet-b{overflow:auto;padding:8px 16px 16px}
table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}td.n,th.n{text-align:right}
@media (min-width:700px){.modal{align-items:center}.sheet{border-radius:14px}}
@media (max-width:600px){#who{display:none}table th:nth-child(4),table td:nth-child(4){display:none}th,td{padding:6px 4px}.sheet-b{padding:8px}}

button.link{background:none;border:0;color:var(--link,#0a58ca);text-decoration:underline;padding:0;font:inherit;cursor:pointer}