.molecule-choices, .molecule-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.molecule-choices { margin-bottom: 0.75rem; }
.molecule-choices button, .molecule-tools button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 2.5rem; padding: 0.5rem 0.625rem; border: 1px solid #cbd5e1;
    border-radius: 0.5rem; background: #fff; color: #475569; font: inherit; font-size: 0.75rem; cursor: pointer;
}
.molecule-choices button:hover, .molecule-tools button:not(:disabled):hover { background: #f1f5f9; }
.molecule-choices button[aria-pressed="true"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
.molecule-formula { opacity: 0.75; }
.molecule-view { position: relative; width: 100%; height: 17rem; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 0.75rem; background: #f8fafc; }
.molecule-view canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.molecule-view canvas:active { cursor: grabbing; }
.molecule-view canvas:focus-visible { outline: 3px solid #2563eb; outline-offset: -4px; }
.molecule-choices button:focus-visible, .molecule-tools button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.molecule-message { position: absolute; inset: 0; display: grid; place-content: center; padding: 1.5rem; text-align: center; font-size: 0.75rem; line-height: 1.7; color: #64748b; }
.molecule-message[hidden] { display: none; }
.molecule-tools { margin-top: 0.75rem; }
.molecule-tools button:disabled { opacity: 0.45; cursor: default; }
.molecule-tools button[data-molecule-action^="zoom"] { width: 2.5rem; }
.molecule-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1rem 0 0.75rem; padding: 0; list-style: none; font-size: 0.6875rem; color: #64748b; }
.molecule-legend li { display: flex; align-items: center; gap: 0.375rem; }
.molecule-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1px solid #94a3b8; }
.molecule-hydrogen { background: #fff; }
.molecule-oxygen { background: #ef4444; border-color: #dc2626; }
.molecule-carbon { background: #475569; border-color: #475569; }
.molecule-note { margin-top: 0.75rem; }
.dark .molecule-view { background: #0f172a; border-color: #475569; }
.dark .molecule-choices button, .dark .molecule-tools button { background: #1e293b; border-color: #475569; color: #cbd5e1; }
.dark .molecule-choices button:hover, .dark .molecule-tools button:not(:disabled):hover { background: #334155; }
.dark .molecule-choices button[aria-pressed="true"] { border-color: #60a5fa; background: #172554; color: #93c5fd; }
.dark .molecule-message, .dark .molecule-legend { color: #94a3b8; }