:root{--bg:#050a12;--panel:#081726;--panel2:#0b1c2c;--border:#1b3449;--text:#e8f3ff;--muted:#86a0b6;--blue:#16a3ff;--green:#00e676;--yellow:#ffb703;--red:#ff443d;--cyan:#1de9ff;--purple:#bd38f5;--sidebar:250px;--gap:clamp(10px, 1vw, 16px);--radius:12px}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-width:0;max-width:100%;margin:0;overflow-x:hidden}body{min-height:100vh;color:var(--text);background:radial-gradient(circle at 50% -20%,#123655 0,#050a12 45%,#02050a 100%);font-family:Inter,Segoe UI,Arial,sans-serif}button,select,input{font:inherit;max-width:100%}svg,canvas,img,video{max-width:100%}.app{grid-template-columns:var(--sidebar) minmax(0, 1fr);width:100%;min-width:0;min-height:100vh;display:grid}.sidebar{width:var(--sidebar);border-right:1px solid var(--border);background:linear-gradient(#071521,#04101a);min-width:0;height:100vh;padding:18px;position:sticky;top:0;overflow:hidden auto}.brand{align-items:center;gap:12px;margin-bottom:28px;display:flex}.logo{color:var(--blue);flex:none;font-size:34px}h1{letter-spacing:.5px;margin:0;font-size:clamp(18px,1.4vw,22px)}.brand p,small{color:var(--muted);margin:2px 0 0}.side-section-title{color:#6f8ba3;text-transform:uppercase;margin-bottom:10px;font-size:12px}.nav-item{color:#c8d8e8;border-radius:8px;align-items:center;gap:10px;min-width:0;margin:3px 0;padding:11px 12px;font-size:14px;display:flex}.nav-item span{text-overflow:ellipsis;min-width:0;overflow:hidden}.nav-item.active{color:#fff;background:linear-gradient(90deg,#0e57a6,#0a2c4e)}.nav-item b{background:var(--red);border-radius:12px;flex:none;margin-left:auto;padding:2px 7px;font-size:11px}.side-card,.weather{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-top:18px;padding:16px}.select-row{border:1px solid var(--border);border-radius:7px;justify-content:space-between;margin:10px 0;padding:10px;display:flex}.dot{border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}.green{background:var(--green);color:var(--green)}.weather strong{font-size:28px;display:block}.weather span,.weather p{color:var(--muted)}.weather p{justify-content:space-between;align-items:center;font-size:13px;display:flex}main{width:100%;min-width:0;max-width:100%;padding:clamp(10px,1.1vw,18px);overflow-x:hidden}.topbar{color:#c9d9e8;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:clamp(8px,.9vw,16px);width:100%;min-width:0;max-width:100%;min-height:46px;margin-bottom:16px;display:flex;overflow:hidden}.topbar>*{min-width:0}.topbar button,.ai button{border:1px solid var(--border);color:var(--text);white-space:nowrap;background:#071523;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:10px 14px;display:inline-flex}.live{color:var(--green);white-space:nowrap;background:#052015;border:1px solid #0a5737;border-radius:8px;padding:8px 14px}.live span{background:var(--green);border-radius:50%;width:8px;height:8px;margin-right:7px;display:inline-block}.avatar{background:#31475d;border-radius:50%;flex:none;padding:10px}.topbar small{display:block}.kpis{gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));width:100%;min-width:0;display:grid}.kpi,.panel{border:1px solid var(--border);background:linear-gradient(#0f2539f5,#071422f5);border-radius:10px;min-width:0;max-width:100%;box-shadow:0 10px 30px #00000040}.kpi{grid-template-columns:auto minmax(0,1fr);gap:14px;min-height:116px;padding:16px;display:grid;position:relative;overflow:hidden}.kpi-icon{color:var(--green);background:#06351f;border-radius:12px;height:46px;padding:10px}.kpi-icon.danger{color:var(--red);background:#34100f}.kpi p{color:#a8bdd0;margin:0;font-size:12px}.kpi strong{margin:7px 0;font-size:clamp(24px,2.2vw,32px);line-height:1.05;display:block}.kpi span{color:var(--green)}.red,.critical{color:var(--red)!important}.high{color:#ff9f1c!important}.medium{color:var(--yellow)!important}.low{color:var(--green)!important}.mini{opacity:.8;width:86px;height:30px;position:absolute;bottom:12px;right:12px}.grid.top{gap:var(--gap);margin-top:var(--gap);grid-template-columns:minmax(0,1.25fr) minmax(340px,.95fr);width:100%;min-width:0;display:grid}.grid.top>*,.rightcol,.twocol,.bottom,.charts,.systems{min-width:0}.panel{padding:clamp(12px,1vw,16px);overflow:hidden}.panel-title,.panel h2{letter-spacing:.3px;margin:0 0 14px;font-size:15px}.panel-head{justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex}.panel-head a{color:var(--blue);white-space:nowrap;font-size:13px}.legend{color:#b8c9d8;flex-wrap:wrap;gap:clamp(10px,2vw,22px);font-size:12px;display:flex}.legend i{border-radius:2px;width:10px;height:10px;margin-right:6px;display:inline-block}.blue{background:var(--blue)}.yellow{background:var(--yellow)}.redbg{background:var(--red)}.tunnel{background:linear-gradient(#0f2436,#081522 50%,#050a10);border:1px solid #284158;border-radius:16px;height:clamp(210px,18vw,270px);margin-top:15px;position:relative;overflow:hidden}.tunnel:before{content:"";background:repeating-linear-gradient(90deg,#ffffff12 0 1px,#0000 1px 55px),linear-gradient(#ffffff14,#0000002e);border:2px solid #6688a3;border-radius:120px/70px;height:54%;position:absolute;top:22%;left:4%;right:4%;box-shadow:inset 0 0 35px #000c}.road{background:#182431;border-top:1px solid #495867;height:22%;position:absolute;top:55%;left:6%;right:6%;transform:skew(-4deg)}.portal{border:2px solid #708aa4;border-radius:50%;width:65px;height:56%;position:absolute;top:21%}.portal.left{left:3%}.portal.right{right:3%}.car{z-index:2;background:#d7e4ef;border-radius:12px;width:60px;height:20px;position:absolute;top:62%}.c1{left:17%}.c2{background:#91a4b3;right:20%}.sensor{z-index:3;background:var(--green);width:14px;height:14px;box-shadow:0 0 10px var(--green);border-radius:50%;place-items:center;font-size:9px;display:grid;position:absolute}.sensor.warn{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}.sensor.critical{background:var(--red);box-shadow:0 0 12px var(--red);width:17px;height:17px}.sensor.camera{background:var(--blue);box-shadow:0 0 10px var(--blue);border-radius:4px}.scale{color:#c9d7e5;justify-content:space-between;font-size:12px;display:flex;position:absolute;bottom:18px;left:4%;right:4%}.systems{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:12px;display:grid}.sys{border:1px solid var(--border);color:var(--green);background:#0b1b2b;border-radius:8px;min-width:0;padding:12px}.sys span{color:#cbd9e6;font-size:12px;display:block}.sys b{font-size:12px}.charts{grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:12px;display:grid}.chart-card{border:1px solid var(--border);background:#071725;border-radius:9px;min-width:0;padding:12px}.chart-card h3{margin:0 0 5px;font-size:12px}.chart-card p{color:#a9bed0;margin:0;font-size:12px}.chart-card small{float:right;color:var(--green)}.rightcol{flex-direction:column;gap:12px;display:flex}.twocol{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}table{border-collapse:collapse;width:100%;min-width:0;font-size:12px}tbody{min-width:0}td{color:#cbd9e6;overflow-wrap:anywhere;border-top:1px solid #ffffff12;max-width:220px;padding:11px 8px}td svg{vertical-align:-2px}.active-text{color:var(--red)}.ai p{color:#c8d6e3;font-size:13px}.ai button{color:#fff;background:#0b4585;margin-top:10px}.donut{position:relative}.donut-center{text-align:center;font-size:26px;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)}.donut-center small{font-size:12px;display:block}.camera-img{background:#101a23;border-radius:10px;height:clamp(150px,15vw,190px);position:relative;overflow:hidden}.camera-img span{background:var(--red);z-index:2;border-radius:4px;padding:4px 7px;font-size:12px;position:absolute;top:12px;right:12px}.tunnel-photo{filter:contrast(1.08);background:radial-gradient(circle at 50% 45%,#e3f5ff 0,#7a8d99 2%,#0000 5%),repeating-radial-gradient(at 50% 45%,#0000 0 30px,#ffffff1f 31px 33px),linear-gradient(#334252,#111922 58%,#07090d 59%);height:100%}.bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-top:12px;display:grid}.asset{border-top:1px solid #ffffff12;grid-template-columns:minmax(0,1fr) 70px minmax(0,1.3fr);gap:8px;padding:9px;font-size:13px;display:grid}.asset em{color:var(--green);font-style:normal}footer{color:#9db2c5;flex-wrap:wrap;gap:12px 30px;padding:16px 4px;font-size:12px;display:flex}footer span{margin-left:auto}footer b{color:var(--green)}h1,h2,h3,h4,h5,h6,p,span,div,button,a,td,th{overflow-wrap:anywhere}@media (width<=1500px){.grid.top,.bottom{grid-template-columns:minmax(0,1fr)}}@media (width<=1180px){:root{--sidebar:0px}.app{display:block}.sidebar{display:none}main{padding:12px}.topbar{justify-content:flex-start}}@media (width<=900px){.topbar{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));align-items:stretch;display:grid}.topbar>span{display:none}.topbar>svg,.avatar{place-self:center}.topbar>div:last-child{display:none}.topbar button,.live{width:100%}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.twocol{grid-template-columns:1fr}.systems{grid-template-columns:repeat(2,minmax(0,1fr))}.asset{grid-template-columns:1fr}}@media (width<=640px){main{padding:10px}.topbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:hidden}.topbar button,.live{min-width:0;padding:9px 10px;font-size:13px}.topbar>svg,.avatar{display:none}.kpis,.charts,.systems,.twocol,.bottom{grid-template-columns:1fr}.kpi{min-height:104px}.kpi strong{font-size:26px}.mini{width:70px}.tunnel{height:220px}.scale{font-size:10px;bottom:12px}.portal{width:42px}.car{width:42px;height:16px}td{padding:9px 6px;font-size:11px}footer span{margin-left:0}}@media (width<=430px){.topbar{grid-template-columns:1fr}.panel{padding:12px}.legend{gap:8px}.tunnel{height:200px}}