:root{--bg:#f6f5f1;--card:#fff;--ink:#1c1f26;--mute:#6b7080;--line:#e6e3dc;--accent:#14213d;--up:#1f7a4d;--upbg:#e6f3ec;--down:#b4413c;--downbg:#f8e9e7;--warn:#9a6a00;--warnbg:#fbf1d9;--r:14px}
@media (prefers-color-scheme:dark){:root{--bg:#111318;--card:#1b1e25;--ink:#eceae4;--mute:#9a9fab;--line:#2b2f38;--accent:#9fb4e6;--up:#5cc48e;--upbg:#173326;--down:#e5847e;--downbg:#3a1f1d;--warn:#e2b54f;--warnbg:#3a2f15}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.muted{color:var(--mute)}
.small{font-size:13px;color:var(--mute);margin-top:2px}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px;max-width:420px;margin:0 auto;text-align:center}
.login-logo{width:72px;height:72px;border-radius:18px}
.login h1{margin:4px 0 0;font-size:26px}
.login input[type=password]{width:100%;font-size:17px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.login button{width:100%;font-size:17px;padding:14px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){.login button{color:#111318}}
.remember{font-size:14px;color:var(--mute);display:flex;gap:8px;align-items:center}
.err{color:var(--down);min-height:1.2em;margin:0}
.top{position:sticky;top:0;z-index:5;background:var(--bg);padding:calc(env(safe-area-inset-top) + 8px) 12px 8px}
.tabs{display:flex;background:var(--line);border-radius:10px;padding:3px}
.tabs button{flex:1;border:0;background:transparent;padding:8px 4px;font-size:15px;border-radius:8px;color:var(--ink)}
.tabs button.on{background:var(--card);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
#view{padding:4px 12px calc(env(safe-area-inset-bottom) + 24px);max-width:560px;margin:0 auto}
.legend{font-size:12px;color:var(--mute);margin:2px 2px 8px}
h2{font-size:17px;margin:16px 2px 8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.metric .v{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.metric .l{font-size:13px;color:var(--mute);margin-top:4px}
.metric.danger .v{color:var(--down)}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--line);color:var(--mute);vertical-align:middle;margin-left:4px}
.updated{font-size:12px;color:var(--mute);margin:8px 2px 0}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .name{font-weight:600;font-size:15px}
.row .sub{font-size:13px;color:var(--mute)}
.st{flex:none;font-size:12px;font-weight:600;padding:3px 8px;border-radius:99px;white-space:nowrap}
.st.up{background:var(--upbg);color:var(--up)}.st.down{background:var(--downbg);color:var(--down)}.st.flat{background:var(--line);color:var(--ink)}.st.nodata{background:var(--warnbg);color:var(--warn)}
.q{display:flex;gap:10px;padding:10px 12px;border-top:1px solid var(--line);font-size:15px}
.q:first-child{border-top:0}
.q .box{flex:none;width:18px;height:18px;border:2px solid var(--mute);border-radius:5px;margin-top:1px}
.zsw{display:flex;gap:6px;overflow-x:auto;margin:4px 0 10px;scrollbar-width:none}
.zsw button{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 12px;border-radius:99px;font-size:14px}
.zsw button.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.stack{display:grid;gap:8px}
.concl{font-size:15px;margin:10px 2px}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:8px 12px;border-top:1px solid var(--line)}
tr:first-child td{border-top:0}
td:last-child{text-align:right;white-space:nowrap}
td.danger{color:var(--down);font-weight:600}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:8px 0}
summary{padding:12px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:8px}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";color:var(--mute);transform:rotate(90deg);transition:transform .15s}
details[open] summary::after{transform:rotate(-90deg)}
summary .cnt{color:var(--mute);font-weight:500;margin-left:auto}
.dbody{padding:0 12px 12px;font-size:14px}
.dbody p{margin:6px 0}
.dbody h3{font-size:14px;margin:14px 0 6px}
.kv{margin:8px 0}.kv .k{font-size:12px;color:var(--mute)}.kv .val{font-size:14px}
ol,ul{padding-left:20px;margin:6px 0}li{margin:4px 0}
.lst{padding:6px 0;border-top:1px solid var(--line)}.lst:first-child{border-top:0}
.lst .t{font-size:14px}.lst .m{font-size:13px;font-weight:600}
svg.chart{width:100%;height:auto;display:block;margin:6px 0}
a{color:var(--accent)}
.foot{text-align:center;padding:8px 0 calc(env(safe-area-inset-bottom) + 16px)}
.link{background:none;border:0;color:var(--mute);font-size:13px;text-decoration:underline}
.banner{display:block;width:100%;text-align:left;margin:8px 0 0;padding:9px 12px;border:1px solid var(--warn);background:var(--warnbg);color:var(--warn);border-radius:12px;font-size:14px;font-weight:600}
h2{margin:12px 2px 6px}
.st.warn{background:var(--warnbg);color:var(--warn);white-space:normal;max-width:46%;text-align:center}
.st.plan{background:var(--line);color:var(--ink);white-space:normal;max-width:48%;text-align:center;font-weight:500}