:root{color:#171714;background:#f7f5f0;font-family:Inter,PingFang SC,Microsoft YaHei,Noto Sans CJK SC,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #fff;--canvas: #f7f5f0;--line: #e4e0d7;--line-strong: #d6cfc3;--muted: #77736b;--amber: #d98c0f;--amber-dark: #a96800;--amber-soft: #fff4df;--ink: #171714}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden;background:var(--canvas);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(217,140,15,.25);outline-offset:2px}.app-shell{min-height:100vh;display:flex;flex-direction:column;background:var(--canvas)}.topbar{height:82px;flex:0 0 82px;padding:0 28px 0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffdb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:baseline;gap:18px}.brand h1{margin:0;font-size:25px;line-height:1;letter-spacing:-.02em;font-weight:780}.brand span{color:var(--muted);font-size:14px}.button{min-height:42px;border:1px solid var(--line-strong);border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;background:var(--paper);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.button:hover{border-color:#beb4a4;background:#fffdf9}.button:active{transform:translateY(1px)}.workspace{height:calc(100vh - 82px);min-height:0;flex:0 0 calc(100vh - 82px);display:grid;grid-template-columns:420px minmax(0,1fr);overflow:hidden}.control-panel{min-height:0;padding:22px 24px 28px;overflow-y:auto;border-right:1px solid var(--line);background:#ffffffeb;scrollbar-width:thin;scrollbar-color:#d7d0c4 transparent}.control-section+.control-section{margin-top:24px;padding-top:22px;border-top:1px solid #eeeae3}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}.section-title>span{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:var(--amber-dark);background:var(--amber-soft);font-size:12px;font-weight:800}.section-title h2{margin:0;font-size:15px;font-weight:760}.upload-area{position:relative;width:100%;height:145px;padding:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#eeeae2;cursor:pointer}.upload-area>img{width:100%;height:100%;object-fit:cover;filter:blur(.4px);transform:scale(1.02)}.upload-area__overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#282520;background:#ffffffc2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s ease}.upload-area:hover .upload-area__overlay{background:#fffaefdb}.upload-area__overlay strong{font-size:14px}.upload-area__overlay small{color:var(--muted);font-size:12px}.file-meta{margin-top:8px;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0;font-size:12px}.file-meta span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden}.format-option{min-width:0;height:82px;padding:10px 5px 8px;border:0;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#545149;background:var(--paper);cursor:pointer;transition:color .15s ease,background .15s ease}.format-option:last-child{border-right:0}.format-option span{font-size:11px;white-space:nowrap}.format-option:hover{background:#fbf8f1}.format-option.is-selected{color:var(--amber-dark);background:var(--amber-soft);box-shadow:inset 0 0 0 1.5px var(--amber)}.field{display:block}.field+.field{margin-top:12px}.field>span{display:block;margin-bottom:6px;color:#615d55;font-size:12px;font-weight:650}.field input,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}.field input{height:41px;padding:0 12px}.field textarea{min-height:62px;padding:10px 12px;line-height:1.45;resize:vertical}.field input:hover,.field textarea:hover{border-color:#bdb4a7}.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px #d98c0f1f}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.theme-option{min-width:0;padding:0 0 7px;border:1px solid transparent;border-radius:10px;overflow:hidden;background:transparent;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.theme-option>span:last-child{display:block;margin-top:5px;overflow:hidden;color:#59554e;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.theme-option:hover{border-color:#ddd4c6;background:#fbf8f2;transform:translateY(-1px)}.theme-option.is-selected{border-color:var(--amber);background:var(--amber-soft)}.theme-art{position:relative;height:74px;display:block;overflow:hidden;background:#74716a}.theme-art canvas{width:100%;height:100%;display:block}.theme-art__check{position:absolute;z-index:2;top:4px;right:4px;display:grid;color:var(--amber);background:#fff;border-radius:50%}.preview-workspace{min-width:0;min-height:0;padding:30px 30px 24px;display:flex;flex-direction:column;gap:24px}.preview-stage{min-width:0;min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:minmax(0,1fr);gap:30px}.preview-block{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}.canvas-viewport{min-width:0;min-height:0;container-type:size;display:flex;justify-content:center;align-items:flex-start}.preview-heading{min-height:36px;margin-bottom:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.preview-heading>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.preview-heading strong{font-size:14px;font-weight:760}.preview-heading span{color:var(--muted);font-size:12px}.preview-heading em{padding:5px 9px;border-radius:999px;color:var(--amber-dark);background:var(--amber-soft);font-size:11px;font-style:normal;font-weight:700}.canvas-shell{position:relative;width:min(100cqw,calc(100cqh * var(--preview-ratio)));aspect-ratio:var(--preview-ratio);flex:none;overflow:hidden;border:1px solid var(--line-strong);border-radius:12px;background:#ddd8cf;box-shadow:0 16px 36px #39302014;cursor:grab;touch-action:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.preview-block--portrait{--preview-ratio: .75}.preview-block--landscape{--preview-ratio: 1.3333333333}.canvas-shell:active{cursor:grabbing}.preview-block.is-active .canvas-shell{border-color:var(--amber);box-shadow:0 0 0 2px #d98c0f29,0 18px 42px #3930201a}.canvas-shell canvas{width:100%;height:100%;display:block;pointer-events:none}.drag-hint{position:absolute;left:50%;bottom:18px;transform:translate(-50%);height:39px;padding:0 13px;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:#1616169e;box-shadow:0 5px 18px #00000024;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px;font-weight:650;white-space:nowrap;pointer-events:none}.export-bar{min-height:104px;flex:0 0 auto;padding:14px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px;background:#ffffffe6;box-shadow:0 12px 30px #332b1c0d}.export-button{min-width:0;min-height:72px;padding:0 18px;border:1px solid var(--line-strong);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:11px;color:#2b2925;background:#fff;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}.export-button:hover{border-color:#baad99;background:#fffdf8;transform:translateY(-1px)}.export-button:active{transform:translateY(0)}.export-button span{min-width:0;text-align:left}.export-button strong,.export-button small{display:block}.export-button strong{font-size:14px;font-weight:760}.export-button small{margin-top:4px;color:var(--muted);font-size:10px;white-space:nowrap}.export-button--primary{border-color:var(--amber);color:#fff;background:#d68a0d;box-shadow:0 10px 22px #cf7c0533}.export-button--primary:hover{border-color:#c77600;background:#c97800;box-shadow:0 12px 24px #cf7c0540}.export-button--primary small{color:#ffffffc7}.toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translate(-50%,16px);padding:11px 16px;border-radius:999px;color:#fff;background:#181714e6;box-shadow:0 12px 32px #00000029;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;font-size:13px}.toast.is-visible{opacity:1;transform:translate(-50%)}@media(max-height:820px){.topbar{height:68px;flex-basis:68px}.workspace{height:calc(100vh - 68px);flex-basis:calc(100vh - 68px)}.preview-workspace{padding-top:20px;padding-bottom:18px;gap:16px}.export-bar{min-height:84px;padding:10px}.export-button{min-height:62px}}@media(max-width:1500px){.workspace{grid-template-columns:340px minmax(0,1fr)}.control-panel{padding-inline:18px}.preview-workspace{padding-inline:20px}.preview-stage{gap:20px}.preview-heading>div{gap:4px 10px}}@media(max-width:1100px),(max-height:560px){body{overflow:auto}.workspace{height:auto;flex:1 0 auto;overflow:visible}.preview-stage{flex:none;align-items:start}.canvas-viewport{container-type:normal}.canvas-shell{width:100%}.export-bar{grid-template-columns:1fr}}@media(max-width:1100px){.workspace{grid-template-columns:300px minmax(0,1fr)}.preview-stage{grid-template-columns:minmax(0,1fr);gap:24px}.preview-block{width:100%;max-width:640px;justify-self:center}.preview-block--portrait{max-width:360px}}@media(max-width:700px){.topbar{padding-inline:16px}.brand h1{font-size:20px}.brand span{display:none}.workspace{grid-template-columns:minmax(0,1fr)}.control-panel{overflow:visible;border-right:0;border-bottom:1px solid var(--line)}.preview-workspace{padding-inline:16px}}