@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-color:#fff;--bg-light:#fafafa;--bg-subtle:#f4f4f5;--card-bg:#fff;--text-primary:#18181b;--text-secondary:#71717a;--text-muted:#a1a1aa;--solid-dark:#18181b;--solid-dark-text:#fff;--border-color:#e4e4e7;--border-light:#f0f0f0;--hover-bg:#f4f4f5;--error-bg:#fef2f2;--error-border:#ef4444;--error-text:#b91c1c;--success-bg:#f0fdf4;--success-border:#bbf7d0;--success-text:#15803d}[data-theme=dark]{--bg-color:#09090b;--bg-light:#18181b;--bg-subtle:#27272a;--card-bg:#18181b;--text-primary:#fafafa;--text-secondary:#a1a1aa;--text-muted:#71717a;--solid-dark:#fafafa;--solid-dark-text:#18181b;--border-color:#27272a;--border-light:#18181b;--hover-bg:#27272a;--error-bg:#450a0a;--error-border:#7f1d1d;--error-text:#fca5a5;--success-bg:#052e16;--success-border:#14532d;--success-text:#86efac}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.5}input,button,textarea,select{font-family:inherit}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.app-container{flex-direction:column;height:100vh;display:flex;overflow:hidden}.header{background:var(--bg-color);z-index:100;border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;height:72px;padding:0 2rem;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:32px;display:flex}.logo-container-top{align-items:center;display:flex}.logo-icon-top{border-radius:8px;width:32px;height:32px;overflow:hidden}.logo-icon-top span{color:#fff;font-size:18px;font-weight:800}.top-nav-menu{flex-wrap:nowrap;gap:24px;display:flex}@media (width<=1024px){.header-left{gap:16px}.top-nav-menu{display:none!important}}@media (width<=768px){.header{height:60px;padding:0 1rem}.header-center{flex:1;margin:0 10px;display:flex}}.top-nav-item{color:var(--text-secondary);cursor:pointer;font-size:.95rem;font-weight:600;transition:color .2s}.top-nav-item:hover{color:#444}.top-nav-item.active{color:var(--text-primary);font-weight:700}.header-center{flex:1;justify-content:center;display:flex}.search-bar{background-color:#fff;border-radius:20px;align-items:center;gap:10px;width:100%;max-width:500px;height:44px;padding:0 16px;display:flex}.search-bar input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:.95rem;font-weight:500}.search-bar input::placeholder{color:var(--text-secondary);font-weight:500}.header-actions{justify-content:flex-end;align-items:center;width:auto;display:flex}@media (width<=768px){.search-bar{background-color:var(--bg-subtle);height:38px;padding:0 12px}.header-actions{gap:8px!important}.header-actions span{font-size:.85rem!important}.logo-container-top{flex-shrink:0}}@media (width<=480px){.header-actions span{display:none}.header-actions div:first-child{padding:6px!important}}.main-content{flex-direction:column;flex:1;padding:2rem 4rem;display:flex;overflow-y:auto}@media (width<=1024px){.main-content{padding:1.5rem 2rem}}@media (width<=768px){.main-content{padding:1rem 1rem 80px}}@media (width<=640px){.hide-on-mobile{display:none!important}}.content-scroll{width:100%;max-width:1400px;margin:0 auto}.grid-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;display:grid}@media (width<=640px){.grid-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}.voice-card{background:var(--card-bg);cursor:pointer;border-radius:16px;flex-direction:column;padding:10px;transition:transform .2s;display:flex;overflow:hidden}.card-image-container{aspect-ratio:1;border-radius:12px;width:100%;position:relative;overflow:hidden}.card-image{object-fit:cover;width:100%;height:100%}.card-info{padding:14px 4px 4px}.card-title{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:6px;font-size:.95rem;font-weight:700;line-height:1.25;display:-webkit-box;overflow:hidden}.card-creator{display:none}.card-stats{color:var(--text-secondary);align-items:center;gap:12px;font-size:.75rem;font-weight:600;display:flex}.stat-item{align-items:center;gap:4px;display:flex}.hero-section{display:none}.btn{color:var(--text-primary);cursor:pointer;background:#0000000d;border:1px solid #0000001a;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn:hover:not(:disabled){background:#0000001a}.btn-primary{background:var(--accent-color);color:var(--accent-text);border:none}.btn-primary:hover:not(:disabled){background:#333}.btn:disabled{opacity:.5;cursor:not-allowed}.card-play-overlay{opacity:0;background:0 0;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;transition:opacity .2s;display:flex;position:absolute;top:0;left:0}.voice-card:hover .card-play-overlay{opacity:1}.play-btn{color:#fff;cursor:pointer;filter:drop-shadow(0 4px 8px #0006);background:0 0;border:none;justify-content:center;align-items:center;transition:transform .2s;display:flex}.play-btn:hover{transform:scale(1.1)}.convert-container{color:var(--text-primary);width:100%}.audio-player{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border-color);z-index:30;background:#fffffff2;justify-content:space-between;align-items:center;width:100%;padding:.75rem 2rem;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;bottom:0;left:0;transform:translateY(100%)}@media (width<=768px){.audio-player{padding:.5rem 1rem;bottom:64px}.audio-player .suno-progress-bg{display:none}}.audio-player.visible{transform:translateY(0)}.suno-progress-bg{cursor:pointer;background:#e4e4e7;border-radius:2px;flex:1;height:4px;position:relative}.suno-progress-fill{background:#000;border-radius:2px;height:100%;position:absolute;top:0;left:0}.suno-progress-thumb{background:#000;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;transform:translate(-50%,-50%)}.section-title{display:none}@keyframes blur-in{0%{filter:blur(20px);opacity:0;transform:scale(1.05)}to{filter:blur();opacity:1;transform:scale(1)}}.blur-in{animation:.8s cubic-bezier(.16,1,.3,1) forwards blur-in}.auth-container{background:#fdfdfd;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-card{background:#fff;border:1px solid #e4e4e7;border-radius:24px;width:100%;max-width:440px;padding:48px;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.auth-header{text-align:center;margin-bottom:32px}.logo-icon-large{color:#fff;background:#18181b;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 16px;font-size:1.5rem;font-weight:800;display:flex}.auth-header h1{color:#18181b;margin-bottom:8px;font-size:1.75rem;font-weight:800}.auth-header p{color:#71717a;font-size:.95rem}.auth-form{flex-direction:column;gap:20px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.input-group label{color:#3f3f46;font-size:.875rem;font-weight:600}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:#a1a1aa;position:absolute;left:14px}.input-wrapper input{background:#f9fafb;border:1px solid #e4e4e7;border-radius:12px;outline:none;width:100%;padding:12px 14px 12px 44px;font-size:.95rem;transition:all .2s}.input-wrapper input:focus{background:#fff;border-color:#18181b;box-shadow:0 0 0 4px #18181b0d}.forgot-password{color:#18181b;font-size:.8125rem;font-weight:600;text-decoration:none}.btn-auth-primary{color:#fff;cursor:pointer;background:#18181b;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:8px;padding:12px;font-size:1rem;font-weight:700;transition:all .2s;display:flex}.btn-auth-primary:hover{background:#000;transform:translateY(-1px)}.btn-auth-primary:disabled{opacity:.7;cursor:not-allowed}.auth-divider{text-align:center;margin:24px 0;position:relative}.auth-divider:before{content:"";z-index:1;background:#e4e4e7;width:100%;height:1px;position:absolute;top:50%;left:0}.auth-divider span{color:#a1a1aa;z-index:2;background:#fff;padding:0 12px;font-size:.75rem;font-weight:600;position:relative}.btn-auth-secondary{color:#18181b;cursor:pointer;background:#fff;border:1px solid #e4e4e7;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.btn-auth-secondary:hover{background:#f9fafb;border-color:#d4d4d8}.auth-footer{text-align:center;color:#71717a;margin-top:32px;font-size:.875rem}.auth-toggle{color:#18181b;cursor:pointer;background:0 0;border:none;margin-left:4px;padding:0;font-weight:700}.auth-toggle:hover{text-decoration:underline}.auth-error{color:#dc2626;background:#fef2f2;border:1px solid #fee2e2;border-radius:12px;margin-bottom:24px;padding:12px 16px;font-size:.875rem;font-weight:500}.image-result-container .download-btn-hover{opacity:0;transition:all .2s cubic-bezier(.16,1,.3,1);transform:translateY(-4px)}.image-result-container:hover .download-btn-hover{opacity:1;transform:translateY(0)}.image-result-container .download-btn-hover:hover{transform:scale(1.05);background:#fff!important}.mobile-nav{border-top:1px solid var(--border-color);z-index:40;background:#fff;justify-content:space-around;align-items:center;height:64px;padding:0 10px;display:none;position:fixed;bottom:0;left:0;right:0}@media (width<=1024px){.mobile-nav{display:flex}}.mobile-nav-item{color:var(--text-secondary);justify-content:center;align-items:center;padding:8px;text-decoration:none;transition:color .2s;display:flex}.mobile-nav-item.active{color:var(--text-primary)}@keyframes pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(1.3)}to{opacity:0;transform:scale(1.3)}}.pulse-ring{pointer-events:none}@keyframes box-exit{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}to{opacity:0;filter:blur(8px);transform:translateY(10px)scale(.98)}}@keyframes box-enter{0%{opacity:0;filter:blur(8px);transform:translateY(-10px)scale(1.02)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.box-exit{animation:.25s cubic-bezier(.4,0,.2,1) forwards box-exit}.box-enter{animation:.4s cubic-bezier(.23,1,.32,1) forwards box-enter}@media (width<=480px){.auth-card{border-radius:16px;padding:24px}.auth-header h1{font-size:1.5rem}}