:root{color-scheme:light;--bg-top:#f8efe4;--bg-mid:#f4eadf;--bg-bottom:#ede2d4;--card:rgba(255, 250, 244, 0.9);--card-strong:rgba(255, 248, 240, 0.96);--card-border:rgba(97, 73, 46, 0.08);--surface:rgba(241, 230, 216, 0.7);--text:#18222f;--muted:rgba(24, 34, 47, 0.6);--muted-soft:rgba(24, 34, 47, 0.44);--amber:#b94f30;--amber-bright:#e07a4c;--ink:#223d69;--ink-strong:#18222f;--mint:#257251;--shadow:0 24px 52px rgba(56, 40, 22, 0.08);--shadow-soft:0 16px 34px rgba(44, 36, 28, 0.06);--radius-xl:32px;--radius-lg:26px;--radius-md:20px}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{font-family:"SF Pro Display","PingFang SC","Avenir Next",sans-serif;color:var(--text);background:radial-gradient(circle at 8% 6%,rgba(224,122,76,.18),transparent 24%),radial-gradient(circle at 92% 12%,rgba(34,64,104,.12),transparent 22%),linear-gradient(180deg,var(--bg-top) 0,var(--bg-mid) 38%,var(--bg-bottom) 100%)}button,input,label{font:inherit}button{border:0;cursor:pointer}input[type=file]{display:none}input[type=range]{width:100%;margin:0;accent-color:var(--amber-bright)}input[type=text]{width:100%;border:1px solid rgba(114,85,52,.12);border-radius:18px;background:rgba(255,255,255,.88);color:var(--text);min-height:50px;padding:0 16px;outline:0;transition:border-color 140ms ease,box-shadow 140ms ease}input[type=text]:focus{border-color:rgba(185,79,48,.28);box-shadow:0 0 0 4px rgba(224,122,76,.1)}.app-shell{width:min(100%,560px);margin:0 auto;padding:16px 14px 28px}.topbar{position:sticky;top:0;z-index:20;padding-bottom:12px;backdrop-filter:blur(12px)}.panel-card,.topbar-inner{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow)}.soft-card{border-radius:28px}.topbar-inner{display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,251,246,.88),rgba(255,247,239,.74));box-shadow:0 14px 30px rgba(44,36,28,.05),inset 0 1px 0 rgba(255,255,255,.72)}.brand-mark{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;background:rgba(255,251,246,.88);color:var(--amber);font-size:20px;font-weight:900;letter-spacing:.04em;box-shadow:0 10px 22px rgba(44,36,28,.05),inset 0 0 0 1px rgba(91,70,45,.08)}.topbar-copy{min-width:0;flex:1}.section-label,.topbar-eyebrow{margin:0;color:var(--muted-soft);font-size:11px;line-height:1;letter-spacing:.18em;text-transform:uppercase;font-weight:800}.section-head h2,.topbar-copy h1{margin:8px 0 0;color:var(--text)}.topbar-copy h1{font-size:clamp(24px,5vw,30px);line-height:1.08;font-weight:900;letter-spacing:.02em}.badge,.glass-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:800;line-height:1.1;white-space:nowrap}.glass-pill{background:rgba(255,250,244,.88);color:#6b4835;box-shadow:0 12px 28px rgba(44,36,28,.06),inset 0 0 0 1px rgba(91,70,45,.08)}.panel-card{padding:20px 18px;margin-top:14px}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.section-head h2{font-size:24px;line-height:1.14;font-weight:900}.badge-amber{background:rgba(224,122,76,.14);color:#ad4a28}.badge-ink{background:rgba(34,61,105,.1);color:var(--ink)}.badge-mint{background:rgba(76,175,131,.16);color:var(--mint)}.badge-muted{background:rgba(24,34,47,.08);color:rgba(24,34,47,.56)}.effect-selector{position:relative;isolation:isolate}.effect-select-trigger{width:100%;min-height:88px;padding:14px 16px;border-radius:26px;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;position:relative;overflow:hidden;background:radial-gradient(circle at top right,rgba(255,209,102,.22),transparent 36%),linear-gradient(180deg,#fffdf9,rgba(249,241,231,.98));border:1px solid rgba(185,79,48,.14);box-shadow:0 18px 32px rgba(44,36,28,.1),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 18px rgba(241,226,206,.32);transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease}.effect-select-trigger::before{content:"";position:absolute;left:16px;top:15px;bottom:15px;width:4px;border-radius:999px;background:linear-gradient(180deg,rgba(224,122,76,.92),rgba(248,179,112,.8));box-shadow:0 0 0 1px rgba(255,255,255,.22)}.effect-select-main{min-width:0;display:flex;align-items:center;flex:1}.effect-option-copy,.effect-select-copy{min-width:0;display:grid}.effect-select-copy{padding-left:14px}.effect-select-caption{color:var(--muted-soft);font-size:11px;line-height:1;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.effect-option-title,.effect-select-name{margin-top:7px;font-size:18px;line-height:1.2;font-weight:900;letter-spacing:-.01em;color:var(--text)}.effect-option-desc{margin-top:5px;color:rgba(24,34,47,.56);font-size:12px;line-height:1.45}.effect-select-arrow{width:38px;height:38px;flex:0 0 auto;border-radius:999px;background:rgba(34,61,105,.08);box-shadow:inset 0 0 0 1px rgba(34,61,105,.08);position:relative;transition:transform 140ms ease,background 140ms ease}.effect-select-arrow::before{content:"";position:absolute;inset:0;width:10px;height:10px;margin:auto;border-right:2px solid rgba(34,61,105,.72);border-bottom:2px solid rgba(34,61,105,.72);transform:translateY(-2px) rotate(45deg);transition:transform 140ms ease}.effect-selector[data-open=true] .effect-select-trigger{border-color:rgba(34,61,105,.16);box-shadow:0 22px 40px rgba(44,36,28,.12),inset 0 1px 0 rgba(255,255,255,.94),inset 0 -12px 20px rgba(233,228,255,.22)}.effect-selector[data-open=true] .effect-select-arrow{background:rgba(34,61,105,.12)}.effect-selector[data-open=true] .effect-select-arrow::before{transform:translateY(2px) rotate(-135deg)}.effect-select-panel{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:30;display:grid;gap:6px;max-height:min(48vh,430px);padding:12px;overflow-y:auto;border-radius:26px;background:#fffdf9;border:1px solid rgba(114,85,52,.1);box-shadow:0 30px 64px rgba(44,36,28,.2),0 10px 24px rgba(44,36,28,.08),inset 0 1px 0 rgba(255,255,255,.78)}.effect-option{width:100%;padding:14px 16px;border-radius:18px;display:flex;align-items:center;text-align:left;position:relative;color:var(--text);background:rgba(255,255,255,.88);border:1px solid rgba(114,85,52,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(114,85,52,.04);transition:background 140ms ease,border-color 140ms ease,transform 140ms ease,box-shadow 140ms ease}.effect-option:hover{background:rgba(255,247,238,.98);border-color:rgba(185,79,48,.08)}.effect-option.active{background:radial-gradient(circle at top right,rgba(255,209,102,.16),transparent 40%),linear-gradient(135deg,#30476c,#44556d);border-color:rgba(34,61,105,.06);box-shadow:0 14px 24px rgba(34,61,105,.18),inset 0 1px 0 rgba(255,255,255,.08)}.effect-option.active::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:999px;background:linear-gradient(180deg,rgba(255,205,112,.96),rgba(255,238,205,.72))}.effect-option.active::after{content:"已选";position:absolute;top:50%;right:14px;transform:translateY(-50%);min-width:42px;height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);color:rgba(255,247,239,.92);font-size:11px;font-weight:800;letter-spacing:.04em}.effect-option.active .effect-option-desc,.effect-option.active .effect-option-title{color:#fff7ef}.effect-option.active .effect-option-desc{opacity:.76}.upload-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ghost-button,.primary-button{min-height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:800;transition:transform 140ms ease,box-shadow 140ms ease,opacity 140ms ease}.primary-button{background:linear-gradient(135deg,var(--amber-bright),var(--amber));color:#fff7ef;box-shadow:0 18px 36px rgba(185,79,48,.22)}.ghost-button{background:rgba(241,230,216,.9);color:#4e3528}.ghost-button:disabled,.primary-button:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}.upload-button{display:inline-flex;align-items:center;justify-content:center}.compact-button{min-height:42px;padding:0 18px;font-size:14px}.preview-note p,.result-overlay p,.upload-hint{margin:0}.upload-hint{margin-top:14px;padding:14px 16px;border-radius:20px;background:rgba(241,230,216,.72);border:1px solid rgba(120,87,50,.08);color:var(--muted);font-size:13px;line-height:1.6}.field-block{margin-top:18px}.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.field-row label,.field-value{font-size:15px;font-weight:800}.field-value{color:var(--amber)}.text-input::placeholder{color:rgba(24,34,47,.42)}.preview-card{position:relative;min-height:320px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,251,246,.82),rgba(241,230,216,.82)),linear-gradient(135deg,#f6ecde 0,#efe1cd 100%);border:1px solid rgba(120,87,50,.08)}.preview-card[data-mode=editing],.preview-card[data-mode=result]{background:radial-gradient(circle at top right,rgba(255,209,102,.2),transparent 36%),linear-gradient(180deg,rgba(255,251,246,.92),rgba(241,230,216,.88))}.editing-state,.empty-state,.result-state{min-height:320px}.empty-state{display:grid;place-items:center;padding:28px;text-align:center}.empty-state__icon{width:68px;height:68px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;background:rgba(255,250,244,.88);box-shadow:0 12px 28px rgba(44,36,28,.06),inset 0 0 0 1px rgba(91,70,45,.08);color:var(--amber);font-size:34px;font-weight:700}.empty-state__title{margin:0;font-size:20px;line-height:1.15;font-weight:900}.empty-state__desc{max-width:280px;margin:12px auto 0;color:var(--muted);font-size:14px;line-height:1.65}.editing-state,.result-state{padding:16px}.editing-state{display:grid;gap:14px}.result-state{display:grid;place-items:center}#previewCanvas,#resultImage{width:100%;max-width:360px;margin:0 auto;aspect-ratio:1;height:auto;display:block;border-radius:24px;touch-action:none;background:rgba(255,255,255,.58);box-shadow:0 16px 28px rgba(44,36,28,.08)}.preview-card[data-kind=static] #previewCanvas,.preview-card[data-kind=static] #resultImage{aspect-ratio:auto}.preview-note{display:grid;gap:10px;justify-items:start}.preview-note p,.result-overlay p{color:var(--muted);font-size:13px;line-height:1.6}.result-overlay{display:grid;gap:10px;justify-items:center;text-align:center;margin-top:16px}.preview-actions,.result-actions{display:grid;gap:10px;margin-top:16px}.result-actions{grid-template-columns:repeat(2,minmax(0,1fr))}[hidden]{display:none!important}@media (hover:hover) and (pointer:fine){.effect-option:hover,.effect-select-trigger:hover,.ghost-button:hover,.primary-button:hover{transform:translateY(-1px)}}@media (max-width:430px){.app-shell{padding-inline:12px}.panel-card,.topbar-inner{border-radius:24px}.effect-select-trigger{min-height:78px;padding:10px}.effect-option-title,.effect-select-name{font-size:16px}.result-actions{grid-template-columns:1fr}}