:root{
  --bg:#061210;
  --bg2:#0b1b17;
  --panel:#0d211c;
  --panel2:#102821;
  --line:#1b3a32;
  --text:#e8f2ef;
  --muted:#84a39a;
  --dim:#55736a;
  --mint:#6fe1c8;
  --green:#48cf8d;
  --yellow:#e5c45b;
  --orange:#ff914d;
  --red:#ff5f57;
  --blue:#63a6ff;
  --shadow:0 16px 40px rgba(0,0,0,.26);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 70% -20%,#143f33 0,#061210 36%),var(--bg);color:var(--text)}
body{overflow-x:hidden}
button{font:inherit}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;border-right:1px solid var(--line);background:linear-gradient(180deg,#071815 0%,#061310 100%);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:20}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 20px}
.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#062017;background:linear-gradient(135deg,var(--mint),#8bf1cf);box-shadow:0 0 24px rgba(111,225,200,.18)}
.brand-name{font-weight:900;letter-spacing:.08em}
.brand-sub{font-size:10px;color:var(--muted);margin-top:2px}
.pilot-badge{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(111,225,200,.045);border-radius:14px;padding:12px 10px;margin:0 0 18px}
.pilot-badge strong{font-size:12px}.pilot-badge small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.pulse-dot{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;box-shadow:0 0 0 4px rgba(72,207,141,.10);animation:pulse 1.7s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(72,207,141,.02);opacity:.6}}
.nav{display:grid;gap:5px}
.nav-item{border:0;background:transparent;color:#9ab6ae;padding:11px 12px;border-radius:11px;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left}
.nav-item:hover{background:#0b211b;color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(111,225,200,.12),rgba(111,225,200,.035));color:var(--mint);border:1px solid rgba(111,225,200,.14)}
.nav-icon{width:18px;text-align:center;font-size:15px}.nav-count{margin-left:auto;background:#61251f;color:#ffb0a8;border:1px solid #8d3b31;font-size:10px;padding:3px 7px;border-radius:999px}
.side-footer{margin-top:auto}.mini-card{border:1px solid var(--line);padding:12px;border-radius:12px;background:#091b16}.mini-label{font-size:9px;letter-spacing:.15em;color:var(--dim);margin-bottom:6px}.status-line{font-size:11px;display:flex;align-items:center;gap:6px}.side-meta{font-size:9px;color:#496960;margin-top:10px;line-height:1.4}
.main{flex:1;min-width:0}
.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(5,15,13,.78);backdrop-filter:blur(14px);position:sticky;top:0;z-index:15}
.top-left{display:flex;gap:12px;align-items:center}.eyebrow{font-size:9px;color:var(--mint);letter-spacing:.17em;font-weight:800}.topbar h1{font-size:19px;margin:5px 0 0;letter-spacing:-.02em}.top-actions{display:flex;gap:9px;align-items:center}.connection-chip,.alerts-btn{border:1px solid var(--line);background:#0b1f1a;color:#b8d0c9;padding:8px 10px;border-radius:10px;font-size:11px}.connection-chip{display:flex;align-items:center;gap:7px}.alerts-btn{cursor:pointer}.alerts-btn span{background:#6b2a24;color:#ffb0a9;padding:2px 6px;border-radius:99px;margin-left:4px}
.icon-btn{height:36px;min-width:36px;padding:0 10px;background:#0b1e19;border:1px solid var(--line);border-radius:10px;color:#a4beb6;cursor:pointer}.icon-btn:hover{color:var(--mint);border-color:#2c5f52}.icon-btn.small{height:30px;min-width:30px;padding:0}
.user-pill{display:flex;align-items:center;gap:8px;margin-left:2px;padding-left:8px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1e5346,#16382f);border:1px solid #2a5c50;color:var(--mint);font-size:11px;font-weight:800}.user-meta{display:flex;flex-direction:column}.user-meta b{font-size:11px}.user-meta span{font-size:9px;color:var(--muted)}
.content{padding:22px 24px 36px}.page{display:none}.page.active{display:block}
.hero-strip{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid #23463d;border-radius:18px;padding:18px 20px;background:linear-gradient(110deg,rgba(22,68,57,.48),rgba(12,32,27,.72));box-shadow:var(--shadow)}
.hero-kicker{font-size:9px;letter-spacing:.18em;color:#80e4cd;font-weight:800}.hero-strip h2{font-size:23px;margin:7px 0 4px;letter-spacing:-.03em}.hero-strip p{margin:0;color:var(--muted);font-size:12px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border-radius:10px;border:1px solid var(--line);padding:10px 13px;cursor:pointer;font-weight:700;font-size:11px}.btn-primary{background:linear-gradient(135deg,#75e4cb,#42c7a7);border-color:#73dfc8;color:#042218}.btn-ghost{background:#0a1d18;color:#b9d4cc}.btn-warn{background:#3b2618;color:#ffbd8d;border-color:#69432a}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0}
.kpi-card{border:1px solid var(--line);background:rgba(10,29,24,.8);border-radius:14px;padding:13px;min-height:96px}.kpi-label{font-size:9px;letter-spacing:.09em;color:#68857c}.kpi-value{display:flex;align-items:baseline;gap:4px;font-size:25px;font-weight:900;margin-top:7px}.kpi-value small{font-size:10px;color:var(--muted);font-weight:700}.kpi-foot{display:block;font-size:9px;margin-top:4px}.good{color:var(--green)}.warn{color:var(--yellow)}.danger-text{color:#ff7a70}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr);gap:12px}.panel{border:1px solid var(--line);background:rgba(10,28,23,.88);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:14px 15px;border-bottom:1px solid rgba(32,70,59,.7)}.panel-title{font-size:12px;font-weight:900;letter-spacing:.01em}.panel-sub{display:block;color:#66847b;font-size:9px;margin-top:3px}.text-btn{border:0;background:none;color:var(--mint);font-size:10px;cursor:pointer}
.map-controls{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#091b16;color:#6f8b84;padding:6px 8px;border-radius:8px;font-size:9px;cursor:pointer}.chip.active{color:var(--mint);border-color:#2c6b5a;background:#103128}
.map-wrap{position:relative}.map-wrap svg{display:block;width:100%;height:auto;min-height:440px}.map-legend{position:absolute;left:14px;bottom:12px;display:flex;gap:11px;flex-wrap:wrap;background:rgba(7,21,18,.88);border:1px solid var(--line);backdrop-filter:blur(7px);padding:7px 9px;border-radius:9px;font-size:9px;color:#8ba79f}.map-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.green{background:var(--green)}.legend-dot.yellow{background:var(--yellow)}.legend-dot.orange{background:var(--orange)}.legend-dot.red{background:var(--red)}.legend-dot.gray{background:#7b8784}
.node-pin,.incident-pin{cursor:pointer}.node-core{stroke:#062016;stroke-width:3}.node-label{font-size:10px;fill:#b4d1c8;font-family:Inter,Arial}.incident-ring{fill:none;stroke-width:3;animation:ripple 2.5s infinite}@keyframes ripple{50%{opacity:.25;transform:scale(1.2)}}
.incident-list{padding:6px 0;max-height:505px;overflow:auto}.incident-item{padding:12px 14px;border-bottom:1px solid rgba(27,58,50,.7);cursor:pointer;transition:.18s}.incident-item:hover{background:#0d251f}.incident-item:last-child{border-bottom:0}.incident-top{display:flex;justify-content:space-between;gap:8px}.severity{font-size:8px;font-weight:900;letter-spacing:.12em;padding:4px 6px;border-radius:6px}.severity.critical{background:#3c1716;color:#ff9d96;border:1px solid #712d27}.severity.high{background:#3e2716;color:#ffbc7d;border:1px solid #70472a}.severity.watch{background:#393214;color:#e8d984;border:1px solid #675d28}.severity.normal{background:#103426;color:#83e0bb;border:1px solid #275f4b}.incident-type{font-weight:800;font-size:11px}.incident-time{font-size:9px;color:#6d8880}.incident-location{color:#839f96;font-size:9px;margin-top:6px}.incident-meta{display:flex;justify-content:space-between;color:#638078;font-size:9px;margin-top:8px}.confidence-mini{height:5px;background:#17352d;border-radius:10px;overflow:hidden;margin-top:6px}.confidence-mini i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#5acfb2,#ff7f68)}
.bottom-grid{display:grid;grid-template-columns:1.55fr 1fr .9fr;gap:12px;margin-top:12px}.sensor-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 15px}.sensor-summary div{border:1px solid rgba(40,80,68,.6);background:#0a1b16;border-radius:10px;padding:9px}.sensor-summary span{display:block;color:#67847b;font-size:8px}.sensor-summary strong{font-size:17px;display:inline-block;margin-top:5px}.sensor-summary small{font-size:8px;color:#728e85;margin-left:3px}.chart-canvas{display:block;width:100%;height:160px;padding:0 10px 10px}.node-status,.uptime{font-size:9px;color:#8da9a0;display:flex;align-items:center;gap:6px}
.fusion-score{display:flex;justify-content:center;padding:14px 0 8px}.score-ring{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;background:radial-gradient(circle at center,#0b201a 54%,transparent 55%),conic-gradient(var(--red) 0 91%,#18362e 91% 100%);box-shadow:0 0 35px rgba(255,95,87,.08)}.score-ring:after{content:"";position:absolute}.confidence-bars{padding:0 15px 10px}.confidence-bars>div{margin:9px 0}.confidence-bars span{font-size:9px;color:#8da89f;display:flex;justify-content:space-between}.confidence-bars b{color:#cfe3de}.bar,.tiny-bar{height:5px;background:#18342d;border-radius:9px;overflow:hidden;margin-top:6px}.bar i,.tiny-bar i{display:block;height:100%;background:linear-gradient(90deg,#67d6bb,#6fa7ff);border-radius:9px}.severity-box{margin:0 15px 15px;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:3px}.severity-box.critical{background:#321716;border:1px solid #632a26}.severity-box span{color:#ff8d85;font-size:10px;font-weight:900;letter-spacing:.12em}.severity-box small{color:#c28f8b;font-size:8px}
.health-row{padding:9px 15px 0;display:grid;grid-template-columns:1fr auto;gap:5px;font-size:9px;color:#7e9a91}.tiny-bar{grid-column:1/-1}.health-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:12px 15px}.health-metrics div{border:1px solid rgba(40,80,68,.6);background:#0a1b16;border-radius:9px;padding:9px}.health-metrics small{display:block;color:#66847b;font-size:8px}.health-metrics b{display:block;margin-top:4px;font-size:11px}
#page-incidents,#page-sensors,#page-devices,#page-alerts,#page-analytics,#page-admin,#page-public{min-height:720px}
.subpage-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:12px}.data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.data-card{padding:13px;border:1px solid var(--line);background:#0b211b;border-radius:14px}.data-card small{font-size:9px;color:#6f8981}.data-card b{display:block;font-size:22px;margin-top:6px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:10px}.data-table th,.data-table td{padding:11px 12px;border-bottom:1px solid #17352d;text-align:left;white-space:nowrap}.data-table th{color:#6f8c83;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.data-table tr:hover td{background:#0b211b}
.section-pad{padding:14px}.filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.search-box{border:1px solid var(--line);background:#0a1c18;color:var(--text);padding:9px 11px;border-radius:9px;min-width:170px;outline:none}
.sensor-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.metric-big{font-size:27px;font-weight:900}.metric-note{font-size:9px;color:var(--muted)}.gauge{height:9px;background:#18352d;border-radius:9px;overflow:hidden;margin-top:8px}.gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red))}
.alert-composer{display:grid;gap:10px}.field{display:grid;gap:5px}.field label{font-size:9px;color:#729087}.field input,.field select,.field textarea{width:100%;background:#0a1b17;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px;font:inherit;font-size:10px}.field textarea{min-height:110px;resize:vertical}
.chart-large{height:260px}.analytics-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50}.modal.show{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(980px,94vw);max-height:88vh;overflow:auto;background:#091a16;border:1px solid #2a5549;border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.6)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}.modal-head h3{margin:5px 0 0;font-size:20px}.modal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:15px;padding:15px}.evidence-card{border:1px solid var(--line);background:#071411;border-radius:14px;padding:10px}.evidence-header{display:flex;justify-content:space-between;font-size:9px;color:#8ea9a0;margin-bottom:8px}.confidence-tag{color:#8be2cb;background:#0d2c24;border:1px solid #235747;padding:4px 6px;border-radius:6px}.evidence-scene{height:300px;border-radius:10px;position:relative;overflow:hidden;background:linear-gradient(180deg,#162b27 0,#263b2d 55%,#0a1d16 56%)}.evidence-scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 54% 44%,rgba(255,142,71,.55),transparent 18%),linear-gradient(15deg,transparent 0 47%,rgba(70,112,86,.8) 48% 50%,transparent 51%)}.tree{position:absolute;bottom:32px;width:0;height:0;border-left:38px solid transparent;border-right:38px solid transparent;border-bottom:112px solid #174635}.tree:after{content:"";position:absolute;left:-23px;top:32px;border-left:23px solid transparent;border-right:23px solid transparent;border-bottom:70px solid #236148}.tree-1{left:16%;transform:scale(.8)}.tree-2{left:43%;transform:scale(1.2)}.tree-3{left:72%;transform:scale(.95)}.smoke{position:absolute;border-radius:50%;background:rgba(214,224,218,.32);filter:blur(3px)}.smoke-a{width:90px;height:90px;left:52%;top:18%}.smoke-b{width:120px;height:120px;left:60%;top:7%;opacity:.55}.bbox{position:absolute;left:45%;top:37%;width:190px;height:95px;border:2px solid #ff725f;box-shadow:0 0 22px rgba(255,95,87,.18)}.bbox span{position:absolute;top:-21px;left:-2px;background:#ff725f;color:#1e0808;padding:4px 6px;font:800 9px Inter,Arial}.scan-line{position:absolute;left:0;right:0;top:44%;height:1px;background:rgba(120,244,219,.5);box-shadow:0 0 12px rgba(120,244,219,.4);animation:scan 3.5s linear infinite}@keyframes scan{0%,100%{top:12%}50%{top:88%}}.evidence-card>small{display:block;color:#6e8981;font-size:8px;padding-top:7px}
.detail-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.detail-stat-grid div{border:1px solid rgba(38,78,66,.7);background:#0b201a;padding:10px;border-radius:9px}.detail-stat-grid span{display:block;color:#68847c;font-size:8px}.detail-stat-grid b{display:block;font-size:10px;margin-top:4px}
.breakdown{margin-top:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden}.breakdown-head{display:flex;justify-content:space-between;padding:9px 10px;border-bottom:1px solid var(--line);font-size:9px}.snapshot-row{display:grid;grid-template-columns:1fr auto 65px;gap:8px;align-items:center;padding:8px 10px;font-size:9px;color:#8ca69f}.snapshot-row b{color:#d5e6e0}.snapshot-row i{height:5px;background:#18352e;border-radius:10px;position:relative}.snapshot-row i:after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:var(--orange);width:78%}.snapshot-row i.spark-med:after{width:48%;background:var(--yellow)}.timeline{position:relative;padding:12px 4px 2px 19px}.timeline-line{position:absolute;left:8px;top:16px;bottom:7px;width:1px;background:#2a5246}.timeline-item{position:relative;display:grid;grid-template-columns:58px 1fr;gap:7px;margin-bottom:10px;font-size:8px;color:#7f9992}.timeline-item:before{content:"";position:absolute;left:-15px;top:2px;width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 3px #0b211c}.timeline-item b{color:#9fbab2}.modal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.toast-stack{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:70}.toast{min-width:270px;max-width:360px;border:1px solid #2a5448;background:#0b201a;border-radius:11px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:11px 12px;display:flex;gap:9px;align-items:flex-start;animation:toastIn .25s ease}.toast strong{display:block;font-size:10px}.toast span{display:block;color:#7d9890;font-size:9px;margin-top:3px}@keyframes toastIn{from{transform:translateY(8px);opacity:0}}
.offline-banner{display:none;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#3b2815;color:#ffe0a4;border:1px solid #79542b;padding:8px 13px;border-radius:9px;z-index:30;font-size:10px}.offline-banner.show{display:block}
body.light{--bg:#f2f7f5;--bg2:#f8fbfa;--panel:#ffffff;--panel2:#f3f8f6;--line:#d4e4df;--text:#18312a;--muted:#658078;--dim:#7a958c}.light .sidebar,.light .topbar{background:#f9fcfb}.light .panel,.light .kpi-card{background:#fff}.light .map-wrap svg{filter:saturate(.86) brightness(1.22)}
.mobile-menu{display:none}

@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.bottom-grid{grid-template-columns:1fr 1fr}.health-panel{grid-column:1/-1}}
@media(max-width:900px){.sidebar{position:fixed;left:-280px;transition:left .25s}.sidebar.open{left:0}.mobile-menu{display:inline-block}.topbar{padding:12px 15px}.content{padding:15px}.dashboard-grid,.subpage-grid,.analytics-grid,.modal-grid{grid-template-columns:1fr}.map-wrap svg{min-height:360px}.incident-list{max-height:360px}.user-meta{display:none}}
@media(max-width:650px){.top-actions .connection-chip,.top-actions .alerts-btn{display:none}.hero-strip{flex-direction:column;align-items:flex-start}.hero-strip h2{font-size:19px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.sensor-summary{grid-template-columns:repeat(2,1fr)}.data-grid{grid-template-columns:repeat(2,1fr)}.sensor-card-grid{grid-template-columns:1fr}.content{padding:10px}.topbar{height:70px}.modal-card{width:96vw}.evidence-scene{height:230px}}

/* zenalert SaaS visual system */
:root{
  --bg:#07111f;
  --bg2:#0b1727;
  --panel:#0d1b2d;
  --panel2:#112239;
  --line:#203650;
  --text:#f1f6fb;
  --muted:#8da1b5;
  --dim:#61758a;
  --mint:#55d6c0;
  --green:#42d392;
  --yellow:#f2c75c;
  --orange:#ff9b5b;
  --red:#ff6e72;
  --blue:#6ea8ff;
  --shadow:0 18px 50px rgba(0,0,0,.2);
}
html,body{background:var(--bg);color:var(--text)}
body{font-size:13px;background:radial-gradient(circle at 82% -18%,rgba(58,121,151,.22),transparent 34%),var(--bg)}
.app-shell{background:linear-gradient(90deg,rgba(5,14,26,.28),transparent)}
.sidebar{width:252px;padding:24px 15px;background:rgba(8,20,35,.94);border-right:1px solid rgba(86,120,157,.22);box-shadow:16px 0 45px rgba(0,0,0,.12)}
.brand{padding:0 9px 25px;gap:12px}
.brand-mark{width:38px;height:38px;border-radius:11px;color:#061b22;background:linear-gradient(135deg,#78ead6,#43b9e9);box-shadow:0 8px 24px rgba(85,214,192,.16)}
.brand-name{font-size:15px;letter-spacing:.02em;text-transform:lowercase}
.brand-sub{font-size:10px;color:#8399af;margin-top:4px}
.pilot-badge{margin:0 1px 22px;padding:12px;border-radius:12px;background:linear-gradient(135deg,rgba(67,211,146,.09),rgba(78,150,226,.05));border:1px solid rgba(85,214,192,.18)}
.pilot-badge strong{font-size:11px}.pilot-badge small{color:#8097ad}
.nav{gap:3px}
.nav-item{position:relative;padding:11px 12px;border-radius:9px;color:#8ca3b8;gap:12px}
.nav-item:hover{background:rgba(110,168,255,.08);color:#e8f1fa}
.nav-item.active{background:linear-gradient(90deg,rgba(85,214,192,.16),rgba(85,214,192,.04));color:#76e4d1;border:1px solid rgba(85,214,192,.2)}
.nav-item.active:before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--mint)}
.nav-icon{font-size:14px;color:inherit}
.nav-count{background:rgba(255,110,114,.15);border-color:rgba(255,110,114,.32);color:#ff9a9c}
.mini-card{padding:13px;background:rgba(13,27,45,.8);border-color:rgba(86,120,157,.24);border-radius:11px}
.mini-label{color:#607993;font-size:8px}
.side-meta{color:#5f748a}
.topbar{height:82px;padding:16px 30px;background:rgba(7,17,31,.78);border-bottom:1px solid rgba(86,120,157,.2)}
.eyebrow{font-size:9px;letter-spacing:.14em;color:#62d9ce}
.topbar h1{font-size:20px;letter-spacing:-.035em;margin-top:6px}
.top-actions{gap:8px}
.connection-chip,.alerts-btn,.icon-btn{background:rgba(17,34,57,.82);border-color:rgba(86,120,157,.3);color:#b3c3d4;border-radius:9px}
.connection-chip{padding:9px 11px}
.alerts-btn{padding:9px 11px}
.icon-btn{height:36px}
.icon-btn:hover{border-color:rgba(85,214,192,.6);background:rgba(85,214,192,.1)}
.avatar{background:linear-gradient(135deg,#285b72,#173e50);border-color:#367d92;color:#9df0e2}
.user-pill{padding-left:11px;border-left:1px solid rgba(86,120,157,.25)}
.user-meta b{font-size:11px}.user-meta span{color:#8096aa}
.content{padding:28px 30px 42px;max-width:1680px;margin:0 auto}
.hero-strip{padding:24px 25px;border-radius:16px;border:1px solid rgba(85,214,192,.22);background:linear-gradient(110deg,rgba(21,63,76,.72),rgba(14,31,50,.88));box-shadow:0 18px 45px rgba(0,0,0,.16)}
.hero-kicker{font-size:9px;color:#72e1d0;letter-spacing:.16em}
.hero-strip h2{font-size:27px;letter-spacing:-.045em;margin:8px 0 6px}
.hero-strip p{font-size:12px;color:#9cb0c2}
.hero-actions{gap:8px}
.btn{border-radius:9px;padding:10px 14px;font-size:11px;transition:.18s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-primary{background:linear-gradient(135deg,#6de1cc,#4aaed9);border-color:#72e5d1;color:#061c25;box-shadow:0 8px 18px rgba(73,185,207,.17)}
.btn-ghost{background:rgba(11,27,46,.75);border-color:rgba(86,120,157,.35);color:#c0cfdd}
.btn-warn{background:rgba(138,78,35,.25);color:#ffc38e;border-color:rgba(255,155,91,.4)}
.kpi-grid{gap:12px;margin:16px 0}
.kpi-card{min-height:104px;padding:15px;border-radius:13px;background:rgba(13,27,45,.82);border-color:rgba(86,120,157,.22);box-shadow:0 10px 28px rgba(0,0,0,.1)}
.kpi-card:hover{border-color:rgba(110,168,255,.35);transform:translateY(-1px);transition:.18s ease}
.kpi-label{font-size:9px;letter-spacing:.1em;color:#71869b}
.kpi-value{font-size:27px;margin-top:10px;letter-spacing:-.03em}
.kpi-value small{color:#91a7ba}
.kpi-foot{font-size:9px;margin-top:5px}
.dashboard-grid,.bottom-grid,.subpage-grid,.analytics-grid{gap:14px}
.panel{border-radius:14px;background:rgba(13,27,45,.86);border-color:rgba(86,120,157,.22);box-shadow:var(--shadow)}
.panel-head{padding:15px 16px;border-bottom-color:rgba(86,120,157,.18)}
.panel-title{font-size:12px}.panel-sub{color:#72889d}
.map-controls{gap:6px}
.chip{background:rgba(7,18,32,.72);border-color:rgba(86,120,157,.28);color:#8298ac;border-radius:7px}
.chip.active{color:#76e4d1;border-color:rgba(85,214,192,.44);background:rgba(85,214,192,.1)}
.map-wrap svg{min-height:445px}
.map-legend{background:rgba(8,20,35,.9);border-color:rgba(86,120,157,.26);color:#9bb0c0}
.incident-list{max-height:505px}
.incident-item{padding:13px 15px;border-bottom-color:rgba(86,120,157,.16)}
.incident-item:hover{background:rgba(110,168,255,.07)}
.sensor-summary{gap:9px;padding:13px 16px}
.sensor-summary div,.health-metrics div,.data-card{background:rgba(7,18,32,.58);border-color:rgba(86,120,157,.2)}
.sensor-summary span,.health-metrics small,.data-card small{color:#73899e}
.fusion-score{padding-top:18px}
.score-ring{background:radial-gradient(circle at center,#0d1d30 54%,transparent 55%),conic-gradient(var(--red) 0 91%,#1d344c 91% 100%)}
.bar,.tiny-bar,.gauge{background:#1c334b}
.severity-box.critical{background:rgba(255,110,114,.1);border-color:rgba(255,110,114,.35)}
.health-row,.node-status,.uptime{color:#8da3b6}
.data-table th,.data-table td{border-bottom-color:rgba(86,120,157,.16)}
.data-table th{color:#71879c}
.data-table tr:hover td{background:rgba(110,168,255,.06)}
.search-box,.field input,.field select,.field textarea{background:rgba(7,18,32,.7);border-color:rgba(86,120,157,.3);color:var(--text)}
.modal-card{background:#0d1b2d;border-color:rgba(86,120,157,.36)}
.evidence-card{background:#091524;border-color:rgba(86,120,157,.25)}
.detail-stat-grid div,.breakdown{background:rgba(7,18,32,.5);border-color:rgba(86,120,157,.24)}
.timeline-line{background:#2b4b67}
.timeline-item:before{box-shadow:0 0 0 3px #102239}
.toast{background:#0e2034;border-color:rgba(86,120,157,.35)}
.offline-banner{background:#4e3518;border-color:#916429}
body.light{--bg:#f4f7fb;--bg2:#fff;--panel:#fff;--panel2:#f4f7fb;--line:#d9e3ed;--text:#15273a;--muted:#60778e;--dim:#8095a8;--mint:#0c9e98;--green:#159f68;--blue:#3578d4;--shadow:0 14px 35px rgba(31,65,95,.1);background:linear-gradient(120deg,#f4f8fb,#eef7f7)}
.light .sidebar{background:#fff;border-right-color:#e0e8f0;box-shadow:8px 0 24px rgba(35,67,95,.06)}
.light .topbar{background:rgba(255,255,255,.86);border-bottom-color:#e0e8f0}
.light .panel,.light .kpi-card{background:rgba(255,255,255,.88);border-color:#dce6ef}
.light .hero-strip{background:linear-gradient(110deg,#e6f7f5,#eef5fb);border-color:#c9e8e4}
.light .nav-item{color:#698198}.light .nav-item:hover{background:#f0f6fa}.light .nav-item.active{background:#e6f7f5;color:#078d88}
.light .icon-btn,.light .connection-chip,.light .alerts-btn,.light .btn-ghost{background:#fff;border-color:#d9e3ed;color:#526b82}
.light .kpi-card,.light .sensor-summary div,.light .health-metrics div,.light .data-card{background:#f9fbfd}
.light .map-wrap svg{filter:saturate(.82) brightness(1.16)}

@media(max-width:1200px){.content{padding-left:22px;padding-right:22px}}
@media(max-width:650px){.content{padding:14px 12px 28px}.topbar{padding:12px 14px}.hero-strip{padding:19px 17px}.hero-strip h2{font-size:22px}.kpi-card{min-height:94px;padding:12px}.kpi-value{font-size:23px}}

/* Product-polish layer: tighter hierarchy and a calm, enterprise SaaS surface. */
:root{
  --canvas:#07111f;
  --surface:rgba(13,27,45,.88);
  --surface-raised:#11243b;
  --stroke:rgba(122,153,185,.22);
  --stroke-strong:rgba(122,153,185,.36);
  --focus:rgba(85,214,192,.22);
}
body{background:radial-gradient(900px 480px at 83% -8%,rgba(45,115,152,.19),transparent 60%),radial-gradient(700px 500px at 36% 100%,rgba(35,91,91,.11),transparent 62%),var(--canvas);letter-spacing:.002em}
.app-shell:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(122,153,185,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(122,153,185,.025) 1px,transparent 1px);background-size:36px 36px}
.sidebar{backdrop-filter:blur(22px);background:linear-gradient(180deg,rgba(9,22,38,.98),rgba(7,17,31,.95));border-right-color:var(--stroke)}
.brand-mark{position:relative;overflow:hidden}.brand-mark:after{content:"";position:absolute;width:36px;height:36px;background:rgba(255,255,255,.24);transform:rotate(45deg);top:-30px;left:-18px}
.brand-name{font-weight:800}.nav-item{font-size:12px;font-weight:520;transition:background .18s ease,color .18s ease,border-color .18s ease}.nav-item.active{box-shadow:inset 0 1px 0 rgba(150,255,235,.06)}
.topbar{backdrop-filter:blur(18px);background:rgba(7,17,31,.76)}
.topbar h1{font-weight:720}.connection-chip{font-weight:650}.connection-chip .status-dot{box-shadow:0 0 0 3px rgba(66,211,146,.12)}
.content{position:relative}.hero-strip{position:relative;overflow:hidden;background:linear-gradient(115deg,rgba(19,58,72,.92),rgba(15,31,51,.95) 58%,rgba(15,31,51,.8));border-color:rgba(103,213,202,.25)}
.hero-strip:after{content:"";position:absolute;width:440px;height:440px;right:-190px;top:-260px;border:1px solid rgba(104,226,211,.15);border-radius:50%;box-shadow:0 0 0 52px rgba(104,226,211,.025),0 0 0 104px rgba(104,226,211,.018)}
.hero-strip > *{position:relative;z-index:1}.hero-kicker{display:flex;align-items:center;gap:7px}.hero-kicker-dot{width:6px;height:6px;border-radius:50%;background:#75ead5;box-shadow:0 0 0 4px rgba(117,234,213,.13)}
.hero-strip h2{max-width:600px;font-weight:760}.hero-strip p{max-width:680px;line-height:1.55}.hero-meta{display:flex;gap:15px;flex-wrap:wrap;margin-top:13px;color:#91a9bd;font-size:10px}.hero-meta span{display:inline-flex;align-items:center;gap:5px}.hero-meta .status-dot{width:6px;height:6px}
.hero-actions{align-self:flex-start;padding-top:5px}.btn{font-weight:700;letter-spacing:.01em}.btn-primary{box-shadow:0 8px 20px rgba(73,185,207,.24)}
.kpi-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(17,35,58,.94),rgba(12,26,44,.83));border-color:var(--stroke)}
.kpi-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(102,226,209,.68),transparent);opacity:.52}.kpi-label{font-weight:700}.kpi-value{font-weight:750}.kpi-foot{font-weight:550}
.panel{background:linear-gradient(145deg,rgba(15,31,52,.94),rgba(11,25,43,.86));border-color:var(--stroke)}
.panel-head{background:rgba(5,15,28,.14)}.panel-title{font-weight:750}.panel-sub{line-height:1.45}.text-btn{font-weight:700}.text-btn:hover{color:#9af0df}
.map-wrap{background:#071524}.map-wrap svg{filter:saturate(.75) hue-rotate(5deg) brightness(.88)}.map-legend{backdrop-filter:blur(12px)}
.incident-item{position:relative}.incident-item:after{content:"";position:absolute;left:0;top:17px;bottom:17px;width:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity .18s ease}.incident-item:hover:after{opacity:1;background:var(--mint)}
.sensor-summary div,.health-metrics div,.data-card{background:rgba(6,17,31,.44)}.score-ring{box-shadow:0 0 0 8px rgba(255,110,114,.035),0 0 36px rgba(255,95,87,.08)}
.chip{font-weight:650}.chip:focus-visible,.btn:focus-visible,.nav-item:focus-visible,.icon-btn:focus-visible{outline:2px solid #7ee8d8;outline-offset:2px}
body.light .hero-meta{color:#547187}body.light .panel{background:rgba(255,255,255,.94)}body.light .kpi-card{background:linear-gradient(145deg,#fff,#f5f9fc)}body.light .map-wrap{background:#e8f0f3}body.light .map-wrap svg{filter:saturate(.65) brightness(1.16)}
@media(max-width:900px){.hero-meta{gap:9px}.hero-actions{align-self:auto}}
@media(max-width:650px){.hero-meta{font-size:9px;gap:7px 11px}.hero-actions{width:100%}.hero-actions .btn{flex:1}.hero-strip:after{right:-280px}.topbar h1{font-size:18px}}

/* Calm operations console: intentional hierarchy, minimal ornament and quieter data surfaces. */
:root{--bg:#111b27;--bg2:#162331;--panel:#182634;--panel2:#1c2d3d;--line:#2b3b4b;--text:#edf2f6;--muted:#9aaab9;--dim:#718292;--mint:#65c9c0;--green:#5bbb8a;--yellow:#d2a95a;--orange:#d98854;--red:#d66d70;--blue:#78a9cf;--shadow:0 4px 18px rgba(4,12,20,.16)}
html,body,body.light{background:var(--bg)}
body{font-size:14px;background:#111b27;letter-spacing:0}
.app-shell:before{display:none}.app-shell{background:#111b27}
.sidebar{width:248px;background:#15212e;border-right:1px solid #2a3a49;box-shadow:none;backdrop-filter:none;padding:22px 14px}
.brand{padding:0 9px 22px}.brand-mark{width:36px;height:36px;border-radius:9px;background:#65c9c0;box-shadow:none}.brand-mark:after{display:none}.brand-name{font-size:15px;letter-spacing:-.02em}.brand-sub{color:#8495a5}
.pilot-badge{background:#1a2938;border-color:#314455;border-radius:9px;margin-bottom:19px}.pulse-dot{animation:none;box-shadow:none}.nav{gap:2px}.nav-item{border:1px solid transparent;border-radius:7px;padding:10px 11px;color:#a7b5c1;font-size:12px}.nav-item:hover{background:#1b2b3a;color:#fff}.nav-item.active{background:#213544;border-color:#2f4858;color:#e9f5f4;box-shadow:none}.nav-item.active:before{display:none}.nav-icon{opacity:.74}.mini-card{background:#192836;border-color:#2e4151;border-radius:9px}.side-meta{color:#788a9a}
.topbar{height:76px;padding:14px 30px;background:#111b27;border-bottom-color:#2b3b4b;backdrop-filter:none}.topbar h1{font-size:20px;font-weight:680;letter-spacing:-.025em}.eyebrow{color:#7e95a8;letter-spacing:.1em}.connection-chip,.alerts-btn,.icon-btn{background:#182634;border-color:#314252;color:#c1ccd5;border-radius:7px;box-shadow:none}.connection-chip{font-weight:600}.avatar{background:#2a4d5a;border-color:#416b76;color:#dcf5f1}.user-pill{border-left-color:#2d3e4e}
.content{max-width:1500px;padding:25px 30px 42px}.hero-strip{padding:21px 22px;border-radius:11px;background:#172737;border-color:#304657;box-shadow:none}.hero-strip:after{display:none}.hero-kicker{color:#8c9dab;font-size:9px;letter-spacing:.12em}.hero-kicker-dot{width:5px;height:5px;background:#65c9c0;box-shadow:none}.hero-strip h2{font-size:25px;font-weight:680;letter-spacing:-.035em;margin:8px 0 6px}.hero-strip p{color:#aab8c4;max-width:630px;font-size:13px}.hero-meta{color:#8799a8;margin-top:12px}.hero-actions{align-self:center}.btn{border-radius:7px;padding:10px 13px;font-size:11px;font-weight:650;box-shadow:none!important;transform:none!important}.btn-primary{background:#65c9c0;border-color:#65c9c0;color:#10212a}.btn-ghost{background:#20313f;border-color:#3b5060;color:#e1e9ee}.btn:hover{filter:none;background-color:#2a4352}
.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.kpi-card{min-height:92px;padding:14px 15px;border-radius:9px;background:#182634;border-color:#2c3d4d;box-shadow:none}.kpi-card:before{display:none}.kpi-card:hover{transform:none;border-color:#425869}.kpi-label{font-size:9px;color:#8fa1b1;font-weight:650}.kpi-value{font-size:25px;font-weight:690;margin-top:8px}.kpi-foot{font-weight:500;color:#879aaa}
.dashboard-grid,.bottom-grid,.subpage-grid,.analytics-grid{gap:12px}.panel{background:#182634;border-color:#2b3b4b;border-radius:10px;box-shadow:none}.panel-head{padding:14px 15px;background:transparent;border-bottom-color:#2a3b4b}.panel-title{font-size:12px;font-weight:700}.panel-sub{font-size:9px;color:#8a9cab}.text-btn{color:#8fd8d0;font-weight:650}.map-wrap{background:#111e2b}.map-wrap svg{filter:saturate(.48) brightness(.93)!important}.map-legend{background:rgba(20,32,44,.94);border-color:#35495a;backdrop-filter:none;color:#b5c2cb;border-radius:7px}.chip{border-radius:6px;background:#162330;border-color:#344858;color:#a7b6c1;font-size:9px}.chip.active{background:#284351;border-color:#4d7a7c;color:#e0f1ef}
.incident-item{padding:13px 15px;border-bottom-color:#2a3b4b}.incident-item:hover{background:#1d2e3e}.incident-item:after{display:none}.incident-type{font-weight:700}.severity{border-radius:5px}.confidence-mini{background:#293c4c}.confidence-mini i{background:#65c9c0}
.sensor-summary div,.health-metrics div,.data-card{background:#152330;border-color:#2d4050;border-radius:7px}.sensor-summary{padding:12px 15px}.chart-canvas{padding:4px 12px 12px}.score-ring{width:92px;height:92px;background:radial-gradient(circle at center,#182634 55%,transparent 56%),conic-gradient(#d66d70 0 91%,#314452 91% 100%);box-shadow:none}.bar,.tiny-bar,.gauge{background:#2b3e4e}.bar i,.tiny-bar i{background:#65c9c0}.severity-box.critical{background:#35282d;border-color:#69464c}.health-row,.node-status,.uptime{color:#a0b0bc}
.data-table th,.data-table td{border-bottom-color:#2b3c4c}.data-table tr:hover td{background:#1d2e3e}.search-box,.field input,.field select,.field textarea{background:#14212d;border-color:#344757}.modal-card{background:#182634;border-color:#3c5161}.evidence-card{background:#13212d;border-color:#324656}.toast{background:#1a2a38;border-color:#3a5161}.offline-banner{background:#493922;border-color:#7b6237}
body.light{--bg:#f5f7f8;--bg2:#ffffff;--panel:#ffffff;--panel2:#f1f4f6;--line:#dce3e8;--text:#1f2c37;--muted:#657583;--dim:#7c8b97;--mint:#258d87;--green:#2c936b;--yellow:#a77b25;--orange:#b86938;--red:#b85159;--blue:#4d7fa8;--shadow:0 3px 12px rgba(31,45,58,.06);background:#f5f7f8}.light .app-shell{background:#f5f7f8}.light .sidebar{background:#fff;border-right-color:#e0e6ea}.light .topbar{background:#f5f7f8;border-bottom-color:#dfe5e9}.light .pilot-badge,.light .mini-card{background:#f6f8f9;border-color:#dde5e9}.light .nav-item{color:#607280}.light .nav-item:hover{background:#edf2f4;color:#1c313e}.light .nav-item.active{background:#e4f1f0;border-color:#c7e1df;color:#1b605d}.light .connection-chip,.light .alerts-btn,.light .icon-btn{background:#fff;border-color:#d8e1e7;color:#506473}.light .hero-strip{background:#eaf2f4;border-color:#d3e2e4}.light .hero-kicker,.light .hero-meta{color:#5f7784}.light .hero-strip p{color:#607687}.light .panel,.light .kpi-card{background:#fff;border-color:#dce4e9}.light .kpi-card{background:#fff}.light .sensor-summary div,.light .health-metrics div,.light .data-card{background:#f7f9fa;border-color:#e0e7eb}.light .map-wrap{background:#e8eff2}.light .map-wrap svg{filter:saturate(.45) brightness(1.18)!important}.light .chip{background:#f8fafb;border-color:#dae4e9;color:#667987}.light .chip.active{background:#e3f0ef;border-color:#b8d9d5;color:#276d69}.light .score-ring{background:radial-gradient(circle at center,#fff 55%,transparent 56%),conic-gradient(#b85159 0 91%,#dce5e9 91% 100%)}.light .search-box,.light .field input,.light .field select,.light .field textarea{background:#fff;border-color:#d7e1e7}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-actions{align-self:auto}}
@media(max-width:650px){.kpi-grid{grid-template-columns:1fr}.hero-actions .btn{flex:auto}.hero-actions{width:100%}.hero-actions .btn{width:100%}}

/* zenalert palette: forest ink, river teal, cloud, and soft sandstone. */
.landing-page{display:none;min-height:100vh;background:#f7f6f1;color:#1c2c2b}
body.landing-active{background:#f7f6f1}.landing-active .app-shell,.landing-active .modal,.landing-active .toast-stack,.landing-active .offline-banner{display:none}.landing-active .landing-page{display:block}
.landing-nav{width:min(1220px,calc(100% - 48px));height:82px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfe3d9}.landing-brand{display:flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:#19312f;cursor:pointer;font:inherit}.landing-brand span{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:#1f554e;color:#eff6f1;font-size:10px;font-weight:800;letter-spacing:.04em}.landing-brand b{font-size:16px;letter-spacing:-.04em}.landing-nav-actions{display:flex;align-items:center;gap:18px}.landing-language,.landing-link{border:0;background:none;color:#38524e;font:600 12px Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}.landing-language{padding:7px 9px;border:1px solid #cfd8cf;border-radius:6px}.landing-link span{padding-left:4px;color:#277f73}
.landing-main{width:min(1220px,calc(100% - 48px));margin:0 auto}.landing-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(460px,1.05fr);align-items:center;gap:76px;min-height:590px;padding:54px 0 66px}.landing-eyebrow{margin:0 0 17px;color:#53716b;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.landing-eyebrow i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#318d80}.landing-copy h1{max-width:570px;margin:0;color:#1a302e;font-size:clamp(42px,4.2vw,64px);font-weight:650;line-height:1.04;letter-spacing:-.06em}.landing-copy h1 em{font-style:normal;color:#2e8578}.landing-description{max-width:500px;margin:22px 0 0;color:#5f716c;font-size:16px;line-height:1.65}.landing-actions{display:flex;align-items:center;gap:21px;margin-top:31px}.landing-primary{border:1px solid #236e64;border-radius:7px;background:#2b7e73;color:#f5faf7;padding:13px 16px;font:700 12px Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}.landing-primary span{padding-left:14px}.landing-secondary{color:#355954;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:5px}.landing-trust{display:flex;gap:0;margin-top:42px}.landing-trust span{padding:0 19px;border-left:1px solid #d7dfd7;color:#70827e;font-size:11px}.landing-trust span:first-child{padding-left:0;border-left:0}.landing-trust b{display:block;margin-bottom:4px;color:#284640;font-size:17px;letter-spacing:-.04em}
.landing-preview{overflow:hidden;border:1px solid #d3ddd5;border-radius:12px;background:#fff;box-shadow:0 18px 42px rgba(45,67,61,.09)}.preview-top{display:flex;align-items:center;gap:7px;height:48px;padding:0 17px;border-bottom:1px solid #e2e8e1;color:#637873;font-size:9px;font-weight:800;letter-spacing:.09em}.preview-top i{width:6px;height:6px;border-radius:50%;background:#55a982}.preview-top b{margin-left:auto;color:#3f5f58;font-size:10px;font-weight:650;letter-spacing:0}.preview-map{position:relative;height:277px;overflow:hidden;background:#e7eee8}.preview-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(54,98,86,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(54,98,86,.08) 1px,transparent 1px);background-size:28px 28px}.preview-route{position:absolute;display:block;width:125%;height:80px;border-top:5px solid rgba(63,117,103,.35);border-radius:50%;transform:rotate(-11deg)}.route-one{top:45px;left:-62px}.route-two{top:160px;left:-70px;transform:rotate(8deg);border-width:2px}.preview-zone{position:absolute;right:102px;top:56px;width:160px;height:118px;border:1px dashed #bd6f5c;background:rgba(207,112,90,.1);clip-path:polygon(18% 0,86% 13%,100% 64%,56% 100%,0 72%,3% 23%)}.preview-pin{position:absolute;width:12px;height:12px;border:3px solid #f7faf6;border-radius:50%;box-shadow:0 0 0 4px rgba(48,94,82,.17)}.pin-safe{left:26%;top:38%;background:#4cae7b}.pin-watch{left:47%;top:65%;background:#c59b4c}.pin-risk{right:24%;top:41%;background:#ce6c65;box-shadow:0 0 0 7px rgba(206,108,101,.16)}.preview-label{position:absolute;left:24px;bottom:21px;color:#34564f;font-size:15px;font-weight:720;letter-spacing:-.02em}.preview-label small{font-size:10px;font-weight:500}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e2e8e1}.preview-metrics div{padding:15px 16px;border-left:1px solid #e2e8e1}.preview-metrics div:first-child{border-left:0}.preview-metrics small,.preview-metrics em{display:block;color:#758681;font-size:9px;font-style:normal}.preview-metrics strong{display:block;margin:5px 0 3px;color:#27423d;font-size:18px;letter-spacing:-.04em}
.landing-features{padding:48px 0 70px;border-top:1px solid #dfe3d9}.landing-features h2{max-width:430px;margin:0;color:#213936;font-size:31px;line-height:1.12;letter-spacing:-.045em}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:35px}.feature-grid article{padding:21px 4px 0;border-top:2px solid #9bc1b6}.feature-grid article:nth-child(2){border-color:#e1c78e}.feature-grid article:nth-child(3){border-color:#b7cfcb}.feature-grid span{color:#78948d;font-size:10px;font-weight:800}.feature-grid h3{margin:16px 0 8px;color:#2b4540;font-size:16px;letter-spacing:-.02em}.feature-grid p{max-width:300px;margin:0;color:#687b76;font-size:12px;line-height:1.65}.landing-footer{display:flex;justify-content:space-between;width:min(1220px,calc(100% - 48px));margin:0 auto;padding:21px 0;color:#7b8d88;border-top:1px solid #dfe3d9;font-size:10px}
.brand{border:0;cursor:pointer;font-family:inherit;text-align:left}.app-shell .data-grid{gap:12px}.app-shell .data-card{min-height:93px;border-radius:9px;padding:15px}.app-shell .data-card b{font-size:24px;font-weight:680;letter-spacing:-.04em}.app-shell .section-pad{padding:16px}.app-shell .filter-row{padding-bottom:7px;border-bottom:1px solid #2b3b4b}.app-shell .data-table th{padding-top:9px;padding-bottom:10px}.app-shell .data-table td{padding-top:13px;padding-bottom:13px}.app-shell .timeline-item{font-size:10px;line-height:1.45}.app-shell .field label{color:#8ca0ad;font-weight:700;letter-spacing:.07em}.app-shell .modal-card{border-radius:11px}.app-shell .modal-head{background:#152330}.app-shell .toast{border-radius:8px}
body.light .app-shell .filter-row{border-bottom-color:#dde5e9}
.workspace-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:0 1px 18px;border-bottom:1px solid var(--line);margin-bottom:14px}.workspace-intro span{display:block;color:#9fb1bd;font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.workspace-intro p{margin:6px 0 0;color:#e7eef2;font-size:18px;font-weight:650;letter-spacing:-.025em}.workspace-intro small{padding:5px 8px;border:1px solid #355060;border-radius:999px;color:#8fa6b4;font-size:9px;white-space:nowrap}.range-tabs{display:flex;gap:5px}.range-tabs .chip{min-width:53px}.device-row{cursor:pointer;transition:background .16s ease}.device-row:focus-visible{outline:2px solid #75d3c8;outline-offset:-2px}.device-row:hover td{background:#1e3141!important}.light .workspace-intro p{color:#213942}.light .workspace-intro span{color:#637f8c}.light .workspace-intro small{border-color:#d4e1e6;color:#6f8590}.light .device-row:hover td{background:#edf4f5!important}
@media(max-width:900px){.landing-hero{grid-template-columns:1fr;gap:40px;padding:56px 0}.landing-copy{max-width:620px}.landing-preview{max-width:650px}.landing-features{padding-bottom:50px}}
@media(max-width:600px){.landing-nav,.landing-main,.landing-footer{width:min(100% - 30px,1220px)}.landing-nav{height:70px}.landing-link{display:none}.landing-hero{min-height:auto;padding:50px 0}.landing-copy h1{font-size:41px}.landing-description{font-size:14px}.landing-actions{align-items:flex-start;flex-direction:column;gap:17px}.landing-trust{flex-wrap:wrap;gap:16px;margin-top:34px}.landing-trust span{padding:0 12px}.landing-preview{margin-top:0}.preview-map{height:230px}.preview-metrics div{padding:12px 10px}.preview-metrics strong{font-size:15px}.landing-features{padding-top:39px}.feature-grid{grid-template-columns:1fr;gap:22px;margin-top:28px}.landing-footer{gap:8px;flex-direction:column}.landing-nav-actions{gap:10px}}

/* Mobile ergonomics: full-width flow, clear tap targets, and horizontally safe data views. */
@media(max-width:760px){
  html,body{min-width:0;overflow-x:hidden}
  button,.btn,.chip,.nav-item,.landing-primary,.landing-language{min-height:42px}
  .sidebar{width:min(286px,86vw);left:-310px;padding:18px 12px;box-shadow:14px 0 34px rgba(3,12,20,.28)}
  .sidebar.open{left:0}.brand{padding-bottom:17px}.pilot-badge{margin-bottom:13px}.nav-item{padding:11px}
  .topbar{height:66px;padding:9px 12px;gap:9px}.top-left{min-width:0;gap:8px}.topbar .eyebrow{display:none}.topbar h1{margin:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.top-actions{margin-left:auto;gap:5px}.top-actions .connection-chip,.top-actions .alerts-btn,.top-actions .user-pill{display:none}.top-actions .icon-btn{min-width:40px;height:40px;padding:0 8px}.mobile-menu{display:inline-grid;place-items:center;min-width:40px;height:40px}
  .content{padding:14px 12px 30px}.hero-strip{gap:17px;padding:17px;align-items:stretch}.hero-strip h2{font-size:23px;line-height:1.1}.hero-strip p{font-size:12px;line-height:1.55}.hero-meta{gap:7px 13px;font-size:9px}.hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;padding:0}.hero-actions .btn{width:100%;padding:11px 8px;font-size:10px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.kpi-card{min-height:86px;padding:12px}.kpi-value{font-size:23px}.kpi-foot{font-size:8px;line-height:1.35}
  .dashboard-grid,.bottom-grid,.subpage-grid,.analytics-grid{grid-template-columns:1fr;gap:10px}.health-panel{grid-column:auto}.panel{border-radius:9px}.panel-head{padding:13px}.panel-title{font-size:12px}.panel-sub{max-width:245px;line-height:1.4}.map-panel .panel-head{align-items:flex-start;flex-direction:column}.map-controls{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.chip{min-height:34px;padding:6px 4px;font-size:9px}.map-wrap svg{min-height:0!important;height:auto;aspect-ratio:1.55}.map-legend{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px;border-width:1px 0 0;border-radius:0;background:#14202c;font-size:9px}.map-legend span{white-space:nowrap}
  .incident-list{max-height:none}.incident-item{padding:13px}.incident-location{line-height:1.45}.sensor-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px}.sensor-summary div{padding:9px}.chart-canvas{height:170px}.chart-large{height:230px}.fusion-panel,.health-panel{min-height:0}.score-ring{width:84px;height:84px;font-size:20px}.health-metrics{padding:12px;gap:6px}
  .data-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.app-shell .data-card{min-height:82px;padding:12px}.app-shell .data-card b{font-size:21px}.filter-row{gap:6px}.search-box{width:100%;min-width:0;height:42px}.table-wrap{margin:0 -2px;overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{min-width:640px}.data-table th,.data-table td{padding:11px 10px}.sensor-card-grid{grid-template-columns:1fr}.section-pad{padding:13px}.field input,.field select,.field textarea{font-size:16px;padding:11px}.alert-composer .btn{width:100%}
  .modal{align-items:flex-end}.modal-card{width:100vw;max-height:90vh;border-radius:14px 14px 0 0}.modal-head{padding:15px}.modal-head h3{font-size:18px}.modal-grid{padding:12px;gap:12px}.evidence-scene{height:210px}.detail-stat-grid{gap:6px}.detail-stat-grid div{padding:9px}.modal-actions{display:grid;grid-template-columns:1fr}.modal-actions .btn{width:100%}.toast-stack{right:10px;left:10px;bottom:10px}.toast{min-width:0;max-width:none}
}
@media(max-width:390px){
  .landing-nav,.landing-main,.landing-footer{width:calc(100% - 24px)}.landing-copy h1{font-size:36px}.landing-primary{width:100%;text-align:left}.landing-trust{display:grid;grid-template-columns:1fr 1fr;gap:13px}.landing-trust span{padding:0;border:0}.landing-preview{border-radius:9px}.preview-top{padding:0 12px}.preview-map{height:200px}.preview-metrics{grid-template-columns:1fr 1fr}.preview-metrics div:first-child{grid-column:1/-1;border-bottom:1px solid #e2e8e1}.preview-metrics div:nth-child(2){border-left:0}.preview-metrics strong{font-size:16px}
  .hero-actions{grid-template-columns:1fr}.kpi-grid,.data-grid{grid-template-columns:1fr}.map-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.map-legend{grid-template-columns:repeat(2,1fr)}.topbar h1{max-width:155px}.top-actions .icon-btn{min-width:36px}
}

/* Accessibility and readability baseline shared by every workspace page. */
.app-shell{font-size:15px}
.panel-title{font-size:13px}
.panel-sub{font-size:11px;line-height:1.5}
.kpi-label,.data-card small{font-size:10px}
.kpi-foot,.metric-note{font-size:10px;line-height:1.45}
.data-table{font-size:12px}
.data-table th{font-size:10px}
.field label{font-size:11px}
.text-btn{font-size:11px}
.btn{font-size:12px}
.chip{font-size:10px}
.workspace-intro p{font-size:18px;line-height:1.45}
.skip-link{position:fixed;left:12px;top:8px;z-index:100;color:#fff;background:#176e62;border-radius:6px;padding:9px 12px;font-size:12px;font-weight:700;transform:translateY(-140%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #1b9e91;outline-offset:3px}
button,.chip,.text-btn,.nav-item,.device-row{min-height:34px}
.muted{color:#62786f}
.field label{font-size:11px;font-weight:700;letter-spacing:.04em}
.field input,.field select,.field textarea{min-height:40px;line-height:1.4}
.data-table th{font-weight:800}
.data-table td{line-height:1.45}
.panel-sub,.metric-note,.workspace-intro small{font-size:11px}
.workspace-intro p{font-size:18px;line-height:1.45}
body.light .muted{color:#536d63}
body.light .data-table th{color:#4d675d}
body.light .data-table td{color:#243b32}
body.light .panel-sub,body.light .metric-note{color:#587269}
body.light .field label{color:#36594d}
body.light .skip-link{background:#126d61}
body:not(.light) .skip-link{background:#65c9c0;color:#10212a}
body.light .map-wrap{background:#eaf2ef}
body.light .map-wrap svg{filter:none!important}
body.light #threatMap .map-background{fill:#f8fbfa!important}
body.light #threatMap .map-grid-line{stroke:#cbded7!important}
body.light #threatMap .map-route-primary{stroke:#75ad9f!important}
body.light #threatMap .map-route-secondary{stroke:#c8ddd7!important}
body.light #threatMap .map-route-tertiary{stroke:#9fc2b7!important}
body.light #threatMap .map-labels{fill:#4d7066!important}
body.light #threatMap .map-risk-label{fill:#a34f4d!important}
body.light #threatMap .map-gateway-label{fill:#315c52!important}
body.light #threatMap .map-coordinate-label{fill:#217e72!important}
body.light #threatMap .map-note-label{fill:#6d8d83!important}
body.light #threatMap #nodesLayer .node-core{stroke:#fff!important}
body.light #threatMap #incidentLayer text{fill:#38534c!important}
body.light #threatMap #incidentLayer circle[stroke]{stroke:#fff!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

@media(max-width:760px){.workspace-intro{align-items:flex-start;flex-direction:column;gap:8px;padding-bottom:13px;margin-bottom:11px}.workspace-intro p{font-size:16px;line-height:1.3}.workspace-intro small{font-size:8px}.range-tabs{width:100%}.range-tabs .chip{flex:1}.device-row td:first-child{font-weight:700}}

/* Default application theme: light, calm and practical for day-to-day operations. */
.brand{background:transparent;color:inherit}
body.light{--bg:#f5f7f5;--bg2:#ffffff;--panel:#ffffff;--panel2:#f7faf8;--line:#dce6e1;--text:#1d302c;--muted:#657a73;--dim:#8a9a94;--mint:#187d70;--green:#248f68;--yellow:#a87922;--orange:#b96936;--red:#bd5d61;--blue:#4c7fa2;--shadow:0 10px 24px rgba(38,66,56,.06);background:#f5f7f5;color:#1d302c}
.light .app-shell{background:#f5f7f5}.light .sidebar{background:#ffffff;border-right:1px solid #e1e9e5;box-shadow:none}.light .brand{background:transparent}.light .brand-mark{background:#2c9587;color:#fff}.light .brand-name{color:#1d302c}.light .brand-sub{color:#779087}.light .pilot-badge{background:#f4faf7;border-color:#d7e7df}.light .pilot-badge strong{color:#24433b}.light .pilot-badge small{color:#6e847c}.light .nav-item{color:#5e746d}.light .nav-item:hover{background:#f2f7f4;color:#23423a}.light .nav-item.active{background:#e8f5f0;border-color:#d0e8df;color:#176e62}.light .nav-icon{opacity:.75}.light .nav-count{background:#fceced;border-color:#f3c8cb;color:#ad4f55}.light .mini-card{background:#f7faf8;border-color:#dce8e2}.light .mini-label,.light .side-meta{color:#81958d}.light .status-line{color:#36554b}
.light .topbar{background:rgba(245,247,245,.94);border-bottom:1px solid #e0e8e3;backdrop-filter:blur(12px)}.light .eyebrow{color:#6a897e}.light .topbar h1{color:#1d302c}.light .connection-chip,.light .alerts-btn,.light .icon-btn{background:#fff;border-color:#d7e3dd;color:#4d675e}.light .connection-chip:hover,.light .alerts-btn:hover,.light .icon-btn:hover{border-color:#9bcbbd;background:#f3faf7}.light .avatar{background:#e0f0ea;border-color:#b7d9cd;color:#216f64}.light .user-pill{border-left-color:#dae5df}.light .user-meta b{color:#26433a}.light .user-meta span{color:#789087}
.light .content{max-width:1540px}.light .hero-strip{background:linear-gradient(115deg,#ebf6f1,#f5f8f5 70%);border-color:#d7e9e1;box-shadow:none}.light .hero-kicker{color:#468174}.light .hero-kicker-dot{background:#298f80}.light .hero-strip h2{color:#1e3932}.light .hero-strip p,.light .hero-meta{color:#647c73}.light .btn-primary{background:#258d7f;border-color:#258d7f;color:#fff}.light .btn-primary:hover{background:#197466}.light .btn-ghost{background:#fff;border-color:#cbdcd4;color:#31564c}.light .btn-ghost:hover{background:#f1f7f4}
.light .kpi-card{background:#fff;border-color:#dee8e3;box-shadow:0 5px 14px rgba(42,69,58,.035)}.light .kpi-card:hover{border-color:#bdd8cd}.light .kpi-label{color:#72877f}.light .kpi-value{color:#213a33}.light .kpi-foot{color:#768c84}.light .good{color:#287c5d}.light .warn{color:#9b7023}.light .danger-text{color:#b65358}
.light .panel{background:#fff;border-color:#dee8e3;box-shadow:0 5px 14px rgba(42,69,58,.035)}.light .panel-head{border-bottom-color:#e6ede9}.light .panel-title{color:#2a463d}.light .panel-sub{color:#799087}.light .text-btn{color:#187d70}.light .text-btn:hover{color:#125f55}.light .chip{background:#fff;border-color:#d5e2dc;color:#617970}.light .chip.active{background:#e7f4ef;border-color:#b8dace;color:#216f63}.light .map-wrap{background:#ebf1ee}.light .map-wrap svg{filter:saturate(.52) brightness(1.17)!important}.light .map-legend{background:rgba(255,255,255,.94);border-color:#dce7e1;color:#537068}.light .incident-item{border-bottom-color:#e7eeea}.light .incident-item:hover{background:#f4f9f6}.light .confidence-mini{background:#e0ebe5}.light .confidence-mini i,.light .bar i,.light .tiny-bar i{background:#3c9f91}.light .sensor-summary div,.light .health-metrics div,.light .data-card{background:#f8fbf9;border-color:#e0e9e4}.light .bar,.light .tiny-bar,.light .gauge{background:#e3ece7}.light .score-ring{background:radial-gradient(circle at center,#fff 55%,transparent 56%),conic-gradient(#c26265 0 91%,#e3ece7 91% 100%)}.light .severity-box.critical{background:#fff3f2;border-color:#f0d1d1}.light .severity-box.critical span{color:#ae4e55}.light .severity-box.critical small{color:#9a6b6b}.light .data-table th,.light .data-table td{border-bottom-color:#e5ede8}.light .data-table th{color:#7b9088}.light .data-table tr:hover td{background:#f3f8f5}.light .search-box,.light .field input,.light .field select,.light .field textarea{background:#fff;border-color:#d4e1da;color:#27433a}.light .modal-card{background:#fff;border-color:#dbe7e1}.light .modal-head{background:#f6faf8}.light .evidence-card{background:#f5f8f6;border-color:#dce7e1}.light .toast{background:#fff;border-color:#dce7e1;box-shadow:0 12px 26px rgba(34,58,48,.12)}.light .workspace-intro{border-bottom-color:#dfe9e4}.light .workspace-intro p{color:#234239}.light .workspace-intro span{color:#6d897e}.light .workspace-intro small{border-color:#d4e4dc;color:#738a81}.light .device-row:hover td{background:#f3f9f6!important}