:root{--navy:#0b1437;--royal:#2457f5;--em:#0b8f58;--amb:#b46f00;--cor:#c9302f;--bg:#f3f6fb;--card:#fff;--ink:#16203a;--mute:#53627f;--line:#dbe3ef;--soft:#e9f0fd;--side:#fff;--ok:#0b8f58;--bad:#c9302f;--teal:#0e8f8f}
@media (prefers-color-scheme:dark){:root{--bg:#070d22;--card:#0f1a3a;--ink:#e8edf9;--mute:#9fb0d3;--line:#22305a;--soft:#162347;--side:#0c1631;--royal:#7aa0ff;--ok:#38d39b;--bad:#ff8f84;--amb:#f0b34f}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--royal)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1{font-size:1.45rem;margin:0 0 8px;line-height:1.25}h2{font-size:1.05rem;margin:18px 0 8px}
p{margin:0 0 10px}.hint,.note{color:var(--mute);font-size:.88rem}
input,select,button,textarea{font:inherit;color:var(--ink)}
input,select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #b4c1d6;border-radius:10px;background:var(--card)}
label{display:block;margin:12px 0 4px;font-weight:600;font-size:.9rem;color:var(--mute)}
:focus-visible{outline:3px solid var(--royal);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border:0;border-radius:10px;background:var(--royal);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;margin-top:14px}
@media (prefers-color-scheme:dark){.btn{color:#06122e}}
.btn.secondary{background:transparent;color:var(--royal);border:1.5px solid var(--royal)}
.btn.small{min-height:38px;padding:6px 14px;margin:0}.btn[disabled]{opacity:.5;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 14px}
.card>h1:first-child,.card>h2:first-child{margin-top:0}
.alert-text{color:var(--bad);font-weight:600}.ok-text{color:var(--ok);font-weight:600}
.flash{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--royal);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:.8rem;color:var(--mute);text-transform:none}
code{background:var(--soft);padding:1px 6px;border-radius:6px}
.chip,.pill{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font-size:.8rem;margin:2px 4px 2px 0}
.pill.ok{color:var(--ok);border-color:currentColor}.pill.wait{color:var(--amb);border-color:currentColor}.pill.off{color:var(--mute)}
.grid{display:grid;gap:12px}.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}.stat small{display:block;color:var(--mute)}.stat strong{font-size:1.6rem;display:block;line-height:1.2}
.hero{background:linear-gradient(120deg,#0b1437,#2457f5 75%,#6d4ef0);color:#fff;border-radius:16px;padding:18px;margin-bottom:14px}.hero h1{color:#fff}.hero p{opacity:.92;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.hero .btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;margin:0}
.checks{list-style:none;margin:0;padding:0}.checks li{padding:7px 0;border-bottom:1px solid var(--line)}
.tag{display:inline-block;min-width:48px;font-weight:700;font-size:.78rem}.ok .tag{color:var(--ok)}.bad .tag{color:var(--bad)}
.searchbar{display:grid;gap:4px;margin-bottom:12px}
.inline{display:inline}.inline .btn{margin:0}
details.card summary{cursor:pointer;font-weight:700}
/* sign-in and install pages */
.auth{max-width:460px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top,0px)) 16px 40px}
.authbrand{display:flex;align-items:center;gap:10px;margin:8px 0 18px;font-size:1.1rem}.authbrand strong{color:var(--royal)}
.logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--royal);color:#fff;font-weight:800}
.foot{text-align:center;color:var(--mute);font-size:.82rem;margin-top:20px}
/* app shell */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px}
.org{font-weight:700;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.org small{display:block;font-weight:400;opacity:.7;font-size:.72rem}
.spacer{flex:1}.who{font-size:.85rem;opacity:.9;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signout{margin:0}.iconbtn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:10px;color:#fff;cursor:pointer}
.side{position:fixed;top:0;bottom:0;left:0;width:270px;z-index:40;background:var(--side);border-right:1px solid var(--line);padding:calc(76px + env(safe-area-inset-top,0px)) 10px 90px;transform:translateX(-102%);transition:transform .2s}
.navlink{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none;margin-bottom:2px}
.navlink.on{background:var(--soft);color:var(--royal);font-weight:700}
.scrim{position:fixed;inset:0;background:rgba(5,10,30,.5);z-index:35;display:none}
.nav-open .side{transform:none}.nav-open .scrim{display:block}
.wrap{max-width:1100px;margin:0 auto;padding:16px 14px calc(88px + env(safe-area-inset-bottom,0px))}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav a,.bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;min-height:58px;justify-content:center;font-size:.72rem;color:var(--mute);text-decoration:none;background:none;border:0;cursor:pointer}
.bnav .on{color:var(--royal);font-weight:700}
@media (min-width:960px){.side{transform:none;z-index:20}.menu,.bnav,.scrim{display:none!important}.wrap{margin-left:270px;max-width:none;padding:24px 32px 40px}.who{max-width:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.top,.side,.bnav{display:none}.wrap{margin:0}}
a.stat{display:block;text-decoration:none;color:inherit}a.stat:hover{border-color:var(--royal)}a.stat strong{color:var(--royal)}
.stat small+strong+small{margin-top:2px}
td form.inline label{display:block}td form.inline input{min-height:38px;margin-bottom:4px}
