:root{--ink:#10245f;--muted:#8d91aa;--purple:#7352ee;--purple-dark:#6241e3;--blue:#2359c6;--pink:#d02b70;--surface:#fff;--page:#f7f7ff;--nav-height:72px}
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
html{background:var(--page)}
body{margin:0;min-height:100vh;font-family:"Nunito",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#fafaff 0%,#f6f6ff 100%);color:var(--ink);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{border:0}svg{width:1em;height:1em;stroke-width:2}
.app-shell{width:min(100%,720px);margin:0 auto;padding:calc(22px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) 18px calc(var(--nav-height) + 30px + var(--tg-safe-area-inset-bottom,0px))}
.app-header{text-align:center;padding:2px 10px 20px}.brand{font-size:34px;font-weight:900;letter-spacing:-1.2px;display:flex;align-items:center;justify-content:center;gap:7px;line-height:1}.brand b{color:var(--purple)}.brand-mark{width:32px;height:32px;display:grid;place-items:center;color:#ffc83d;transform:rotate(-7deg)}.brand-mark svg{width:30px;height:30px;stroke-width:2.5}.app-header p{margin:9px 0 0;font-size:15px;color:#525a78;font-weight:600}
.page{display:none;animation:pageIn .22s ease}.page.active{display:block}@keyframes pageIn{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.content-card{position:relative;background:#fff;border-radius:27px;padding:20px;box-shadow:0 12px 38px rgba(73,67,139,.075)}
.upload-zone{height:240px;border:2px dashed #d9d7e9;border-radius:22px;display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer;background:#fff;transition:.2s}.upload-zone:hover{border-color:#b8adf7;background:#fdfcff}.upload-content{display:flex;flex-direction:column;align-items:center;gap:6px}.plus-circle{width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#f3f0ff,#ebe8ff);display:grid;place-items:center;color:var(--purple)}.plus-circle svg{width:46px;height:46px;stroke-width:2}.upload-content strong{font-size:19px;font-weight:800}.upload-content span{font-size:15px;color:#777d9b;font-weight:500}.upload-zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.upload-zone.has-photo img{display:block}.upload-zone.has-photo .upload-content{display:none}
.form-section{margin-top:25px}.form-section h2{text-align:center;margin:0 0 14px;font-size:20px;font-weight:800;letter-spacing:-.2px}.gender-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}.gender-card{min-width:0;height:84px;border-radius:18px;background:#f4f8ff;border:1.5px solid transparent;display:flex;align-items:center;justify-content:center;gap:14px;font-size:17px;color:var(--blue);font-weight:800;cursor:pointer;transition:.18s}.gender-card.girl{background:#fff4f9;color:var(--pink)}.gender-card.active{border-color:#5872f2;box-shadow:0 5px 14px rgba(67,86,221,.09)}.gender-card:active{transform:scale(.986)}.gender-emoji{display:block;flex:0 0 auto;font-size:48px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.plot-section{margin-top:30px}.plot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}.plot-card{padding:0;background:#fff;border:1px solid #ececf3;border-radius:15px;overflow:hidden;box-shadow:0 3px 10px rgba(43,43,83,.085);cursor:pointer;color:#111e50;transition:.18s;min-width:0}.plot-card img{display:block;width:100%;aspect-ratio:1.5/1;object-fit:cover}.plot-card span{min-height:52px;padding:8px 5px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}.plot-card.active{outline:2px solid var(--purple);box-shadow:0 7px 17px rgba(118,84,246,.20);transform:translateY(-1px)}
.duration-section{margin-top:31px}.duration-control{height:58px;border-radius:16px;background:#f3f3f8;border:1px solid #e0e1ec;display:flex;align-items:center;padding:0 18px;color:#9699b5}.duration-control>svg{width:26px;height:26px}.duration-control strong{font-size:18px;margin-left:10px;font-weight:700}.duration-lock{margin-left:auto;width:24px!important;height:24px!important}.duration-section p{text-align:center;color:#9699ae;font-size:13px;margin:10px 0 0}.generate-btn{width:100%;height:62px;border-radius:17px;margin-top:22px;background:linear-gradient(90deg,var(--purple),var(--purple-dark));color:#fff;font-size:18px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 10px 22px rgba(104,70,235,.22);transition:.18s}.generate-btn:hover{transform:translateY(-1px)}.generate-btn:active{transform:scale(.99)}.generate-btn svg{width:22px;height:22px}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 18px}.eyebrow{font-size:12px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.08em}.section-heading h1{font-size:28px;line-height:1.1;margin:4px 0 0}.icon-button{width:42px;height:42px;border-radius:13px;background:#fff;color:var(--purple);display:grid;place-items:center;box-shadow:0 6px 18px rgba(62,54,120,.1);cursor:pointer}.icon-button svg{width:20px;height:20px}
.empty-card,.balance-card,.profile-card,.menu-card,.info-card{background:#fff;border-radius:22px;box-shadow:0 10px 30px rgba(73,67,139,.07)}.empty-card{text-align:center;padding:42px 24px}.empty-illustration{width:88px;height:88px;border-radius:28px;margin:0 auto 20px;display:grid;place-items:center;background:linear-gradient(145deg,#f2eeff,#e8e2ff);color:var(--purple)}.empty-illustration svg{width:42px;height:42px}.empty-card h2{font-size:21px;margin:0 0 8px}.empty-card p{max-width:470px;margin:0 auto 22px;color:#707791;font-size:14px;line-height:1.55}.primary-small,.balance-primary,.modal-primary{border-radius:14px;background:linear-gradient(90deg,var(--purple),var(--purple-dark));color:#fff;font-weight:800;cursor:pointer}.primary-small{height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:8px}.balance-card{padding:24px;background:linear-gradient(135deg,#7150ed,#5f3fd9);color:#fff}.balance-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;opacity:.9}.balance-top svg{width:28px;height:28px}.balance-card>strong{display:block;font-size:36px;margin:13px 0 5px}.balance-card p{font-size:13px;line-height:1.5;opacity:.84;max-width:440px}.balance-primary{height:50px;width:100%;margin-top:18px;background:#fff;color:var(--purple);display:flex;align-items:center;justify-content:center;gap:8px}.info-card{margin-top:14px;padding:17px;display:flex;gap:13px;align-items:flex-start}.info-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#eef8f2;color:#27a568;display:grid;place-items:center}.info-card strong{font-size:14px}.info-card p{font-size:12px;color:#777d93;line-height:1.45;margin:4px 0 0}.profile-card{padding:17px;display:flex;align-items:center;gap:13px}.profile-avatar{width:56px;height:56px;border-radius:18px;background:linear-gradient(145deg,#f1eeff,#e7e0ff);color:var(--purple);display:grid;place-items:center}.profile-avatar svg{width:27px;height:27px}.profile-card>div:nth-child(2){display:flex;flex-direction:column;flex:1}.profile-card strong{font-size:16px}.profile-card span{font-size:12px;color:#9095aa;margin-top:2px}.profile-card .icon-button{box-shadow:none;background:#f7f6fc}.menu-card{margin-top:14px;padding:4px 14px}.menu-card button{width:100%;height:56px;background:transparent;display:flex;align-items:center;justify-content:space-between;color:#273154;border-bottom:1px solid #f0eff5;cursor:pointer}.menu-card button:last-child{border-bottom:0}.menu-card button span{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:700}.menu-card button span svg{color:var(--purple);width:19px;height:19px}.menu-card button>svg{color:#a2a5b6;width:18px;height:18px}
.bottom-nav{position:fixed;z-index:30;left:0;right:0;bottom:0;height:calc(var(--nav-height) + max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px)));background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid #ececf4;display:grid;grid-template-columns:repeat(4,1fr);padding:7px max(10px,calc((100vw - 720px)/2)) max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px));box-shadow:0 -7px 22px rgba(41,41,81,.05)}.nav-item{background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9295ad;cursor:pointer;min-width:0}.nav-item svg{width:23px;height:23px}.nav-item small{font-size:11px;white-space:nowrap}.nav-item.active{color:#704cf3;font-weight:800}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(24,24,55,.48);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:.22s}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{width:min(100%,480px);position:relative;background:#fff;border-radius:26px;padding:28px 22px 20px;text-align:center;transform:translateY(22px);transition:.22s;box-shadow:0 24px 70px rgba(25,20,66,.28)}.modal-backdrop.open .modal{transform:none}.modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:11px;background:#f4f2fa;color:#7d8198;display:grid;place-items:center;cursor:pointer}.modal-icon{width:72px;height:72px;border-radius:23px;margin:2px auto 16px;background:linear-gradient(145deg,#f3efff,#e6deff);color:var(--purple);display:grid;place-items:center}.modal-icon svg{width:34px;height:34px}.modal h2{margin:0;font-size:23px}.modal>p{margin:8px auto 15px;color:#747a91;line-height:1.5;font-size:14px;max-width:390px}.modal-benefit{display:flex;align-items:flex-start;text-align:left;gap:10px;background:#f8f6ff;border:1px solid #eee9ff;border-radius:15px;padding:12px;color:#4c5270;font-size:12.5px;line-height:1.45}.modal-benefit svg{flex:0 0 19px;color:var(--purple);margin-top:1px}.modal-primary{width:100%;height:52px;margin-top:16px}.modal-secondary{width:100%;height:44px;margin-top:7px;background:transparent;color:#7d8197;font-weight:700;cursor:pointer}.toast{position:fixed;left:50%;bottom:calc(var(--nav-height) + 16px);transform:translate(-50%,12px);background:#17172c;color:#fff;border-radius:12px;padding:10px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:120;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){.app-shell{padding:calc(16px + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)) 12px calc(var(--nav-height) + 22px + var(--tg-safe-area-inset-bottom,0px))}.app-header{padding-bottom:15px}.brand{font-size:28px}.brand-mark{width:28px;height:28px}.brand-mark svg{width:27px;height:27px}.app-header p{font-size:13px;margin-top:7px}.content-card{border-radius:23px;padding:12px}.upload-zone{height:180px;border-radius:18px}.plus-circle{width:66px;height:66px}.plus-circle svg{width:38px;height:38px}.upload-content strong{font-size:16px}.upload-content span{font-size:13px}.form-section{margin-top:21px}.form-section h2{font-size:17px;margin-bottom:11px}.gender-grid{gap:10px}.gender-card{height:76px;font-size:15px;gap:8px;border-radius:15px}.gender-emoji{font-size:44px}.plot-section{margin-top:25px}.plot-grid{gap:8px}.plot-card{border-radius:12px}.plot-card span{min-height:44px;font-size:10.5px;padding:6px 3px}.duration-section{margin-top:26px}.duration-control{height:52px;border-radius:14px;padding:0 15px}.duration-control strong{font-size:16px}.duration-section p{font-size:11.5px}.generate-btn{height:56px;border-radius:15px;font-size:16px;margin-top:19px}.section-heading h1{font-size:25px}.empty-card{padding:36px 18px}.modal-backdrop{align-items:center;padding:14px}.modal{border-radius:24px}}
@media(max-width:370px){.gender-card{font-size:14px}.gender-emoji{font-size:40px}.plot-card span{font-size:9.8px}.nav-item small{font-size:10px}}
.photo-hint{margin:10px 2px 0;font-size:12px;color:#9095aa;line-height:1.45;font-weight:600;text-align:center}
.gender-avatar{display:block;flex:0 0 auto;width:56px;height:56px;object-fit:contain}
@media(max-width:640px){.gender-avatar{width:50px;height:50px}}
@media(max-width:370px){.gender-avatar{width:46px;height:46px}}
.name-section{margin-top:25px}
.name-input{display:block;width:100%;height:56px;border-radius:16px;border:1.5px solid #e0e1ec;background:#f7f7ff;padding:0 18px;font-size:16px;font-weight:600;color:var(--ink);outline:none;transition:.2s}
.name-input:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(115,82,238,.1)}
.name-input::placeholder{color:#a0a5bc;font-weight:500}
@media(max-width:640px){.name-input{height:50px;font-size:15px;border-radius:14px}}
.generate-btn[data-loading] .btn-icon,.generate-btn[data-loading] #generateBtnText{opacity:.55}
.generate-btn[data-loading]::after{content:'';width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:_spin .65s linear infinite;margin-left:8px;flex-shrink:0}
@keyframes _spin{to{transform:rotate(360deg)}}