*{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(16px);z-index:10;background:#0a0a0ae0;border:1px solid #ffffff14;border-radius:16px;width:240px;padding:16px;transition:all .3s;position:fixed;top:20px;right:20px}.stats-panel.collapsed{width:auto;min-width:160px}.panel-header{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;justify-content:space-between;align-items:center;display:flex}.panel-status{align-items:center;gap:8px;display:flex}.status-dot{background:#ef4444;border-radius:50%;width:8px;height:8px;transition:background .3s}.status-dot.connected{background:#22c55e;animation:2s ease-in-out infinite pulse;box-shadow:0 0 6px #22c55e}@keyframes pulse{0%,to{box-shadow:0 0 4px #22c55e}50%{box-shadow:0 0 12px #22c55e}}.status-text{text-transform:uppercase;letter-spacing:.06em;color:#888;font-size:.75rem;font-weight:500}.status-dot.connected+.status-text{color:#4ade80}.panel-toggle{color:#555;justify-content:center;align-items:center;width:24px;height:24px;font-size:1.2rem;font-weight:300;display:flex}.total-section{text-align:center;flex-direction:column;align-items:center;gap:2px;margin:20px 0 16px;display:flex}.total-label{color:#666;text-transform:uppercase;letter-spacing:.12em;font-size:.65rem}.total-number{color:#fff;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:3.2rem;font-weight:700;line-height:1}.animated-num{transition:transform .15s;display:inline-block}.animated-num.bump{color:#4ade80;transform:scale(1.15)}.class-bars{flex-direction:column;gap:10px;margin-bottom:14px;display:flex}.class-bar-row{flex-direction:column;gap:4px;display:flex}.class-bar-header{align-items:center;gap:6px;display:flex}.class-bar-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.class-bar-label{color:#aaa;flex:1;font-size:.78rem}.class-bar-count{color:#fff;text-align:right;min-width:24px;font-family:SF Mono,Fira Code,monospace;font-size:.9rem;font-weight:600}.class-bar-track{background:#ffffff0f;border-radius:2px;height:3px;overflow:hidden}.class-bar-fill{border-radius:2px;min-width:0;height:100%;transition:width .4s}.reset-btn{color:#666;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;width:100%;padding:8px;font-size:.75rem;transition:all .2s}.reset-btn:hover{color:#aaa;background:#ffffff1a}.reset-btn.confirm{color:#f87171;background:#ef444426;border-color:#ef44444d}.footer{color:#444;z-index:10;font-size:.65rem;position:fixed;bottom:12px;left:20px}@media (width<=900px){.stats-panel{width:200px;padding:14px}.total-number{font-size:2.5rem}}@media (width<=600px){.stats-panel{border-radius:16px 16px 0 0;width:100%;max-height:60vh;padding:12px 16px;inset:auto 0 0;overflow-y:auto}.stats-panel.collapsed{min-width:unset;width:100%;padding:10px 16px}.total-section{flex-direction:row;justify-content:space-between;align-items:baseline;margin:12px 0}.total-label{font-size:.7rem}.total-number{font-size:2rem}.class-bars{gap:8px}.footer{display:none}}