/* YAS Cloud Portal - dense console look (same tokens as fleetmon.css), dark + light, whole page, no page scroll */
:root{--bg:#eef2f6;--bg2:#e4eaf0;--panel:#fff;--panel2:#f3f6f9;--glass:#fff;--glass2:#f6f8fb;--line:#d3dce5;--text:#17222d;--muted:#5d6e7e;
--accent:#0b7fd1;--accent2:#7b5cff;--acc:#0b7fd1;--soft:rgba(11,127,209,.10);--ok:#16a34a;--off:#9aa3b2;--warn:#c27400;--bad:#e0303f;--info:#2563eb;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic",sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
--r:7px;--sh:0 6px 22px rgba(15,23,36,.10);--side:48px;--top:40px;--grad:linear-gradient(90deg,#2fa8ff,#7b5cff,#22d3ee,#2fa8ff)}
:root[data-theme="dark"]{--bg:#0b0f14;--bg2:#10161d;--panel:#131b23;--panel2:#182230;--glass:#131b23;--glass2:#182230;--line:#223040;--text:#d7e1ea;--muted:#7d8fa1;
--accent:#2fa8ff;--accent2:#7b5cff;--acc:#2fa8ff;--soft:rgba(47,168,255,.12);--ok:#2ecc71;--off:#56636f;--warn:#f5b041;--bad:#ff4d5e;--info:#60a5fa;--sh:0 10px 30px rgba(0,0,0,.45)}
body.rail-open{--side:196px}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:12.5px/1.4 var(--font);overflow:hidden;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(700px 360px at 0% 0%,var(--soft),transparent 60%),radial-gradient(600px 400px at 100% 100%,rgba(123,92,255,.07),transparent 60%)}
@keyframes flow{to{background-position:300% 0}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}
@keyframes glow{50%{box-shadow:0 0 0 3px transparent,0 0 9px currentColor}}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(255,77,94,.25)}}
/* ---------- left icon rail (collapsible) */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:20;display:flex;flex-direction:column;gap:2px;padding:0 0 calc(4px + env(safe-area-inset-bottom));
 background:var(--bg2);border-right:1px solid var(--line);transition:width .2s ease,transform .22s ease}
.brand{display:flex;gap:8px;align-items:center;height:var(--top);padding:0 9px;border-bottom:1px solid var(--line);flex:none;overflow:hidden;white-space:nowrap}
.brand b{display:block;font-size:12.5px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.8px;text-transform:uppercase}
.brand>span:last-child{opacity:0;transition:opacity .15s}body.rail-open .brand>span:last-child{opacity:1}
.logo{background:var(--grad);background-size:300% 100%;animation:flow 9s linear infinite;color:#fff;border-radius:6px;padding:3px 5px;font-weight:800;font-size:10.5px;letter-spacing:1px;flex:none}
#nav{display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 6px}
#nav a{display:flex;align-items:center;gap:10px;height:32px;padding:0 9px;border-radius:6px;color:var(--muted);cursor:pointer;text-decoration:none;position:relative;white-space:nowrap;
 transition:background .15s,color .15s,transform .12s}
#nav a i{font-style:normal;width:16px;text-align:center;font-size:14px;flex:none;transition:transform .15s}
#nav a:hover{background:var(--panel);color:var(--text)}#nav a:hover i{transform:scale(1.15)}#nav a:active{transform:scale(.96)}
#nav a.on{background:var(--panel2);color:var(--text)}
#nav a.on::before{content:"";position:absolute;left:-6px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--grad);background-size:100% 300%;box-shadow:0 0 8px var(--accent)}
#nav a span{opacity:0;transition:opacity .15s}body.rail-open #nav a span{opacity:1}
/* tooltips when collapsed */
body:not(.rail-open) #nav a span{position:fixed;left:calc(var(--side) + 6px);opacity:0;pointer-events:none;background:var(--panel2);color:var(--text);border:1px solid var(--line);
 border-radius:6px;padding:3px 8px;font-size:12px;box-shadow:var(--sh);transform:translateX(-4px);transition:opacity .12s,transform .12s;z-index:40;margin-top:0}
body:not(.rail-open) #nav a:hover span{opacity:1;transform:none}
#nav .navsep{height:1px;background:var(--line);margin:5px 4px;flex:none}
/* [sidenames2710] section headers */
#nav .navgrp{flex:none;margin:10px 4px 3px;height:1px;background:var(--line);position:relative}#nav .navgrp.first{margin-top:2px;background:none}
#nav .navgrp span{display:none}
body.rail-open #nav .navgrp{height:auto;background:none;margin:12px 6px 3px;padding:0 3px}body.rail-open #nav .navgrp.first{margin-top:4px}
body.rail-open #nav .navgrp span{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--muted);opacity:.75;white-space:nowrap}
.pill{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;font-size:10px;line-height:15px;padding:0 5px;min-width:15px;text-align:center;font-style:normal;font-weight:600}
.pill:empty{display:none}.pill.bad{background:var(--bad);color:#fff}.pill.warn{background:var(--warn);color:#1a1000}
body:not(.rail-open) #nav a .pill{position:absolute;top:2px;right:2px;font-size:9px;line-height:13px;padding:0 4px;min-width:13px}
.me{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid var(--line);overflow:hidden;white-space:nowrap;flex:none}
.me small{display:block;color:var(--muted);font-size:10.5px}.me form{margin-left:auto}.mename{min-width:0}.mename b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
body:not(.rail-open) .me{flex-direction:column;padding:6px 4px;gap:4px}body:not(.rail-open) .mename{display:none}body:not(.rail-open) .me form{margin:0}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad);background-size:300% 100%;color:#fff;font-weight:700;flex:none;font-size:12px}
.scrim{display:none}
/* ---------- main column: fills the screen, only inner parts scroll */
.main{margin-left:var(--side);height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;transition:margin-left .2s ease;min-width:0}
.topbar{flex:none;height:var(--top);display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--bg2);border-bottom:1px solid var(--line);position:relative;z-index:10}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);background-size:300% 100%;animation:flow 12s linear infinite;opacity:.8}
.topbar h1{font-size:13px;margin:0 4px 0 2px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:22vw}
.sp{flex:1}.burger{display:inline-flex}
#subslot{flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}#subslot::-webkit-scrollbar{display:none}
#subslot:not(:empty)+.sp{display:none}
.search-btn{display:flex;align-items:center;gap:8px;font:inherit;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);height:28px;padding:0 6px 0 9px;cursor:pointer;min-width:0;flex:none;transition:border-color .15s,box-shadow .15s}
.search-btn::before{content:"⌕";font-size:14px}
.search-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
kbd{font:10px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--muted);background:var(--panel2)}
.netbadge{font-size:10.5px;border-radius:999px;padding:1px 8px 1px 18px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;position:relative;flex:none}
.netbadge::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.netbadge.hs{color:var(--ok);border-color:var(--ok)}.netbadge.lock{color:var(--warn);border-color:var(--warn)}
.netbadge:empty{display:none}
.ghost{background:none;border:1px solid transparent;color:var(--text);border-radius:var(--r);padding:0 7px;cursor:pointer;font:inherit;position:relative;min-width:28px;height:28px;transition:background .15s,border-color .15s,transform .1s}
.ghost:hover{border-color:var(--line);background:var(--panel)}.ghost:active{transform:scale(.92)}
.bell b{position:absolute;top:-3px;right:-3px;background:var(--bad);color:#fff;border-radius:999px;font-size:9px;line-height:13px;padding:0 4px;font-style:normal;animation:pulse 1.6s infinite}.bell b:empty{display:none}
#errs:empty{display:none}#errs{flex:none;padding:0 8px}
#view{flex:1;min-height:0;overflow:auto;padding:8px;animation:rise .2s ease both}
#view:empty{display:none}
#frames{flex:1;min-height:0;display:flex}
#frames:not(:has(iframe.on)){display:none}
#frames iframe{flex:1;width:100%;height:100%;border:0;display:none;background:transparent;min-height:0!important}
#frames iframe.on{display:block;animation:rise .2s ease both}
/* ---------- sub tabs of an embedded page (one slim strip inside the top bar) */
.tabs{display:flex;gap:1px;overflow-x:auto;padding:2px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);margin:0 0 8px;scrollbar-width:none;flex:none}
#subslot .tabs{margin:0;background:transparent;border:0;padding:0}
.tabs a{padding:3px 9px;border-radius:5px;color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer;font-size:12px;position:relative;transition:color .15s,background .15s}
.tabs a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.tabs a.on{background:var(--panel2);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.tabs a .pill{margin-left:3px}
/* ---------- forms + buttons */
input,select,textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:3px 8px;height:28px;outline:none;min-width:0;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;width:100%}
select{padding-right:4px;cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;vertical-align:middle;padding:0}
label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted)}label.chk{flex-direction:row;align-items:center;gap:7px;color:var(--text);font-size:12.5px}
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:var(--r);height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;
 transition:transform .12s,border-color .15s,background .15s,box-shadow .15s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 10px var(--soft);text-decoration:none}.btn:active{transform:scale(.96)}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--grad);background-size:300% 100%;color:#fff;border:0;font-weight:600;transition:background-position .6s,transform .12s,box-shadow .15s}
.btn.primary:hover{background-position:100% 0;box-shadow:0 3px 14px rgba(47,168,255,.35)}
.btn.danger{color:var(--bad)}.btn.danger:hover{border-color:var(--bad);background:var(--bad);color:#fff}.btn.warn{color:var(--warn);border-color:var(--warn)}
.btn.sm{height:24px;padding:0 8px;font-size:11.5px}.btn.wide{width:100%;justify-content:center;height:32px}
/* ---------- panels */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:8px;animation:rise .2s ease both}
.card h2{font-size:11px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600}.card h3{font-size:12px;margin:8px 0 4px}
.ch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}.ch h2,.ch h3{margin:0}
.bar{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;padding:5px 6px;overflow-x:auto;position:sticky;top:-8px;z-index:5}
.bar input[type=search]{flex:1 1 200px;max-width:420px}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0}
.muted{color:var(--muted)}.small{font-size:11.5px}.mono{font-family:var(--mono);font-size:11.5px}.nowrap{white-space:nowrap}
.kpis{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.kpi{flex:1 1 140px;display:flex;flex-direction:column;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;min-height:52px;position:relative;overflow:hidden;
 cursor:default;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;animation:rise .25s ease both}
a.kpi{cursor:pointer}a.kpi:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
.kpi b{display:block;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}.kpi span{color:var(--muted);font-size:11px}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.kpi.ok b{color:var(--ok)}.kpi.bad b{color:var(--bad)}.kpi.warn b{color:var(--warn)}
.kpi.ok::after{background:var(--ok);box-shadow:0 0 8px var(--ok)}.kpi.bad::after{background:var(--bad);box-shadow:0 0 8px var(--bad)}.kpi.warn::after{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.grid2>.card{margin-bottom:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* ---------- tables: sticky header, inner scroll */
.tw{overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100vh - var(--top) - 70px)}
.card.tw{padding:0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
th{text-align:left;font-weight:600;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel2);z-index:2}
td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background .12s}
tr.click{cursor:pointer}tr.click:hover td,tbody tr:hover td{background:var(--soft)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);vertical-align:middle;flex:none;color:var(--off)}
.dot.on{background:var(--ok);color:var(--ok);box-shadow:0 0 6px var(--ok);animation:glow 2.4s ease-in-out infinite}
.dot.warn{background:var(--warn);color:var(--warn);box-shadow:0 0 6px var(--warn)}.dot.bad{background:var(--bad);color:var(--bad);box-shadow:0 0 6px var(--bad);animation:pulse 1.4s infinite}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 7px;font-size:10.5px;line-height:16px;color:var(--muted);white-space:nowrap;margin:1px 2px 1px 0}
.tag.ok{color:var(--ok);border-color:currentColor}.tag.bad{color:var(--bad);border-color:currentColor}.tag.warn{color:var(--warn);border-color:currentColor}.tag.acc{color:var(--accent);border-color:currentColor}
.uname b{display:block}.uname small{color:var(--muted);font-size:11px}
.thumb{width:56px;height:32px;border-radius:5px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 5px,var(--panel) 5px,var(--panel) 10px);display:grid;place-items:center;font-size:9.5px;color:var(--muted);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.meter{height:4px;border-radius:4px;background:var(--line);overflow:hidden;min-width:50px}.meter i{display:block;height:100%;background:var(--ok);transition:width .6s}.meter i.warn{background:var(--warn)}.meter i.bad{background:var(--bad)}
.empty{padding:16px;text-align:center;color:var(--muted)}
.err{background:rgba(255,77,94,.10);border:1px solid var(--bad);color:var(--bad);padding:5px 9px;border-radius:var(--r);margin:6px 0}
.note{background:var(--soft);border:1px solid var(--line);padding:6px 9px;border-radius:var(--r);margin:6px 0}
.warnbox{background:rgba(245,176,65,.10);border:1px solid var(--warn);padding:7px 10px;border-radius:var(--r);margin:6px 0}
.okbox{background:rgba(46,204,113,.08);border:1px solid var(--ok);padding:7px 10px;border-radius:var(--r);margin:6px 0}
/* ---------- unit detail */
.uhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uhead h2{font-size:15px;margin:0;text-transform:none;letter-spacing:0;color:var(--text)}
.kvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.kvs div{border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;background:var(--panel2)}
.kvs span{display:block;color:var(--muted);font-size:10.5px}.kvs b{font-weight:600;word-break:break-word}
.cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.cam{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel2);transition:transform .15s,border-color .15s}.cam:hover{transform:translateY(-2px);border-color:var(--accent)}
.cam .thumb{width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:0;font-size:11px}
.cam div.cf{padding:4px 8px;display:flex;gap:6px;align-items:center}
.tl{list-style:none;margin:0;padding:0}.tl li{display:flex;gap:10px;padding:3px 0;border-bottom:1px solid var(--line)}.tl li time{color:var(--muted);font-size:11px;white-space:nowrap;min-width:104px;font-variant-numeric:tabular-nums}
/* ---------- search palette */
.pal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px;animation:fade .15s ease}
@keyframes fade{from{opacity:0}}
.pal[hidden]{display:none}
.palbox{width:min(620px,100%);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);overflow:hidden;animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.palbox input{width:100%;height:40px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 14px;font-size:14px;background:transparent;box-shadow:none}
.palres{max-height:55vh;overflow:auto}
.palres a{display:flex;gap:8px;align-items:center;padding:6px 14px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.palres a.sel,.palres a:hover{background:var(--soft);text-decoration:none}
.palres a small{color:var(--muted);margin-left:auto;font-size:11px;white-space:nowrap}
.palres .k{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.6px;min-width:84px}
.palfoot{padding:5px 14px}
/* ---------- dialog */
dialog{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:var(--sh);padding:0;width:min(620px,calc(100% - 24px));max-height:88vh}
dialog[open]{animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dform{padding:12px 14px;display:flex;flex-direction:column;gap:8px;max-height:86vh;overflow:auto}
.dform h2{margin:0;font-size:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.g2 .full{grid-column:1/-1}
.dbtns{display:flex;gap:6px;align-items:center;flex-wrap:wrap;position:sticky;bottom:-12px;background:var(--panel);padding:8px 0 2px}
.picks{max-height:42vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);padding:4px 8px}
.picks label{padding:3px 0}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(24px);opacity:0;background:var(--panel2);border:1px solid var(--accent);box-shadow:var(--sh);padding:6px 12px;border-radius:var(--r);z-index:60;transition:all .22s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}
.copy{display:flex;gap:6px}.copy input{flex:1;font-family:var(--mono);font-size:11.5px}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chips button{font:inherit;font-size:11.5px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:0 9px;height:24px;cursor:pointer;transition:all .15s}
.chips button:hover{color:var(--text)}.chips button.on{color:var(--text);border-color:var(--accent);background:var(--soft)}
.bars{display:flex;flex-direction:column;gap:5px}.bars .brow{display:grid;grid-template-columns:100px 1fr 48px;gap:8px;align-items:center;font-size:12px}
.big-toggle{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
code.cmd{display:block;font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:6px 9px;white-space:pre-wrap;word-break:break-all;font-size:11.5px}
.sk{background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);min-height:14px}
@keyframes sk{to{background-position:-200% 0}}
/* ---------- login / setup / codes (portal_override pages) */
.loginbody{display:flex;align-items:center;justify-content:center;height:100vh;padding:16px;overflow:auto}
.loginwrap{position:relative;z-index:1;width:min(380px,100%)}
.loginwrap .card{padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden}
.loginwrap .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);background-size:300% 100%;animation:flow 8s linear infinite}
.loginwrap .card h2{text-transform:none;letter-spacing:0;color:var(--text);font-size:14px}
.login form{display:flex;flex-direction:column;gap:9px;margin:10px 0}
.login input{height:32px}
.brand.big{padding:0 0 6px;height:auto;border:0}.brand.big>span:last-child{opacity:1}.brand.big b{font-size:14px}.brand.big .logo{font-size:12px;padding:4px 7px}
.widewrap{width:min(720px,100%)}
.setup-grid{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}.setup-grid form{display:flex;flex-direction:column;gap:9px}
.qr{background:#fff;border-radius:var(--r);padding:10px;color:#0b1220;text-align:center;max-width:240px}.qr svg{max-width:100%;height:auto}
ol.codes{columns:2;font-size:14px;line-height:1.9;font-family:var(--mono)}
/* ---------- responsive: tablet/phone = rail slides in */
@media (max-width:1100px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
 body,body.rail-open{--side:196px}
 .side{transform:translateX(-102%)}.side.open{transform:none;box-shadow:var(--sh)}
 .brand>span:last-child,#nav a span{opacity:1!important}
 body #nav a span{position:static!important;opacity:1!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;transform:none!important}
 body #nav .navgrp{height:auto;background:none;margin:12px 6px 3px;padding:0 3px}body #nav .navgrp span{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--muted);opacity:.75}
 body .me{flex-direction:row}body .mename{display:block!important}
 .scrim.on{display:block;position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.35)}
 .main{margin-left:0}
 .grid2,.grid3{grid-template-columns:1fr}
 .topbar h1{max-width:30vw}
}
@media (max-width:640px){.search-btn span,.search-btn kbd{display:none}.g2{grid-template-columns:1fr}.netbadge{display:none}.setup-grid{grid-template-columns:1fr}.qr{margin:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.bgfx,.btn,.side,.topbar{display:none}body{background:#fff;color:#000;overflow:visible}.main{margin:0;height:auto}#view{overflow:visible}}