.pricing-section{max-width:1600px;margin:0 auto;padding:80px 40px}.pricing-header{text-align:center;margin-bottom:60px}.pricing-header h2{font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 16px}.pricing-header p{font-size:1.2rem;color:#ffffffb3;margin:0 0 40px}.billing-toggle{display:inline-flex;gap:8px;background:#1a1a2e99;padding:6px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.billing-toggle button{padding:12px 24px;border:none;background:transparent;color:#fff9;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;position:relative;display:flex;align-items:center;gap:8px}.billing-toggle button.active{background:linear-gradient(135deg,#00d9ff,#09c);color:#000;box-shadow:0 4px 16px #00d9ff4d}.billing-toggle button:hover:not(.active){color:#fff;background:#ffffff0d}.save-badge{font-size:.75rem;padding:2px 8px;background:#ff6b6b33;color:#ff6b6b;border-radius:4px;font-weight:700}.billing-toggle button.active .save-badge{background:#0003;color:#000}.pricing-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;align-items:stretch}.pricing-card{background:linear-gradient(135deg,#1a1a2e99,#16213e66);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px 24px;display:flex;flex-direction:column;position:relative;transition:all .3s ease;box-shadow:0 4px 16px #0000004d}.pricing-card:hover{transform:translateY(-4px);border-color:#00d9ff4d;box-shadow:0 8px 32px #00d9ff26}.pricing-card.featured{transform:scale(1.05);background:linear-gradient(135deg,#00d9ff1f,#16213e99);border-color:#00d9ff;box-shadow:0 8px 32px #00d9ff40;z-index:1}.pricing-card.featured:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 12px 48px #00d9ff59}.popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;padding:6px 16px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.5px;box-shadow:0 4px 16px #ff475766;white-space:nowrap}.plan-header{margin-bottom:20px;text-align:center}.plan-name{font-size:1.5rem;font-weight:700;color:#fff;margin:0}.storage-badge{background:linear-gradient(135deg,#00d9ff26,#0099cc1a);border:2px solid rgba(0,217,255,.3);border-radius:12px;padding:16px;margin-bottom:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.pricing-card.featured .storage-badge{border-color:#00d9ff;box-shadow:0 0 20px #00d9ff33}.storage-icon{font-size:2rem;line-height:1}.storage-amount{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#fff,#00d9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.storage-label{font-size:.85rem;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.plan-features{flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.plan-price{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.price-amount{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#00d9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.price-period{font-size:.9rem;color:#fff9}.feature-item{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;color:#ffffffe6;line-height:1.5}.feature-item svg{flex-shrink:0;margin-top:2px}.select-plan-btn{width:100%;padding:14px 24px;background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);border:1px solid rgba(0,217,255,.3);border-radius:10px;color:#00d9ff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.select-plan-btn:hover{background:linear-gradient(135deg,#00d9ff4d,#00d9ff33);border-color:#00d9ff;transform:translateY(-2px);box-shadow:0 4px 16px #00d9ff4d}.pricing-card.featured .select-plan-btn{background:linear-gradient(135deg,#00d9ff,#09c);color:#000;border-color:#00d9ff;box-shadow:0 4px 16px #00d9ff66}.pricing-card.featured .select-plan-btn:hover{background:linear-gradient(135deg,#0fc,#00d9ff);transform:translateY(-2px);box-shadow:0 6px 24px #00d9ff80}@media (max-width: 1200px){.pricing-cards{grid-template-columns:repeat(2,1fr);gap:20px}.pricing-card.featured{transform:scale(1);grid-column:span 2;max-width:600px;margin:0 auto}.pricing-card.featured:hover{transform:translateY(-4px)}}@media (max-width: 768px){.pricing-section{padding:60px 20px}.pricing-header h2{font-size:2rem}.pricing-header p{font-size:1rem}.pricing-cards{grid-template-columns:1fr;gap:16px}.pricing-card.featured{transform:scale(1);grid-column:span 1;max-width:100%}.billing-toggle{flex-direction:column;width:100%}.billing-toggle button{width:100%;justify-content:center}.plan-name{font-size:1.3rem}.price-amount{font-size:2rem}}.home-page{width:100%;min-height:100vh;background-color:#0a0a0a;padding-top:60px}.home-hero{width:100%;max-width:1200px;margin:0 auto 40px;padding:60px 40px 40px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px}.home-hero h1{font-size:3rem;font-weight:700;color:#fff;margin:0 0 10px;text-align:center}.home-hero p{font-size:1.2rem;color:#ffffffb3;margin:0;text-align:center}.home-content{max-width:1200px;margin:0 auto;padding:40px}.loading{text-align:center;padding:40px;color:#666;font-size:1.1rem}.tracks-list-sc{display:flex;flex-direction:column;gap:16px}.track-play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;z-index:2}.track-item-sc.playing .track-play-overlay{background:#00a8ff59}.track-waveform-container-sc{flex:1;position:relative;z-index:10;display:flex;align-items:center}.track-waveform-sc{height:60px;width:100%;cursor:pointer;display:block;background:linear-gradient(135deg,#1a1a2e66,#16213e66);border-radius:8px;overflow:hidden;position:relative;transition:all .3s ease;border:1px solid rgba(255,255,255,.05);z-index:10}.waveform-placeholder-sc{height:60px;background:linear-gradient(135deg,#1a1a2e66,#16213e66);border-radius:8px;overflow:hidden;position:relative;display:flex;align-items:center;border:1px solid rgba(255,255,255,.05)}.waveform-bars-sc{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;padding:0 4px}.waveform-bar-sc{width:2px;background:linear-gradient(to bottom,#00d9ff4d,#7c3aed4d);border-radius:1px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}.track-metadata-sc{display:flex;gap:12px;align-items:center;font-size:.85rem;flex-wrap:wrap;color:#999}.track-meta-tag-sc{color:#00d9ff;background:#00d9ff1a;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:500}.track-meta-bpm-sc{color:#ff6b6b;font-weight:500}.track-meta-duration-sc{color:#999;font-weight:500}.track-meta-plays-sc{color:#00d9ff;display:flex;align-items:center;gap:4px}.artist-page{width:100%;min-height:100vh;background-color:#0a0a0a}.artist-hero{width:100%;height:400px;background-size:cover;background-position:center;position:relative;margin-bottom:0}.artist-hero-overlay{width:100%;height:100%;background:linear-gradient(to bottom,#0000004d,#0a0a0ae6);display:flex;align-items:flex-end;padding:40px}.artist-hero-content{display:flex;align-items:center;gap:30px;max-width:1200px;width:100%;margin:0 auto}.artist-avatar{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0006}.artist-hero-info{flex:1}.artist-name-row{display:flex;align-items:center;gap:16px;margin-bottom:10px}.artist-name{font-size:3rem;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.6)}.artist-plan-badge{padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:700;letter-spacing:.5px;white-space:nowrap;text-shadow:none}.artist-plan-badge-creator{background:linear-gradient(135deg,#00a8ff40,#00a8ff26);color:#00a8ff;border:1px solid rgba(0,168,255,.4);box-shadow:0 2px 12px #00a8ff33}.artist-plan-badge-pro{background:linear-gradient(135deg,#00d9ff40,#00d9ff26);color:#00d9ff;border:1px solid rgba(0,217,255,.5);box-shadow:0 2px 12px #00d9ff4d}.artist-plan-badge-label{background:linear-gradient(135deg,#ff6b6b40,#ff6b6b26);color:#ff6b6b;border:1px solid rgba(255,107,107,.4);box-shadow:0 2px 12px #ff6b6b33}.artist-username{font-size:1.2rem;color:#ffffffb3;margin:0 0 20px}.artist-social-links{display:flex;gap:15px}.social-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;font-size:1.2rem;text-decoration:none;transition:all .3s ease}.social-link:hover{background:#fff3;transform:translateY(-2px)}.artist-tabs{display:flex;gap:0;background:#1a1a1a;border-bottom:1px solid #333;padding:0 40px;position:sticky;top:60px;z-index:10}.tab{padding:16px 24px;background:transparent;border:none;color:#999;font-size:1rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s ease;position:relative}.tab:hover{color:#fff;background:#ffffff0d}.tab.active{color:#00d9ff;border-bottom-color:#00d9ff}.artist-content{max-width:1200px;margin:0 auto;padding:40px}.tracks-list{display:flex;flex-direction:column;gap:16px}.track-item-sc{display:flex;gap:20px;padding:12px;background:#1a1a1a;border-radius:8px;transition:all .3s ease;border:1px solid transparent;min-height:160px}.track-item-sc:hover{background:#222;border-color:#00d9ff4d}.track-item-sc.playing{background:#00d9ff0d;border-color:#00d9ff}.track-thumbnail-wrapper{position:relative;flex-shrink:0}.track-thumbnail{position:relative;flex-shrink:0;text-decoration:none;display:block}.track-cover{width:136px;height:136px;border-radius:6px;overflow:hidden;background:#0a0a0a;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0006}.track-cover img{width:100%;height:100%;object-fit:cover}.track-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#404040;background:linear-gradient(135deg,#1a1a1a,#2a2a2a)}.track-play-overlay{position:absolute;top:0;left:0;width:136px;height:136px;background:#0009;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;z-index:2}.track-thumbnail-wrapper:hover .track-play-overlay,.track-item-sc.playing .track-play-overlay{opacity:1}.track-item-sc.playing .track-play-overlay{background:#00a8ffd9}.track-content-sc{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.track-header-sc{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.track-info-sc{flex:1;min-width:0;text-decoration:none}.track-artist-name{font-size:.85rem;color:#999;margin-bottom:4px}.track-title-sc{font-size:1.1rem;font-weight:600;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s ease}.track-info-sc:hover .track-title-sc{color:#00d9ff}.track-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s ease}.track-item-sc:hover .track-actions{opacity:1}.track-action-btn{width:32px;height:32px;border-radius:4px;background:#ffffff1a;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;text-decoration:none}.track-action-btn:hover{background:#00d9ff33;color:#00d9ff}.track-delete-btn:hover{background:#ff6b6b33;color:#ff6b6b}.track-waveform-sc{height:80px;cursor:pointer;text-decoration:none;display:block;background:linear-gradient(135deg,#1a1a2e66,#16213e66);border-radius:8px;overflow:hidden;position:relative;transition:all .3s ease;border:1px solid rgba(255,255,255,.05)}.track-waveform-sc:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,217,255,.05) 0%,transparent 70%);pointer-events:none;z-index:0;transition:opacity .3s ease}.track-waveform-sc:hover{background:linear-gradient(135deg,#1a1a2e99,#16213e99);border-color:#00d9ff33}.track-waveform-sc:hover:before{opacity:1.5}.track-waveform-sc svg{display:block;width:100%;height:100%;position:relative;z-index:1}.waveform-loading{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:.85rem}.track-meta-sc{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.85rem;flex-wrap:wrap}.track-meta-left{display:flex;gap:12px;align-items:center}.track-meta-right{display:flex;gap:16px;align-items:center;color:#999}.track-tag{color:#00d9ff;background:#00d9ff1a;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:500}.track-bpm-sc{color:#ff6b6b;font-weight:500}.track-date-sc{color:#666}.track-plays-sc{color:#00d9ff}.track-duration-sc{color:#999;font-weight:500}.empty-state{text-align:center;padding:80px 20px;color:#666}.empty-state p{font-size:1.2rem;margin:0 0 10px}.empty-state small{font-size:.9rem;color:#555}.about-section{max-width:800px;margin:0 auto}.about-content{display:flex;flex-direction:column;gap:40px}.artist-bio h2{font-size:1.8rem;color:#fff;margin:0 0 20px}.artist-bio p{font-size:1.1rem;line-height:1.8;color:#ccc;white-space:pre-line}.social-links-section h2{font-size:1.8rem;color:#fff;margin:0 0 20px}.social-links-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.social-link-item{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#1a1a1a;border-radius:8px;text-decoration:none;color:#fff;transition:all .3s ease;border:1px solid transparent}.social-link-item:hover{background:#222;border-color:#00d9ff;transform:translateY(-2px)}.social-icon{font-size:1.5rem}.social-name{font-size:1rem;font-weight:500}.artist-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:30px;background:#1a1a1a;border-radius:12px;border:1px solid #333}.stat-item{display:flex;flex-direction:column;align-items:center;gap:8px}.stat-label{font-size:.9rem;color:#999;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.8rem;font-weight:700;color:#00d9ff}.artist-page-loading,.artist-page-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:#fff}.spinner{width:50px;height:50px;border:3px solid rgba(0,217,255,.1);border-top-color:#00d9ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes pulse-glow-artist{0%,to{box-shadow:0 0 20px #00d9ff4d,inset 0 0 20px #00d9ff0d}50%{box-shadow:0 0 40px #00d9ff99,inset 0 0 30px #00d9ff1a}}.track-item-sc.playing .track-waveform-sc{animation:pulse-glow-artist 2s ease-in-out infinite;border-color:#00d9ff80}.artist-page-error h2{font-size:2rem;margin:0 0 10px}.artist-page-error p{font-size:1.1rem;color:#999}@media (max-width: 968px){.track-item-sc{flex-direction:column;min-height:auto}.track-cover{width:100%;height:240px}.track-actions{opacity:1}.track-header-sc{flex-direction:row}}@media (max-width: 768px){.artist-hero{height:300px}.artist-hero-content{flex-direction:column;align-items:center;text-align:center;padding:20px}.artist-avatar{width:120px;height:120px}.artist-name-row{flex-direction:column;gap:8px}.artist-name{font-size:2rem}.artist-plan-badge{font-size:.75rem;padding:6px 12px}.artist-tabs{padding:0 20px;overflow-x:auto}.tab{padding:14px 16px;font-size:.9rem;white-space:nowrap}.artist-content{padding:20px}.track-meta-sc{flex-direction:column;align-items:flex-start}.track-meta-right{width:100%;justify-content:space-between}.social-links-list{grid-template-columns:1fr}}.track-page{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.track-page-new{min-height:calc(100vh - 200px);padding:var(--spacing-xl);max-width:1400px;margin:0 auto}.track-container{display:grid;grid-template-columns:1fr 3fr;gap:48px;align-items:end}.track-cover-section{position:relative;display:flex;flex-direction:column;align-items:center;gap:0}.track-cover-wrapper{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #00d9ff33;margin-bottom:-15%;z-index:1}.track-cover-image{width:100%;height:100%;object-fit:cover;display:block}.track-edit-btn-metadata{color:#00d9ff!important;border:1px solid rgba(0,217,255,.3)!important;cursor:pointer;text-decoration:none}.track-edit-btn-metadata:hover{background:#00d9ff26!important;border-color:#00d9ff!important;transform:translateY(-1px)}.track-edit-btn-metadata svg{color:#00d9ff}.track-delete-btn-metadata{color:#ff4757!important;border:1px solid rgba(255,71,87,.3)!important;cursor:pointer;background:transparent;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;transition:all .2s ease}.track-delete-btn-metadata:hover:not(:disabled){background:#ff475726!important;border-color:#ff4757!important;transform:translateY(-1px)}.track-delete-btn-metadata:disabled{opacity:.5;cursor:not-allowed}.track-delete-btn-metadata svg{color:#ff4757}.track-artist-info{position:relative;top:0;left:0;z-index:10;margin-bottom:0;width:100%;display:flex;justify-content:center}.track-artist-link{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:var(--text-secondary);font-size:14px;transition:color .2s ease}.track-artist-link:hover{color:#00d9ff}.track-artist-link:hover .track-artist-avatar{transform:scale(1.05);border-color:#0fc;box-shadow:0 6px 16px #00d9ff99,0 0 0 2px #000c}.track-artist-avatar{width:50%;aspect-ratio:1;border-radius:50%;border:4px solid #00d9ff;box-shadow:0 4px 12px #00d9ff66,0 0 0 2px #000c;transition:all .3s ease}.track-artist-name{display:block;font-size:16px;font-weight:600;color:var(--text-primary);transition:color .2s ease}.track-artist-link:hover .track-artist-name{color:#00d9ff}.track-edit-btn svg{width:16px;height:16px}.track-player-section{display:flex;flex-direction:column;gap:24px;align-self:flex-start}.track-title-new{font-size:48px;font-weight:700;color:var(--text-primary);margin:0;line-height:1.2}.track-player-controls{display:flex;flex-direction:column;gap:0;background:transparent;padding:0;border-radius:0;border:none;position:relative}.track-player-controls-inner{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#1a1a2e99,#16213e99);padding:24px;border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.1);border-bottom:none}.track-play-btn-new{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#00d9ff,#09c);border:none;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;flex-shrink:0;box-shadow:0 4px 16px #00d9ff4d;position:relative;z-index:10}.track-play-btn-new:hover{transform:scale(1.1);box-shadow:0 8px 24px #00d9ff80}.track-play-btn-new.playing{background:linear-gradient(135deg,#ff4757,#c02);box-shadow:0 4px 16px #ff475766;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{box-shadow:0 4px 16px #ff475766}50%{box-shadow:0 8px 32px #ff4757b3}}.track-waveform-container-new{flex:1;display:flex;flex-direction:column;gap:12px}.track-waveform-full-width{width:100%;background:linear-gradient(135deg,#1a1a2e99,#16213e99);padding:0 24px 24px;border-radius:0 0 12px 12px;border:1px solid rgba(255,255,255,.1);border-top:none}.waveform-header-new{display:flex;justify-content:space-between;align-items:center}.waveform-time-new{font-size:13px;color:var(--text-secondary);display:flex;gap:8px;font-family:Courier New,monospace}.waveform-toggle-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease}.waveform-toggle-btn:hover{background:#00d9ff1a;border-color:#00d9ff;color:#00d9ff}.waveform-display-new{background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#0a0a0a);border-radius:8px;height:80px;overflow:hidden;position:relative}.waveform-display-new:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,217,255,.1) 0%,transparent 70%);pointer-events:none}.waveform-static-new{width:100%;height:100%;position:relative;z-index:1}.waveform-static-new svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(0,217,255,.3))}.waveform-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:14px}.track-metadata-new{display:flex;flex-wrap:wrap;gap:16px}.metadata-item-new{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff0d;border-radius:8px;font-size:14px;color:var(--text-secondary)}.metadata-item-new svg{color:#00d9ff}.quality-badge{margin-left:6px;padding:2px 8px;background:linear-gradient(135deg,#00d9ff,#09c);color:#000;font-size:11px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}.track-description-new{background:#ffffff08;padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.track-description-new h3{font-size:18px;font-weight:600;margin:0 0 12px;color:var(--text-primary)}.track-description-new p{margin:0;color:var(--text-secondary);line-height:1.6}@media (max-width: 968px){.track-container{grid-template-columns:1fr;gap:32px}.track-cover-section{position:relative;top:0;max-width:400px;margin:0 auto}.track-artist-avatar{width:70%}.track-title-new{font-size:36px}.track-player-controls{flex-direction:column;align-items:stretch}.track-play-btn-new{align-self:center}}@media (max-width: 768px){.track-page-new{padding:var(--spacing-md)}.track-title-new{font-size:28px}.track-player-controls{padding:16px}}.track-page.loading,.track-page.error{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.track-page.loading .spinner{margin-bottom:var(--spacing-lg)}.track-page.error h1{color:var(--accent-red);margin-bottom:var(--spacing-md)}.track-page.error p{color:var(--text-secondary)}.track-hero{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:40px;margin-bottom:var(--spacing-xl);border:1px solid #333}.track-hero-header{display:flex;align-items:center;gap:24px;margin-bottom:32px;flex-wrap:wrap}.artist-info-compact{display:flex;flex-direction:column;align-items:center;gap:8px}.artist-avatar-circle{width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid #00d9ff;box-shadow:0 4px 12px #00d9ff4d}.artist-avatar-circle img{width:100%;height:100%;object-fit:cover}.artist-name-compact a{color:#00d9ff;text-decoration:none;font-size:.95rem;font-weight:600;transition:color .2s ease}.artist-name-compact a:hover{color:#00b8d9;text-decoration:underline}.track-title-main{font-size:2.5rem;font-weight:700;color:#fff;margin:0;flex:1;min-width:300px}.track-metadata-boxes{display:flex;gap:16px;flex-wrap:wrap}.metadata-box{display:flex;align-items:center;gap:12px;padding:12px 20px;background:#00d9ff1a;border:1px solid rgba(0,217,255,.3);border-radius:10px;transition:all .3s ease}.metadata-box:hover{background:#00d9ff26;border-color:#00d9ff;transform:translateY(-2px)}.metadata-icon{font-size:1.8rem}.metadata-content{display:flex;flex-direction:column;gap:2px}.metadata-label{font-size:.75rem;color:#999;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.metadata-value{font-size:1.2rem;color:#fff;font-weight:700}.hero-player-section{display:flex;align-items:center;gap:20px;background:#0000004d;border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,.1)}.hero-play-button{width:70px;height:70px;min-width:70px;border-radius:50%;background:#00d9ff;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 16px #00d9ff66}.hero-play-button:hover{background:#00b8d9;transform:scale(1.1);box-shadow:0 6px 24px #00d9ff99}.hero-play-button.playing{background:#ff6b6b;box-shadow:0 4px 16px #ff6b6b66;animation:pulse-play 2s ease-in-out infinite}@keyframes pulse-play{0%,to{box-shadow:0 4px 16px #ff6b6b66}50%{box-shadow:0 6px 24px #ff6b6bb3}}.hero-waveform-wrapper{flex:1;display:flex;flex-direction:column;gap:12px}.waveform-controls{display:flex;justify-content:space-between;align-items:center}.waveform-time{display:flex;gap:8px;font-size:1rem;font-weight:600;min-height:24px;align-items:center}.time-current{color:#00d9ff}.time-separator{color:#666}.time-total{color:#999}.waveform-mode-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#ccc;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.waveform-mode-toggle:hover{background:#ffffff1a;border-color:#00d9ff;color:#00d9ff}.waveform-mode-toggle svg{flex-shrink:0}.hero-waveform-display{width:100%;height:100px;background:#0006;border-radius:8px;overflow:hidden}.hero-waveform-pro{width:100%;height:100%}.hero-waveform-pro wave{overflow:hidden!important}.hero-waveform-static{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.hero-waveform-static svg{width:100%;height:auto;max-height:100%}.track-details{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.track-info h2{font-size:1.5rem;margin-bottom:var(--spacing-lg);color:var(--text-primary)}.description{color:var(--text-secondary);line-height:1.8;font-size:1.1rem}.no-description{color:#666;font-style:italic}@media (max-width: 768px){.track-page-new{padding:var(--spacing-lg)}.track-container{grid-template-columns:1fr;gap:32px;align-items:start}.track-cover-section{width:100%;max-width:400px;margin:0 auto}.track-artist-avatar{width:70%}.track-title-new{font-size:32px}.track-player-controls{flex-direction:column;padding:20px}.track-play-btn-new{width:56px;height:56px}.track-page{padding:var(--spacing-md)}.track-hero{padding:24px}.track-hero-header{flex-direction:column;align-items:flex-start;gap:16px}.track-title-main{font-size:1.8rem;min-width:auto;width:100%}.track-metadata-boxes{width:100%}.metadata-box{flex:1;min-width:120px}.hero-player-section{flex-direction:column;padding:16px}.hero-play-button{width:60px;height:60px;min-width:60px;align-self:center}.waveform-controls{flex-direction:column;gap:8px;align-items:flex-start}.waveform-mode-toggle{width:100%;justify-content:center}.hero-waveform-display{height:80px}.track-details{padding:var(--spacing-lg)}}.track-edit-page{min-height:calc(100vh - 200px);padding:var(--spacing-xl);max-width:1200px;margin:0 auto}.track-edit-page.loading,.track-edit-page.error{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.track-edit-container{background:linear-gradient(135deg,#1a1a2e99,#16213e99);border-radius:16px;padding:40px;border:1px solid rgba(255,255,255,.1)}.track-edit-header{margin-bottom:32px}.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);text-decoration:none;font-size:14px;margin-bottom:16px;transition:color .2s ease}.back-link:hover{color:#00d9ff}.track-edit-header h1{font-size:32px;font-weight:700;margin:0;color:var(--text-primary)}.track-edit-form{display:flex;flex-direction:column;gap:32px}.form-grid{display:grid;grid-template-columns:1fr 2fr;gap:48px}.cover-upload-section{display:flex;flex-direction:column;gap:16px}.cover-upload-wrapper{display:flex;flex-direction:column;gap:12px}.cover-preview{position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;border:2px dashed rgba(255,255,255,.2);transition:border-color .2s ease}.cover-preview:hover{border-color:#00d9ff}.cover-preview img{width:100%;height:100%;object-fit:cover;display:block}.cover-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#ffffff08;color:var(--text-secondary)}.cover-placeholder svg{color:#ffffff4d}.cover-placeholder span{font-size:14px}.cover-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .2s ease;color:#00d9ff}.cover-preview:hover .cover-overlay{opacity:1}.cover-overlay span{font-size:14px;font-weight:500}.cover-hint{font-size:13px;color:var(--text-secondary);margin:0}.form-fields-section{display:flex;flex-direction:column;gap:24px}.form-label{font-size:14px;font-weight:500;color:var(--text-primary)}.required{color:#ff4757}.form-input,.form-textarea{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 16px;color:var(--text-primary);font-size:15px;font-family:inherit;transition:all .2s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:#00d9ff;background:#ffffff14}.form-textarea{resize:vertical;min-height:100px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.track-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:12px}.track-type-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:600}.track-type-btn:hover{background:#ffffff14;border-color:#00d9ff4d;color:var(--text-primary)}.track-type-btn.active{background:linear-gradient(135deg,#00d9ff33,#09c3);border-color:#00d9ff;color:#00d9ff}.track-type-btn svg{flex-shrink:0}.error-message,.success-message{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;font-size:14px}.error-message{background:#ff47571a;border:1px solid rgba(255,71,87,.3);color:#ff4757}.success-message{background:#00d9ff1a;border:1px solid rgba(0,217,255,.3);color:#00d9ff}.form-actions{display:flex;justify-content:flex-end;gap:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.btn-primary,.btn-secondary{padding:12px 24px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;border:none;font-family:inherit}.btn-primary{background:linear-gradient(135deg,#00d9ff,#09c);color:#000}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #00d9ff4d}.btn-secondary{background:#ffffff0d;color:var(--text-primary);border:1px solid rgba(255,255,255,.1);display:inline-block;text-align:center}.btn-secondary:hover{background:#ffffff14;border-color:#fff3}@media (max-width: 968px){.form-grid{grid-template-columns:1fr;gap:32px}.cover-upload-section{max-width:400px;margin:0 auto}}@media (max-width: 768px){.track-edit-page{padding:var(--spacing-md)}.track-edit-container{padding:24px}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn-primary,.btn-secondary{width:100%}}.auth-page{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.auth-container{width:100%;max-width:450px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:0 8px 32px #0000004d}.auth-header{text-align:center;margin-bottom:var(--spacing-xl)}.auth-header h1{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--accent-blue),var(--accent-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-header p{color:var(--text-secondary);font-size:.95rem}.auth-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group input{padding:12px 16px;font-size:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast)}.form-group input:focus{border-color:var(--accent-blue);background:var(--bg-primary);box-shadow:0 0 0 3px #00a8ff1a}.form-group input::placeholder{color:var(--text-tertiary)}.btn-primary{background:linear-gradient(135deg,var(--accent-blue),#0088cc);color:#fff;padding:14px 24px;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-top:var(--spacing-sm)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#08c,#06a);transform:translateY(-1px);box-shadow:0 4px 16px #00a8ff4d}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.auth-footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--border-color);text-align:center}.auth-footer p{color:var(--text-secondary);font-size:.9rem}.auth-footer a{color:var(--accent-blue);font-weight:500;transition:color var(--transition-fast)}.auth-footer a:hover{color:var(--accent-green);text-decoration:underline}@media (max-width: 600px){.auth-container{padding:var(--spacing-lg)}.auth-header h1{font-size:1.75rem}}.image-cropper-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center}.cropper-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cropper-container{position:relative;background:#1a1a1a;border-radius:12px;width:90%;max-width:600px;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;z-index:1001;margin-bottom:120px}.cropper-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #333}.cropper-header h2{margin:0;font-size:1.1rem;font-weight:600;color:#fff}.btn-close{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.btn-close:hover{background:#333;color:#fff}.btn-close:disabled{opacity:.5;cursor:not-allowed}.cropper-area{position:relative;width:100%;height:300px;background:#000}.cropper-controls{padding:20px;border-top:1px solid #333;border-bottom:1px solid #333;display:flex;flex-direction:column;gap:16px}.control-group{display:flex;align-items:center;gap:12px}.control-group label{display:flex;align-items:center;gap:8px;font-size:.875rem;color:#ccc;min-width:100px;font-weight:500}.control-group label svg{stroke-width:2}.control-group input[type=range]{flex:1;height:4px;border-radius:2px;background:#333;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#00d9ff;cursor:pointer;transition:all .2s}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px #00d9ff99}.control-group input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#00d9ff;cursor:pointer;border:none;transition:all .2s}.control-group input[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px #00d9ff99}.control-group input[type=range]:disabled{opacity:.5;cursor:not-allowed}.control-value{min-width:50px;text-align:right;font-size:.875rem;color:#00d9ff;font-weight:600}.cropper-actions{padding:16px 20px;display:flex;justify-content:flex-end;gap:12px}.btn-cancel,.btn-save{padding:10px 24px;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;display:flex;align-items:center;gap:8px}.btn-cancel{background:#333;color:#fff}.btn-cancel:hover:not(:disabled){background:#444}.btn-save{background:linear-gradient(135deg,#00d9ff,#09c);color:#000}.btn-save:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00d9ff66}.btn-cancel:disabled,.btn-save:disabled{opacity:.5;cursor:not-allowed;transform:none}.spinner-small{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,.3);border-top-color:#000;border-radius:50%;animation:spin .6s linear infinite}@media (max-width: 768px){.cropper-container{width:95%;max-height:80vh;margin-bottom:120px}.cropper-area{height:280px}.cropper-header{padding:16px 20px}.cropper-header h2{font-size:1.1rem}.cropper-controls{padding:20px;gap:16px}.control-group{flex-direction:column;align-items:stretch;gap:8px}.control-group label{min-width:auto}.control-value{text-align:left}.cropper-actions{padding:16px 20px;flex-direction:column-reverse}.btn-cancel,.btn-save{width:100%;justify-content:center}}.upload-page{min-height:calc(100vh - 80px);padding:var(--spacing-xl)}.upload-container{max-width:800px;margin:0 auto}.upload-header{text-align:center;margin-bottom:var(--spacing-xl)}.upload-header h1{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-sm);background:linear-gradient(135deg,var(--accent-blue),var(--accent-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.upload-header p{color:var(--text-secondary);font-size:1.1rem}.storage-usage-card{background:linear-gradient(135deg,#00d9ff0d,#16213e4d);border:1px solid rgba(0,217,255,.2);border-radius:12px;padding:20px;margin-bottom:var(--spacing-xl)}.storage-usage-card .storage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.95rem}.storage-usage-card .storage-label{color:#ffffffe6;font-weight:600}.storage-usage-card .storage-values{color:#fffc;font-weight:500}.storage-usage-card .storage-bar{height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden}.storage-usage-card .storage-fill{height:100%;background:linear-gradient(90deg,#00d9ff,#0fc);transition:width .3s ease}.storage-usage-card .storage-warning{margin-top:8px;margin-bottom:0;color:#ff6b6b;font-size:.9rem;font-weight:500}.upload-form{display:flex;flex-direction:column;gap:var(--spacing-xl)}.file-drop-zone{background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);min-height:250px;display:flex;align-items:center;justify-content:center}.file-drop-zone:hover{border-color:var(--accent-blue);background:var(--bg-tertiary)}.file-drop-zone.dragging{border-color:var(--accent-green);background:#00ff880d;transform:scale(1.02)}.file-drop-zone.has-file{border-style:solid;border-color:var(--accent-green);background:#00ff8808}.file-prompt{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.upload-icon{color:var(--accent-blue);opacity:.8}.prompt-text{font-size:1.2rem;font-weight:600;color:var(--text-primary)}.prompt-subtext{font-size:1rem;color:var(--text-secondary)}.file-requirements{font-size:.85rem;color:var(--text-tertiary);margin-top:var(--spacing-sm)}.file-selected{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%}.file-icon{color:var(--accent-green)}.file-info{text-align:center}.file-name{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs);word-break:break-word}.file-size{font-size:.9rem;color:var(--text-secondary)}.btn-change-file{background:var(--bg-elevated);color:var(--text-primary);padding:10px 20px;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;border:1px solid var(--border-color);cursor:pointer;transition:all var(--transition-fast)}.btn-change-file:hover{background:var(--hover-bg);border-color:var(--accent-blue)}.track-details{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-size:.9rem;font-weight:500;color:var(--text-secondary)}.form-group input,.form-group textarea{padding:12px 16px;font-size:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-fast);font-family:inherit}.form-group input:focus,.form-group textarea:focus{border-color:var(--accent-blue);background:var(--bg-primary);box-shadow:0 0 0 3px #00a8ff1a;outline:none}.form-group input:disabled,.form-group textarea:disabled{opacity:.5;cursor:not-allowed}.form-group textarea{resize:vertical;min-height:100px}.upload-progress{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);font-size:.9rem}.progress-header span:first-child{color:var(--text-primary);font-weight:600}.progress-header span:last-child{color:var(--text-secondary)}.progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-green));transition:width .3s ease;border-radius:4px}.btn-upload{background:linear-gradient(135deg,var(--accent-blue),#0088cc);color:#fff;padding:16px 32px;font-size:1.1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);width:100%}.btn-upload:hover:not(:disabled){background:linear-gradient(135deg,#08c,#06a);transform:translateY(-2px);box-shadow:0 6px 20px #00a8ff66}.btn-upload:active:not(:disabled){transform:translateY(0)}.btn-upload:disabled{opacity:.5;cursor:not-allowed}.btn-loading{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.error-message{background:#ff44441a;border:1px solid var(--accent-red);border-radius:var(--radius-md);padding:var(--spacing-md);color:var(--accent-red);font-size:.9rem;text-align:center}.cover-upload-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.cover-upload-section h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.cover-upload-area{display:flex;justify-content:center;align-items:center}.cover-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xl);border:2px dashed var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-width:300px;min-height:200px;background:var(--bg-tertiary)}.cover-upload-label:hover{border-color:var(--accent-blue);background:var(--bg-elevated)}.cover-upload-label svg{color:var(--accent-blue);opacity:.7}.cover-upload-label span:first-of-type{font-size:1rem;font-weight:500;color:var(--text-primary)}.cover-requirements{font-size:.85rem;color:var(--text-tertiary)}.cover-preview{position:relative;display:inline-block}.cover-preview img{max-width:400px;max-height:400px;border-radius:var(--radius-md);display:block}.cover-preview-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px}.btn-edit-cover,.btn-remove-cover{background:#000c;color:#fff;border:none;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-weight:500;transition:all var(--transition-fast);display:flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-edit-cover:hover{background:#00a8ffe6;transform:translateY(-1px)}.btn-remove-cover:hover{background:#ff4444e6;transform:translateY(-1px)}.btn-edit-cover svg,.btn-remove-cover svg{flex-shrink:0}@media (max-width: 768px){.upload-page{padding:var(--spacing-lg)}.upload-header h1{font-size:2rem}.form-row{grid-template-columns:1fr}.file-drop-zone{min-height:200px;padding:var(--spacing-lg)}.upload-icon{width:48px;height:48px}.cover-upload-label{min-width:100%}.cover-preview img{max-width:100%}}.profile-edit-page{max-width:900px;margin:0 auto;padding:40px 20px}.profile-edit-container{background:var(--bg-secondary);border-radius:16px;padding:40px;border:1px solid var(--border-color)}.profile-edit-header{margin-bottom:40px}.profile-edit-header h1{font-size:2rem;margin-bottom:8px;color:var(--text-primary)}.profile-edit-header p{color:var(--text-secondary);font-size:1rem}.your-plan-section{background:linear-gradient(135deg,#00d9ff0d,#16213e4d);border:1px solid rgba(0,217,255,.2);border-radius:12px;padding:24px;margin-bottom:32px}.plan-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.plan-info-header h2{font-size:1.3rem;color:var(--text-primary);margin:0}.plan-badge-large{padding:8px 16px;border-radius:16px;font-size:.9rem;font-weight:700;letter-spacing:.5px}.plan-badge-large.plan-badge-free{background:#ffffff1a;color:#ffffffb3;border:1px solid rgba(255,255,255,.2)}.plan-badge-large.plan-badge-creator{background:linear-gradient(135deg,#00a8ff33,#00a8ff1a);color:#00a8ff;border:1px solid rgba(0,168,255,.3)}.plan-badge-large.plan-badge-pro{background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);color:#00d9ff;border:1px solid rgba(0,217,255,.4);box-shadow:0 2px 8px #00d9ff33}.plan-badge-large.plan-badge-label{background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a);color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.storage-usage{margin-bottom:20px}.storage-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9rem;color:#fffc}.storage-bar{height:10px;background:#ffffff1a;border-radius:5px;overflow:hidden}.storage-warning{margin-top:8px;color:#ff6b6b;font-size:.85rem}.plan-actions{display:flex;gap:12px}.btn-manage-plan,.btn-upgrade-plan{flex:1;padding:10px 20px;border-radius:8px;font-weight:600;text-align:center;text-decoration:none;transition:all .3s ease;font-size:.95rem}.btn-manage-plan{background:#ffffff1a;color:#ffffffe6;border:1px solid rgba(255,255,255,.2)}.btn-manage-plan:hover{background:#ffffff26;border-color:#ffffff4d}.btn-upgrade-plan{background:linear-gradient(135deg,#00d9ff,#09c);color:#000;border:1px solid #00d9ff}.btn-upgrade-plan:hover{background:linear-gradient(135deg,#0fc,#00d9ff);transform:translateY(-2px);box-shadow:0 4px 12px #00d9ff66}.profile-edit-form{display:flex;flex-direction:column;gap:40px}.form-section{display:flex;flex-direction:column;gap:24px}.form-section h2{font-size:1.5rem;color:var(--text-primary);margin-bottom:8px}.section-description{color:var(--text-secondary);font-size:.95rem;margin-top:-16px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:500;color:var(--text-primary);font-size:.95rem;display:flex;align-items:center;gap:8px}.social-icon{font-size:1.2rem}.form-group input,.form-group textarea{padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1rem;transition:all .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-blue);background:var(--bg-secondary)}.form-group textarea{resize:vertical;font-family:inherit;line-height:1.6}.form-group small{color:var(--text-tertiary);font-size:.85rem}.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.social-grid .full-width{grid-column:1 / -1}.images-grid{display:grid;grid-template-columns:1fr 2fr;gap:24px}.image-info{color:var(--text-tertiary);font-size:.85rem;margin-top:-4px;margin-bottom:12px}.image-upload-container{display:flex;flex-direction:column;gap:12px}.image-preview{border-radius:8px;overflow:hidden;border:2px solid var(--border-color);background:var(--bg-primary)}.avatar-preview{width:200px;height:200px}.hero-preview{width:100%;max-width:600px;aspect-ratio:4.8 / 1}.image-preview img{width:100%;height:100%;object-fit:cover}.file-input{display:none}.file-label{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease}.file-label:hover{background:var(--bg-secondary);border-color:var(--accent-blue)}.message-box{padding:16px;border-radius:8px;font-size:.95rem;display:flex;align-items:center;gap:12px}.error-message{background:#ff44441a;border:1px solid var(--accent-red);color:var(--accent-red)}.success-message{background:#00ff881a;border:1px solid var(--accent-green);color:var(--accent-green)}.form-actions{display:flex;gap:16px;justify-content:flex-end;padding-top:20px;border-top:1px solid var(--border-color)}.btn-primary,.btn-secondary{padding:12px 32px;border-radius:8px;font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;border:none}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover:not(:disabled){background:#0096e0;transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--bg-elevated)}.spinner-small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@media (max-width: 768px){.profile-edit-container{padding:24px}.profile-edit-header h1{font-size:1.5rem}.social-grid,.images-grid{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button{width:100%}}.subscription-page{min-height:calc(100vh - 200px);padding:80px 40px;max-width:1600px;margin:0 auto}.subscription-page.loading,.subscription-page.error{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.subscription-container h1{font-size:2.5rem;font-weight:700;color:#fff;margin:0 0 40px}.current-plan-card{background:linear-gradient(135deg,#1a1a2e99,#16213e66);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;margin-bottom:24px}.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.plan-header h2{font-size:1.8rem;font-weight:700;color:#fff;margin:0}.status-badge{padding:6px 16px;border-radius:20px;font-size:.85rem;font-weight:600}.status-badge.active{background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);color:#00d9ff;border:1px solid rgba(0,217,255,.3)}.renewal-info{color:#ffffffb3;margin-bottom:24px}.storage-usage{margin:24px 0}.storage-header{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.95rem;color:#fffc}.storage-bar{height:12px;background:#ffffff1a;border-radius:6px;overflow:hidden}.storage-fill{height:100%;background:linear-gradient(90deg,#00d9ff,#0fc);transition:width .3s ease}.storage-warning{margin-top:8px;color:#ff6b6b;font-size:.9rem}.plan-actions{display:flex;gap:12px;margin-top:24px}.upgrade-btn{flex:1;padding:14px 24px;background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);border:1px solid rgba(0,217,255,.3);border-radius:10px;color:#00d9ff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.upgrade-btn:hover{background:linear-gradient(135deg,#00d9ff4d,#00d9ff33);transform:translateY(-2px);box-shadow:0 4px 16px #00d9ff4d}.upgrade-btn.featured{background:linear-gradient(135deg,#00d9ff,#09c);color:#000;border-color:#00d9ff}.upgrade-btn.featured:hover{background:linear-gradient(135deg,#0fc,#00d9ff);box-shadow:0 6px 24px #00d9ff80}.cancel-btn{width:100%;padding:12px 24px;background:transparent;border:1px solid rgba(255,107,107,.3);border-radius:10px;color:#ff6b6b;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:16px}.cancel-btn:hover:not(:disabled){background:#ff6b6b1a;border-color:#ff6b6b}.cancel-btn:disabled{opacity:.5;cursor:not-allowed}.plan-features-list{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:24px}.plan-features-list h3{font-size:1.3rem;font-weight:600;color:#fff;margin:0 0 16px}.plan-features-list ul{list-style:none;padding:0;margin:0}.plan-features-list li{padding:8px 0;color:#ffffffe6;font-size:1rem}.available-plans-section{margin-top:60px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}.available-plans-section h2{font-size:2rem;font-weight:700;color:#fff;margin:0 0 12px;text-align:center}.available-plans-section>p{text-align:center;color:#ffffffb3;margin-bottom:40px;font-size:1.1rem}@media (max-width: 768px){.subscription-page{padding:60px 20px}.subscription-container h1{font-size:2rem}.plan-header{flex-direction:column;align-items:flex-start;gap:12px}.plan-actions{flex-direction:column}.upgrade-btn{width:100%}}.subscription-success-page{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:40px 20px}.success-container{max-width:600px;width:100%;text-align:center;background:#ffffff0d;border-radius:16px;padding:60px 40px;border:1px solid rgba(255,255,255,.1)}.success-icon{font-size:80px;margin-bottom:24px;animation:scaleIn .5s ease-out}@keyframes scaleIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.success-container h1{font-size:32px;margin-bottom:16px;color:#fff}.success-message{font-size:18px;color:#ffffffb3;margin-bottom:32px;line-height:1.6}.session-id{font-size:12px;color:#fff6;font-family:monospace;margin-bottom:32px}.continue-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 48px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}@media (max-width: 768px){.success-container{padding:40px 24px}.success-container h1{font-size:24px}.success-message{font-size:16px}}.subscription-cancel-page{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:40px 20px}.cancel-container{max-width:600px;width:100%;text-align:center;background:#ffffff0d;border-radius:16px;padding:60px 40px;border:1px solid rgba(255,255,255,.1)}.cancel-icon{font-size:80px;margin-bottom:24px;animation:shake .5s ease-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.cancel-container h1{font-size:32px;margin-bottom:16px;color:#fff}.cancel-message{font-size:18px;color:#ffffffb3;margin-bottom:16px;line-height:1.6}.cancel-info{font-size:16px;color:#ffffff80;margin-bottom:32px}.cancel-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.retry-btn,.home-btn{padding:16px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none}.retry-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.home-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}.home-btn:hover{background:#ffffff26;transform:translateY(-2px)}@media (max-width: 768px){.cancel-container{padding:40px 24px}.cancel-container h1{font-size:24px}.cancel-message{font-size:16px}.cancel-actions{flex-direction:column}.retry-btn,.home-btn{width:100%}}.header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-container{max-width:1400px;margin:0 auto;padding:var(--spacing-md) var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.25rem;font-weight:600;color:var(--text-primary);text-decoration:none;transition:color var(--transition-fast)}.logo:hover{color:var(--accent-blue)}.logo-icon{font-size:1.5rem}.nav{display:flex;gap:var(--spacing-lg);flex:1;margin-left:var(--spacing-xl)}.nav-link{color:var(--text-secondary);font-weight:500;transition:color var(--transition-fast)}.nav-link:hover{color:var(--text-primary)}.auth-buttons{display:flex;gap:12px;align-items:center}.btn{padding:10px 24px;border-radius:8px;font-weight:600;font-size:.95rem;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:none;cursor:pointer;white-space:nowrap;height:44px;line-height:1}.btn-primary{background:linear-gradient(135deg,#00a8ff,#08c);color:#fff;box-shadow:0 2px 8px #00a8ff4d}.btn-primary:hover{background:linear-gradient(135deg,#00b8ff,#09d);transform:translateY(-1px);box-shadow:0 4px 12px #00a8ff66}.btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#ffffff0d;border-color:#ffffff4d;transform:translateY(-1px)}.user-menu-container{position:relative}.user-menu-button{display:flex;align-items:center;gap:10px;padding:6px 12px;background:transparent;border:1px solid var(--border-color);border-radius:24px;cursor:pointer;transition:all .2s ease;color:var(--text-primary)}.user-menu-button:hover{background:var(--bg-elevated);border-color:var(--accent-blue)}.user-avatar,.user-avatar-placeholder{width:32px;height:32px;border-radius:50%;object-fit:cover}.user-avatar-placeholder{background:linear-gradient(135deg,var(--accent-blue),var(--accent-green));display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.9rem;color:#fff}.user-name{font-weight:500;font-size:.95rem;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plan-badge{padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:700;letter-spacing:.3px;white-space:nowrap}.plan-badge-creator{background:linear-gradient(135deg,#00a8ff33,#00a8ff1a);color:#00a8ff;border:1px solid rgba(0,168,255,.3)}.plan-badge-pro{background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);color:#00d9ff;border:1px solid rgba(0,217,255,.4);box-shadow:0 2px 8px #00d9ff33}.plan-badge-label{background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a);color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.dropdown-icon{transition:transform .2s ease}.dropdown-icon.open{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;min-width:220px;box-shadow:0 8px 24px #00000080;overflow:hidden;z-index:1000;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--text-primary);text-decoration:none;transition:all .2s ease;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;font-size:.95rem}.dropdown-item:hover{background:var(--bg-elevated);color:var(--accent-blue)}.dropdown-item svg{flex-shrink:0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dropdown-item.logout{color:var(--accent-red)}.dropdown-item.logout:hover{background:#ff44441a}.dropdown-divider{height:1px;background:var(--border-color);margin:4px 0}@media (max-width: 768px){.nav{display:none}.header-container{padding:var(--spacing-sm) var(--spacing-md)}.user-name{display:none}.user-menu-button{padding:6px}.user-dropdown{right:0;left:auto}}.global-player{position:fixed;bottom:0;left:0;right:0;background:#0a0a0a;border-top:1px solid #333;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -4px 24px #00000080}.global-player-content{max-width:1600px;margin:0 auto;padding:12px 20px;display:grid;grid-template-columns:280px 1fr 200px;gap:20px;align-items:center}.global-player-info{display:flex;flex-direction:column;gap:4px;min-width:0}.global-track-link{text-decoration:none;color:inherit;min-width:0}.global-track-title{font-size:.95rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s ease}.global-track-link:hover .global-track-title{color:#00a8ff}.global-artist-name{font-size:.85rem;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-bpm{font-size:.75rem;color:#00a8ff;font-weight:500;margin-top:2px}.global-waveform-container{position:relative;height:60px;background:linear-gradient(135deg,#0a0a0a,#16213e,#0a0a0a);border-radius:6px;overflow:hidden;box-shadow:inset 0 0 20px #00d9ff0d}.global-waveform-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,217,255,.08) 0%,transparent 70%);pointer-events:none;z-index:0}.global-waveform{width:100%;height:100%;position:relative;z-index:1;overflow:hidden!important}.global-waveform wave{overflow:hidden!important;filter:drop-shadow(0 0 6px rgba(0,217,255,.2))}.global-waveform wave canvas{width:100%!important}.global-loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#0a0a0ae6;z-index:1}.global-spinner{width:24px;height:24px;border:2px solid rgba(0,168,255,.2);border-top-color:#00a8ff;border-radius:50%;animation:spin .8s linear infinite}.loading-percent{color:#00a8ff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.background-loading-indicator{position:absolute;top:4px;right:8px;padding:4px 8px;background:#00a8ff1a;border:1px solid rgba(0,168,255,.3);border-radius:4px;color:#00a8ff;font-size:11px;font-weight:500;z-index:2;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.global-player-controls{display:flex;align-items:center;gap:16px;justify-content:flex-end}.global-play-btn{width:48px;height:48px;border-radius:50%;background:#00a8ff;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.global-play-btn:hover:not(:disabled){background:#0096e0;transform:scale(1.05)}.global-play-btn:disabled{opacity:.5;cursor:not-allowed}.global-time-display{display:flex;gap:6px;font-size:.85rem;font-variant-numeric:tabular-nums;white-space:nowrap}.global-time-current{color:#00a8ff;font-weight:500}.global-time-separator{color:#666}.global-time-remaining{color:#999}@media (max-width: 1024px){.global-player-content{grid-template-columns:220px 1fr 180px;gap:16px;padding:10px 16px}.global-play-btn{width:44px;height:44px}}@media (max-width: 768px){.global-player-content{grid-template-columns:1fr;gap:12px;padding:12px 16px}.global-waveform-container{height:50px}.global-player-controls{justify-content:space-between}.global-player-info{flex-direction:row;align-items:center;gap:12px}.global-track-link{flex:1}.global-bpm{margin-top:0;white-space:nowrap}}:root{--bg-primary: #0a0a0a;--bg-secondary: #151515;--bg-tertiary: #1f1f1f;--bg-elevated: #2a2a2a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-tertiary: #808080;--accent-blue: #00a8ff;--accent-green: #00ff88;--accent-red: #ff4444;--waveform-bass: #0066ff;--waveform-mid: #00ff66;--waveform-treble: #ff3366;--border-color: #333333;--hover-bg: #2d2d2d;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.app{min-height:100vh;display:flex;flex-direction:column;padding-bottom:90px}@media (max-width: 768px){.app{padding-bottom:140px}}.main-content{flex:1;padding:var(--spacing-lg);max-width:1400px;width:100%;margin:0 auto}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--hover-bg)}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all var(--transition-fast)}button:disabled{opacity:.5;cursor:not-allowed}input,textarea{font-family:inherit;background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:border-color var(--transition-fast)}input:focus,textarea:focus{outline:none;border-color:var(--accent-blue)}a{color:var(--accent-blue);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-green)}.spinner{width:40px;height:40px;border:3px solid var(--bg-elevated);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}