:root{--bg:#fff;--panel:#fff;--panel-2:#f9fafb;--text:#111827;--muted:#6b7280;--border:#e5e7eb;--shadow:#11182714 0 10px 24px;--accent:#d40570;--danger:#dc2626;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/140% system-ui,Segoe UI,Roboto,sans-serif}body{background:var(--bg);min-height:100svh;margin:0}#app{box-sizing:border-box;width:min(1180px,100%);margin:0 auto;padding:18px 18px 32px}.header{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.header-left{gap:2px;display:grid}.site-title{color:var(--accent);letter-spacing:.2px;font-size:26px;font-weight:750;line-height:1.15}.site-subtitle{color:var(--muted);font-size:13px}.statusline{color:var(--muted);white-space:nowrap;font-size:13px}@media (width<=640px){.header{flex-wrap:wrap;align-items:flex-start}.header-left{flex:260px;min-width:0}.site-title{white-space:nowrap;text-overflow:ellipsis;font-size:18px;overflow:hidden}.statusline{white-space:normal;flex:100%}.ai-input,.ai-key{width:100%}.ai-toolbar{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px}.ai-left,.ai-right{justify-content:flex-start;width:100%}.ai-right{flex-flow:wrap;align-items:center;gap:8px}.ai-right .btn{flex:none;width:auto}.ai-right .ai-key{flex:220px;width:auto;min-width:160px}}.btn{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:9px 12px;text-decoration:none;transition:transform 60ms,background .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--panel-2);border-color:#d1d5db}.btn:active{transform:translateY(1px)}.btn.danger{background:#dc26260f;border-color:#dc262659}.toolbar{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding:10px;display:flex}.tools-left,.tools-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ai-toolbar{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding:10px;display:flex}.ai-left,.ai-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ai-left{flex:360px;min-width:240px}.ai-right{flex:none;justify-content:flex-end}.ai-input{border:1px solid var(--border);background:var(--panel);width:280px;max-width:100%;color:var(--text);border-radius:10px;outline:none;flex:280px;padding:9px 10px}.ai-input:focus{border-color:#d4057073}.ai-key{border:1px solid var(--border);background:var(--panel);width:220px;max-width:100%;color:var(--text);border-radius:10px;outline:none;flex:0 0 220px;padding:9px 10px}.ai-key:focus{border-color:#d4057073}.ai-model{border:1px solid var(--border);background:var(--panel);width:260px;max-width:100%;color:var(--text);border-radius:10px;outline:none;flex:0 0 260px;height:38px;padding:9px 10px}.ai-model:focus{border-color:#d4057073}@media (width<=640px){.ai-toolbar{flex-direction:column;justify-content:flex-start;align-items:stretch;gap:8px}.ai-left,.ai-right{justify-content:flex-start;width:100%}.ai-left{flex:none;min-width:0}.ai-input{flex:auto;width:100%}.ai-right{flex-flow:wrap;flex:none;align-items:center;gap:8px}.ai-right .btn{flex:none;width:auto}.ai-right .ai-key{flex:220px;width:auto;min-width:160px}}.tool{appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;border-radius:10px;padding:9px 10px}.tool.active{background:#d405700f;border-color:#d4057061}.swatches{align-items:center;gap:6px;display:flex}.swatch{appearance:none;cursor:pointer;border:1px solid #1118272e;border-radius:999px;width:22px;height:22px;padding:0;box-shadow:0 1px 2px #11182714}.swatch:hover{transform:translateY(-1px)}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.sep{color:#d1d5db;padding:0 4px}.color{border:1px solid var(--border);background:var(--panel);border-radius:10px;width:42px;height:36px;padding:0}.size{width:160px}.board-wrap{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:16px;margin-top:12px;overflow:hidden}.board{cursor:crosshair;background:#fff;width:100%;height:auto;display:block}.footer{border-top:1px solid var(--border);color:var(--muted);gap:6px;margin-top:18px;padding-top:14px;font-size:14px;display:grid}.footer-title{color:var(--text);font-weight:700}.footer-link{color:var(--accent);text-decoration:none}.footer-link:hover{text-decoration:underline}