:root { --bg:#0f1115; --fg:#e6e6e6; --muted:#9aa4b2; --accent:#7aa2f7; --good:#3fb950; --warn:#f2cc60; --bad:#ff6b6b; }
html,body { height:100%; margin:0; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
h1 { font-size:20px; margin:12px 0; }
.app { display:grid; grid-template-columns: 400px 1fr; gap:16px; height:100%; }
.left { padding:16px; border-right:1px solid #1f2430; overflow:auto; }
.right { padding:16px; overflow:auto; display:grid; grid-template-rows:auto 1fr; gap:12px; }
fieldset { border:1px solid #1f2430; border-radius:10px; padding:12px; margin:0 0 12px; }
legend { color:var(--muted); padding:0 6px; }
label { display:block; margin:8px 0 4px; color:var(--muted); }
input[type="number"], select { width:100%; box-sizing:border-box; background:#111421; color:var(--fg); border:1px solid #1f2430; border-radius:8px; padding:8px; }
input[type="range"] { width:100%; box-sizing:border-box; }
input[type="file"] { width:100%; max-width:100%; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row { display:flex; gap:8px; align-items:center; }
.row > * { flex:1; }
.row-inline { display:flex; gap:8px; align-items:center; }
button { background:#1e2638; color:var(--fg); border:1px solid #26304a; padding:8px 10px; border-radius:10px; cursor:pointer; }
button.primary { background:var(--accent); color:#0b1020; border:none; font-weight:600; }
button:disabled { opacity:.6; cursor:not-allowed; }
.stats { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
.stat { background:#111421; border:1px solid #1f2430; border-radius:10px; padding:10px; }
.stat b { display:block; color:var(--muted); font-weight:600; margin-bottom:4px; }
.log { white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; background:#0e111a; border:1px solid #1f2430; padding:10px; border-radius:10px; height:140px; overflow:auto; margin-top:8px; }
canvas { image-rendering: pixelated; background:#000; border-radius:10px; border:1px solid #1f2430; display:block; }
.preview-wrap { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.preview-wrap > div { overflow:auto; }
.palette-row { display:grid; grid-template-columns: repeat(8, 1fr); gap:4px; margin-top:6px; }
.chip { height:18px; border-radius:4px; border:1px solid #2a3246; }
.hint { color:var(--muted); font-size:12px; }
#dropZone { text-align:center; padding:20px; user-select:none; border-style:dashed; }