*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #07070e;--surface-1: #0d0d1c;--surface-2: #13132b;--surface-3: #1a1a38;--border: rgba(255,255,255,.06);--border-hover: rgba(255,255,255,.12);--accent: #7c5cfc;--accent-2: #a78bfa;--accent-glow: rgba(124,92,252,.25);--accent-dim: rgba(124,92,252,.15);--text-1: #f0f0ff;--text-2: rgba(240,240,255,.55);--text-3: rgba(240,240,255,.28);--success: #22d3a5;--error: #f43f5e;--single: #f59e0b;--album: #3b82f6;--ep: #a855f7;--player-h: 84px;--sidebar-w: 220px;--radius: 12px;--radius-sm: 8px;--radius-lg: 18px;font-family:DM Sans,system-ui,sans-serif}html,body,#root{height:100%;background:var(--bg);color:var(--text-1);overflow:hidden}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr var(--player-h);height:100vh;background:var(--bg)}.sidebar{grid-row:1;background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:0;overflow:hidden}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:22px 20px 18px;border-bottom:1px solid var(--border)}.logo-mark{width:34px;height:34px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 16px var(--accent-glow)}.logo-mark svg{width:18px;height:18px}.logo-text{font-family:Syne,sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em;color:var(--text-1);flex:1}.db-dot{width:7px;height:7px;border-radius:50%;transition:background .3s}.db-dot--ok{background:var(--success);box-shadow:0 0 6px var(--success)}.db-dot--error{background:var(--error)}.db-dot--connecting{background:var(--single);animation:pulse 1.2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-2);font-size:14px;font-family:DM Sans,sans-serif;font-weight:500;cursor:pointer;transition:all .15s;text-align:left;width:100%}.nav-item:hover{background:var(--surface-2);color:var(--text-1)}.nav-item--active{background:var(--accent-dim)!important;color:var(--accent-2)!important}.nav-item-icon{display:flex;width:18px;height:18px;flex-shrink:0}.nav-item-icon svg{width:18px;height:18px}.sidebar-footer{padding:16px 12px;border-top:1px solid var(--border)}.add-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 16px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:DM Sans,sans-serif;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px var(--accent-glow)}.add-btn:hover{background:#9370ff;transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow)}.add-btn span{display:flex}.add-btn svg{width:16px;height:16px}.main-content{grid-row:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}.content-header{display:flex;align-items:flex-start;justify-content:space-between;padding:28px 32px 20px;border-bottom:1px solid var(--border);flex-shrink:0;gap:16px}.header-title h1{font-family:Syne,sans-serif;font-weight:700;font-size:24px;color:var(--text-1);margin-bottom:2px}.header-title p{font-size:13px;color:var(--text-3)}.back-btn{background:none;border:none;color:var(--text-3);font-size:13px;cursor:pointer;padding:0 0 4px;transition:color .15s;font-family:DM Sans,sans-serif;display:block}.back-btn:hover{color:var(--accent-2)}.search-box{display:flex;align-items:center;gap:8px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;min-width:220px;transition:border-color .15s}.search-box:focus-within{border-color:var(--accent)}.search-icon{color:var(--text-3);display:flex}.search-icon svg{width:16px;height:16px}.search-inp{background:none;border:none;outline:none;color:var(--text-1);font-size:14px;font-family:DM Sans,sans-serif;padding:10px 0;width:100%}.search-inp::placeholder{color:var(--text-3)}.content-body{flex:1;overflow-y:auto;padding:20px 32px 24px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.content-body::-webkit-scrollbar{width:5px}.content-body::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px}.track-list{display:flex;flex-direction:column;gap:2px}.track-row{display:grid;grid-template-columns:36px 44px 1fr auto auto;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}.track-row:hover{background:var(--surface-1)}.track-row--active{background:var(--accent-dim)!important}.tr-num{text-align:center;font-size:13px;color:var(--text-3);min-width:24px}.eq-bars{display:flex;align-items:flex-end;gap:2px;height:16px}.eq-bars span{width:3px;background:var(--accent-2);border-radius:2px;animation:eq .8s ease-in-out infinite alternate}.eq-bars span:nth-child(2){animation-delay:.2s}.eq-bars span:nth-child(3){animation-delay:.4s}@keyframes eq{0%{height:4px}to{height:14px}}.tr-cover{width:44px;height:44px;border-radius:6px;background:var(--surface-2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--text-3);overflow:hidden;flex-shrink:0}.tr-cover svg{width:18px;height:18px}.tr-info{overflow:hidden}.tr-title{font-size:14px;font-weight:500;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-artist{font-size:12px;color:var(--text-2);margin-top:2px}.tr-collabs{color:var(--text-3)}.tr-meta{display:flex;align-items:center;gap:8px}.tr-year{font-size:12px;color:var(--text-3)}.tag-pill{font-size:11px;font-weight:500;padding:3px 9px;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;color:var(--text-2);white-space:nowrap}.tr-actions{display:flex;gap:4px}.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:6px;color:var(--text-3);cursor:pointer;transition:all .12s}.icon-btn svg{width:16px;height:16px}.icon-btn:hover{background:var(--surface-2);color:var(--text-1)}.icon-btn--active{color:#f43f5e!important}.icon-btn--danger:hover{color:var(--error)!important}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}.album-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s}.album-card:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 12px 40px #0006}.album-art{aspect-ratio:1;background:var(--surface-2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--text-3);position:relative;overflow:hidden}.album-art-icon svg{width:48px;height:48px}.album-art-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.album-card:hover .album-art-overlay{opacity:1}.album-play-btn{width:48px;height:48px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 16px var(--accent-glow);transform:scale(.8);transition:transform .2s}.album-card:hover .album-play-btn{transform:scale(1)}.album-play-btn svg{width:20px;height:20px;margin-left:2px}.album-info{padding:14px}.album-name{font-weight:600;font-size:14px;color:var(--text-1);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.album-artist{font-size:12px;color:var(--text-2);margin-bottom:8px}.album-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3);flex-wrap:wrap}.type-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px}.type-badge--single{background:#f59e0b26;color:var(--single)}.type-badge--album{background:#3b82f626;color:var(--album)}.type-badge--ep{background:#a855f726;color:var(--ep)}.album-hero{display:flex;gap:28px;align-items:flex-end;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border)}.album-hero-cover{width:160px;height:160px;flex-shrink:0;border-radius:var(--radius);background:var(--surface-2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--text-3);box-shadow:0 16px 48px #00000080}.album-hero-cover svg{width:56px;height:56px}.album-hero-info{flex:1}.album-hero-info h2{font-family:Syne,sans-serif;font-size:28px;font-weight:800;color:var(--text-1);margin:6px 0 4px}.album-hero-info>p{font-size:15px;color:var(--text-2)}.album-hero-meta{font-size:13px;color:var(--text-3);margin:6px 0 18px}.player-bar{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 24px;background:#0a0a14fa;border-top:1px solid var(--border);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);height:var(--player-h)}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:48px;height:48px;flex-shrink:0;border-radius:8px;background:var(--surface-2) center/cover;display:flex;align-items:center;justify-content:center;color:var(--text-3)}.player-cover svg{width:20px;height:20px}.player-track-info{flex:1;min-width:0}.player-title{font-size:14px;font-weight:500;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:12px;color:var(--text-2)}.player-center{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:340px}.player-controls{display:flex;align-items:center;gap:8px}.ctrl-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:6px;color:var(--text-2);cursor:pointer;transition:all .12s}.ctrl-btn svg{width:18px;height:18px}.ctrl-btn:hover{color:var(--text-1)}.ctrl-btn--active{color:var(--accent-2)!important}.play-pause-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--accent);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px var(--accent-glow);margin:0 4px}.play-pause-btn svg{width:20px;height:20px;margin-left:1px}.play-pause-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px var(--accent-glow)}.player-progress{display:flex;align-items:center;gap:10px;width:100%}.time-label{font-size:11px;color:var(--text-3);min-width:34px;font-variant-numeric:tabular-nums}.time-label:last-child{text-align:right}.progress-bar{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--surface-3);border-radius:10px;cursor:pointer;outline:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-2);cursor:pointer;transition:transform .1s}.progress-bar:hover::-webkit-slider-thumb{transform:scale(1.3)}.progress-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent-2);cursor:pointer;border:none}.player-volume{display:flex;align-items:center;gap:8px;justify-content:flex-end}.vol-bar{width:90px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--surface-3);border-radius:10px;cursor:pointer;outline:none}.vol-bar::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--text-2);cursor:pointer}.vol-bar::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--text-2);border:none;cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000000bf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-box{background:var(--surface-1);border:1px solid var(--border-hover);border-radius:var(--radius-lg);width:100%;max-width:680px;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px #0009;animation:slideUp .2s}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0}.modal-title{display:flex;align-items:flex-start;gap:14px}.modal-icon{width:42px;height:42px;flex-shrink:0;background:var(--surface-2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-2)}.modal-icon svg{width:22px;height:22px}.modal-title h2{font-family:Syne,sans-serif;font-size:18px;font-weight:700;color:var(--text-1)}.modal-title p{font-size:13px;color:var(--text-2);margin-top:2px}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:none;border-radius:8px;color:var(--text-2);cursor:pointer;flex-shrink:0;transition:all .12s}.modal-close:hover{background:var(--error);color:#fff}.modal-close svg{width:16px;height:16px}.modal-body{padding:20px 24px 24px}.modal-two-col{display:grid;grid-template-columns:180px 1fr;gap:24px;margin-bottom:16px}.modal-left,.modal-right{display:flex;flex-direction:column;gap:14px}.cover-preview{aspect-ratio:1;background:var(--surface-2) center/cover;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text-3);border:2px dashed var(--border)}.cover-preview-icon svg{width:40px;height:40px}.lfm-badge{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#b91c1c1a;border:1px solid rgba(185,28,28,.2);border-radius:var(--radius-sm)}.lfm-icon{color:#f43f5e;display:flex}.lfm-icon svg{width:22px;height:22px}.lfm-badge p{font-size:12px;color:var(--text-2)}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.03em;text-transform:uppercase}.required{color:var(--accent-2)}.field-hint{font-size:11px;color:var(--text-3)}.field-row{display:flex;gap:12px;align-items:flex-start}.flex-1{flex:1}.flex-2{flex:2}.description-preview{font-size:12px;color:var(--text-2);line-height:1.6;background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px}.inp{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text-1);font-size:14px;font-family:DM Sans,sans-serif;outline:none;width:100%;transition:border-color .15s}.inp:focus{border-color:var(--accent)}.inp::placeholder{color:var(--text-3)}.inp-sm{padding:7px 10px;font-size:13px}.type-selector{display:flex;gap:8px}.type-btn{flex:1;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-2);font-size:13px;font-weight:500;font-family:DM Sans,sans-serif;cursor:pointer;transition:all .12s}.type-btn:hover{border-color:var(--border-hover);color:var(--text-1)}.type-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-2)}.btn-lastfm{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#b91c1c1a;border:1px solid rgba(185,28,28,.25);border-radius:var(--radius-sm);color:#f87171;font-size:13px;font-weight:500;font-family:DM Sans,sans-serif;cursor:pointer;transition:all .15s}.btn-lastfm:hover:not(:disabled){background:#b91c1c33}.btn-lastfm:disabled{opacity:.5;cursor:default}.btn-lastfm span{display:flex}.btn-lastfm svg{width:18px;height:18px}.modal-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--border);margin-top:4px}.modal-error{font-size:13px;color:var(--error);margin-bottom:12px}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;font-family:DM Sans,sans-serif;cursor:pointer;transition:all .15s;box-shadow:0 4px 16px var(--accent-glow)}.btn-primary:hover:not(:disabled){background:#9370ff;transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:default}.btn-primary span{display:flex}.btn-primary svg{width:16px;height:16px;margin-left:1px}.btn-full{width:100%;justify-content:center;margin-top:8px}.btn-ghost{background:none;border:none;color:var(--text-2);font-size:14px;font-family:DM Sans,sans-serif;cursor:pointer;padding:8px 0;transition:color .12s}.btn-ghost:hover{color:var(--text-1)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:80px 20px;color:var(--text-3);text-align:center}.empty-state>span{display:flex}.empty-state>span svg{width:52px;height:52px}.empty-state>p{font-size:15px}.empty-sub{font-size:13px;color:var(--text-3)}.toast{position:fixed;bottom:calc(var(--player-h) + 16px);left:50%;transform:translate(-50%);padding:10px 22px;background:var(--surface-2);border:1px solid var(--border-hover);border-radius:24px;font-size:13px;color:var(--text-1);z-index:200;animation:toastIn .2s;box-shadow:0 8px 32px #0006;white-space:nowrap}.toast--success{border-color:var(--success);color:var(--success)}.toast--error{border-color:var(--error);color:var(--error)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}