:root{--bg: #fef6e9;--panel: #ffffff;--ink: #3a2f25;--muted: #8a7c6c;--accent: #ff8a3d;--accent-dark: #e8721f;--line: #efe2cd;--radius: 18px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,-apple-system,system-ui,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 20% 0%,rgba(255,200,120,.4),transparent 45%),radial-gradient(circle at 90% 10%,rgba(140,200,255,.35),transparent 40%);min-height:100vh}.site-header{text-align:center;padding:28px 20px 12px}.site-header h1{margin:0;font-size:32px;letter-spacing:1px}.subtitle{margin:8px 0 0;color:var(--muted);font-size:15px}.layout{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:center;padding:16px 20px 48px;max-width:1180px;margin:0 auto}.panel{background:var(--panel);border-radius:var(--radius);box-shadow:0 8px 24px #785a321f;padding:18px}.panel-title{margin:0 0 14px;font-size:17px}.gallery-panel{width:260px}.palette-panel{width:220px}.board-panel{flex:1 1 480px;min-width:320px;max-width:600px;display:flex;flex-direction:column;align-items:center}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.thumb{border:3px solid var(--line);background:#fff;border-radius:14px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .15s,transform .1s}.thumb:hover{transform:translateY(-2px)}.thumb.active{border-color:var(--accent);box-shadow:0 4px 12px #ff8a3d4d}.thumb canvas{width:100%;height:auto;border-radius:8px}.thumb-label{font-size:13px;color:var(--ink)}.ai-btn{margin-top:16px;width:100%;border:none;border-radius:14px;padding:12px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#a06bff,#6c8bff);display:flex;flex-direction:column;align-items:center;gap:2px;transition:filter .15s}.ai-btn:hover{filter:brightness(1.07)}.ai-btn-main{font-size:15px;font-weight:700}.ai-btn-note{font-size:11px;opacity:.85}.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;width:100%;margin-bottom:14px}.tool-group{display:flex;gap:8px;flex-wrap:wrap}.tool-btn,.op-btn{border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:9px 14px;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.tool-btn:hover,.op-btn:hover{transform:translateY(-1px)}.tool-btn.active{border-color:var(--accent);background:#fff1e3;font-weight:700}.op-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.op-btn-primary:hover{background:var(--accent-dark)}.op-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.canvas-wrap{width:100%;display:flex;justify-content:center}#canvas{width:100%;max-width:540px;height:auto;aspect-ratio:1 / 1;border:3px solid var(--line);border-radius:14px;background:#fff;cursor:crosshair;touch-action:manipulation}.board-title{margin:12px 0 0;font-size:16px;font-weight:700;color:var(--accent-dark)}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{aspect-ratio:1 / 1;border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 0 0 2px var(--line);transition:transform .1s}.swatch:hover{transform:scale(1.1)}.swatch.selected{box-shadow:0 0 0 3px var(--accent);transform:scale(1.12)}.hint{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.6}.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%) translateY(20px);background:#3a2f25f2;color:#fff;padding:12px 22px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}