:root{--bg-color: #0d0d0d;--sidebar-bg: rgba(0, 0, 0, .75);--text-primary: #ffffff;--text-secondary: #a0a0a0;--accent-good: #00ff88;--accent-avg: #ffcc00;--accent-bad: #ff4444;--glass-border: 1px solid rgba(255, 255, 255, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--bg-color);color:var(--text-primary);overflow:hidden;height:100vh;display:flex}.video-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.video-container video,.video-container canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.scan-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;z-index:5;background:#00ff881a;pointer-events:none}.scan-line{position:absolute;width:100%;height:2px;background:var(--accent-good);box-shadow:0 0 10px var(--accent-good);animation:scan 2s infinite ease-in-out}.scan-text{font-family:JetBrains Mono,monospace;font-size:2rem;color:var(--accent-good);text-shadow:0 0 10px var(--accent-good);background:#00000080;padding:10px 20px}@keyframes scan{0%{top:10%}50%{top:90%}to{top:10%}}.sidebar{position:relative;z-index:10;width:320px;height:100%;background:var(--sidebar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:var(--glass-border);display:flex;flex-direction:column;padding:24px;box-shadow:10px 0 30px #00000080}.header{margin-bottom:30px;display:flex;justify-content:space-between;align-items:center}h1{font-family:JetBrains Mono,monospace;font-size:1.2rem;letter-spacing:-.05em;font-weight:700}.status-indicator{font-size:.8rem;color:var(--accent-good);display:flex;align-items:center;gap:6px}.dot{width:8px;height:8px;background:var(--accent-good);border-radius:50%;box-shadow:0 0 8px var(--accent-good);animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.metrics-container{flex-grow:1;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.metric-card{background:#ffffff08;border:1px solid rgba(255,255,255,.05);padding:16px;border-radius:12px}.metric-header{display:flex;justify-content:space-between;margin-bottom:8px}.metric-label{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.metric-rating{font-size:.75rem;font-weight:700;padding:2px 6px;border-radius:4px;background:#ffffff1a}.metric-rating.good{color:var(--accent-good);background:#00ff881a}.metric-rating.avg{color:var(--accent-avg);background:#ffcc001a}.metric-rating.bad{color:var(--accent-bad);background:#ff44441a}.metric-value{font-family:JetBrains Mono,monospace;font-size:1.8rem;font-weight:700;margin-bottom:12px}.unit{font-size:.9rem;color:var(--text-secondary);margin-left:4px}.progress-bg{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:var(--text-primary);width:0%;transition:width .3s ease}.progress-bar.good{background:var(--accent-good)}.progress-bar.avg{background:var(--accent-avg)}.progress-bar.bad{background:var(--accent-bad)}.controls{margin-top:30px;text-align:center}button{width:100%;background:transparent;border:1px solid var(--accent-good);color:var(--accent-good);padding:14px;font-family:JetBrains Mono,monospace;font-weight:700;cursor:pointer;transition:all .2s;border-radius:6px}button:hover{background:var(--accent-good);color:#000;box-shadow:0 0 15px #0f86}button.active{background:var(--accent-good);color:#000;animation:flash 1s infinite}@keyframes flash{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.quality-msg{margin-top:10px;font-size:.8rem;color:var(--text-secondary);min-height:1.2em}.loading{text-align:center;color:var(--text-secondary);margin-top:40px;font-style:italic}