/* Layout: one narrow column like a phone app, sticky header, tabs fixed at the bottom. */
:root{--bg:#ffffff;--surface:#ffffff;--ink:#1b2133;--muted:#5d6577;--line:#e3e6ee;--brand:#2448d6;--brand-ink:#ffffff;--note:#fff8e1;--danger:#b42318;--danger-line:#f4b4ae;
  --ok-bg:#e8f5ee;--ok-fg:#1e6b45;--warn-bg:#fdf1d8;--warn-fg:#8a5300;--info-bg:#eaf0ff;--info-fg:#2448d6;--crit-bg:#fde8e7;--crit-fg:#a1271c;--off-bg:#eef0f4;--off-fg:#4c5466;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari",Helvetica,Arial,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10131c;--surface:#171b27;--ink:#e6e9f2;--muted:#9aa2b5;--line:#2a3042;--brand:#7d9bff;--brand-ink:#0c1020;--note:#2c2716;--danger:#ff8a80;--danger-line:#6b2a26;
  --ok-bg:#16301f;--ok-fg:#8fd9ae;--warn-bg:#33270f;--warn-fg:#f2c46b;--info-bg:#1a2547;--info-fg:#a9bcff;--crit-bg:#3a1916;--crit-fg:#ff9f96;--off-bg:#232838;--off-fg:#aab1c2;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#10131c;--surface:#171b27;--ink:#e6e9f2;--muted:#9aa2b5;--line:#2a3042;--brand:#7d9bff;--brand-ink:#0c1020;--note:#2c2716;--danger:#ff8a80;--danger-line:#6b2a26;
  --ok-bg:#16301f;--ok-fg:#8fd9ae;--warn-bg:#33270f;--warn-fg:#f2c46b;--info-bg:#1a2547;--info-fg:#a9bcff;--crit-bg:#3a1916;--crit-fg:#ff9f96;--off-bg:#232838;--off-fg:#aab1c2;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
#app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:10px;padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);font-weight:650;font-size:17px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:2}
.bar img{width:28px;height:28px;border-radius:7px}
main{flex:1;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.pad{padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:12px}
h1{font-size:22px;line-height:1.25;text-wrap:balance}h2{font-size:13px;margin-top:6px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
p{max-width:65ch}
.muted{color:var(--muted);font-size:13.5px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.card.note{background:var(--note)}
.card.warnbox{border-color:var(--danger-line)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.card.row{flex-direction:row}
.gap{justify-content:flex-start;gap:8px}.wrap{flex-wrap:wrap}
.dim{opacity:.55}
.logo{width:56px;height:56px;border-radius:14px}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn{background:var(--brand);color:var(--brand-ink);border:0;border-radius:24px;padding:12px 18px;font-weight:600;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand)}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger-line)}
.small{background:var(--brand);color:var(--brand-ink);border:0;border-radius:16px;padding:7px 12px;font-size:13px}
.small.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.link{background:none;border:0;color:var(--brand);font-size:14px;text-decoration:underline;text-align:left}
.pill{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:10px;background:var(--ok-bg);color:var(--ok-fg);white-space:nowrap}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}.pill.blue{background:var(--info-bg);color:var(--info-fg)}.pill.red{background:var(--crit-bg);color:var(--crit-fg)}.pill.off{background:var(--off-bg);color:var(--off-fg)}
.sw{appearance:none;width:44px;height:26px;border-radius:13px;background:var(--off-bg);border:1px solid var(--line);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.sw:checked{background:var(--brand);border-color:var(--brand)}.sw:checked::after{left:20px}.sw:disabled{opacity:.5}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;border-top:1px solid var(--line);background:var(--bg);max-width:520px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tab{flex:1;background:none;border:0;padding:14px 4px;font-size:14px;color:var(--muted)}
.tab.on{color:var(--brand);font-weight:600;box-shadow:inset 0 2px 0 var(--brand)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}