:root { --bg:#0f1419; --surface:#1a2332; --accent:#a78bfa; --text:#e2e8f0; --muted:#94a3b8; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
header { padding:1rem; text-align:center; border-bottom:1px solid #334155; }
header p { color:var(--muted); font-size:.9rem; }
main { display:flex; min-height:calc(100vh - 80px); }
#sidebar { width:220px; background:var(--surface); padding:1rem; }
#workspace { flex:1; padding:1rem; }
.btn { background:#334155; color:var(--text); border:none; padding:.5rem 1rem; border-radius:8px; cursor:pointer; margin:.25rem 0; width:100%; }
.btn-accent { background:var(--accent); color:#1e1b4b; font-weight:600; width:auto; }
#project-list { list-style:none; margin-top:1rem; }
#project-list li { padding:.5rem; cursor:pointer; border-radius:6px; font-size:.9rem; }
#project-list li:hover, #project-list li.active { background:#334155; }
#draw-canvas { border:1px solid #334155; border-radius:8px; cursor:crosshair; max-width:100%; background:#fff; }
#write-area { width:100%; min-height:300px; background:var(--surface); color:var(--text); border:1px solid #334155; border-radius:8px; padding:1rem; font-size:1rem; resize:vertical; }
.hidden { display:none !important; }
.suggestion { display:block; margin-top:.75rem; color:var(--accent); font-size:.9rem; }
.toolbar { margin-top:1rem; }