:root{color-scheme:dark;--bg: #0c1117;--panel: #151b24;--border: #2a3544;--text: #e8eef5;--muted: #8b9cb3;--accent: #38bdf8;--accent-dim: #0e7490;--radius: 12px;font-family:Inter,system-ui,-apple-system,sans-serif}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);line-height:1.5;overflow-x:hidden}#app{max-width:1200px;margin:0 auto;padding:1rem 1.25rem 2rem}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.top-actions{display:flex;align-items:center;gap:.5rem}.top-title{display:flex;align-items:baseline;gap:.55rem}h1{font-size:1.35rem;font-weight:600;margin:0;letter-spacing:-.02em}.github-link{display:inline-flex;align-items:center;color:var(--muted);text-decoration:none;line-height:1}.github-link .bi{font-size:1rem}.github-link:hover{color:var(--accent)}.hint{color:var(--muted);font-size:.9rem;margin:0 0 1rem}.layout{display:grid;grid-template-columns:1fr minmax(220px,280px);gap:1.25rem;align-items:start}@media(max-width:800px){.layout{grid-template-columns:1fr}}.video-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem}.video-wrap{position:relative;width:100%;max-width:min(100%,640px);margin:0 auto;border-radius:calc(var(--radius) - 4px);overflow:hidden;background:#000;aspect-ratio:1 / 1}.video-wrap video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.video-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.stats-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}.stats-panel h2{margin:0 0 .75rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.class-counts{list-style:none;margin:0;padding:0}.class-counts li{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:.95rem}.class-counts li:last-child{border-bottom:none}.class-counts li.empty{color:var(--muted);font-size:.88rem}.cc-name{font-weight:500}.cc-num{color:var(--accent);font-variant-numeric:tabular-nums}.cc-sub{display:block;font-size:.78rem;color:var(--muted);font-weight:400}.total-block{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.25rem}.total-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.total-value{font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;color:#fbbf24}.icon-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.icon-btn:hover{background:#1c2530;border-color:var(--accent-dim)}.icon-btn.gear{color:#dbeafe}.icon-btn.pause{color:#fef3c7}.icon-btn.gear .bi,.icon-btn.pause .bi{font-size:22px;line-height:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:40}.modal-backdrop.hidden{display:none}.settings-dialog{position:fixed;z-index:50;max-width:min(520px,calc(100vw - 2rem));width:100%;margin:auto;top:0;right:0;bottom:0;left:0;border:1px solid var(--border);border-radius:var(--radius);background:#111820;color:var(--text);padding:0}.settings-dialog::backdrop{display:none}.settings-dialog h2{margin:0 0 .5rem;font-size:1.15rem}.settings-dialog form{padding:1.25rem 1.35rem 1.4rem;overflow-x:hidden}.form-hint{font-size:.82rem;color:var(--muted);margin:0 0 1rem}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem}.field span{font-size:.82rem;color:var(--muted)}.field input{padding:.55rem .65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.95rem}.field.inline{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:.75rem}.field.inline span{margin:0}.chip-values{margin:1rem 0 0;padding:.85rem 1rem 1rem;border:1px solid var(--border);border-radius:10px}.chip-values legend{padding:0 .35rem;font-size:.85rem;font-weight:600}.chip-row{display:grid;grid-template-columns:minmax(0,1fr) 100px 36px;gap:.5rem;margin-bottom:.5rem;align-items:center}.chip-row input{width:100%;min-width:0;padding:.45rem .5rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.9rem}@media(max-width:520px){.settings-dialog form{padding:1rem}.chip-row{grid-template-columns:minmax(0,1fr) 84px 32px;gap:.4rem}}.row-remove{border:none;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:6px}.row-remove:hover{color:#f87171;background:#f871711f}button.secondary{margin-top:.5rem;padding:.45rem .75rem;font-size:.85rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}button.secondary:hover{background:#1a222c}.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.25rem}button.primary{padding:.55rem 1.1rem;border-radius:8px;border:none;background:linear-gradient(165deg,var(--accent),var(--accent-dim));color:#042f2e;font-weight:600;cursor:pointer}button.primary:hover{filter:brightness(1.08)}