/* The Gap — Airgapp console theme, the console's only stylesheet.
   Spec: docs/superpowers/specs/2026-11-07-the-gap-redesign.md */

/* Fonts: self-hosted variable woff2, latin subset (make fonts). */
@font-face{font-family:'Saira';font-style:normal;font-weight:300 700;font-display:swap;src:url(/static/fonts/saira.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/martian-mono.woff2) format('woff2')}

/* Tokens */
:root{
--bg0:#070A12;
--line:rgba(132,164,205,.14);--line2:rgba(132,164,205,.26);
--panel:rgba(12,17,27,.55);
--gate:#AFC7D4;--txt:#EAF0F7;--dim:#93A1B5;--faint:#7A879C;
--safe:#4ADE80;--danger:#FF5A3C;--watch:#F5B544;--brand:#e02434;
/* Motion */
--t-fast:120ms;--t-panel:200ms;--t-exit:150ms;--t-blip:700ms;--t-flash:1.2s;--t-live:2s;--t-rise:400ms;
--rise-1:60ms;--rise-2:120ms;--rise-3:180ms;
--ease-std:cubic-bezier(.2,0,.38,.9);--ease-enter:cubic-bezier(0,0,.38,.9);--ease-exit:cubic-bezier(.2,0,1,.9);--ease-rise:cubic-bezier(0,0,.3,1);
}

/* Base */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0;font-size:13.5px;line-height:1.5;font-feature-settings:"ss01","cv11","tnum";letter-spacing:-.008em;font-weight:400}
@media(max-width:900px){body{font-size:14px}}
::selection{background:rgba(255,255,255,.18)}
/* The wordmark: the white-on-transparent PNG as a mask, filled with the text colour. Size per use. */
/* Every page keeps the scrollbar's room, scrolling or not: otherwise the page changed width
   by the scrollbar's width when moving between a long page (Filters, System) and a short one,
   and the top bar visibly squeezed and stretched in the cross-fade. */
html{scrollbar-gutter:stable}
.brand-logo{display:inline-block;background-color:var(--txt);-webkit-mask:url(/static/img/airgapp-logo.png) no-repeat center/contain;mask:url(/static/img/airgapp-logo.png) no-repeat center/contain}
body{background:var(--bg0);color:var(--txt);font-family:'Saira','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;
background-image:radial-gradient(130% 70% at 50% 0%,rgba(44,76,108,.16),rgba(7,10,18,0) 60%),linear-gradient(180deg,#080B14,#06080F);background-attachment:fixed}
code,.mono,.tnum{font-family:'Martian Mono',ui-monospace,monospace;font-feature-settings:"tnum"}

/* Motion: the frame is still; a page arrives top to bottom in one shared rhythm.
   backwards fill only, so nothing lingers (a leftover transform breaks sticky/fixed children). */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
[data-rise]{animation:rise var(--t-rise) var(--ease-rise) backwards}
[data-rise="1"]{animation-delay:var(--rise-1)}
[data-rise="2"]{animation-delay:var(--rise-2)}
[data-rise="3"]{animation-delay:var(--rise-3)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* Shell: the top bar. It never animates; from 520px up it sticks while the page scrolls. */
/* One frame for the whole console: past 1280 px the bar's logo and links and every page sit
   in the same centred 1280 px frame (the dashboard's), so the logo and each page's title start
   on one line. The bar's band and rule still run the full width. Resolved where it is used,
   against the page's width. */
:root{--frame-x:calc(max(0px,(100% - 1280px) / 2) + clamp(20px,3vw,44px))}
.topbar{display:flex;align-items:center;gap:20px;padding:16px var(--frame-x);border-bottom:1px solid var(--line);flex-wrap:wrap;row-gap:12px;position:sticky;top:0;background:rgba(7,10,18,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10}
.brand{display:flex;flex:none}
.topbar .brand-logo{display:inline-block;width:78px;height:32px;background-color:var(--txt);-webkit-mask:url(/static/img/airgapp-logo.png) no-repeat left center/contain;mask:url(/static/img/airgapp-logo.png) no-repeat left center/contain}
.topnav{display:flex;gap:clamp(12px,1.8vw,26px);flex-wrap:wrap;flex:1}
.navlink{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--dim);text-decoration:none;padding:5px 0;border-bottom:1.5px solid transparent;transition:color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std)}
.navlink:hover{color:var(--txt)}
.navlink.active{color:var(--txt);border-color:var(--gate)}
.content{padding:clamp(22px,3vw,40px) var(--frame-x) 60px}
@media(pointer:coarse){.navlink{padding-top:14px;padding-bottom:12px}}
/* One page (app.js nav): the bar sits out of the cross-fade between pages, the fade is
   short, and pages after the first don't rise in again. */
.topbar{view-transition-name:gap-topbar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
.gap-swapped [data-rise]{animation:none}
main.content:focus{outline:none}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Narrow: the links take their own row; all five fit down to 320px. */
@media(max-width:519px){
.topbar{position:static;padding:10px 20px 0;row-gap:0;backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent}
.topnav{order:3;flex:0 0 100%;flex-wrap:nowrap;justify-content:space-between;gap:4px;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.navlink{flex:none;white-space:nowrap;font-size:10px;letter-spacing:.06em;padding:16px 0 14px;border-bottom-width:2px}
.content{padding-top:20px}
}
@media(max-width:379px){
.topbar{padding:10px 16px 0}
.navlink{font-size:9.5px;letter-spacing:.03em}
}

/* Toast (app.js notify): one at a time, bottom centre, optional Undo, animated exit.
   z-index 200 keeps it above the old .dialog-back (100), so errors raised inside a dialog are readable.
   Native <dialog>s (later slices) sit in the top layer: a toast shown over one must join the top layer too. */
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastout{to{opacity:0;transform:translate(-50%,10px)}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);background:var(--txt);color:#0A0E16;border-radius:12px;padding:8px 10px 8px 16px;font-size:14px;font-weight:500;box-shadow:0 14px 34px rgba(0,0,0,.55);animation:toastin var(--t-panel) var(--ease-enter) both}
.toast button{flex:none;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:rgba(10,14,22,.1);color:#0A0E16;cursor:pointer}
.toast button:hover{background:rgba(10,14,22,.18)}
.toast.out{animation:toastout var(--t-exit) var(--ease-exit) both}
.toast-error{box-shadow:inset 3px 0 0 var(--danger),0 14px 34px rgba(0,0,0,.55)}
.toast-success{box-shadow:inset 3px 0 0 var(--safe),0 14px 34px rgba(0,0,0,.55)}
@media(pointer:coarse){.toast button{min-height:44px}}

/* Visually hidden, still announced. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;padding:0}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:min(360px,100%);display:flex;flex-direction:column;gap:16px}
.login-logo{display:block;width:150px;height:64px;margin:0 auto 16px;background-color:var(--txt)}
.login-field{display:flex;flex-direction:column;gap:7px}
.login-label{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim)}
.login-input{font-family:inherit;font-size:16px;color:var(--txt);background:rgba(7,10,18,.6);border:1px solid var(--line2);border-radius:10px;height:46px;padding:0 14px;width:100%;min-width:0}
.login-input:focus-visible{outline:2px solid var(--gate);outline-offset:1px}
.login-error{margin:0;min-height:20px;font-size:13.5px;line-height:1.45;color:var(--danger)}
.login-btn{height:48px;border:0;border-radius:12px;background:var(--txt);color:#0A0E16;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:filter var(--t-fast) var(--ease-std)}
.login-btn:hover{filter:brightness(.9)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-btn:focus-visible{outline:2px solid var(--gate);outline-offset:2px}
/* A sheet is a container, not a control. It takes focus itself when its content isn't drawn
   yet (System's Set up sheet), and the ring then outlined the whole sheet — a light border on
   iPhone. Its buttons and fields keep their rings. */
dialog:focus-visible{outline:none}

/* Page frame: the top bar, then the page filling the rest of the viewport (the dashboard needs the height). */
body{display:flex;flex-direction:column}
.content{flex:1 0 auto}
.content-bleed{padding:0;display:flex;flex-direction:column}
[x-cloak]{display:none!important}

/* Dashboard: the gate. Lifted from the mockup (Main.dc.html); .screen became .dash. */
@keyframes gatein{from{opacity:0;transform:scaleY(.18)}to{opacity:1;transform:none}}
@keyframes gateglow{0%,100%{opacity:.46}50%{opacity:.76}}
/* The gate was drawn at 1440 wide; past 1280 its lanes stretch flat. So the drawing stops
   at 1280, centred: --side is the margin either side of it. The host list stays docked to
   the window's right edge and the rules run full width, as in the mockup. */
.dash{container-type:inline-size;--side:max(0px,(100cqw - 1280px) / 2);flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;
background:radial-gradient(130% 82% at 48% 44%,rgba(44,76,108,.20),rgba(7,10,18,0) 62%),linear-gradient(180deg,#080B14,#06080F)}
.herohead{padding:clamp(14px,2.2vh,24px) calc(var(--side) + clamp(20px,3vw,44px)) clamp(8px,1.4vh,14px);position:relative;z-index:3;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.hstmt{font-family:'Martian Mono',monospace;font-weight:600;font-size:clamp(24px,3.2vw,42px);line-height:1;letter-spacing:-.02em;margin:0;text-transform:uppercase;transition:color .4s ease}
.hstmt>span{transition:color .4s ease}
.work{flex:1;min-height:320px;display:flex;position:relative;z-index:2;padding-left:var(--side)}
.stage{flex:1;min-width:0;position:relative;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(132,164,205,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(132,164,205,.05) 1px,transparent 1px);
background-size:44px 44px;
-webkit-mask:radial-gradient(130% 100% at 42% 50%,#000,transparent 76%);mask:radial-gradient(130% 100% at 42% 50%,#000,transparent 76%);opacity:.5}
.gatelabel{position:absolute;top:16px;left:60%;transform:translateX(-50%);z-index:3;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.34em;font-size:10px;color:var(--gate)}
.stage-inner{position:absolute;top:42px;left:0;right:0;bottom:0}
.viz{position:absolute;inset:0;width:100%;height:100%}
.gate{transform-box:view-box;transform-origin:600px 350px;animation:gatein 1.1s cubic-bezier(.2,.75,.2,1) .15s both}
.gate .glow{animation:gateglow 3s ease-in-out infinite}
.scene .ln{fill:none;stroke-dasharray:1;transition:stroke-dashoffset .85s cubic-bezier(.3,.7,.2,1)}
.scene .mark{transition:opacity .4s ease}
.scene.notrans .ln,.scene.notrans .mark{transition:none}
.car{position:absolute;left:3%;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid #2E4A5A;border-radius:12px;background:rgba(10,20,28,.74);transition:opacity var(--t-panel) var(--ease-std)}
.car svg{width:24px;height:24px;color:var(--gate);flex-shrink:0}
.car-n{font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--txt)}
.car.off{opacity:.55}
/* Wide enough for the box and its label to sit clear of where the lanes start: it lines up
   with the headline and the readouts (the same inset, measured from the drawing's edge). */
@container (min-width:1000px){.car{left:clamp(20px,3vw,44px)}}
.panel{width:calc(clamp(165px,26vw,333px) + var(--side));border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(10,14,22,.5),rgba(8,11,19,.72));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;flex-direction:column;position:relative;z-index:3;padding-top:42px}
.hostlist{flex:1;display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.hostrow{flex:1;min-height:0;display:flex;align-items:center;gap:13px;padding:0 calc(20px + var(--side)) 0 20px;border-top:1px solid var(--line);transition:opacity .4s ease}
.hostrow:first-child{border-top:0}
.hostrow.empty .hdot{visibility:hidden}
.hdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hdot.safe{background:var(--safe);box-shadow:0 0 9px rgba(74,222,128,.55)}
.hdot.danger{background:var(--danger);box-shadow:0 0 9px rgba(255,90,60,.6)}
.hostmid{flex:1;min-width:0}
.hname{font-family:'Martian Mono',monospace;font-size:12px;color:var(--txt);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsub2{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:600;margin-top:5px}
.hsub2.safe{color:var(--safe)}
.hsub2.danger{color:var(--danger)}
.panel-note{position:absolute;inset:42px var(--side) 0 0;margin:0;display:grid;place-items:center;padding:20px;text-align:center;font-family:'Martian Mono',monospace;font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--dim)}
.readouts{display:flex;align-items:center;gap:clamp(18px,3.2vw,44px);padding:14px calc(var(--side) + clamp(20px,3vw,44px));border-top:1px solid var(--line);position:relative;z-index:3;flex-wrap:wrap;flex-shrink:0}
.ro-l{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;color:var(--dim);margin:0 0 7px}
.ro-v{font-size:26px;font-weight:600;letter-spacing:.01em;line-height:1;margin:0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.ro-v.danger{color:var(--danger)}
.ro-v.safe{color:var(--safe)}
.ro-v .slash{color:var(--faint);margin:0 2px}
@media(max-width:640px){
.car-n{display:none}
.car{padding:9px}
.hostrow{padding:0 14px;gap:10px}
.hname{font-size:11px}
.readouts{gap:16px 24px}
}

/* Gap pages: shared state colours, focus ring and controls (scoped under .wrap, the page frame). */
:focus-visible{outline:2px solid var(--gate);outline-offset:2px}
.s-blocked{--c:var(--danger);--t:rgba(255,90,60,.13);--cb:rgba(255,90,60,.42)}
.s-filtered{--c:var(--watch);--t:rgba(245,181,68,.13);--cb:rgba(245,181,68,.42)}
.s-open{--c:var(--safe);--t:rgba(74,222,128,.12);--cb:rgba(74,222,128,.42)}
@keyframes foldin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
/* Devices. Lifted from the mockup (Devices.dc.html). */
.phead{margin-bottom:24px;}
.eyebrow{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--dim);margin:0 0 12px}
.eyebrow b{color:var(--txt);font-weight:600}
.h1{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;margin:0;line-height:1}
.specimen{position:relative;border:1px solid var(--cb);border-radius:16px;background:linear-gradient(100deg,var(--t),rgba(12,17,27,.5) 55%);padding:22px 24px 22px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-bottom:34px;overflow:hidden;transition:border-color var(--t-panel) var(--ease-std)}
.specimen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);transition:background var(--t-panel) var(--ease-std)}
.spec-l{min-width:0}
.spec-name{display:flex;width:fit-content;align-items:center;gap:11px;font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.spec-name svg{width:25px;height:25px;color:var(--gate)}
.spec-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim)}
.spec-meta .odot{animation:ping var(--t-live) var(--ease-enter) infinite}
.spec-mac{display:inline-flex;gap:8px}
.spec-live{display:flex;align-items:center;gap:9px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--danger);margin-top:12px}
.spec-live .pd{width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0}
.spec-live b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.rhead h2{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--txt);font-weight:600;margin:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 24px;margin:10px 0 14px;padding:0;list-style:none;font-size:13.5px;color:var(--dim)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.legend b{color:var(--c);font-weight:600}
.rosterwrap{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.roster{list-style:none;margin:0;padding:0}
.wrap .empty{margin:0;padding:32px 20px;text-align:center;color:var(--dim);font-size:13.5px}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;align-items:center;column-gap:14px;padding:6px 4px 6px 20px;min-height:68px;border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--c);transition:background var(--t-panel) var(--ease-std)}
.drow:last-child{border-bottom:0}
.drow:hover{background:rgba(132,164,205,.04)}
.drow.active{background:rgba(175,199,212,.08)}
.drow.open{background:rgba(132,164,205,.05)}
.d-id{grid-area:1/1;min-width:0;padding:8px 0;cursor:pointer}
.dname{display:flex;align-items:center;gap:9px;color:var(--txt);font-weight:600;font-size:15px;min-width:0}
.dname-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.drow.off .dname-t{color:var(--dim)}
.newtag{flex:none;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;font-weight:600;color:#0A0E16;background:var(--gate);border-radius:4px;padding:2px 6px}
.dhost{display:flex;align-items:center;gap:7px;font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim);margin-top:4px;min-width:0}
.dpres{flex:none}
.dsub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--faint)}
.odot{width:7px;height:7px;border-radius:50%;background:var(--safe);flex-shrink:0}
.odot.off{background:transparent;border:1px solid var(--dim)}
.drow.active .odot:not(.off){animation:ping var(--t-blip) var(--ease-enter)}
.d-pol{grid-area:1/2}
.reg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;padding:3px;gap:2px;background:rgba(7,10,18,.5)}
.regseg{position:relative;display:block}
.regseg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.regseg span{display:block;font-family:'Martian Mono',monospace;font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-radius:6px;color:var(--dim);box-shadow:inset 0 0 0 1.5px transparent;transition:color var(--t-fast) var(--ease-std),background var(--t-fast) var(--ease-std),box-shadow var(--t-fast) var(--ease-std)}
.regseg:hover span{color:var(--txt)}
.regseg input:checked+span{color:var(--c);background:var(--t);box-shadow:inset 0 0 0 1.5px var(--c)}
.regseg input:focus-visible+span{outline:2px solid var(--gate);outline-offset:2px}
.polpill{display:none;position:relative;height:44px;align-items:center;cursor:pointer}
.pp-face{display:flex;align-items:center;gap:7px;height:32px;padding:0 9px 0 10px;border-radius:8px;background:var(--t);box-shadow:inset 0 0 0 1.5px var(--c);color:var(--c);font-family:'Martian Mono',monospace;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.pp-face svg{width:10px;height:10px;flex:none}
.polpill select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer;margin:0}
.polpill:focus-within .pp-face{outline:2px solid var(--gate);outline-offset:2px}
.d-chev{grid-area:1/3;justify-self:center;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--dim);padding:0}
.d-chev:hover{color:var(--txt);background:rgba(132,164,205,.08)}
.d-chev svg{width:14px;height:14px;transition:transform var(--t-panel) var(--ease-std)}
.drow.open .d-chev svg{transform:rotate(90deg)}
.d-fold{grid-area:2/1/auto/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-std)}
.drow.open .d-fold{grid-template-rows:1fr}
.d-fold-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--t-panel)}
.drow.open .d-fold-in{visibility:visible;transition-delay:0s}
.d-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 48px;padding:4px 16px 18px 0}
.d-facts{margin:0}
.d-facts div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:30px;border-bottom:1px solid var(--line)}
.d-facts div:last-child{border-bottom:0}
.d-facts dt{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim)}
.d-facts dd{margin:0;font-family:'Martian Mono',monospace;font-size:12px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-ctl{display:flex;flex-direction:column;gap:12px;min-width:0}
.logrow{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;cursor:pointer}
.wrap .flabel{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim)}
.wrap .sw{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.wrap .sw input{position:absolute;left:-1px;right:-1px;top:-10px;bottom:-10px;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.wrap .sw .track{position:absolute;inset:0;border-radius:100px;border:1px solid rgba(147,161,181,.6);background:rgba(7,10,18,.5);transition:background var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std)}
.wrap .sw .k{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--dim);transition:transform var(--t-fast) var(--ease-std),background var(--t-fast) var(--ease-std)}
.wrap .sw input:checked+.track{background:var(--safe);border-color:var(--safe)}
.wrap .sw input:checked+.track .k{transform:translateX(18px);background:#07120c}
.wrap .sw input:focus-visible+.track{outline:2px solid var(--gate);outline-offset:2px}
.wrap .field{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.wrap .finput{font-family:inherit;font-size:14px;color:var(--txt);background:rgba(7,10,18,.5);border:1px solid var(--line2);border-radius:8px;padding:0 11px;height:38px;width:100%}
.wrap .finput::placeholder{color:var(--faint)}
.wrap .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;box-shadow:none;transition:border-color var(--t-fast) var(--ease-std),background var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std);font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;min-height:38px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--txt);white-space:nowrap}
.wrap .btn:hover{border-color:var(--txt);background:transparent}
.wrap .btn.danger{border-color:var(--danger);color:var(--danger)}
.wrap .btn.danger:hover{background:rgba(255,90,60,.12);border-color:var(--danger)}
.d-forget{align-self:flex-start}
.d-confirm{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border:1px solid rgba(255,90,60,.42);border-radius:10px;background:rgba(255,90,60,.07);padding:12px 14px;animation:foldin var(--t-panel) var(--ease-enter) both}
.d-confirm p{margin:0;font-size:13.5px;line-height:1.45;color:var(--txt);flex:1 1 240px}
.d-confirm .btns{display:flex;gap:8px}
.specimen .d-confirm{flex:1 1 100%}
@media(max-width:860px){
.rosterwrap{margin:0 calc(-1*clamp(20px,3vw,44px));border-left:0;border-right:0;border-radius:0}
.reg{display:none}
.polpill{display:flex}
.drow{grid-template-columns:minmax(0,1fr) auto 44px;column-gap:4px;padding:5px 2px 5px 18px;min-height:66px}
.d-id{padding:6px 0}
.dname{font-size:15.5px}
.drow.off .dsep,.drow.off .dsub{display:none}
.d-panel{grid-template-columns:1fr;gap:10px;padding:2px 16px 14px 0}
.d-facts div{min-height:34px}
.d-facts dd{font-size:12.5px}
.wrap .finput{font-size:16px;height:44px}
.wrap .btn{min-height:44px}
.d-forget{align-self:stretch}
}
@media(max-width:720px){
.phead{margin-bottom:18px}
.specimen{padding:18px 18px 18px 20px;margin-bottom:28px}
.spec-r{position:absolute;top:10px;right:12px}
.spec-mac{display:none}
.spec-live{letter-spacing:.03em}
}
.spec-none{margin:6px 0 0;font-size:13.5px;color:var(--dim)}
.s-none{--c:var(--faint);--t:rgba(122,135,156,.07);--cb:var(--line2)}
.spec-log{margin:10px 0 0;font-size:13px;color:var(--dim)}
.wrap .linkbtn{background:none;border:0;padding:0 2px;margin:0;color:var(--gate);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wrap .linkbtn:hover{color:var(--txt)}
@media(pointer:coarse){.wrap .linkbtn{display:inline-flex;align-items:center;min-height:44px}}

/* Filters. Lifted from the mockup (Filters.dc.html); rules that differ from the Devices page are scoped under .pg-filters. */
@keyframes rowin{from{background:rgba(175,199,212,.2)}to{background:transparent}}
@keyframes hit{0%{color:var(--safe)}100%{color:var(--faint)}}
.pg-filters .phead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;}
.wrap .btnp{display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;height:40px;padding:0 16px;border:0;border-radius:9px;background:var(--txt);color:#0A0E16;white-space:nowrap}
.wrap .btnp:hover{background:#fff}
.wrap .btnp svg{width:12px;height:12px}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:10px;background:rgba(7,10,18,.5);padding:0 13px;height:42px;margin-bottom:8px}
.search svg{width:14px;height:14px;color:var(--dim);flex-shrink:0}
.search input{border:0;background:transparent;outline:none;font-family:'Martian Mono',monospace;font-size:12.5px;color:var(--txt);width:100%;height:100%}
.search input::placeholder{color:var(--dim)}
.search:focus-within{border-color:var(--gate);box-shadow:0 0 0 1px var(--gate)}
.nomatch{margin:30px 0;text-align:center;color:var(--dim);font-size:14px}
.ghead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 10px}
.ghead h2{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--txt);font-weight:600;margin:0}
.ghead p{margin:0;font-size:13.5px;color:var(--dim)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;align-items:center;column-gap:16px;padding:6px 4px 6px 20px;min-height:66px;background:var(--panel);border:1px solid var(--line);border-top:0;box-shadow:inset 3px 0 0 var(--c);transition:background var(--t-panel) var(--ease-std);--c:var(--faint)}
.frow.on{--c:var(--safe)}
.frow.first{border-top:1px solid var(--line);border-radius:14px 14px 0 0}
.frow.last{border-radius:0 0 14px 14px}
.frow.first.last{border-radius:14px}
.frow:hover{background:rgba(132,164,205,.05)}
.frow.open{background:rgba(132,164,205,.06)}
.frow.fresh{animation:rowin var(--t-flash) var(--ease-std)}
.f-id{grid-area:1/1;min-width:0;padding:8px 0;cursor:pointer}
.fname{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;min-width:0}
.fname-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow:not(.on) .fname-t{color:var(--dim)}
.btag{flex:none;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;font-weight:600;color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:2px 6px}
.fsub{display:flex;align-items:center;gap:8px;margin-top:4px;font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden}
.adot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--c)}
.frow:not(.on) .adot{background:transparent;border:1px solid var(--dim)}
.frow.active .adot{animation:ping var(--t-blip) var(--ease-enter)}
.f-sw{grid-area:1/2;display:flex;align-items:center;gap:10px;cursor:pointer}
.swl{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim);min-width:24px}
.frow.on .swl{color:var(--safe)}
.f-chev{grid-area:1/3;justify-self:center;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--dim);padding:0}
.f-chev:hover{color:var(--txt);background:rgba(132,164,205,.08)}
.f-chev svg{width:14px;height:14px;transition:transform var(--t-panel) var(--ease-std)}
.frow.open .f-chev svg{transform:rotate(90deg)}
.f-fold{grid-area:2/1/auto/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-std)}
.frow.open .f-fold{grid-template-rows:1fr}
.f-fold-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--t-panel)}
.frow.open .f-fold-in{visibility:visible;transition-delay:0s}
.f-panel{padding:2px 16px 20px 0}
.fdesc{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--dim);max-width:72ch}
.offnote{margin:0 0 14px;display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;font-size:11px;color:var(--watch);border:1px dashed rgba(245,181,68,.45);border-radius:8px;padding:6px 10px}
.fsec{margin-top:6px}
.fsec h3{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600;color:var(--txt)}
.fsec h3 span{text-transform:none;letter-spacing:.02em;font-weight:400;color:var(--dim)}
.plist,.dlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plist li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.plist b{font-family:'Martian Mono',monospace;font-size:12px;font-weight:500;color:var(--txt)}
.plist span{font-size:13px;color:var(--dim)}
.dlist li{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:12px;align-items:center;min-height:50px;padding:5px 0;border-bottom:1px solid var(--line)}
.dlist li.fresh{animation:rowin var(--t-flash) var(--ease-std)}
.d-sw{display:flex;align-items:center;justify-content:flex-start}
.dm-t{min-width:0}
.dm-t b{display:block;font-family:'Martian Mono',monospace;font-size:12.5px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-t>span{display:block;margin-top:2px;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow:not(.on) .dm-t b{color:var(--dim)}
.dm-hits.none{color:var(--faint);font-style:italic}
.dm-hits{font-family:'Martian Mono',monospace;font-size:11px;color:var(--faint);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.dlist li.hit .dm-hits{animation:hit var(--t-blip) var(--ease-std)}
.dm-x{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--dim)}
.dm-x:hover{color:var(--danger);background:rgba(255,90,60,.1)}
.dm-x svg{width:12px;height:12px}
.dempty{margin:0;padding:14px 0;color:var(--dim);font-size:13.5px;border-bottom:1px solid var(--line)}
.dadd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:8px;margin-top:12px}
.pg-filters .finput{font-family:'Martian Mono',monospace;font-size:12.5px;color:var(--txt);background:rgba(7,10,18,.6);border:1px solid var(--line2);border-radius:9px;padding:0 12px;height:40px;width:100%;min-width:0}
.wrap .finput.prose{font-family:'Saira',sans-serif;font-size:14px}
.pg-filters .finput[aria-invalid="true"]{border-color:var(--danger)}
.wrap .btnq{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600;height:40px;padding:0 18px;border:1px solid var(--txt);border-radius:9px;background:transparent;color:var(--txt);white-space:nowrap}
.wrap .btnq:hover{background:rgba(234,240,247,.08)}
.fstatus{min-height:22px;margin-top:8px;font-size:13px;color:var(--dim)}
.fstatus.err{color:var(--danger)}
.ffoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px}
.fnote{font-size:13px;color:var(--dim)}
.pg-filters .d-confirm{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border:1px solid rgba(255,90,60,.42);border-radius:10px;background:rgba(255,90,60,.07);padding:12px 14px;animation:foldin var(--t-panel) var(--ease-enter) both}
.pg-filters .d-confirm p{margin:0;font-size:13.5px;line-height:1.45;flex:1 1 240px}
.ndlg{padding:0;border:1px solid var(--line2);border-radius:16px;background:#0C111B;color:var(--txt);width:min(520px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ndlg[open]{opacity:1;transform:none;transition:opacity var(--t-panel) var(--ease-enter),transform var(--t-panel) var(--ease-enter)}
@starting-style{
.ndlg[open]{opacity:0;transform:translateY(16px)}
}
.ndlg[open]::backdrop{background:rgba(3,5,10,.68);transition:background-color var(--t-panel) var(--ease-enter)}
@starting-style{
.ndlg[open]::backdrop{background-color:rgba(3,5,10,0)}
}
.ndlg .ndlg-form{display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px}
.ndlg-head{display:flex;align-items:center;justify-content:space-between}
.ndlg h2{margin:0;font-size:20px;font-weight:600}
.ndlg-x{display:grid;place-items:center;width:40px;height:40px;margin-right:-10px;border:0;border-radius:10px;background:transparent;color:var(--dim)}
.ndlg-x svg{width:14px;height:14px}
.ndlg p{margin:0;font-size:13.5px;line-height:1.5;color:var(--dim)}
.ndlg .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
@media(max-width:860px){
.frow{margin:0 calc(-1*clamp(20px,3vw,44px));border-left:0;border-right:0;border-radius:0!important;grid-template-columns:minmax(0,1fr) auto 44px;column-gap:6px;padding:5px 2px 5px 18px}
.swl{display:none}
.f-sw{min-height:44px;padding:0 4px}
.f-panel{padding:2px 16px 16px 0}
.plist li{grid-template-columns:1fr;gap:2px}
.dlist li{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"t x" "h x";row-gap:0;min-height:58px}
.dm-t b{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.fsub{white-space:normal;flex-wrap:wrap;align-items:baseline;row-gap:2px}
.dm-t{grid-area:t}
.dm-hits{grid-area:h;text-align:left;margin-top:2px}
.dm-x{grid-area:x;width:44px;height:44px}
.dadd{grid-template-columns:1fr}
.pg-filters .finput,.wrap .finput.prose{font-size:16px;height:44px}
.wrap .btnq,.wrap .btnp{min-height:44px;height:44px}
.search{height:44px}
.search input{font-size:16px}
.ndlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0}
.ndlg .ndlg-form{padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
.ndlg-x{width:44px;height:44px}
.ndlg .btns .btn,.ndlg .btns .btnp{flex:1;justify-content:center}
}
@media(max-width:720px){
.pg-filters .phead{margin-bottom:16px}
}
@supports (overlay:auto){
.ndlg{opacity:0;transform:translateY(16px);transition:opacity var(--t-exit) var(--ease-exit),transform var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}
.ndlg::backdrop{background-color:rgba(3,5,10,0);transition:background-color var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}
}
/* Phones: a long summary wraps beside its dot instead of dropping below it. */
@media(max-width:860px){.fsub>span:not(.adot){flex:1 1 0;min-width:0}.fsub .adot{align-self:flex-start;margin-top:5px}}

/* Traffic. Lifted from the mockup (Traffic.dc.html), scoped under .pg-traffic. */
@keyframes pillin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.pg-traffic{--cols:92px 172px minmax(140px,1fr) 56px 60px 190px 112px}
.pg-traffic .phead{margin-bottom:22px}
/* The log takes the rest of the screen's height, down to its bottom edge: the page is a
   column, and the log's scroller has no height of its own (height:0) but grows into
   what is left, never below 360 px. (Phones scroll the page instead.) */
.content-fill{display:flex;flex-direction:column;padding-bottom:0}
.content-fill>.pg-traffic{flex:1 0 auto;display:flex;flex-direction:column}
.pg-traffic .ledger{flex:1 0 auto;display:flex;flex-direction:column}
.content-fill .pg-traffic .ledger{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.pg-traffic .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--line);border-bottom:0;border-radius:13px 13px 0 0;background:rgba(12,17,27,.6)}
.pg-traffic .live{display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;color:var(--safe);border:1px solid var(--safe);border-radius:100px;background:rgba(74,222,128,.07);padding:6px 13px;cursor:pointer}
.pg-traffic .live .d{width:7px;height:7px;border-radius:50%;background:var(--safe);animation:ping var(--t-live) var(--ease-enter) infinite}
.pg-traffic .live.paused{color:var(--dim);border-color:var(--line2);background:transparent}
.pg-traffic .live.paused .d{background:var(--dim);animation:none}
.pg-traffic .chips{display:inline-flex;border:1px solid var(--line2);border-radius:100px;padding:3px;gap:2px;background:rgba(7,10,18,.5)}
.pg-traffic .chip{position:relative;display:flex;padding:0;border:0;background:transparent;font-size:inherit;font-weight:inherit;color:inherit}
.pg-traffic .chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-traffic .chip>span{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;padding:5px 12px;border-radius:100px;color:var(--dim);transition:background var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std)}
.pg-traffic .chip:hover>span{color:var(--txt)}
.pg-traffic .chip input:checked+span{background:var(--txt);color:#0A0E16}
.pg-traffic .chip input:focus-visible+span{outline:2px solid var(--gate);outline-offset:2px}
.pg-traffic .chip .cd{width:6px;height:6px;border-radius:50%;flex:none}
.pg-traffic .cd.allowed{background:var(--safe)}
.pg-traffic .cd.blocked{background:var(--danger)}
.pg-traffic .cd.unreachable{background:var(--watch)}
.pg-traffic .psel{position:relative;display:flex;align-items:center;cursor:pointer}
.pg-traffic .psel-face{display:flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 13px;border:1px solid var(--line2);border-radius:100px;background:rgba(7,10,18,.5);font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:var(--dim);white-space:nowrap;cursor:pointer}
.pg-traffic .psel.open .psel-face svg{transform:rotate(180deg)}
/* The Protocol list, drawn in the page (the car's browser never opens a native select's popup). */
.pg-traffic .pmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:flex;flex-direction:column;min-width:200px;padding:6px;background:#0C111B;border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.pg-traffic .pmenu-i{display:flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--dim);font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;text-align:left;cursor:pointer}
.pg-traffic .pmenu-i:hover{background:rgba(132,164,205,.08);color:var(--txt)}
.pg-traffic .pmenu-i[aria-selected="true"]{background:rgba(132,164,205,.12);color:var(--txt)}
.pg-traffic .psel.on .psel-face{color:var(--txt);border-color:var(--txt)}
.pg-traffic .psel-face svg{width:10px;height:10px;flex:none}
.pg-traffic .search{flex:1;min-width:150px;height:auto;margin:0;border-radius:8px;padding:8px 12px;gap:8px}
.pg-traffic .search input{font-size:12px;height:auto}
.pg-traffic .search input::-webkit-search-cancel-button{display:none}
.pg-traffic .mutebtn{display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim);padding:0 12px;height:32px;border:1px solid var(--line2);border-radius:100px;background:transparent;cursor:pointer}
.pg-traffic .mutebtn:hover{color:var(--txt);border-color:var(--txt)}
.pg-traffic .mutebtn svg{width:14px;height:14px;flex:none}
.pg-traffic .mutebtn .mb-n{color:var(--txt);font-weight:600}
.pg-traffic .ledger{position:relative;border:1px solid var(--line);border-radius:0 0 13px 13px;background:var(--panel);overflow:hidden}
.pg-traffic .led-scroll{flex:1 1 auto;height:0;min-height:360px;overflow:auto;overflow-anchor:none;overscroll-behavior-x:contain}
.pg-traffic .led-scroll::-webkit-scrollbar{width:11px;height:11px}
.pg-traffic .led-scroll::-webkit-scrollbar-track,.pg-traffic .led-scroll::-webkit-scrollbar-corner{background:transparent}
.pg-traffic .led-scroll::-webkit-scrollbar-thumb{background:rgba(147,161,181,.34);border:3px solid transparent;border-radius:11px;background-clip:padding-box}
.pg-traffic .led-scroll::-webkit-scrollbar-thumb:hover{background:rgba(147,161,181,.6);border:3px solid transparent;background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){.pg-traffic .led-scroll{scrollbar-width:thin;scrollbar-color:rgba(147,161,181,.4) transparent}}
.pg-traffic .newpill{position:absolute;left:50%;top:50px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600;white-space:nowrap;color:#0A0E16;background:var(--txt);border:0;border-radius:100px;padding:9px 15px;box-shadow:0 10px 28px rgba(0,0,0,.5);cursor:pointer;animation:pillin var(--t-panel) var(--ease-enter) both}
.pg-traffic .newpill:hover{background:#fff}
.pg-traffic .led-inner{min-width:822px}
.pg-traffic .led-head{display:grid;grid-template-columns:var(--cols);font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:500;color:var(--dim);border-bottom:1px solid var(--line);background:#090D15;position:sticky;top:0;z-index:2}
.pg-traffic .led-head div{padding:12px 16px;white-space:nowrap}
.pg-traffic .led-row{display:grid;grid-template-columns:var(--cols);align-items:center;border-bottom:1px solid var(--line);overflow:hidden;box-shadow:inset 3px 0 0 var(--accent,transparent)}
.pg-traffic .led-row.muted .led-cell:not(.rev){opacity:.55}
.pg-traffic .led-edge{position:absolute;top:24px;left:0;width:1px;height:1px;pointer-events:none}
.pg-traffic .led-empty{margin:0;padding:40px 20px;text-align:center;color:var(--dim);font-size:13.5px}
.pg-traffic .c-chev,.pg-traffic .c-fold{display:none}
.pg-traffic .led-cell{padding:13px 16px;min-width:0}
.pg-traffic .tmono{font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim);white-space:nowrap}
.pg-traffic .cli{font-size:14px;color:var(--txt);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-traffic .cliip{font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--faint);margin-top:3px}
.pg-traffic .dom{display:flex;min-width:0;font-family:'Martian Mono',monospace;font-size:14px;color:var(--txt);white-space:nowrap}
.pg-traffic .dom-h{flex:0 1 auto;min-width:2ch;overflow:hidden;text-overflow:ellipsis}
.pg-traffic .dom-t{flex:none}
.pg-traffic .domip{font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--faint);margin-top:3px}
.pg-traffic .vd{display:inline-flex;align-items:center;gap:7px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--dim)}
.pg-traffic .vd .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pg-traffic .vd.allowed{color:var(--safe)}
.pg-traffic .vd.blocked{color:var(--danger)}
.pg-traffic .vd.unreachable{color:var(--watch)} /* let through; the site never answered */
/* Under a blocked verdict: a filter that's on lists the domain now, so it passes from here on. */
.pg-traffic .vd-now{margin-top:4px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.09em;font-size:10.5px;color:var(--safe)}
.pg-traffic .rev{display:flex;gap:6px;justify-content:flex-end}
.pg-traffic .rbtn{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;padding:5px 10px;border:1px solid var(--line2);border-radius:6px;background:transparent;color:var(--dim);cursor:pointer}
.pg-traffic .rbtn:hover{border-color:var(--txt);color:var(--txt)}
.pg-traffic .rbtn.allow{border-color:var(--safe);color:var(--safe)}
.pg-traffic .rbtn.locked{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-style:dashed;border-color:var(--line2);color:var(--dim);cursor:not-allowed}
.pg-traffic .rbtn.locked:hover{border-color:var(--line2);color:var(--txt)}
.pg-traffic .rbtn.locked svg{width:11px;height:11px;flex:none}
.pg-traffic .mtag{display:inline-block;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:10px;padding:5px 10px;border:1px dashed var(--line2);border-radius:6px;color:var(--dim);white-space:nowrap}
.pg-traffic .mtag b{font-weight:500;text-transform:none;letter-spacing:.02em;color:var(--txt)}
.pg-traffic .atag{border-style:solid;border-color:rgba(74,222,128,.45);color:var(--safe)}
.pg-traffic .atag.pending{border-style:dashed;border-color:rgba(245,181,68,.5);color:var(--watch)}
/* The table layout (the car's screen, a laptop): what you tap is as big as on a phone, the
   search types at 16 px, and rows are as tall as the other pages' lists. For a mouse too:
   the car's browser may not say it's a touch screen, and the other pages' controls are
   this size already. */
@media(min-width:861px){
.pg-traffic{--cols:92px 172px minmax(140px,1fr) 56px 60px 200px 176px}
.pg-traffic .led-inner{min-width:896px}
.pg-traffic .toolbar{gap:12px;padding:14px 16px}
.pg-traffic .live{min-height:44px;padding:0 16px}
.pg-traffic .chips{padding:0}
.pg-traffic .chip{min-height:44px}
.pg-traffic .chip>span{padding:0 16px;font-size:11.5px}
.pg-traffic .psel-face{height:44px;padding:0 14px 0 16px}
.pg-traffic .search{min-height:44px;padding:0 14px}
.pg-traffic .search input{font-size:16px;height:42px}
.pg-traffic .mutebtn{height:44px;padding:0 14px;font-size:11.5px}
.pg-traffic .led-head div{padding:14px 16px}
.pg-traffic .led-row{min-height:72px}
.pg-traffic .led-cell{padding:14px 16px}
.pg-traffic .rbtn{min-height:44px;padding:0 14px;font-size:11.5px;border-radius:8px}
}
@media(max-width:860px){
html:has(.pg-traffic){overflow-anchor:none}
.pg-traffic .phead{margin-bottom:16px}
.pg-traffic .toolbar,.pg-traffic .ledger{margin-left:calc(-1*clamp(20px,3vw,44px));margin-right:calc(-1*clamp(20px,3vw,44px));border-left:0;border-right:0;border-radius:0}
.pg-traffic .toolbar{padding:10px 16px;gap:8px}
.pg-traffic .live{min-height:44px;min-width:100px;justify-content:center;padding:0 12px;flex:none}
.pg-traffic .search{order:2;flex:1 1 120px;min-width:0;min-height:44px;padding:0 12px}
.pg-traffic .search input{font-size:16px;height:42px}
.pg-traffic .mutebtn{order:2;height:44px;min-width:44px;justify-content:center;padding:0 12px}
.pg-traffic .mutebtn .mb-l{display:none}
.pg-traffic .chips{order:3;flex:1 1 200px;display:flex;padding:0}
.pg-traffic .chip{flex:1;min-height:44px}
.pg-traffic .chip>span{padding:0 4px;gap:5px;font-size:11px;letter-spacing:.03em}
.pg-traffic .psel{order:3;height:44px}
.pg-traffic .pmenu{left:auto;right:0} /* the button sits at the right end of the toolbar here */
.pg-traffic .psel-face{height:44px;padding:0 10px 0 12px}
.pg-traffic .ledger{overflow:visible}
.pg-traffic .led-scroll{height:auto;overflow:hidden;overflow:clip}
.pg-traffic .led-inner{min-width:0}
.pg-traffic .led-head{display:none}
.pg-traffic .newpill{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:11;min-height:44px;padding:0 18px}
.pg-traffic .led-row{grid-template-columns:auto minmax(0,1fr) auto 44px;grid-template-areas:"dom dom dom chev" "vd cli time chev" "fold fold fold fold";column-gap:10px;row-gap:3px;padding:9px 2px 9px 16px;box-shadow:inset 3px 0 0 var(--accent,transparent);cursor:pointer}
.pg-traffic .led-cell{padding:0}
.pg-traffic .led-cell.acc{box-shadow:none}
.pg-traffic .c-dom{grid-area:dom;min-width:0}
.pg-traffic .c-vd{grid-area:vd}
.pg-traffic .c-cli{grid-area:cli;min-width:0}
.pg-traffic .c-time{grid-area:time}
.pg-traffic .c-port,.pg-traffic .c-proto,.pg-traffic .c-rev,.pg-traffic .cliip,.pg-traffic .domip,.pg-traffic .vd-now{display:none}
.pg-traffic .dom{font-size:14px}
.pg-traffic .cli{font-size:13px;font-weight:400;color:var(--dim)}
.pg-traffic .vd{font-size:11.5px;letter-spacing:.05em;gap:6px}
.pg-traffic .c-chev{grid-area:chev;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--dim)}
.pg-traffic .c-chev svg{width:14px;height:14px;transition:transform var(--t-panel) var(--ease-std)}
.pg-traffic .led-row.open .c-chev svg{transform:rotate(90deg)}
.pg-traffic .led-row.open{background:rgba(132,164,205,.05)}
.pg-traffic .c-fold{grid-area:fold;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-std);cursor:default}
.pg-traffic .led-row.open .c-fold{grid-template-rows:1fr}
.pg-traffic .c-fold-in{min-height:0;overflow:hidden;visibility:hidden;padding-right:14px;transition:visibility 0s linear var(--t-panel)}
.pg-traffic .led-row.open .c-fold-in{visibility:visible;transition-delay:0s}
.pg-traffic .c-facts{margin:0;padding:8px 0 4px}
.pg-traffic .c-facts div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:30px}
.pg-traffic .c-facts dt{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim)}
.pg-traffic .c-facts dd{margin:0;font-family:'Martian Mono',monospace;font-size:12.5px;color:var(--txt);white-space:nowrap}
.pg-traffic .c-acts{display:flex;gap:8px;padding:8px 0 6px}
.pg-traffic .c-acts:empty{display:none}
.pg-traffic .c-acts .rbtn{flex:1;min-height:44px;font-size:11px}
}
/* Traffic: the Muted dialog (on the shared .ndlg). */
.pg-traffic .ndlg p code{font-family:'Martian Mono',monospace;font-size:12px;color:var(--txt)}
.pg-traffic .madd{display:flex;gap:8px}
.pg-traffic .madd .finput{flex:1;min-width:0;font-family:'Martian Mono',monospace;font-size:13px;height:42px;border-radius:9px;padding:0 12px}
.pg-traffic .madd .finput[aria-invalid="true"]{border-color:var(--danger)}
.pg-traffic .madd .btnp{height:42px}
.pg-traffic .btnp:disabled{opacity:.4;cursor:default}
.pg-traffic .mstatus{display:flex;align-items:center;gap:10px;min-height:22px;margin:-6px 0 -6px;font-size:13px;color:var(--dim)}
.pg-traffic .mstatus.err{color:var(--danger)}
.pg-traffic .mstatus button{flex:none;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:rgba(234,240,247,.08);color:var(--txt);cursor:pointer}
.pg-traffic .mlist{list-style:none;margin:0;padding:0;max-height:min(320px,40vh);overflow:auto;border-top:1px solid var(--line)}
.pg-traffic .mlist li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.pg-traffic .mlist li.fresh{animation:rowin var(--t-flash) var(--ease-std)}
.pg-traffic .mpat{flex:1;min-width:0}
.pg-traffic .mpat b{display:block;font-family:'Martian Mono',monospace;font-size:13px;font-weight:500;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-traffic .mpat>span{display:block;margin-top:3px;font-family:'Martian Mono',monospace;font-size:10.5px;color:var(--faint)}
.pg-traffic .mrm{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;font-weight:600;min-height:34px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--dim);white-space:nowrap;cursor:pointer}
.pg-traffic .mrm:hover{color:var(--danger);border-color:var(--danger)}
.pg-traffic .mempty{margin:0;padding:16px 0 6px;text-align:center;font-size:13.5px;color:var(--dim)}
@media(max-width:860px){
.pg-traffic .madd .finput{font-size:16px;height:44px}
.pg-traffic .madd .btnp{height:44px}
.pg-traffic .mrm,.pg-traffic .mstatus button{min-height:44px}
}
/* Traffic: the Allow dialog. */
.pg-traffic .adlg .finput.mono{font-family:'Martian Mono',monospace;font-size:13px}
.pg-traffic .adlg .finput[aria-invalid="true"]{border-color:var(--danger)}
.pg-traffic .adlg .fstatus{margin:-6px 0}
.pg-traffic .fpick{display:flex;flex-wrap:wrap;gap:6px}
.pg-traffic .fopt{position:relative;display:flex}
.pg-traffic .fopt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-traffic .fopt>span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line2);border-radius:100px;font-size:13.5px;color:var(--txt);transition:background var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std)}
.pg-traffic .fopt:hover>span{border-color:var(--txt)}
.pg-traffic .fopt>span i{font-style:normal;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;color:var(--faint)}
.pg-traffic .fopt input:checked+span{background:var(--txt);border-color:var(--txt);color:#0A0E16}
.pg-traffic .fopt input:checked+span i{color:#3a4250}
.pg-traffic .fopt input:focus-visible+span{outline:2px solid var(--gate);outline-offset:2px}
.pg-traffic .fopt.new>span{border-style:dashed;color:var(--dim)}
.pg-traffic .adlg .ndlg-form{max-height:min(720px,calc(100vh - 48px));overflow:auto}
@media(max-width:860px){
.pg-traffic .fopt>span{min-height:44px;padding:0 14px}
.pg-traffic .adlg .ndlg-form{max-height:88vh}
}

/* System. Lifted from the mockup (System.dc.html), scoped under .pg-system. */
.pg-system .h1{margin:0 0 22px}
.pg-system .vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.pg-system .vital{padding:16px 18px 15px;border-right:1px solid var(--line);min-width:0}
.pg-system .vital:last-child{border-right:0}
.pg-system .vk{display:flex;align-items:center;gap:7px;font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--dim)}
.pg-system .vk i{width:6px;height:6px;border-radius:50%;background:var(--safe);animation:ping var(--t-live) var(--ease-enter) infinite}
.pg-system .vital.down .vk i{background:var(--watch);animation:none}
.pg-system .vv{margin-top:8px;font-family:'Martian Mono',monospace;font-size:21px;font-weight:500;letter-spacing:-.02em;color:var(--txt);white-space:nowrap;font-variant-numeric:tabular-nums}
.pg-system .vs{margin-top:4px;font-family:'Martian Mono',monospace;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-system .machine{margin:10px 2px 0;min-height:16px;font-family:'Martian Mono',monospace;font-size:11px;color:var(--faint)}
.pg-system .ghead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:30px 0 10px}
.pg-system .ghead h2{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--txt);font-weight:600;margin:0}
.pg-system .srow{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;align-items:center;column-gap:16px;padding:6px 4px 6px 20px;min-height:66px;background:var(--panel);border:1px solid var(--line);border-top:0;box-shadow:inset 3px 0 0 var(--c,transparent)}
.pg-system .srow.first{border-top:1px solid var(--line);border-radius:14px 14px 0 0}
.pg-system .srow.last{border-radius:0 0 14px 14px}
.pg-system .srow.first.last{border-radius:14px}
.pg-system .srow:hover{background:rgba(132,164,205,.05)}
.pg-system .srow.open{background:rgba(132,164,205,.06)}
.pg-system .srow.ok{--c:var(--safe)}
.pg-system .srow.warn{--c:var(--watch)}
.pg-system .srow.danger{--c:var(--danger)}
.pg-system .s-id{grid-area:1/1;min-width:0;padding:8px 0}
.pg-system .srow.can-open .s-id{cursor:pointer}
.pg-system .sname{font-size:15px;font-weight:600}
.pg-system .ssub{display:flex;align-items:center;gap:8px;margin-top:4px;font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-system .ssub span{overflow:hidden;text-overflow:ellipsis}
.pg-system .s-act{grid-area:1/2;display:flex;align-items:center;gap:10px}
.pg-system .s-chev{grid-area:1/3;justify-self:center;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--dim);padding:0;cursor:pointer}
.pg-system .s-chev:hover{color:var(--txt);background:rgba(132,164,205,.08)}
.pg-system .s-chev svg{width:14px;height:14px;transition:transform var(--t-panel) var(--ease-std)}
.pg-system .srow.open .s-chev svg{transform:rotate(90deg)}
.pg-system .s-fold{grid-area:2/1/auto/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-panel) var(--ease-std)}
.pg-system .srow.open .s-fold,.pg-system .s-fold.shown{grid-template-rows:1fr}
.pg-system .s-fold-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--t-panel)}
.pg-system .srow.open .s-fold-in,.pg-system .s-fold.shown .s-fold-in{visibility:visible;transition-delay:0s}
.pg-system .s-panel{padding:4px 16px 20px 0;display:flex;flex-direction:column;gap:14px}
.pg-system .s-sub{display:flex;flex-direction:column;gap:14px}
.pg-system .sw.locked{opacity:.62}
.pg-system .sw.locked input{cursor:not-allowed}
.pg-system .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.pg-system .field.narrow{max-width:420px}
.pg-system .finput{font-family:'Saira',sans-serif;font-size:14px;background:rgba(7,10,18,.6);border-radius:9px;padding:0 12px;height:42px;min-width:0}
.pg-system .finput.mono{font-family:'Martian Mono',monospace;font-size:13px}
.pg-system .finput[aria-invalid="true"]{border-color:var(--danger)}
.pg-system .pw{position:relative;display:flex}
.pg-system .pw .finput{padding-right:64px}
.pg-system .pw button{position:absolute;right:4px;top:4px;bottom:4px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--dim);font-family:'Martian Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.pg-system .pw button:hover{color:var(--txt);background:rgba(132,164,205,.08)}
.pg-system .seg{display:inline-flex;align-self:flex-start;border:1px solid var(--line2);border-radius:100px;padding:3px;gap:2px;background:rgba(7,10,18,.5);flex-wrap:wrap}
.pg-system .opt{position:relative;display:flex}
.pg-system .opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-system .opt>span{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:0 13px;border-radius:100px;font-family:'Martian Mono',monospace;font-size:11.5px;color:var(--dim);transition:background var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std)}
.pg-system .opt:hover>span{color:var(--txt)}
.pg-system .opt input:checked+span{background:var(--txt);color:#0A0E16}
.pg-system .opt input:focus-visible+span{outline:2px solid var(--gate);outline-offset:2px}
.pg-system .hint{margin:0;font-size:13px;color:var(--dim);line-height:1.5}
.pg-system .hint b{color:var(--txt);font-weight:600}
.pg-system .status{min-height:20px;font-size:13px;color:var(--dim)}
.pg-system .status.err{color:var(--danger)}
.pg-system .btnrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-system .btn:disabled,.pg-system .btn:disabled:hover,.pg-system .btnp:disabled{opacity:.4;cursor:default;background:transparent}
.pg-system .btnp:disabled{background:var(--txt)}
.pg-system .chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-system .chip{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 4px 0 12px;border:1px solid var(--line2);border-radius:100px;background:transparent;font-family:'Martian Mono',monospace;font-size:12.5px;font-weight:400;color:var(--txt);cursor:default}
.pg-system .chip button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.pg-system .chip button:hover{color:var(--danger);background:rgba(255,90,60,.1)}
.pg-system .chip button svg{width:10px;height:10px}
.pg-system .addline{display:flex;gap:8px;max-width:420px}
.pg-system .addline .finput{flex:1}
.pg-system .facts{margin:0;border-top:1px solid var(--line)}
.pg-system .facts div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px;border-bottom:1px solid var(--line)}
.pg-system .facts dt{font-family:'Martian Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--dim)}
.pg-system .facts dd{margin:0;display:flex;align-items:center;gap:8px;min-width:0;font-family:'Martian Mono',monospace;font-size:12.5px;color:var(--txt)}
.pg-system .facts dd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-system .copy{border:0;background:transparent;color:var(--dim);font-family:'Martian Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-radius:6px;cursor:pointer}
.pg-system .copy:hover{color:var(--txt);background:rgba(132,164,205,.08)}
.pg-system .ulist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pg-system .ulist li{display:flex;align-items:center;gap:12px;min-height:58px;padding:6px 0;border-bottom:1px solid var(--line)}
.pg-system .ulist li.fresh{animation:rowin var(--t-flash) var(--ease-std)}
.pg-system .u-t{flex:1;min-width:0}
.pg-system .u-t b{display:block;font-size:14.5px;font-weight:600}
.pg-system .u-t>span{display:block;margin-top:2px;font-family:'Martian Mono',monospace;font-size:11px;color:var(--faint)}
.pg-system .confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border:1px solid rgba(255,90,60,.42);border-radius:10px;background:rgba(255,90,60,.07);padding:12px 14px;animation:foldin var(--t-panel) var(--ease-enter) both}
.pg-system .confirm p{margin:0;font-size:13.5px;line-height:1.45;flex:1 1 240px}
.pg-system .confirm .btns{display:flex;gap:8px}
.pg-system .alist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pg-system .alist li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pg-system .alist time{font-family:'Martian Mono',monospace;font-size:11px;color:var(--faint)}
.pg-system .qdlg{padding:0;border:1px solid var(--line2);border-radius:20px;background:#0C111B;color:var(--txt);width:fit-content;max-width:calc(100vw - 32px);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pg-system .qdlg[open]{opacity:1;transform:none;transition:opacity var(--t-panel) var(--ease-enter),transform var(--t-panel) var(--ease-enter)}
@starting-style{.pg-system .qdlg[open]{opacity:0;transform:translateY(16px)}}
.pg-system .qdlg[open]::backdrop{background:rgba(3,5,10,.7);transition:background-color var(--t-panel) var(--ease-enter)}
@starting-style{.pg-system .qdlg[open]::backdrop{background-color:rgba(3,5,10,0)}}
.pg-system .q-in,.pg-system .q-sub{display:flex;flex-direction:column;align-items:center;gap:16px}
.pg-system .q-in{padding:24px 24px 20px}
/* White modules on the brand red with the Airgapp mark in the middle, like the enrol page. */
.pg-system .qr{position:relative;width:min(320px,calc(100vw - 48px));aspect-ratio:1;background:var(--brand);padding:5.6%;border-radius:20px}
.pg-system .qr svg{display:block;width:100%;height:100%}
.pg-system .qr-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22.4%;height:22.4%;background:var(--brand);border-radius:20%;padding:1.7%}
.pg-system .qr-mark img{display:block;width:100%;height:100%;border-radius:16%}
.pg-system .q-note{margin:0;text-align:center;font-size:15px;color:var(--dim)}
.pg-system .openapp{display:flex;align-items:center;justify-content:center;gap:12px;width:min(320px,calc(100vw - 48px));height:64px;border-radius:18px;background:var(--brand);color:#fff;font-size:18px;font-weight:600;letter-spacing:-.01em;text-decoration:none}
.pg-system .openapp img{width:36px;height:36px;border-radius:10px}
.pg-system .q-sub .linkbtn{min-height:44px;padding:0 14px;color:var(--dim);font-size:15px;text-underline-offset:4px}
.pg-system .q-none{padding:20px 6px;text-align:center;font-size:14px;color:var(--dim);line-height:1.5;margin:0}
@supports (overlay:auto){.pg-system .qdlg{opacity:0;transform:translateY(16px);transition:opacity var(--t-exit) var(--ease-exit),transform var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}.pg-system .qdlg::backdrop{background-color:rgba(3,5,10,0);transition:background-color var(--t-exit) var(--ease-exit),overlay var(--t-exit) allow-discrete,display var(--t-exit) allow-discrete}}
@media(max-width:860px){
.pg-system .vitals{grid-template-columns:1fr 1fr}
.pg-system .vital{border-bottom:1px solid var(--line)}
.pg-system .vital:nth-child(2n){border-right:0}
.pg-system .vital:last-child{grid-column:1/-1;border-bottom:0}
.pg-system .srow{margin:0 calc(-1*clamp(20px,3vw,44px));border-left:0;border-right:0;border-radius:0!important;grid-template-columns:minmax(0,1fr) auto 44px;column-gap:6px;padding:5px 2px 5px 18px}
.pg-system .s-panel{padding:4px 16px 16px 0}
.pg-system .finput,.pg-system .finput.mono{font-size:16px;height:44px}
.pg-system .opt>span{min-height:44px}
.pg-system .chip{height:44px}
.pg-system .chip button{width:44px;height:44px}
.pg-system .addline{max-width:none}
.pg-system .ulist li{flex-wrap:wrap;gap:8px 10px;padding:10px 0}
.pg-system .u-t{flex:1 1 100%}
.pg-system .ulist li .btn{flex:1}
.pg-system .copy,.pg-system .pw button{min-height:44px}
.pg-system .qdlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom:0}
.pg-system .q-in{padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 22px)}
}
@media(max-width:720px){.pg-system .vv{font-size:18px}}