:root{--bg:#f7f7f5;--fg:#1d1d1b;--muted:#6b6b66;--line:#ddd;--card:#fff;--ok:#1f8a4c;--warn:#b7791f;--bad:#c53030;--off:#888;--fact:#e8f1fb;--interp:#fbf3e4}
@media (prefers-color-scheme:dark){:root{--bg:#121212;--fg:#e8e8e3;--muted:#9a9a93;--line:#333;--card:#1c1c1c;--fact:#16263a;--interp:#33281a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
a{color:inherit}
main{padding:16px;max-width:1280px;margin:0 auto}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-weight:700;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:10px;flex:1}
.top nav a{text-decoration:none;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.top nav a:hover{color:var(--fg)}
.logout button{font-size:12px}
.freshness{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px;font-size:11px;border-bottom:1px solid var(--line)}
.fr{padding:1px 6px;border-radius:3px;border:1px solid var(--line)}
.fr-ok{color:var(--ok)}.fr-delayed,.fr-rate_limited{color:var(--warn)}.fr-error,.fr-auth_required{color:var(--bad)}.fr-disabled,.fr-not_implemented,.fr-unknown{color:var(--off)}
.muted{color:var(--muted)}.err{color:var(--bad)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--off);border-radius:4px;padding:10px 12px}
.card h3{margin:0 0 6px;font-size:14px}
.card dl{display:grid;grid-template-columns:90px 1fr;margin:0;font-size:12px}.card dt{color:var(--muted)}.card dd{margin:0;overflow-wrap:anywhere}
.st-ok{border-left-color:var(--ok)}.st-delayed,.st-rate_limited{border-left-color:var(--warn)}.st-error,.st-auth_required{border-left-color:var(--bad)}
table{border-collapse:collapse;margin:8px 0;font-size:13px;width:100%;overflow-x:auto;display:block}
th,td{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top}
.login{max-width:320px;margin:15vh auto}.login label{display:block;margin:8px 0}.login input{width:100%;padding:6px}.login button{margin-top:8px;padding:6px 16px}
.fact{background:var(--fact)}.interp{background:var(--interp)}
