:root{--cyan:#22e9ff;--aqua:#27ffd4;--purple:#a855f7;--magenta:#e34bff;--bg:#04070d;--panel:rgba(8,22,39,.82);--line:rgba(34,233,255,.18);--text:#cfeefb;--muted:#88a9ba;--heading:#f1fdff}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100vh;color:var(--text);font-family:Rajdhani,"Segoe UI",system-ui,sans-serif;background:radial-gradient(ellipse 60% 50% at 50% 0,rgba(34,233,255,.12),transparent 62%),radial-gradient(ellipse 35% 40% at 90% 25%,rgba(168,85,247,.12),transparent 65%),#04070d}
a{color:var(--cyan);text-decoration:none}.shell{width:min(1180px,calc(100% - 36px));margin:auto;padding:22px 0 70px}.top{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(7,19,35,.82);position:sticky;top:10px;z-index:10;backdrop-filter:blur(14px)}.brand{font-family:Orbitron,"Segoe UI",sans-serif;font-weight:900;letter-spacing:.14em;color:var(--heading)}.tag{padding:5px 8px;border:1px solid rgba(39,255,212,.35);border-radius:999px;color:var(--aqua);font-size:11px;font-weight:900;letter-spacing:.1em}.nav{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}.nav a{padding:7px 9px;border:1px solid transparent;border-radius:8px;color:#bdd9e4;font-weight:750}.nav a:hover,.nav a.active{border-color:var(--line);background:rgba(34,233,255,.06);color:var(--aqua)}.hero{padding:72px 0 36px}.eyebrow{color:var(--aqua);font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}.hero h1{max-width:15ch;margin:12px 0 18px;font-family:Orbitron,"Segoe UI",sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.05;color:var(--heading)}.lead{max-width:70ch;color:#c4e1eb;font-size:1.12rem}.notice{margin-top:22px;padding:14px 16px;border:1px solid rgba(255,196,97,.28);border-radius:11px;background:rgba(255,196,97,.055);color:#d8c7a4}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{padding:24px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(10,27,46,.88),rgba(5,15,28,.88));box-shadow:0 22px 60px rgba(0,0,0,.35)}.card h2,.card h3{margin:0 0 10px;color:var(--heading)}.status{display:flex;align-items:center;gap:8px;color:var(--aqua);font-weight:900}.dot{width:9px;height:9px;border-radius:50%;background:var(--aqua);box-shadow:0 0 10px var(--aqua)}.rows{margin-top:17px}.row{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--line)}.row span:first-child{color:var(--muted);font-weight:800}.row span:last-child{color:var(--heading)}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.camera{overflow:hidden;padding:0}.camera-view{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(circle at 50% 45%,rgba(34,233,255,.12),transparent 38%),linear-gradient(135deg,#061426,#040812)}.camera-view:before{content:"SIMULATED CAMERA STATUS · NO LIVE VIDEO";padding:8px 11px;border:1px solid rgba(34,233,255,.25);border-radius:8px;color:rgba(207,238,251,.7);font:800 10px/1 Orbitron,"Segoe UI",sans-serif;letter-spacing:.12em}.camera-view:after{content:"";position:absolute;inset:14px;border:1px solid rgba(34,233,255,.12);border-radius:10px}.camera-info{padding:17px 19px;display:flex;justify-content:space-between;gap:18px}.camera-info small{display:block;color:var(--muted)}.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}.node{padding:18px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(8,22,39,.7);text-align:center;position:relative}.node:not(:last-child):after{content:"→";position:absolute;right:-10px;top:50%;transform:translate(50%,-50%);color:var(--aqua);font-weight:900}.node strong{display:block;color:var(--heading)}.node span{display:block;margin-top:6px;color:var(--muted);font-size:.88rem}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;padding:10px 14px;border:1px solid rgba(34,233,255,.34);border-radius:9px;background:rgba(34,233,255,.055);color:var(--cyan);font-weight:900}.btn.primary{border:0;color:#00151a;background:linear-gradient(100deg,var(--cyan),var(--aqua))}
@media(max-width:850px){.grid,.camera-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.node:not(:last-child):after{content:"↓";right:auto;left:50%;top:auto;bottom:-13px;transform:translate(-50%,50%)}.top{align-items:flex-start;flex-wrap:wrap}.nav{width:100%;margin-left:0}.row{grid-template-columns:1fr}.hero{padding-top:48px}}