:root{color-scheme:dark;--bg:#08090a;--sidebar:#0d0e10;--surface:#111216;--surface-2:#17181d;--surface-3:#202127;--line:rgba(255,255,255,.075);--line-strong:rgba(255,255,255,.12);--text:#f4f5f7;--text-2:#c6c9d0;--muted:#858a94;--quiet:#5f646e;--accent:#6e6bea;--accent-hover:#817fff;--accent-soft:color-mix(in srgb,var(--accent) 45%,#fff);--green:#2dba74;--red:#ef5d69;--amber:#e7a84b;--radius:9px;--shadow:0 18px 60px rgba(0,0,0,.38);font:14px/1.45 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv01","ss03"}*{box-sizing:border-box}[hidden]{display:none!important}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,.button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;padding:20px 14px 14px;border-right:1px solid var(--line);background:var(--sidebar);display:flex;flex-direction:column;z-index:10}.brand{display:grid;gap:10px;padding:0 4px;margin-bottom:18px}.brand-term{border:1px solid rgba(56,214,255,.28);border-radius:9px;background:linear-gradient(180deg,#0f1a22,#0a1117);box-shadow:0 0 28px rgba(56,214,255,.14),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transition:box-shadow .2s ease}.brand:hover .brand-term{box-shadow:0 0 36px rgba(56,214,255,.24),inset 0 1px 0 rgba(255,255,255,.05)}.brand-term-bar{display:flex;align-items:center;gap:5px;padding:6px 9px;background:rgba(255,255,255,.035);border-bottom:1px solid rgba(255,255,255,.06)}.brand-term-bar i{width:7px;height:7px;border-radius:50%;display:block}.brand-term-bar i:nth-child(1){background:var(--red)}.brand-term-bar i:nth-child(2){background:var(--amber)}.brand-term-bar i:nth-child(3){background:var(--green)}.brand-term-bar span{margin-left:auto;font-size:9px;letter-spacing:.06em;color:#7c8791}.brand-term-body{display:flex;align-items:center;gap:8px;padding:9px 10px 10px}.brand-term-prompt{color:#5cf0a6;font-size:13px;font-weight:600;text-shadow:0 0 10px rgba(92,240,166,.6)}.brand-term-port{color:#38d6ff;font-size:15px;font-weight:700;letter-spacing:.04em;text-shadow:0 0 12px rgba(56,214,255,.7)}.brand-term-port em{font-style:normal;color:#ff6fa0;margin-left:5px;font-size:12px;text-shadow:0 0 10px rgba(255,111,160,.7)}.brand-term-cursor{width:7px;height:14px;background:#38d6ff;box-shadow:0 0 8px rgba(56,214,255,.8);animation:brand-blink 1.1s steps(1) infinite}@keyframes brand-blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.brand-term-cursor{animation:none}}.brand-text{display:grid;line-height:1.1;padding:0 4px}.brand>span:last-child{display:grid;line-height:1.1}.brand b{font-size:14px;font-weight:600}.brand small{font-size:9px;letter-spacing:.16em;color:var(--quiet);margin-top:3px}.sidebar nav{display:grid;gap:3px}.nav-item,.mobile-nav button{border:0;background:transparent;color:var(--muted)}.nav-item{height:38px;padding:0 10px;border-radius:7px;display:flex;align-items:center;gap:10px;text-align:left;font-size:13px}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.055);color:var(--text)}.nav-item.active{box-shadow:inset 2px 0 var(--accent)}.nav-icon,.button-icon,.mobile-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.nav-icon{flex:0 0 18px}.nav-icon path:first-child:not(:only-child){fill:none}.nav-item:first-child .nav-icon path{fill:none}.nav-count{margin-left:auto;min-width:22px;padding:1px 6px;border:1px solid var(--line);border-radius:99px;text-align:center;font-size:10px}.sidebar-foot{position:relative;margin-top:auto;border-top:1px solid var(--line);padding-top:13px}.system-mini{display:flex;align-items:center;gap:10px;padding:7px 9px;color:var(--text-2)}.system-mini>i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(45,186,116,.1)}.system-mini.degraded>i{background:var(--red);box-shadow:0 0 0 4px rgba(239,93,105,.1)}.system-mini span,.profile-button span:nth-child(2){display:grid}.system-mini b,.profile-button b{font-size:11px;font-weight:500}.system-mini small,.profile-button small{font-size:10px;color:var(--quiet)}.profile-button{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;padding:9px;border-radius:7px;text-align:left}.profile-button:hover{background:rgba(255,255,255,.04)}.avatar{display:grid!important;place-items:center;width:30px;height:30px;border-radius:50%;background:#242631;color:var(--accent-soft);font-size:11px}.chevron{margin-left:auto;color:var(--quiet)}.logout-button{width:100%;border:0;background:transparent;color:var(--muted);padding:7px;font-size:11px;text-align:left}.logout-button:hover{color:var(--red)}.content{margin-left:236px;min-height:100vh;padding:30px clamp(24px,3.2vw,48px) 70px;max-width:1500px}.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:24px}.eyebrow{display:block;color:var(--quiet);font-size:9px;font-weight:600;letter-spacing:.16em;margin-bottom:4px}.topbar h1{margin:0;font-size:25px;font-weight:560;letter-spacing:-.45px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:12px}.header-actions{display:flex;gap:8px}.primary,.secondary,.danger,.icon-button,.button{border:1px solid transparent;border-radius:7px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-size:12px;font-weight:520;transition:.15s ease}.primary{background:var(--accent);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.13)}.primary:hover{background:var(--accent-hover)}.secondary{background:rgba(255,255,255,.035);border-color:var(--line);color:var(--text-2)}.secondary:hover{background:rgba(255,255,255,.07);color:var(--text)}.danger{background:rgba(239,93,105,.14);border-color:rgba(239,93,105,.22);color:#ff8f98}.danger:hover{background:rgba(239,93,105,.22)}.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:7px;background:transparent;color:var(--text-2);font-size:12px;font-weight:520;transition:.15s ease}.ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}.ghost:disabled{opacity:.45;cursor:default}.ghost:disabled:hover{background:transparent;color:var(--text-2)}.danger.ghost{background:transparent;border-color:rgba(239,93,105,.3);color:#ff8f98}.danger.ghost:hover{background:rgba(239,93,105,.14)}.ghost.danger-text{color:#d97880}.ghost.danger-text:hover{color:#ff8e97;border-color:rgba(239,93,105,.3)}.compact{height:34px}.icon-button{width:34px;padding:0;background:rgba(255,255,255,.025);border-color:var(--line);color:var(--muted);font-size:17px}.icon-button:hover{background:rgba(255,255,255,.065);color:var(--text)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(155px,1fr));gap:10px}.metric-card,.panel-card,.service-panel{background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.018));border:1px solid var(--line);border-radius:var(--radius)}.metric-card{padding:15px 16px;min-height:105px}.metric-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.metric-icon{display:grid;place-items:center;color:var(--quiet)}.ui-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.metric-card strong{display:block;margin-top:13px;font-size:24px;line-height:1;font-weight:520;letter-spacing:-.55px}.metric-card p{margin:8px 0 0;color:var(--quiet);font-size:10px}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}.panel-card{padding:17px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel-head h2{font-size:13px;font-weight:540;margin:0}.panel-head span{font-size:10px;color:var(--quiet)}.health-hero{display:flex;align-items:center;gap:13px;padding:14px;border-radius:8px;background:rgba(45,186,116,.055);border:1px solid rgba(45,186,116,.12)}.health-orb{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(45,186,116,.12);color:var(--green);font-size:18px}.health-hero.degraded{background:rgba(239,93,105,.055);border-color:rgba(239,93,105,.15)}.health-hero.degraded .health-orb{background:rgba(239,93,105,.12);color:var(--red)}.health-hero b{display:block;font-size:13px}.health-hero small{color:var(--muted);font-size:10px}.service-list{display:grid;margin-top:8px}.service-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}.service-row:last-child{border:0}.service-row i,.status-pill i{width:6px;height:6px;border-radius:50%;background:var(--green)}.service-row.degraded i{background:var(--red)}.service-row.degraded em{color:var(--red)}.service-row span{display:grid}.service-row b{font-size:11px;font-weight:500}.service-row small{font-size:9px;color:var(--quiet)}.service-row>em{margin-left:auto;font-size:9px;font-style:normal;color:var(--muted)}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.search{position:relative;flex:1;max-width:360px}.search input{padding-left:31px}.search:before{content:'';position:absolute;left:11px;top:10px;width:8px;height:8px;border:1.5px solid var(--quiet);border-radius:50%}.search:after{content:'';position:absolute;left:19px;top:19px;width:5px;border-top:1.5px solid var(--quiet);transform:rotate(45deg)}.filter-pills{display:flex;gap:4px}.filter-pill{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:6px;min-height:32px;padding:0 10px;font-size:10px}.filter-pill.active,.filter-pill:hover{background:rgba(255,255,255,.055);color:var(--text)}.data-panel{border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.018);overflow:hidden}.data-head,.data-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(110px,.7fr) minmax(110px,.65fr) minmax(330px,1.7fr);align-items:center}.admin-grid{grid-template-columns:minmax(180px,1.3fr) minmax(110px,.7fr) minmax(110px,.7fr) minmax(220px,1fr)}.align-right{text-align:right}.data-head{min-height:38px;padding:0 14px;background:rgba(255,255,255,.018);border-bottom:1px solid var(--line);color:var(--quiet);font-size:9px;text-transform:uppercase;letter-spacing:.09em}.data-row{min-height:62px;padding:9px 14px;border-bottom:1px solid var(--line);transition:.12s}.data-row:last-child{border-bottom:0}.data-row:hover{background:rgba(255,255,255,.028)}.identity{display:flex;align-items:center;gap:10px;min-width:0}.user-glyph{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:linear-gradient(145deg,#242635,#191a22);border:1px solid var(--line);color:var(--accent-soft);font-size:11px;font-weight:600}.identity span{display:grid;min-width:0}.identity b{font-size:12px;font-weight:530;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity small,.cell small{font-size:9px;color:var(--quiet)}.status-pill{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:3px 7px;border-radius:99px;background:rgba(45,186,116,.08);color:#76dca7;font-size:9px;border:1px solid rgba(45,186,116,.13)}.status-pill.blocked{background:rgba(239,93,105,.08);border-color:rgba(239,93,105,.13);color:#f4929a}.status-pill.blocked i{background:var(--red)}.cell{color:var(--text-2);font-size:11px}.cell b,.cell small{display:block}.row-actions{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}.action-button{min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.025);color:var(--muted);font-size:10px}.action-note{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;color:var(--quiet);font-size:10px;line-height:1.25}.action-button:hover{background:rgba(255,255,255,.07);color:var(--text)}.action-button.share{color:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent);background:color-mix(in srgb,var(--accent) 7.5%,transparent)}.action-button.danger-text{color:#d97880}.action-button.danger-text:hover{color:#ff8e97;border-color:rgba(239,93,105,.2)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}.empty-state{padding:70px 20px;text-align:center}.empty-state span{font-size:27px;color:var(--quiet)}.empty-state h3{font-size:14px;margin:12px 0 4px}.empty-state p{color:var(--muted);font-size:11px;margin:0 0 16px}.audit-list{display:grid}dialog{border:0;background:transparent;color:var(--text);padding:0;max-width:calc(100vw - 28px)}dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}dialog form{background:#121318;border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);padding:20px}.sheet{width:min(460px,calc(100vw - 28px))}.access-dialog{width:min(760px,calc(100vw - 28px))}.confirm-dialog{width:min(390px,calc(100vw - 28px));text-align:center}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.modal-head h2,dialog h2{margin:0;font-size:18px;font-weight:540;letter-spacing:-.25px}.modal-copy{font-size:11px;color:var(--muted);margin:0 0 18px}.close{margin:-6px -6px 0 0}.sheet label,.access-details label{display:grid;gap:6px;color:var(--text-2);font-size:10px;margin:13px 0}.sheet label small{color:var(--quiet);font-size:9px}input,select{width:100%;min-height:36px;padding:0 11px;color:var(--text);background:#0c0d10;border:1px solid var(--line-strong);border-radius:7px;outline:none}input:focus,select:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}input::placeholder{color:#484c55}dialog footer{display:flex;align-items:center;gap:8px;margin-top:20px}.sheet footer{border-top:1px solid var(--line);padding-top:15px}.spacer{flex:1}.form-error{min-height:18px;color:#ff828c;font-size:10px}.confirm-icon{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 12px;border-radius:50%;background:rgba(239,93,105,.12);color:#ff8e97}.confirm-dialog p{color:var(--muted);font-size:11px}.confirm-dialog footer{justify-content:center}.access-layout{display:grid;grid-template-columns:250px 1fr;gap:22px}.access-layout.no-qr{grid-template-columns:1fr}.qr-wrap{display:grid;place-items:center;padding:14px;background:#f7f7fa;border-radius:9px;color:#333}.qr-wrap img{width:220px;height:220px}.qr-wrap span{font-size:9px;margin-top:6px}.access-details{padding-top:7px}.access-details>p{font-size:11px;color:var(--muted);margin:13px 0 18px}.copy-field{display:flex}.copy-field input{border-radius:7px 0 0 7px;font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.copy-field button{border:1px solid var(--line-strong);border-left:0;border-radius:0 7px 7px 0;background:var(--surface-3);color:var(--text-2);padding:0 10px;font-size:10px}.access-actions{display:flex;gap:7px;flex-wrap:wrap}.security-note{margin-top:18px;padding:10px;border-radius:7px;background:rgba(231,168,75,.06);border:1px solid rgba(231,168,75,.12);color:#c9a96f;font-size:9px}.toast-region{position:fixed;inset:auto 18px 18px auto;z-index:100;display:grid;gap:8px;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;width:auto;height:auto;max-width:none;max-height:none;pointer-events:none}.toast-region>*{pointer-events:auto}.toast{min-width:240px;max-width:340px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:#1a1b20;box-shadow:var(--shadow);font-size:11px;animation:toast-in .18s ease}.toast.error{border-color:rgba(239,93,105,.25)}.skeleton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.skeleton-grid i{height:105px;border-radius:9px;background:linear-gradient(90deg,#111216,#191a1e,#111216);background-size:200%;animation:pulse 1.2s infinite}.login{min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:20px}.login-glow{position:fixed;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);filter:blur(15px);pointer-events:none}.login-card{position:relative;width:min(390px,100%);padding:27px;border:1px solid var(--line-strong);border-radius:14px;background:linear-gradient(180deg,rgba(23,24,29,.96),rgba(14,15,18,.96));box-shadow:var(--shadow)}.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:31px}.login-mark{width:76px;height:76px;border-radius:18px;object-fit:cover;box-shadow:0 0 46px rgba(56,214,255,.22),0 10px 30px rgba(0,0,0,.55);outline:1px solid rgba(255,255,255,.07);outline-offset:-1px}.login-brand>span:last-child{display:grid;line-height:1.1}.login-brand b{font-size:13px}.login-brand small{font-size:8px;letter-spacing:.16em;color:var(--quiet);margin-top:3px}.login-copy h1{font-size:22px;font-weight:550;letter-spacing:-.45px;margin:0}.login-copy p{font-size:11px;color:var(--muted);margin:6px 0 23px}.login-card label{display:grid;gap:6px;margin:13px 0;color:var(--text-2);font-size:10px}.login-submit{width:100%;margin-top:8px;height:38px}.login-security{display:flex;justify-content:center;align-items:center;gap:7px;border-top:1px solid var(--line);margin-top:22px;padding-top:15px;color:var(--quiet);font-size:9px}.login-security i{width:6px;height:6px;border-radius:50%;background:var(--green)}.login-security.degraded{color:var(--red)}.login-security.degraded i{background:var(--red)}#error{min-height:16px;margin:8px 0 0;color:#ff828c;font-size:10px}.mobile-nav{display:none}@keyframes pulse{to{background-position:-200%}}@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}.naive-overview{display:grid;grid-template-columns:1.7fr .7fr 1fr;gap:10px;margin-bottom:12px}.naive-overview article{min-width:0;min-height:88px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,transparent),rgba(255,255,255,.018));display:flex;align-items:center;gap:12px}.naive-overview article:first-child{border-color:color-mix(in srgb,var(--accent) 24%,transparent)}.naive-overview article>div{display:grid;min-width:0;flex:1}.naive-overview small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--quiet)}.naive-overview b,.naive-overview strong{font-size:17px;font-style:normal}.naive-overview em,.naive-overview article>span:last-child{font-size:11px;color:var(--muted);font-style:normal;overflow:hidden;text-overflow:ellipsis}.naive-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 15%,transparent)}.naive-mark .ui-icon{width:20px}.naive-grid{grid-template-columns:minmax(190px,1.45fr) minmax(110px,.7fr) minmax(100px,.65fr) minmax(390px,1.9fr)}.naive-glyph{color:var(--accent-soft)!important;background:color-mix(in srgb,var(--accent) 13%,transparent)!important}.protocol-pill{display:inline-flex;padding:3px 7px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:5px;color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}.access-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.access-actions .button{display:inline-flex;align-items:center;justify-content:center}.security-note{margin-top:18px;padding:10px 12px;border:1px solid rgba(231,168,75,.2);border-radius:7px;background:rgba(231,168,75,.06);color:#d8bd8c;font-size:11px}#view>.security-note{margin:0 0 14px}
.protocol-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}.host-row{grid-column:1/-1;min-height:0}.host-row .host-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.protocol-card{min-height:258px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px rgba(255,255,255,.025)}.protocol-card.degraded{border-color:rgba(231,168,75,.24)}.protocol-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.protocol-head h2{font-size:20px;margin:2px 0 0}.protocol-head small,.protocol-access small,.protocol-metrics small,.traffic-unavailable small,.protocol-caption{display:block;color:var(--muted);font-size:11px}.protocol-access{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0 12px}.protocol-access>span,.protocol-metrics>span{padding:12px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.018)}.protocol-access strong{display:block;margin-top:3px;font-size:24px}.protocol-metrics{display:grid;grid-template-columns:1fr 1fr 1.45fr;gap:8px}.protocol-metrics b{display:block;margin-top:3px;font-size:16px}.protocol-metrics em{display:block;margin-top:4px;color:var(--quiet);font-size:9px;font-style:normal;line-height:1.25}.protocol-note{min-height:20px;margin:14px 0 0;color:var(--text-2);font-size:12px}.traffic-unavailable{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line-strong);border-radius:7px;background:rgba(255,255,255,.012)}.traffic-unavailable>span:first-child{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--surface-3);color:var(--muted)}.traffic-unavailable b{display:block;font-size:12px}.protocol-caption{margin-top:10px}
@media(max-width:1040px){.protocol-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.protocol-overview>article:last-child{grid-column:1/-1}.naive-overview{grid-template-columns:1fr 1fr}.naive-overview article:first-child{grid-column:1/3}.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.data-head,.data-row{grid-template-columns:minmax(150px,1.3fr) 100px minmax(280px,1.6fr)}.data-head>*:nth-child(3){display:none}.data-row>*:nth-child(3){grid-column:1/4;grid-row:2;padding-top:6px;color:var(--muted)}.data-row>.row-actions{grid-column:3;grid-row:1}}.version-check{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:var(--muted);font-size:12px}.version-risk{display:block;color:var(--amber);font-size:10px;line-height:1.35}@media(max-width:560px){.version-check{flex-direction:column;align-items:stretch}}.version-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.version-card{display:flex;flex-direction:column;gap:16px;min-height:250px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 1px rgba(255,255,255,.025)}.version-card h2{margin:0 0 4px;font-size:18px}.version-card .panel-head{align-items:flex-start}.version-card .panel-head>div>span{color:var(--muted);font-size:11px}.version-card label{display:grid;gap:7px;color:var(--muted);font-size:11px}.version-card select{width:100%;padding:10px 11px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-2);color:var(--text)}.version-card .primary{margin-top:auto}.version-note{color:var(--quiet);font-size:10px;line-height:1.35}.access-note{margin:0;color:var(--quiet);font-size:10px;line-height:1.45}.version-empty{margin:0;padding:11px 12px;border:1px dashed var(--line-strong);border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.4}@media(max-width:1040px){.version-grid{grid-template-columns:1fr 1fr}}@media(max-width:900px){.version-grid{grid-template-columns:1fr}.version-card{min-height:0;padding:15px}}
@media(max-width:900px){.protocol-overview{grid-template-columns:1fr}.protocol-overview>article:last-child{grid-column:auto}.protocol-card{padding:15px;min-height:0}.protocol-head{align-items:center}.protocol-metrics{grid-template-columns:repeat(2,1fr)}.protocol-metrics>span:last-child{grid-column:1/3}.protocol-access{margin-top:14px}.naive-overview{grid-template-columns:1fr}.naive-overview article:first-child{grid-column:auto}.naive-overview article{min-height:76px}.sidebar{display:none}.content{margin:0;padding:20px 14px calc(84px + env(safe-area-inset-bottom))}.topbar{align-items:center;margin-bottom:18px}.topbar h1{font-size:21px}.topbar p{display:none}.header-actions .primary span:last-child{display:none}.metric-grid{grid-template-columns:repeat(2,1fr);gap:8px}.metric-card{min-height:94px;padding:13px}.metric-card strong{font-size:21px}.dashboard-grid{display:block}.dashboard-grid>*+*{margin-top:8px}.toolbar{align-items:stretch;flex-wrap:wrap}.search{max-width:none;flex-basis:100%}.filter-pills{width:100%;overflow:auto}.data-panel{background:transparent;border:0;overflow:visible}.data-head{display:none}.data-row{display:grid;grid-template-columns:1fr auto!important;gap:10px;padding:13px;margin-bottom:8px;border:1px solid var(--line)!important;border-radius:9px;background:rgba(255,255,255,.022);min-height:0}.data-row>*{display:block!important}.data-row>.identity{display:flex!important}.data-row>.cell:nth-child(2){grid-column:2;grid-row:1;text-align:right}.data-row>.cell:nth-child(3){grid-column:1/3;color:var(--muted)}.row-actions{grid-column:1/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-top:4px}.action-button{white-space:nowrap;min-height:40px}.mobile-nav{display:flex;position:fixed;inset:auto 0 0;z-index:20;height:64px;padding:5px 7px calc(5px + env(safe-area-inset-bottom));justify-content:space-around;background:rgba(13,14,16,.96);border-top:1px solid var(--line);backdrop-filter:blur(14px)}.mobile-nav button{flex:1;display:grid;place-items:center;gap:1px;border-radius:7px;font-size:16px}.mobile-icon{width:18px;height:18px}.mobile-nav button small{font-size:9px}.mobile-nav button.active{background:rgba(255,255,255,.055);color:#b6b4ff}.access-layout{grid-template-columns:1fr}.qr-wrap{width:250px;max-width:100%;margin:auto}.access-dialog form{max-height:calc(100vh - 24px);overflow:auto}.access-actions{display:grid}.access-actions>*{width:100%}.toast-region{inset:auto 12px 78px 12px}.toast{max-width:none}.owner-only[hidden],.audit-nav[hidden]{display:none!important}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}.limit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.limit-form-grid label{margin:0}@media(max-width:760px){.limit-form-grid{grid-template-columns:1fr}}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--focus-ring:0 0 0 3px var(--accent)}.quota-rows{display:grid;gap:var(--space-2);margin-block:var(--space-4)}.quota-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}.quota-row label{margin:0}.quota-remove{min-inline-size:auto}.quota-add{margin-block-end:var(--space-3)}.form-hint{margin:0;color:var(--muted)}.fleet-layout{display:grid;grid-template-columns:minmax(14rem,.7fr) minmax(0,1.8fr);gap:var(--space-4);align-items:start}.fleet-node-list{display:grid;gap:var(--space-2)}.fleet-node-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);text-align:left}.fleet-node-card:hover,.fleet-node-card.selected{border-color:var(--accent);background:var(--surface-2)}.fleet-node-card:focus-visible,.fleet-command-form :is(input,select,button):focus-visible,.audit-filters :is(input,button):focus-visible{outline:2px solid var(--accent);outline-offset:var(--space-1)}.fleet-node-card .status-pill{justify-self:end}.fleet-detail{display:grid;gap:var(--space-5);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.fleet-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.fleet-detail-head h2{margin:var(--space-1) 0}.fleet-detail-head p{margin:0;color:var(--muted)}.fleet-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0}.fleet-facts>div{display:grid;gap:var(--space-1);padding-block:var(--space-2);border-bottom:1px solid var(--line)}.fleet-facts dt{color:var(--muted);font-size:11px}.fleet-facts dd{margin:0;overflow-wrap:anywhere}.fleet-capabilities{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--muted)}.fleet-capabilities>span{color:var(--text-2)}.fleet-capabilities code{padding:var(--space-1) var(--space-2);border-radius:var(--radius);background:var(--surface-2);color:var(--text-2);overflow-wrap:anywhere}.fleet-command-form{display:grid;gap:var(--space-3);padding-block-start:var(--space-5);border-top:1px solid var(--line)}.fleet-command-form label{display:grid;gap:var(--space-1);color:var(--text-2)}.fleet-limit-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.fleet-history{display:grid;gap:var(--space-3);padding-block-start:var(--space-5);border-top:1px solid var(--line)}.fleet-history ol{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.fleet-command{display:grid;gap:var(--space-2);padding:var(--space-3);border-inline-start:2px solid var(--line-strong);background:var(--surface-2)}.fleet-command[data-command-status=queued]{border-color:var(--amber)}.fleet-command[data-command-status=executing]{border-color:var(--accent)}.fleet-command[data-command-status=succeeded]{border-color:var(--green)}.fleet-command[data-command-status=indeterminate],.fleet-command[data-command-status=failed]{border-color:var(--red)}.fleet-command-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.fleet-command-head>span:last-child{margin-inline-start:auto;color:var(--muted)}.fleet-command p,.fleet-command small{margin:0;color:var(--muted)}.command-status{display:inline-flex;align-items:center;gap:var(--space-1);color:var(--text-2)}.command-status i{width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--quiet)}.command-status.queued i{background:var(--amber)}.command-status.executing i{background:var(--accent)}.command-status.succeeded i{background:var(--green)}.command-status.indeterminate i,.command-status.failed i{background:var(--red)}.command-result{display:grid;gap:var(--space-2);color:var(--text-2)}.command-result summary{cursor:pointer;color:var(--text-2)}.command-result pre{max-height:24rem;margin:0;padding:var(--space-3);overflow:auto;border:1px solid var(--line);background:var(--bg);color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}.audit-view{display:grid;gap:var(--space-4)}.audit-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.audit-filters label{display:grid;gap:var(--space-1);color:var(--text-2)}.audit-filter-actions{display:flex;gap:var(--space-2)}.audit-list{display:grid}.audit-load-more{display:flex;justify-content:center;padding:var(--space-4)}@media(max-width:1040px){.fleet-layout{grid-template-columns:1fr}.fleet-node-list{grid-template-columns:repeat(2,minmax(0,1fr))}.fleet-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.audit-filter-actions{justify-content:flex-end}}@media(max-width:760px){.quota-row,.fleet-limit-fields,.fleet-facts,.fleet-node-list,.audit-filters{grid-template-columns:1fr}.quota-remove{justify-self:end}.fleet-detail{padding:var(--space-4)}.fleet-node-card .status-pill{justify-self:start}.audit-filter-actions{justify-content:stretch}.audit-filter-actions>*{flex:1}.fleet-command-head>span:last-child{margin-inline-start:0}}

.client-tabs{overflow-x:auto;display:flex;gap:6px;margin:0 0 16px;padding-bottom:2px;scrollbar-width:thin}.client-tabs button{flex:0 0 auto;min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:11px}.client-tabs button:hover,.client-tabs button.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}.payload-field{align-items:stretch}.payload-field textarea{width:100%;min-height:82px;resize:vertical;padding:9px 11px;border:1px solid var(--line-strong);border-radius:7px 0 0 7px;outline:none;background:#0c0d10;color:var(--text);font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.payload-field textarea:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.payload-field button{min-width:88px}.unsupported-client{margin:14px 0 0;padding:9px 10px;border:1px dashed var(--line-strong);border-radius:7px;color:var(--muted);font-size:10px;line-height:1.45}@media(max-width:760px){.client-tabs{margin-bottom:12px}.client-tabs button{min-height:40px}.payload-field{display:grid}.payload-field textarea{min-height:104px;border-radius:7px 7px 0 0}.payload-field button{min-height:38px;border-left:1px solid var(--line-strong);border-top:0;border-radius:0 0 7px 7px}.access-dialog form{padding:16px}}
@media(max-width:560px){.content{padding-inline:10px}.data-row{grid-template-columns:minmax(0,1fr)!important;gap:12px}.data-row>*{min-width:0}.data-row>.identity,.data-row>.cell:nth-child(2),.data-row>.cell:nth-child(3),.data-row>.row-actions{grid-column:1!important;grid-row:auto!important;text-align:left}.identity{align-items:flex-start}.identity>span:last-child{min-width:0}.identity b,.identity small{overflow-wrap:anywhere}.row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-top:0}.action-button{width:100%;min-width:0;white-space:normal;line-height:1.25}.mobile-nav{height:calc(72px + env(safe-area-inset-bottom));justify-content:flex-start;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}.mobile-nav button{flex:0 0 64px;min-width:64px;scroll-snap-align:start}}
.host-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.host-card{display:flex;flex-direction:column}.host-card .protocol-note{margin-bottom:14px}.host-card .host-metrics{flex:1}.host-metrics>span{display:flex;flex-direction:column}.host-metrics em{margin-top:auto;padding-top:10px}.host-card .protocol-metrics b{font-size:19px}.usage-bar{display:block;height:5px;margin-top:8px;border-radius:3px;background:var(--surface-3);overflow:hidden}.usage-bar>i{display:block;height:100%;min-width:2px;border-radius:3px;background:var(--accent)}.usage-bar.warn>i{background:var(--amber)}.usage-bar.critical>i{background:var(--red)}@media(max-width:900px){.host-metrics,.host-row .host-metrics{grid-template-columns:1fr 1fr}.host-metrics>span:last-child{grid-column:1/3}}@media(max-width:560px){.host-metrics,.host-row .host-metrics{grid-template-columns:1fr}.host-metrics>span:last-child{grid-column:1}.host-card .protocol-metrics b{font-size:17px}.protocol-access,.protocol-metrics:not(.host-metrics){grid-template-columns:1fr 1fr}.protocol-metrics:not(.host-metrics)>span:last-child{grid-column:1/3}.protocol-card{min-width:0}}
.node-list{display:flex;flex-direction:column;gap:10px}
.node-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"glyph identity pill" "facts facts facts" "detail detail detail" "actions actions actions" "advanced advanced advanced";gap:10px 12px;align-items:center;padding:14px}
.node-card>.user-glyph{grid-area:glyph}
.node-card .node-identity{grid-area:identity;min-width:0}
.node-card .node-identity b{display:block;overflow-wrap:anywhere}
.node-card .node-identity small{color:var(--muted);overflow-wrap:anywhere}
.node-card>.status-pill{grid-area:pill;justify-self:end}
.node-facts{grid-area:facts;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:0}
.node-facts dt{color:var(--quiet);font-size:12px}
.node-facts dd{margin:2px 0 0;color:var(--text-2);overflow-wrap:anywhere}
.node-certificates{grid-area:detail;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.node-certificates li.expiring small{color:var(--amber)}
.node-card>.form-hint{grid-area:detail;margin:0}
.node-services{grid-area:detail;display:grid;gap:8px;margin:0}
.node-services ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.status-pill.muted{background:rgba(255,255,255,.045);border-color:var(--line);color:var(--muted)}
.status-pill.muted i{background:var(--quiet)}
.node-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:8px}
.import-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.import-table{width:100%;border-collapse:collapse;font-size:11px}
.import-table th,.import-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.import-table th{color:var(--quiet);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.import-table tr:last-child td{border-bottom:0}
.import-table select{min-height:30px;font-size:11px}
.import-table input[type=checkbox]{width:auto;min-height:auto}
.hint-flag{color:var(--amber)}
.grant-protocols{display:grid;gap:6px;margin:13px 0;padding:12px;border:1px solid var(--line);border-radius:var(--radius)}
.grant-protocols legend{padding:0 6px;color:var(--quiet);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.grant-protocol,.sheet label.grant-protocol{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-2);font-size:12px}
.grant-protocol input{width:auto;min-height:auto}
.bundle-grant{padding-block:12px;border-bottom:1px solid var(--line)}
.bundle-grant:last-child{border-bottom:0}
.bundle-grant h3{margin:0 0 8px;font-size:12px;font-weight:560}
.bundle-grant label{display:grid;gap:6px;margin:10px 0;color:var(--text-2);font-size:10px}
.advanced-drawer{grid-area:advanced;border-top:1px solid var(--line);padding-top:10px}
.advanced-drawer>button{color:var(--muted)}
.advanced-body{margin-top:10px}
.enrollment-checklist{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.enrollment-checklist code{display:block;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text-2)}
@media(max-width:560px){.node-card{grid-template-columns:auto 1fr;grid-template-areas:"glyph identity" "pill pill" "facts facts" "detail detail" "actions actions" "advanced advanced"}.node-card>.status-pill{justify-self:start}.node-actions button{flex:1 1 100%}}
.node-card.linked-node{grid-template-areas:"glyph identity pill" "tabs tabs tabs" "body body body" "actions actions actions"}
.node-card>.node-tabs{grid-area:tabs;display:flex;flex-wrap:wrap;gap:6px;margin:0;min-width:0}
.node-tabs button{flex:0 0 auto;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:11px;max-width:100%}
.node-tabs button:hover,.node-tabs button.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.node-card>.node-tab-body{grid-area:body;display:flex;flex-direction:column;gap:10px;min-width:0}
.node-error{color:#f4929a;overflow-wrap:anywhere}
.node-import-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.node-components{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.node-component{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.node-component>span{display:grid;flex:1 1 180px;min-width:0}
.node-component b{font-size:12px;font-weight:540}
.node-component small{color:var(--muted);font-size:10px}
.node-component select{flex:1 1 160px;width:auto;min-height:32px;font-size:11px}
.node-card>.node-local-link{grid-area:actions;display:flex;flex-direction:column;gap:8px;min-width:0;border-top:1px solid var(--line);padding-top:10px}
.node-local-link code{overflow-wrap:anywhere}
.node-link-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.node-link-actions .status-pill{max-width:100%;overflow-wrap:anywhere;white-space:normal}
.sheet.wide{width:min(720px,calc(100vw - 28px))}
.link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.link-tls .grant-protocol,.sheet #link-private-row{display:flex;align-items:flex-start;margin:6px 0;font-size:11px}
.link-tls .grant-protocol input,#link-private-row input{margin-top:2px}
.link-tls .link-pin{margin:8px 0 0}
.link-pin .copy-field input{border-radius:7px 0 0 7px}
.link-result{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2)}
.link-result .node-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.link-result .import-table-wrap{max-height:16rem;overflow:auto}
.keys-section{margin-top:22px}
.keys-head{align-items:flex-start;gap:12px}
.keys-head span{display:block;margin-top:3px}
.key-grid{grid-template-columns:minmax(170px,1.3fr) minmax(90px,.6fr) minmax(110px,.7fr) minmax(130px,.8fr) minmax(90px,.6fr) minmax(170px,.9fr)}
.key-grid .identity small{overflow-wrap:anywhere}
.key-reveal{display:grid;gap:6px}
.key-reveal>small{color:var(--muted);font-size:10px}
.key-reveal .copy-field input{font-size:11px}
.placement-box{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:12px 0;display:flex;flex-direction:column;gap:8px;min-width:0}.placement-box legend{padding:0 6px;color:var(--muted);font-size:11px}
#placement-body{min-width:0}
.placement-scroll{overflow-x:auto;max-width:100%;min-width:0;margin:10px 0;-webkit-overflow-scrolling:touch}
.placement{border-collapse:collapse;min-width:100%;font-size:12px}
.placement th,.placement td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top;white-space:nowrap}
.placement th[scope=row]{font-weight:560}.placement th[scope=row] small{color:var(--muted);font-weight:400;margin-left:4px}
.placement-cell label{display:inline-flex;align-items:center;gap:6px;margin:0}.placement-cell small{color:var(--muted);font-size:10px}
.placement-cell button{margin-left:4px;min-height:24px;padding:0 6px}
.placement-row-locked th,.placement-row-locked td{color:var(--muted)}
@media(max-width:560px){.node-card.linked-node{grid-template-columns:auto 1fr;grid-template-areas:"glyph identity" "pill pill" "tabs tabs" "body body" "actions actions"}.node-tabs button{flex:1 1 auto;min-height:38px}.link-grid{grid-template-columns:1fr}.node-component>span,.node-component select{flex-basis:100%}.node-component button{flex:1 1 100%}.node-import-actions button{flex:1 1 100%}}
@media(max-width:900px){.key-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.key-grid.data-head{display:none}.key-grid .row-actions{grid-column:1 / -1;justify-content:flex-start}}
.refresh-supported{color:var(--green);border-color:rgba(45,186,116,.4)!important}.refresh-unsupported{color:var(--quiet)}.refresh-unproven{color:var(--amber);border-color:rgba(231,168,75,.4)!important}
.subscription-formats{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:12px 0;display:grid;gap:8px}.subscription-formats legend{padding:0 6px;color:var(--muted);font-size:11px}input[type=radio],input[type=checkbox]{width:auto;min-height:auto;margin:0;accent-color:var(--accent)}.subscription-variant{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0;cursor:pointer}.subscription-variant input{width:16px;height:16px;margin-top:2px;justify-self:center}.subscription-variant span{display:grid;gap:2px}.subscription-variant b{font-weight:560}.subscription-variant small{color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.subscription-reveal{display:grid;gap:10px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);margin:12px 0}.subscription-reveal label{display:grid;gap:6px;color:var(--text-2);font-size:10px}.subscription-qr{width:180px;height:180px;background:#fff;border-radius:7px;padding:8px;justify-self:center}
/* Ссылки MTProxy в окне клиента: по карточке на узел — ссылка, QR и обе кнопки под ним. */
.links-box{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin:12px 0;display:flex;flex-direction:column;gap:8px;min-width:0}.links-box legend{padding:0 6px;color:var(--muted);font-size:11px}
#links-body{display:grid;gap:10px}#links-actions{display:flex;flex-wrap:wrap;gap:8px}
.link-card{display:grid;gap:8px;padding:12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);min-width:0}.link-card h4{margin:0;font-size:12px;font-weight:560;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}.link-card h4 small{color:var(--muted);font-size:10px;font-weight:400}
.link-qr{width:180px;height:180px;background:#fff;border-radius:7px;padding:8px;justify-self:center}
.link-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.subscription-warning{color:var(--amber)}#subscription-modal footer{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#subscription-actions,#placement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}#subscription-actions button,#placement-actions button{flex:0 1 auto}
/* Routing (v0.4, spec §8.4): editor beside the compiler's preview; one column on a phone. */
.routing-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}.routing-toolbar label{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:11px}.routing-toolbar select{width:auto;min-width:180px;max-width:100%}
.routing-card{display:grid;gap:14px;margin-top:12px;min-width:0}.routing-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.routing-head b{font-size:13px}.routing-card .status-pill{width:auto;max-width:100%;white-space:normal}
.routing-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;min-width:0;align-items:start}
/* align-content:start — the editor sits beside a preview that can be much taller (a long mita diff); without it the
   grid stretched the editor's auto rows to the preview's height and the selects and buttons inflated with them. */
.routing-editor{display:grid;gap:12px;min-width:0;align-content:start}.routing-defaults{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.routing-defaults label{display:grid;gap:6px;color:var(--text-2);font-size:11px}
.routing-rule.disabled{opacity:.6}.routing-rule[draggable="true"]{cursor:grab}


.routing-empty{padding:10px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:7px;font-size:11px}.routing-editor-actions,.routing-actions{display:flex;flex-wrap:wrap;gap:8px}.routing-router-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.routing-router-line small{color:var(--quiet);font-size:10px}.routing-router-line button{margin-left:auto}.routing-backend{color:var(--accent-soft)}
.routing-preview{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.018);min-width:0;align-self:start}.routing-preview-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.routing-preview-head small{color:var(--muted)}
.routing-reasons,.routing-warnings{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:11px}.routing-reason{color:var(--red)}.routing-reason small,.routing-warning small{display:block;color:var(--muted);font-size:10px}.routing-warning{color:var(--amber)}
.routing-diff,.routing-document pre{margin:0;padding:10px;border-radius:7px;background:#0c0d10;border:1px solid var(--line);font-size:10px;line-height:1.5;overflow-x:auto;white-space:pre}.routing-diff .added{color:#76dca7}.routing-diff .removed{color:var(--red)}.routing-document summary{cursor:pointer;color:var(--text-2);font-size:11px}
.routing-history td code{font-size:10px}
@media(max-width:900px){.routing-layout{grid-template-columns:1fr}}
@media(max-width:560px){.routing-editor-actions>*,.routing-actions>*{flex:1 1 45%}.routing-toolbar select{min-width:0;flex:1 1 100%}.routing-card .ghost,.routing-geodata-tools .ghost,.routing-rule-tools .ghost{min-height:32px;padding:0 10px}}
/* Phone bar (v0.9): the sideways scroller fades the edge that still hides sections (main.js sets more-left/more-right). */
@media(max-width:900px){.mobile-nav.more-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}.mobile-nav.more-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}.mobile-nav.more-left.more-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}}

/* Journal (v0.6): one line per entry — the whole line is the <summary>; details open below, full width. */
.audit-row{display:block;border-bottom:1px solid var(--line);color:var(--text-2);font-size:11px}.audit-row:last-child{border-bottom:0}.audit-main{display:grid;grid-template-columns:8.5rem minmax(6rem,.55fr) minmax(12rem,1.25fr) minmax(10rem,1fr) 6.5rem;gap:var(--space-3);align-items:center;min-height:44px;padding:0 14px;list-style:none;transition:.12s}.audit-main::-webkit-details-marker{display:none}summary.audit-main{cursor:pointer}.audit-row:hover>.audit-main,.audit-row[open]>.audit-main{background:rgba(255,255,255,.028)}.audit-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.audit-main time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.audit-main b{font-weight:560;color:var(--text);overflow-wrap:anywhere}.audit-action{color:var(--accent-soft);overflow-wrap:anywhere}.audit-target{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--text-2);overflow-wrap:anywhere}.audit-toggle{display:inline-flex;align-items:center;gap:var(--space-1);justify-self:end;color:var(--muted);font-size:10px;white-space:nowrap}.audit-toggle::before{content:"";width:0;height:0;border:4px solid transparent;border-left:5px solid currentColor;border-right:0;transition:transform .12s}.audit-toggle:empty::before{display:none}.audit-row[open] .audit-toggle{color:var(--text)}.audit-row[open] .audit-toggle::before{transform:rotate(90deg)}.audit-body{display:grid;gap:var(--space-2);padding:var(--space-2) 14px var(--space-3) calc(8.5rem + 14px + var(--space-3))}.audit-body dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);margin:0}.audit-body dt{color:var(--muted)}.audit-body dd{margin:0;color:var(--text);overflow-wrap:anywhere}.audit-body pre{max-height:24rem;margin:0;padding:var(--space-3);overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:10.5px}@media(max-width:900px){.audit-main{grid-template-columns:1fr auto;grid-template-areas:"time toggle" "actor actor" "action action" "target target";gap:var(--space-1) var(--space-2);min-height:0;padding:var(--space-2) 14px}.audit-main time{grid-area:time}.audit-main b{grid-area:actor}.audit-action{grid-area:action}.audit-target{grid-area:target}.audit-toggle{grid-area:toggle}.audit-body{padding-left:14px}}

/* Profile menu (v0.6): the chevron on the profile button opens this above the sidebar foot. */
.profile-menu{position:absolute;left:0;right:0;bottom:calc(100% + var(--space-1));display:grid;gap:2px;padding:var(--space-2);border:1px solid var(--line-strong);border-radius:9px;background:#1a1b20;box-shadow:var(--shadow);z-index:20;animation:toast-in .14s ease}.profile-menu[hidden]{display:none}.profile-menu-head{display:grid;gap:1px;padding:var(--space-2) var(--space-2) var(--space-2);margin-bottom:var(--space-1);border-bottom:1px solid var(--line)}.profile-menu-head b{font-size:11px;font-weight:540;color:var(--text)}.profile-menu-head small{font-size:10px;color:var(--quiet)}.profile-menu button{width:100%;border:0;background:transparent;color:var(--text-2);padding:8px 9px;border-radius:6px;font-size:11px;text-align:left;cursor:pointer}.profile-menu button:hover,.profile-menu button:focus-visible{background:rgba(255,255,255,.05);color:var(--text);outline:0}.profile-menu button.danger-text:hover{color:var(--red)}.profile-button[aria-expanded=true] .chevron{transform:rotate(180deg)}.profile-button .chevron{transition:transform .14s}

/* Lanes and chains (v0.7): the node's exits, the lane tabs, the «Куда пойдёт…» line. */
.routing-exits{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.routing-exits b{font-size:.85rem;color:var(--muted);margin-right:4px}
.routing-exit-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:.85rem}
.routing-exit-chip small{color:var(--muted)}
.routing-exit-chip.muted{opacity:.6}
.routing-exit-chip.blocked{border-color:var(--red);color:var(--red)}.routing-table td{vertical-align:top}.routing-table td input[type=checkbox]{width:auto;min-height:auto;margin:0}.routing-table th{white-space:nowrap}.routing-table .routing-rule.disabled td{opacity:.55}.routing-rule-order{color:var(--quiet);width:28px}.routing-rule-what{max-width:420px}.routing-chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:11px}.routing-chip.muted{color:var(--quiet)}.routing-rule-where{white-space:nowrap}.routing-preset-mark{display:block;color:var(--accent);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.routing-rule-tools{white-space:nowrap;text-align:right}.routing-rule-tools .ghost{min-height:26px;padding:0 6px}.routing-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.routing-presets b{font-size:.85rem;color:var(--muted);margin-right:4px}.routing-preset{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:11px;cursor:pointer}.routing-preset.on{border-color:var(--accent);color:var(--text)}.routing-preset input{width:auto;min-height:auto;margin:0}.routing-custom-exits{margin:10px 0;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px}.routing-custom-exits summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}.routing-custom-exits summary b{font-size:.85rem;color:var(--muted)}.routing-custom-exits .import-table-wrap{margin-top:10px}.routing-exits-table tr.disabled td{opacity:.55}.rule-what{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 12px}.rule-what label{margin:0}.rule-protocols{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.rule-protocols small{color:var(--quiet);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.exit-tabs{margin:10px 0}#exit-link{width:100%;min-height:72px;font-family:ui-monospace,Menlo,monospace;font-size:11px}.routing-geodata{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}.routing-geodata b{font-size:.85rem;color:var(--muted);margin-right:4px}.routing-geodata small{color:var(--muted);font-size:11px}.routing-geodata-error{color:var(--red)}.routing-geodata-tools{display:inline-flex;gap:6px;margin-left:auto}.routing-geodata datalist{display:none}#geodata-custom{display:grid}
.routing-relay-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 10px}
.routing-lanes{margin:10px 0 4px}
.routing-lanes .ghost{margin-left:auto}
.routing-lane-badge{font-weight:500;color:var(--accent)}
.routing-lane-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px}
.routing-rule-exit{display:inline-flex;align-items:center;gap:6px;font-size:.85rem}
.routing-exit{max-width:260px}
.routing-explain{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.routing-explain label{display:flex;flex-direction:column;gap:4px;font-size:.85rem}
.routing-explain input[name=host]{min-width:240px}
.routing-explain input[name=port]{width:90px}
.routing-explain-answer{flex-basis:100%;margin:4px 0 0;font-size:.95rem}
.choose-field{display:block;margin:8px 0 4px}
.choose-field select{width:100%}
@media(max-width:560px){
  .routing-presets{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .routing-presets b{margin:0 0 2px}
  .routing-preset{display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;width:100%;padding:8px 12px;line-height:1.35;font-size:12px}
  .routing-preset input{flex:0 0 16px;width:16px;height:16px}
}
@media(max-width:900px){.routing-explain input[name=host]{min-width:0;width:100%}.routing-lanes .ghost{margin-left:0}.routing-table thead,.routing-exits-table thead{display:none}.routing-table,.routing-table tbody,.routing-table tr,.routing-table td,.routing-exits-table,.routing-exits-table tbody,.routing-exits-table tr,.routing-exits-table td{display:block;width:100%}.routing-table tr,.routing-exits-table tr{padding:8px 10px;border:1px solid var(--line);border-radius:7px;margin-bottom:8px;box-sizing:border-box}.routing-table td,.routing-exits-table td{padding:3px 0;border-bottom:0}.routing-rule-order{width:auto;color:var(--quiet);font-size:10px}.routing-rule-where{white-space:normal}.routing-rule-tools{white-space:normal;text-align:left;display:flex;flex-wrap:wrap;gap:4px}.routing-rule-tools .ghost{flex:0 0 auto}.routing-rule-what{max-width:none}.routing-geodata-tools{margin-left:0}}
/* Accent themes: every accent tint derives from --accent, so one attribute on <html>
   recolours the panel. Status colours (green, amber, red) never change with it. */
:root[data-accent=blue]{--accent:#3d7ff5;--accent-hover:#5f97ff}
:root[data-accent=cyan]{--accent:#1497b3;--accent-hover:#22b3cf}
:root[data-accent=emerald]{--accent:#16966f;--accent-hover:#20b286}
:root[data-accent=orange]{--accent:#d9652b;--accent-hover:#ee7c40}
:root[data-accent=rose]{--accent:#d2476f;--accent-hover:#e5628a}
:root[data-accent=violet]{--accent:#8d55dd;--accent-hover:#a370ee}
.accent-picker{position:relative}
.accent-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:10px;width:228px;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:#1a1b20;box-shadow:var(--shadow);animation:toast-in .14s ease}
.accent-menu[hidden]{display:none}
.accent-menu>b{font-size:11px;font-weight:540;color:var(--text-2)}
.accent-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.accent-swatch{display:grid;justify-items:center;gap:4px;padding:6px 2px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:9px;cursor:pointer}
.accent-swatch i{width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.accent-swatch:hover{background:rgba(255,255,255,.05);color:var(--text)}
.accent-swatch[aria-checked=true]{border-color:var(--swatch);color:var(--text)}
.accent-swatch[data-accent=indigo]{--swatch:#6e6bea}.accent-swatch[data-accent=blue]{--swatch:#3d7ff5}.accent-swatch[data-accent=cyan]{--swatch:#1497b3}.accent-swatch[data-accent=emerald]{--swatch:#16966f}
.accent-swatch[data-accent=violet]{--swatch:#8d55dd}.accent-swatch[data-accent=rose]{--swatch:#d2476f}.accent-swatch[data-accent=orange]{--swatch:#d9652b}
/* The overview's placeholder is the overview's own grid — the resources card across the
   top and the three protocol cards under it — so nothing jumps from 3 or 4 tiles to 1 + 3. */
.skeleton-overview>i{display:block;min-height:258px;border-radius:var(--radius);background:linear-gradient(90deg,#111216,#191a1e,#111216);background-size:200%;animation:pulse 1.2s infinite}
.skeleton-overview>i.host-row{min-height:208px}
@media(max-width:1040px){.skeleton-overview>i:last-child{grid-column:1/-1}}
@media(max-width:900px){.skeleton-overview>i:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.skeleton-overview>i{animation:none}}
/* Every resource's detail sits right under its bar; swap, where there is one, takes the
   bottom of the RAM cell, so the three cells line up row for row. */
.host-metrics>span>em{margin-top:0;padding-top:8px}
.host-swap{display:block;margin-top:auto;padding-top:9px;border-top:1px dashed var(--line-strong)}
.host-metrics .host-swap em{padding-top:4px}
.host-swap>small{display:inline!important;margin-right:6px}
.host-swap>b{display:inline!important;font-size:13px!important}
.host-swap .usage-bar{height:4px;margin-top:6px}
/* Routing (v0.17): an intro with the guide button, four numbered steps, the node's plumbing
   folded under them, the preview's technical half folded under its verdict. */
.routing-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.routing-intro p{margin:0;color:var(--text-2);font-size:12px;line-height:1.5}
.routing-intro button{flex:0 0 auto}
.routing-can{margin:2px 0 0;color:var(--text-2);font-size:12px;line-height:1.5}
.routing-step{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.routing-step-head{display:flex;align-items:flex-start;gap:12px}
.routing-step-head h3{margin:0 0 2px;font-size:14px;font-weight:600}
.routing-step-head .form-hint{font-size:11px;line-height:1.45}
.routing-step-number{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-soft);font-size:12px;font-weight:650}
.routing-node-setup{display:grid;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.015)}
.routing-node-setup>summary{cursor:pointer;color:var(--text-2);font-size:12px;font-weight:560}
.routing-node-setup:not([open])>summary{margin:0}
.routing-node-setup[open]>summary{margin-bottom:6px}
.routing-summary{margin:4px 0 0;color:var(--text);font-size:12px;line-height:1.5}
.routing-verdict{margin:4px 0 0;color:var(--text-2);font-size:11px;line-height:1.5}
.routing-tech{margin-top:8px}
.routing-tech>summary{cursor:pointer;color:var(--muted);font-size:11px}
.routing-guide-dialog{width:min(860px,calc(100vw - 28px))}
.routing-guide{display:grid;gap:18px;max-height:min(70vh,760px);overflow:auto;padding-right:4px}
.routing-guide h3{margin:0 0 8px;font-size:14px;font-weight:600}
.routing-guide p,.routing-guide li,.routing-guide dd{color:var(--text-2);font-size:12px;line-height:1.55}
.routing-guide p{margin:0 0 8px}
.routing-guide ol,.routing-guide ul{margin:0;padding-left:20px;display:grid;gap:4px}
.routing-guide code{padding:1px 5px;border-radius:4px;background:var(--surface-3);font-size:11px}
.routing-guide-terms{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px;margin:0}
.routing-guide-terms dt{font-size:12px;font-weight:600;color:var(--text)}
.routing-guide-terms dd{margin:0}
.routing-guide-scenario{display:grid;gap:6px;padding:12px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.018)}
.routing-guide-scenario header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.routing-guide-scenario header b{font-size:13px}
.routing-guide-scenario p{margin:0}
.routing-guide-na{color:var(--quiet);font-size:10px;text-align:right;max-width:260px}
@media(max-width:560px){
  .routing-intro{flex-direction:column;align-items:stretch}
  .routing-intro button{width:100%;min-height:40px}
  .routing-guide-terms{grid-template-columns:1fr;gap:2px}
  .routing-guide-terms dd{margin-bottom:8px}
  .routing-guide-scenario header{flex-direction:column;align-items:stretch}
  .routing-guide-scenario header button{width:100%;min-height:40px}
  .routing-guide-na{text-align:left;max-width:none}
}
/* Interface language (v0.17): the switch names the language it switches to. */
.lang-switch{font-size:11px;font-weight:650;letter-spacing:.04em}
.login-lang{position:absolute;top:14px;right:14px}
/* Clients and nodes use pictograms rather than name fragments in square tiles. */
.client-card>.user-glyph,.node-card>.user-glyph{border-radius:50%}
.client-card>.user-glyph .ui-icon,.node-card>.user-glyph .ui-icon{width:18px;height:18px}
/* «Клиенты» (v1.0.2). One block for the list, its grant rows, the client window's grant list
   and the grant window. Every text cell has min-width:0 and wraps inside its own box: a long
   name or status grows the row in height, it never runs out of its frame. */
.status-pill,.filter-pill{max-width:100%;white-space:normal;overflow-wrap:break-word;text-align:left}
.client-toolbar{display:grid;gap:10px;margin-bottom:14px;min-width:0}
.client-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.client-toolbar-row .search{flex:1 1 280px;max-width:560px;min-width:0}
.client-toolbar-row>[data-client-action=import]{margin-left:auto}
.client-state-filter{flex-wrap:wrap;width:auto;overflow:visible}
.client-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.client-filters select{flex:0 1 210px;width:auto;min-width:0;min-height:32px;font-size:11px}
.client-count{margin-left:auto;color:var(--muted);font-size:11px}
.client-list{display:grid;gap:10px;min-width:0}
.client-list>.empty-state{border:1px dashed var(--line);border-radius:var(--radius)}
.client-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px 14px;align-items:center;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.018)}
.client-card:hover{border-color:var(--line-strong)}
.client-card[data-client-state=archived]{background:transparent}
.client-card[data-client-state=archived] .client-identity b{color:var(--text-2)}
.client-card>.user-glyph{grid-row:1;grid-column:1;align-self:start}
.client-identity{display:grid;gap:2px;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.client-identity b{font-size:14px;font-weight:560;overflow-wrap:anywhere}
.client-identity small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.client-identity:hover b{color:var(--accent-soft)}
.client-card>.client-identity{grid-row:1;grid-column:2}
.client-card>.status-pill{grid-row:1;grid-column:3;justify-self:end}
.client-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.client-card>.client-actions{grid-row:1;grid-column:4;justify-content:flex-end}
.client-card>.client-grants,.client-card>.client-empty{grid-column:1/-1;order:1}
.client-card>.client-note{grid-column:1/-1;order:2}
.client-card.client-card-error{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.client-empty{margin:0;color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.client-note{display:grid;gap:8px;min-width:0;padding:10px 12px;border:1px solid rgba(231,168,75,.2);border-radius:8px;background:rgba(231,168,75,.05)}
.client-note .form-hint{font-size:11px;overflow-wrap:anywhere}
.client-note-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.client-note-actions button{max-width:100%;height:auto;min-height:32px;padding:6px 12px;white-space:normal;overflow-wrap:anywhere;text-align:left}
/* A grant is one row and the row is one button: protocol · account and node · state · route ·
   (in the client window) the apps that refresh it · a chevron that says it opens. */
.client-grants{list-style:none;display:grid;gap:6px;min-width:0;margin:0;padding:0;container-type:inline-size;container-name:grants}
.grant-item{min-width:0}
.grant-row{display:grid;grid-template-columns:minmax(0,104px) minmax(0,320px) minmax(0,1fr) minmax(0,150px) 12px;align-items:center;column-gap:14px;row-gap:4px;width:100%;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text-2);font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.grant-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))}
.grant-row:has(.auto-refresh){grid-template-columns:minmax(0,104px) minmax(0,280px) minmax(0,1fr) minmax(0,130px) minmax(0,auto) 12px}
.grant-row>*{min-width:0;overflow-wrap:anywhere}
.grant-proto{color:var(--text);font-weight:600}
.grant-account{display:grid;gap:1px}
.grant-account>span{color:var(--text)}
.grant-node{color:var(--muted);font-size:10px}
.grant-state{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.grant-state small{font-size:11px}
.grant-flag{padding:1px 6px;border:1px solid rgba(231,168,75,.35);border-radius:5px;color:var(--amber);font-size:10px;font-style:normal}
.grant-route-label{color:var(--muted);font-size:11px}
.grant-chevron{color:var(--quiet);font-size:16px;line-height:1;text-align:right}
.grant-row:hover .grant-chevron{color:var(--accent-soft)}
/* A grant's state reads at a glance: a dot in the state's colour before the word. */
.grant-state small::before,.grant-state-word::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--quiet);vertical-align:1px}
[data-grant-state=enabled]>.grant-state small::before,.grant-state-word[data-grant-state=enabled]::before{background:var(--green)}
[data-grant-state=disabled]>.grant-state small::before,[data-grant-state=failed]>.grant-state small::before,.grant-state-word[data-grant-state=disabled]::before,.grant-state-word[data-grant-state=failed]::before{background:var(--red)}
[data-grant-state=pending]>.grant-state small::before,.grant-state-word[data-grant-state=pending]::before{background:var(--amber)}
.auto-refresh{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.auto-refresh small{padding:1px 6px;border:1px solid var(--line);border-radius:5px;font-size:10px;line-height:1.5;white-space:nowrap}
.subscription-grants{margin:10px 0}
/* The row follows the width of its own list — a wide card, the client window, a phone —
   not the width of the screen: the same row sits in all three. */
@container grants (max-width:900px){
  .grant-row,.grant-row:has(.auto-refresh){grid-template-columns:minmax(0,96px) minmax(0,1fr) minmax(0,auto) 12px;grid-template-areas:"proto account state chevron" "proto route route chevron" "proto extra extra chevron"}
  .grant-proto{grid-area:proto;align-self:start}
  .grant-account{grid-area:account}
  .grant-state{grid-area:state;justify-content:flex-end;text-align:right}
  .grant-route-label{grid-area:route}
  .grant-row>.auto-refresh{grid-area:extra}
  .grant-chevron{grid-area:chevron}
  .grant-route-label:empty{display:none}
}
@container grants (max-width:460px){
  .grant-row,.grant-row:has(.auto-refresh){grid-template-columns:minmax(0,1fr) minmax(0,auto) 12px;grid-template-areas:"proto state chevron" "account account chevron" "route route chevron" "extra extra chevron";padding:10px 12px}
  .grant-proto{align-self:center}
}
/* The client window: one type scale for its hints, labels and warnings (they fell back to
   the 14px body size and read louder than the headings). */
.access-dialog .form-hint,.access-dialog .subscription-warning{font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.access-dialog .form-hint:empty,#links-actions:empty,#links-body:empty{display:none}
.placement-box>label{display:grid;gap:6px;margin:0;color:var(--text-2);font-size:11px}
.placement-box>label small{color:var(--quiet);font-size:10px}
.placement-box>.client-grants{margin:2px 0}
.links-box>.modal-copy{margin:0}
/* The grant window. */
.grant-dialog{width:min(700px,calc(100vw - 28px))}
.grant-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:0 0 14px;padding:0;min-width:0}
.grant-fact.wide{grid-column:1/-1}
.grant-fact{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.02)}
.grant-fact dt{margin-bottom:3px;color:var(--quiet);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.grant-fact dd{display:grid;gap:4px;margin:0;color:var(--text);font-size:12px;overflow-wrap:anywhere}
.grant-fact code{font-size:11px;word-break:break-all}
.grant-fact .form-hint{font-size:10px}
.grant-link{display:grid;gap:10px;min-width:0;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius)}
.grant-link legend{padding:0 6px;color:var(--muted);font-size:11px}
.grant-link .form-hint{font-size:11px}
.grant-link-actions,.grant-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.grant-link-actions:empty,.grant-link-body:empty{display:none}
.grant-link-body{display:grid;gap:10px;min-width:0}
.grant-link-field{display:grid;gap:6px;min-width:0;color:var(--text-2);font-size:10px}
.grant-link-field .copy-field{min-width:0}
.grant-link-field .copy-field input{min-width:0}
.grant-link-body .link-qr{justify-self:center}
.grant-actions{padding-top:2px}
.grant-actions button,.grant-link-actions button,.link-card-actions .button{max-width:100%;height:auto;min-height:34px;white-space:normal;text-align:center}
@media(max-width:1180px){
  .client-card{grid-template-columns:auto minmax(0,1fr) auto}
  .client-card>.client-actions{grid-row:auto;grid-column:1/-1;order:3;justify-content:flex-start}
}
@media(max-width:640px){
  .client-toolbar-row>[data-client-action=import]{margin-left:0;flex:1 1 100%}
  .client-filters select{flex:1 1 calc(50% - 4px)}
  .client-count{flex:1 1 100%;margin-left:0}
  .client-card{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px}
  .client-card>.user-glyph{grid-row:1/span 2}
  .client-card>.status-pill{grid-row:2;grid-column:2;justify-self:start;align-self:start}
  .client-card>.client-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-card>.client-actions button{width:100%;min-height:40px;height:auto;white-space:normal}
  .client-card>.client-actions:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  .grant-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grant-actions button,.grant-link-actions button,.link-card-actions .button{flex:1 1 calc(50% - 4px)}
}
@media(max-width:380px){
  .grant-facts{grid-template-columns:minmax(0,1fr)}
}
/* Between the phone and the wide desktop (v1.0.2): a protocol card of the overview is too narrow
   for three metric tiles, and the Mieru/NaiveProxy rows for a fourth column of buttons. The
   tiles go two by two, the buttons to a row of their own under the row they act on. */
@media(min-width:1041px) and (max-width:1400px){
  .protocol-metrics:not(.host-metrics){grid-template-columns:1fr 1fr}
  .protocol-metrics:not(.host-metrics)>span:last-child{grid-column:1/-1}
}
@media(min-width:901px) and (max-width:1320px){
  .naive-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr)}
  .naive-grid>*:nth-child(1){grid-column:1;grid-row:1}
  .naive-grid>*:nth-child(2){grid-column:2;grid-row:1}
  .naive-grid>*:nth-child(3){grid-column:3;grid-row:1;padding-top:0}
  .naive-grid>*:nth-child(4){grid-column:1/-1;grid-row:2;justify-content:flex-start;text-align:left}
  .data-head.naive-grid>*:nth-child(4){display:none}
  .data-row.naive-grid{row-gap:8px}
}
/* The journal's row had fixed minimums (~770px) wider than the content beside the sidebar at
   ~960px: the columns may shrink, their text wraps inside them. */
@media(min-width:901px){
  .audit-main{grid-template-columns:7.5rem minmax(0,.55fr) minmax(0,1.25fr) minmax(0,1fr) auto}
}
/* Mieru/NaiveProxy rows between the phone and the tablet: one column, as on the phone —
   the generic two-column row put the buttons over the name. */
@media(max-width:900px){
  .data-row.naive-grid{grid-template-columns:minmax(0,1fr)!important}
  .data-row.naive-grid>*{grid-column:1!important;grid-row:auto!important;text-align:left!important;justify-self:start}
  .data-row.naive-grid>.row-actions{justify-content:flex-start}
}
/* The narrowest phones: the four header buttons go under a long section title instead of
   pushing the page sideways. */
@media(max-width:420px){
  .topbar{flex-wrap:wrap;row-gap:10px}
  .topbar h1{overflow-wrap:break-word}
  .header-actions{flex-wrap:wrap}
}