:root{--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--bg-app: #0a0a0c;--bg-surface: #141418;--bg-surface-translucent: rgba(20, 20, 24, .78);--bg-surface-elevated: #1e1e24;--bg-hover: rgba(255, 255, 255, .06);--bg-active: rgba(255, 255, 255, .12);--text-main: #f5f5f7;--text-muted: #86868b;--text-subtle: #55555c;--accent: #fa2d48;--accent-rgb: 250, 45, 72;--accent-hover: #ff3b56;--accent-subtle: rgba(250, 45, 72, .15);--border-subtle: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .16);--radius-card: 14px;--radius-btn: 10px;--radius-pill: 9999px;--radius-input: 8px;--shadow-subtle: 0 4px 20px rgba(0, 0, 0, .4);--shadow-elevated: 0 12px 40px rgba(0, 0, 0, .6);--ease-spring: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-smooth: .25s;--mini-player-height: 68px;--top-nav-height: 60px}[data-theme=light]{--bg-app: #f5f5f7;--bg-surface: #ffffff;--bg-surface-translucent: rgba(255, 255, 255, .82);--bg-surface-elevated: #f0f0f2;--bg-hover: rgba(0, 0, 0, .04);--bg-active: rgba(0, 0, 0, .08);--text-main: #1d1d1f;--text-muted: #6e6e73;--text-subtle: #a1a1a6;--border-subtle: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .15);--shadow-subtle: 0 4px 20px rgba(0, 0, 0, .06);--shadow-elevated: 0 12px 36px rgba(0, 0, 0, .12)}@media (prefers-color-scheme: light){:root:not([data-theme=dark]){--bg-app: #f5f5f7;--bg-surface: #ffffff;--bg-surface-translucent: rgba(255, 255, 255, .82);--bg-surface-elevated: #f0f0f2;--bg-hover: rgba(0, 0, 0, .04);--bg-active: rgba(0, 0, 0, .08);--text-main: #1d1d1f;--text-muted: #6e6e73;--text-subtle: #a1a1a6;--border-subtle: rgba(0, 0, 0, .08);--border-hover: rgba(0, 0, 0, .15);--shadow-subtle: 0 4px 20px rgba(0, 0, 0, .06);--shadow-elevated: 0 12px 36px rgba(0, 0, 0, .12)}}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-main);min-height:100vh;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit;font-size:.95rem;border:none;background:none;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border-radius:var(--radius-btn);transition:all var(--duration-fast) var(--ease-spring)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,textarea,select{font-family:inherit;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-main);border-radius:var(--radius-input);padding:10px 14px;font-size:.95rem;transition:border-color var(--duration-fast)}input:focus,textarea:focus{border-color:var(--accent)}.app-container{display:flex;flex-direction:column;min-height:100vh;padding-bottom:calc(var(--mini-player-height) + 24px)}.top-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:var(--top-nav-height);padding:0 20px;background:var(--bg-surface-translucent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;letter-spacing:-.02em;color:var(--text-main);cursor:pointer}.brand-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--accent);color:#fff;border-radius:8px;font-size:1rem}.nav-tabs{display:flex;background:var(--bg-surface-elevated);padding:4px;border-radius:var(--radius-pill);gap:2px}.nav-tab-btn{padding:6px 16px;min-height:34px;font-size:.88rem;font-weight:500;border-radius:var(--radius-pill);color:var(--text-muted)}.nav-tab-btn.active{background:var(--bg-surface);color:var(--text-main);box-shadow:0 2px 8px #00000026}.nav-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:var(--radius-pill);color:var(--text-muted)}.icon-btn:hover{background:var(--bg-hover);color:var(--text-main)}.btn-primary{background:var(--accent);color:#fff;padding:8px 18px;border-radius:var(--radius-pill);font-weight:600}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-main);padding:8px 16px;border-radius:var(--radius-pill);font-weight:500}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-hover)}.main-content{flex:1;max-width:1280px;width:100%;margin:0 auto;padding:24px 20px}.view-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.view-title{font-size:2rem;font-weight:700;letter-spacing:-.03em}.view-subtitle{color:var(--text-muted);font-size:.95rem;margin-top:4px}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.playlist-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:16px;display:flex;flex-direction:column;cursor:pointer;position:relative;transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast)}.playlist-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-subtle);border-color:var(--border-hover)}.playlist-card.active-card{border-color:var(--accent)}.card-art{width:100%;aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;margin-bottom:14px;box-shadow:0 4px 12px #0003}.card-title{font-weight:600;font-size:1.05rem;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{color:var(--text-muted);font-size:.85rem;margin-top:4px}.card-new-art{border:2px dashed var(--border-hover);background:var(--bg-surface-elevated);color:var(--text-muted);font-size:2rem}.playlist-hero{display:flex;gap:32px;margin-bottom:36px;align-items:center}.playlist-hero-art{width:200px;height:200px;min-width:200px;border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center;font-size:4rem;color:#fff;box-shadow:var(--shadow-subtle)}.playlist-info{flex:1}.playlist-badge{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:6px}.playlist-title-lg{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:8px}.playlist-desc{color:var(--text-muted);font-size:1rem;margin-bottom:18px;max-width:600px}.playlist-stats{display:flex;gap:16px;color:var(--text-muted);font-size:.88rem;margin-bottom:20px}.playlist-actions{display:flex;flex-wrap:wrap;gap:10px}.tracklist-container{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden}.track-row{display:grid;grid-template-columns:44px 50px 1fr 140px 60px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border-subtle);transition:background var(--duration-fast);user-select:none}.track-row:last-child{border-bottom:none}.track-row:hover{background:var(--bg-hover)}.track-row.is-active{background:var(--accent-subtle)}.track-row.is-unplayable{opacity:.5}.track-index{color:var(--text-muted);font-size:.9rem;text-align:center}.track-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--bg-surface-elevated)}.track-details{padding:0 16px;overflow:hidden}.track-title{font-weight:500;font-size:.95rem;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row.is-active .track-title{color:var(--accent);font-weight:600}.track-artist{font-size:.82rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-tag-container{display:flex;gap:6px;align-items:center}.badge-unplayable{background:#ff453a33;color:#ff453a;font-size:.72rem;padding:2px 6px;border-radius:4px;font-weight:600}.track-actions{display:flex;justify-content:flex-end;gap:4px}.drag-handle{cursor:grab;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px}.track-row.dragging{opacity:.4;background:var(--bg-active)}.track-row.drag-over{border-top:2px solid var(--accent)}.now-playing-container{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}.player-stage{background:#000;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-elevated);position:relative;aspect-ratio:16 / 9;width:100%}.youtube-iframe-holder{width:100%;height:100%}.now-playing-controls{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column}.np-track-title{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}.np-track-artist{font-size:1.1rem;color:var(--text-muted);margin-bottom:24px}.scrubber-container{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.scrubber-bar{position:relative;height:6px;background:var(--bg-surface-elevated);border-radius:var(--radius-pill);cursor:pointer;touch-action:none}.scrubber-progress{position:absolute;top:0;left:0;height:100%;background:var(--accent);border-radius:var(--radius-pill);width:0%}.scrubber-bar:hover .scrubber-thumb,.scrubber-bar:active .scrubber-thumb{transform:scale(1.3)}.scrubber-thumb{position:absolute;right:-5px;top:-3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0000004d;transition:transform var(--duration-fast)}.scrubber-times{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted);font-family:var(--font-mono)}.playback-buttons{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:28px}.btn-play-pause{width:64px;height:64px;min-width:64px;min-height:64px;border-radius:50%;background:var(--text-main);color:var(--bg-app);font-size:1.5rem;box-shadow:var(--shadow-subtle)}.btn-play-pause:hover{transform:scale(1.05);background:#fff}.btn-skip{font-size:1.3rem;color:var(--text-main)}.btn-skip:hover{color:var(--accent)}.secondary-controls{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid var(--border-subtle)}.control-toggle.is-active{color:var(--accent);background:var(--accent-subtle)}.volume-control{display:flex;align-items:center;gap:8px;width:130px}.volume-slider{flex:1;accent-color:var(--accent);cursor:pointer}.mini-player{position:fixed;bottom:12px;left:20px;right:20px;max-width:1240px;margin:0 auto;height:var(--mini-player-height);background:var(--bg-surface-translucent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-subtle);border-radius:var(--radius-card);display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:var(--shadow-elevated);z-index:40;cursor:pointer}.mini-player-progress{position:absolute;top:0;left:0;right:0;height:3px;background:transparent}.mini-player-fill{height:100%;background:var(--accent);width:0%;border-top-left-radius:var(--radius-card)}.mini-left{display:flex;align-items:center;gap:14px;overflow:hidden;flex:1}.mini-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg-surface-elevated)}.mini-meta{overflow:hidden}.mini-title{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-artist{font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-controls{display:flex;align-items:center;gap:10px}.focus-mode-overlay{position:fixed;inset:0;background:#000;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px}.focus-player-wrap{width:100%;max-width:1100px;aspect-ratio:16 / 9;border-radius:var(--radius-card);overflow:hidden;box-shadow:0 20px 60px #000c}.focus-controls{margin-top:24px;width:100%;max-width:800px;text-align:center;transition:opacity var(--duration-smooth)}.focus-controls.fade-out{opacity:0;pointer-events:none}.focus-exit-btn{position:absolute;top:20px;right:20px;background:#ffffff26;color:#fff;border-radius:var(--radius-pill);padding:8px 16px;backdrop-filter:blur(10px)}.modal-backdrop{position:fixed;inset:0;background:#000000b3;backdrop-filter:blur(8px);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}.modal-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-elevated);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.3rem;font-weight:700}.error-banner{background:#ff453a1f;border:1px solid rgba(255,69,58,.3);color:#ff453a;padding:12px 16px;border-radius:var(--radius-input);font-size:.88rem}.error-list{max-height:140px;overflow-y:auto;font-size:.85rem;color:#ff6961;background:var(--bg-surface-elevated);padding:10px;border-radius:6px;list-style-position:inside}.dropzone{border:2px dashed var(--border-hover);border-radius:var(--radius-card);padding:24px;text-align:center;cursor:pointer;background:var(--bg-surface-elevated);transition:border-color var(--duration-fast)}.dropzone:hover,.dropzone.drag-active{border-color:var(--accent);background:var(--accent-subtle)}@media (max-width: 768px){.now-playing-container{grid-template-columns:1fr;gap:20px}.playlist-hero{flex-direction:column;align-items:flex-start;gap:20px}.playlist-hero-art{width:140px;height:140px;min-width:140px}.playlist-title-lg{font-size:1.8rem}.track-row{grid-template-columns:32px 40px 1fr 40px;padding:6px 10px}.track-tag-container{display:none}.top-nav{padding:0 12px}.mini-player{left:10px;right:10px;bottom:8px}}