:root{color-scheme:dark;--bg:#071019;--panel:#0d1823;--panel2:#111f2c;--line:#233545;--text:#edf7ff;--muted:#91a6b8;--blue:#36a3ff;--green:#35d49a;--amber:#ffbd59;--red:#ff6678}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 75% 0,#10283c 0,transparent 36%),var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}header{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#08121bf2;position:sticky;top:0;z-index:20}.brand,.header-actions{display:flex;gap:12px;align-items:center}.brand strong,.brand small{display:block}.brand small,.user-label,#headerStatus{color:var(--muted);font-size:12px}.shield{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#08121b;background:linear-gradient(135deg,var(--blue),var(--green));font-size:18px}.brand-logo{width:34px;height:34px;flex:none}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px currentColor}.status-dot.online{background:var(--green)}.app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 70px)}.sidebar{border-right:1px solid var(--line);background:#09131ddd;padding:24px 14px;display:flex;flex-direction:column;justify-content:space-between}.sidebar nav{display:grid;gap:6px}.nav-item{display:flex;gap:12px;align-items:center;border:0;border-radius:10px;padding:12px 14px;background:transparent;color:var(--muted);text-align:left}.nav-item span{font-size:18px;width:22px;text-align:center}.nav-item:hover,.nav-item.active{background:#142433;color:var(--text)}.nav-item.active{box-shadow:inset 3px 0 var(--blue)}.sidebar-foot{display:grid;color:var(--muted);font-size:11px;padding:12px}.sidebar-foot strong{color:var(--text)}.workspace{padding:38px clamp(22px,4vw,54px);min-width:0}.page{display:none;max-width:none;margin:auto}.page.active{display:block}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.page-head h1{font-size:34px;line-height:1.1;margin:7px 0}.page-head p,.panel-title p{color:var(--muted);margin:0}.eyebrow{color:var(--blue);font-weight:800;font-size:11px;letter-spacing:.14em}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric,.panel,.network-card,.table-wrap{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:15px}.metric{padding:18px}.metric span,.metric small{display:block;color:var(--muted)}.metric strong{display:block;font-size:26px;margin:8px 0}.dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.panel{padding:20px;min-width:0}.panel.wide{grid-column:1/-1}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.panel-title h2{margin:0;font-size:17px}.text-button{border:0;background:transparent;color:var(--blue);padding:4px}.interface-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.interface-row,.compact-row,.protection-row{padding:13px;border-radius:10px;background:#09141e;border:1px solid #1b3040}.interface-row{display:flex;justify-content:space-between;gap:12px}.interface-row span,.compact-row small{display:block;color:var(--muted);font-size:12px}.compact-list,.protection-list{display:grid;gap:8px}.compact-row,.protection-row{display:flex;justify-content:space-between;align-items:center}.state{display:inline-flex;align-items:center;gap:6px;font-size:12px}.state:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}.state.up:before,.state.reachable:before,.state.success:before{background:var(--green)}.state.down:before,.state.failed:before{background:var(--red)}.state.stale:before,.state.delay:before{background:var(--amber)}.network-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.network-card{padding:20px}.network-card h2{margin:0 0 4px}.network-card .mac{color:var(--muted);font-family:ui-monospace,monospace}.address{display:inline-block;background:#071019;border:1px solid var(--line);padding:5px 8px;border-radius:7px;margin:10px 5px 0 0;font-family:ui-monospace,monospace;font-size:12px}.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px}.toolbar input{max-width:520px}.badge,.tag{border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--muted);font-size:12px;white-space:nowrap}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:560px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}td code{color:#bde4ff}tr:last-child td{border-bottom:0}.license-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 17px;margin-bottom:20px;border:1px solid #5a472d;border-radius:12px;background:#2b2213aa}.license-banner strong,.license-banner span{display:block}.license-banner strong{color:var(--amber);font-size:12px}.license-banner span{color:#d7c5a7}.hidden{display:none!important}button:not(.nav-item):not(.mode-card):not(.text-button):not(.category-card):not(.module-more):not(.nav-close):not(.duration-choice):not(.mode-card){border:0;border-radius:10px;background:var(--blue);color:#06111a;padding:10px 17px;font-weight:800}.secondary,.header-button{background:#152534!important;color:var(--text)!important}.header-button{padding:6px 10px!important;font-size:12px!important}button:disabled{opacity:.4;cursor:not-allowed}input,select{width:100%;border:1px solid var(--line);border-radius:10px;background:#09141e;color:var(--text);padding:11px}.auth-overlay{position:fixed;inset:0;z-index:100;background:#050b12ed;display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}.auth-card{width:min(440px,100%);display:grid;gap:15px;padding:30px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 30px 100px #0008}.auth-card h1{font-size:28px;margin:3px 0}.auth-card p,.auth-card small,label{color:var(--muted)}label{display:grid;gap:7px}.message{padding:11px 13px;border-left:3px solid var(--blue);background:#11202c;margin:8px 0}.message.error{border-color:var(--red)}.message.warning{border-color:var(--amber)}.message.info{border-color:var(--green)}.wizard-steps{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:steps}.wizard-steps li{counter-increment:steps;padding:10px;border-bottom:2px solid var(--line);color:var(--muted)}.wizard-steps li:before{content:counter(steps);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:#132331}.wizard-steps li.active{color:var(--text);border-color:var(--blue)}.wizard-steps li.done{color:var(--green)}.screen{display:none}.screen.active{display:block}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mode-card{text-align:left;color:var(--text);background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:15px;padding:20px;min-height:180px}.mode-card:hover,.mode-card.selected{border-color:var(--blue);transform:translateY(-1px)}.mode-card h3{margin:16px 0 10px}.mode-card p,.architecture-box p{color:var(--muted)}.tag.recommended{color:var(--green);border-color:#2a6452}.mini-diagram,.flow{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.mini-diagram b,.node{font-size:11px;background:#162939;border:1px solid #2a4052;padding:7px;border-radius:7px}.mini-diagram i,.arrow{color:var(--blue);font-style:normal}.architecture-box,.confirmations,#validationSummary,#planSummary{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);margin-bottom:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.check{display:flex;align-items:center;grid-column:1/-1}.check input,.confirmations input{width:auto}.confirmations{display:grid;gap:14px}.confirmations label{display:flex}.vlan-box{margin-top:22px}.actions{display:flex;justify-content:space-between;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.transaction-panel{margin-top:18px;padding:18px;border:1px solid #5a472d;border-radius:12px;background:#161b20}.transaction-panel code{color:var(--green)}.danger-button{background:var(--red)!important;color:#fff!important}.skeleton{color:var(--muted)}@media(max-width:950px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}@media(max-width:650px){html,body{overflow-x:hidden}.workspace{padding:18px 10px}.page{max-width:100%}.panel{padding:14px}.metric{padding:14px}.metric strong{font-size:20px}.interface-list{grid-template-columns:1fr}.metric-grid,.content-grid,.dashboard-grid{gap:10px}header{height:62px;padding:0 12px;gap:8px}.brand{gap:8px}.brand strong{font-size:14px;white-space:nowrap}.brand small,#headerStatus,#currentUser{display:none}.header-actions{gap:8px}#deploymentLink{display:none}.sidebar{top:62px}body.nav-open:after{inset:62px 0 0 0}.workspace{padding:22px 14px}.page-head{flex-wrap:wrap;gap:12px}.page-head h1{font-size:26px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-grid,.form-grid{grid-template-columns:1fr}.wizard-steps li{font-size:0}.panel-title{flex-wrap:wrap;gap:8px}.license-banner{flex-direction:column;align-items:flex-start;gap:8px}.toolbar{flex-wrap:wrap}}
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.module-card{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#09141e;cursor:pointer}.module-card.enabled{border-color:#a68e17;box-shadow:inset 3px 0 #a68e17}.module-card strong,.module-card small,.module-card em{display:block}.module-card small{margin-top:5px;color:var(--muted);line-height:1.4}.module-card em{margin-top:8px;font-size:.75rem;color:#a68e17}
.module-warn{color:var(--amber);font-weight:600}.module-card input{width:20px;height:20px}.rules-preview{max-height:560px;overflow:auto;background:#070b10;color:#dce7f2;border:1px solid #263241;border-radius:10px;padding:18px;white-space:pre;font-size:.78rem;line-height:1.55}
.screen-note{color:var(--muted);max-width:760px;margin:0 0 14px}
.nav-section{display:block;padding:16px 14px 5px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#5f7385}
.role-form{display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.role-form label{display:grid;gap:6px;font-size:12px;color:var(--muted);margin:0}
.role-form small{color:var(--muted)}
.sidebar nav .nav-section:first-child{padding-top:2px}
/* Responsive navigation drawer — replaces the icon rail below 900px. */
.nav-toggle{display:none;border:1px solid var(--line);background:#152534;color:var(--text);width:42px;height:42px;border-radius:11px;font-size:19px;line-height:1;padding:0}
.nav-close{display:none;border:0;background:transparent;color:var(--muted)}
@media(max-width:950px){
.nav-toggle{display:inline-flex;align-items:center;justify-content:center}
.app-shell{grid-template-columns:minmax(0,1fr)}
/* Full-screen drawer: the sidebar covers the whole width when open. */
.sidebar{position:fixed;top:70px;bottom:0;left:0;width:100%;border:0;background:#0a141d;transform:translateX(-105%);transition:transform .25s ease;z-index:40;overflow-y:auto}
.nav-close{display:flex}
body.nav-open .sidebar{padding-top:8px}
.sidebar nav{display:grid;gap:6px}
.nav-item{font-size:14px;justify-content:flex-start}
.nav-item span{font-size:18px;width:22px}
.sidebar-foot{display:grid}
body.nav-open .sidebar{transform:none}
body.nav-open:after{content:"";position:fixed;inset:70px 0 0 0;background:#040a10d0;z-index:35}
.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-grid{grid-template-columns:1fr}
}

/* Mobile fit hardening — nothing may exceed the phone viewport, no sideways pan.
   overflow-x:clip strictly prevents panning where hidden fails on iOS. */
@media(max-width:900px){
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
header{gap:8px;min-width:0}
.brand{min-width:0}
.brand strong{white-space:normal;line-height:1.15;font-size:13px}
.page-head{flex-direction:column;align-items:stretch;gap:12px}
.page-head h1{font-size:24px}
.page-head>div:last-child{display:flex;gap:8px;flex-wrap:wrap}
.panel-title{flex-wrap:wrap;gap:6px}
.interface-row,.compact-row,.protection-row{flex-wrap:wrap;row-gap:6px}
.toolbar{flex-wrap:wrap}
.table-wrap{overflow-x:auto;max-width:100%}
table{white-space:nowrap}
pre{max-width:100%}
button,input,select,textarea{max-width:100%}
.sidebar{overflow-x:hidden}
.inline-form{grid-template-columns:1fr!important}
.module-side{justify-content:flex-start}
}

/* Build 4 — category group cards and drill-down */
.category-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.category-card{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#09141e;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.category-card:hover{border-color:#36a3ff66}
.category-card.is-blocking{border-color:#a68e17;box-shadow:inset 3px 0 #a68e17}
.category-card.is-partial{border-color:var(--amber);box-shadow:inset 3px 0 var(--amber)}
.category-card.is-off{opacity:.85}
.card-open{align-self:flex-start;font-size:11px;color:var(--blue);font-style:normal;text-decoration:underline;margin-top:auto}
.state.partial{color:var(--amber)}
.state.offline{color:var(--muted)}
.module-card.partial{border-color:var(--amber);box-shadow:inset 3px 0 var(--amber)}
.category-card small{color:var(--muted)}
.category-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.category-card-head strong{font-size:15px}
.category-card-foot{display:flex;justify-content:space-between;gap:8px;margin-top:auto;font-size:12px;color:var(--muted)}
.drill{margin-top:16px}
.drill h3{margin:16px 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#5f7385}

/* Interface state dots: the row makes spans block-level, which collapses
   the inline-flex dot — restore it so up/down/stale dots are visible. */
.interface-row .state{display:inline-flex}
/* Reviewed access requests stay visible but step back visually. */
.compact-row.reviewed{opacity:.55}
/* Panels only take their natural height — a small panel never stretches
   to match a tall neighbour in the same grid row. */
.content-grid>.panel{align-self:start}
/* Nothing marked hidden may ever be forced visible by other display rules */
[hidden]{display:none!important}
/* Build 5 — user groups: permission editor and chips, account row actions */
.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px;margin:8px 0 14px}
.permission-grid-label{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.permission-choice{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#09141e;font-size:12.5px;color:var(--text)}
.permission-choice input{width:auto;margin-top:3px}
.permission-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{font-size:11px;border:1px solid #233545;border-radius:999px;padding:2px 9px;color:var(--muted)}
.user-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.user-row-actions select{min-width:150px}

/* Approve-duration modal (access requests). */
.modal-overlay{position:fixed;inset:0;background:#040a10e6;display:grid;place-items:center;z-index:60;padding:20px}
.modal-overlay.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:440px;width:100%}
.modal-card h3{margin:0 0 4px}
.modal-host{color:var(--muted);font-size:13px;margin:0 0 14px}
.duration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
.duration-choice{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#09141e;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.duration-choice.selected{border-color:var(--blue);box-shadow:inset 3px 0 var(--blue)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
@media(max-width:520px){.duration-grid{grid-template-columns:1fr}}

/* Roles explained */
.role-explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.role-explain>div{padding:16px;border:1px solid var(--line);border-radius:12px;background:#09141e}
.role-explain strong{display:block;margin-bottom:6px}
.role-explain small{display:block;color:var(--muted);margin-top:8px;line-height:1.5}

/* IP pools form layout */
.pool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}

/* Build 3 — Firewall three-step flow and module detail views */
.module-card{flex-direction:column;gap:10px}
.module-card>div:first-child{flex:1}
.module-side{display:flex;justify-content:flex-end;align-items:center;min-height:22px;width:100%}
.module-flag{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid #a68e1755;border-radius:999px;padding:2px 10px}
.module-more{align-self:flex-start;background:none;border:none;color:var(--blue);font-size:12px;padding:0;text-decoration:underline;text-align:left}
.module-detail{display:grid;gap:6px;border-top:1px dashed var(--line);padding-top:8px;width:100%}
.module-detail small{color:var(--muted)}
.module-detail em{margin-top:0;font-size:11.5px}
.module-ids{margin-top:2px}
.module-ids button{align-self:start}
.step-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.step-list li{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#09141e;align-items:start}
.step-list strong{color:var(--green);font-size:13px}
.step-list span{color:var(--muted)}
@media(max-width:650px){.step-list li{grid-template-columns:1fr;gap:4px}}
/* 3.5: modules that cannot work in the current deployment mode */
.module-card.unavailable{opacity:.45;cursor:default}.module-card.unavailable .module-flag{color:var(--muted)}
/* 3.5: device pool assignment tag on the Devices page */
.pool-tag{color:var(--blue)}
[data-assign-select]{max-width:230px}

/* ===== Portal banner weather badge (ported from the portal) ===== */
.weather-badge{width:40px;height:40px;display:block}
.weather-badge svg{width:100%;height:100%}
.weather-badge .wx-rays{fill:var(--theme-basic-accent-bright,#ebc100);transform-box:fill-box;transform-origin:center;animation:wx-spin 18s linear infinite}
.weather-badge .wx-glow{fill:var(--theme-basic-accent-bright,#ebc100);opacity:.55}
.weather-badge .wx-core{fill:#ffdf6e}
.weather-badge .wx-moon-glow{fill:#f5e9c8;opacity:.3;animation:wx-pulse 4.4s ease-in-out infinite}
.weather-badge .wx-moon,.weather-badge .wx-mini-moon{fill:#f5e9c8}
.weather-badge .wx-star{fill:var(--theme-basic-accent-bright,#ebc100);transform-box:fill-box;transform-origin:center;animation:wx-twinkle 2.8s ease-in-out infinite}
.weather-badge .wx-star:nth-of-type(2){animation-delay:.9s}
.weather-badge .wx-star:nth-of-type(3){animation-delay:1.7s}
.weather-badge .wx-cloud{fill:rgba(255,255,255,.88)}
.weather-badge .wx-cloud-shade{fill:rgba(255,255,255,.45)}
.weather-badge .wx-drift{animation:wx-drift 7s ease-in-out infinite alternate}
.weather-badge .wx-drops line{stroke:#7ab8f5;stroke-width:2.6;stroke-linecap:round;animation:wx-drop 1.1s linear infinite}
.weather-badge .wx-drops line:nth-child(2){animation-delay:.36s}
.weather-badge .wx-drops line:nth-child(3){animation-delay:.72s}
.weather-badge .wx-flakes circle{fill:#fff;animation:wx-flake 2.6s ease-in infinite}
.weather-badge .wx-flakes circle:nth-child(2){animation-delay:.85s}
.weather-badge .wx-flakes circle:nth-child(3){animation-delay:1.7s}
.weather-badge .wx-bolt{fill:var(--theme-basic-warning,#ffd24a);animation:wx-bolt 2.4s ease-in-out infinite}
.weather-badge .wx-fog line{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linecap:round;animation:wx-fog-drift 4s ease-in-out infinite alternate}
.weather-badge .wx-fog line:nth-child(2){animation-delay:1.2s}
@keyframes wx-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wx-pulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.12);opacity:.55}}
@keyframes wx-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes wx-drift{from{transform:translateX(-1.5px)}to{transform:translateX(1.5px)}}
@keyframes wx-drop{from{transform:translateY(0);opacity:1}to{transform:translateY(4px);opacity:0}}
@keyframes wx-flake{from{transform:translateY(0);opacity:1}to{transform:translateY(5px);opacity:0}}
@keyframes wx-bolt{0%,100%{opacity:.25}45%{opacity:1}55%{opacity:.4}65%{opacity:1}}
@keyframes wx-fog-drift{from{transform:translateX(-2px)}to{transform:translateX(2px)}}

/* ===================================================================
   Liquid glass skin (Apple-style frosted translucency)
   Layered over the dark theme; every rule below intentionally
   overrides the base surfaces. Orbs behind the content give the
   backdrop blur something real to refract.
   =================================================================== */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 420px at 12% 6%, rgba(54,163,255,.16), transparent 62%),
    radial-gradient(760px 520px at 90% 14%, rgba(53,212,154,.13), transparent 64%),
    radial-gradient(860px 620px at 55% 96%, rgba(158,110,255,.11), transparent 66%);}

header{background:rgba(8,18,27,.70)!important;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid rgba(255,255,255,.10)!important}

.sidebar{background:rgba(9,19,29,.58)!important;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-right:1px solid rgba(255,255,255,.08)!important}

.panel{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:18px!important;
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 8px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07)}

.metric{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}

.mode-card{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

.mode-card.selected{border-color:rgba(54,163,255,.65)!important;background:rgba(54,163,255,.12)!important;
  box-shadow:0 0 0 3px rgba(54,163,255,.18), inset 0 1px 0 rgba(255,255,255,.08)}

.auth-overlay{background:#050b12;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.auth-card{background:rgba(13,24,35,.72)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;
  backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);
  box-shadow:0 24px 80px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10)}

button{border-radius:12px;border:1px solid transparent}
button:hover{filter:brightness(1.12)}

.secondary,.header-button{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.13)!important;
  color:var(--text)!important;border-radius:12px!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

input,select,textarea{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:rgba(54,163,255,.60)!important;box-shadow:0 0 0 3px rgba(54,163,255,.18);outline:none}
input::placeholder{color:rgba(145,166,184,.55)}

label.check input[type="checkbox"]{accent-color:var(--blue)}

.nav-item{border-radius:12px!important;border:1px solid transparent!important}
.nav-item.active{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.12)!important}

.message{border-radius:12px!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.chip{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)!important}

.license-banner{background:rgba(54,163,255,.10)!important;border:1px solid rgba(54,163,255,.30)!important;border-radius:14px!important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.transaction-panel{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

#portalBanner{border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;
  background:radial-gradient(circle at 85% -20%, rgba(18,49,74,.85) 0%, transparent 55%),
    rgba(255,255,255,.05)!important;
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:0 12px 44px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10)}

#updateNotice .message{border-radius:14px!important}

.wizard-steps li{border-radius:999px}

/* ===== Collapsible sidebar (desktop) + sidebar user chip ===== */
#sidebarUser{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
#sidebarUser .user-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sidebar-collapsed .app-shell{grid-template-columns:72px minmax(0,1fr)}
body.sidebar-collapsed .sidebar{padding:18px 8px}
body.sidebar-collapsed .nav-item{font-size:0;justify-content:center}
body.sidebar-collapsed .nav-item span{font-size:20px}
body.sidebar-collapsed .sidebar-foot{display:none}
body.sidebar-collapsed .brand strong,body.sidebar-collapsed .brand small{display:none}
/* ===== Banner: bigger badge + responsive ===== */
#portalBanner .weather-badge{width:56px;height:56px}
@media(max-width:950px){#portalBanner{padding:26px;gap:14px}}
@media(max-width:650px){#portalBanner{flex-wrap:wrap;padding:18px;gap:10px}#portalBanner #pbTime{font-size:1.15rem}}

/* ===== Portal-layout sidebar bottom + welcome band ===== */
#sidebarCollapse{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:4px auto 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:var(--text);cursor:pointer;padding:0}
#sidebarCollapse svg{transition:transform .2s}
body.sidebar-collapsed #sidebarCollapse svg{transform:rotate(180deg)}
#logout{width:100%;display:flex;align-items:center;justify-content:center;gap:6px}
#sidebarUser{display:flex;align-items:center;gap:10px;margin-top:10px!important;margin-bottom:0!important;padding-top:10px!important;padding-bottom:0!important;border-top:1px solid var(--line)!important;border-bottom:none!important}
#portalBanner{margin:-38px -38px 26px;border-radius:0!important}
@media(max-width:950px){#portalBanner{margin:-18px -10px 18px}}
@media(max-width:650px){#portalBanner{margin:-22px -14px 16px}}

/* ===== Portal look toggle: movable chrome ===== */
.slot:empty{display:none}
body:not(.portal-look) #sidebarUser{margin-top:0!important;padding-top:0!important;border-top:none!important}
/* ===== Portal look: the banner IS the top bar ===== */
body.portal-look header{display:none!important}
body.portal-look .app-shell{min-height:100vh}
body.portal-look #navToggle{margin-right:4px}

/* ===== Sticky sidebar: never stretches down with long page content ===== */
@media(min-width:951px){
  .app-shell > .sidebar{position:sticky;top:70px;height:calc(100vh - 70px);overflow-y:auto;align-self:start}
  body.portal-look .app-shell > .sidebar{top:0;height:100vh}
}

/* ===== ui-fixes: banner visible in portal look, footer chevron survives rail mode ===== */
body.portal-look #portalBanner{display:flex!important}
body.sidebar-collapsed .sidebar-foot{display:grid}
body.sidebar-collapsed .sidebar-foot>*:not(#sidebarCollapse){display:none}
body.sidebar-collapsed #sidebarCollapse{justify-self:center;width:auto;margin:0 auto}

/* ===== banner-fullbleed: bigger banner + true edge-to-edge (clamp-aware) ===== */
#portalBanner{align-items:center;gap:26px;padding:34px 48px;min-height:170px}
@media(min-width:951px){#portalBanner{margin:-38px calc(clamp(22px,4vw,54px)*-1) 30px;border-left:0!important;border-right:0!important}}
@media(max-width:950px){#portalBanner{margin:0 0 18px;padding:22px 16px;min-height:0}}
@media(max-width:650px){#portalBanner{margin:0 0 16px;padding:18px 14px;min-height:0;flex-wrap:wrap;gap:12px}}

/* ===== sidebar: footer always pinned at the bottom (nav scrolls instead) ===== */
@media(min-width:951px){
  .app-shell > .sidebar{justify-content:flex-start;overflow:hidden}
  .app-shell > .sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto}
  .app-shell > .sidebar .sidebar-foot{flex:0 0 auto}
}

/* ===== collapsed rail: icons only, no scrollbar ===== */
body.sidebar-collapsed .nav-section{display:none}
body.sidebar-collapsed .app-shell > .sidebar{overflow:hidden}
body.sidebar-collapsed .app-shell > .sidebar nav{overflow:hidden;scrollbar-width:none}
body.sidebar-collapsed .app-shell > .sidebar nav::-webkit-scrollbar{display:none}
body.sidebar-collapsed .nav-item{padding:11px 0}

/* ===== reqpage: access requests live on their own page (module-gated nav) ===== */
body:not(.portal-look) .nav-item[data-page="requests"]{display:none}

/* ===== reqpolish: requests list fills the page ===== */
#pageRequests .content-grid{grid-template-columns:minmax(0,1fr)}
#pageRequests .panel{min-height:calc(100vh - 250px)}

/* ===== antiflicker: no nested backdrop blur, stable compositing layers ===== */
/* #portalBanner deliberately NOT layer-promoted: translateZ(0) + backdrop-filter
   washes images white in Chromium (the banner logo bug). The sidebar keeps its layer -
   DESKTOP ONLY: an unscoped translateZ(0) overrode the mobile drawer's
   translateX(-105%) hide, so the drawer never actually closed visually. */
@media(min-width:951px){.sidebar{transform:translateZ(0)}}

/* ===== alerts-separate: dark dropdown option lists ===== */
select{background-color:#0d1823!important}
select option{background:#0d1823;color:var(--text)}

/* ===== chip-profile: clickable chip + status separated from the profile ===== */
#sidebarUser{cursor:pointer}
body.portal-look #statusWrap{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* ===== rail-polish: bigger rail icons; active item = colored icon, no pill ===== */
body.sidebar-collapsed .nav-item svg{width:22px;height:22px;display:block}
body.sidebar-collapsed .nav-item{padding:12px 0}
.nav-item.active{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.nav-item.active svg{color:var(--blue)}

/* ===== rail-chevron: the collapse button breathes at the rail bottom ===== */
body.sidebar-collapsed .sidebar-foot{padding-bottom:14px}
body.sidebar-collapsed #sidebarCollapse{margin:4px auto 2px}

/* ===== logo-filter round: chevron sized like a rail row ===== */
body.sidebar-collapsed #sidebarCollapse{width:40px;height:40px;margin:6px auto 4px}
body.sidebar-collapsed .sidebar-foot{padding:10px 0 16px}

/* ===== shift: user instruction - rail nav icons 6px right (collapsed rail only; the mobile drawer is untouched) ===== */
body.sidebar-collapsed .sidebar nav .nav-item svg{transform:translateX(6px)}

/* ===== split-login: form left, animated firewall visual right ===== */
.auth-split{display:grid;grid-template-columns:1fr 1fr;width:min(1080px,100%);min-height:min(640px,92vh);border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 100px #000a}
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:44px 34px;background:rgba(13,24,35,.88)}
.auth-split .auth-card{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;width:min(430px,100%)}
.auth-visual{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 20%,#12314a 0%,transparent 55%),radial-gradient(circle at 72% 80%,#0e3d31 0%,transparent 50%),linear-gradient(160deg,#0a141d,#0d1823)}
.auth-visual::before{content:"";position:absolute;inset:-48px;background-image:linear-gradient(rgba(54,163,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(54,163,255,.07) 1px,transparent 1px);background-size:44px 44px;animation:avGrid 26s linear infinite}
@keyframes avGrid{to{background-position:44px 44px}}
.av-rings{position:absolute;width:340px;height:340px}
.av-rings i{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(54,163,255,.4)}
.av-rings i:nth-child(2){inset:38px;border-color:rgba(53,212,154,.32);animation:avSpin 26s linear infinite}
.av-rings i:nth-child(3){inset:76px;border-color:rgba(54,163,255,.24);animation:avSpin 18s linear infinite reverse}
@keyframes avSpin{to{transform:rotate(360deg)}}
.av-shield{position:relative;z-index:2;animation:avPulse 3.2s ease-in-out infinite}
@keyframes avPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(54,163,255,.35))}50%{transform:scale(1.05);filter:drop-shadow(0 0 30px rgba(53,212,154,.45))}}
.av-scan{position:absolute;left:0;right:0;height:90px;top:-90px;background:linear-gradient(180deg,transparent,rgba(54,163,255,.10) 45%,rgba(54,163,255,.30) 50%,rgba(54,163,255,.10) 55%,transparent);animation:avScan 7s ease-in-out infinite;z-index:1}
@keyframes avScan{0%,100%{top:-90px}50%{top:100%}}
.av-dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px currentColor;animation:avFloat 9s ease-in-out infinite}
.av-dots i:nth-child(1){background:var(--blue);left:18%;top:26%}
.av-dots i:nth-child(2){background:var(--green);left:78%;top:22%;animation-delay:1.2s}
.av-dots i:nth-child(3){background:var(--blue);left:24%;top:74%;animation-delay:2.4s}
.av-dots i:nth-child(4){background:var(--green);left:70%;top:80%;animation-delay:3.6s}
.av-dots i:nth-child(5){background:var(--blue);left:46%;top:12%;animation-delay:4.8s}
.av-dots i:nth-child(6){background:var(--green);left:52%;top:88%;animation-delay:6s}
@keyframes avFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.av-brand{position:absolute;bottom:34px;left:0;right:0;text-align:center;z-index:2}
.av-brand strong{font-size:22px;display:block;letter-spacing:.02em}
.av-brand strong span{color:var(--blue)}
.av-brand small{color:var(--muted)}
/* tablet + mobile: visual folds away, classic centered glass card */
@media(max-width:950px){.auth-split{grid-template-columns:1fr;min-height:0;border:0;box-shadow:none}
.auth-visual{display:none}
.auth-form-side{padding:20px;background:transparent}
.auth-split .auth-card{background:rgba(13,24,35,.72)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 24px 80px rgba(0,0,0,.5)!important}}

/* ===== drawer-fix: mobile drawer is partial width, scrim visible, tap-outside closes ===== */
@media(max-width:950px){
  .sidebar{width:min(80%,340px)}
  #sidebarCollapse{display:none}
}
body.nav-open:after{cursor:pointer}

/* ===== banner mid-width band (651-950px): scale so it holds one clean row;
   wrap rules only kick in at <=650 as before ===== */
#portalBanner .banner-clock{white-space:nowrap}
@media(min-width:651px) and (max-width:950px){
#portalBanner{min-height:0;padding:24px;gap:14px}
#portalBanner .banner-hello{font-size:1rem!important}
#portalBanner #pbWelcomeName{font-size:1.5rem!important}
#portalBanner .banner-clock #pbTime{font-size:1.35rem!important}
}


/* ===== banner clock+weather box (portal style) ===== */
.pb-clockbox{display:flex;align-items:center;margin-left:auto;gap:18px;padding:16px 22px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--blue);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pb-clockbox .pb-box-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.14)}
#pbWeather.hidden + .pb-box-divider{display:none}
@media(max-width:650px){.pb-clockbox{gap:14px;padding:13px 16px}}


/* ===== banner stats widget box (WAN throughput sparkline etc) ===== */
.pb-statsbox{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;align-self:stretch;margin:0 auto;padding:16px 22px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.pb-statsbox canvas{display:block}
@media(max-width:950px){.pb-statsbox{display:none}}

.working{display:inline-block;width:13px;height:13px;border:2px solid rgba(145,166,184,.35);border-top-color:var(--blue);border-radius:50%;animation:nf-spin .8s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes nf-spin{to{transform:rotate(360deg)}}