body { font-family: Arial, sans-serif; margin:0; display:flex; flex-direction:column; height:100vh; }

header { background:#222; color:#fff; padding:6px 10px; display:flex; align-items:center; gap:14px; }

#toolbar button, #toolbar select { margin-right:6px; }

main { flex:1; display:flex; }

#canvasWrapper { flex:1; background:#f8f8f8; position:relative; min-height:0; display:flex; }

#chemCanvas { flex:1; width:100%; height:100%; border:1px solid #ccc; background:white; cursor:crosshair; display:block; }

aside { width:280px; border-left:1px solid #ccc; padding:8px; background:#fafafa; font-size:12px; overflow:auto; }

main { overflow:hidden; }

.atom { fill:#fff; stroke:#222; stroke-width:1.2px; cursor:pointer; }

.bond { stroke:#222; stroke-width:2px; cursor:pointer; }

.selected .atom { stroke:#0b79d0; stroke-width:2px; }

.selected .bond { stroke:#0b79d0; stroke-width:3px; }

.invalid { stroke:#d00 !important; }

g.atomGroup.invalid > circle.atom { stroke:#d00 !important; }

line.rubberBond { stroke:#0b79d0; stroke-width:2px; stroke-dasharray:4 3; pointer-events:none; }

rect.marquee { fill:rgba(0,120,200,0.15); stroke:#0b79d0; stroke-width:1px; stroke-dasharray:4 2; pointer-events:none; }

g.atomGroup.role-reactant > circle.atom { stroke:#2b6 !important; }

g.atomGroup.role-product > circle.atom { stroke:#b62 !important; }

g.atomGroup.role-agent > circle.atom { stroke:#666 !important; }

g.bondGroup.selected line.bond { stroke:#0b79d0; stroke-width:3px; }

g.reactionArrowGroup text.arrowLabel { font-family: Arial, sans-serif; }

g.reactionGroups rect.groupBox { pointer-events:none; }