:root{--bg:#0b0d12;--bg-elev:#131722;--bg-elev-2:#1a2030;--bg-hover:#1f2638;--border:#232a3d;--border-strong:#2e3650;--text:#e6e9f0;--text-dim:#9aa3b8;--text-muted:#6b7385;--accent:#7c3aed;--accent-hover:#8b5cf6;--accent-dim:#7c3aed26;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--shadow:0 8px 24px #0006;--radius:8px;--radius-sm:4px;--radius-lg:12px;--transition:.15s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Inter,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit;background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition);padding:8px 12px}input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.btn{border-radius:var(--radius-sm);transition:background var(--transition), transform var(--transition);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;display:inline-flex}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-strong)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-ghost{color:var(--text-dim)}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text)}.btn-icon{border-radius:var(--radius-sm);width:32px;height:32px;padding:0}h1{font-size:22px;font-weight:600}h2{font-size:17px;font-weight:600}h3{font-size:14px;font-weight:600}.login-container{background:radial-gradient(ellipse at top, #7c3aed26, transparent 50%), var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;max-width:380px;padding:36px 32px}.login-brand{align-items:center;gap:12px;margin-bottom:4px;display:flex}.login-brand .brand-mark{background:linear-gradient(135deg, var(--accent), #ec4899);border-radius:var(--radius-sm);color:#fff;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.login-brand h1{margin:0;font-size:22px;font-weight:600}.tagline{color:var(--text-dim);margin-bottom:24px}.login-form{flex-direction:column;gap:12px;display:flex}.login-form input{padding:11px 14px;font-size:14px}.error-message{color:var(--danger);border-radius:var(--radius-sm);background:#ef444414;border:1px solid #ef444440;padding:8px 12px;font-size:13px}.switch-mode{text-align:center;color:var(--text-dim);margin-top:20px;font-size:13px}.switch-mode button{color:var(--accent-hover);font-size:13px;font-weight:500}.sidebar{background:var(--bg-elev);border-right:1px solid var(--border);flex-direction:column;gap:8px;height:100vh;padding:16px 12px;display:flex}.sidebar-brand{border-bottom:1px solid var(--border);align-items:center;gap:10px;margin-bottom:8px;padding:8px 8px 16px;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent), #ec4899);border-radius:var(--radius-sm);color:#fff;place-items:center;width:32px;height:32px;font-size:12px;font-weight:700;display:grid}.brand-text{font-size:15px;font-weight:600}.sidebar-nav{flex-direction:column;flex:1;gap:2px;display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-dim);transition:all var(--transition);align-items:center;gap:10px;padding:9px 12px;font-size:13px;font-weight:500;text-decoration:none;display:flex}.nav-item svg{flex-shrink:0;width:18px;height:18px}.nav-item:hover{background:var(--bg-hover);color:var(--text)}.nav-item.active{background:var(--accent-dim);color:var(--accent-hover)}.sidebar-footer{border-top:1px solid var(--border);align-items:center;gap:8px;padding:8px;display:flex}.sidebar-user{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.user-avatar{background:var(--accent-dim);width:30px;height:30px;color:var(--accent-hover);border-radius:50%;place-items:center;font-size:12px;font-weight:600;display:grid}.user-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}@media (width<=768px){.sidebar{border-right:none;border-top:1px solid var(--border);flex-direction:row;grid-row:2;height:auto;padding:6px}.sidebar-brand,.sidebar-footer{display:none}.sidebar-nav{flex-direction:row;justify-content:space-around;width:100%}.nav-item{flex-direction:column;gap:2px;padding:6px;font-size:10px}}.page-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;display:flex}.page-header-text{min-width:0}.page-subtitle{color:var(--text-dim);margin-top:4px;font-size:13px}.page-header-actions{align-items:center;gap:8px;display:flex}.empty-state{color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-icon{border-radius:var(--radius-lg);background:var(--bg-elev-2);width:56px;height:56px;color:var(--text-muted);place-items:center;margin-bottom:16px;display:grid}.empty-icon svg{width:28px;height:28px}.empty-state h3{color:var(--text);margin-bottom:6px;font-size:16px}.empty-state p{max-width:320px;font-size:13px;line-height:1.5}.empty-action{margin-top:20px}.library-page{min-height:100%}.banner{border-radius:var(--radius-sm);margin-bottom:16px;padding:10px 14px;font-size:13px}.banner-error{color:var(--danger);background:#ef444414;border:1px solid #ef444440}.banner-info{color:var(--info);background:#3b82f614;border:1px solid #3b82f640}.uploads-panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;margin-bottom:16px;padding:12px;display:flex}.upload-row{grid-template-columns:1fr 200px 50px;align-items:center;gap:12px;font-size:13px;display:grid}.upload-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.upload-bar{background:var(--bg-elev-2);border-radius:2px;height:4px;overflow:hidden}.upload-bar-fill{background:var(--accent);height:100%;transition:width .2s}.upload-pct{text-align:right;color:var(--text-dim);font-variant-numeric:tabular-nums}.loading-row{color:var(--text-dim);text-align:center;padding:40px}.track-list{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.track-row{border-bottom:1px solid var(--border);grid-template-columns:2fr 1.5fr 100px 100px auto;align-items:center;gap:16px;padding:12px 16px;font-size:13px;display:grid}.track-row:last-child{border-bottom:none}.track-row:hover:not(.track-head){background:var(--bg-hover)}.track-head{background:var(--bg-elev-2);color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.track-title{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.track-meta{color:var(--text-dim);font-variant-numeric:tabular-nums}.track-actions{justify-content:flex-end;align-items:center;gap:6px;display:flex}@media (width<=768px){.track-row{grid-template-columns:1fr auto;gap:8px}.track-head,.track-meta:nth-of-type(2),.track-meta:nth-of-type(3),.track-meta:nth-of-type(4){display:none}}.editor-page{flex-direction:column;height:100%;display:flex}.editor-layout{flex:1;grid-template-columns:260px 1fr;gap:20px;min-height:0;display:grid}.cue-list{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;min-height:0;max-height:70vh;padding:8px;display:flex;overflow:auto}.cue-list-header{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:8px 10px 4px;font-size:11px;font-weight:600}.cue-list-divider{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:8px;padding:14px 10px 4px;font-size:11px;font-weight:600}.cue-list-empty{color:var(--text-muted);padding:8px 10px;font-size:12px}.cue-list-item{border-radius:var(--radius-sm);text-align:left;width:100%;color:var(--text);transition:all var(--transition);background:0 0;align-items:center;gap:10px;padding:9px 10px;font-size:13px;font-weight:500;display:flex}.cue-list-item:hover{background:var(--bg-hover)}.cue-list-item.active{background:var(--accent-dim);color:var(--accent-hover)}.cue-list-item.track-item{color:var(--text-dim)}.cue-list-item.track-item .track-list-icon{width:14px;height:14px}.cue-list-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.cue-list-action{color:var(--text-muted);text-align:center;width:18px;font-size:16px;font-weight:400}.cue-color-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.editor-main{flex-direction:column;gap:16px;min-width:0;display:flex;overflow:auto}.waveform-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.waveform-meta{color:var(--text-dim);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:10px;font-size:12px;display:flex}.waveform-meta-mid{color:var(--accent-hover);font-weight:500}.waveform-container{background:var(--bg);border-radius:var(--radius-sm);padding:8px 0}.waveform-hint{color:var(--text-muted);text-align:center;margin-top:8px;font-size:11px}.editor-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;display:grid}.editor-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;padding:16px;display:flex}.editor-card h3{text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:4px;font-size:12px;font-weight:600}.editor-card label{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:12px}.editor-card input[type=text],.editor-card input:not([type]),.editor-card textarea{width:100%;font-size:13px}.editor-card input[type=range]{appearance:none;background:var(--bg-elev-2);border:none;border-radius:2px;outline:none;width:100%;height:4px;margin:4px 0;padding:0}.editor-card input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.editor-card input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.color-picker{flex-wrap:wrap;gap:6px;display:flex}.color-swatch{cursor:pointer;width:22px;height:22px;transition:transform var(--transition);border:2px solid #0000;border-radius:50%}.color-swatch.active{border-color:#fff;transform:scale(1.15)}.checkbox{cursor:pointer;color:var(--text);align-items:center;gap:8px;font-size:13px;display:flex}.checkbox input{cursor:pointer;margin:0}@media (width<=768px){.editor-layout{grid-template-columns:1fr}.cue-list{max-height:200px}}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;place-items:center;padding:16px;animation:.15s fade;display:grid;position:fixed;inset:0}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-height:85vh;box-shadow:var(--shadow);flex-direction:column;animation:.2s cubic-bezier(.4,0,.2,1) rise;display:flex}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.modal-header h2{font-size:16px;font-weight:600}.modal-header .btn-icon{font-size:20px;line-height:1}.modal-body{flex:1;padding:20px;overflow:auto}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;gap:8px;padding:14px 20px;display:flex}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.show-page{flex-direction:column;height:100%;display:flex}.show-layout{flex:1;grid-template-columns:240px 1fr;gap:20px;min-height:0;display:grid}.show-sidebar{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;padding:8px;display:flex;overflow:auto}.show-sidebar-header{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:8px 10px 4px;font-size:11px;font-weight:600}.show-sidebar-item{border-radius:var(--radius-sm);color:var(--text);text-align:left;justify-content:space-between;align-items:center;padding:9px 10px;font-size:13px;font-weight:500;display:flex}.show-sidebar-item:hover{background:var(--bg-hover)}.show-sidebar-item.active{background:var(--accent-dim);color:var(--accent-hover)}.show-cue-count{color:var(--text-muted);background:var(--bg-elev-2);border-radius:10px;padding:1px 6px;font-size:11px}.show-main{flex-direction:column;gap:16px;min-width:0;display:flex;overflow:auto}.show-controls{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:12px;padding:16px;display:flex}.big-go{color:#fff;border-radius:var(--radius);background:linear-gradient(135deg,#10b981,#059669);flex-direction:column;justify-content:center;align-items:center;width:120px;height:64px;font-size:22px;font-weight:700;transition:transform .1s;display:flex;box-shadow:0 4px 16px #10b9814d}.big-go:active:not(:disabled){transform:scale(.97)}.big-go:disabled{opacity:.5;cursor:not-allowed}.go-label{letter-spacing:1px;font-size:22px}.go-hint{opacity:.8;font-size:10px;font-weight:400}.stop-btn{height:64px;padding:0 20px;font-size:13px}.show-status{color:var(--text-dim);margin-left:auto;font-size:12px}.status-warn{color:var(--warning)}.status-ok{color:var(--success)}.show-cue-list{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.show-cue-row{border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--transition);border-left:3px solid #0000;grid-template-columns:32px 40px 1fr 140px 200px auto;align-items:center;gap:10px;padding:10px 12px;font-size:13px;display:grid}.show-cue-row:last-child{border-bottom:none}.show-cue-row:hover:not(.show-cue-head){background:var(--bg-hover)}.show-cue-row.is-current{background:#7c3aed1a}.show-cue-row.is-playing{background:#10b98114;border-left-color:var(--success)!important}.show-cue-head{background:var(--bg-elev-2);cursor:default;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600}.drag-handle{width:24px;height:24px;color:var(--text-muted);cursor:grab;border-radius:var(--radius-sm);place-items:center;display:grid}.drag-handle:hover{color:var(--text);background:var(--bg-elev-2)}.drag-handle:active{cursor:grabbing}.show-cue-num{font-variant-numeric:tabular-nums;color:var(--text-dim);text-align:center;font-weight:600}.show-cue-label{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.show-cue-times{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.show-cue-times input{text-align:center;width:100%;padding:4px 6px;font-size:12px}.show-cue-row select{width:100%;padding:5px 8px;font-size:12px}.show-cue-actions{gap:4px;display:flex}.cue-pick-list{flex-direction:column;gap:4px;max-height:400px;display:flex;overflow:auto}.cue-pick-item{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);text-align:left;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:13px;display:flex}.cue-pick-item:hover{background:var(--bg-hover);border-color:var(--accent)}@media (width<=768px){.show-layout{grid-template-columns:1fr}.show-sidebar{max-height:200px}.show-cue-row{grid-template-columns:32px 40px 1fr auto}.show-cue-row>div:nth-child(4),.show-cue-row>div:nth-child(5){display:none}}.pads-page{flex-direction:column;height:100%;display:flex}.pads-layout{flex:1;grid-template-columns:220px 1fr;gap:20px;min-height:0;display:grid}.pads-sidebar{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:2px;padding:8px;display:flex;overflow:auto}.pads-main{flex-direction:column;gap:12px;min-width:0;min-height:0;display:flex}.pads-status-bar{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);justify-content:space-between;align-items:center;padding:10px 14px;font-size:12px;display:flex}.pad-grid{flex:1;gap:8px;min-height:400px;display:grid}.pad{background:var(--bg-elev);border:2px solid var(--border);border-radius:var(--radius);text-align:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;justify-content:center;align-items:center;min-height:110px;padding:12px;transition:all 80ms ease-out;display:flex;position:relative;overflow:hidden}.pad.empty{color:var(--text-muted);border-style:dashed}.pad.empty.edit-mode{cursor:pointer}.pad.empty.edit-mode:hover{border-color:var(--accent);color:var(--accent-hover)}.pad.has-cue{background:linear-gradient(135deg, color-mix(in srgb, var(--pad-color) 22%, var(--bg-elev)), var(--bg-elev));border-color:color-mix(in srgb, var(--pad-color) 40%, var(--border));color:var(--text);cursor:pointer}.pad.has-cue:hover{border-color:var(--pad-color);background:linear-gradient(135deg, color-mix(in srgb, var(--pad-color) 35%, var(--bg-elev)), var(--bg-elev))}.pad.active{background:var(--pad-color);border-color:var(--pad-color);color:#fff;box-shadow:0 0 24px color-mix(in srgb, var(--pad-color) 50%, transparent);transform:scale(.97)}.pad-label{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;margin-bottom:6px;font-size:13px;font-weight:600;display:-webkit-box;overflow:hidden}.pad-empty-label{color:var(--text-muted);margin-bottom:4px;font-size:11px}.pad-meta{flex-wrap:wrap;justify-content:center;gap:4px;font-size:10px;display:flex}.pad-hotkey{background:#ffffff26;border-radius:3px;padding:1px 6px;font-family:ui-monospace,monospace;font-weight:600}.pad-mode{background:#0003;border-radius:3px;padding:1px 6px}.pad-choke{background:var(--warning);color:#000;border-radius:3px;padding:1px 6px;font-weight:600}.pad-edit-bar{border-radius:calc(var(--radius) - 2px);cursor:default;background:#0b0d12f2;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:6px;display:flex;position:absolute;inset:0}.pad-edit-bar input,.pad-edit-bar select{background:var(--bg-elev-2);border:1px solid var(--border);flex:none;padding:4px;font-size:10px}.pad-edit-bar input{text-align:center;width:32px}.pad-edit-bar select{width:70px}.pad-edit-bar input[type=number]{width:30px}.pad-edit-bar .btn-icon{width:22px;height:22px;font-size:14px}.pad-empty{border:2px dashed var(--border);border-radius:var(--radius);opacity:.4;background:0 0}@media (width<=768px){.pads-layout{grid-template-columns:1fr}.pads-sidebar{max-height:150px}.pad{min-height:80px;padding:8px}.pad-label{font-size:11px}}.settings-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;display:grid}.settings-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:10px;padding:18px;display:flex}.settings-card-wide{grid-column:1/-1}.settings-card h3{text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:4px;font-size:12px;font-weight:600}.settings-row{justify-content:space-between;align-items:center;font-size:13px;display:flex}.row-label{color:var(--text-dim)}.row-value{font-variant-numeric:tabular-nums;font-weight:500}.settings-card input[type=range]{appearance:none;background:var(--bg-elev-2);border:none;border-radius:2px;width:100%;height:4px;margin:4px 0;padding:0}.settings-card input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px}.settings-card input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.settings-actions{flex-wrap:wrap;gap:8px;display:flex}.cache-list{border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:12px;overflow:hidden}.cache-list-head{background:var(--bg-elev-2);text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:8px 12px;font-size:11px;font-weight:600}.cache-list-row{border-top:1px solid var(--border);align-items:center;gap:8px;padding:8px 12px;font-size:13px;display:flex}.cache-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.cache-size{color:var(--text-dim);font-variant-numeric:tabular-nums}.app-shell{grid-template-columns:220px 1fr;width:100vw;height:100vh;display:grid;overflow:hidden}.app-main{flex-direction:column;display:flex;position:relative;overflow:hidden}.app-content{flex:1;padding:24px 32px;overflow:auto}.loading-screen{height:100vh;color:var(--text-dim);justify-content:center;align-items:center;display:flex}@media (width<=768px){.app-shell{grid-template-rows:1fr 56px;grid-template-columns:1fr}.app-content{padding:16px}}