* { box-sizing: border-box; }
body { margin:0; background:#111; color:#fff; font-family:Arial, Helvetica, sans-serif; }
header { display:flex; justify-content:space-between; gap:20px; padding:14px 18px; background:#050505; border-bottom:4px solid #d6a51f; }
h1 { margin:0; color:#d6a51f; }
p { margin:5px 0 0; color:#ddd; }
button { background:#d6a51f; color:#111; border:0; border-radius:8px; padding:9px 12px; font-weight:bold; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
main { display:grid; grid-template-columns:350px 1fr; min-height:calc(100vh - 86px); }
aside { background:#1a1a1a; padding:16px; border-right:2px solid #333; overflow-y:auto; }
h2 { color:#d6a51f; font-size:20px; margin:18px 0 8px; }
label { display:block; margin:10px 0; font-weight:bold; }
select, input { width:100%; margin-top:4px; padding:8px; border-radius:6px; border:1px solid #555; background:#222; color:#fff; }
.hint { background:#252525; border-left:4px solid #d6a51f; padding:10px; margin-top:14px; line-height:1.35; }
#counts { font-family:Consolas, monospace; font-size:13px; white-space:pre-wrap; background:#0d0d0d; padding:10px; border:1px solid #333; border-radius:8px; }
#workArea { overflow:auto; padding:14px; }
#drop { border:3px dashed #777; padding:24px; text-align:center; margin-bottom:12px; color:#ddd; border-radius:12px; background:#1d1d1d; }
#drop.drag { border-color:#d6a51f; color:#fff; }
canvas { background:#222; border:2px solid #555; max-width:none; }