:root{--fan-grey-0: #fff;--fan-grey-10: #f8f9fc;--fan-grey-20: #eff2f7;--fan-grey-50: #e6eaf0;--fan-grey-800: #45474d;--fan-grey-1000: #212226;--fan-grey-1200: #121317;--fan-blue: #3279f9;--fan-border: rgba(33, 34, 38, .08);--fan-border-strong: rgba(33, 34, 38, .12);--fan-radius-sm: 8px;--fan-radius-md: 16px;--fan-radius-lg: 24px;--fan-radius-xl: 36px;--fan-pill: 999px;--fan-ease: cubic-bezier(.23, 1, .32, 1);color:var(--fan-grey-1200);background:#f2f3f6;font-family:Inter,Segoe UI Variable Text,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Noto Sans SC,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,textarea,select{color:inherit;font:inherit}button{border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--fan-blue);outline-offset:2px}.app-shell{position:relative;display:grid;grid-template-rows:62px minmax(0,1fr) auto;width:min(100%,480px);max-width:100vw;min-width:0;height:100dvh;margin:0 auto;overflow:hidden;background:radial-gradient(circle at 92% 4%,rgba(220,234,255,.72),transparent 27%),var(--fan-grey-0);box-shadow:0 0 0 1px var(--fan-border),0 24px 70px #1213171f}.topbar{z-index:5;display:flex;min-width:0;align-items:center;justify-content:space-between;padding:max(8px,env(safe-area-inset-top)) 18px 0}.brand,.top-actions,.credit-pill,.history-head>div,.control-pill,.music-title>div,.account-credit,.secondary-action{display:flex;align-items:center}.brand{gap:9px;font-size:17px;font-weight:640;letter-spacing:-.02em}.brand-mark{display:grid;width:29px;height:29px;place-items:center;color:#fff;border-radius:10px;background:var(--fan-grey-1200);box-shadow:0 5px 14px #12131729}.top-actions{gap:8px}.credit-pill{height:34px;gap:5px;padding:0 11px;color:var(--fan-grey-800);font-size:13px;font-weight:600;border:1px solid var(--fan-border);border-radius:var(--fan-pill);background:#ffffffb8;backdrop-filter:blur(14px)}.profile-button{min-width:36px;height:36px;padding:0 11px;color:#fff;font-size:13px;font-weight:600;border-radius:var(--fan-pill);background:var(--fan-grey-1200)}.workspace{display:grid;grid-template-rows:minmax(160px,1fr) 47px 72px;min-width:0;min-height:0;gap:9px;padding:8px 16px 0}.upload-stage{position:relative;min-height:0;overflow:hidden;border:1px solid var(--fan-border);border-radius:var(--fan-radius-lg);background:linear-gradient(145deg,#eff2f7c2,#ffffffe6),#f7f8fa;isolation:isolate}.upload-stage:before{position:absolute;inset:0;z-index:-1;content:"";opacity:.34;background-image:radial-gradient(rgba(18,19,23,.16) .7px,transparent .7px);background-size:15px 15px;mask-image:linear-gradient(to bottom,#000,transparent 70%)}.source-image{width:100%;height:100%;object-fit:contain;background:#eef0f4}.image-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.09),transparent 25%,transparent 78%,rgba(0,0,0,.15))}.upload-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:11px;color:var(--fan-grey-800);background:transparent}.upload-empty strong{color:var(--fan-grey-1000);font-size:15px;font-weight:570}.upload-icon{display:grid;width:52px;height:52px;place-items:center;border:1px solid var(--fan-border-strong);border-radius:18px;background:#fffc;box-shadow:0 8px 24px #1213170f}.replace-photo{position:absolute;top:12px;right:12px;display:flex;align-items:center;height:34px;gap:6px;padding:0 12px;color:#fff;font-size:13px;font-weight:550;border:1px solid rgba(255,255,255,.24);border-radius:var(--fan-pill);background:#121317a3;backdrop-filter:blur(14px)}.template-row{display:flex;gap:7px;padding:1px 1px 3px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.template-row::-webkit-scrollbar,.history-rail::-webkit-scrollbar{display:none}.template-chip{display:flex;flex:0 0 auto;align-items:center;height:40px;gap:7px;padding:0 11px 0 7px;color:var(--fan-grey-800);font-size:12.5px;font-weight:550;border:1px solid var(--fan-border);border-radius:var(--fan-pill);background:#fff;transition:transform .16s var(--fan-ease),border-color .16s,color .16s}.template-chip:active{transform:scale(.97)}.template-chip>span{display:grid;width:27px;height:27px;place-items:center;color:#222;font-size:11px;font-weight:650;border-radius:50%}.tone-sky>span{background:#dceaff}.tone-rose>span{background:#ffe2e8}.tone-violet>span{background:#ece3ff}.tone-warm>span{background:#fff3c7}.tone-mint>span{background:#dff7ec}.tone-peach>span{background:#ffe8d4}.template-chip.is-selected{color:var(--fan-grey-1200);border-color:var(--fan-grey-1200)}.prompt-panel{position:relative;overflow:hidden;border:1px solid var(--fan-border);border-radius:var(--fan-radius-md);background:#f8f9fb}.prompt-panel textarea{width:100%;height:100%;padding:12px 50px 12px 13px;resize:none;color:var(--fan-grey-1000);font-size:12.5px;line-height:1.55;border:0;outline:0;background:transparent;scrollbar-width:none}.prompt-panel textarea::-webkit-scrollbar{display:none}.prompt-count{position:absolute;right:10px;bottom:9px;color:#a3a7ae;font-size:10px}.bottom-zone{z-index:4;min-width:0;padding:10px 16px max(12px,env(safe-area-inset-bottom));background:linear-gradient(to bottom,#ffffffa6,#fff 16%)}.control-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px}.control-pill{justify-content:center;height:38px;min-width:0;gap:6px;padding:0 10px;overflow:hidden;color:var(--fan-grey-800);font-size:12px;white-space:nowrap;border:1px solid var(--fan-border);border-radius:13px;background:#f7f8fa}.control-pill svg:last-child{margin-left:auto}.audio-pill.is-on{color:var(--fan-grey-1200);background:#eef4ff;border-color:#3279f92e}.generate-button,.sheet-primary{display:flex;align-items:center;justify-content:center;width:100%;height:48px;gap:8px;margin-top:8px;color:#fff;font-size:15px;font-weight:620;border-radius:var(--fan-pill);background:var(--fan-grey-1200);box-shadow:0 10px 26px #12131729;transition:transform .16s var(--fan-ease),opacity .16s}.generate-button:active,.sheet-primary:active{transform:scale(.985)}.generate-button:disabled,.sheet-primary:disabled{cursor:default;opacity:.52}.generate-button.is-loading{background:linear-gradient(110deg,#15171c,#2d323b,#15171c);background-size:200% 100%;animation:buttonShimmer 1.8s linear infinite}.button-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.history-head{display:flex;align-items:center;justify-content:space-between;height:32px;padding:4px 2px 0}.history-head>div{gap:6px}.history-head strong{font-size:13px}.history-head span{color:#a3a7ae;font-size:11px}.history-head button{padding:5px;color:var(--fan-grey-800);font-size:11px;background:transparent}.history-rail{display:flex;width:100%;max-width:100%;min-width:0;height:84px;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none}.history-card{flex:0 0 96px;min-width:0;scroll-snap-align:start}.history-media{position:relative;height:61px;overflow:hidden;border:1px solid var(--fan-border);border-radius:12px;background:#f0f2f5}.history-media img,.history-media video{width:100%;height:100%;object-fit:cover}.history-placeholder{display:grid;width:100%;height:100%;place-items:center;color:#8c919b}.history-meta{display:flex;justify-content:space-between;gap:4px;margin-top:5px;color:var(--fan-grey-800);font-size:9.5px}.history-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-meta time{flex:0 0 auto;color:#a5a8ae}.history-progress{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;color:#fff;background:#1213177a;backdrop-filter:blur(4px)}.history-progress strong{font-size:10px}.orb-loader{width:12px;height:12px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.icon-button{display:grid;place-items:center;color:#fff;border-radius:50%;background:#12131773;backdrop-filter:blur(8px)}.card-heart{position:absolute;top:5px;right:5px;width:25px;height:25px}.card-heart.is-active{color:#ff6680;background:#ffffffeb}.empty-history{display:flex;align-items:center;justify-content:center;width:100%;height:61px;gap:7px;color:#8d929b;font-size:11px;border:1px dashed var(--fan-border-strong);border-radius:13px;background:#fafbfc}.generating-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:#0f111594;backdrop-filter:blur(12px)}.generating-overlay strong{margin-top:18px;font-size:14px}.generating-overlay small{margin-top:5px;color:#ffffffa6;font-size:10px}.generation-aura{position:relative;width:56px;height:56px}.generation-aura span{position:absolute;inset:0;border:1px solid rgba(255,255,255,.75);border-radius:45% 55% 60% 40%;animation:auraSpin 2.2s linear infinite}.generation-aura span:nth-child(2){inset:6px -4px -4px 6px;opacity:.55;animation-direction:reverse;animation-duration:2.8s}.generation-aura span:nth-child(3){inset:-4px 8px 8px -4px;opacity:.32;animation-duration:3.3s}.sheet-layer{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;background:#12131747;backdrop-filter:blur(5px);animation:fadeIn .18s ease-out}.bottom-sheet{position:relative;width:100%;max-height:92%;padding:27px 18px max(22px,env(safe-area-inset-bottom));overflow-y:auto;border-radius:28px 28px 0 0;background:#fffffff7;box-shadow:0 -20px 70px #1213172e;animation:sheetUp .28s var(--fan-ease)}.sheet-handle{position:absolute;top:9px;left:50%;width:38px;height:4px;border-radius:2px;background:#d9dce2;transform:translate(-50%)}.sheet-close{position:absolute;top:18px;right:17px;display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:#f1f2f5}.bottom-sheet h2{margin:0 0 25px;font-size:21px;font-weight:620;letter-spacing:-.025em}.setting-group{margin-top:23px}.setting-group>label{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--fan-grey-800);font-size:13px}.setting-group>label strong{color:var(--fan-grey-1200)}.segmented,.ratio-options{display:grid;gap:5px;padding:4px;border-radius:14px;background:#f0f1f4}.segmented{grid-template-columns:repeat(2,1fr)}.segmented button,.ratio-options button{height:42px;color:#777c85;border-radius:11px;background:transparent}.segmented button.is-active,.ratio-options button.is-active{color:var(--fan-grey-1200);font-weight:600;background:#fff;box-shadow:0 2px 10px #1213170f}.range{width:100%;height:3px;accent-color:var(--fan-grey-1200)}.range-labels{display:flex;justify-content:space-between;margin-top:7px;color:#9a9ea6;font-size:11px}.ratio-options{grid-template-columns:repeat(3,1fr)}.ratio-options button{display:flex;align-items:center;justify-content:center;gap:8px}.ratio-icon{display:inline-block;border:1.5px solid currentColor;border-radius:3px}.ratio-icon-9-16{width:10px;height:17px}.ratio-icon-1-1{width:14px;height:14px}.ratio-icon-16-9{width:18px;height:11px}.sheet-primary{margin-top:27px}.audio-switch-row,.music-title,.music-file-row{display:flex;align-items:center;justify-content:space-between}.audio-switch-row>div,.music-title>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.audio-switch-row strong,.music-title strong{font-size:14px}.audio-switch-row span,.music-title span{color:#888d96;font-size:11px}.switch{width:47px;height:28px;padding:3px;border-radius:var(--fan-pill);background:#dfe2e7;transition:background .18s}.switch span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 7px #1213172e;transition:transform .22s var(--fan-ease)}.switch.is-on{background:var(--fan-grey-1200)}.switch.is-on span{transform:translate(19px)}.speech-box{display:grid;gap:8px;margin-top:16px}.speech-box textarea,.speech-box select,.login-sheet input{width:100%;border:1px solid var(--fan-border-strong);border-radius:13px;outline:0;background:#f8f9fb}.speech-box textarea{height:76px;padding:12px;resize:none;font-size:13px}.speech-box select{height:42px;padding:0 11px;font-size:12px}.music-title{margin-top:26px}.music-title button{display:flex;align-items:center;height:34px;gap:5px;padding:0 11px;font-size:12px;border-radius:var(--fan-pill);background:#eff1f4}.music-editor{margin-top:13px;padding:12px;border:1px solid var(--fan-border);border-radius:var(--fan-radius-md);background:#f8f9fb}.music-file-row{gap:9px}.music-file-row>span{flex:1;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.music-file-row>button{display:grid;width:29px;height:29px;place-items:center;border-radius:50%;background:#e9ebef}.music-file-row .music-play{color:#fff;background:var(--fan-grey-1200)}.waveform{display:flex;align-items:center;height:48px;gap:2px;margin:13px 0 7px;overflow:hidden}.waveform i{flex:1;min-width:1px;border-radius:2px;background:var(--fan-grey-1200);transition:opacity .16s}.waveform i.muted{opacity:.18}.trim-label{display:block;margin-bottom:10px;color:#7d828b;font-size:10px}.login-sheet,.account-sheet{padding:14px 0 4px}.login-sheet{text-align:center}.login-mark,.account-avatar{display:grid;width:54px;height:54px;margin:0 auto 15px;place-items:center;color:#fff;border-radius:18px;background:var(--fan-grey-1200)}.login-sheet h2,.account-sheet h2{margin-bottom:5px;text-align:center}.login-sheet>p,.account-sheet>p{margin:0 0 24px;color:#858a93;font-size:12px;text-align:center}.login-sheet label{display:block;margin:14px 0 0;color:#666b74;font-size:11px;text-align:left}.login-sheet input{height:46px;margin-top:7px;padding:0 13px;font-size:14px}.code-input{position:relative}.code-input button{position:absolute;right:6px;bottom:6px;height:34px;padding:0 10px;color:var(--fan-grey-1000);font-size:11px;border-radius:10px;background:#eaecf0}.code-input button:disabled{color:#a3a7ae}.account-sheet{text-align:center}.account-avatar{font-size:20px;font-weight:650}.account-credit{height:58px;gap:9px;margin:24px 0 12px;padding:0 16px;border-radius:16px;background:#f3f5f8}.account-credit span{flex:1;color:var(--fan-grey-800);font-size:13px;text-align:left}.account-credit strong{font-size:19px}.secondary-action{justify-content:center;width:100%;height:44px;gap:7px;color:#6c717a;border-radius:var(--fan-pill);background:#f0f2f5}.sheet-history{height:88%}.history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 10px}.history-grid .history-card{min-width:0}.history-grid .history-media{height:190px;border-radius:16px}.history-grid .history-meta{font-size:11px}.toast{position:absolute;z-index:40;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));max-width:calc(100% - 44px);padding:10px 15px;color:#fff;font-size:12px;line-height:1.4;text-align:center;border-radius:var(--fan-pill);background:#121317e0;box-shadow:0 12px 34px #12131738;backdrop-filter:blur(12px);transform:translate(-50%);animation:toastIn .24s var(--fan-ease)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes auraSpin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}}@keyframes sheetUp{0%{transform:translateY(100%)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,10px)}}@keyframes buttonShimmer{to{background-position:-200% 0}}@media(max-height:720px){.app-shell{grid-template-rows:54px minmax(0,1fr) auto}.topbar{padding-top:5px}.workspace{grid-template-rows:minmax(126px,1fr) 42px 60px;gap:7px;padding-top:5px}.template-chip{height:36px}.template-chip>span{width:24px;height:24px}.bottom-zone{padding-top:7px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.control-pill{height:34px}.generate-button{height:42px;margin-top:6px}.history-head{height:27px}.history-rail{height:69px}.history-media{height:48px}}@media(min-width:720px){.app-shell{width:min(1040px,calc(100% - 48px));height:min(820px,calc(100dvh - 48px));margin-top:24px;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);grid-template-rows:66px minmax(0,1fr);border-radius:32px}.topbar{grid-column:1 / -1;padding-inline:24px}.workspace{grid-column:1;padding:12px 10px 22px 24px}.bottom-zone{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 24px 22px 14px;background:transparent}.history-rail{height:112px}.history-card{flex-basis:122px}.history-media{height:84px}.sheet-layer{grid-column:1 / -1;grid-row:1 / -1}.bottom-sheet{max-width:480px;margin:0 auto;border-radius:28px 28px 0 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}