*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0a;width:100vw;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.app{width:100vw;height:100vh;position:relative}.video-container{background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.video-feed{object-fit:contain;max-width:100%;max-height:100%}.video-overlay{color:#aaa;background:#000000b3;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:1rem;display:flex;position:absolute;inset:0}.video-overlay.error{color:#f87171}.loading-spinner{border:3px solid #ffffff1a;border-top-color:#4ade80;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.retry-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:8px 24px;font-size:.9rem;transition:background .2s}.retry-btn:hover{background:#fff3}.stats-panel{-webkit-backdrop-filter:blur(12px);z-index:10;background:#0a0a0ad9;border:1px solid #ffffff1a;border-radius:14px;min-width:200px;padding:20px;position:fixed;top:20px;right:20px}.panel-header{align-items:center;gap:8px;margin-bottom:16px;display:flex}.status-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;transition:background .3s}.status-dot.connected{background:#22c55e;box-shadow:0 0 6px #22c55e}.panel-title{text-transform:uppercase;letter-spacing:.05em;color:#a0a0a0;font-size:.85rem;font-weight:600}.total-section{text-align:center;flex-direction:column;align-items:center;margin-bottom:12px;display:flex}.total-label{color:#888;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}.total-number{color:#fff;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:3rem;font-weight:700;line-height:1}.direction-section{justify-content:center;gap:12px;margin-bottom:12px;display:flex}.direction-box{background:#ffffff0d;border-radius:8px;flex-direction:column;flex:1;align-items:center;padding:8px;display:flex}.direction-label{color:#888;text-transform:uppercase;font-size:.7rem}.direction-number{font-family:SF Mono,Fira Code,monospace;font-size:1.5rem;font-weight:600}.direction-number.in{color:#4ade80}.direction-number.out{color:#f87171}.divider{background:#ffffff1a;height:1px;margin:12px 0}.class-section{flex-direction:column;gap:8px;display:flex}.class-row{align-items:center;gap:8px;display:flex}.class-dot{border-radius:50%;width:10px;height:10px}.class-dot.car{background:#4caf50}.class-dot.bus{background:#ff9800}.class-dot.truck{background:#2196f3}.class-name{color:#ccc;flex:1;font-size:.85rem}.class-count{color:#fff;text-align:right;min-width:30px;font-family:SF Mono,Fira Code,monospace;font-size:1.1rem;font-weight:600}.meta-row{justify-content:space-between;align-items:center;display:flex}.meta-label{color:#888;font-size:.75rem}.meta-value{color:#ccc;font-family:SF Mono,Fira Code,monospace;font-size:.9rem;font-weight:500}.reset-btn{color:#aaa;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:8px;width:100%;margin-top:14px;padding:8px;font-size:.8rem;transition:background .2s,color .2s}.reset-btn:hover{color:#fff;background:#ffffff26}.footer{color:#555;z-index:10;font-size:.7rem;position:fixed;bottom:12px;left:20px}@media (width<=600px){.stats-panel{min-width:unset;border-radius:14px 14px 0 0;inset:auto 0 0}}