@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap";:root{--bg: #080812;--bg-glass: rgba(255,255,255,.05);--bg-glass-hover: rgba(255,255,255,.09);--border: rgba(255,255,255,.09);--accent: #a855f7;--accent2: #f472b6;--accent3: #38bdf8;--accent4: #fb923c;--gradient: linear-gradient(135deg, #a855f7, #f472b6);--gradient-cool: linear-gradient(135deg, #38bdf8, #a855f7);--gradient-warm: linear-gradient(135deg, #fb923c, #f472b6);--text: #f5f0ff;--text-dim: rgba(245,240,255,.55);--text-muted: rgba(245,240,255,.3);--success: #4ade80;--warning: #fbbf24;--danger: #f87171;--radius: 22px;--radius-sm: 16px;--radius-xs: 11px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:DM Sans,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body:before{content:"";position:fixed;top:-20%;left:-10%;width:55%;height:55%;background:radial-gradient(ellipse,rgba(168,85,247,.16) 0%,transparent 70%);pointer-events:none;z-index:0;animation:blobA 9s ease-in-out infinite alternate}body:after{content:"";position:fixed;bottom:-15%;right:-10%;width:50%;height:50%;background:radial-gradient(ellipse,rgba(244,114,182,.12) 0%,transparent 70%);pointer-events:none;z-index:0;animation:blobB 12s ease-in-out infinite alternate}@keyframes blobA{0%{transform:translate(0) scale(1)}to{transform:translate(4%,5%) scale(1.08)}}@keyframes blobB{0%{transform:translate(0)}to{transform:translate(-4%,-4%)}}.app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;padding:20px 16px 48px}.page-title{font-family:Nunito,sans-serif;font-size:30px;font-weight:900;margin-bottom:24px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.section-label{font-family:Nunito,sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin:22px 0 11px}.balance-bar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#a855f733,#f472b61a);border:1px solid rgba(168,85,247,.3);border-radius:var(--radius);padding:16px 20px;margin-bottom:26px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s}.balance-bar:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.9),rgba(244,114,182,.6),transparent)}.balance-bar:after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{to{left:150%}}.balance-bar:active{transform:scale(.97)}.balance-bar .label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}.balance-bar .amount{font-family:Nunito,sans-serif;font-size:24px;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.topup-btn{background:var(--gradient);border:none;border-radius:12px;padding:10px 18px;font-size:13px;font-weight:700;font-family:Nunito,sans-serif;color:#fff;cursor:pointer;box-shadow:0 4px 16px #a855f773;transition:all .2s;white-space:nowrap;flex-shrink:0}.topup-btn:active{transform:scale(.92)}.welcome-block{margin-bottom:28px}.welcome-block .greeting{font-family:Nunito,sans-serif;font-size:26px;font-weight:900;letter-spacing:-.3px;line-height:1.2;margin-bottom:5px}.welcome-block .tagline{font-size:14px;color:var(--text-dim);font-weight:500}.menu-section-title{font-family:Nunito,sans-serif;font-size:13px;font-weight:800;color:var(--text-dim);margin-bottom:12px;margin-top:4px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.menu-item{position:relative;border-radius:var(--radius);padding:22px 16px 18px;text-align:center;cursor:pointer;transition:all .22s;overflow:hidden;border:1px solid var(--border)}.menu-item:active{transform:scale(.94)!important;box-shadow:none!important}.mi-song{background:linear-gradient(145deg,#a855f72e,#a855f70a);border-color:#a855f726}.mi-song:hover{border-color:#a855f78c;transform:translateY(-3px);box-shadow:0 10px 30px #a855f740,inset 0 1px #a855f733}.mi-history{background:linear-gradient(145deg,#38bdf826,#38bdf808);border-color:#38bdf81f}.mi-history:hover{border-color:#38bdf880;transform:translateY(-3px);box-shadow:0 10px 30px #38bdf833,inset 0 1px #38bdf833}.mi-voice{background:linear-gradient(145deg,#f472b62b,#f472b60a);border-color:#f472b624}.mi-voice:hover{border-color:#f472b680;transform:translateY(-3px);box-shadow:0 10px 30px #f472b638,inset 0 1px #f472b633}.mi-postcard{background:linear-gradient(145deg,#fb923c26,#fb923c08);border-color:#fb923c1f}.mi-postcard:hover{border-color:#fb923c73;transform:translateY(-3px);box-shadow:0 10px 30px #fb923c2e,inset 0 1px #fb923c33}.mi-personality{background:linear-gradient(135deg,#a855f738,#f472b61f);border-color:#a855f733}.mi-personality:hover{border-color:#a855f799;transform:translateY(-3px);box-shadow:0 10px 34px #a855f74d}.mi-comic{background:linear-gradient(135deg,#fb923c2e,#f472b617);border-color:#fb923c26}.mi-comic:hover{border-color:#fb923c80;transform:translateY(-3px);box-shadow:0 10px 30px #fb923c38}.menu-item.featured{grid-column:span 2;display:flex;align-items:center;text-align:left;gap:16px;padding:18px 20px}.menu-item .icon{font-size:32px;margin-bottom:10px;display:block}.menu-item.featured .icon{font-size:38px;margin-bottom:0;flex-shrink:0}.menu-item .label{font-family:Nunito,sans-serif;font-size:13px;font-weight:800}.menu-item.featured .label{font-size:15px}.menu-item .sub{font-size:11px;color:var(--text-muted);margin-top:5px;font-weight:600}.menu-item .badge{position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 8px;border-radius:20px;background:var(--gradient);color:#fff;box-shadow:0 2px 8px #a855f773;animation:badgePop 2.5s ease-in-out infinite}@keyframes badgePop{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.card{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:12px;transition:all .22s}.card.clickable{cursor:pointer}.card.clickable:hover{background:var(--bg-glass-hover);border-color:#a855f738;transform:translateY(-1px)}.card.clickable:active{transform:scale(.98)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px 20px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;font-family:Nunito,sans-serif;cursor:pointer;transition:all .2s;letter-spacing:.2px}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 4px 20px #a855f773}.btn-primary:hover:not(:disabled){box-shadow:0 7px 28px #a855f799;transform:translateY(-1px)}.btn-secondary{background:var(--bg-glass);color:var(--text);border:1px solid var(--border)}.btn-ghost{background:transparent;color:var(--text-dim);font-size:14px;padding:12px 20px}.btn-ghost:hover{color:var(--text)}.bottom-actions{margin-top:24px;display:flex;flex-direction:column;gap:8px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.chip{padding:9px 16px;border-radius:100px;border:1px solid var(--border);background:var(--bg-glass);color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.chip.active{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 3px 12px #a855f766}.chip:active{transform:scale(.93)}.input,.textarea{width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-glass);color:var(--text);font-size:15px;font-family:DM Sans,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}.input::placeholder,.textarea::placeholder{color:var(--text-muted)}.input:focus,.textarea:focus{border-color:#a855f78c;box-shadow:0 0 0 3px #a855f71f}.textarea{resize:vertical;min-height:120px;line-height:1.6}.tab-switch{display:flex;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;gap:4px;margin-bottom:20px}.tab-btn{flex:1;padding:10px;border:none;border-radius:var(--radius-xs);background:transparent;color:var(--text-dim);font-family:Nunito,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}.tab-btn.active{background:var(--gradient);color:#fff;box-shadow:0 2px 10px #a855f759}.upload-zone{border:2px dashed rgba(168,85,247,.38);border-radius:var(--radius);padding:28px 20px;text-align:center;cursor:pointer;transition:all .22s;background:#a855f70a;margin-bottom:8px}.upload-zone:hover{border-color:#a855f7a6;background:#a855f717}.upload-zone.has-file{border-color:#4ade8080;background:#4ade800f}.uz-icon{font-size:36px;margin-bottom:10px}.uz-title{font-family:Nunito,sans-serif;font-weight:800;font-size:15px;margin-bottom:5px}.uz-sub{font-size:12px;color:var(--text-muted)}.progress-steps{display:flex;gap:6px;margin-bottom:24px}.progress-step{flex:1;height:4px;border-radius:2px;background:#ffffff1a;transition:all .3s}.progress-step.active{background:var(--gradient);box-shadow:0 0 10px #a855f799}.progress-step.done{background:var(--accent2);opacity:.7}.step-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}.step-num{width:38px;height:38px;border-radius:13px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif;font-size:16px;font-weight:900;color:#fff;flex-shrink:0;box-shadow:0 4px 14px #a855f773}.step-title{font-family:Nunito,sans-serif;font-size:17px;font-weight:800}.step-sub{font-size:13px;color:var(--text-dim);margin-top:2px}.feature-highlight{background:linear-gradient(135deg,#a855f726,#f472b612);border:1px solid rgba(168,85,247,.22);border-radius:var(--radius);padding:20px;margin-bottom:20px;position:relative;overflow:hidden}.feature-highlight:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.9),rgba(244,114,182,.5),transparent)}.fh-icon{font-size:34px;margin-bottom:10px}.fh-title{font-family:Nunito,sans-serif;font-size:16px;font-weight:800;margin-bottom:6px}.fh-desc{font-size:13px;color:var(--text-dim);line-height:1.65}.error-banner{background:#f871711a;border:1px solid rgba(248,113,113,.25);border-radius:var(--radius-xs);padding:12px 16px;font-size:13px;color:#fca5a5;margin-top:12px;line-height:1.5}.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 16px;text-align:center}.spinner{width:38px;height:38px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.status-text{font-size:14px;color:var(--text-dim);margin-top:6px}.generating-orb{font-size:72px;text-align:center;margin-bottom:20px;animation:orbPulse 2s ease-in-out infinite}@keyframes orbPulse{0%,to{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 22px rgba(168,85,247,.55))}50%{transform:scale(1.1) rotate(2deg);filter:drop-shadow(0 0 38px rgba(244,114,182,.7))}}.song-item{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;transition:all .2s}.song-item:hover{border-color:#a855f74d;background:var(--bg-glass-hover)}.song-item:active{transform:scale(.99)}.song-item-icon{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#a855f74d,#f472b633);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.song-item .info{flex:1;min-width:0}.song-item .title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-item .meta{font-size:12px;color:var(--text-dim);margin-top:3px}.player{width:100%;margin:14px 0}.player audio{width:100%;height:44px;border-radius:10px}.postcard-img{width:100%;border-radius:var(--radius);object-fit:cover;box-shadow:0 8px 32px #0006}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.stat-box{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 12px;text-align:center}.stat-box .stat-val{font-family:Nunito,sans-serif;font-size:24px;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stat-box .stat-lbl{font-size:11px;color:var(--text-muted);margin-top:4px;font-weight:600}.package-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.package-card{position:relative;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;cursor:pointer;transition:all .22s;overflow:hidden}.package-card.selected{border-color:var(--accent);background:#a855f71f;box-shadow:0 0 0 1px #a855f759,0 4px 20px #a855f733}.package-card:active{transform:scale(.96)}.package-card .pkg-tokens{font-family:Nunito,sans-serif;font-size:28px;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.package-card .pkg-label{font-size:12px;color:var(--text-muted);margin:2px 0 8px;font-weight:600}.package-card .pkg-price{font-size:16px;font-weight:800;font-family:Nunito,sans-serif}.package-card .pkg-badge{position:absolute;top:-1px;right:-1px;background:var(--gradient);color:#fff;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-bottom-left-radius:12px}.fade-in{animation:fadeUp .3s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.stagger>*{animation:fadeUp .35s ease both}.stagger>*:nth-child(1){animation-delay:.04s}.stagger>*:nth-child(2){animation-delay:.09s}.stagger>*:nth-child(3){animation-delay:.14s}.stagger>*:nth-child(4){animation-delay:.19s}.stagger>*:nth-child(5){animation-delay:.24s}.stagger>*:nth-child(6){animation-delay:.29s}.empty{text-align:center;padding:48px 20px;color:var(--text-dim)}.empty .icon{font-size:52px;margin-bottom:14px;opacity:.7}.empty p{font-size:14px;line-height:1.6}.divider{height:1px;background:var(--border);margin:16px 0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:2px}