:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e9f0f4;background:#101a22;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#101a22}button,input{font:inherit}button{color:inherit;cursor:pointer}.app-shell{min-height:100vh;background:#101a22}.topbar{height:62px;border-bottom:1px solid #2b3b45;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#13202a;position:sticky;top:0;z-index:5}.brand{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:1.3px;font-weight:700}.brand b{color:#62ddb7;font-weight:600}.brand-mark{background:#1d514f;color:#78efd0;width:31px;height:31px;display:grid;place-items:center;border-radius:4px}.topbar-center{color:#9cabb3;font-size:12px;display:flex;align-items:center;gap:10px}.live-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:#62ddb7;display:inline-block;box-shadow:0 0 0 3px #194b47}.divider{height:15px;width:1px;background:#42515a}.top-actions{display:flex;align-items:center;gap:12px}.icon-button,.nav-button{background:transparent;border:0;display:grid;place-items:center}.icon-button{width:32px;height:32px;color:#a9b9c0;border-radius:4px}.icon-button:hover,.icon-button.active{background:#243640;color:#fff}.profile{background:transparent;color:#a9b9c0;border:0;display:flex;gap:5px;align-items:center;font-size:12px}.sidebar{position:fixed;top:62px;bottom:0;width:64px;border-right:1px solid #2b3b45;background:#13202a;display:flex;justify-content:space-between;flex-direction:column;padding:17px 0}.nav-stack,.sidebar-bottom{display:grid;gap:9px;justify-content:center}.nav-button{width:39px;height:39px;color:#71848e;border-radius:4px}.nav-button:hover,.nav-button.selected{color:#7aefd0;background:#1d4647}.workspace{margin-left:64px;padding:31px 34px 42px;max-width:1660px}.view-header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:24px}.eyebrow{margin:0 0 6px;color:#6f8791;font-size:10px;letter-spacing:1.25px;font-weight:750}.view-header h1{margin:0;font-size:25px;letter-spacing:0}.header-controls{display:flex;gap:9px;align-items:center}.mode-toggle,.command-button{border:1px solid #39505a;background:#192b35;border-radius:4px;height:35px;padding:0 11px;font-size:12px;display:flex;align-items:center;gap:7px}.mode-toggle span{width:7px;height:7px;background:#80929c;border-radius:50%}.mode-toggle.on span{background:#ffb04b}.command-button:hover{border-color:#62ddb7}.dashboard-grid{display:grid;grid-template-columns:minmax(500px,1fr) 350px;gap:20px}.feed-frame{min-height:435px;border:1px solid #354751;background:#162630;position:relative;overflow:hidden;border-radius:6px}.feed-frame.expanded{position:fixed;z-index:10;top:82px;right:95px;bottom:82px;left:95px;min-height:0}.feed-top,.feed-bottom{position:absolute;z-index:2;left:0;right:0;padding:13px 15px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.7px;font-weight:700;background:linear-gradient(#0f1920c9,transparent)}.feed-top>span{display:flex;gap:7px;align-items:center}.recording{color:#ff7382}.recording i{height:7px;width:7px;background:#ff6676;border-radius:50%}.feed-bottom{bottom:0;background:linear-gradient(transparent,#0f1920d9);color:#c3d0d5;align-items:end}.feed-bottom span{display:flex;gap:6px;align-items:center}.demo-feed{height:100%;min-height:435px;background:linear-gradient(#586e78,#71909b 50%,#283b36 51%,#1c2928);position:relative;overflow:hidden}.mountains{position:absolute;inset:19% -4% auto;height:36%;background:#3e5656;clip-path:polygon(0 70%,14% 25%,25% 60%,38% 0,57% 69%,72% 25%,100% 78%,100% 100%,0 100%);opacity:.8}.fence{position:absolute;top:53%;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent 0 41px,#253936 42px 45px),repeating-linear-gradient(0deg,transparent 0 33px,#3d5750 34px 36px);opacity:.7;transform:perspective(300px) rotateX(20deg)}.person-box,.vehicle-box{position:absolute;border:2px solid #37d1e8;width:7%;height:24%;left:41%;top:43%}.person-box:after{content:"";position:absolute;background:#1e2629;width:58%;height:55%;left:21%;bottom:0;border-radius:40% 40% 5px 5px}.demo-feed span{position:absolute;top:-22px;left:-2px;background:#37d1e8;color:#092128;padding:4px 6px;font-size:10px;font-weight:800;white-space:nowrap}.vehicle-box{border-color:#ffbb56;width:19%;height:13%;left:65%;top:59%}.vehicle-box:after{content:"";background:#272d2e;position:absolute;top:28%;right:7%;bottom:0;left:7%;border-radius:8px 8px 2px 2px}.vehicle-box span{background:#ffbb56}.zone-tag{position:absolute;z-index:2;bottom:43px;left:16px;background:#132c2cdb;border:1px solid #4b8f80;color:#7fe8ce;padding:6px 8px;font-size:10px;display:flex;align-items:center;gap:5px}.expand-button{position:absolute;right:14px;bottom:42px;z-index:2;background:#13202ac9;border:1px solid #576d76;width:31px;height:30px;border-radius:3px;display:grid;place-items:center}.stream{object-fit:cover;display:block;width:100%;height:100%;min-height:435px}.camera-strip{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:9px;margin-top:10px}.camera-card{min-width:0;color:#aab9be;display:flex;gap:9px;padding:8px;text-align:left;border:1px solid #31434d;background:#172731;border-radius:4px}.camera-card.active{border-color:#5cdbba;background:#193534}.camera-preview{height:33px;width:45px;flex:none;background:linear-gradient(140deg,#6d9297,#274643);position:relative}.camera-preview .status-dot{position:absolute;right:4px;top:4px;width:5px;height:5px;box-shadow:none}.camera-card strong{font-size:11px}.camera-card p{margin:2px 0 0;font-size:10px;color:#758994;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-camera{border:1px dashed #40545e;border-radius:4px;background:transparent;color:#8498a1;min-width:97px;font-size:11px}.add-camera span{color:#7de4cb;font-size:17px;vertical-align:-1px}.metrics{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{min-width:0;border-left:2px solid #344a55;background:#15242d;padding:11px;display:flex;gap:9px;align-items:center}.metric-icon{display:grid;place-items:center}.metric-icon.red{color:#fa7180}.metric-icon.green{color:#64dcb9}.metric-icon.blue{color:#62b6ed}.metric-icon.yellow{color:#f5b758}.metric p{margin:0 0 3px;font-size:10px;color:#81949d}.metric strong{font-size:18px}.alert-panel,.panel{border:1px solid #30434d;background:#14232c;border-radius:6px}.alert-panel{min-height:570px;display:flex;flex-direction:column}.alert-header,.panel-header{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2a3c46}.alert-header h2,.panel-header h2{margin:0;font-size:16px}.alert-header h2 span{color:#6f8791;font-size:12px;font-weight:500}.search{margin:12px;height:33px;border:1px solid #344852;background:#101d25;display:flex;align-items:center;padding:0 9px;gap:7px;color:#7f929b}.search input{min-width:0;border:0;outline:0;background:transparent;color:#e7eff2;width:100%;font-size:12px}.alert-list{overflow-y:auto;max-height:490px}.alert-card{border:0;border-bottom:1px solid #293a43;background:transparent;width:100%;padding:13px 15px;display:flex;gap:10px;text-align:left}.alert-card:hover,.alert-card.selected{background:#1d323b}.alert-signal{color:#fb7080;padding-top:2px}.alert-signal.medium{color:#f3bb59}.alert-content{min-width:0}.alert-content strong{font-size:11px;letter-spacing:.6px}.alert-content p{margin:4px 0;font-size:12px;color:#b7c6cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alert-content small{color:#748993;font-size:10px}.alert-content small i{display:inline-block;margin:0 5px;width:3px;height:3px;background:#6f818a;border-radius:50%;vertical-align:middle}.lower-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:20px}.text-button{color:#7de1c6;border:0;background:transparent;font-size:12px}.rule-row{display:flex;gap:11px;align-items:center;padding:13px 16px;border-bottom:1px solid #293b44}.rule-row>div:nth-child(2){flex:1}.rule-row strong{font-size:12px}.rule-row p,.incident-copy p{margin:3px 0 0;color:#8398a2;font-size:11px}.rule-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:4px}.rule-icon.teal{background:#1b4a45;color:#7ce7cf}.rule-icon.orange{background:#514126;color:#ffc266}.pill,.severity{padding:4px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;font-size:9px}.pill.enabled{color:#78ddc2;background:#1c4744}.stepper{display:flex;border:1px solid #3a5058;height:29px}.stepper button,.stepper span{width:26px;display:grid;place-items:center;border:0;background:transparent;color:#d8e3e7}.stepper button:hover{background:#27404a}.stepper span{border-left:1px solid #3a5058;border-right:1px solid #3a5058;font-size:12px}.severity.high{color:#ff909a;background:#4c2730}.severity.medium{color:#f4c26d;background:#514024}.incident-copy{padding:15px 16px}.incident-copy>div{display:flex;gap:13px;margin:16px 0;color:#93a5ad;font-size:11px}.primary{background:#2d8e7d;border-color:#47b7a1;color:#fff}.primary:hover{background:#39a38f}@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr}.alert-panel{min-height:0}.alert-list{max-height:240px}.lower-grid{grid-template-columns:1fr}}@media(max-width:720px){.topbar{padding:0 14px}.topbar-center,.sidebar{display:none}.workspace{margin-left:0;padding:23px 15px}.view-header{align-items:start;flex-direction:column}.dashboard-grid{display:block}.feed-frame,.demo-feed{min-height:295px}.camera-strip{grid-template-columns:1fr 1fr}.camera-card:nth-child(3),.add-camera{display:none}.metrics{grid-template-columns:1fr 1fr}.alert-panel{margin-top:16px}.incident-copy>div{flex-wrap:wrap}.feed-frame.expanded{top:70px;right:12px;bottom:70px;left:12px}}.camera-connect{border:1px solid #31535a;background:#172c31;border-left:3px solid #64dcb9;padding:11px 13px;margin:-8px 0 20px;display:grid;grid-template-columns:1fr minmax(240px,390px) auto;gap:14px;align-items:center;border-radius:5px}.connect-label{display:flex;align-items:center;gap:10px}.connect-label>span{color:#78efd0}.connect-label strong{font-size:12px}.connect-label p{margin:2px 0 0;color:#8ba1a8;font-size:10px}.camera-connect label{height:34px;background:#0f1d24;border:1px solid #3e5960;display:flex;align-items:center;padding:0 9px;gap:7px;color:#70dec2}.camera-connect input{min-width:0;width:100%;color:#dbe7e9;background:transparent;border:0;outline:0;font-size:12px}.camera-connect button:disabled{opacity:.6;cursor:wait}@media(max-width:820px){.camera-connect{grid-template-columns:1fr;gap:9px}.camera-connect .command-button{justify-content:center}}
