.molar-mass-layout { display: grid; gap: 18px; }
@media (min-width: 940px) {
  .molar-mass-layout { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.35fr); align-items: start; }
}
.molar-mass-layout > .card, .molar-mass-layout .input { min-width: 0; }
.molar-mass-layout .input { max-width: 100%; }
.molar-mass-actions, .molar-mass-examples { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.molar-mass-examples { gap: 8px; }
.molar-mass-grid { display: grid; gap: 10px; }
@media (min-width: 620px) {
  .molar-mass-grid { grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr); }
}
.molar-mass-table-wrap { overflow-x: auto; }
.molar-mass-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.molar-mass-table th, .molar-mass-table td { border: 1px solid var(--border, #e5e7eb); padding: 8px 10px; text-align: left; vertical-align: top; }
.molar-mass-table th { background: var(--surface-subtle, #f8fafc); color: var(--fg, #111827); }
.molar-mass-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; overflow-wrap: anywhere; }
#molar-mass-formula-lines { white-space: pre-wrap; }
.molar-mass-note { border-left: 4px solid var(--primary, #2563eb); background: var(--info-surface, #eff6ff); border-radius: 8px; padding: 10px 12px; color: var(--info-fg, #1e3a8a); }
.molar-mass-soft-note { border: 1px solid var(--info-border, #bfdbfe); background: var(--surface-subtle, #f8fbff); border-radius: 8px; padding: 10px 12px; color: var(--fg, #111827); }
.molar-mass-error { border: 1px solid var(--danger-border, #fecaca); background: var(--danger-surface, #fef2f2); color: var(--danger-fg, #991b1b); border-radius: 8px; padding: 10px 12px; }
:root.dark .molar-mass-table th { background: #1e293b; color: #f8fafc; }
:root.dark .molar-mass-table th, :root.dark .molar-mass-table td { border-color: #475569; }
:root.dark .molar-mass-layout .card { background: #0c1e33; color: #e6eef8; }
:root.dark .molar-mass-layout h2, :root.dark .molar-mass-layout h3, :root.dark .molar-mass-layout .label, :root.dark .molar-mass-layout .small { color: #e6eef8; }
:root.dark .molar-mass-layout .input { background: #0f172a; border-color: #64748b; color: #f8fafc; }
:root.dark .molar-mass-layout .input::placeholder { color: #cbd5e1; opacity: 1; }
:root.dark .molar-mass-note { background: #172554; color: #dbeafe; }
:root.dark .molar-mass-soft-note { background: #172554; border-color: #3b82f6; color: #dbeafe; }
:root.dark .molar-mass-error { background: #450a0a; border-color: #ef4444; color: #fee2e2; }