:root {
    color-scheme: light;
    --ink: #172b46;
    --muted: #526681;
    --line: #e2e9f3;
    --brand: #1557d6;
    --surface: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    color: var(--ink);
    background: #f5f7fb;
}

.photo-guide { margin-top:14px;border:1px solid #e1e9f5;border-radius:12px;background:#f8faff;overflow:hidden; }
.tool-upload-advice { margin:12px 0 0;padding:11px 13px;background:#f5f8ff;border-radius:9px;color:var(--muted);font-size:12px;line-height:1.8; }
.tool-upload-advice strong { display:block;color:var(--ink);font-size:12px;margin-bottom:3px; }
.tool-guide-slot { margin-top:24px; }
.tool-guide.panel { padding:28px;scroll-margin-top:22px; }
.tool-guide-link,.tool-guide-back { font-size:12px;line-height:1.8;color:var(--brand);text-decoration:none;white-space:nowrap; }
.tool-guide-link { display:inline-block;margin-left:5px; }
.tool-guide-link:hover,.tool-guide-back:hover { text-decoration:underline; }
.tool-guide-headline { display:flex;align-items:center;justify-content:space-between;gap:12px; }
#photo-workbench { scroll-margin-top:20px; }
.tool-guide-heading { max-width:780px;margin-bottom:22px; }
.tool-guide-kicker { display:inline-block;color:var(--brand);font-size:12px;font-weight:600;letter-spacing:.03em; }
.tool-guide-heading h2 { margin:7px 0 9px;font-size:21px;line-height:1.5; }
.tool-guide p { color:var(--muted);font-size:13px;line-height:1.85;margin:0; }
.tool-guide h3 { font-size:14px;line-height:1.6;margin:0 0 8px;color:var(--ink); }
.tool-guide-overview { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.tool-guide-overview article { padding:17px 19px;background:#f7f9fd;border-radius:10px;min-width:0; }
.tool-guide-example { margin:19px 0 23px;border:1px solid #e1eafa;border-radius:11px;padding:20px;background:linear-gradient(120deg,#f7faff,#fff); }
.tool-guide-example h3 { font-size:15px;margin-top:5px; }
.tool-guide-flow { display:flex;align-items:center;gap:18px;margin:14px 0; }
.tool-guide-flow span { display:flex;align-items:center;justify-content:center;min-height:47px;min-width:0;flex:1;padding:11px 15px;background:#fff;border:1px solid #dce6f5;border-radius:8px;color:var(--ink);font-size:14px;line-height:1.5;text-align:center;overflow-wrap:anywhere; }
.tool-guide-flow span:last-child { color:var(--brand);border-color:#bcd2f8;background:#f0f5ff;font-weight:600; }
.tool-guide-flow svg { flex:none;width:25px;height:25px;color:#7e9ac7; }
.tool-guide-bottom { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px; }
.tool-guide-bottom ul { padding-left:19px;margin:10px 0 0; }
.tool-guide-bottom li { padding-left:3px;margin:0 0 9px;color:var(--muted);font-size:13px;line-height:1.8; }
.tool-guide-faq details { border-bottom:1px solid #e7edf7; }
.tool-guide-faq summary { position:relative;cursor:pointer;font-size:13px;line-height:1.75;padding:11px 24px 11px 0;color:var(--ink);list-style:none; }
.tool-guide-faq summary::-webkit-details-marker { display:none; }
.tool-guide-faq summary::after { content:'+';position:absolute;right:3px;top:10px;color:var(--brand);font-size:18px; }
.tool-guide-faq details[open] summary::after { content:'−'; }
.tool-guide-faq details p { padding:0 0 14px;font-size:12px; }
.tool-guide-faq summary:focus-visible { outline:2px solid #8eb4f4;outline-offset:2px;border-radius:3px; }
@media(max-width:700px) {
    .tool-guide.panel { padding:21px 18px; }.tool-guide-heading h2 { font-size:19px; }.tool-guide-overview,.tool-guide-bottom { grid-template-columns:1fr;gap:12px; }.tool-guide-overview article { padding:15px; }.tool-guide-example { padding:16px;margin:17px 0 21px; }.tool-guide-flow { gap:9px; }.tool-guide-flow span { font-size:12px;padding:10px 8px;min-height:58px; }.tool-guide-flow svg { width:20px;height:20px; }.tool-guide-bottom { gap:19px; }.tool-guide-slot { margin-top:18px; }
}
.photo-guide-header { display:flex;align-items:center; }
.photo-guide-header .photo-guide-toggle { flex:1;min-width:0; }
.tool-effect-demo { margin-top:14px;border:1px solid #e1e9f5;background:#f8faff;border-radius:12px;padding:14px; }
.demo-toggle { display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none; }
.demo-toggle::-webkit-details-marker { display:none; }
.demo-toggle strong { font-size:13px;color:var(--ink);line-height:1.6; }
.demo-toggle>span { flex:none;font-size:12px;color:var(--brand); }
.demo-toggle i { display:inline-block;font-style:normal; }
.tool-effect-demo[open]>.demo-toggle { margin-bottom:12px; }
.tool-effect-demo[open] .demo-toggle i { transform:rotate(180deg); }
.demo-layout-stage,.demo-centered { display:grid;place-items:center;background:#eff3f9;padding:12px;border-radius:9px;margin:0; }
.demo-paper { width:min(100%,320px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px;background:#fff;border:1px solid #dae2ef;box-shadow:0 4px 10px #17385f09; }
.demo-paper-photo { display:block;aspect-ratio:4/5;background:#438edb;overflow:hidden; }
.demo-paper-photo img { display:block;width:100%;height:100%;object-fit:cover; }
.demo-backgrounds { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.demo-backgrounds figure,.demo-matting figure,.demo-cartoon { margin:0;min-width:0; }
.demo-idphoto { display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:5px;border:1px solid #dce4ef;background-size:cover;background-position:center; }
.demo-idphoto img { display:block;width:100%;height:100%;object-fit:cover; }
.demo-backgrounds figcaption { text-align:center;font-size:12px;color:var(--muted);margin-top:7px; }
.demo-american { width:158px; }
.demo-couple { display:block;width:160px;max-width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:5px; }
.demo-transparency { background-color:#fff;background-image:conic-gradient(#e8edf3 25%,transparent 0 50%,#e8edf3 0 75%,transparent 0);background-size:16px 16px; }
.demo-matting { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-radius:9px;overflow:hidden; }
.demo-matting figure { display:grid;grid-template-rows:196px auto; }
.demo-matting img { width:100%;height:196px;object-fit:contain;object-position:bottom; }
.demo-matting img.demo-object { padding:22px 6px;object-position:center; }
.demo-matting figcaption { text-align:center;padding:5px;background:#ffffffdc;color:var(--muted);font-size:12px; }
.demo-watermark-stage { position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:9px;background:#edf2f8; }
.demo-watermark-stage>img { display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.demo-watermark-text { position:absolute;inset:-12%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);align-items:center;text-align:center;transform:rotate(-24deg);color:#fff;opacity:.65;pointer-events:none; }
.demo-watermark-text b { font-size:clamp(11px,2vw,16px);text-shadow:0 1px 3px #223a6c33; }
.demo-cartoon>img { display:block;width:100%;height:auto;border-radius:9px; }
.demo-cartoon figcaption { display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:12px;color:var(--muted);padding-top:8px; }
.demo-compare { position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:9px;background:#edf2f8; }
.demo-compare>img,.demo-compare-before img { display:block;width:100%;height:100%;object-fit:cover; }
.demo-compare-before { position:absolute;inset:0; }
.demo-grayscale { filter:grayscale(1); }
.demo-blurred { filter:blur(3px);transform:scale(1.025); }
.demo-compare-label { position:absolute;top:9px;padding:4px 7px;border-radius:5px;background:#16345585;color:#fff;font-size:11px;pointer-events:none; }
.demo-compare-label.before { left:9px; }.demo-compare-label.after { right:9px; }
.demo-compare-handle { position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 4px #22355766;transform:translateX(-1px);pointer-events:none; }
.demo-compare-handle i { display:grid;place-items:center;position:absolute;left:1px;top:50%;transform:translate(-50%,-50%);width:31px;height:31px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #192c4933;font-size:20px;font-style:normal;color:#3c5478; }
.demo-compare .demo-compare-control { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;padding:0;touch-action:pan-y; }
.demo-compare:focus-within { outline:3px solid #82aaf3;outline-offset:2px; }
.demo-description { margin:11px 0 0;color:var(--muted);font-size:12px;line-height:1.8; }
.demo-disclaimer { display:block;color:#8b9cb3;font-size:11px;line-height:1.7;margin-top:5px; }
@media(max-width:370px) { .tool-effect-demo { padding:11px; }.demo-matting figure { grid-template-rows:160px auto; }.demo-matting img { height:160px; }.demo-paper { gap:4px;padding:5px; } }
.photo-guide-toggle { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:none;color:var(--ink);padding:12px 14px;font:inherit;font-size:13px;cursor:pointer;text-align:left; }
.photo-guide-toggle>span { display:flex;align-items:center;gap:7px;font-weight:600; }
.photo-guide-toggle>span>svg { width:17px;height:17px;color:var(--brand); }
.photo-guide-toggle .photo-guide-toggle-label { font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap; }
.photo-guide-toggle-label svg { width:14px!important;height:14px!important;transition:transform .18s; }
.photo-guide-toggle-label svg.expanded { transform:rotate(180deg); }
.photo-guide-panel { padding:0 14px 14px; }
.photo-guide-topics { display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-bottom:12px; }
.photo-guide-topics button { padding:5px 11px;min-height:30px;border:1px solid transparent;border-radius:7px;background:none;font:inherit;font-size:12px;line-height:1.5;color:var(--muted);cursor:pointer; }
.photo-guide-topics button:hover { background:#edf3ff;color:var(--brand); }
.photo-guide-topics button[aria-pressed=true] { background:#eaf1ff;border-color:#d2e1ff;color:var(--brand);font-weight:600; }
.photo-guide-examples { display:flex;justify-content:center;gap:14px; }
.photo-guide-example { flex:1;min-width:0;max-width:144px;margin:0;text-align:center; }
.photo-guide-photo { display:block;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:9px;background:#e9edf3; }
.photo-guide-photo img { display:block;position:absolute;left:0;top:0;width:300%;height:200%;max-width:none;object-fit:fill; }
.photo-guide-badge { display:flex;align-items:center;gap:2px;position:absolute;right:6px;top:6px;padding:3px 6px;border-radius:5px;font-size:11px;font-weight:600;line-height:1.4;color:#fff;background:#16845f;box-shadow:0 1px 6px #122a3a16; }
.photo-guide-badge svg { width:13px;height:13px; }
.photo-guide-example.bad .photo-guide-badge { background:#df544e; }
.photo-guide-example figcaption { margin-top:8px;font-size:12px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere; }
.photo-guide-note { margin:12px 0 0;padding-top:11px;border-top:1px solid #e5ecf7;font-size:12px;line-height:1.8;color:var(--muted); }
.photo-guide button:focus-visible { outline:2px solid #7eaaff;outline-offset:-2px; }
@media(max-width:370px) { .photo-guide-panel { padding:0 10px 12px; }.photo-guide-toggle { padding:11px 10px; }.photo-guide-topics { gap:2px; }.photo-guide-topics button { padding:5px 8px; }.photo-guide-examples { gap:10px; }.photo-guide-example figcaption { font-size:11px; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
[v-cloak] { display: none; }
.shell { width: min(100% - 40px, 1060px); margin-inline: auto; }
.topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar-inner, .brand, .account-actions, .panel-heading { display: flex; align-items: center; }
.topbar-inner { min-height: 66px; justify-content: space-between; gap: 12px; }
.brand { gap: 10px; color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand-mark, .upload-icon { display: grid; place-items: center; }
.brand-mark { width: 34px; height: 34px; color: #fff; background: var(--brand); border-radius: 10px; }
.brand-mark svg, .upload-icon svg { width: 22px; height: 22px; }
.account-actions { gap: 10px; min-width: 0; }
.member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.intro { margin-block: 46px 28px; }
.eyebrow { font-size: 13px; color: var(--brand); font-weight: 700; letter-spacing: .08em; }
h1 { font-size: clamp(27px, 5vw, 43px); margin: 9px 0; letter-spacing: -.025em; }
.intro p:last-child { color: var(--muted); margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
.tool-picker { margin-bottom: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tool-group { display: flex; align-items: flex-start; gap: 10px; }
.tool-group + .tool-group { margin-top: 6px; }
.tool-group-label { flex: 0 0 100px; padding: 7px 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.tool-group-items { display: flex; flex-wrap: wrap; gap: 4px; }
.workbench { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 701px) and (min-height: 640px) {
    .workbench > .preview { position: sticky; top: 16px; }
}
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 24px; box-shadow: 0 6px 22px #25365309; }
.panel-heading { justify-content: space-between; gap: 8px; margin-bottom: 18px; }
h2, summary { margin: 0; font-size: 18px; font-weight: 700; }
.setting { margin: 0 0 20px; border: 0; min-width: 0; padding: 0; }
.step { display: block; padding: 0; margin-bottom: 9px; font-size: 14px; font-weight: 700; }
.step span { margin-right: 6px; font-size: 12px; color: var(--brand); }
.upload { position: relative; display: flex; align-items: center; gap: 14px; min-height: 92px; border: 1px dashed #8eaadc; border-radius: 12px; background: #f6f9ff; padding: 15px; cursor: pointer; }
.upload:hover, .upload:focus-within { border-color: var(--brand); background: #eff5ff; }
.upload input, .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.upload-icon, .source-thumbnail { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 9px; }
.upload-icon { background: #e6efff; color: var(--brand); }
.source-thumbnail { object-fit: cover; }
.upload-text { min-width: 0; }
.upload-text strong, .upload-text small, .choice small { display: block; }
.upload-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.upload-text small, .choice small, .hint, .dimensions { color: var(--muted); font-size: 12px; line-height: 1.5; }
.hint { margin: 8px 0 0; }
.tool-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.tool-field { display: grid; gap: 6px; align-content: start; min-width: 0; font-size: 14px; }
.tool-field select, .tool-field input { min-width: 0; width: 100%; min-height: 42px; border: 1px solid #bccbe0; border-radius: 8px; padding: 6px 9px; background: white; color: var(--ink); font: inherit; }
.tool-field input[type="color"] { min-height: 32px; max-width: 75px; padding: 3px; cursor: pointer; }
.numeric-control { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; align-items: center; }
.tool-field input[type="range"] { min-height: 32px; padding: 0; margin: 0; border: 0; background: transparent; accent-color: var(--brand); cursor: pointer; }
.numeric-control input[type="number"] { font-variant-numeric: tabular-nums; padding-inline: 6px; }
.field-toggle { min-height: 42px; display: flex; align-items: center; gap: 9px; color: var(--muted); }
input.switch-input { appearance: none; position: relative; display: inline-block; flex: 0 0 auto; width: 38px; min-height: 0; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 99px; background: #a7b5c9; cursor: pointer; transition: background .15s; }
.switch-input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform .15s; }
input.switch-input:checked { background: var(--brand); }
.switch-input:checked::after { transform: translateX(16px); }
.switch-input:focus-visible, .numeric-control input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch-input:disabled { opacity: .55; cursor: default; }
.tool-field:has(.color-options) { grid-column: 1 / -1; }
.tool-field:has(.spec-picker) { grid-column: 1 / -1; }
.spec-picker { display: grid; gap: 9px; min-width: 0; padding: 11px; background: #f7faff; border: 1px solid #dce5f2; border-radius: 10px; }
.spec-current { display: grid; gap: 3px; overflow-wrap: anywhere; }
.spec-current span, .spec-card small { font-size: 12px; color: var(--muted); }
.spec-categories { display: flex; flex-wrap: wrap; gap: 5px; }
.spec-categories .choice { padding: 4px 8px; min-height: 30px; }
.custom-size-panel { display: grid; gap: 8px; padding: 12px; border: 1px solid #b9d0ff; border-radius: 8px; background: #fff; }
.custom-size-panel .hint { margin: 0; }
.custom-size-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 10px; }
.custom-size-fields label { display: grid; gap: 5px; }
.spec-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); gap: 6px; max-height: 258px; overflow: auto; padding: 2px; }
.spec-card { display: grid; gap: 4px; align-content: start; padding: 7px; min-width: 0; border: 1px solid #dce5f2; border-radius: 7px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.spec-card strong { font-size: 12px; }
.spec-card:hover, .spec-card[aria-pressed="true"], .spec-categories .choice[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: #eef5ff; }
.advanced-switch { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.advanced-opt-in { display: flex; align-items: flex-start; gap: 8px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f6f9ff; font-size: 14px; }
.advanced-opt-in small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.5; }
.clothes-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.clothes-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.clothes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; max-height: 310px; overflow-y: auto; padding: 4px; margin-top: 6px; }
.clothes-card { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 9px; padding: 4px; background: white; color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; }
.clothes-card img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 5px; background: #f5f7fa; }
.clothes-card-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.clothes-tier { padding: 1px 4px; border-radius: 4px; background: #edf2f7; color: #40526c; font-size: 11px; }
.clothes-tier.provider { background: #f0e9fc; color: #6631a1; }
.clothes-card:hover, .clothes-card.selected { border-color: var(--brand); background: #eff5ff; }
.clothes-card.selected { box-shadow: 0 0 0 1px var(--brand); color: var(--brand); font-weight: 700; }
.clothes-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.preview-pair.comparing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preview-pair.comparing .preview-stage { min-height: 230px; padding: 9px; }
.preview-pair.comparing .preview-stage img { width: 100%; max-height: 245px; object-fit: contain; }
.preview-name { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.preview-name small { color: var(--brand); }
.result-action { margin-top: 10px; }
.color-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; min-height: 46px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 10px; text-align: center; cursor: pointer; font-size: 14px; }
.color-options .choice { background: #fff; color: var(--ink); }
.color-options .choice.selected { border-color: var(--brand); color: #1149ba; background: #f0f5ff; }
.choice.selected { border-color: var(--brand); color: #1149ba; background: #f0f5ff; }
.choice:focus-within, .upload:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.choice small { margin-top: 3px; white-space: nowrap; }
.color-choice { display: flex; align-items: center; justify-content: center; gap: 6px; }
.swatch { width: 17px; height: 17px; border-radius: 50%; border: 1px solid #11254129; display: inline-block; flex: 0 0 auto; }
.swatch.small { width: 12px; height: 12px; margin-right: 6px; }
.status { color: #244b91; font-size: 13px; line-height: 1.5; margin: 8px 0 0; overflow-wrap: anywhere; }
.preview-stage { position: relative; min-height: 325px; display: grid; place-items: center; padding: 18px; border-radius: 13px; overflow: hidden; background: radial-gradient(circle at 1px 1px, #d8e3f2 1px, transparent 0) 0 0 / 16px 16px, #f0f5fc; }
.preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; background: #f0f5fce8; color: var(--brand); font-size: 14px; font-weight: 600; }
.preview-loading span { width: 20px; height: 20px; border: 2px solid #adc5ee; border-top-color: var(--brand); border-radius: 50%; animation: preview-spin .85s linear infinite; }
@keyframes preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .preview-loading span { animation: none; } }
.preview-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 335px; box-shadow: 0 6px 20px #162d5926; border-radius: 5px; }
.empty-preview { text-align: center; color: var(--muted); font-size: 14px; }
.empty-preview svg { display: block; width: 100px; margin: auto; }
.preview-hint { margin: 12px 0; }
.score-list { list-style: none; margin: 0; padding: 0; }
.score-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.history { margin-block: 18px; }
.history:last-child, .workbench:last-child { margin-bottom: 24px; }
.history ul { list-style: none; padding: 0; margin: 8px 0 0; }
.history li { padding-block: 3px; }
.history summary { cursor: pointer; }
.history .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 12px; }
.history-grid li { min-width: 0; padding: 0; }
.history-card { display: grid; align-content: start; gap: 5px; width: 100%; height: 100%; padding: 7px; text-align: left; background: #fff; border: 1px solid #dce5f2; border-radius: 10px; color: inherit; font: inherit; cursor: pointer; }
.history-card:not(:disabled):hover, .history-card[aria-pressed="true"] { border-color: #0052d9; background: #f4f8ff; }
.history-card:disabled { cursor: default; }
.history-thumb { display: block; height: 82px; overflow: hidden; border-radius: 5px; background: #eef3fb; }
.history-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.history-card-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.history-card small { color: var(--muted); font-size: 11px; }
.account-dialog { --login-qr-size: clamp(112px, calc(100dvh - 300px), 224px); box-sizing: border-box; width: min(100% - 32px, 420px); max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); }
.account-dialog::-webkit-scrollbar { display: none; }
.account-dialog .panel-heading { margin-bottom: 12px; }
.account-dialog::backdrop { background: #13213b72; }
.account-dialog label { display: grid; gap: 5px; margin: 12px 0; font-size: 14px; }
.account-dialog input { min-width: 0; min-height: 43px; padding: 8px 12px; border: 1px solid #bccbe0; border-radius: 8px; font: inherit; }
.dialog-actions { display: flex; gap: 10px; margin-top: 16px; }
.close { border: 0; background: transparent; cursor: pointer; font-size: 24px; color: var(--muted); }
.login-methods { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.login-method { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.login-method svg { width: 24px; height: 24px; }
.login-method.wx { color: #08a83d; }
.login-method.qq { color: #1685d8; }
.qq-mark { display: block; width: 24px; height: 24px; object-fit: contain; }
.login-method[aria-pressed="true"] { border-color: currentColor; background: #f3f8ff; }
.login-method.wx[aria-pressed="true"] { background: #f1fcf5; }
.social-login { text-align: center; }
.qq-official-frame { display:block; width:280px; max-width:100%; height:320px; border:0; margin:0 auto; background:#fff; }
.wechat-official-frame { display: block; width: 280px; max-width: 100%; height: 280px; margin: 0 auto; border: 0; background: #fff; }
.account-dialog.account-dialog-compact { width: min(360px, calc(100% - 24px)); padding: 18px 20px 12px; }
.account-dialog-compact .panel-heading { margin-bottom: 8px; }
.account-dialog-compact .signup-gift-note { margin: 0 0 12px; padding: 9px 10px; font-size: 12px; line-height: 1.6; }
.account-dialog-compact .login-methods { margin: 0 0 12px; }
.account-dialog-compact .login-text-button { padding: 5px 8px; font-size: 12px; }
.account-dialog-compact .social-login > .status { margin: 6px 0; font-size: 12px; }
.social-login > .hint { margin: 8px 0 0; line-height: 1.4; }
.login-qr { box-sizing: content-box; display: grid; place-items: center; width: var(--login-qr-size); min-height: var(--login-qr-size); padding: 10px; margin: 0 auto 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.login-qr img, .login-qr canvas { display: block; width: var(--login-qr-size) !important; max-width: 100%; height: auto !important; }
.login-qr > img { max-height: var(--login-qr-size); object-fit: contain; }
.login-wait { display: flex; flex-direction: column; justify-content: center; gap: 14px; color: var(--muted); font-size: 13px; }
.login-spinner { width: 26px; height: 26px; border: 3px solid #dfebf6; border-top-color: var(--brand); border-radius: 50%; animation: preview-spin .8s linear infinite; }
.social-authorize { display: block; padding: 10px 15px; margin: 12px 0 6px; border-radius: 9px; color: #fff; background: #1685d8; text-decoration: none; font-weight: 600; }
.social-authorize.wx { background: #09a841; }
.social-authorize.desktop-fallback { display: block; }
.login-text-button { border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 13px; padding: 8px; cursor: pointer; }
.login-text-button:disabled { opacity: .45; cursor: default; }
.binding-list { padding: 0; list-style: none; }
.vip-badge { color: #8b5700; background: #fff1c5; border-radius: 4px; padding: 2px 5px; }
.vip-dialog { width: min(620px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 24px; color: var(--ink); box-sizing: border-box; }
.vip-dialog::backdrop { background: #14294573; }
.vip-current { background: #fff7df; color: #835700; border-radius: 10px; padding: 12px; }
.vip-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-block: 18px; }
.vip-plan { display: grid; gap: 6px; padding: 16px 10px; text-align: center; border: 1px solid var(--line); background: white; border-radius: 10px; cursor: pointer; color: var(--ink); }
.vip-plan.selected { border-color: var(--brand); background: #f1f6ff; }
.vip-plan:disabled { opacity: .45; cursor: default; }
.vip-plan b { font-size: 22px; color: #bd7900; }
.vip-plan small, .vip-plan span { color: var(--muted); }
.vip-quote { border: 1px solid var(--line); padding: 16px; border-radius: 12px; margin-block: 12px; }
.vip-quote select { margin: 6px 0 14px; }
.vip-order { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.vip-order small { display: block; overflow-wrap: anywhere; font-size: 10px; color: var(--muted); }
@media (max-width: 520px) { .vip-plans { grid-template-columns: repeat(2, 1fr); } .vip-dialog { padding: 18px; } }
.binding-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.binding-list small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.binding-settings h3 { font-size: 15px; margin: 20px 0 10px; }
.binding-password { margin-top: 16px; }
.binding-password summary { font-size: 14px; cursor: pointer; }
@media (max-height: 480px) {
    .social-authorize.desktop-fallback { display: block; }
}
@media (max-width: 480px) {
    .account-dialog { --login-qr-size: clamp(112px, calc(100dvh - 300px), 200px); width: calc(100% - 24px); padding: 18px; }
    .account-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .member-name { width: 100%; text-align: right; font-size: 11px; }
}
@media (max-height: 440px) {
    .account-dialog { padding: 12px 18px; }
    .account-dialog .panel-heading { margin-bottom: 8px; }
    .login-methods { margin: 8px 0; }
    .login-qr { padding: 8px; }
    .social-login > .hint { margin-top: 4px; }
    .social-authorize { padding-block: 8px; margin-block: 8px 4px; }
    .login-text-button { padding-block: 4px; }
}
@media (max-width: 700px) {
    .shell { width: calc(100% - 28px); }
    .topbar-inner { min-height: 58px; }
    .intro { margin-block: 25px 18px; }
    .workbench { grid-template-columns: 1fr; gap: 12px; }
    .panel { padding: 16px; }
    .tool-group { display: block; }
    .tool-group-label { display: block; padding: 3px 0; }
    .preview-stage { min-height: 230px; }
    .preview-pair.comparing .preview-stage { min-height: 170px; }
}

.member-center-link{font-size:12px;color:var(--brand);text-decoration:none;white-space:nowrap;border:1px solid var(--line);padding:5px 10px;border-radius:6px;background:#fff}
.topbar{position:relative;z-index:30}.topbar-inner{gap:22px}.header-tools{display:flex;align-items:center;justify-content:center;gap:10px;margin-left:auto;margin-right:auto}.header-tool-group{position:relative}.header-tool-group summary{display:flex;align-items:center;gap:7px;padding:22px 12px;color:#35455f;font-size:13px;font-weight:550;white-space:nowrap;cursor:pointer;list-style:none}.header-tool-group summary::-webkit-details-marker{display:none}.header-tool-group summary svg{width:13px;height:13px;fill:none;stroke:#8a96a9;stroke-width:1.6}.header-tool-group.active summary,.header-tool-group:hover summary{color:var(--brand)}.header-tool-menu{position:absolute;top:100%;left:0;display:none;min-width:178px;padding:9px;border:1px solid var(--line);border-radius:13px;background:white;box-shadow:0 14px 45px #233f5c20;z-index:40}.header-tool-group[open]>.header-tool-menu{display:grid}.header-tool-menu a{display:block;color:#53647c;text-decoration:none;font-size:13px;padding:10px 13px;border-radius:8px;white-space:nowrap}.header-tool-menu a:hover,.header-tool-menu a[aria-current=page]{background:#f0f5ff;color:var(--brand)}.account-actions{flex:none;gap:14px}.header-vip-button,.header-login-button{border:0;cursor:pointer;color:white;font:600 12px "PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.5;white-space:nowrap}.header-vip-button{background:#ff625f;border-radius:7px;padding:5px 10px}.header-vip-button:hover{background:#f64c49}.header-login-button{padding:8px 16px;border-radius:8px;background:#7047ee;box-shadow:0 6px 16px #7047ee24}.header-login-button:hover{background:#6033df}.header-vip-button:disabled,.header-login-button:disabled{opacity:.5;cursor:default}.user-menu{position:relative}.user-avatar-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid white;border-radius:50%;background:#eaf1ff;color:var(--brand);font-size:18px;font-weight:600;overflow:hidden;box-shadow:0 0 0 1px #dbe6f6;cursor:pointer}.user-avatar-button img,.user-menu-avatar img{width:100%;height:100%;object-fit:cover}.user-menu-popover{position:absolute;right:-4px;top:100%;width:284px;padding-top:14px;z-index:45}.user-menu-card{padding:21px;border:1px solid #e9eef6;background:white;border-radius:17px;box-shadow:0 16px 60px #294e7521}.user-menu-profile{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-bottom:19px;min-width:0}.user-menu-avatar{flex:none;width:47px;height:47px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#edf3ff;color:var(--brand);font-size:21px;font-weight:600}.user-menu-profile>span:last-child{min-width:0;display:grid;gap:3px}.user-menu-profile strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-profile small{color:#93a0b1;font-size:11px}.user-menu-vip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;background:#faf7ef;border-radius:9px;margin-bottom:14px}.user-menu-vip>span{display:grid;gap:2px;min-width:0}.user-menu-vip b{font-size:11px;color:#9b783e;font-weight:550}.user-menu-vip small{font-size:9px;line-height:1.8;color:#ae9673;white-space:nowrap}.user-menu-vip a{font-size:10px;color:white;padding:4px 9px;border-radius:15px;background:#a58b5f;text-decoration:none;white-space:nowrap}.user-menu-card nav{display:grid;gap:3px}.user-menu-card nav>a,.user-menu-card nav>button{display:flex;align-items:center;gap:10px;padding:11px 7px;text-decoration:none;font:400 12px "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#53647d;border:0;background:none;text-align:left;cursor:pointer;border-radius:7px}.user-menu-card nav>a:hover,.user-menu-card nav>button:hover{background:#f5f8ff;color:var(--brand)}.user-menu-card nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex:none}.user-menu-card nav span{margin-left:auto;font-size:11px;color:#95a0ae}.user-menu-card nav>button:last-child{border-top:1px solid #f0f3f8;border-radius:0;padding-top:15px;margin-top:5px}.user-menu-card nav>button:disabled{opacity:.5;cursor:default}

@media(max-width:900px){.topbar-inner{gap:10px}.header-tools{gap:0}.header-tool-group summary{padding:22px 8px;font-size:12px}.header-vip-button{font-size:11px;padding:5px 8px}.header-login-button{font-size:11px;padding:8px 12px}.account-actions{gap:10px}}
@media(max-width:700px){.topbar-inner{flex-wrap:wrap;justify-content:space-between;gap:0;padding-top:13px;min-height:0}.topbar .brand{font-size:16px;gap:8px}.account-actions{order:1;flex-wrap:nowrap;gap:10px}.header-tools{order:2;width:100%;justify-content:flex-start;margin:10px 0 0;border-top:1px solid #f0f3f8;gap:13px}.header-tool-group summary{padding:12px 6px;font-size:12px}.header-tool-group:last-child .header-tool-menu{left:auto;right:0}.header-login-button{padding:7px 12px}.header-vip-button{font-size:11px;padding:4px 7px}.user-avatar-button{width:33px;height:33px;font-size:16px}.user-menu-popover{right:0;width:276px;padding-top:13px}.user-menu-card{padding:19px}.intro{margin-top:26px}.header-tool-menu{border-radius:11px;min-width:158px}.header-tool-menu a{padding:10px 11px;font-size:12px}}
@media(max-width:370px){.topbar .brand{font-size:15px;gap:6px}.topbar .brand-mark{width:30px;height:30px}.account-actions{gap:7px}.header-login-button{padding:7px 10px;font-size:10px}.header-vip-button{font-size:10px;padding:4px 6px}.header-tools{gap:8px}.header-tool-group summary{font-size:11px;padding:12px 5px;gap:5px}}

.user-menu-card{max-height:calc(100dvh - 76px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-height:500px){.user-menu-card{padding:14px;max-height:calc(100dvh - 65px)}.user-menu-profile{margin-bottom:10px}.user-menu-avatar{width:38px;height:38px;font-size:17px}.user-menu-vip{padding:7px 10px;margin-bottom:7px}.user-menu-card nav>a,.user-menu-card nav>button{padding:8px 7px}.user-menu-card nav>button:last-child{padding-top:8px;margin-top:3px}}

.header-tool-menu{width:360px;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:12px}.header-tool-menu a{font-size:14px;padding:12px 13px}.header-tool-group:last-child .header-tool-menu{left:auto;right:0}.user-menu-popover{width:310px}.user-menu-card{padding:23px}.user-menu-profile strong{font-size:16px}.user-menu-profile small{font-size:12px}.user-menu-vip{padding:13px 12px}.user-menu-vip b{font-size:14px}.user-menu-vip small{font-size:12px;line-height:1.7;white-space:normal}.user-menu-vip a{font-size:12px;padding:5px 10px}.user-menu-card nav>a,.user-menu-card nav>button{font-size:14px;line-height:1.6;padding:12px 8px}.user-menu-card nav span{font-size:13px}.user-menu-card nav svg{width:19px;height:19px}.user-avatar-frame{display:inline-block;position:relative}.user-avatar-button.is-vip{border-color:#eac77e;box-shadow:0 0 0 1px #d3a858;background:#fff8e9}.user-avatar-button.was-vip{border-color:#d6dce6}.avatar-vip-crown{position:absolute;right:-5px;bottom:-3px;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#fff6dc;border:2px solid #fff;color:#c58a24;box-shadow:0 1px 4px #a0753326;pointer-events:none}.avatar-vip-crown svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.avatar-vip-crown.expired{color:#9b9fa9;background:#f1f2f6;box-shadow:none}
@media(max-width:700px){.header-tools{position:relative}.header-tool-group{position:static}.header-tool-menu,.header-tool-group:last-child .header-tool-menu{width:100%;left:0;right:0;top:100%;padding:9px;gap:4px}.header-tool-menu a{font-size:13px;padding:12px 11px}.user-menu-popover{width:min(300px,calc(100vw - 28px))}.user-menu-card{padding:20px}.user-menu-profile strong{font-size:15px}.user-menu-card nav>a,.user-menu-card nav>button{font-size:14px}.user-menu-card nav span{font-size:12px}.user-menu-vip b{font-size:13px}.user-menu-vip small{font-size:12px}.user-menu-vip a{font-size:12px}.avatar-vip-crown{width:18px;height:18px}}
@media(max-height:500px){.user-menu-card{padding:14px}.user-menu-profile{margin-bottom:10px}.user-menu-vip{padding:8px 10px;margin-bottom:8px}.user-menu-card nav>a,.user-menu-card nav>button{padding:8px 7px;font-size:13px}.user-menu-vip small{font-size:11px}.user-menu-vip b{font-size:12px}}

/* Consistent, easy-to-find disclosure controls */
.demo-toggle{min-height:38px;gap:12px}.demo-toggle>span,.photo-guide-toggle-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;padding:6px 10px;border:1px solid #dce7fa;border-radius:8px;background:#fff;color:#426ba7;font-size:12px;font-weight:500;line-height:1.4;transition:background .18s,border-color .18s}.demo-toggle:hover>span,.photo-guide-toggle:hover .photo-guide-toggle-label{background:#edf4ff;border-color:#b8d1f8;color:#1557d6}.demo-toggle svg,.photo-guide-toggle-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}.tool-effect-demo[open]>.demo-toggle svg,.photo-guide[open]>.demo-toggle svg,.photo-guide-toggle-label svg.expanded{transform:rotate(180deg)}.disclosure-action b{font:inherit}.disclosure-close{display:none}.tool-effect-demo[open]>.demo-toggle .disclosure-close,.photo-guide[open]>.demo-toggle .disclosure-close{display:inline}.tool-effect-demo[open]>.demo-toggle .disclosure-open,.photo-guide[open]>.demo-toggle .disclosure-open{display:none}.photo-guide-toggle:focus-visible,.demo-toggle:focus-visible{outline:3px solid #9bc0ff;outline-offset:4px;border-radius:8px}.photo-guide-toggle-label{margin-left:auto}.demo-toggle strong{min-width:0}.photo-guide-header{align-items:center}
@media(max-width:420px){.demo-toggle>span,.photo-guide-toggle-label{padding:6px 8px;font-size:11px}.demo-toggle{gap:8px}}
@media(prefers-reduced-motion:reduce){.demo-toggle svg,.photo-guide-toggle-label svg{transition:none}}


.custom-size-fields label{min-width:0}.tool-field select:focus-visible,.custom-size-fields select:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Give the DPI description enough space in the custom-size editor. */
.custom-size-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-size-fields label:last-child{grid-column:1/-1}