@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Share+Tech+Mono&display=swap');
:root{--bg:#070b0e;--panel:#0b1625;--line:#1f3852;--line2:#2d5a7d;--text:#ecf6ff;--muted:#7f9bb4;--blue:#1fb6ff;--yellow:#f3c84b;--danger:#ff6b6b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{font-family:'Share Tech Mono',monospace;overflow-x:hidden}.grid-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(45,90,125,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(45,90,125,.12) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.8) 60%,transparent 100%)}.shell{position:relative;width:min(1500px,calc(100% - 32px));margin:0 auto;padding:28px 0 22px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:118px;border:1px solid var(--line);border-bottom:0;background:rgba(7,16,29,.72);backdrop-filter:blur(8px);padding:20px 28px}.brand{font:16px 'Michroma',sans-serif;letter-spacing:.22em;color:var(--text);text-decoration:none}.topbar>div{text-align:center}.eyebrow,.module{margin:0;color:var(--blue);font-size:12px;letter-spacing:.16em}.topbar h1{margin:7px 0 0;font:clamp(24px,3vw,42px) 'Michroma',sans-serif;letter-spacing:.13em}.icon-btn,.text-btn{font:13px 'Share Tech Mono',monospace;color:var(--text);border:1px solid var(--line2);background:rgba(11,22,37,.8);cursor:pointer}.icon-btn{justify-self:end;width:42px;height:42px;font-size:20px}.topbar-actions{justify-self:end;display:flex;align-items:center;gap:16px}.back{color:var(--blue);font-size:12px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}.back:hover{text-decoration:underline}.text-btn{padding:8px 12px;letter-spacing:.1em}.icon-btn:hover,.text-btn:hover{border-color:var(--blue);color:var(--blue)}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,.72fr);border:1px solid var(--line)}.main-card{min-width:0;border-right:1px solid var(--line);background:rgba(8,18,31,.84)}.card-head,.panel-head,.card-foot{display:flex;align-items:center;justify-content:space-between;gap:18px}.card-head{min-height:104px;padding:20px 24px;border-bottom:1px solid var(--line)}h2{margin:8px 0 0;font:clamp(18px,2.2vw,30px) 'Michroma',sans-serif;letter-spacing:.04em}.status-wrap{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 12px currentColor}.live-dot.ok{background:#54e39b}.live-dot.error{background:var(--danger)}.camera-stage{position:relative;aspect-ratio:16/9;background:#02070d;overflow:hidden}.camera-stage img{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity .25s ease}.camera-stage img.loaded{opacity:1}.camera-error{position:absolute;inset:0;display:grid;place-items:center;color:var(--danger);background:#050b12}.camera-error[hidden]{display:none}.corner{position:absolute;width:22px;height:22px;border-color:var(--blue);opacity:.8}.tl{left:14px;top:14px;border-left:1px solid;border-top:1px solid}.tr{right:14px;top:14px;border-right:1px solid;border-top:1px solid}.bl{left:14px;bottom:14px;border-left:1px solid;border-bottom:1px solid}.br{right:14px;bottom:14px;border-right:1px solid;border-bottom:1px solid}.card-foot{min-height:52px;padding:0 24px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.side-panel{background:rgba(8,18,31,.92)}.panel-head{min-height:72px;padding:0 18px;border-bottom:1px solid var(--line)}.camera-list{display:grid}.camera-item{display:grid;grid-template-columns:126px 1fr;gap:14px;padding:16px;border-bottom:1px solid var(--line);cursor:pointer;background:transparent;transition:background .18s,border-color .18s}.camera-item:hover,.camera-item.active{background:rgba(31,182,255,.07)}.camera-item.active{box-shadow:inset 3px 0 var(--blue)}.thumb{position:relative;aspect-ratio:16/9;background:#030910;overflow:hidden;border:1px solid var(--line)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb:after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.04);pointer-events:none}.camera-meta h3{margin:2px 0 7px;font:13px 'Michroma',sans-serif;line-height:1.45}.camera-meta p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.camera-meta .tag{display:inline-block;margin-top:9px;color:var(--blue);font-size:11px}.camera-item.offline .tag{color:var(--danger)}footer{display:flex;justify-content:space-between;gap:20px;padding:15px 2px;color:var(--muted);font-size:11px;letter-spacing:.08em}@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.topbar>div{grid-row:2;grid-column:1/-1;margin-top:18px}.layout{grid-template-columns:1fr}.main-card{border-right:0;border-bottom:1px solid var(--line)}.camera-list{grid-template-columns:repeat(2,1fr)}.camera-item{grid-template-columns:1fr}.thumb{width:100%}}@media(max-width:560px){.shell{width:100%;padding:0}.topbar{border-left:0;border-right:0}.layout{border-left:0;border-right:0}.camera-list{grid-template-columns:1fr}.camera-item{grid-template-columns:130px 1fr}.card-head{align-items:flex-start}.status-wrap{margin-top:6px}footer{padding:14px 16px;flex-direction:column}.camera-stage{aspect-ratio:4/3}}

.traffic-panel{margin:22px 0;border:1px solid rgba(94,139,169,.45);background:rgba(7,19,31,.86);padding:20px 22px}.traffic-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}.traffic-head h2{margin:4px 0 0;font-size:20px;font-weight:400}.traffic-head>a{border:1px solid rgba(88,201,255,.5);padding:10px 13px;color:#58c9ff;font-size:11px;text-decoration:none}.traffic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.traffic-item{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:start;border:1px solid rgba(108,143,166,.28);padding:12px;color:inherit;text-decoration:none;background:rgba(8,22,35,.72)}.traffic-item:hover{border-color:#58c9ff}.traffic-dot{width:7px;height:7px;border-radius:50%;background:#f4b942;margin-top:5px}.traffic-item strong{display:block;font-size:12px;font-weight:400}.traffic-item small{display:block;color:#8fa5b4;font-size:10px;line-height:1.45;margin-top:5px;max-height:3em;overflow:hidden}.traffic-item b{color:#58c9ff;font-weight:400}.traffic-loading,.traffic-empty{grid-column:1/-1;margin:0;color:#8fa5b4;font-size:12px}.traffic-empty a{color:#58c9ff}@media(max-width:760px){.traffic-head{align-items:flex-start;flex-direction:column}.traffic-list{grid-template-columns:1fr}.traffic-head>a{width:100%;text-align:center}}

@media(max-width:560px){.topbar-actions{gap:10px}.back{font-size:11px}}