:root{--bg:#060b14;--panel:#0d1524;--line:#20304a;--text:#e8eef7;--muted:#8fa2ba;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--blue:#3b82f6}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}.shell{display:grid;grid-template-columns:245px 1fr;min-height:100vh}aside{background:#09111e;border-right:1px solid var(--line);padding:18px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:11px;align-items:center;margin-bottom:22px}.brand b,.brand span{display:block}.brand span,.muted,.sub{color:var(--muted);font-size:12px}.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#0e7490,#164e63);font-weight:900}.nav-section{margin:16px 10px 6px;color:#57708d;font-size:10px;font-weight:800;letter-spacing:.12em}nav{display:flex;flex-direction:column;gap:3px}nav button{border:0;background:transparent;color:#c0cada;text-align:left;padding:10px 11px;border-radius:9px;cursor:pointer}nav button:hover,nav button.active{background:#10203a;color:#fff}.side-foot{position:fixed;left:20px;bottom:18px;color:var(--muted);font-size:11px}.dot{display:inline-block;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}main{padding:0 26px 40px;min-width:0}header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}header h1{font-size:23px;margin:0}.user{display:flex;gap:10px;align-items:center}.role,.badge{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:4px 8px}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px}.card{background:linear-gradient(180deg,#0e1728,#0b1320);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}.span3{grid-column:span 3}.span4{grid-column:span 4}.span5{grid-column:span 5}.span6{grid-column:span 6}.span7{grid-column:span 7}.span8{grid-column:span 8}.span12{grid-column:span 12}.metric .label{color:var(--muted);font-size:12px}.metric .value{font-size:28px;font-weight:800;margin:7px 0}.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}h2{font-size:15px;margin:0 0 12px}h3{font-size:13px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}input,select,button,textarea{background:#091220;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:8px}button{cursor:pointer;background:#173653}button:hover{filter:brightness(1.12)}button.danger{background:#431a20;color:#fecaca}.table-wrap{overflow:auto;border:1px solid #18263d;border-radius:10px}table{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}th,td{padding:10px;border-bottom:1px solid #1d2a40;text-align:left;vertical-align:top}th{color:#8fa5bf;background:#0a1322;position:sticky;top:0}tbody tr:hover{background:#0f1a2d}.clickable{cursor:pointer}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.truncate{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pre{white-space:pre-wrap;max-height:580px;overflow:auto;background:#060b13;border:1px solid var(--line);padding:12px;border-radius:10px}.logbox{height:62vh;max-height:none}.chart{height:165px;display:flex;align-items:end;gap:5px}.bar{flex:1;background:linear-gradient(#38bdf8,#2563eb);border-radius:5px 5px 1px 1px;min-width:4px}.rank{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #17243a;font-size:12px}.badge.good{background:#0c2819;color:#86efac}.badge.warn{background:#2c250b;color:#fde047}.badge.bad{background:#321419;color:#fca5a5}.live-chip{font-size:10px;color:#86efac;border:1px solid #1b4b2d;background:#0b2416;border-radius:999px;padding:4px 8px}.empty,.loading{padding:22px;text-align:center;color:var(--muted)}.worldmap,.topology{width:100%;height:auto;max-height:390px}.mapbg{fill:#07101d}.gridlines line{stroke:#14243a}.continents{fill:#13243a;stroke:#27415f}.mapdot{fill:#fecaca}.topology line{stroke:#35506e;stroke-width:2}.node rect{fill:#0c1727;stroke:#35506e;stroke-width:2;rx:12}.node text{text-anchor:middle;fill:#dbe7f5;font-size:12px}.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;justify-content:flex-end;z-index:50}.drawer.open{display:flex}.drawer-panel{width:min(720px,94vw);height:100%;background:#0a1220;border-left:1px solid var(--line);padding:24px;overflow:auto}.drawer-close{float:right;background:transparent;font-size:26px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid>div{background:#0d1727;border:1px solid var(--line);border-radius:10px;padding:10px}.detail-grid b,.detail-grid span{display:block}.textarea{width:100%;min-height:120px}.toast{position:fixed;right:24px;bottom:24px;background:#10253c;border:1px solid var(--line);padding:12px 16px;border-radius:10px;opacity:0;transform:translateY(12px);transition:.2s;z-index:100}.toast.show{opacity:1;transform:none}.error-panel{border-color:#67252f;background:#2b1217}@media(max-width:1100px){.span3,.span4,.span5,.span6,.span7,.span8{grid-column:span 12}.shell{grid-template-columns:84px 1fr}.brand div:last-child,.nav-section,nav button{font-size:0}.side-foot{display:none}}

.actions{display:flex;flex-wrap:wrap;gap:6px;min-width:270px}
.warnbtn{background:#5b4610!important;color:#fde68a;border-color:#8a6b17!important}
.hint{margin:8px 0 14px;color:var(--muted);font-size:12px}
.pre.compact{max-height:170px}
.map-pro{height:390px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:
radial-gradient(circle at 20% 30%,rgba(37,99,235,.12),transparent 24%),
radial-gradient(circle at 70% 45%,rgba(14,165,233,.10),transparent 25%),#07101d}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(67,86,112,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(67,86,112,.18) 1px,transparent 1px);background-size:60px 60px}
.map-pulse{position:absolute;width:14px;height:14px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 8px rgba(239,68,68,.11),0 0 25px rgba(239,68,68,.65)}
.map-pulse span{position:absolute;left:18px;top:-6px;white-space:nowrap;background:#101827;border:1px solid var(--line);border-radius:7px;padding:4px 7px;font-size:10px;color:#dbeafe}
.topology-pro{display:flex;align-items:center;justify-content:center;gap:18px;min-height:160px;flex-wrap:wrap}
.topo-node{padding:18px 24px;border:1px solid #315071;border-radius:12px;background:#0b1728;font-weight:700}
.topo-arrow{font-size:25px;color:#5d7594}

:root[data-accent="blue"]{--accent:#3b82f6}
:root[data-accent="cyan"]{--accent:#06b6d4}
:root[data-accent="violet"]{--accent:#8b5cf6}
:root[data-accent="emerald"]{--accent:#10b981}
:root[data-accent="amber"]{--accent:#f59e0b}
:root[data-theme="light"]{--bg:#f5f7fb;--panel:#fff;--panel2:#f8fafc;--text:#142033;--muted:#64748b;--line:#dbe4ef}
:root[data-theme="dark"]{--bg:#0b111b;--panel:#111827;--panel2:#0f172a;--text:#e5edf7;--muted:#94a3b8;--line:#263449}
:root[data-density="compact"] .card{padding:12px}:root[data-density="compact"] th,:root[data-density="compact"] td{padding:8px 10px}
:root[data-density="spacious"] .card{padding:24px}:root[data-density="spacious"] th,:root[data-density="spacious"] td{padding:15px 16px}
.sidebar-compact aside{width:88px}.sidebar-compact aside .brand-text,.sidebar-compact aside .section-title{display:none}.sidebar-compact aside button{font-size:0;text-align:center}.sidebar-compact aside button::first-letter{font-size:13px}.sidebar-compact main{margin-left:88px}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.span2{grid-column:span 2}.mt{margin-top:14px}.mini-grid{margin:12px 0}
.grow{flex:1;min-width:240px}.clickable{cursor:pointer}.clickable:hover td{background:rgba(59,130,246,.06)}
.bar-row{display:grid;grid-template-columns:minmax(120px,1.5fr) 3fr 48px;gap:12px;align-items:center;padding:8px 0}.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:9px;background:#0a1220;border-radius:99px;overflow:hidden;border:1px solid var(--line)}.bar-track i{display:block;height:100%;background:var(--accent);border-radius:99px}
.status-list{display:grid;gap:8px}.status-list>div{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.waf-gauge{display:grid;place-items:center;min-height:210px}.waf-gauge span{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;background:conic-gradient(var(--accent) calc(var(--p)*1%),#132032 0);position:relative}.waf-gauge span:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:var(--panel)}.waf-gauge span{isolation:isolate}.waf-gauge span::before{content:attr(data-v);z-index:2}
.worldmap{height:430px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#06101d}.worldmap svg{width:100%;height:100%}.ocean{fill:#071321}.continents path{fill:#14263a;stroke:#2a4662;stroke-width:1.2}.attack-point circle:first-child{fill:#ef4444}.attack-point .pulse{fill:none;stroke:#ef4444;stroke-width:2;opacity:.55;animation:pulseMap 1.8s infinite}@keyframes pulseMap{0%{r:7;opacity:.8}100%{r:24;opacity:0}}.map-legend{display:flex;justify-content:space-between;padding-top:10px;color:var(--muted)}.dot.red{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:6px}
.progress{height:12px;border:1px solid var(--line);border-radius:999px;background:#07101c;overflow:hidden;margin:12px 0}.progress i{display:block;height:100%;background:var(--accent);transition:width .35s ease}
.checkrow{display:block;padding:6px 0}
label{display:block;color:var(--muted);font-size:12px;margin:10px 0 5px}
@media(max-width:1100px){.grid4,.grid3,.grid2{grid-template-columns:1fr 1fr}.span2{grid-column:span 2}}@media(max-width:760px){.grid4,.grid3,.grid2{grid-template-columns:1fr}.span2{grid-column:span 1}.worldmap{height:280px}}

/* R13 operational polish */
.pager{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:12px}.pager button:disabled{opacity:.35;cursor:not-allowed}.series{width:100%;height:150px;margin:8px 0 18px}.series line{stroke:var(--line);stroke-width:1}.series polyline{fill:none;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke}.table-wrap table{min-width:760px}.actions{display:flex;gap:6px;flex-wrap:wrap}.metric .value .badge{font-size:.9rem}.status-list>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}.status-list>div:last-child{border-bottom:0}.drawer-panel label{display:block;margin:12px 0 6px}.drawer-panel input,.drawer-panel select{width:100%}.drawer-panel button{margin-top:12px}.worldmap{min-height:320px}.worldmap svg{width:100%;height:auto}.map-legend{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px}.clickable{cursor:pointer}.clickable:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}


/* R14 login shell - intentionally self-contained, no JS required */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:
 radial-gradient(circle at 15% 5%,rgba(14,116,144,.23),transparent 32%),
 radial-gradient(circle at 85% 80%,rgba(37,99,235,.12),transparent 28%),var(--bg)}
.login-card{width:min(440px,100%);padding:34px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(15,25,42,.98),rgba(8,15,27,.98));box-shadow:0 28px 80px rgba(0,0,0,.35)}
.login-card .brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:26px}.login-card .brand-mark{flex:0 0 48px;width:48px;height:48px}.login-card h1{font-size:24px;margin:0 0 7px}.login-card .lead{color:var(--muted);margin:0 0 22px;font-size:13px}.login-card form{display:grid;gap:15px}.login-card label{display:grid;gap:7px;margin:0;color:#bac8d9;font-size:12px;font-weight:700}.login-card input{width:100%;min-height:44px;background:#07111f;border:1px solid #29405f;outline:none}.login-card input:focus{border-color:var(--accent,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,.13)}.login-card button{min-height:44px;margin-top:4px;background:linear-gradient(180deg,#1f4a72,#173653);font-weight:800}.login-card .hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.login-card .alert{margin-bottom:16px;padding:10px 12px;border-radius:9px}.login-card .alert.danger{background:#321419;border:1px solid #6d2730;color:#fecaca}

:root{--brand-primary:#3b82f6;--brand-secondary:#06b6d4}
.brand-mark{overflow:hidden;background:linear-gradient(145deg,var(--brand-primary),var(--brand-secondary))!important}.brand-mark img,.brand-preview img,.favicon-preview img{width:100%;height:100%;object-fit:contain}.brand-text{min-width:0}.side-foot{flex-wrap:wrap}.side-foot small{display:block;width:100%;margin-top:6px;max-width:180px;color:#4f6680}
.topbar{backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 88%,transparent);position:sticky;top:0;z-index:20}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;font-size:18px;padding:0}.notif-btn{position:relative}.notif-btn #notif-count{position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ef4444;font-size:10px;display:grid;place-items:center}
.card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.card:hover{border-color:color-mix(in srgb,var(--brand-primary) 32%,var(--line));box-shadow:0 18px 50px rgba(0,0,0,.16)}button:not(.danger):not(.warnbtn){background:color-mix(in srgb,var(--brand-primary) 24%,#10253c)}
.login-page{min-height:100vh;background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--brand-primary) 15%,transparent),transparent 32%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--brand-secondary) 11%,transparent),transparent 34%),var(--bg)}
.login-shell{width:min(1120px,94vw);min-height:650px;display:grid;grid-template-columns:1.35fr .8fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(8,15,26,.84);box-shadow:0 35px 90px rgba(0,0,0,.35)}
.login-hero{padding:64px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(15,36,62,.78),rgba(6,14,26,.82));position:relative}.login-hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(100,130,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(100,130,160,.05) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}.login-logo{width:62px;height:62px;font-size:19px;z-index:1}.login-hero h1{font-size:42px;letter-spacing:-.04em;margin:12px 0;max-width:640px;z-index:1}.login-tagline{font-size:18px;color:#9fb2c9;max-width:580px;z-index:1}.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:900;color:var(--brand-secondary);z-index:1}.login-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:38px;z-index:1}.login-feature-grid>div{border:1px solid var(--line);padding:15px;border-radius:12px;background:rgba(8,15,26,.5)}.login-feature-grid b,.login-feature-grid span{display:block}.login-feature-grid span{font-size:11px;color:var(--muted);margin-top:4px}.login-footer{margin-top:auto;color:#5e7289;font-size:11px;z-index:1}.login-card{width:auto;border:0;border-left:1px solid var(--line);border-radius:0;padding:58px 42px;display:flex;flex-direction:column;justify-content:center}.login-card-head h2{font-size:27px;margin:6px 0}.login-card-head p{color:var(--muted);margin-bottom:25px}.password-wrap{display:flex}.password-wrap input{border-radius:8px 0 0 8px}.password-wrap button{border-radius:0 8px 8px 0;font-size:11px}.caps-warning{height:20px;color:#f59e0b;font-size:11px;opacity:0}.caps-warning.show{opacity:1}.login-submit{margin-top:7px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important;font-weight:800}
.osm-map{height:500px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#071321}.osm-canvas{position:absolute;inset:0;overflow:hidden}.osm-tile{position:absolute;width:256px;height:256px;user-select:none}.osm-marker{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:rgba(239,68,68,.88)!important;border:2px solid #fecaca!important;box-shadow:0 0 0 8px rgba(239,68,68,.13),0 0 25px rgba(239,68,68,.5);padding:0;color:white;font-size:9px;font-weight:800;z-index:4}.osm-controls{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;z-index:6}.osm-controls button{width:36px;height:36px;font-size:20px}.osm-attrib{position:absolute;right:6px;bottom:4px;background:rgba(7,19,33,.78);font-size:9px;padding:3px 5px;z-index:6}.map-loading{display:grid;place-items:center;height:100%;color:var(--muted)}
.notification{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0}.notification.critical{border-color:#7f1d1d;background:#2a1115}.notification.warning{border-color:#6b5315;background:#251e0b}.notification span{color:var(--muted);font-size:12px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid button{padding:18px;text-align:left}
.settings-tabs{display:flex;gap:6px;margin-bottom:14px}.settings-tabs button.active{background:var(--brand-primary)}.widget-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:5px 0}.widget-row label{margin:0}.small{padding:4px 8px}.brand-preview{width:150px;height:90px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;margin:12px 0;background:#07101d;font-size:22px;font-weight:900}.favicon-preview{width:64px;height:64px;border:1px dashed var(--line);border-radius:12px;display:grid;place-items:center;margin:12px 0;background:#07101d;font-weight:900}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-hero{padding:34px}.login-card{border-left:0;border-top:1px solid var(--line);padding:34px}.login-feature-grid{grid-template-columns:1fr}.top-actions .user>span{display:none}.osm-map{height:360px}}

/* R18 coherent theme engine */
:root{
  --ui-accent:#3b82f6;
  --surface-0:#060b14;--surface-1:#0b1320;--surface-2:#0e1728;--surface-3:#101c2e;
  --surface-elevated:#0a1220;--sidebar-bg:#09111e;--input-bg:#091220;
  --table-head:#0a1322;--table-hover:#0f1a2d;--drawer-bg:#0a1220;--code-bg:#060b13;
  --shadow-card:0 16px 40px rgba(0,0,0,.16)
}
:root[data-theme="midnight"]{
  --bg:#060b14;--panel:#0d1524;--panel2:#0f1a2b;--text:#e8eef7;--muted:#8fa2ba;--line:#20304a;
  --surface-0:#060b14;--surface-1:#0b1320;--surface-2:#0e1728;--surface-3:#101c2e;--surface-elevated:#0a1220;
  --sidebar-bg:#09111e;--input-bg:#091220;--table-head:#0a1322;--table-hover:#0f1a2d;--drawer-bg:#0a1220;--code-bg:#060b13;
  color-scheme:dark
}
:root[data-theme="dark"]{
  --bg:#0b111b;--panel:#111827;--panel2:#151f30;--text:#e5edf7;--muted:#94a3b8;--line:#2a3a50;
  --surface-0:#0b111b;--surface-1:#111827;--surface-2:#151f30;--surface-3:#182538;--surface-elevated:#0f1724;
  --sidebar-bg:#0e1623;--input-bg:#101a29;--table-head:#101a29;--table-hover:#182538;--drawer-bg:#101827;--code-bg:#0a101a;
  color-scheme:dark
}
:root[data-theme="light"]{
  --bg:#eef3f8;--panel:#ffffff;--panel2:#f7f9fc;--text:#162033;--muted:#64748b;--line:#d6e0eb;
  --surface-0:#eef3f8;--surface-1:#ffffff;--surface-2:#f7f9fc;--surface-3:#eef4fb;--surface-elevated:#ffffff;
  --sidebar-bg:#f8fbff;--input-bg:#ffffff;--table-head:#f3f6fa;--table-hover:#f4f8fd;--drawer-bg:#ffffff;--code-bg:#f5f7fa;
  --shadow-card:0 10px 28px rgba(15,23,42,.07);color-scheme:light
}

body{background:var(--bg)!important;color:var(--text)!important}
aside{background:var(--sidebar-bg)!important;border-color:var(--line)!important}
main{background:var(--bg)!important}
.topbar,header{background:color-mix(in srgb,var(--bg) 91%,transparent)!important;border-color:var(--line)!important}
.card{background:linear-gradient(180deg,var(--surface-2),var(--surface-1))!important;border-color:var(--line)!important;box-shadow:var(--shadow-card)}
.drawer-panel{background:var(--drawer-bg)!important;color:var(--text)!important}
.detail-grid>div{background:var(--surface-2)!important;border-color:var(--line)!important}
.pre,.logbox{background:var(--code-bg)!important;color:var(--text)!important;border-color:var(--line)!important}

input,select,textarea{background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--line)!important}
input:focus,select:focus,textarea:focus{border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent)!important;outline:none}
option{background:var(--surface-elevated);color:var(--text)}

.table-wrap{border-color:var(--line)!important;background:var(--surface-1)}
th{background:var(--table-head)!important;color:var(--muted)!important;border-color:var(--line)!important}
td{border-color:var(--line)!important;color:var(--text)}
tbody tr:hover{background:var(--table-hover)!important}
.rank,.widget-row,.status-list>div{border-color:var(--line)!important}

nav button{color:color-mix(in srgb,var(--text) 78%,var(--muted))!important}
nav button:hover{background:color-mix(in srgb,var(--ui-accent) 10%,var(--surface-2))!important;color:var(--text)!important}
nav button.active{background:color-mix(in srgb,var(--ui-accent) 22%,var(--surface-2))!important;color:var(--text)!important;box-shadow:inset 3px 0 0 var(--ui-accent)}
.nav-section{color:color-mix(in srgb,var(--ui-accent) 55%,var(--muted))!important}

button:not(.danger):not(.warnbtn):not(.drawer-close){background:color-mix(in srgb,var(--ui-accent) 24%,var(--surface-2))!important;color:var(--text)!important;border-color:color-mix(in srgb,var(--ui-accent) 30%,var(--line))!important}
button:not(.danger):not(.warnbtn):not(.drawer-close):hover{background:color-mix(in srgb,var(--ui-accent) 34%,var(--surface-2))!important}
.settings-tabs button.active{background:var(--ui-accent)!important;color:white!important}
.icon-btn{border-color:color-mix(in srgb,var(--ui-accent) 28%,var(--line))!important}

.bar-track{background:var(--surface-3)!important;border-color:var(--line)!important}
.bar-track i,.progress i{background:var(--ui-accent)!important}
.series polyline{stroke:var(--ui-accent)!important}
.clickable:hover{background:color-mix(in srgb,var(--ui-accent) 7%,transparent)!important}

:root[data-theme="light"] .role,:root[data-theme="light"] .badge{background:#f8fafc;color:#334155;border-color:#d6e0eb}
:root[data-theme="light"] .badge.good{background:#eaf8ef;color:#166534}
:root[data-theme="light"] .badge.warn{background:#fff7d6;color:#854d0e}
:root[data-theme="light"] .badge.bad{background:#fff0f1;color:#b4232d}
:root[data-theme="light"] .live-chip{background:#eaf8ef;color:#166534;border-color:#b8e0c5}
:root[data-theme="light"] .brand span,:root[data-theme="light"] .muted,:root[data-theme="light"] .sub{color:#64748b!important}
:root[data-theme="light"] .side-foot small{color:#64748b!important}
:root[data-theme="light"] .toast{background:#fff;color:#162033;border-color:#d6e0eb;box-shadow:0 16px 38px rgba(15,23,42,.12)}
:root[data-theme="light"] .error-panel{background:#fff2f3!important;border-color:#f0b9bf!important;color:#7f1d1d}
:root[data-theme="light"] .notification{background:#fff}
:root[data-theme="light"] .notification.critical{background:#fff1f2;border-color:#fecdd3}
:root[data-theme="light"] .notification.warning{background:#fffbeb;border-color:#fde68a}
:root[data-theme="light"] .brand-preview,:root[data-theme="light"] .favicon-preview{background:#f8fafc!important}
:root[data-theme="light"] #content .card h2,:root[data-theme="light"] #content .card .label,:root[data-theme="light"] #content .card label{color:#334155!important}
:root[data-theme="light"] #content .card .value{color:#0f172a!important}

/* R19 login theme consistency */
.login-page{background:var(--bg)!important;color:var(--text)!important}
.login-shell{background:var(--surface-1)!important;border-color:var(--line)!important}
.login-hero{
  background:
    radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--brand-primary) 18%,transparent),transparent 34%),
    radial-gradient(circle at 78% 78%,color-mix(in srgb,var(--brand-secondary) 14%,transparent),transparent 38%),
    linear-gradient(145deg,var(--surface-2),var(--surface-1))!important;
}
.login-card{background:var(--surface-1)!important;color:var(--text)!important}
.login-card-head h2,.login-hero h1{color:var(--text)!important}
.login-card-head p,.login-tagline,.login-feature-grid span,.login-card .hint{color:var(--muted)!important}
.login-card label{color:var(--text)!important}
.login-feature-grid>div{
  background:color-mix(in srgb,var(--surface-1) 82%,transparent)!important;
  border-color:var(--line)!important;
}
.login-card input{
  background:var(--input-bg)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.login-card input:focus{
  border-color:var(--brand-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 18%,transparent)!important;
}
.login-submit{
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important;
  color:#fff!important;
}
:root[data-theme="light"] .login-shell{box-shadow:0 28px 70px rgba(15,23,42,.12)!important}
:root[data-theme="light"] .login-hero{
  background:
    radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--brand-primary) 12%,transparent),transparent 34%),
    radial-gradient(circle at 78% 78%,color-mix(in srgb,var(--brand-secondary) 10%,transparent),transparent 38%),
    linear-gradient(145deg,#eef5ff,#ffffff)!important;
}

/* R20 Security Maps & Topology */
.map-card{overflow:hidden}
.osm-map{height:520px;position:relative;overflow:hidden;border:1px solid var(--line)!important;border-radius:16px;background:#dfe8f1!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
:root[data-theme="dark"] .osm-map,:root[data-theme="midnight"] .osm-map{background:#071321!important}
.osm-canvas{position:absolute;inset:0;overflow:hidden;background:#dfe8f1}
:root[data-theme="dark"] .osm-canvas,:root[data-theme="midnight"] .osm-canvas{background:#071321}
.osm-tile{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none}
.osm-marker{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:#ef4444!important;border:2px solid #fff!important;box-shadow:0 0 0 7px rgba(239,68,68,.18),0 4px 20px rgba(127,29,29,.38);padding:0!important;color:white!important;font-size:9px;font-weight:900;z-index:5;transition:transform .15s ease,box-shadow .15s ease}
.osm-marker:hover{transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 11px rgba(239,68,68,.16),0 8px 26px rgba(127,29,29,.44)}
.osm-controls{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:5px;z-index:7}
.osm-controls button{width:40px;height:40px;font-size:20px;background:var(--surface-1)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:0 5px 16px rgba(0,0,0,.12)}
.osm-attrib{position:absolute;right:7px;bottom:6px;background:color-mix(in srgb,var(--surface-1) 88%,transparent);color:var(--muted);border:1px solid var(--line);border-radius:5px;font-size:9px;padding:4px 6px;z-index:7}
.map-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.map-summary>div{padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px}
.map-summary b,.map-summary span{display:block}.map-summary b{font-size:20px;color:var(--text)}.map-summary span{font-size:11px;color:var(--muted);margin-top:2px}
.map-empty-note{margin-top:10px;padding:10px 12px;border-radius:9px;background:color-mix(in srgb,var(--ui-accent) 7%,var(--surface-1));border:1px solid color-mix(in srgb,var(--ui-accent) 18%,var(--line));color:var(--muted);font-size:12px}

.security-topology{display:grid;gap:22px;margin-top:10px}
.topology-flow{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px 12px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface-2),var(--surface-1));overflow-x:auto}
.topo-stack{display:grid;gap:8px;min-width:190px}
.sec-topo-node{min-width:160px;min-height:84px;padding:13px 14px!important;display:grid!important;grid-template-columns:34px 1fr auto;grid-template-areas:"icon copy status" "icon extra extra";align-items:center;gap:6px 10px;text-align:left!important;border:1px solid var(--line)!important;border-radius:14px!important;background:var(--surface-1)!important;color:var(--text)!important;box-shadow:0 7px 22px rgba(0,0,0,.07)!important}
.sec-topo-icon{grid-area:icon;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ui-accent) 12%,var(--surface-2));color:var(--ui-accent);font-size:18px;font-weight:900}
.sec-topo-copy{grid-area:copy;min-width:0}.sec-topo-copy b,.sec-topo-copy small{display:block}.sec-topo-copy b{color:var(--text)!important;font-size:13px}.sec-topo-copy small{color:var(--muted)!important;font-size:10px;margin-top:3px;white-space:nowrap}
.sec-topo-status{grid-area:status;font-size:9px;color:var(--muted);white-space:nowrap}.sec-topo-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#94a3b8;margin-right:4px}
.sec-topo-node.healthy .sec-topo-status i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.11)}
.sec-topo-node.warning .sec-topo-status i{background:#f59e0b}.sec-topo-node.down .sec-topo-status i{background:#ef4444}
.sec-topo-extra{grid-area:extra;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-link{width:78px;min-width:60px;display:grid;grid-template-rows:8px auto;gap:5px;align-items:center;text-align:center;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.flow-link i{display:block;height:2px;background:linear-gradient(90deg,var(--line),var(--ui-accent),var(--line));position:relative}
.flow-link i:after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:2px solid var(--ui-accent);border-right:2px solid var(--ui-accent);transform:rotate(45deg)}
.topology-section-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.topology-service-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px}
.topology-service-grid .sec-topo-node{min-width:0}
:root[data-theme="light"] .sec-topo-node{background:#fff!important;color:#162033!important;border-color:#d6e0eb!important}
:root[data-theme="light"] .sec-topo-copy b{color:#162033!important}
:root[data-theme="light"] .sec-topo-copy small,:root[data-theme="light"] .sec-topo-status,:root[data-theme="light"] .sec-topo-extra{color:#64748b!important}
:root[data-theme="light"] .topology-flow{background:linear-gradient(180deg,#f8fbff,#fff)!important}
@media(max-width:1200px){.topology-flow{justify-content:flex-start}.topology-service-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.osm-map{height:360px}.map-summary{grid-template-columns:1fr 1fr}.topology-service-grid{grid-template-columns:1fr}.flow-link{width:45px}}

/* R21 autonomous local Security Map */
.osm-map{
  height:540px!important;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line)!important;
  border-radius:16px;
  background:var(--surface-2)!important;
  cursor:grab;
}
.osm-map:active{cursor:grabbing}
.local-map-stage{
  position:absolute;
  inset:0;
  width:1800px;
  height:900px;
  transform-origin:0 0;
  transition:transform .12s ease-out;
  will-change:transform;
}
.local-world-map{
  position:absolute;
  inset:0;
  width:1800px;
  height:900px;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
  -webkit-user-drag:none;
}
.local-map-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  border-radius:50%!important;
  background:#ef4444!important;
  border:2px solid #fff!important;
  color:#fff!important;
  display:grid!important;
  place-items:center;
  padding:0!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:0 0 0 8px rgba(239,68,68,.16),0 6px 24px rgba(127,29,29,.38)!important;
  z-index:4;
}
.local-map-marker:hover{
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 12px rgba(239,68,68,.13),0 8px 30px rgba(127,29,29,.45)!important;
}
.local-map-controls{
  position:absolute;
  top:14px;right:14px;
  display:grid;gap:6px;
  z-index:10;
}
.local-map-controls button{
  width:40px;height:40px;padding:0!important;
  display:grid!important;place-items:center;
  background:var(--surface-1)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.12)!important;
}
.local-map-badge{
  position:absolute;
  left:12px;bottom:10px;
  z-index:10;
  padding:5px 8px;
  border-radius:7px;
  background:color-mix(in srgb,var(--surface-1) 90%,transparent);
  color:var(--muted);
  border:1px solid var(--line);
  font-size:10px;
}
:root[data-theme="light"] .local-world-map{filter:none}
:root[data-theme="dark"] .local-world-map,
:root[data-theme="midnight"] .local-world-map{filter:none}
@media(max-width:760px){
  .osm-map{height:360px!important}
  .local-map-stage{width:1200px;height:600px}
  .local-world-map{width:1200px;height:600px}
}

/* R22 CLI/Web parity & configurable columns */
.column-manager{display:grid;gap:6px;margin-top:14px;max-height:65vh;overflow:auto}
.column-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.column-item label{margin:0;display:flex;align-items:center;gap:8px}.column-item input{width:auto}
.linkbtn{padding:3px 7px!important;background:transparent!important;color:var(--ui-accent)!important;border-color:transparent!important;text-decoration:underline}
td.wrap{white-space:normal;min-width:180px;max-width:420px}.table-wrap table{min-width:max-content}.table-wrap{overflow:auto}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.detail-grid>div{padding:10px;border:1px solid var(--line);border-radius:9px}.detail-grid b,.detail-grid span{display:block}.detail-grid b{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.detail-grid span{margin-top:4px}
@media(max-width:800px){.detail-grid{grid-template-columns:1fr}}

/* R24 contextual navigation / drill-down */
.metric-link{
  width:100%;text-align:left!important;position:relative;display:block!important;
  cursor:pointer!important;transition:transform .14s ease,border-color .14s ease,background .14s ease!important;
}
.metric-link:hover,.metric-link:focus-visible{
  transform:translateY(-1px);border-color:color-mix(in srgb,var(--ui-accent) 46%,var(--line))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 10%,transparent),var(--shadow-card)!important;
  outline:none;
}
.metric-link .metric-arrow{position:absolute;right:14px;top:12px;color:var(--ui-accent);font-weight:800}
.metric-link .label,.metric-link .value,.metric-link .sub{display:block}
.bar-row-link{
  width:100%;display:grid!important;grid-template-columns:minmax(110px,1.2fr) minmax(100px,3fr) auto 18px!important;
  align-items:center;gap:10px;text-align:left!important;padding:6px 4px!important;border:0!important;border-radius:7px!important;
  background:transparent!important;color:var(--text)!important;cursor:pointer!important;
}
.bar-row-link:hover,.bar-row-link:focus-visible{background:color-mix(in srgb,var(--ui-accent) 8%,transparent)!important;outline:2px solid color-mix(in srgb,var(--ui-accent) 30%,transparent)}
.drill-arrow{color:var(--ui-accent);font-weight:800}
.chart-drill{width:100%;display:block!important;background:transparent!important;border:0!important;padding:0!important;cursor:pointer!important}
.chart-drill:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px;border-radius:8px}
.active-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--ui-accent) 10%,var(--surface-2));border:1px solid color-mix(in srgb,var(--ui-accent) 24%,var(--line));font-size:11px;color:var(--text)}
tr.clickable:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}

/* R25 map data-quality */
.map-info-note{margin-top:10px;padding:11px 13px;border-radius:10px;background:color-mix(in srgb,#f59e0b 9%,var(--surface-1));border:1px solid color-mix(in srgb,#f59e0b 28%,var(--line));color:var(--text);font-size:11px}
.map-stat{padding:12px 14px!important;background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:11px!important;text-align:left!important}
.map-stat:hover{border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--line))!important}
.map-stat b,.map-stat span{display:block}.map-stat b{font-size:20px}.map-stat span{font-size:11px;color:var(--muted);margin-top:2px}

/* R26 Hub progress + dual public/internal security map */
.job-progress{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;margin:10px 0}
.progress-track{grid-column:1/-1;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.progress-track i{display:block;height:100%;background:var(--ui-accent);transition:width .3s ease}
.job-log{max-height:55vh;overflow:auto}

.map-legend{display:flex;gap:16px;align-items:center;margin:8px 0 10px;color:var(--muted);font-size:11px}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.alert-dot{background:#ef4444}.decision-dot{background:#f59e0b}.both-dot{background:#8b5cf6}

.local-map-marker.has-decision{background:#8b5cf6!important;box-shadow:0 0 0 8px rgba(139,92,246,.16),0 6px 24px rgba(76,29,149,.38)!important}

.internal-map-card{overflow:hidden}
.internal-map{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center;min-height:260px;padding:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 5%,var(--surface-1)),var(--surface-2))}
.internal-core{display:grid;place-items:center;align-content:center;width:180px;height:180px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ui-accent) 46%,var(--line));background:var(--surface-1);box-shadow:0 0 0 14px color-mix(in srgb,var(--ui-accent) 7%,transparent)}
.internal-core span{font-size:20px;font-weight:800;color:var(--text)}.internal-core small{margin-top:5px;color:var(--muted);text-align:center}
.internal-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.internal-node{position:relative;display:grid!important;gap:5px;text-align:left!important;padding:14px!important;background:var(--surface-1)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:12px!important}
.internal-node:before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;background:linear-gradient(90deg,var(--ui-accent),var(--line))}
.internal-node:hover{border-color:color-mix(in srgb,var(--ui-accent) 50%,var(--line))!important;transform:translateY(-1px)}
.internal-node.has-decision{box-shadow:inset 4px 0 0 #8b5cf6}
.node-ip{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}
.node-kpis{font-size:12px;color:var(--text)}.node-scenarios{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.internal-map{grid-template-columns:1fr}.internal-core{margin:auto}.internal-node:before{display:none}}