:root{color:#1c2822;font-synthesis:none;text-rendering:optimizelegibility;--primary:#078a46;--primary-hover:#05763b;--primary-soft:#eaf7ef;--surface:#fff;--surface-subtle:#f8faf9;--text:#1c2822;--muted:#627068;--border:#dce4df;--border-strong:#bbc8c0;--warning:#835b08;--warning-bg:#fff8e8;--warning-border:#efd89c;--error:#a52b23;--error-bg:#fff1f0;--error-border:#efc2be;--focus:#0b9450;background:#f3f6f4;font-family:Microsoft YaHei UI,Microsoft YaHei,PingFang SC,Noto Sans CJK SC,system-ui,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#f8faf9 0,#f3f6f4 280px),#f3f6f4;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button:focus-visible,input:focus-visible,.drop-zone:focus-within,.preview:focus-visible{outline:3px solid color-mix(in srgb, var(--focus) 34%, transparent);outline-offset:2px}.app-shell{width:min(1160px,100% - 32px);margin:0 auto;padding:40px 0 56px}.page-header{max-width:720px;margin-bottom:28px}.eyebrow,.step-label{color:var(--primary);letter-spacing:.08em;margin:0 0 4px;font-size:12px;font-weight:700}h1,h2,p{margin-top:0}h1{letter-spacing:-.02em;margin-bottom:8px;font-size:clamp(28px,4vw,36px);line-height:1.25}h2{margin:0;font-size:18px;line-height:1.4}.intro{color:var(--muted);margin-bottom:0;font-size:15px;line-height:1.8}.workspace{grid-template-columns:minmax(340px,1fr) 423px;align-items:start;gap:24px;display:grid}.controls,.preview-panel{border:1px solid var(--border);background:var(--surface);border-radius:16px;min-width:0;box-shadow:0 12px 36px #29413312}.controls{gap:24px;padding:24px;display:grid}.section-heading,.preview-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.local-badge,.preview-size{color:#3e6550;background:var(--primary-soft);border-radius:999px;flex:none;padding:6px 10px;font-size:12px;font-weight:700}.drop-zone{border:2px dashed var(--border-strong);min-height:176px;color:var(--muted);background:var(--surface-subtle);text-align:center;cursor:pointer;border-radius:12px;place-items:center;padding:24px;transition:border-color .16s,background-color .16s,color .16s;display:grid}.drop-zone:hover{background:#f2faf5;border-color:#81aa91}.drop-zone.dragging{border-color:var(--primary);color:#23613e;background:var(--primary-soft)}.drop-zone.is-busy{cursor:progress;opacity:.72}.drop-zone strong{color:var(--text);margin:12px 0 4px;font-size:16px}.drop-zone>span:not(.file-symbol){font-size:13px}.file-symbol{color:#fff;background:var(--primary);border-radius:10px;place-items:center;width:44px;height:44px;font-weight:800;display:grid}.drop-zone input{width:min(100%,248px);min-height:44px;color:var(--text);cursor:pointer;margin-top:16px}.drop-zone input::file-selector-button{border:1px solid var(--border-strong);min-height:36px;color:var(--text);background:var(--surface);cursor:pointer;border-radius:8px;margin-right:8px;padding:6px 12px}.result-section{border-top:1px solid var(--border);gap:12px;padding-top:24px;display:grid}.field-label{color:#34453b;margin-top:4px;font-size:13px;font-weight:700}input[readonly]{border:1px solid var(--border);width:100%;min-height:44px;color:var(--text);background:var(--surface-subtle);border-radius:8px;padding:10px 12px}input[readonly]::placeholder{color:#88958d}.actions{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}button{border:1px solid var(--border-strong);color:#2a3a30;background:var(--surface);cursor:pointer;border-radius:8px;min-height:44px;padding:10px 16px;font-weight:700;transition:border-color .16s,background-color .16s,color .16s}button:hover:not(:disabled){background:#f2f7f4;border-color:#87a394}button.primary{border-color:var(--primary);color:#fff;background:var(--primary)}button.primary:hover:not(:disabled){border-color:var(--primary-hover);background:var(--primary-hover)}button:disabled{color:#85918a;cursor:not-allowed;opacity:.72;background:#eef1ef}.copy-hint{color:var(--muted);margin:2px 0 0;font-size:12px;line-height:1.7}.cover-card{border:1px solid var(--border);background:var(--surface-subtle);border-radius:10px;margin:4px 0 0;padding:12px}.cover-card figcaption{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:700}.cover-card img{object-fit:contain;border-radius:6px;width:100%;max-height:220px;display:block}.message-stack{gap:8px;display:grid}.message{white-space:pre-line;border:1px solid;border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.6}.message-error{border-color:var(--error-border);color:var(--error);background:var(--error-bg)}.message-warning{border-color:var(--warning-border);color:var(--warning);background:var(--warning-bg)}.message-status{border-color:var(--border);color:var(--muted);background:var(--surface-subtle)}.preview-panel{padding:16px 16px 24px}.preview-heading{padding:4px 4px 8px}.preview-hint{color:var(--muted);margin:0 0 12px;padding:0 4px;font-size:12px;line-height:1.6}.preview [contenteditable=true]:focus{outline-offset:2px;outline:2px dashed #9bb7a6}.preview-size{color:#52635a;font-variant-numeric:tabular-nums;background:#f0f3f1}.preview-scroll{background:#e9eeeb;border-radius:10px;overflow-x:auto}.preview{color:#3e3e3e;background:#fff;width:min(100%,375px);min-height:667px;margin:0 auto;overflow:hidden;box-shadow:0 12px 28px #192a2021}.preview-empty{color:#87938c;text-align:center;align-content:center;place-items:center;min-height:667px;padding:48px 32px;display:grid}.preview-empty span{color:#567060;background:#f6f8f7;border:1px solid #dbe2de;border-radius:50%;place-items:center;width:52px;height:52px;margin-bottom:16px;font-family:STSong,SimSun,serif;font-size:22px;display:grid}.preview-empty p{margin-bottom:0;font-size:14px;line-height:1.7}@media (width<=900px){.workspace{grid-template-columns:minmax(0,1fr)}.preview-panel{width:min(100%,423px);margin:0 auto}}@media (width<=480px){.app-shell{width:min(100% - 24px,1160px);padding:28px 0 40px}.page-header{margin-bottom:20px}.controls{padding:16px}.section-heading{align-items:flex-start}.local-badge{display:none}.drop-zone{min-height:164px;padding:20px 12px}.actions button{flex:100%}.preview-panel{padding:12px 0 16px}.preview-heading{padding:4px 16px 12px}.preview-scroll{border-radius:0}}