:root{
  --bg:#050b14;--panel:#0b1220;--panel2:#111827;--line:#243044;--text:#e5e7eb;--muted:#94a3b8;
  --blue:#38bdf8;--green:#22c55e;--yellow:#f59e0b;--red:#ef4444;--purple:#a78bfa
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 15% 0,#132544 0,#07111f 42%,#020617 100%);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
a{color:#93c5fd;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:292px;background:rgba(2,6,23,.96);border-right:1px solid #1e293b;position:fixed;top:0;bottom:0;left:0;overflow:auto}
.brand{padding:1.1rem 1rem;border-bottom:1px solid #1e293b}.brand-title{font-size:1.12rem;font-weight:900}.brand-sub{color:var(--muted);font-size:.78rem}
.sidebar-title{font-size:.68rem;color:#64748b;text-transform:uppercase;font-weight:800;letter-spacing:.08em;margin:1rem 1rem .35rem}
.sidebar a{display:flex;align-items:center;gap:.55rem;color:#cbd5e1;padding:.55rem .8rem;border-radius:.75rem;margin:.13rem .6rem}
.sidebar a:hover,.sidebar a.active{background:linear-gradient(90deg,#1e293b,#172033);color:white}.content{margin-left:292px;width:calc(100% - 292px);padding:1.25rem}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.h1{font-size:1.65rem;font-weight:850;margin:0}.subtle{color:var(--muted)}
.grid{display:grid;gap:1rem}.grid.kpi{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.grid.two{grid-template-columns:repeat(auto-fit,minmax(390px,1fr))}
.noc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}.widget{grid-column:span 3}.widget.wide{grid-column:span 6}.widget.full{grid-column:span 12}
.cardx,.widget{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.82));border:1px solid var(--line);border-radius:20px;padding:1rem;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.metric{font-size:2.35rem;font-weight:900;line-height:1}.small{font-size:.84rem}.badgex{display:inline-flex;border-radius:999px;padding:.24rem .55rem;font-size:.75rem;font-weight:800;color:white}
.badge-ok{background:var(--green)}.badge-warning{background:var(--yellow)}.badge-critical{background:var(--red)}.badge-info{background:#0284c7}
.table-darkish{width:100%;border-collapse:collapse}.table-darkish th{color:#cbd5e1;text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}.table-darkish th,.table-darkish td{border-bottom:1px solid #263244;padding:.6rem;vertical-align:top}
pre{white-space:pre-wrap;background:#020617;border:1px solid #1e293b;border-radius:12px;padding:1rem;color:#dbeafe;overflow:auto}
input,select,textarea,button{background:#020617;border:1px solid #334155;color:var(--text);border-radius:10px;padding:.55rem .7rem}button,.btn{cursor:pointer;background:#2563eb;border-color:#2563eb;color:white;font-weight:700}
.node-map{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.node{min-width:145px;text-align:center;border:1px solid #334155;border-radius:18px;padding:1rem;background:#0b1220;position:relative}.node:after{content:"→";color:#64748b;position:absolute;right:-.85rem}.node:last-child:after{content:""}
.progress{height:10px;background:#1e293b;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#38bdf8)}
@media(max-width:1100px){.widget,.widget.wide{grid-column:span 6}}@media(max-width:920px){.sidebar{position:relative;width:100%;height:auto}.content{margin-left:0;width:100%}.app-shell{display:block}.noc-grid,.grid.two{grid-template-columns:1fr}.widget,.widget.wide,.widget.full{grid-column:span 1}}

html[data-theme="light"] body{background:#eef2f7;color:#172033}html[data-theme="light"] .sidebar{background:#fff;border-right:1px solid #dbe3ef}html[data-theme="light"] .brand-title,html[data-theme="light"] .sidebar a{color:#172033}html[data-theme="light"] .sidebar a:hover,html[data-theme="light"] .sidebar a.active{background:#e8eef7;color:#0f172a}html[data-theme="light"] .cardx,html[data-theme="light"] .widget{background:#fff;border-color:#d7e0ec;color:#172033}html[data-theme="light"] .table-darkish th,html[data-theme="light"] .table-darkish td{border-bottom-color:#dbe3ef;color:#172033}html[data-theme="light"] pre,html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#f7f9fc;color:#172033;border-color:#cbd5e1}