/* Shared look for the Chemistry and Maths labs (dark by default; theme.css adapts it to the bright theme). */
body { font-family: 'Inter', sans-serif; color: #e2e8f0; background-color: #0f172a; }
.glass-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }
.lab-screen { display: block; width: 100%; background: #0f172a; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .1); }  /* touch-action is set only on canvases you can drag (Lab.drag), so others still scroll the page */
.lab-ctrl label { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; font-weight: 600; color: #cbd5e1; margin-bottom: .25rem; }
.lab-ctrl label output, .lab-ctrl label b { color: #fbbf24; font-variant-numeric: tabular-nums; }
.lab-ctrl input[type=range] { width: 100%; height: .5rem; border-radius: .5rem; background: rgba(255, 255, 255, .2); appearance: none; -webkit-appearance: none; cursor: pointer; }
.lab-ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lab-accent, #38bdf8); border: 2px solid #fff; }
.lab-ctrl input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lab-accent, #38bdf8); border: 2px solid #fff; }
.lab-ctrl select { width: 100%; padding: .5rem .6rem; border-radius: .5rem; background: #1e293b; color: #e2e8f0; border: 1px solid #475569; }
.lab-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .9rem; border-radius: .6rem; font-weight: 700; font-size: .9rem; background: var(--lab-accent, #0ea5e9); color: #fff; border: 0; cursor: pointer; transition: filter .15s, transform .1s; }
.lab-btn:hover { filter: brightness(1.1); } .lab-btn:active { transform: scale(.97); }
.lab-btn.ghost { background: rgba(148, 163, 184, .18); color: #e2e8f0; }
.lab-btn.active { outline: 3px solid #fbbf24; outline-offset: 1px; }
.lab-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.lab-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.lab-readout > div { background: rgba(15, 23, 42, .55); border: 1px solid rgba(255, 255, 255, .08); border-radius: .6rem; padding: .5rem .65rem; }
.lab-readout small { display: block; font-size: .72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.lab-readout b { font-size: 1.05rem; color: #f8fafc; font-variant-numeric: tabular-nums; }
.lab-note { font-size: .9rem; line-height: 1.5; color: #cbd5e1; background: rgba(56, 189, 248, .08); border-left: 3px solid var(--lab-accent, #38bdf8); padding: .6rem .8rem; border-radius: .4rem; }
.lab-dev { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: .9rem; background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); color: #fde68a; font-size: .95rem; }
.lab-dev a { color: #fbbf24; font-weight: 700; text-decoration: underline; }
.lab-formula { font-family: 'Cambria Math', 'STIX Two Math', Georgia, serif; font-size: 1.05rem; color: #e2e8f0; }
.lab-kbd { font-size: .75rem; color: #94a3b8; }
:root[data-theme="light"] .lab-ctrl label { color: var(--lt-text-2); }
:root[data-theme="light"] .lab-ctrl label output, :root[data-theme="light"] .lab-ctrl label b { color: #b45309; }
:root[data-theme="light"] .lab-ctrl select { background: #fff; color: var(--lt-text); border-color: var(--lt-line); }
:root[data-theme="light"] .lab-btn.ghost { background: #e2e8f0; color: var(--lt-text); }
:root[data-theme="light"] .lab-readout > div { background: var(--lt-tint); border-color: var(--lt-line); }
:root[data-theme="light"] .lab-readout small { color: var(--lt-text-4); }
:root[data-theme="light"] .lab-readout b { color: var(--lt-text) !important; }
:root[data-theme="light"] .lab-note { color: var(--lt-text-2); background: #eff6ff; }
:root[data-theme="light"] .lab-dev { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
:root[data-theme="light"] .lab-dev a { color: #b45309; }
:root[data-theme="light"] .lab-formula { color: var(--lt-text); }