:root { color-scheme: light dark; --bg:#0b0b10; --fg:#eaeaf2; --muted:#9aa0a6; --card:#15151d; --border:#2a2a34; --primary:#6aa0ff }
@media (prefers-color-scheme: light){ :root{ --bg:#fff; --fg:#1a1a1f; --muted:#57606a; --card:#f6f8fa; --border:#e6e8eb } }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
.container{ max-width:1100px; margin:0 auto; padding:24px }
.subtitle{ color:var(--muted) }
.panel{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px }
.row{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:center }
.group{ display:flex; flex-direction:column; gap:6px }
.muted{ color:var(--muted); font-size:.9rem }
.editor{ display:grid; grid-template-columns: 1fr 320px; gap:16px; margin-top:12px }
canvas#preview{ width:100%; height:auto; background:#fff; border:1px solid var(--border); border-radius:8px }
.controls{ display:flex; flex-direction:column; gap:10px }
.btn{ border:1px solid var(--border); background:transparent; color:var(--fg); padding:10px 14px; border-radius:8px; cursor:pointer }
.btn.primary{ background:var(--primary); color:#fff; border-color:transparent }
fieldset.bgclean{ border:1px dashed var(--border); border-radius:8px; padding:8px 10px }
legend{ color:var(--muted) }
@media (max-width: 920px){ .editor{ grid-template-columns: 1fr } }