@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}:root{--font-mono:"Share Tech Mono",monospace;--font-ui:"Rajdhani",sans-serif;--bg-0:#06060a;--bg-1:#0d0d14;--bg-2:#12121c;--bg-3:#1a1a28;--border:rgba(255,255,255,0.07);--border-bright:rgba(255,255,255,0.14);--text-primary:rgba(255,255,255,0.92);--text-secondary:rgba(255,255,255,0.45);--text-muted:rgba(255,255,255,0.22);--accent:#00f5ff;--accent-dim:rgba(0,245,255,0.15);--accent-glow:rgba(0,245,255,0.35);--radius-sm:3px;--radius:5px}body{color:var(--text-primary);font-family:var(--font-ui);font-size:14px;letter-spacing:.02em;-webkit-font-smoothing:antialiased}.player-wrapper,body{background:var(--bg-0)}.player-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.player-wrapper.ultra-dark{--bg-0:#000000;--bg-1:#050505;--bg-2:#0a0a0a;--bg-3:#111111}.player-header{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg-1);flex-shrink:0}.logo{font-family:var(--font-mono);font-size:18px;color:var(--accent);letter-spacing:.1em;text-shadow:0 0 10px var(--accent-glow)}.logo-bracket{color:rgba(255,255,255,.3)}.logo-sub{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase}.header-status,.logo-sub{color:var(--text-secondary)}.header-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.15em}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);transition:background .3s}.status-dot.status-live{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.player-main{min-height:0;display:flex;flex:1 1;overflow:hidden}.canvas-wrapper{position:relative;flex:1 1;min-width:0;min-height:0;background:var(--bg-0)}.canvas-overlay{position:absolute;inset:0;justify-content:center;pointer-events:none}.canvas-overlay,.drop-hint{display:flex;align-items:center}.drop-hint{flex-direction:column;gap:12px;color:var(--text-muted)}.drop-hint svg{width:48px;height:48px;opacity:.3}.drop-hint p{font-family:var(--font-mono);font-size:13px;letter-spacing:.2em}.drop-hint-sub{font-size:11px!important;letter-spacing:.1em!important;opacity:.6}.controls-wrapper{width:220px;flex-shrink:0;border-left:1px solid var(--border);background:var(--bg-1);overflow-y:auto;overflow-x:hidden}.controls-wrapper::-webkit-scrollbar{width:2px}.controls-wrapper::-webkit-scrollbar-track{background:transparent}.controls-wrapper::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:2px}.controls-panel{display:flex;flex-direction:column;gap:0;padding:16px 14px}.controls-row{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--border)}.controls-row:last-child{border-bottom:none}.btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--border-bright);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn svg{width:12px;height:12px;flex-shrink:0}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:0 0 8px var(--accent-dim)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{border-color:var(--accent);color:var(--accent)}.btn-ghost{border-color:var(--border)}.btn-active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.btn-icon{padding:5px 8px}.btn-icon svg{width:14px;height:14px}.btn-sm{font-size:9px;padding:4px 8px}.mode-row{flex-wrap:wrap}.btn-mode{font-size:9px;padding:4px 7px;flex:1 1;justify-content:center}.btn-mode-active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);box-shadow:0 0 6px var(--accent-dim)}.progress-slider,.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1 1;height:2px;border-radius:1px;background:var(--bg-3);cursor:pointer;outline:none}.progress-slider::-webkit-slider-thumb,.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent-glow);cursor:pointer}.progress-row{padding:4px 0 8px;border-bottom:1px solid var(--border)}.progress-slider{width:100%}.label{font-family:var(--font-mono);font-size:9px;color:var(--text-muted);letter-spacing:.15em;white-space:nowrap}.value-label{min-width:24px;text-align:right}.time-display,.value-label{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary)}.time-display{letter-spacing:.05em;margin-left:auto;white-space:nowrap}.color-dot{width:16px;height:16px;border-radius:50%;background:var(--dot-color);border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;flex-shrink:0}.color-dot:hover{transform:scale(1.2);box-shadow:0 0 8px var(--dot-color)}.color-dot-active{border-color:white;box-shadow:0 0 10px var(--dot-color);transform:scale(1.1)}.level-meters{display:flex;flex-direction:column;gap:6px;padding:10px 0 0}.level-meter{display:flex;align-items:center;gap:6px}.level-label{font-family:var(--font-mono);font-size:8px;letter-spacing:.15em;color:var(--text-muted);width:26px;flex-shrink:0}.level-track{flex:1 1;height:2px;background:var(--bg-3);border-radius:1px;overflow:hidden}.level-fill{height:100%;background:var(--accent);border-radius:1px;transition:width .05s linear;box-shadow:0 0 4px var(--accent-glow)}.level-value{font-family:var(--font-mono);font-size:8px;color:var(--text-muted);width:18px;text-align:right}.icon-sm{width:14px;height:14px}[data-fullscreen=true] .controls-wrapper{position:fixed;right:0;top:0;bottom:0;z-index:10;transform:translateX(100%);transition:transform .3s ease}[data-fullscreen=true]:hover .controls-wrapper{transform:translateX(0)}[data-fullscreen=true] .player-header{position:fixed;top:0;left:0;right:220px;z-index:10;opacity:0;transition:opacity .3s ease}[data-fullscreen=true]:hover .player-header{opacity:1}@media (max-width:680px){.player-main{flex-direction:column}.controls-wrapper{width:100%;border-left:none;border-top:1px solid var(--border);max-height:45vh;overflow-y:auto}.controls-panel{flex-direction:row;flex-wrap:wrap;gap:0}.controls-row{flex:0 0 50%;padding:6px 8px;border-bottom:1px solid var(--border)}.mode-row{flex:0 0 100%}.level-meters{flex:0 0 100%;padding:6px 8px}.progress-row{flex:0 0 100%;padding:4px 8px}.canvas-wrapper{flex:1 1;min-height:0}}