.layout{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.header-content{max-width:1400px;margin:0 auto;padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:space-between;gap:2rem}.logo{display:flex;align-items:center;gap:.75rem;color:var(--text-primary);font-weight:700;font-size:1.25rem}.logo-icon{background:var(--accent-primary);color:#fff;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700}.logo:hover{color:var(--text-primary)}.nav{display:flex;gap:2rem;flex:1;justify-content:center}.nav a{color:var(--text-secondary);font-weight:500;transition:color .2s}.nav a:hover{color:var(--text-primary)}.auth-buttons,.user-menu{display:flex;align-items:center;gap:1rem}.user-name{color:var(--text-secondary);font-size:.9rem}.main{flex:1;max-width:1400px;margin:0 auto;padding:2rem;width:100%}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.875rem}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-primary)}.loader{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.header-content{padding:0 1rem}.logo-text{display:none}.nav{gap:1rem}.main{padding:1rem}}.track-card{background:var(--bg-card);border-radius:12px;overflow:hidden;transition:all .2s;display:flex;flex-direction:column;color:var(--text-primary)}.track-card:hover{transform:translateY(-4px);background:var(--bg-hover);color:var(--text-primary)}.track-cover{position:relative;aspect-ratio:1;overflow:hidden}.track-cover img{width:100%;height:100%;object-fit:cover}.cover-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff}.play-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.track-card:hover .play-overlay{opacity:1}.play-overlay svg{width:48px;height:48px;color:#fff}.track-info{padding:1rem;flex:1}.track-title{font-size:1rem;font-weight:600;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-artist{color:var(--text-secondary);font-size:.875rem;margin-bottom:.5rem}.track-meta{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted)}.genre-tag{background:var(--bg-tertiary);padding:.2rem .5rem;border-radius:4px}.track-stats{padding:.75rem 1rem;border-top:1px solid var(--border-color);font-size:.8rem;color:var(--text-muted)}.home{display:flex;flex-direction:column;gap:3rem}.hero{text-align:center;padding:4rem 2rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-radius:16px;margin-bottom:1rem}.hero h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--text-primary),var(--accent-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{color:var(--text-secondary);font-size:1.25rem;margin-bottom:2rem}.hero-buttons{display:flex;gap:1rem;justify-content:center}.section{display:flex;flex-direction:column;gap:1.5rem}.section-header{display:flex;justify-content:space-between;align-items:center}.section-header h2{font-size:1.5rem}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.5rem}.artist-card{background:var(--bg-card);border-radius:12px;padding:1.5rem;text-align:center;transition:all .2s;color:var(--text-primary)}.artist-card:hover{transform:translateY(-4px);background:var(--bg-hover);color:var(--text-primary)}.artist-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 1rem;overflow:hidden;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff}.artist-avatar img{width:100%;height:100%;object-fit:cover}.artist-card h3{font-size:1rem;margin-bottom:.25rem}.artist-card p{color:var(--text-muted);font-size:.875rem}.empty-state p{color:var(--text-secondary);margin-bottom:1.5rem}@media(max-width:768px){.hero{padding:2rem 1rem}.hero h1{font-size:2rem}.hero p{font-size:1rem}.hero-buttons{flex-direction:column}}.browse{display:flex;flex-direction:column;gap:1.5rem}.browse-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.browse-header h1{font-size:2rem}.search-form{display:flex;gap:.5rem}.search-form input{width:300px}.browse-filters{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1rem;background:var(--bg-secondary);border-radius:8px}.filter-group{display:flex;align-items:center;gap:.5rem}.filter-group label{color:var(--text-secondary);font-size:.9rem}.filter-group select{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:.5rem 1rem;color:var(--text-primary);font-size:.9rem;cursor:pointer}.results-count{color:var(--text-secondary);font-size:.9rem}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2rem}.pagination span{color:var(--text-secondary)}.empty-state{text-align:center;padding:4rem 2rem}.empty-state h2{margin-bottom:.5rem}.empty-state p{color:var(--text-secondary)}@media(max-width:768px){.browse-header{flex-direction:column;align-items:stretch}.search-form{flex-direction:column}.search-form input{width:100%}.browse-filters{flex-direction:column;gap:1rem}.filter-group{flex-direction:column;align-items:stretch}}.audio-player{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1rem 1.5rem;display:flex;align-items:center;gap:1.5rem}.player-info{display:flex;align-items:center;gap:1rem;min-width:200px}.player-cover{width:56px;height:56px;border-radius:8px;overflow:hidden;flex-shrink:0}.player-cover img{width:100%;height:100%;object-fit:cover}.player-text{display:flex;flex-direction:column;gap:.25rem;overflow:hidden}.player-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:.875rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{display:flex;align-items:center;gap:1rem;flex:1}.play-btn{width:48px;height:48px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.play-btn svg{width:24px;height:24px}.progress-section{display:flex;align-items:center;gap:.75rem;flex:1}.time{font-size:.8rem;color:var(--text-muted);min-width:40px;text-align:center}.progress-bar{flex:1;height:6px;background:var(--bg-tertiary);border-radius:3px;cursor:pointer;position:relative}.progress-fill{height:100%;background:var(--accent-primary);border-radius:3px;transition:width .1s}.progress-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 2px 4px #0000004d;opacity:0;transition:opacity .2s}.progress-bar:hover .progress-handle{opacity:1}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-icon{width:20px;height:20px;color:var(--text-secondary)}.volume-slider{width:80px;height:4px;-webkit-appearance:none;background:var(--bg-tertiary);border-radius:2px;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}@media(max-width:768px){.audio-player{flex-direction:column;gap:1rem}.player-info{width:100%}.player-controls{width:100%;flex-wrap:wrap}.volume-control{display:none}}.track-detail{display:flex;flex-direction:column;gap:2rem}.track-hero{display:flex;gap:2rem;align-items:flex-start}.track-cover-large{width:280px;height:280px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 8px 32px #0000004d}.track-cover-large img{width:100%;height:100%;object-fit:cover}.cover-placeholder-large{width:100%;height:100%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#fff}.track-info-main{flex:1;display:flex;flex-direction:column;gap:.75rem}.track-type{font-size:.75rem;font-weight:600;color:var(--accent-primary);text-transform:uppercase;letter-spacing:.1em}.track-info-main h1{font-size:2.5rem;line-height:1.1}.artist-link{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:1.1rem;width:fit-content}.artist-link:hover{color:var(--text-primary)}.artist-thumb{width:24px;height:24px;border-radius:50%;object-fit:cover}.verified-badge{width:18px;height:18px;color:var(--accent-primary)}.track-meta-info{display:flex;align-items:center;gap:1rem;color:var(--text-muted);font-size:.9rem}.genre-badge{background:var(--bg-tertiary);padding:.25rem .75rem;border-radius:20px;font-size:.8rem}.track-stats-row{display:flex;gap:2rem;margin:.5rem 0}.track-actions{display:flex;gap:1rem;margin-top:.5rem}.error-message{color:var(--error);font-size:.9rem}.track-description{background:var(--bg-secondary);padding:1.5rem;border-radius:12px}.track-description h3{margin-bottom:.75rem}.track-description p{color:var(--text-secondary);line-height:1.6}.artist-section{margin-top:1rem}.artist-section h3{margin-bottom:1rem}.artist-card-link{color:inherit}.artist-card-large{display:flex;gap:1.5rem;background:var(--bg-secondary);padding:1.5rem;border-radius:12px;transition:background .2s}.artist-card-large:hover{background:var(--bg-hover)}.artist-avatar-large{width:80px;height:80px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff}.artist-avatar-large img{width:100%;height:100%;object-fit:cover}.artist-info-large h4{font-size:1.25rem;margin-bottom:.5rem}.artist-info-large p{color:var(--text-secondary);line-height:1.5}@media(max-width:768px){.track-hero{flex-direction:column}.track-cover-large{width:100%;max-width:300px;height:auto;aspect-ratio:1;margin:0 auto}.track-info-main h1{font-size:1.75rem;text-align:center}.track-info-main{align-items:center;text-align:center}.track-stats-row{justify-content:center}}.artist-profile{display:flex;flex-direction:column;gap:2rem}.artist-hero{display:flex;gap:2rem;align-items:flex-start;padding:2rem;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-radius:16px}.artist-avatar-xl{width:180px;height:180px;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#fff;box-shadow:0 8px 32px #0000004d}.artist-avatar-xl img{width:100%;height:100%;object-fit:cover}.artist-info-hero{flex:1;display:flex;flex-direction:column;gap:1rem}.artist-name-row{display:flex;align-items:center;gap:.75rem}.artist-name-row h1{font-size:2.5rem}.verified-badge-lg{width:28px;height:28px;color:var(--accent-primary)}.artist-bio{color:var(--text-secondary);line-height:1.6;max-width:600px}.artist-stats{display:flex;gap:2.5rem;margin-top:.5rem}.stat{display:flex;flex-direction:column}.stat-value{font-size:1.5rem;font-weight:700}.stat-label{font-size:.8rem;color:var(--text-muted)}.artist-tracks-section h2{margin-bottom:1.5rem}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.empty-tracks{text-align:center;padding:3rem;background:var(--bg-secondary);border-radius:12px;color:var(--text-secondary)}.error-state{text-align:center;padding:4rem 2rem}.error-state h2{margin-bottom:1rem}@media(max-width:768px){.artist-hero{flex-direction:column;align-items:center;text-align:center}.artist-avatar-xl{width:140px;height:140px;font-size:3rem}.artist-name-row{justify-content:center}.artist-name-row h1{font-size:1.75rem}.artist-stats{justify-content:center;flex-wrap:wrap;gap:1.5rem}}.library{display:flex;flex-direction:column;gap:2rem}.library h1{font-size:2rem}.downloads-list{display:flex;flex-direction:column;gap:1rem}.download-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--bg-secondary);border-radius:12px;transition:background .2s}.download-item:hover{background:var(--bg-hover)}.download-cover{width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0}.download-cover img{width:100%;height:100%;object-fit:cover}.cover-placeholder-small{width:100%;height:100%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}.download-info{flex:1;min-width:0}.download-title{display:block;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-title:hover{color:var(--accent-primary)}.download-artist{display:block;font-size:.9rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-artist:hover{color:var(--text-primary)}.download-meta{display:flex;gap:1rem;font-size:.8rem;color:var(--text-muted);margin-top:.25rem}.download-date{font-size:.85rem;color:var(--text-muted);white-space:nowrap}.empty-library{text-align:center;padding:4rem 2rem;background:var(--bg-secondary);border-radius:16px}.empty-library h2{margin-bottom:.5rem}.empty-library p{color:var(--text-secondary);margin-bottom:1.5rem}@media(max-width:768px){.download-item{flex-wrap:wrap}.download-date{width:100%;order:3;text-align:right;margin-top:.5rem}.download-item button{order:4;width:100%}}.dashboard{display:flex;flex-direction:column;gap:2rem}.dashboard-header h1{margin-bottom:.25rem}.dashboard-header p{color:var(--text-secondary)}.dashboard-nav{display:flex;gap:.5rem;padding:.5rem;background:var(--bg-secondary);border-radius:8px;overflow-x:auto}.dashboard-nav a{padding:.75rem 1.25rem;border-radius:6px;color:var(--text-secondary);white-space:nowrap;transition:all .2s}.dashboard-nav a:hover{color:var(--text-primary);background:var(--bg-tertiary)}.dashboard-nav a.active{color:var(--text-primary);background:var(--accent-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.track-list{display:flex;flex-direction:column;gap:.5rem}.track-row{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--bg-secondary);border-radius:8px}.track-row-cover{width:48px;height:48px;border-radius:6px;overflow:hidden;flex-shrink:0}.track-row-cover img{width:100%;height:100%;object-fit:cover}.cover-placeholder-sm{width:100%;height:100%;background:linear-gradient(135deg,var(--accent-primary),var(--accent-tertiary));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}.track-row-info{flex:1;min-width:0}.track-row-title{display:block;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row-title:hover{color:var(--accent-primary)}.track-row-meta{font-size:.8rem;color:var(--text-muted)}.track-row-stats{display:flex;gap:1rem;font-size:.85rem;color:var(--text-secondary)}.delete-btn{padding:.5rem 1rem;font-size:.8rem}.recent-tracks{margin-top:1rem}.recent-tracks h3{margin-bottom:1rem}.no-tracks{color:var(--text-muted);padding:2rem;text-align:center;background:var(--bg-secondary);border-radius:8px}.upload-track h2,.my-tracks h2,.create-artist h2{margin-bottom:1.5rem}.upload-form,.artist-form{max-width:600px;display:flex;flex-direction:column;gap:1.25rem}.form-group input[type=file]{padding:1rem;background:var(--bg-secondary);border:2px dashed var(--border-color);cursor:pointer}.form-group input[type=file]:hover{border-color:var(--accent-primary)}.file-name{font-size:.85rem;color:var(--text-muted)}.error-message{color:var(--error);background:#ef44441a;padding:.75rem 1rem;border-radius:6px}.success-message{color:var(--success);background:#22c55e1a;padding:.75rem 1rem;border-radius:6px}.create-artist p{color:var(--text-secondary);margin-bottom:1.5rem}@media(max-width:768px){.track-row{flex-wrap:wrap}.track-row-stats{width:100%;justify-content:space-between}.delete-btn{width:100%}}.admin{display:flex;flex-direction:column;gap:2rem}.admin-header h1{margin-bottom:.25rem}.admin-nav{display:flex;gap:.5rem;padding:.5rem;background:var(--bg-secondary);border-radius:8px;overflow-x:auto}.admin-nav a{padding:.75rem 1.25rem;border-radius:6px;color:var(--text-secondary);white-space:nowrap;transition:all .2s}.admin-nav a:hover{color:var(--text-primary);background:var(--bg-tertiary)}.admin-nav a.active{color:var(--text-primary);background:var(--accent-primary)}.admin-stats h2{margin-bottom:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.stat-card{background:var(--bg-secondary);padding:1.5rem;border-radius:12px;display:flex;flex-direction:column;gap:.25rem}.stat-card .stat-value{font-size:2rem;font-weight:700}.stat-card .stat-label{color:var(--text-muted)}.search-form{display:flex;gap:.5rem;margin-bottom:1.5rem}.search-form input{flex:1;max-width:400px}.admin-users h2,.admin-artists h2,.admin-tracks h2{margin-bottom:1.5rem}.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--bg-secondary);border-radius:8px;overflow:hidden}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--border-color)}th{background:var(--bg-tertiary);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}td{font-size:.9rem}td a{color:var(--accent-primary)}td a:hover{text-decoration:underline}tr:last-child td{border-bottom:none}.badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}.badge.artist{background:#fa586a33;color:var(--accent-primary)}.badge.admin{background:#8b5cf633;color:#a78bfa}.badge.verified{background:#22c55e33;color:var(--success)}.badge.unverified{background:#9ca3af33;color:var(--text-muted)}.badge.published{background:#22c55e33;color:var(--success)}.badge.unpublished{background:#f59e0b33;color:var(--warning)}td.actions{display:flex;gap:.5rem}button.small{padding:.4rem .75rem;font-size:.8rem}button.danger{color:var(--error);border-color:var(--error)}button.danger:hover{background:#ef44441a}.loading{display:flex;justify-content:center;padding:4rem}@media(max-width:768px){th,td{padding:.75rem .5rem;font-size:.8rem}td.actions{flex-direction:column}}.auth-page{display:flex;justify-content:center;align-items:center;min-height:60vh}.auth-card{width:100%;max-width:400px;background:var(--bg-secondary);border-radius:16px;padding:2.5rem}.auth-header{text-align:center;margin-bottom:2rem}.auth-header h1{font-size:1.75rem;margin-bottom:.5rem}.auth-header p{color:var(--text-secondary)}.auth-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.9rem;color:var(--text-secondary)}.auth-form button{margin-top:.5rem}.error-message{color:var(--error);background:#ef44441a;padding:.75rem 1rem;border-radius:6px;font-size:.9rem}.auth-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color);color:var(--text-secondary)}.auth-footer a{color:var(--accent-primary);font-weight:500}@media(max-width:480px){.auth-card{padding:1.5rem}}:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1e1e1e;--bg-card: #1a1a1a;--bg-hover: #252525;--text-primary: #ffffff;--text-secondary: #a1a1a1;--text-muted: #666666;--accent-primary: #fa586a;--accent-secondary: #ff7b8a;--accent-tertiary: #fc2d42;--border-color: #2a2a2a;--success: #22c55e;--error: #ef4444;--warning: #f59e0b;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{margin:0;min-width:320px}a{color:var(--accent-primary);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-secondary)}button{border-radius:8px;border:none;padding:.75em 1.5em;font-size:.9rem;font-weight:500;font-family:inherit;background-color:var(--accent-primary);color:#fff;cursor:pointer;transition:all .2s}button:hover{background-color:var(--accent-secondary);transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.secondary{background-color:var(--bg-tertiary);border:1px solid var(--border-color)}button.secondary:hover{background-color:var(--bg-hover)}input,textarea{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.75em 1em;font-size:1rem;font-family:inherit;color:var(--text-primary);width:100%;transition:border-color .2s}input:focus,textarea:focus{outline:none;border-color:var(--accent-primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-color)}