:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 90% 0, #2c1768 0, transparent 28%), #080b14; color: #f8f8fc; }
.app-shell { width: 100vw; max-width: 460px; min-height: 100vh; margin: 0 auto; padding: 28px 20px 30px; overflow: hidden; }
header { display: flex; align-items: center; justify-content: space-between; }
header strong { font-size: 24px; letter-spacing: -.5px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions small { color: #b8adc9; font-size: 11px; white-space: nowrap; }
.account-button { border: 1px solid #51436f; border-radius: 999px; padding: 8px 14px; background: #171425; color: #fff; }
.language-toggle { border: 1px solid #51436f; border-radius: 999px; min-width: 38px; padding: 7px 10px; background: #241b38; color: #ddd2ff; font-weight: 700; }
.auth-dialog { position: relative; }
.dialog-language-toggle { position: absolute; top: 14px; left: 16px; z-index: 2; }
@media(max-width:600px){.language-toggle{min-width:34px;padding:7px 8px}.header-actions{gap:5px}.account-button{padding:8px 10px}}
.account-credit-balance { color: #62d99b; font-weight: 700; }
header span, h1 span { background: linear-gradient(90deg, #8a55ff, #ff7581); color: transparent; background-clip: text; }
h1 { margin: 28px 0 24px; font-size: clamp(27px, 7.2vw, 40px); line-height: 1.2; letter-spacing: -1.5px; }
h1 span { white-space: nowrap; }
.upload { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; cursor: pointer; border: 2px dashed #8756ff; border-radius: 28px; background: linear-gradient(145deg, rgba(108,67,202,.2), rgba(23,26,44,.78)); }
.upload:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.upload-copy { position: relative; z-index: 2; text-align: center; }
.upload-icon { width: 62px; height: 62px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: #5939a7; font-size: 38px; font-weight: 300; }
.upload h2 { margin: 14px 0 4px; font-size: 22px; }
.upload p { margin: 0; color: #aaa9bd; font-size: 14px; }
.upload-notices { margin: 9px 4px 0; color: #8f93a6; font-size: 12px; line-height: 1.55; }
.upload-notices p { margin: 2px 0; }
.upload-notices strong { color: #aaaec0; font-weight: 600; }
.portrait-prepare-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin: 10px 4px 0; align-items: center; }
.portrait-prepare-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: #292d3c; }
.portrait-prepare-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7650ff, #f05cae); transition: width .18s ease; }
.portrait-prepare-progress.processing .portrait-prepare-track span { background-size: 220% 100%; animation: upload-transfer-shimmer 1.15s linear infinite; }
.portrait-prepare-progress small { color: #aeb2c2; }
.portrait-prepare-progress.ready small { color: #62d99b; font-weight: 700; }
.portrait-prepare-progress.pending small { color: #f0c46b; font-weight: 700; }
.portrait-prepare-progress.pending .portrait-prepare-track span { background: #c99535; }
.portrait-prepare-progress.failed small { color: #ff8298; }
.portrait-prepare-progress button { padding: 5px 10px; border: 1px solid #604890; border-radius: 8px; background: #29213d; color: #fff; }
.auxiliary-guidance { margin: 12px 0 0; padding: 14px; border: 1px solid #5c438c; border-radius: 14px; background: linear-gradient(135deg, rgba(112,66,216,.17), rgba(34,27,52,.78)); }
.auxiliary-guidance-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auxiliary-guidance-heading strong { color: #eadcff; }
.auxiliary-guidance-heading small { color: #aaa0c3; }
.auxiliary-guidance-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.auxiliary-guidance label { display: grid; gap: 6px; color: #d8d1e8; font-size: 13px; }
.auxiliary-guidance input { min-width: 0; border: 1px solid #4b4262; border-radius: 10px; padding: 10px 11px; background: rgba(15,17,27,.78); color: #fff; font: inherit; }
.auxiliary-guidance input:focus { border-color: #9672ed; outline: 2px solid rgba(150,114,237,.18); }
.auxiliary-guidance label small { color: #8f93a6; font-size: 11px; line-height: 1.4; }
.vip-advanced { margin: 12px 0; border: 1px solid #5c438c; border-radius: 14px; background: linear-gradient(135deg, rgba(112,66,216,.17), rgba(34,27,52,.78)); overflow: hidden; }
.vip-advanced > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 12px 13px; color: #eadcff; cursor: pointer; list-style: none; }
.vip-advanced > summary::-webkit-details-marker { display: none; }
.vip-advanced > summary::after { content: '展开 ›'; color: #aaa0c3; font-size: 11px; white-space: nowrap; }
.vip-advanced.locked > summary { cursor: not-allowed; opacity: .72; }
.vip-advanced.locked > summary::after { content: '未开通'; }
.vip-advanced[open] > summary::after { content: '收起⌄'; }
.vip-advanced > summary strong { font-size: 13px; line-height: 1.2; white-space: nowrap; }
.vip-advanced > summary small { min-width: 0; overflow: hidden; color: #aaa0c3; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vip-advanced .auxiliary-guidance { margin: 0; border: 0; border-top: 1px solid rgba(92,67,140,.65); border-radius: 0; background: transparent; }
.vip-advanced .resolution-selector { margin: 0; border: 0; border-top: 1px solid rgba(92,67,140,.65); border-radius: 0; background: transparent; }
.multi-reference-settings, .advanced-choice-section { padding: 14px; border-top: 1px solid rgba(92,67,140,.65); }
.segmented-options { display: grid; gap: 8px; margin-top: 10px; }
.reference-mode-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.generation-mode-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pose-strength-row { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid rgba(92,67,140,.65); background: rgba(16,14,25,.3); }
.pose-strength-row > strong { color: #ddd3ef; font-size: 12px; white-space: nowrap; }
.pose-strength-control { display: grid; min-width: 0; grid-template-columns: auto minmax(32px, 1fr) 30px; align-items: center; gap: 5px; color: #aaa0c3; font-size: 10px; white-space: nowrap; }
.pose-strength-control input { width: 100%; min-width: 0; height: 18px; margin: 0; accent-color: #8a55ff; }
.pose-strength-control output { color: #d8c9ff; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.segmented-options label { min-width: 0; cursor: pointer; }
.segmented-options input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-options span { display: flex; min-height: 44px; align-items: center; justify-content: center; padding: 9px 8px; border: 1px solid #3c4050; border-radius: 10px; background: rgba(15,17,27,.72); color: #b9b5c8; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.segmented-options input:checked + span { border-color: #8a55ff; background: linear-gradient(135deg, #7440e5, #5b2db9); color: #fff; box-shadow: 0 5px 16px rgba(91,45,185,.24); }
.segmented-options input:focus-visible + span { outline: 3px solid rgba(255,255,255,.88); outline-offset: 2px; }
.auxiliary-portrait-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.auxiliary-portrait-slot { min-width: 0; padding: 9px; border: 1px solid #4b4262; border-radius: 12px; background: rgba(15,17,27,.62); }
.auxiliary-portrait-slot > strong { display: block; margin-bottom: 7px; color: #ddd3ef; font-size: 12px; }
.auxiliary-portrait-preview { height: 92px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #171923; color: #777b8d; font-size: 12px; }
.auxiliary-portrait-preview img { width: 100%; height: 100%; object-fit: cover; }
.auxiliary-portrait-upload-progress { display: grid; gap: 5px; margin-top: 7px; }
.auxiliary-portrait-upload-track { height: 6px; overflow: hidden; border-radius: 99px; background: #292d3c; }
.auxiliary-portrait-upload-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7650ff, #f05cae); transition: width .18s ease; }
.auxiliary-portrait-upload-progress.processing .auxiliary-portrait-upload-track span { background-size: 220% 100%; animation: upload-transfer-shimmer 1.15s linear infinite; }
.auxiliary-portrait-upload-progress small { min-height: 15px; color: #aeb2c2; font-size: 10px; line-height: 1.35; }
.auxiliary-portrait-upload-progress.ready small { color: #62d99b; font-weight: 700; }
.auxiliary-portrait-upload-progress.failed small { color: #ff8298; }
.auxiliary-portrait-slot > div:last-child { display: grid; gap: 6px; margin-top: 7px; }
.auxiliary-portrait-slot button { min-height: 32px; padding: 6px 5px; border: 1px solid #604890; border-radius: 8px; background: #29213d; color: #eee8fa; font-size: 11px; }
.auxiliary-portrait-slot .remove-auxiliary-portrait { border-color: #5b4050; color: #ff9dad; background: #2c1d29; }
dialog.auxiliary-portrait-dialog { position: fixed; inset: clamp(104px, 18dvh, 180px) 14px auto; width: min(410px, calc(100vw - 28px)); max-height: calc(100vh - 152px); max-height: calc(100dvh - clamp(104px, 18dvh, 180px) - 24px); margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; }
.auxiliary-portrait-dialog > p { color: #999db0; font-size: 12px; }
.auxiliary-portrait-picker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; max-height: 55vh; overflow-y: auto; }
.auxiliary-portrait-picker-item { overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #171923; color: #fff; }
.auxiliary-portrait-picker-item img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.auxiliary-portrait-picker-item span { display: block; padding: 6px 3px; font-size: 11px; }
#multi-reference-tip { display: block; margin-top: 8px; color: #8f93a6; }
#portrait-preview { position: absolute; width: 100%; height: 100%; object-fit: contain; background: #090b13; opacity: 0; }
.upload.has-image #portrait-preview { opacity: 1; }
.upload.has-image .upload-copy { opacity: 0; }
.templates { margin-top: 28px; }
.portrait-library { margin-top: 22px; }
.portrait-library h2 { margin: 0 0 10px; font-size: 18px; }
.portrait-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.portrait-card { position: relative; flex: 0 0 68px; }
.portrait-card.skeleton span,
.portrait-thumbnail-retry { display: grid; width: 68px; height: 86px; place-items: center; border: 0; border-radius: 14px; background: linear-gradient(100deg, #20263a 25%, #2b3248 40%, #20263a 55%); background-size: 240% 100%; }
.portrait-card.skeleton span { animation: skeleton-loading 1.4s infinite linear; }
.portrait-thumbnail-retry { padding: 6px; color: #d7c7ff; font-size: 11px; cursor: pointer; }
.portrait-item { position: relative; width: 68px; height: 86px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 14px; background: #191c28; }
.portrait-item.selected { border-color: #925cff; }
.portrait-item.portrait-blocked { display: grid; place-items: center; padding: 7px; border-color: #663441; color: #ff8ca0; font-size: 10px; line-height: 1.35; background: #24131a; }
.portrait-item.portrait-review-pending { border-color: #9b7636; opacity: .82; }
.portrait-item.portrait-review-rejected { border-color: #663441; opacity: .72; }
.portrait-item img { width: 100%; height: 100%; object-fit: cover; }
.portrait-review-badge { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 2; padding: 3px 4px; border-radius: 7px; color: #fff; font-size: 9px; line-height: 1.2; text-align: center; background: rgba(20, 17, 25, .86); pointer-events: none; }
.portrait-review-badge.pending { color: #ffe0a0; }
.portrait-review-badge.rejected { color: #ff9dad; }
.portrait-item.loading::after { content: attr(data-loading-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: #fff; font-size: 11px; line-height: 1.3; background: rgba(8, 10, 18, .78); }
.portrait-delete { position: absolute; top: -7px; right: -7px; width: 25px; height: 25px; border: 1px solid #5b4050; border-radius: 50%; padding: 0; background: #2c1d29; color: #ff9dad; font-size: 19px; line-height: 1; }
.template-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.templates h2 { font-size: 18px; margin: 0; }
#template-sort { min-height: 38px; padding: 0 10px; border: 1px solid #3c4050; border-radius: 10px; background: #171b28; color: #e8e9ef; font: 13px/1 inherit; }
.template-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; padding: 1px 0 3px; scrollbar-width: none; }
.template-tabs::-webkit-scrollbar { display: none; }
.template-tabs button { flex: 0 0 auto; border: 1px solid #343849; border-radius: 999px; padding: 8px 13px; background: #141824; color: #aeb2c2; font: 13px/1 inherit; }
.template-tabs button.active { border-color: #9b5cff; color: #fff; background: linear-gradient(135deg, #6f36dc, #b4419a); }
.template-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-auto-columns: minmax(112px, 31%); gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: 2px 2px 8px; }
.template-list.few-templates { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-columns: auto; overflow-x: hidden; }
.template { min-width: 0; position: relative; overflow: hidden; border: 1px solid #303545; border-radius: 13px; background: #151925; color: white; font: inherit; }
.template { scroll-snap-align: start; }
.template-select { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.template b { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(145deg, #272052, #6b3bc2 55%, #d34e87); color: rgba(255,255,255,.85); font-size: 22px; letter-spacing: 2px; }
.template b video { width: 100%; height: 100%; object-fit: contain; background: #10131d; }
.template b em { position: absolute; z-index: 2; padding: 4px 8px; border-radius: 9px; background: rgba(0,0,0,.62); color: #fff; font-style: normal; font-weight: 800; text-shadow: 0 1px 3px #000; }
.template-status-badges { position: absolute; z-index: 3; top: 6px; right: 6px; display: flex; gap: 4px; }
.template b .template-status-badges em { position: static; min-width: 23px; padding: 4px 6px; border-radius: 8px; color: #fff; font-size: 12px; line-height: 1; letter-spacing: 0; }
.template b .template-hot-badge { background: linear-gradient(135deg,#ff8a2b,#ff2d86 60%,#8d4dff); box-shadow: 0 2px 9px rgba(255,45,134,.38); }
.template b .template-recommended-badge { background: linear-gradient(135deg,#39c7ff,#5968ff 60%,#a34dff); box-shadow: 0 2px 9px rgba(75,111,255,.35); }
.template:has(.template-status-badges) > .template-select > i { top: 35px; }
.template b.preview-unavailable video { opacity: 0; }
.template b video[src] { position: relative; z-index: 1; }
.template-meta { min-height: 48px; padding: 6px 7px 5px; text-align: center; }
.template-name { display: block; overflow: hidden; color: #f3f4f8; font-size: 12px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.template-price-row { display: flex; min-width: 0; align-items: baseline; justify-content: center; gap: 5px; overflow: hidden; font-size: 12px; line-height: 18px; white-space: nowrap; }
.template-credit-cost { color: #f2bd68; font-size: inherit; font-weight: 700; }
.template i { display: none; position: absolute; top: 5px; right: 5px; z-index: 2; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #8050ff; font-size: 12px; font-style: normal; }
.template-preview { position: relative; width: calc(100% - 10px); margin: 0 5px 6px; overflow: hidden; padding: 5px 2px; border: 1px solid #3d4254; border-radius: 8px; background: #202535; color: #bfc3d3; font: 11px/1.2 inherit; }
.preview-loading { isolation: isolate; color: #fff !important; background: rgba(10,13,22,.88) !important; }
.preview-loading::after { position: absolute; z-index: -1; inset: auto 0 0; width: var(--preview-progress, 0%); height: 4px; border-radius: 99px; background: linear-gradient(90deg, #7650ff, #ff6b8b); box-shadow: 0 0 12px rgba(255,107,139,.55); content: ''; transition: width .2s ease; }
.template-expand { position: absolute; top: 6px; left: 6px; z-index: 4; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 8px; padding: 0; background: rgba(5,7,12,.68); color: #fff; font: 17px/1 inherit; backdrop-filter: blur(4px); }
.template-preview-dialog { width: min(390px, calc(100vw - 24px)); max-height: 92vh; border: 1px solid #443d5a; border-radius: 22px; padding: 16px; background: #0d111b; color: #fff; }
.template-preview-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(6px); }
.template-preview-dialog h2 { margin: 4px 0 12px; padding-right: 38px; font-size: 17px; }
.template-preview-dialog video { display: block; width: 100%; max-height: 78vh; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 14px; background: #000; }
.template.selected { border-color: #9a6aff; box-shadow: 0 0 14px rgba(128,80,255,.28); }
.template.selected i { display: grid; }
.message { min-height: 22px; margin: 12px 0 0; color: #ff8792; font-size: 14px; }
.submit { width: 100%; min-height: 62px; border: 0; border-radius: 22px; background: linear-gradient(100deg, #713eff, #e055c1 55%, #ff7861); color: white; font: 700 21px/1 inherit; cursor: pointer; box-shadow: 0 14px 38px rgba(116,64,255,.22); }
#submit { position: sticky; bottom: 12px; z-index: 20; }
#submit.is-submitting { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#submit.is-submitting::before { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; content: ''; animation: spin .75s linear infinite; }
.submit:disabled { opacity: .58; cursor: wait; }
.upload-progress { margin: 12px 4px 0; }
.upload-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #292d3c; }
.upload-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7650ff, #f05cae, #ff7861); transition: width .18s ease; }
.upload-progress.is-transferring .upload-progress-track span { background-size: 220% 100%; animation: upload-transfer-shimmer 1.15s linear infinite; }
@keyframes upload-transfer-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.upload-progress small { display: block; margin-top: 6px; color: #aaaec0; text-align: right; }
.upload-progress.success small { color: #62d99b; font-weight: 700; }
.queue { margin-top: 20px; padding: 18px; border: 1px solid #343847; border-radius: 20px; background: rgba(13,17,29,.75); }
.queue > div { display: flex; align-items: center; gap: 14px; }
.queue small, .queue strong { display: block; }
.queue small { color: #9296a7; margin-bottom: 4px; }
.queue-copy { min-height: 58px; display: grid; align-content: center; }
#status { display: block; min-height: 20px; margin-top: 3px; color: #aeb3c4; font-size: 13px; line-height: 20px; }
#result-video { width: 100%; margin-top: 16px; border-radius: 14px; background: #000; }
.download { display: block; margin-top: 12px; padding: 12px; border-radius: 12px; background: #292043; color: #fff; text-align: center; text-decoration: none; font-weight: 650; }
[hidden] { display: none !important; }
.spinner { width: 38px; height: 38px; border: 4px solid #30234e; border-top-color: #8b55ff; border-radius: 50%; animation: spin 1.3s linear infinite; }
footer { margin-top: 22px; text-align: center; color: #777c8d; font-size: 13px; }
footer span, .ai-disclaimer { display: block; }
.ai-disclaimer { margin-top: 5px; color: #555b6c; font-size: 10px; line-height: 1.45; }
.auth-dialog { width: min(400px, calc(100vw - 28px)); border: 1px solid #3d3a50; border-radius: 24px; padding: 24px; background: #111522; color: #fff; }
.auth-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.dialog-close { float: right; border: 0; background: transparent; color: #bbb; font-size: 26px; }
.auth-dialog h2 { margin: 4px 0 16px; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; }
.auth-tabs button { border: 0; border-radius: 10px; padding: 9px 4px; background: #252939; color: #aaa; }
.auth-tabs button.active { background: #7042d8; color: #fff; }
#auth-form { display: grid; gap: 10px; }
#auth-form input { width: 100%; border: 1px solid #3c4050; border-radius: 12px; padding: 13px; background: #191d29; color: #fff; font: inherit; }
.auth-submit { min-height: 48px; border-radius: 13px; font-size: 17px; }
.recovery-result { margin-top: 12px; padding: 14px; border-radius: 12px; background: #242036; }
.recovery-result code, .recovery-result small { display: block; margin-top: 8px; }
.recovery-result code { font-size: 20px; color: #ffcf74; letter-spacing: 1px; }
.recovery-result button { width: 100%; margin-top: 12px; border: 0; border-radius: 11px; padding: 11px; background: #7042d8; color: #fff; font-weight: 700; }
.personal-dialog { max-height: 86vh; overflow-y: auto; }
.personal-account-menu { position: relative; margin-bottom: 12px; }
.personal-username { width: 100%; border: 0; padding: 0; background: transparent; color: #aeb2c2; text-align: left; font: inherit; cursor: pointer; }
.personal-credit-balance { color: #79d9b0; font-weight: 700; }
.profile-menu { position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; min-width: 160px; overflow: hidden; border: 1px solid #3c4050; border-radius: 12px; background: #191d29; box-shadow: 0 12px 30px rgba(0,0,0,.38); }
.profile-menu button { display: block; width: 100%; border: 0; border-bottom: 1px solid #2d3241; padding: 11px 13px; background: transparent; color: #e6e8ef; text-align: left; }
.profile-menu button:last-child { border-bottom: 0; }
.profile-menu .logout-button { color: #ff9aaa; }
.personal-account-row { display: flex; align-items: center; gap: 8px; }
.personal-account-row .personal-account-menu { min-width: 0; }
.purchase-credits-button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(98,217,155,.55); border-radius: 10px; background: rgba(98,217,155,.12); color: #79d9b0; font-size: 12px; }
.purchase-dialog { width: min(92vw, 430px); max-height: 88vh; overflow: auto; }
.purchase-dialog > img { display: block; width: 100%; max-height: 65vh; border-radius: 14px; object-fit: contain; background: #090b12; }
.purchase-contact { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: #fff; }
.purchase-contact button { padding: 7px 12px; border: 1px solid #66528f; border-radius: 9px; background: #342755; color: #fff; }
#purchase-copy-feedback { min-height: 18px; margin: 6px 0 0; color: #79d9b0; text-align: center; }
.nickname-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin: 0 0 14px; }
.nickname-form input { min-width: 0; border: 1px solid #3c4050; border-radius: 11px; padding: 10px; background: #191d29; color: #fff; }
.nickname-form button { min-height: 40px; border: 0; border-radius: 11px; padding: 0 9px; background: #313750; color: #fff; }
.personal-credit-ledger { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #343849; border-radius: 12px; background: #171b27; font-size: 12px; }
.ledger-heading { display: flex; align-items: center; justify-content: space-between; }
.ledger-heading button { border: 0; background: transparent; color: #aeb2c2; }
.personal-credit-ledger p { margin: 8px 0 0; }
.credit-income { color: #79d9b0; }.credit-expense { color: #f2bd68; }
.redeem-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.redeem-form input { min-width: 0; border: 1px solid #3c4050; border-radius: 11px; padding: 11px; background: #191d29; color: #fff; }
.redeem-form button { border: 0; border-radius: 11px; padding: 0 16px; background: #7042d8; color: #fff; }
.redeem-message { min-height: 18px; margin: 7px 0 0; color: #79d9b0; font-size: 12px; }
.personal-dialog h3 { margin: 20px 0 12px; }
.history-notice { margin: -4px 0 12px; padding: 10px; border-radius: 10px; background: rgba(66,189,139,.12); color: #79d9b0; font-size: 13px; }
.history-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.history-card { min-width: 0; overflow: hidden; border: 1px solid #343849; border-radius: 14px; background: #191d29; }
.history-media { position: relative; }
.history-card video, .history-thumbnail { display: block; width: 100%; aspect-ratio: 9 / 12; object-fit: cover; background: #080a10; }
.history-preview-load { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.history-preview-load::before { display: block; width: 0; height: 0; margin: auto; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 14px solid rgba(255,255,255,.42); content: ''; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.history-preview-load:hover::before { border-left-color: rgba(255,255,255,.58); }
.history-preview-load.loading { color: #fff; background: rgba(5,7,13,.72); font-size: 13px; opacity: 1; cursor: wait; }
.history-preview-load.loading::before { display: none; }
.history-preview-load[hidden] { display: none; }
.history-thumbnail-retry { width: 100%; aspect-ratio: 9 / 12; padding: 14px; border: 0; background: #151925; color: #d7c7ff; font-size: 12px; line-height: 1.5; }
.skeleton-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 12; color: #9ba2b5; background: linear-gradient(100deg, #121725 25%, #20273a 40%, #121725 55%); background-size: 240% 100%; animation: skeleton-loading 1.4s infinite linear; }
.skeleton .history-summary strong, .skeleton .history-summary p, .skeleton .history-actions span { display: block; border-radius: 8px; background: linear-gradient(100deg, #20263a 25%, #2b3248 40%, #20263a 55%); background-size: 240% 100%; animation: skeleton-loading 1.4s infinite linear; }
.skeleton .history-summary strong { width: 68%; height: 14px; }
.skeleton .history-summary p { width: 48%; height: 12px; }
.skeleton .history-actions span { flex: 1; height: 30px; }
.skeleton .history-actions span:last-child { flex: 0 0 34px; }
@keyframes skeleton-loading { to { background-position-x: -240%; } }
.history-card p { margin: 0; color: #aeb2c2; font-size: 13px; }
.history-card p.history-state-complete { color: #62d99b; }
.history-card p.history-state-error { max-width: 100%; overflow-wrap: anywhere; color: #ff6f7e; font-size: 13px; }
.history-card p.history-state-running { color: #ffad55; }
.history-state-muted { color: #aeb2c2; }
.history-media-error { position: absolute; inset: auto 6px 6px; padding: 5px 7px; border-radius: 7px; background: rgba(25, 16, 28, .88); color: #ff9aab; font-size: 11px; line-height: 1.3; }
.history-card p.history-state-blocked { max-width: 100%; overflow-wrap: anywhere; color: #ff8298; font-weight: 700; }
.history-summary { display: grid; gap: 5px; min-width: 0; padding: 10px; }
.history-summary .history-state { display: block; min-width: 0; overflow: hidden; padding: 0; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.history-template-name { display: block; min-width: 0; overflow: hidden; color: #fff; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.history-card a { display: block; margin: 0 8px 8px; padding: 8px; border-radius: 9px; background: #342755; color: white; text-align: center; text-decoration: none; }
.history-progress { height: 6px; margin: 0 10px 10px; overflow: hidden; border-radius: 99px; background: #303544; }
.history-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7650ff, #ff6b8b); transition: width .3s ease; }
.history-rule { display: block; margin: -5px 0 12px; color: #858a9d; font-size: 11px; line-height: 1.5; }
.history-rule em { color: #ff6677; font-style: normal; font-weight: 700; }
.history-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px; }
.history-filters button { padding: 7px 2px; border: 1px solid #3b4052; border-radius: 9px; background: #1c2130; color: #9da3b6; font-size: 12px; }
.history-filters button.active { border-color: #8050ff; background: #342755; color: #fff; }
.history-actions { display: flex; gap: 6px; padding: 0 8px 8px; }
.history-actions button { flex: 1; min-width: 0; padding: 7px 3px; border: 1px solid #494053; border-radius: 8px; background: #252331; color: #ddd; font-size: 12px; }
.history-actions .history-delete { flex: 0 0 34px; width: 34px; padding-inline: 0; color: #ff4d61; }
.history-delete svg { display: block; width: 17px; height: 17px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.history-actions a { flex: 1; min-width: 0; margin: 0; padding: 7px 3px; font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
@media (max-width: 360px) { .app-shell { padding-inline: 14px; } h1 { font-size: 25px; } .template-list { grid-auto-columns: 32%; gap: 7px; } .template-name, .template-price-row { font-size: 11px; } }
@media (max-width: 640px) { .auxiliary-guidance-heading { align-items: flex-start; flex-direction: column; gap: 3px; } .auxiliary-guidance-fields { grid-template-columns: 1fr; } }
.resolution-selector { margin: 6px 0; padding: 7px 8px; border: 1px solid rgba(128,80,255,.45); border-radius: 11px; background: rgba(78,48,142,.16); }
.resolution-selector > strong { font-size: 13px; }
.resolution-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 4px; }
.resolution-options.has-hd-upscale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resolution-options label { cursor: pointer; }
.resolution-options input { position: absolute; opacity: 0; }
.resolution-options .resolution-option-label { display: grid; min-height: 44px; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 3px 6px; border: 1px solid #3c4050; border-radius: 8px; text-align: left; }
.resolution-options .resolution-option-label strong { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.resolution-options .ratio-preview { display: block; grid-column: 2; grid-row: 1 / 3; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 2px; }
.resolution-options .ratio-nine-sixteen { width: 9px; height: 16px; }
.resolution-options .ratio-three-four { width: 14px; height: 18px; }
.resolution-options .ratio-landscape { width: 18px; height: 10px; }
.resolution-options input:checked + .resolution-option-label { border-color: #8050ff; background: #342755; color: #fff; }
.resolution-options input:disabled + .resolution-option-label { border-color: #313441; background: #20232d; color: #6f7381; cursor: not-allowed; opacity: .58; }
.resolution-options input:disabled + .resolution-option-label small { color: #626674; }
.resolution-options small { display: block; grid-column: 1; margin-top: 1px; color: #aeb2c2; font-size: 10px; }
.resolution-options .ultra-clear-badge { display: inline-flex; padding: 1px 4px; border-radius: 999px; background: rgba(83,216,255,.14); color: #8ee8ff; font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.2; }
.resolution-options .hd-option { border-color: rgba(111,210,255,.48); background: linear-gradient(135deg, rgba(64,47,112,.42), rgba(22,37,50,.72)); }
@media(max-width:380px){.segmented-options span{padding-inline:5px;font-size:12px}.resolution-options{gap:6px}.resolution-options span{font-size:12px}.resolution-options small{font-size:9px}}
@media (max-width: 380px) { .pose-strength-row { gap: 5px; padding-inline: 9px; } .pose-strength-control { grid-template-columns: auto minmax(24px, 1fr) 27px; gap: 3px; } .pose-strength-control > span { font-size: 9px; } }
.portrait-card-default { position: relative; }
.portrait-example-badge { position: absolute; left: 5px; bottom: 5px; padding: 2px 6px; border-radius: 99px; background: rgba(112,66,216,.9); color: #fff; font-size: 10px; pointer-events: none; }
.template-base-cost{flex:0 1 auto;overflow:hidden;color:#8f94a7;font-size:11px;text-overflow:ellipsis}.template-credit-cost{flex:0 0 auto;color:#f4b85f}
.template-credit-cost.discounted{color:#ff6f91;text-shadow:0 0 8px rgba(255,111,145,.24)}
.brand-lockup{display:flex;align-items:center;gap:7px;min-width:0}
.beta-badge{display:inline-flex;padding:3px 7px;border:1px solid rgba(162,122,255,.55);border-radius:999px;background:rgba(118,80,255,.14);color:#cbb8ff;font-size:10px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
.feedback-dialog{width:min(92vw,430px)}
.feedback-form{display:grid;gap:12px;margin-top:16px}
.feedback-form label{display:grid;gap:6px;color:#d8d1e8;font-size:13px}
.feedback-form select,.feedback-form textarea,.feedback-form input{width:100%;padding:11px 12px;border:1px solid #4b4262;border-radius:10px;background:#121522;color:#fff;font:inherit}
.feedback-form textarea{resize:vertical;min-height:112px}
.feedback-form .message{min-height:20px;margin:0;text-align:center}
.image-adjustment-launch{margin:10px 0}.image-adjustment-launch>button{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;padding:11px 14px;border:1px solid rgba(128,80,255,.55);border-radius:12px;background:linear-gradient(135deg,rgba(83,54,150,.5),rgba(35,27,60,.8));color:#fff;font-size:14px;text-align:left}.image-adjustment-launch small{color:#bfb5d4}.image-adjustment-dialog{width:min(920px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding-top:max(18px,env(safe-area-inset-top));overflow:auto;border-color:#393047;background:linear-gradient(180deg,#1a1625,#11141e)}.image-adjustment-dialog>button{position:sticky;z-index:4;top:max(8px,env(safe-area-inset-top));display:block;min-width:68px;min-height:42px;margin:0 0 -42px auto;border:1px solid #514663;border-radius:10px;background:#282234;color:#fff;font-size:14px}.image-adjustment-dialog h2{margin:7px 82px 14px 0}.image-adjustment-editor{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;clear:both;margin:16px 0}.image-adjustment-editor>section{min-width:0}.image-adjustment-preview{display:grid;aspect-ratio:3/4;margin-top:8px;place-items:center;overflow:hidden;border:1px solid #40384f;border-radius:14px;background:#0a0c13;color:#858a9b}.image-adjustment-preview img{width:100%;height:100%;object-fit:contain}.image-adjustment-result{margin-top:18px;padding-top:16px;border-top:1px solid rgba(112,89,145,.34)}.image-adjustment-result>.image-adjustment-preview{width:100%;max-height:560px;aspect-ratio:16/9}.image-adjustment-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.image-adjustment-actions button,.image-adjustment-actions label,.image-adjustment-actions a,.image-adjustment-dialog form>button{display:flex;min-height:42px;align-items:center;justify-content:center;flex:1;padding:9px 11px;border:1px solid #514663;border-radius:10px;background:#272135;color:#fff;font:600 14px/1.2 system-ui,sans-serif;text-align:center;text-decoration:none}.image-adjustment-dialog form>button{width:100%;border-color:#7856d9;background:linear-gradient(135deg,#7651dc,#5a35b9)}.image-adjustment-actions button:disabled,.image-adjustment-dialog form>button:disabled{opacity:.48}.image-adjustment-dialog form{display:grid;align-content:start;gap:12px;padding:14px;border:1px solid rgba(81,70,99,.65);border-radius:14px;background:rgba(18,21,34,.68)}.image-adjustment-dialog form>label{display:grid;gap:7px}.image-adjustment-dialog textarea{min-height:130px;padding:11px;border:1px solid #4b4262;border-radius:10px;background:#121522;color:#fff;resize:vertical}.image-adjustment-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.image-adjustment-modes label{display:flex;min-height:48px;align-items:center;padding:10px;border:1px solid #443b58;border-radius:10px;background:#171a27;font-size:14px}.image-adjustment-dialog .message{min-height:20px;margin:0;text-align:center}
.image-adjustment-recent-list{display:flex;min-height:58px;gap:7px;margin-top:8px;overflow-x:auto;color:#858a9b;font-size:12px}.image-adjustment-recent-list button{flex:0 0 48px;width:48px;height:58px;padding:0;overflow:hidden;border:1px solid #4b4262;border-radius:9px;background:#10131d}.image-adjustment-recent-list img{width:100%;height:100%;object-fit:cover}.image-adjustment-modes small{display:block;margin:3px 0 0;color:#e7b85d;font-size:11px}
.image-adjustment-preview img,.history-adjustment-result{cursor:zoom-in}.image-result-viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));border:0;background:rgba(3,4,8,.96)}.image-result-viewer::backdrop{background:rgba(0,0,0,.86)}.image-result-viewer>button{position:fixed;z-index:2;top:calc(14px + env(safe-area-inset-top));right:16px;width:46px;height:46px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(28,28,36,.88);color:#fff;font-size:28px;line-height:1}.image-result-viewer>img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:640px){.image-adjustment-editor{grid-template-columns:1fr}.image-adjustment-preview,.image-adjustment-result>.image-adjustment-preview{aspect-ratio:4/3}.image-adjustment-dialog{width:calc(100vw - 18px);max-height:calc(100dvh - 18px);padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom))}.image-adjustment-dialog>button{top:8px}.image-adjustment-actions button,.image-adjustment-actions label,.image-adjustment-actions a,.image-adjustment-dialog form>button{min-height:44px;font-size:14px}}
.advanced-tool-launch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.advanced-tool-launch .image-adjustment-launch{min-width:0}.advanced-tool-launch .image-adjustment-launch>button{height:100%;gap:6px}.advanced-tool-launch .image-adjustment-launch small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.complex-template-dialog{width:min(980px,calc(100vw - 28px));overflow-x:hidden}.complex-template-intro{margin:-4px 0 16px;color:#aaa3bb;font-size:13px}.complex-template-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.complex-template-list button{display:grid;min-height:92px;gap:5px;padding:14px;border:1px solid #44385c;border-radius:14px;background:linear-gradient(145deg,#211a32,#151824);color:#fff;text-align:left}.complex-template-list button strong{font-size:16px}.complex-template-list button small{color:#aaa3bb}.complex-template-list button.active{border-color:#8f66ff;box-shadow:0 0 0 2px rgba(132,82,255,.2);background:linear-gradient(145deg,#4a2b86,#241936)}.complex-template-dialog form,.complex-template-workspace,.complex-template-recent,.complex-template-recent-list,.complex-template-grid{min-width:0;max-width:100%}.complex-template-dialog form{margin-top:16px;padding:0;border:0;background:none}.complex-template-workspace{padding:15px;border:1px solid rgba(111,85,151,.5);border-radius:15px;background:rgba(11,13,22,.54)}.complex-template-heading{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.complex-template-heading>div{display:grid;min-width:0;gap:4px}.complex-template-heading small{color:#aaa3bb;font-size:12px}.complex-template-heading>span{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:#352552;color:#d9c8ff;font-size:11px}.complex-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.complex-template-slot{position:relative;display:grid;min-width:0;gap:7px;padding:9px;border:1px solid #383247;border-radius:12px;background:#121520}.complex-template-slot>strong{font-size:12px}.complex-template-preview{display:grid;aspect-ratio:3/4;place-items:center;overflow:hidden;border-radius:9px;background:#090b11;color:#777d8d;font-size:12px}.complex-template-preview img{width:100%;height:100%;object-fit:cover}.complex-template-slot label{display:flex;min-height:38px;align-items:center;justify-content:center;border:1px solid #514663;border-radius:9px;background:#282234;color:#fff;font-size:12px}.complex-template-progress{display:grid;gap:7px;margin-top:12px;padding:11px;border:1px solid #44385c;border-radius:12px;background:#141724}.complex-template-progress>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}.complex-template-progress>b{height:8px;overflow:hidden;border-radius:999px;background:#29243d}.complex-template-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7554e8,#dc4ac7);transition:width .25s ease}.complex-template-progress small{color:#aaa3bb}.complex-template-dialog form>button{width:100%;margin-top:12px}.complex-template-dialog #complex-template-history{border-color:#4d4261;background:#24202e}
.complex-template-recent{margin:0 0 13px;padding:11px;border:1px solid rgba(94,76,123,.55);border-radius:12px;background:rgba(21,19,31,.82)}.complex-template-recent>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}.complex-template-recent>div:first-child strong{font-size:13px}.complex-template-recent>div:first-child small{color:#aaa3bb;font-size:11px}.complex-template-recent-list{display:flex;width:100%;min-height:76px;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.complex-template-recent-list>button{position:relative;display:grid;flex:0 0 58px;width:58px;height:74px;padding:0;overflow:hidden;border:1px solid #4b4262;border-radius:10px;background:#0d1019;color:#fff}.complex-template-recent-list>button img{width:100%;height:100%;object-fit:cover}.complex-template-recent-list>button span{position:absolute;right:3px;bottom:3px;left:3px;padding:2px 3px;border-radius:5px;background:rgba(13,15,25,.78);font-size:10px;text-align:center}.complex-template-recent-list>button.selected{border-color:#9a74ff;box-shadow:0 0 0 2px rgba(145,101,255,.22)}.complex-template-recent-list>button:disabled{opacity:.64}.complex-template-recent-empty{align-self:center;color:#858a9b;font-size:12px}.complex-template-recent-retry{min-height:42px;padding:8px 10px;border:1px solid #514663;border-radius:9px;background:#282234;color:#fff}.complex-template-remove{position:absolute;z-index:3;top:5px;right:5px;width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(20,18,28,.86);color:#fff;font-size:22px;line-height:1;box-shadow:0 3px 12px rgba(0,0,0,.35)}
@media (max-width:640px){.advanced-tool-launch{gap:7px}.advanced-tool-launch .image-adjustment-launch>button{display:grid;min-height:58px;justify-content:start;padding:9px 10px}.advanced-tool-launch .image-adjustment-launch small{font-size:10px}.complex-template-list{grid-template-columns:1fr}.complex-template-list button{min-height:72px}.complex-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.complex-template-workspace{padding:11px}.complex-template-heading{display:grid}.complex-template-heading>span{justify-self:start}.complex-template-recent>div:first-child{display:grid;gap:2px}.complex-template-recent-list>button{flex-basis:62px;width:62px;height:78px}}
@media(max-width:380px){.brand-lockup{gap:4px}.beta-badge{padding:2px 5px;font-size:9px}}
html,body{touch-action:manipulation}
@media (max-width:640px){input,select,textarea{font-size:16px}}