:root{--bg-base: #121212;--bg-elevated: #181818;--bg-highlight: #282828;--text-primary: #ffffff;--text-muted: #b3b3b3;--accent: #1db954;--accent-hover: #1ed760;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--font-sans: "Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:#000;color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}a{color:inherit;text-decoration:none}input{font:inherit;color:inherit}.app-shell{display:grid;grid-template-columns:240px 1fr;grid-template-rows:1fr 90px;grid-template-areas:"sidebar main" "player  player";height:100vh;gap:var(--space-2);padding:var(--space-2);background:#000}.sidebar{grid-area:sidebar;background:var(--bg-base);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-4);overflow-y:auto}.sidebar-brand{font-size:24px;font-weight:700;color:var(--accent);margin-bottom:var(--space-6);letter-spacing:-.02em}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-link{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-muted);font-weight:600;transition:color .15s}.sidebar-link:hover{color:var(--text-primary)}.sidebar-link.active{color:var(--text-primary);background:var(--bg-highlight)}.app-main{grid-area:main;background:var(--bg-elevated);border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);background:var(--bg-elevated);border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}.top-bar-search input{background:var(--bg-highlight);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);border:0;color:var(--text-primary);width:320px;outline:none}.top-bar-search input::placeholder{color:var(--text-muted)}.app-main-content{flex:1;overflow-y:auto;padding:var(--space-6)}.app-main-content h1{font-size:28px;font-weight:700;margin-bottom:var(--space-4)}.app-main-content p{color:var(--text-muted)}.player-bar{grid-area:player;background:var(--bg-base);border-radius:var(--radius-lg);padding:0 var(--space-4);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:var(--space-4);color:var(--text-primary);font-size:13px}.player-bar-track{display:flex;align-items:center;gap:var(--space-3);min-width:0}.player-bar-empty{color:var(--text-muted);font-size:13px}.player-bar-cover{width:56px;height:56px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-highlight);flex-shrink:0}.player-bar-cover img{width:100%;height:100%;object-fit:cover;display:block}.player-bar-cover-placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--text-muted);font-size:22px}.player-bar-meta{min-width:0}.player-bar-title{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-bar-artist{color:var(--text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-bar-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.player-bar-buttons{display:flex;align-items:center;gap:var(--space-3)}.player-bar-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;color:var(--text-muted);transition:color .15s,background .15s,transform .15s}.player-bar-btn:hover:not(:disabled){color:var(--text-primary)}.player-bar-btn:disabled{opacity:.4;cursor:not-allowed}.player-bar-btn-play{background:var(--text-primary);color:#000;width:36px;height:36px}.player-bar-btn-play:hover:not(:disabled){background:var(--accent);color:#000;transform:scale(1.06)}.player-bar-progress{display:flex;align-items:center;gap:var(--space-3);width:100%;max-width:600px}.player-bar-time{color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums;min-width:40px;text-align:center}.player-bar-volume{display:flex;align-items:center;gap:var(--space-2);justify-content:flex-end;color:var(--text-muted)}.player-bar-volume-slider{width:100px}.player-bar-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:linear-gradient(to right,var(--text-primary) 0%,var(--text-primary) var(--filled, 0%),rgba(255,255,255,.15) var(--filled, 0%),rgba(255,255,255,.15) 100%);border-radius:999px;outline:none;cursor:pointer;flex:1}.player-bar-slider:hover:not(:disabled){background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--filled, 0%),rgba(255,255,255,.15) var(--filled, 0%),rgba(255,255,255,.15) 100%)}.player-bar-slider:disabled{cursor:not-allowed;opacity:.5}.player-bar-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;border-radius:999px;background:var(--text-primary);cursor:pointer;transition:width .1s,height .1s}.player-bar-slider:hover:not(:disabled)::-webkit-slider-thumb{width:12px;height:12px;background:var(--text-primary)}.player-bar-slider::-moz-range-thumb{width:0;height:0;border-radius:999px;background:var(--text-primary);border:0;cursor:pointer}.player-bar-slider:hover:not(:disabled)::-moz-range-thumb{width:12px;height:12px}.track-row.is-current .track-title{color:var(--accent)}.track-playing-indicator{color:var(--accent);font-size:11px}.track-row{cursor:pointer;-webkit-user-select:none;user-select:none}.track-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-1);opacity:0;transition:opacity .15s}.track-row:hover .track-row-actions,.track-row.is-current .track-row-actions{opacity:1}.track-icon-btn{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--text-muted);font-size:14px;transition:color .15s,background .15s}.track-icon-btn:hover:not(:disabled){color:var(--text-primary);background:#ffffff14}.track-icon-btn:disabled{opacity:.3;cursor:not-allowed}.track-icon-btn-danger:hover:not(:disabled){color:#ff8080;background:#ff50501a}.track-like{color:var(--text-muted)}.track-like:hover:not(:disabled){color:var(--text-primary);background:#ffffff14}.track-like.is-liked{color:var(--accent);opacity:1!important}.track-row .track-row-actions .track-like.is-liked{opacity:1}.track-row:has(.track-like.is-liked) .track-row-actions{opacity:1}.add-to-playlist{position:relative}.track-add{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--text-muted);font-size:18px;font-weight:500;transition:color .15s,background .15s}.track-add:hover{color:var(--accent);background:#1db9541a}.add-to-playlist-popover{position:absolute;top:calc(100% + 4px);right:0;background:var(--bg-highlight);border-radius:var(--radius-md);padding:var(--space-2);min-width:220px;max-height:280px;overflow-y:auto;box-shadow:0 8px 24px #0009;z-index:50}.add-to-playlist-header{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:var(--space-2) var(--space-3) var(--space-1)}.add-to-playlist-empty{padding:var(--space-2) var(--space-3);color:var(--text-muted);font-size:12px}.add-to-playlist-list{list-style:none}.add-to-playlist-list button{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:13px;color:var(--text-primary);transition:background .1s}.add-to-playlist-list button:hover:not(:disabled){background:#ffffff14}.add-to-playlist-list button:disabled{opacity:.5;cursor:not-allowed}.add-to-playlist-feedback{padding:var(--space-2) var(--space-3);font-size:12px;color:var(--accent)}.sidebar-section{margin-top:var(--space-6);border-top:1px solid rgba(255,255,255,.06);padding-top:var(--space-4)}.sidebar-section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.sidebar-add-btn{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;color:var(--text-muted);font-size:16px;transition:color .15s,background .15s}.sidebar-add-btn:hover{color:var(--text-primary);background:#ffffff14}.sidebar-empty{padding:var(--space-2) var(--space-3);color:var(--text-muted);font-size:12px}.sidebar-playlist-list{list-style:none;display:flex;flex-direction:column;gap:1px}.sidebar-playlist-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-muted);font-size:13px;transition:color .15s,background .15s}.sidebar-playlist-link:hover{color:var(--text-primary)}.sidebar-playlist-link.active{color:var(--text-primary);background:var(--bg-highlight)}.sidebar-playlist-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-playlist-count{font-size:11px;color:var(--text-muted);flex-shrink:0}.playlist-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid rgba(255,255,255,.06)}.playlist-kicker{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.playlist-title{font-size:36px;font-weight:800;margin:var(--space-1) 0;letter-spacing:-.02em}.playlist-description{color:var(--text-muted);margin-bottom:var(--space-2)}.playlist-meta{color:var(--text-muted);font-size:13px}.playlist-actions{display:flex;gap:var(--space-2)}.auth-field-textarea{background:var(--bg-highlight);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:14px;outline:none;font-family:inherit;resize:vertical;transition:border-color .15s}.auth-field-textarea:focus{border-color:var(--accent)}.user-menu{position:relative}.user-menu-summary{list-style:none;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:999px;background:var(--bg-base);cursor:pointer;font-weight:600}.user-menu-summary::-webkit-details-marker{display:none}.user-menu-avatar{width:28px;height:28px;border-radius:999px;background:var(--accent);color:#000;display:grid;place-items:center;font-size:13px;font-weight:700}.user-menu-dropdown{position:absolute;top:calc(100% + var(--space-2));right:0;background:var(--bg-highlight);border-radius:var(--radius-md);padding:var(--space-2);min-width:200px;box-shadow:0 8px 24px #00000080;z-index:10}.user-menu-email{padding:var(--space-2) var(--space-3);color:var(--text-muted);font-size:12px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:var(--space-1);word-break:break-all}.user-menu-item{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-primary);font-weight:500}.user-menu-item:hover{background:#ffffff0d}.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(180deg,#181818,#000 60%);padding:var(--space-6)}.auth-card{background:var(--bg-base);padding:var(--space-8);border-radius:var(--radius-lg);width:min(420px,100%);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:0 16px 40px #0009}.auth-brand{font-size:28px;font-weight:700;color:var(--accent);text-align:center;letter-spacing:-.02em}.auth-title{font-size:20px;font-weight:700;text-align:center;margin-bottom:var(--space-2)}.auth-field{display:flex;flex-direction:column;gap:var(--space-1)}.auth-field span{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.auth-field input{background:var(--bg-highlight);border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:15px;outline:none;transition:border-color .15s}.auth-field input:focus{border-color:var(--accent)}.auth-error{background:#ff50501a;color:#ff8080;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:13px}.auth-submit{background:var(--accent);color:#000;font-weight:700;padding:var(--space-3);border-radius:999px;font-size:15px;margin-top:var(--space-2);transition:background .15s,transform .15s}.auth-submit:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.02)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-footer{text-align:center;color:var(--text-muted);font-size:13px}.auth-footer a{color:var(--accent);font-weight:600}.auth-loading{display:grid;place-items:center;height:100vh;color:var(--text-muted);background:#000}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.page-loading{color:var(--text-muted);padding:var(--space-6) 0}.btn-primary,.btn-secondary{font-weight:700;padding:var(--space-2) var(--space-6);border-radius:999px;font-size:14px;transition:background .15s,transform .15s,color .15s}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.04)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover:not(:disabled){border-color:var(--text-primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.track-list-empty{color:var(--text-muted);padding:var(--space-8) 0;text-align:center}.track-list{display:flex;flex-direction:column}.track-list-header,.track-row{display:grid;grid-template-columns:32px 56px 2fr 1.5fr 60px 110px;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3)}.track-list-header{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:var(--space-2)}.track-row{border-radius:var(--radius-sm);transition:background .1s}.track-row:hover{background:#ffffff0a}.track-row:hover .track-delete{opacity:1}.track-index{color:var(--text-muted);text-align:center;font-size:13px}.track-cover{width:48px;height:48px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-highlight)}.track-cover img{width:100%;height:100%;object-fit:cover;display:block}.track-cover-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:22px;color:var(--text-muted)}.track-meta{min-width:0}.track-title{color:var(--text-primary);font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist,.track-album{color:var(--text-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{color:var(--text-muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}.track-delete{opacity:0;font-size:18px;color:var(--text-muted);width:28px;height:28px;border-radius:999px;display:grid;place-items:center;transition:opacity .15s,color .15s,background .15s}.track-delete:hover:not(:disabled){color:#ff8080;background:#ff50501a}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;z-index:100;padding:var(--space-4)}.modal{background:var(--bg-elevated);border-radius:var(--radius-lg);width:min(560px,100%);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:0 16px 40px #0009}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:20px;font-weight:700}.modal-close{font-size:22px;color:var(--text-muted);width:32px;height:32px;border-radius:999px;display:grid;place-items:center;transition:background .15s}.modal-close:hover:not(:disabled){background:var(--bg-highlight);color:var(--text-primary)}.modal-dropzone{border:2px dashed rgba(255,255,255,.15);border-radius:var(--radius-md);padding:var(--space-8);text-align:center;cursor:pointer;transition:border-color .15s,background .15s;min-height:160px;display:flex;align-items:center;justify-content:center}.modal-dropzone:hover{border-color:var(--accent);background:#1db9540d}.modal-dropzone.has-files{align-items:flex-start;justify-content:stretch;text-align:left;padding:var(--space-4)}.modal-dropzone-empty{color:var(--text-muted)}.modal-dropzone-icon{font-size:36px;color:var(--accent);margin-bottom:var(--space-2);font-weight:300}.modal-dropzone-sub{font-size:12px;margin-top:var(--space-1);opacity:.7}.modal-files{display:flex;flex-direction:column;gap:var(--space-1);width:100%;max-height:280px;overflow-y:auto}.modal-file-row{display:grid;grid-template-columns:1fr auto 28px;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);background:var(--bg-base);border-radius:var(--radius-sm)}.modal-file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.modal-file-size{color:var(--text-muted);font-size:12px;font-variant-numeric:tabular-nums}.modal-file-remove{font-size:18px;color:var(--text-muted);width:24px;height:24px;border-radius:999px;display:grid;place-items:center}.modal-file-remove:hover:not(:disabled){background:#ffffff14;color:var(--text-primary)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-3)}