*{box-sizing:border-box}:root{--bg:#061216;--panel:#0b1c21;--panel2:#10252b;--border:#244048;--text:#eef7f7;--muted:#8da4aa;--green:#16e29a;--green2:#00b879;--red:#ff5158;--yellow:#ffba43}body,html{margin:0;padding:0;min-height:100%;background:#061216;color:var(--text);font-family:Arial,Helvetica,sans-serif}body{min-height:100vh}button,input{font:inherit}.shell{min-height:100vh;display:flex;background:radial-gradient(circle at 75% 5%,rgba(0,196,142,.07),transparent 25%),#061216}.sidebar{width:230px;position:fixed;inset:0 auto 0 0;padding:22px 14px;background:linear-gradient(180deg,#07171b,#061115);border-right:1px solid #1d3a40;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:0 10px 28px}.brandMark{font-size:38px;font-weight:900;font-style:italic;color:var(--green);text-shadow:0 0 24px rgba(22,226,154,.35)}.brand strong{display:block;font-size:26px}.brand span{color:#aac0c5;font-size:14px}.navItem{height:49px;display:flex;align-items:center;gap:13px;padding:0 14px;margin:5px 0;border-radius:9px;color:#a9bcc1}.navItem.active{color:#fff;background:linear-gradient(90deg,rgba(0,182,125,.52),rgba(0,128,92,.2));border:1px solid rgba(21,226,154,.25);box-shadow:inset 3px 0 var(--green)}.navIcon{width:25px;text-align:center;font-size:21px}.navItem.active .navIcon{color:var(--green)}.badge{margin-left:auto;background:var(--red);color:#fff;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:11px}.sidebarBottom{position:absolute;left:25px;right:25px;bottom:28px;color:#789096}.sidebarBottom small,.sidebarBottom span{display:block;letter-spacing:2px;line-height:1.7}.sidebarBottom span{font-size:10px}.sidebarBottom small{font-size:8px}.wave{height:55px;margin-bottom:15px;border-bottom:1px solid rgba(22,226,154,.25)}.workspace{margin-left:230px;flex:1 1;min-width:0}.header{min-height:68px;border-bottom:1px solid #1c373d;justify-content:space-between;padding:0 24px;color:#9bb0b5}.header,.headerLinks{display:flex;align-items:center}.headerLinks{gap:14px;font-size:12px}.headerRight{display:flex;align-items:center;gap:13px}.search{width:310px;border:1px solid #2b4249;border-radius:9px;padding:10px 13px;font-size:11px;color:#83979d;background:#081519}.notification{position:relative}.notification b{position:absolute;top:-10px;right:-10px;width:16px;height:16px;place-items:center;background:var(--red);color:#fff;font-size:9px}.avatar,.notification b{display:grid;border-radius:50%}.avatar{width:38px;height:38px;place-items:center;background:#37685f;font-size:12px}.user span,.user strong{display:block}.user strong{font-size:12px}.user span{font-size:10px;color:#83969c;margin-top:3px}.content{padding:14px 20px 28px}.statsRow{display:grid;grid-template-columns:repeat(4,1fr) .95fr;grid-gap:12px;gap:12px;margin-bottom:13px}.statCard,.systemOnline{min-height:105px;border:1px solid var(--border);border-radius:10px;padding:17px;background:linear-gradient(135deg,#10252b,#0a1a1f)}.statCard{display:flex;align-items:center;gap:13px}.statIcon{width:47px;height:47px;flex:none;display:grid;place-items:center;border-radius:10px;color:var(--green);background:rgba(12,215,151,.08);font-size:26px}.statBody{flex:1 1}.statBody span,.statBody strong{display:block}.statBody span{font-size:12px}.statBody strong{font-size:24px;margin:5px 0}.statCard small{color:var(--green);font-size:10px}.statCard.red .statIcon,.statCard.red small{color:var(--red)}.progress{height:4px;background:#253a40;border-radius:99px}.progress i{display:block;width:90%;height:100%;border-radius:99px;background:var(--green)}.statCard.red .progress i{width:45%;background:var(--red)}.systemOnline{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#0d493d,#102a29)}.systemOnline span,.systemOnline strong{display:block}.systemOnline strong{font-size:14px}.systemOnline span{font-size:9px;color:#a0b9b3;margin-top:5px}.onlinePulse{width:19px;height:19px;border-radius:50%;background:#38efa9;box-shadow:0 0 0 8px rgba(56,239,169,.09),0 0 20px rgba(56,239,169,.5)}.panel{background:#09191e;border:1px solid var(--border);border-radius:10px;overflow:hidden}.panelHeader{min-height:45px;padding:0 14px;justify-content:space-between;border-bottom:1px solid #203940}.panelHeader,.panelHeader>div{display:flex;align-items:center}.panelHeader>div{gap:9px}.panelHeader strong{font-size:13px}.panelHeader button{border:0;background:transparent;color:#4edbc5;font-size:10px;cursor:pointer}.sectionIcon{color:var(--green);font-size:18px}.cameraPanel{margin-bottom:13px}.cameraGrid{padding:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;gap:10px}.camera{height:165px;position:relative;overflow:hidden;border-radius:7px;border:1px solid #2c4a51;background:#102126}.cameraScene{position:absolute;inset:0;background:radial-gradient(circle at 72% 30%,rgba(255,224,150,.2),transparent 18%),linear-gradient(150deg,#31403f 0 22%,#182528 23% 47%,#3b4b4d 48% 55%,#111b1e 56%)}.road{left:-10%;right:-10%;bottom:-24%;height:70%;background:repeating-linear-gradient(90deg,#354547 0 10px,#2b3b3e 10px 20px)}.building,.road{position:absolute}.building{top:22%;right:5%;width:38%;height:44%;background:#3b494b;border-left:3px solid #dacb99}.gateVisual{position:absolute;width:32%;height:42%;bottom:14%;left:29%;background:repeating-linear-gradient(90deg,#141a1b 0 4px,#536063 4px 7px,#111718 7px 12px)}.cameraBottom,.cameraTop{position:absolute;left:7px;right:7px;z-index:2;display:flex;justify-content:space-between;align-items:center;font-size:9px}.cameraTop{top:7px}.cameraBottom{bottom:6px;text-shadow:0 1px 4px #000}.cameraTop span{background:rgba(0,0,0,.58)}.cameraTop b,.cameraTop span{padding:4px 7px;border-radius:99px}.cameraTop b{color:#4cf3b3;background:rgba(0,55,42,.8);font-size:8px}.liveDot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--green)}.twoColumns{display:grid;grid-template-columns:1.48fr 1fr;grid-gap:13px;gap:13px}.leftColumn,.rightColumn{display:flex;flex-direction:column;gap:13px}.gatesGrid{padding:11px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:11px;gap:11px}.gateCard{padding:14px;border:1px solid #29434a;border-radius:9px;background:linear-gradient(140deg,#10262c,#0b1b20)}.gateInfo{display:flex;align-items:center;gap:12px}.gateIcon{width:45px;color:#a9bcc5;font-size:34px}.gateInfo small,.gateInfo span,.gateInfo strong{display:block}.gateInfo strong{font-size:13px}.gateInfo span{font-size:10px;color:#55e8af;margin-top:6px}.gateInfo small{font-size:8px;color:#748b90;margin-top:4px}.onlineDot:before{content:"●";color:var(--green);margin-right:5px}.gateActions{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:9px;gap:9px;margin-top:14px}.gateActions button{padding:12px 5px;border:0;border-radius:6px;color:#fff;font-size:11px;font-weight:700;cursor:pointer}.openButton{background:linear-gradient(#14c982,#08a869)}.stopButton{background:#31434a}.closeButton{background:linear-gradient(#ff535b,#df353d)}.connectivity{min-height:205px}.connectGrid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;gap:10px;padding:12px}.connectCard{min-height:70px;padding:10px;display:flex;align-items:center;gap:10px;border:1px solid #29434a;border-radius:8px;background:#10252a}.connectCard>b{color:var(--green);font-size:26px}.connectCard span,.connectCard strong{display:block}.connectCard strong{font-size:11px}.connectCard span{font-size:8px;color:#49e3aa;margin-top:5px}.deviceStatus{padding:0 14px 13px;color:#849a9f}.deviceStatus small{font-size:8px}.statusBar{height:7px;display:flex;margin:8px 0}.statusBar i{width:72%;background:#28d898;border-radius:8px 0 0 8px}.statusBar em{width:13%;background:#6e8186}.statusBar b{width:15%;background:#f7b74b;border-radius:0 8px 8px 0}.statusLegend{display:flex;gap:16px;align-items:center;font-size:8px}.statusLegend strong{margin-left:auto;color:#b6c5c8}.alertsPanel,.events{font-size:10px}.alertRow,.eventRow{min-height:49px;display:grid;align-items:center;border-bottom:1px solid #1e373e}.eventRow{grid-template-columns:48px 35px 1fr 15px;padding:0 12px}.eventSymbol{width:25px;height:25px;display:grid;place-items:center;border:1px solid #148d68;border-radius:50%;color:var(--green)}.alertRow span,.alertRow strong,.eventRow span,.eventRow strong{display:block}.alertRow strong,.eventRow strong{font-size:9px}.alertRow span,.eventRow span{font-size:8px;color:#778d92;margin-top:3px}.alertSymbol{color:var(--red);font-size:19px}.alertRow{grid-template-columns:52px 1fr auto;padding:0 12px}.redTag,.yellowTag{padding:5px 11px;border-radius:99px;font-size:8px}.redTag{color:#ff7a7f;border:1px solid #8c3439;background:#32191b}.yellowTag{color:#ffc15c;border:1px solid #806122;background:#2e2818}@media(max-width:1200px){.statsRow{grid-template-columns:repeat(2,1fr)}.systemOnline{grid-column:span 2}.cameraGrid{grid-template-columns:repeat(2,1fr)}.twoColumns{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{width:74px}.badge,.brand>div:last-child,.navItem span:not(.navIcon),.sidebarBottom{display:none}.brand{padding-left:0}.brand,.navItem{justify-content:center}.navItem{padding:0}.workspace{margin-left:74px}.headerLinks,.user{display:none}.search{width:55vw}.cameraGrid,.connectGrid,.gatesGrid,.statsRow{grid-template-columns:1fr}.systemOnline{grid-column:auto}}