:root{--bg: #0b0d12;--bg-elev: #141821;--bg-elev-2: #1b202b;--border: #262c39;--text: #eef1f6;--text-muted: #9aa4b6;--accent: #5b8cff;--accent-strong: #3f6fff;--danger: #ff5b6e;--radius: 14px;--shadow: 0 10px 40px rgba(0, 0, 0, .45);--font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;height:100%}body{background:radial-gradient(1200px 600px at 80% -10%,rgba(91,140,255,.15),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(91,140,255,.08),transparent 55%),var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}#app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;font-size:13px;box-shadow:0 4px 14px #3f6fff80}.brand-name{font-size:18px}.topbar-meta{display:flex;gap:8px}.badge{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:#5b8cff26;color:var(--accent);border:1px solid rgba(91,140,255,.35);text-transform:uppercase;letter-spacing:.4px}.badge-muted{background:var(--bg-elev-2);color:var(--text-muted);border-color:var(--border)}.stage{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:24px 28px;max-width:1400px;width:100%;margin:0 auto}@media(max-width:980px){.stage{grid-template-columns:1fr}}.player-shell{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);aspect-ratio:16 / 9}.video{width:100%;height:100%;display:block;background:#000}.player-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:linear-gradient(180deg,#00000026,#0000008c);pointer-events:none;border:none;margin:0;padding:0;width:100%;height:100%;color:inherit;font:inherit;transition:opacity .25s ease}.player-overlay.clickable{pointer-events:auto;cursor:pointer}.player-overlay.hidden{opacity:0;pointer-events:none}.play-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#5b8cffeb;color:#fff;font-size:30px;padding-left:5px;box-shadow:0 6px 24px #00000080;transition:transform .15s ease,background .15s ease}.player-overlay.clickable:hover .play-icon,.player-overlay.clickable:active .play-icon{background:var(--accent-strong);transform:scale(1.06)}.overlay-inner{text-align:center;display:grid;gap:14px;justify-items:center}.overlay-text{margin:0;color:var(--text);font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.6)}.spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player-info{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:18px}.video-title{margin:0;font-size:20px;font-weight:700}.video-sub{margin:6px 0 0;color:var(--text-muted);font-size:14px}.quality-control{display:grid;gap:6px;font-size:13px;color:var(--text-muted)}.quality-control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer;min-width:130px}.quality-control select:focus{outline:2px solid var(--accent);outline-offset:1px}.library-column{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:18px;height:fit-content;box-shadow:var(--shadow)}.library-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.library-head h2{margin:0;font-size:16px}.icon-btn{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px;transition:transform .2s ease,background .2s ease}.icon-btn:hover{background:var(--border);transform:rotate(45deg)}.library-list{display:grid;gap:10px;max-height:70vh;overflow-y:auto;padding:3px;margin:-3px}.library-empty{color:var(--text-muted);font-size:14px;text-align:center;padding:20px 0}.video-card{display:grid;grid-template-columns:108px 1fr;gap:12px;padding:8px;border-radius:12px;border:1px solid transparent;background:var(--bg-elev-2);cursor:pointer;text-align:left;color:inherit;font:inherit;transition:border-color .2s ease,transform .15s ease,background .2s ease}@media(hover:hover){.video-card:hover{border-color:#5b8cff80;transform:translateY(-1px)}}.video-card.active{border-color:var(--accent);background:#5b8cff1f}.thumb{width:108px;height:61px;border-radius:8px;object-fit:cover;background:#000;display:block}.card-body{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}.card-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{font-size:12px;color:var(--text-muted);display:flex;gap:8px;flex-wrap:wrap}.card-chip{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:1px 6px}.footer{padding:18px 28px;border-top:1px solid var(--border);color:var(--text-muted);font-size:13px;text-align:center}.error-banner{background:#ff5b6e1f;border:1px solid rgba(255,91,110,.4);color:#ffb0ba;padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:14px}.upload-panel{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--border)}.upload-panel h2{margin:0 0 12px;font-size:16px}.dropzone{border:1.5px dashed var(--border);border-radius:12px;padding:22px 16px;text-align:center;cursor:pointer;background:var(--bg-elev-2);transition:border-color .2s ease,background .2s ease,transform .15s ease;display:grid;gap:6px;justify-items:center}.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);outline:none}.dropzone.dragover{border-color:var(--accent);background:#5b8cff1f;transform:scale(1.01)}.dropzone.busy{opacity:.6;pointer-events:none;cursor:default}.dropzone-icon{font-size:26px;color:var(--accent);line-height:1}.dropzone-text{margin:0;font-size:14px;color:var(--text)}.dropzone-text strong{color:var(--accent)}.dropzone-hint{margin:0;font-size:12px;color:var(--text-muted)}.upload-status{margin-top:12px;display:grid;gap:8px}.upload-file{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-track{height:8px;border-radius:999px;background:var(--bg);border:1px solid var(--border);overflow:hidden}.progress-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width .2s ease}.progress-bar.indeterminate{width:40%!important;animation:indeterminate 1.1s ease-in-out infinite}@keyframes indeterminate{0%{margin-left:-40%}to{margin-left:100%}}.upload-stage{font-size:13px;color:var(--text-muted)}.upload-stage.error{color:var(--danger)}.jobs{margin-top:14px;display:grid;gap:8px}.jobs-head{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.jobs-list{display:grid;gap:10px}.job{display:grid;gap:6px;padding:10px;border-radius:10px;background:var(--bg-elev-2);border:1px solid var(--border)}.job-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.job-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-status{font-size:12px;color:var(--text-muted);flex-shrink:0}.job-done .job-status{color:#5bd6a0}.job-failed .job-status{color:var(--danger)}.progress-bar.failed{background:var(--danger)}.video-card{position:relative}.card-delete{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:7px;border:1px solid var(--border);background:#0b0d12d9;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:1;transform:scale(1);transition:opacity .15s ease,transform .15s ease,background .15s ease,color .15s ease}@media(hover:hover){.card-delete{opacity:0;transform:scale(.9)}.video-card:hover .card-delete,.video-card:focus-within .card-delete{opacity:1;transform:scale(1)}.card-delete:hover{background:var(--danger);border-color:var(--danger);color:#fff}}.card-delete:disabled{cursor:default;opacity:.5}.video-card.deleting{opacity:.5;pointer-events:none}