:root{--bg:#10060d;--panel:#1b0b17;--line:rgba(229,181,83,.22);--gold:#e5b553;--gold2:#ffd982;--text:#fff8e9;--muted:#bdaeba;--wine:#49162f;--shadow:0 24px 80px rgba(0,0,0,.45)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;background:radial-gradient(circle at 15% 5%,#3b1129 0,transparent 34%),radial-gradient(circle at 90% 90%,#281022 0,transparent 35%),var(--bg)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.05) 50%,transparent 52%)}
.shell{width:min(1280px,calc(100% - 36px));margin:auto;padding:56px 0 70px}
.intro{text-align:center;margin-bottom:32px}.eyebrow{color:var(--gold);letter-spacing:.25em;font-size:12px;font-weight:800;margin:0 0 12px}.intro h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,5vw,58px);letter-spacing:.03em;margin:0;background:linear-gradient(180deg,#fff3c7,var(--gold));background-clip:text;color:transparent}.lead{color:var(--muted);margin:14px 0 0}
.workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:22px;align-items:start}
.preview-panel,.controls{border:1px solid var(--line);background:linear-gradient(145deg,rgba(37,15,31,.96),rgba(19,8,16,.96));border-radius:22px;box-shadow:var(--shadow)}
.preview-panel{overflow:hidden}.preview-head{display:flex;justify-content:space-between;padding:16px 20px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.preview-head span:last-child{color:var(--gold)}
.canvas-wrap{position:relative;padding:18px;background:#0c070a}.canvas-wrap canvas{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.48)}.loading{position:absolute;inset:18px;display:grid;place-items:center;background:#1f0b19;color:var(--gold);border-radius:10px}.loading.hidden{display:none}
.controls{padding:24px;display:grid;gap:22px}.field-group>label,.field>span{display:block;font-weight:700;font-size:13px;margin-bottom:9px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#10070d;border:1px solid var(--line);padding:4px;border-radius:13px}.template-btn{border:0;border-radius:9px;padding:11px;background:transparent;color:var(--muted);cursor:pointer;font-weight:700}.template-btn.active{color:#211006;background:linear-gradient(135deg,var(--gold2),#bd7f29)}
.field input{width:100%;border:1px solid var(--line);border-radius:12px;background:#10070d;color:var(--text);padding:12px 13px;font:inherit;outline:none;color-scheme:dark}.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,181,83,.12)}.field small{display:block;color:#7f707b;font-size:10px;margin-top:7px}
.actions{display:grid;gap:10px}.actions button{border-radius:12px;padding:13px;border:0;font-weight:800;cursor:pointer}.ghost{background:#2b1524;color:var(--text);border:1px solid var(--line)!important}.download{background:linear-gradient(135deg,var(--gold2),#b97823);color:#241305;box-shadow:0 10px 28px rgba(190,126,35,.22)}.actions button:hover{filter:brightness(1.08);transform:translateY(-1px)}.tip{margin:0;color:#756873;font-size:10px;line-height:1.6;text-align:center}
@media(max-width:900px){.shell{padding-top:34px}.workspace{grid-template-columns:1fr}.controls{grid-template-columns:1fr 1fr}.field-group,.actions,.tip{grid-column:1/-1}}
@media(max-width:560px){.shell{width:min(100% - 20px,1280px)}.intro{margin-bottom:24px}.workspace{gap:14px}.canvas-wrap{padding:8px}.preview-panel,.controls{border-radius:16px}.controls{grid-template-columns:1fr;padding:18px}.field-group,.actions,.tip{grid-column:auto}.preview-head{padding:13px 15px}}
.field select{width:100%;border:1px solid var(--line);border-radius:12px;background:#10070d;color:var(--text);padding:12px 13px;font:inherit;outline:none;color-scheme:dark}.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(229,181,83,.12)}