/* IBM Plex Sans Arabic — bundled locally under SIL OFL 1.1. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA-02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA-02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA-02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA-02DC, U+2000-206F, U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #101c24;
  --navy-deep: #0c151b;
  --slate: #192a33;
  --slate-2: #223841;
  --mist: #eaf0ef;
  --paper: #f4f7f5;
  --teal: #39b7a5;
  --teal-dark: #208d80;
  --cyan: #82d8d0;
  --muted: #a8b8bc;
  --warm: #e7b56a;
  --red: #d96c68;
  --line: rgba(234, 240, 239, 0.15);
  --shadow: 0 18px 50px rgba(4, 12, 16, 0.28);
  --radius: 18px;
  --radius-sm: 12px;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Arial, sans-serif;
  color: var(--mist);
  background: var(--navy);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--navy); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--navy); background: var(--cyan); }

body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -2;
}
body::before {
  inset: 0;
  background: radial-gradient(circle at 8% 0%, rgba(57,183,165,.16), transparent 32%), radial-gradient(circle at 88% 22%, rgba(130,216,208,.08), transparent 28%);
}
body::after {
  top: 0;
  bottom: 0;
  right: clamp(18px, 5vw, 80px);
  width: 1px;
  background: linear-gradient(transparent, rgba(130,216,208,.22) 20%, rgba(130,216,208,.06) 80%, transparent);
}
.grain { position: fixed; inset: 0; z-index: -1; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }

.app-shell { min-height: 100vh; overflow: hidden; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(16,28,36,.9); backdrop-filter: blur(16px); }
.topbar-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; padding: 0; border: 0; color: inherit; background: transparent; text-align: right; }
.brand-mark { width: 43px; height: 43px; border-radius: 13px; object-fit: cover; box-shadow: 0 0 0 1px rgba(130,216,208,.2); }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 15px; letter-spacing: -.02em; }
.brand-copy span { color: var(--muted); font-size: 11px; direction: ltr; text-align: right; letter-spacing: .08em; }
.main-nav { display: flex; gap: 4px; align-items: center; }
.nav-link { border: 0; color: var(--muted); background: transparent; padding: 10px 12px; border-radius: 10px; font-size: 13px; transition: .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--mist); background: rgba(57,183,165,.12); }
.nav-link.active { box-shadow: inset 0 -2px var(--teal); }
.header-note { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(57,183,165,.1); }

.page { padding: 54px 0 100px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--teal); }
.hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(380px, 1.06fr); gap: 52px; align-items: center; min-height: 600px; }
.hero h1 { margin: 18px 0 18px; max-width: 650px; font-size: clamp(42px, 6vw, 78px); line-height: 1.1; letter-spacing: -.065em; font-weight: 700; }
.hero h1 em { color: var(--teal); font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; height: 9px; right: 2px; left: 10px; bottom: 2px; background: rgba(57,183,165,.18); z-index: -1; transform: rotate(-1.5deg); }
.lead { margin: 0; max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; padding: 0 17px; color: var(--navy); background: var(--teal); font-weight: 700; font-size: 13px; transition: transform .2s ease, background .2s ease, border .2s ease; }
.btn:hover { transform: translateY(-2px); background: #5ac8b9; }
.btn.secondary { color: var(--mist); background: transparent; border-color: var(--line); }
.btn.secondary:hover { background: rgba(234,240,239,.07); border-color: rgba(130,216,208,.4); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: 12px; }
.btn.ghost { color: var(--muted); background: transparent; border: 0; padding: 0 8px; }
.btn.ghost:hover { color: var(--mist); background: transparent; transform: none; }
.btn:focus-visible, .nav-link:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.hero-meta { display: flex; gap: 22px; margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--line); }
.meta-item { display: grid; gap: 3px; }
.meta-item strong { font-size: 18px; }
.meta-item span { color: var(--muted); font-size: 11px; }
.lab-preview { position: relative; min-height: 470px; border: 1px solid rgba(130,216,208,.22); border-radius: 28px; background: linear-gradient(145deg, rgba(34,56,65,.95), rgba(15,28,36,.96)); overflow: hidden; box-shadow: var(--shadow); }
.lab-preview::before { content: "SCIENTIFIC WORKSPACE / 01"; position: absolute; top: 20px; left: 23px; font-size: 10px; color: rgba(234,240,239,.45); letter-spacing: .16em; direction: ltr; }
.lab-preview::after { content: ""; position: absolute; inset: 58px 24px 24px; border: 1px solid rgba(234,240,239,.08); border-radius: 20px; pointer-events: none; }
.preview-label { position: absolute; right: 25px; bottom: 23px; z-index: 2; display: grid; gap: 2px; }
.preview-label strong { font-size: 14px; }
.preview-label span { color: var(--muted); font-size: 11px; }
.preview-grid { position: absolute; inset: 88px 40px 82px; background: linear-gradient(rgba(130,216,208,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(130,216,208,.06) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(420px) rotateX(56deg) rotateZ(-3deg); transform-origin: center bottom; opacity: .7; }
.preview-tube { position: absolute; left: 30%; bottom: 98px; height: 245px; width: 92px; transform: rotate(9deg); border: 2px solid rgba(234,240,239,.54); border-top-width: 7px; border-radius: 14px 14px 44px 44px; background: linear-gradient(90deg, rgba(234,240,239,.1), rgba(255,255,255,.02) 42%, rgba(234,240,239,.13)); box-shadow: inset 18px 0 20px rgba(234,240,239,.04), 10px 16px 22px rgba(0,0,0,.18); }
.preview-liquid { position: absolute; right: 8px; left: 8px; bottom: 8px; height: 44%; border-radius: 6px 6px 34px 34px; background: linear-gradient(180deg, rgba(57,183,165,.54), rgba(33,121,113,.86)); box-shadow: inset 0 7px 10px rgba(130,216,208,.15); }
.preview-bubbles, .preview-bubbles::before, .preview-bubbles::after { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(234,240,239,.75); content: ""; }
.preview-bubbles { right: 31%; bottom: 163px; animation: float 2.5s infinite ease-in-out; }
.preview-bubbles::before { right: 26px; bottom: 30px; width: 5px; height: 5px; animation: float 2.1s .3s infinite ease-in-out; }
.preview-bubbles::after { right: -18px; bottom: 48px; width: 4px; height: 4px; animation: float 2.8s .5s infinite ease-in-out; }
.preview-beaker { position: absolute; right: 20%; bottom: 108px; width: 125px; height: 100px; border: 2px solid rgba(234,240,239,.4); border-top: 0; border-radius: 0 0 18px 18px; transform: skew(-6deg); }
.preview-beaker::before { content: ""; position: absolute; top: -7px; right: -2px; left: -2px; border-top: 3px solid rgba(234,240,239,.6); }
.preview-beaker::after { content: ""; position: absolute; right: 12px; left: 12px; bottom: 9px; height: 47%; border-radius: 3px 3px 13px 13px; background: #c2d7a7; opacity: .85; }
.sample-tag { position: absolute; right: 43px; top: 106px; padding: 7px 10px; border: 1px solid rgba(231,181,106,.35); border-radius: 8px; color: var(--warm); background: rgba(231,181,106,.08); font-size: 10px; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-head h2 { margin: 8px 0 0; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.05em; line-height: 1.15; }
.section-head p { margin: 0; max-width: 440px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 50px; }
.feature-item { padding: 20px; border-top: 1px solid var(--line); background: rgba(25,42,51,.55); }
.feature-index { color: var(--teal); font: 600 11px/1 ui-monospace, monospace; direction: ltr; }
.feature-item h3 { margin: 14px 0 6px; font-size: 16px; }
.feature-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

.paper { color: var(--navy); background: var(--paper); border-radius: 24px; padding: clamp(20px, 4vw, 38px); box-shadow: var(--shadow); }
.paper .eyebrow { color: var(--teal-dark); }
.paper .eyebrow::before { background: var(--teal-dark); }
.page-title { margin: 10px 0 10px; color: var(--mist); font-size: clamp(32px, 5vw, 56px); letter-spacing: -.06em; line-height: 1.1; }
.page-intro { max-width: 650px; margin: 0 0 30px; color: var(--muted); line-height: 1.85; }
.page-title-dark { color: var(--navy); }

.lab-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 15px; align-items: start; }
.lab-controls { position: sticky; top: 92px; border: 1px solid var(--line); border-radius: 18px; background: rgba(25,42,51,.75); padding: 18px; }
.control-kicker { color: var(--cyan); font-size: 11px; font-weight: 600; }
.control-group { display: grid; gap: 7px; margin-top: 16px; }
.control-group label { color: var(--muted); font-size: 11px; }
select, input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid rgba(234,240,239,.16); border-radius: 10px; color: var(--mist); background: rgba(16,28,36,.65); font-size: 12px; }
select option { color: var(--navy); background: var(--paper); }
.control-actions { display: flex; gap: 8px; margin-top: 18px; }
.control-actions .btn { flex: 1; }
.lab-status { display: flex; align-items: start; gap: 9px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.7; }
.lab-status .status-dot { flex: 0 0 auto; margin-top: 5px; }
.lab-status.error .status-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(217,108,104,.1); }

.lab-main { min-width: 0; }
.lab-bench { position: relative; min-height: 530px; overflow: hidden; border: 1px solid rgba(130,216,208,.18); border-radius: 22px 22px 12px 12px; background: linear-gradient(146deg, #263f48 0%, #182b34 48%, #122129 100%); box-shadow: var(--shadow); }
.lab-bench::before { content: ""; position: absolute; inset: 0; opacity: .7; background: linear-gradient(rgba(130,216,208,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(130,216,208,.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.bench-topline { position: absolute; right: 22px; left: 22px; top: 19px; display: flex; align-items: center; justify-content: space-between; z-index: 2; color: rgba(234,240,239,.55); font-size: 10px; letter-spacing: .1em; }
.bench-topline span:last-child { color: var(--teal); direction: ltr; }
.tube-stage { position: absolute; top: 86px; right: 22%; left: 22%; bottom: 74px; display: grid; place-items: center; }
.tube-shadow { position: absolute; bottom: 17px; width: 210px; height: 23px; border-radius: 50%; background: rgba(0,0,0,.25); filter: blur(8px); }
.test-tube { position: relative; width: 124px; height: 310px; border: 3px solid rgba(234,240,239,.58); border-top: 9px solid rgba(234,240,239,.72); border-radius: 18px 18px 60px 60px; transform: rotate(-2deg); background: linear-gradient(90deg, rgba(234,240,239,.13), rgba(255,255,255,.02) 43%, rgba(234,240,239,.15)); box-shadow: inset 24px 0 25px rgba(234,240,239,.04), 13px 19px 24px rgba(0,0,0,.2); z-index: 2; }
.tube-scale { position: absolute; top: 39px; left: -30px; height: 220px; width: 23px; border-right: 1px solid rgba(130,216,208,.45); background: repeating-linear-gradient(to bottom, transparent 0 30px, rgba(130,216,208,.42) 30px 31px); opacity: .75; }
.tube-scale::after { content: "5 ml   4   3   2   1"; position: absolute; top: -17px; left: -4px; width: 18px; color: rgba(234,240,239,.38); font: 8px/30px ui-monospace, monospace; writing-mode: vertical-rl; letter-spacing: .05em; }
.tube-rim { position: absolute; inset: -10px -3px auto; height: 10px; border-radius: 20px 20px 3px 3px; background: rgba(234,240,239,.2); }
.tube-liquid { position: absolute; right: 10px; left: 10px; bottom: 10px; height: 44%; border-radius: 8px 8px 47px 47px; background: var(--solution-color, #b6d3ca); transition: background .6s ease, height .5s ease; box-shadow: inset 0 9px 13px rgba(255,255,255,.13), inset 0 -14px 20px rgba(0,0,0,.1); overflow: hidden; }
.tube-liquid::before { content: ""; position: absolute; top: 8px; right: 8px; left: 8px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); }
.precipitate { position: absolute; right: 12px; left: 12px; bottom: 10px; height: 0; border-radius: 4px 4px 44px 44px; background: var(--precipitate-color, #f3f3ed); opacity: 0; transition: height 1s cubic-bezier(.22,.9,.3,1), opacity .5s ease; }
.reaction-done .precipitate { height: 27%; opacity: .94; }
.precipitate::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(circle at 25% 30%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 65% 60%, #fff 0 1.5px, transparent 2px); background-size: 20px 18px, 27px 23px; }
.bubbles { position: absolute; right: 31px; bottom: 88px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.78); opacity: 0; box-shadow: 27px 24px 0 -1px rgba(255,255,255,.7), -14px 45px 0 -2px rgba(255,255,255,.8), 14px 72px 0 -2px rgba(255,255,255,.7); }
.reaction-done .bubbles, .reaction-running .bubbles { opacity: .8; animation: bubbles 1.7s infinite ease-in; }
.reaction-running .test-tube { animation: settle .8s ease-in-out infinite alternate; }
.reaction-running .tube-liquid { animation: liquidPulse 1.1s ease-in-out infinite alternate; }
.dropper { position: absolute; top: 5px; right: 58%; width: 52px; height: 190px; z-index: 3; transform: rotate(18deg); transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.18,.8,.28,1), top 1.1s ease, right 1.1s ease; }
.dropper-body { position: absolute; top: 22px; right: 11px; width: 30px; height: 110px; border: 2px solid rgba(234,240,239,.62); border-radius: 13px 13px 7px 7px; background: linear-gradient(90deg, rgba(234,240,239,.1), rgba(130,216,208,.25), rgba(234,240,239,.06)); }
.dropper-tip { position: absolute; top: 130px; right: 20px; width: 12px; height: 50px; border: 2px solid rgba(234,240,239,.58); border-top: 0; clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%); background: rgba(130,216,208,.25); }
.dropper-cap { position: absolute; top: 0; right: 5px; width: 42px; height: 31px; border-radius: 12px 12px 5px 5px; background: var(--warm); }
.drop { position: absolute; right: 23px; top: 181px; width: 8px; height: 14px; border-radius: 80% 20% 60% 50%; background: var(--warm); transform: rotate(45deg); opacity: 0; }
.reaction-running .dropper { top: 110px; right: 46%; transform: rotate(5deg); }
.reaction-running .drop { animation: drop 1.1s .85s both; }
.reaction-done .dropper { top: 5px; right: 58%; transform: rotate(18deg); }
.bench-tools { position: absolute; right: 9%; left: 9%; bottom: 39px; display: flex; align-items: end; justify-content: space-between; z-index: 2; }
.beaker { position: relative; width: 105px; height: 76px; border: 2px solid rgba(234,240,239,.45); border-top: 0; border-radius: 0 0 18px 18px; transform: skew(-4deg); }
.beaker::before { content: ""; position: absolute; top: -5px; right: -2px; left: -2px; border-top: 3px solid rgba(234,240,239,.62); }
.beaker::after { content: ""; position: absolute; right: 10px; left: 10px; bottom: 7px; height: 38%; border-radius: 3px 3px 13px 13px; background: #bfceb1; opacity: .8; }
.bottle { position: relative; width: 55px; height: 90px; border: 2px solid rgba(234,240,239,.35); border-radius: 11px 11px 8px 8px; background: rgba(234,240,239,.06); }
.bottle::before { content: ""; position: absolute; width: 28px; height: 24px; top: -19px; right: 12px; border: 2px solid rgba(234,240,239,.35); border-bottom: 0; border-radius: 7px 7px 0 0; }
.bottle::after { content: ""; position: absolute; right: 7px; left: 7px; bottom: 6px; height: 45%; border-radius: 5px; background: var(--teal); opacity: .7; }
.bench-note { color: rgba(234,240,239,.48); font: 9px/1.5 ui-monospace, monospace; direction: ltr; }

.observation-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }
.result-card { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(25,42,51,.68); }
.result-card h3 { margin: 0 0 11px; font-size: 13px; }
.result-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.result-card strong { color: var(--mist); }
.result-card.accent { border-color: rgba(57,183,165,.35); background: rgba(57,183,165,.08); }
.result-card.warning { border-color: rgba(231,181,106,.28); background: rgba(231,181,106,.06); }
.result-card.full { grid-column: 1/-1; }
.result-tag { display: inline-flex; padding: 4px 7px; margin-bottom: 9px; border-radius: 6px; color: var(--teal); background: rgba(57,183,165,.1); font-size: 10px; }

.details-panel { margin-top: 15px; padding: 25px; border: 1px solid rgba(130,216,208,.16); border-radius: 18px; background: #14252d; }
.details-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
.details-panel h3 { margin: 0 0 12px; font-size: 14px; }
.details-panel p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.equation-box { margin: 10px 0; padding: 14px; border-right: 2px solid var(--teal); border-radius: 8px; background: rgba(0,0,0,.18); color: var(--mist); direction: ltr; text-align: left; font: 500 13px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-x: auto; }
.note-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.note-list li { position: relative; padding-right: 17px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.note-list li::before { content: ""; position: absolute; right: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--warm); }

.study-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.study-search { flex: 1 1 250px; position: relative; }
.study-search input { padding-right: 38px; color: var(--navy); border-color: rgba(16,28,36,.14); background: #fff; }
.study-search::before { content: "⌕"; position: absolute; right: 13px; top: 6px; color: var(--teal-dark); font-size: 22px; z-index: 1; }
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { border: 1px solid rgba(16,28,36,.14); border-radius: 999px; padding: 8px 12px; color: #52666b; background: transparent; font-size: 11px; }
.filter-chip.active, .filter-chip:hover { color: var(--navy); border-color: var(--teal); background: rgba(57,183,165,.14); }
.study-layout { display: grid; grid-template-columns: 310px 1fr; gap: 18px; }
.reaction-list { display: grid; align-content: start; gap: 8px; }
.reaction-list-item { width: 100%; padding: 15px; border: 1px solid rgba(16,28,36,.12); border-radius: 12px; color: var(--navy); background: rgba(255,255,255,.6); text-align: right; transition: .2s ease; }
.reaction-list-item:hover, .reaction-list-item.active { border-color: var(--teal); transform: translateX(-2px); background: #fff; box-shadow: 0 8px 20px rgba(16,28,36,.08); }
.reaction-list-item strong { display: block; font-size: 13px; }
.reaction-list-item span { color: #718287; font-size: 11px; }
.study-content { min-width: 0; padding: 25px; border: 1px solid rgba(16,28,36,.1); border-radius: 16px; background: #fff; }
.study-content h3 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.04em; }
.study-content .study-subtitle { color: #6f8083; font-size: 12px; }
.study-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.fact { padding: 13px; border-top: 2px solid var(--teal); background: #f1f5f4; }
.fact span { display: block; color: #738488; font-size: 10px; }
.fact strong { display: block; margin-top: 4px; color: var(--navy); font-size: 13px; }
.study-block { margin-top: 20px; }
.study-block h4 { margin: 0 0 8px; font-size: 13px; }
.study-block p { margin: 0; color: #53666b; font-size: 13px; line-height: 1.9; }
.study-block .equation-box { color: var(--navy); background: #f1f5f4; border-right-color: var(--teal-dark); }
.study-toggle { margin-top: 18px; color: var(--teal-dark); border: 0; border-bottom: 1px solid currentColor; background: none; padding: 0 0 3px; font-size: 12px; font-weight: 700; }
.hidden-answer { display: none; }
.hidden-answer.visible { display: block; }
.quick-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.color-card { padding: 12px; border: 1px solid #d8e0de; border-radius: 10px; background: #f8fbfa; }
.color-swatch { width: 100%; height: 28px; margin-bottom: 9px; border-radius: 6px; background: var(--swatch); border: 1px solid rgba(16,28,36,.08); }
.color-card strong { display: block; font: 600 11px ui-monospace, monospace; direction: ltr; }
.color-card span { color: #6f8083; font-size: 10px; }

.unknown-layout, .exam-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 15px; }
.sample-card, .exam-card { padding: 28px; border-radius: 20px; background: var(--paper); color: var(--navy); box-shadow: var(--shadow); }
.sample-card h2, .exam-card h2 { margin: 0 0 7px; font-size: 28px; letter-spacing: -.05em; }
.sample-card > p, .exam-card > p { color: #607276; font-size: 13px; line-height: 1.85; }
.sample-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 22px; }
.sample-pill { padding: 7px 10px; border-radius: 999px; color: var(--teal-dark); background: rgba(57,183,165,.13); font-size: 11px; }
.test-choice-grid { display: grid; gap: 9px; }
.test-choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid #d7e0dd; border-radius: 12px; color: var(--navy); background: #fff; text-align: right; transition: .2s ease; }
.test-choice:hover { border-color: var(--teal); transform: translateX(-2px); }
.test-choice[disabled] { cursor: default; opacity: .65; transform: none; }
.test-choice strong { display: block; font-size: 12px; }
.test-choice span { color: #718287; font-size: 10px; }
.test-result { margin-top: 16px; padding: 16px; border-radius: 12px; background: #eff6f3; border-right: 3px solid var(--teal); }
.test-result h3 { margin: 0 0 5px; font-size: 13px; }
.test-result p { margin: 0; color: #5b6d71; font-size: 12px; line-height: 1.8; }
.evidence-panel { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(25,42,51,.7); }
.evidence-panel h3 { margin: 0 0 12px; font-size: 14px; }
.evidence-meter { display: flex; gap: 5px; margin: 16px 0 22px; }
.evidence-step { height: 6px; flex: 1; border-radius: 99px; background: rgba(234,240,239,.13); }
.evidence-step.on { background: var(--teal); }
.evidence-list { display: grid; gap: 9px; }
.evidence-item { padding: 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.evidence-item strong { display: block; color: var(--mist); margin-bottom: 3px; }
.final-inference { margin-top: 17px; padding: 15px; border-radius: 10px; background: rgba(57,183,165,.1); border: 1px solid rgba(57,183,165,.3); color: var(--mist); font-size: 12px; line-height: 1.8; }

.exam-card { min-height: 390px; }
.exam-progress { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; color: #6b7e82; font-size: 11px; }
.exam-progress-bar { height: 5px; flex: 1; border-radius: 99px; background: #d9e3e0; overflow: hidden; }
.exam-progress-bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .3s ease; }
.exam-question { margin-bottom: 23px; font-size: 20px; line-height: 1.6; letter-spacing: -.03em; }
.answers { display: grid; gap: 8px; }
.answer-option { padding: 13px 15px; border: 1px solid #d6dfdc; border-radius: 10px; color: var(--navy); background: #fff; text-align: right; font-size: 12px; transition: .2s ease; }
.answer-option:hover { border-color: var(--teal); background: #f5fbf9; }
.answer-option.correct { border-color: #54a991; background: #e9f7f2; }
.answer-option.wrong { border-color: var(--red); background: #fff0ee; }
.answer-option[disabled] { cursor: default; }
.answer-explain { margin-top: 17px; padding: 13px 15px; border-radius: 10px; background: #f1f5f4; color: #5b6b6f; font-size: 12px; line-height: 1.8; }
.exam-side { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(25,42,51,.72); }
.exam-side h3 { margin: 0 0 10px; font-size: 14px; }
.exam-side p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.exam-stat { display: flex; align-items: end; gap: 8px; margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.exam-stat strong { color: var(--teal); font-size: 32px; line-height: 1; }
.exam-stat span { color: var(--muted); font-size: 11px; }

.safety-banner { display: flex; align-items: start; gap: 13px; margin-top: 18px; padding: 15px 17px; border: 1px solid rgba(231,181,106,.28); border-radius: 13px; background: rgba(231,181,106,.07); color: #ead1a9; }
.safety-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid rgba(231,181,106,.45); border-radius: 50%; color: var(--warm); font-weight: 700; }
.safety-banner strong { display: block; margin-bottom: 3px; font-size: 12px; }
.safety-banner span { color: #bca98b; font-size: 11px; line-height: 1.7; }
.empty-state { padding: 28px 15px; text-align: center; color: #738488; font-size: 12px; }
.footer { padding: 25px 0 35px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.footer strong { color: var(--mist); }

@keyframes bubbles { 0% { transform: translateY(18px) scale(.7); } 45% { opacity: .85; } 100% { transform: translateY(-90px) scale(1.15); opacity: 0; } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-5px) rotate(45deg); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(42px) rotate(45deg); } }
@keyframes settle { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(0deg) translateY(-4px); } }
@keyframes liquidPulse { from { filter: brightness(1); } to { filter: brightness(1.13); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 920px) {
  .header-note { display: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .hero-copy { padding-top: 28px; }
  .lab-preview { min-height: 390px; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-controls { position: static; }
  .control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .control-group { margin-top: 10px; }
  .control-group:first-child { margin-top: 0; }
  .unknown-layout, .exam-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 26px, 1180px); }
  .topbar-inner { min-height: 64px; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
  .brand-copy span { display: none; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .main-nav { order: 3; flex: 1 0 calc(100% + 26px); width: calc(100% + 26px); max-width: none; margin-inline: -13px; padding: 7px 13px 9px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-top: 1px solid var(--line); gap: 5px; scroll-snap-type: x proximity; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; font-size: 12px; border: 1px solid transparent; scroll-snap-align: start; }
  .nav-link.active { border-color: rgba(57,183,165,.24); box-shadow: inset 0 -2px var(--teal), 0 4px 14px rgba(0,0,0,.08); }
  .header-tools { margin-inline-start: auto; }
  .theme-toggle { min-height: 36px; }
  .page { padding-top: 31px; }
  .hero h1 { font-size: clamp(39px, 12vw, 57px); }
  .lead { font-size: 15px; }
  .hero-meta { gap: 14px; }
  .meta-item strong { font-size: 16px; }
  .lab-preview { min-height: 330px; border-radius: 20px; }
  .preview-tube { height: 185px; width: 68px; bottom: 80px; }
  .preview-beaker { right: 14%; bottom: 89px; width: 90px; height: 72px; }
  .preview-label { right: 17px; bottom: 15px; }
  .preview-grid { inset: 69px 22px 61px; background-size: 27px 27px; }
  .feature-strip { grid-template-columns: 1fr; margin-top: 35px; }
  .section-head { display: block; }
  .section-head p { margin-top: 10px; }
  .paper { padding: 19px; border-radius: 18px; }
  .lab-bench { min-height: 440px; }
  .tube-stage { right: 17%; left: 17%; top: 74px; bottom: 64px; }
  .test-tube { width: 98px; height: 252px; }
  .dropper { right: 55%; transform: scale(.84) rotate(18deg); }
  .reaction-running .dropper { right: 40%; }
  .reaction-done .dropper { right: 55%; }
  .bench-tools { right: 7%; left: 7%; bottom: 26px; }
  .beaker { width: 73px; height: 58px; }
  .bottle { width: 43px; height: 68px; }
  .bottle::before { right: 8px; width: 24px; }
  .bench-note { font-size: 8px; max-width: 95px; }
  .observation-panel, .details-grid { grid-template-columns: 1fr; }
  .result-card.full { grid-column: auto; }
  .details-panel { padding: 18px; }
  .study-layout { grid-template-columns: 1fr; }
  .reaction-list { grid-template-columns: repeat(2, 1fr); }
  .study-content { padding: 18px; }
  .study-facts { grid-template-columns: 1fr 1fr; }
  .study-facts .fact:last-child { grid-column: 1/-1; }
  .quick-colors { grid-template-columns: 1fr 1fr; }
  .footer-inner { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Scientific effect layers: each one maps to a recorded observation, not a generic flourish. */
.effect-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.vapor-plume, .white-cloud, .brown-ring, .heat-glow { position: absolute; opacity: 0; pointer-events: none; }
.vapor-plume { right: 34%; top: 115px; width: 120px; height: 170px; border-radius: 48% 52% 40% 55%; background: radial-gradient(ellipse at 50% 75%, var(--vapor-color), transparent 63%); filter: blur(10px); transform: translateY(22px) scale(.75); }
.effect-brown-vapor .vapor-plume, .effect-colored-vapor .vapor-plume { opacity: 0; }
.reaction-done.effect-brown-vapor .vapor-plume, .reaction-done.effect-colored-vapor .vapor-plume { opacity: .72; animation: vaporRise 3s ease-out both; }
.effect-white-cloud .white-cloud { right: 35%; top: 93px; width: 160px; height: 75px; border-radius: 50%; background: radial-gradient(circle at 20% 50%, rgba(245,248,235,.88) 0 18%, transparent 40%), radial-gradient(circle at 56% 32%, rgba(245,248,235,.78) 0 22%, transparent 43%), radial-gradient(circle at 80% 62%, rgba(245,248,235,.72) 0 16%, transparent 40%); filter: blur(4px); }
.reaction-done.effect-white-cloud.followup-done .white-cloud { opacity: .9; animation: cloudForm 1.5s ease-out both; }
.brown-ring { right: calc(50% - 47px); top: 276px; width: 94px; height: 13px; border: 3px solid var(--ring-color); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; box-shadow: 0 0 12px rgba(139,78,49,.4); }
.reaction-done.effect-brown-ring .brown-ring { opacity: .95; animation: ringPulse 1.8s ease-in-out both; }
.heat-glow { right: calc(50% - 100px); bottom: 70px; width: 200px; height: 100px; border-radius: 50%; background: radial-gradient(ellipse, rgba(231,181,106,.48), transparent 68%); filter: blur(8px); }
.followup-done.effect-heat-transform .heat-glow { opacity: .8; animation: heatGlow 1.3s ease-out both; }
.effect-heat-transform.followup-done .precipitate { background: #242c2a; box-shadow: inset 0 5px 10px rgba(255,255,255,.08); }
.effect-air-oxidation.followup-done .precipitate { background: #9f4d2d; }
.effect-air-oxidation.followup-done .precipitate::after { opacity: .34; animation: oxidize 2.4s ease-in both; }
.effect-dissolve.followup-done .precipitate { height: 3%; opacity: .14; filter: blur(4px); }
.effect-gas-precipitate.reaction-done .precipitate { animation: sulfurSettle 1.8s ease-out both; }
.warm-action { color: var(--navy); background: var(--warm); border-color: transparent; }
.warm-action:hover { background: #f0c77e; }
.warm-action:disabled { cursor: default; opacity: .58; transform: none; }
.burner { position: relative; width: 58px; height: 43px; border: 2px solid rgba(234,240,239,.4); border-radius: 9px 9px 16px 16px; background: rgba(234,240,239,.06); }
.burner::before { content: ""; position: absolute; right: 12px; left: 12px; top: -8px; height: 8px; border: 2px solid rgba(234,240,239,.35); border-bottom: 0; border-radius: 8px 8px 0 0; }
.burner i { position: absolute; right: 20px; bottom: 7px; width: 15px; height: 22px; border-radius: 50% 50% 45% 45%; background: var(--warm); filter: blur(1px); transform: rotate(8deg); opacity: .42; }
.followup-done .burner i { opacity: .95; animation: flame 1s ease-in-out infinite alternate; }
@keyframes vaporRise { 0% { transform: translateY(28px) scale(.6); filter: blur(12px); } 35% { opacity: .78; } 100% { transform: translateY(-64px) scale(1.18); filter: blur(8px); opacity: 0; } }
@keyframes cloudForm { 0% { transform: translateX(15px) scale(.45); filter: blur(11px); } 55% { opacity: .85; } 100% { transform: translateX(0) scale(1); filter: blur(4px); } }
@keyframes ringPulse { 0% { transform: scaleX(.1); opacity: 0; } 55% { transform: scaleX(1.12); opacity: 1; } 100% { transform: scaleX(1); opacity: .95; } }
@keyframes heatGlow { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: .8; } }
@keyframes oxidize { from { filter: hue-rotate(-35deg) saturate(.7); } to { filter: hue-rotate(0) saturate(1); } }
@keyframes sulfurSettle { from { transform: translateY(-7px); opacity: .42; } to { transform: translateY(0); opacity: .94; } }
@keyframes flame { from { transform: rotate(8deg) scale(.9); } to { transform: rotate(-7deg) scale(1.08); } }


/* 3TH Lab scene refinement — crafted glass, readable chemistry and held results. */
.lab-bench {
  isolation: isolate;
  perspective: 1200px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(77, 139, 143, .12), transparent 42%),
    linear-gradient(145deg, #29444d 0%, #1b3038 48%, #101e25 100%);
}
.lab-bench::before {
  opacity: .45;
  transform: perspective(800px) rotateX(3deg) scale(1.04);
  transform-origin: center top;
}
.lab-bench::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 12, 16, .27));
}
.bench-topline { z-index: 5; letter-spacing: .12em; }
.tube-stage {
  perspective: 980px;
  transform-style: preserve-3d;
}
.tube-stage::before {
  content: "";
  position: absolute;
  bottom: 4%;
  width: min(330px, 74%);
  height: 54px;
  border: 1px solid rgba(163, 212, 207, .1);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(119, 185, 180, .12), rgba(7, 16, 21, .18) 68%, transparent 70%);
  transform: rotateX(68deg) translateZ(-12px);
  box-shadow: 0 22px 34px rgba(0, 0, 0, .18);
}
.test-tube {
  width: 132px;
  height: 326px;
  overflow: visible;
  isolation: isolate;
  transform: rotateY(-11deg) rotateZ(-1.5deg);
  transform-style: preserve-3d;
  border: 2px solid rgba(232, 248, 244, .55);
  border-top: 8px solid rgba(238, 250, 247, .7);
  border-radius: 17px 17px 58px 58px;
  background: linear-gradient(90deg,
    rgba(224, 247, 242, .2) 0%,
    rgba(224, 247, 242, .045) 17%,
    rgba(5, 19, 24, .09) 48%,
    rgba(226, 247, 242, .15) 78%,
    rgba(226, 247, 242, .04) 100%);
  box-shadow:
    inset 8px 0 14px rgba(247, 255, 252, .075),
    inset -8px 0 12px rgba(2, 16, 21, .24),
    16px 20px 30px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(187, 227, 222, .08);
  transition: transform .75s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}
.test-tube::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 13px;
  bottom: 27px;
  left: 10px;
  width: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(240,255,251,.12) 38%, transparent 91%);
  filter: blur(1px);
}
.test-tube::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 15px;
  border-radius: 50%;
  border-bottom: 2px solid rgba(240,255,251,.38);
  pointer-events: none;
}
.tube-rim {
  z-index: 6;
  inset: -9px -4px auto;
  height: 12px;
  border: 1px solid rgba(246, 255, 252, .55);
  background: linear-gradient(180deg, rgba(255,255,255,.27), rgba(148,194,190,.09));
  box-shadow: 0 4px 8px rgba(1, 9, 12, .17), inset 0 1px 2px rgba(255,255,255,.34);
}
.tube-liquid {
  right: 8px;
  left: 8px;
  bottom: 9px;
  height: 44%;
  overflow: hidden;
  border-radius: 8px 8px 46px 46px;
  border: 1px solid rgba(238, 255, 249, .22);
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 35%, rgba(5,27,29,.12)), var(--solution-color, #b6d3ca);
  box-shadow: inset 0 7px 11px rgba(255,255,255,.14), inset 0 -17px 23px rgba(0,0,0,.17);
  transition: background .65s ease, height .7s ease, filter .7s ease;
}
.meniscus {
  position: absolute;
  z-index: 4;
  top: 3px;
  right: 3px;
  left: 3px;
  height: 7px;
  border-top: 1px solid rgba(243,255,252,.55);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(237,255,250,.17), transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,.09);
}
.precipitate {
  right: 8px;
  left: 8px;
  bottom: 4px;
  height: 0;
  overflow: hidden;
  border-radius: 12px 12px 42px 42px;
  background:
    radial-gradient(ellipse at 54% 9%, rgba(255,255,255,.38), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--precipitate-color, #f3f3ed) 76%, transparent), var(--precipitate-color, #f3f3ed) 36%, color-mix(in srgb, var(--precipitate-color, #f3f3ed) 78%, #3d4844));
  box-shadow: inset 0 3px 8px rgba(255,255,255,.18), 0 -2px 8px color-mix(in srgb, var(--precipitate-color, #f3f3ed) 24%, transparent);
  opacity: 0;
  transition: height 1.05s cubic-bezier(.22,.9,.3,1), opacity .45s ease, background .8s ease, filter .7s ease;
}
.reaction-done .precipitate { height: 29%; opacity: .98; }
.precipitate::after {
  opacity: .19;
  background-image:
    radial-gradient(circle at 25% 28%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 63% 61%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.75) 0 1px, transparent 1.8px);
  background-size: 17px 16px, 24px 21px, 27px 23px;
}
.solid-grains { position: absolute; inset: 0; display: block; pointer-events: none; }
.solid-grains i {
  position: absolute;
  bottom: 7%;
  width: 9px;
  height: 7px;
  border-radius: 48% 58% 42% 55%;
  opacity: 0;
  background: color-mix(in srgb, var(--precipitate-color, #f3f3ed) 74%, white);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.55), 1px 2px 2px rgba(13,25,23,.18);
  transform: translateY(-26px) scale(.35) rotate(-10deg);
  transition: transform .9s cubic-bezier(.17,.8,.25,1), opacity .5s ease;
}
.solid-grains i:nth-child(1) { left: 8%; width: 11px; height: 8px; transition-delay: .05s; }
.solid-grains i:nth-child(2) { left: 22%; width: 7px; height: 6px; transition-delay: .12s; }
.solid-grains i:nth-child(3) { left: 35%; width: 10px; height: 8px; transition-delay: .2s; }
.solid-grains i:nth-child(4) { left: 48%; width: 6px; height: 5px; transition-delay: .16s; }
.solid-grains i:nth-child(5) { left: 58%; width: 12px; height: 9px; transition-delay: .26s; }
.solid-grains i:nth-child(6) { left: 73%; width: 8px; height: 6px; transition-delay: .31s; }
.solid-grains i:nth-child(7) { left: 85%; width: 10px; height: 7px; transition-delay: .22s; }
.solid-grains i:nth-child(8) { left: 28%; bottom: 25%; width: 6px; height: 5px; transition-delay: .34s; }
.solid-grains i:nth-child(9) { left: 67%; bottom: 19%; width: 5px; height: 4px; transition-delay: .28s; }
.reaction-done .solid-grains i { opacity: .68; transform: translateY(0) scale(1) rotate(0); }
.effect-precipitate .precipitate { height: 24%; border-radius: 20% 25% 44px 44px; }
.effect-precipitate.reaction-done .precipitate { height: 25%; }
.effect-gas-precipitate .precipitate {
  background:
    radial-gradient(ellipse at 48% 20%, rgba(255,245,178,.9), transparent 45%),
    radial-gradient(ellipse at 50% 72%, #c8a72f, #e5c447 56%, #a9881f 100%);
  filter: saturate(1.05);
}
.effect-gas-precipitate.reaction-done .precipitate { height: 36%; }
.effect-gas-precipitate .solid-grains i { background: #f6dc6b; box-shadow: 0 0 5px rgba(240,204,69,.2); }
.effect-dissolve .precipitate {
  background: radial-gradient(ellipse at 50% 30%, rgba(252,255,243,.92), rgba(231,234,220,.74) 48%, rgba(198,210,198,.1) 78%, transparent 100%);
  filter: blur(.2px);
}
.effect-dissolve.reaction-done .precipitate { height: 22%; }
.effect-dissolve.reaction-done .solid-grains i { opacity: .42; transform: translateY(-2px) scale(.8); }
.effect-heat-transform.followup-done .precipitate { background: linear-gradient(180deg, #333c3a, #171d1c 68%, #0c1111); }
.effect-air-oxidation.followup-done .precipitate { background: linear-gradient(180deg, #b66542, #9f4d2d 68%, #693b2d); }
.effect-light-darkening.followup-done .precipitate { background: linear-gradient(180deg, #7b686d, #454145 68%, #252426); filter: saturate(.72); }
.bubbles {
  right: 30px;
  bottom: 75px;
  z-index: 2;
  width: 7px;
  height: 7px;
  background: rgba(247,255,252,.82);
  box-shadow: 22px 22px 0 -1px rgba(247,255,252,.72), -12px 39px 0 -2px rgba(247,255,252,.8), 13px 64px 0 -2px rgba(247,255,252,.68);
}
.reaction-running .bubbles { opacity: .85; animation: bubbles 1.1s infinite ease-in; }
.reaction-done .bubbles { opacity: .37; animation: none; transform: translateY(0) scale(.85); }
.gas-particles {
  position: absolute;
  z-index: 3;
  right: 17px;
  left: 17px;
  bottom: 52%;
  height: 74px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
}
.gas-particles i {
  position: absolute;
  display: block;
  bottom: 4px;
  width: 24px;
  height: 35px;
  border: 0;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--vapor-color, #e8f2ee) 34%, transparent), transparent 72%);
  filter: blur(5px);
  box-shadow: none;
}
.gas-particles i:nth-child(1) { left: 14%; bottom: 17px; width: 20px; height: 34px; }
.gas-particles i:nth-child(2) { left: 31%; bottom: 39px; width: 31px; height: 44px; }
.gas-particles i:nth-child(3) { left: 48%; bottom: 13px; width: 18px; height: 29px; }
.gas-particles i:nth-child(4) { left: 62%; bottom: 51px; width: 27px; height: 38px; }
.gas-particles i:nth-child(5) { left: 75%; bottom: 29px; width: 21px; height: 31px; }
.gas-particles i:nth-child(6) { left: 86%; bottom: 55px; width: 23px; height: 36px; }
.gas-particles i:nth-child(7) { left: 22%; bottom: 61px; width: 18px; height: 29px; }
.reaction-done.effect-gas .gas-particles,
.reaction-done.effect-gas-precipitate .gas-particles { opacity: .82; }
.reaction-running.effect-gas .gas-particles,
.reaction-running.effect-gas-precipitate .gas-particles { opacity: .72; }
.reaction-done.effect-gas .gas-particles i,
.reaction-done.effect-gas-precipitate .gas-particles i { animation: gasDrift 4.8s ease-in-out infinite alternate; }
.reaction-done.effect-gas .gas-particles i:nth-child(2n),
.reaction-done.effect-gas-precipitate .gas-particles i:nth-child(2n) { animation-delay: -1.7s; }
.glass-glint {
  position: absolute;
  z-index: 7;
  top: 28px;
  right: 8px;
  width: 4px;
  height: 56%;
  border-radius: 9px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(225,250,246,.19) 58%, transparent);
  filter: blur(.5px);
  opacity: .68;
}
.tube-shadow { width: 235px; height: 28px; filter: blur(10px); background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 70%); }
.dropper-body { box-shadow: inset 5px 0 9px rgba(255,255,255,.1), inset -4px 0 9px rgba(3,22,27,.12); }
.dropper-tip { background: linear-gradient(180deg, rgba(238,255,251,.24), rgba(130,216,208,.24)); }
.drop { box-shadow: 0 0 10px rgba(231,181,106,.45); }
.beaker {
  border-color: rgba(229,248,243,.48);
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 38%, rgba(230,255,249,.1));
  box-shadow: inset 8px 0 12px rgba(255,255,255,.04), 6px 8px 14px rgba(0,0,0,.13);
}
.beaker::after { background: linear-gradient(90deg, rgba(255,255,255,.15), transparent 30%), linear-gradient(180deg, #c9d9bd, #819c7f); box-shadow: inset 0 3px 5px rgba(255,255,255,.25); }
.bottle { box-shadow: inset 6px 0 9px rgba(255,255,255,.06), 5px 8px 14px rgba(0,0,0,.12); }
.burner { box-shadow: inset 0 3px 8px rgba(255,255,255,.04); }
.scene-angle {
  position: absolute;
  z-index: 7;
  top: 49px;
  left: 21px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(157, 213, 206, .25);
  border-radius: 999px;
  color: rgba(225, 245, 241, .83);
  background: rgba(9, 22, 28, .44);
  backdrop-filter: blur(8px);
  font-size: 10px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.scene-angle:hover { color: #fff; border-color: rgba(130,216,208,.6); background: rgba(57,183,165,.15); transform: translateY(-1px); }
.scene-angle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.view-side .test-tube { transform: rotateY(17deg) rotateZ(2deg) translateX(-4px); filter: drop-shadow(-9px 10px 9px rgba(0,0,0,.13)); }
.view-side .tube-shadow { transform: translateX(-8px) scaleX(.86); }
.view-side .dropper { transform: rotate(21deg) translateX(-3px); }
.scene-footnote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding: 1px 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}
.scene-footnote > span:first-child { display: flex; align-items: center; gap: 9px; }
.scene-footnote .status-dot { width: 6px; height: 6px; flex: 0 0 auto; }
.scene-footnote > span:last-child { color: rgba(168,184,188,.62); font: 9px/1.2 ui-monospace, monospace; direction: ltr; white-space: nowrap; }
.lab-controls { box-shadow: 0 12px 32px rgba(2,11,15,.15); }
.lab-controls select:hover, input:hover { border-color: rgba(130,216,208,.42); }
.lab-controls select:focus-visible, .study-search input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn:disabled { cursor: wait; opacity: .7; transform: none; }
.control-actions .btn { min-width: 0; }
.result-card { transition: border-color .25s ease, background .25s ease; }
.result-card.accent { box-shadow: inset 3px 0 0 rgba(57,183,165,.55); }
.result-tag { letter-spacing: .01em; }
.nav-link { position: relative; }
.nav-link.active::after { content: ""; position: absolute; right: 12px; left: 12px; bottom: 4px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); }
.feature-item { position: relative; overflow: hidden; transition: transform .24s ease, background .24s ease, border-color .24s ease; }
.feature-item:hover { transform: translateY(-3px); border-color: rgba(130,216,208,.35); background: rgba(25,42,51,.82); }
.feature-index { letter-spacing: .09em; }
.paper { box-shadow: 0 24px 60px rgba(1,9,12,.2), inset 0 1px rgba(255,255,255,.72); }
.filter-chip { transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.filter-chip:hover { transform: translateY(-1px); }
.exam-card, .sample-card { box-shadow: 0 24px 58px rgba(2,10,13,.23), inset 0 1px rgba(255,255,255,.7); }
@keyframes gasDrift { from { transform: translateY(0) scale(.97); } to { transform: translateY(-3px) scale(1.04); } }
@keyframes cloudHold {
  0% { opacity: 0; transform: translateX(12px) scale(.48); filter: blur(10px); }
  62% { opacity: .83; transform: translateX(1px) scale(1.02); filter: blur(4px); }
  100% { opacity: .74; transform: translateX(0) scale(1); filter: blur(4px); }
}
@keyframes vaporHold {
  0% { opacity: 0; transform: translateY(17px) scale(.62); filter: blur(12px); }
  58% { opacity: .63; transform: translateY(-17px) scale(1.08); filter: blur(8px); }
  100% { opacity: .29; transform: translateY(-21px) scale(1.12); filter: blur(9px); }
}
.reaction-done.effect-brown-vapor .vapor-plume,
.reaction-done.effect-colored-vapor .vapor-plume { opacity: .29; animation: vaporHold 1.7s cubic-bezier(.2,.75,.2,1) both; }
.reaction-done.effect-white-cloud.followup-done .white-cloud { opacity: .74; animation: cloudHold 1.35s cubic-bezier(.2,.75,.2,1) both; }
.reaction-running.effect-brown-vapor .vapor-plume,
.reaction-running.effect-colored-vapor .vapor-plume { opacity: .45; animation: vaporHold 1.1s ease-out infinite alternate; }
.reaction-running.effect-white-cloud.followup-done .white-cloud { opacity: .6; animation: cloudHold 1s ease-out infinite alternate; }
.effect-brown-vapor .vapor-plume { background: radial-gradient(ellipse at 50% 75%, color-mix(in srgb, var(--vapor-color) 82%, transparent), transparent 68%); }
.effect-colored-vapor .vapor-plume { background: radial-gradient(ellipse at 50% 75%, color-mix(in srgb, var(--vapor-color) 88%, transparent), transparent 67%); }
.effect-white-cloud .white-cloud { background: radial-gradient(circle at 20% 50%, rgba(250,252,244,.9) 0 18%, transparent 42%), radial-gradient(circle at 56% 32%, rgba(248,250,242,.83) 0 22%, transparent 45%), radial-gradient(circle at 80% 62%, rgba(245,248,238,.78) 0 16%, transparent 42%); }
@media (max-width: 700px) {
  .test-tube { width: 100px; height: 256px; transform: rotateY(-10deg) rotateZ(-1.5deg); }
  .view-side .test-tube { transform: rotateY(15deg) rotateZ(2deg) translateX(-3px); }
  .tube-stage::before { width: 82%; height: 42px; }
  .scene-angle { top: 47px; left: 12px; min-height: 29px; padding: 0 8px; font-size: 9px; }
  .scene-footnote { align-items: flex-start; font-size: 9px; }
  .scene-footnote > span:last-child { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-done.effect-gas .gas-particles i,
  .reaction-done.effect-gas-precipitate .gas-particles i { animation: none; }
}


/* مشهد WebGL الخاص بالمعمل — يبقى نموذج CSS بديلًا عند غياب دعم WebGL. */
.three-scene-host { position: absolute; inset: 70px 8% 56px; z-index: 3; overflow: hidden; border-radius: 20px; outline: none; touch-action: none; cursor: grab; }
.three-scene-host:focus-visible { box-shadow: 0 0 0 2px var(--teal); }
.lab-webgl-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: grab; }
.lab-webgl-canvas.is-dragging, .lab-webgl-canvas:active { cursor: grabbing; }
.lab-bench.webgl-ready .tube-stage,
.lab-bench.webgl-ready .bench-tools,
.lab-bench.webgl-ready .effect-layer { visibility: hidden; opacity: 0; transition: opacity .22s ease; }
.scene-instructions { position: absolute; right: 22px; bottom: 15px; z-index: 5; max-width: 78%; padding: 7px 10px; border: 1px solid rgba(130,216,208,.16); border-radius: 999px; background: rgba(13,27,34,.66); color: rgba(234,240,239,.68); font-size: 10px; line-height: 1.5; pointer-events: none; }
.scene-instructions::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--teal); vertical-align: 1px; }
.dose-group { gap: 9px; }
.dose-slider { width: 100%; accent-color: var(--teal); direction: ltr; cursor: pointer; }
.dose-slider:disabled { opacity: .45; cursor: not-allowed; }
.dose-caption { display: grid; gap: 3px; }
.dose-caption output { color: var(--mist); font-size: 11px; font-weight: 600; }
.dose-caption small { color: var(--muted); font-size: 10px; line-height: 1.55; }
@media (max-width: 700px) {
  .three-scene-host { inset: 66px 2% 62px; }
  .scene-instructions { right: 12px; bottom: 12px; max-width: 86%; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-bench.webgl-ready .tube-stage,
  .lab-bench.webgl-ready .bench-tools,
  .lab-bench.webgl-ready .effect-layer { transition: none; }
}

/* طبقة تحسينات الجولة: وضوح بصري، حركة هادئة، ومساحات قراءة أفضل */
.page { animation: pageEnter .48s cubic-bezier(.2,.75,.25,1) both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.nav-link, .filter-chip, .reaction-list-item, .answer-option, .test-choice { transition: transform .2s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease; }
.answer-option:hover:not(:disabled), .test-choice:hover:not(:disabled), .reaction-list-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(2,10,13,.13); }
.exam-progress-bar span { transition: width .5s cubic-bezier(.2,.75,.25,1); }
.equation-guide { margin-top: 14px; padding: 15px 17px; border: 1px solid rgba(32,141,128,.2); border-right: 3px solid var(--teal-dark); border-radius: 12px; background: rgba(57,183,165,.07); color: #28454a; }
.equation-guide strong { display:block; margin-bottom: 7px; color: #176f67; font-size: 13px; }
.equation-guide p { margin: 5px 0 0; font-size: 12px; line-height: 1.8; }
.exam-summary { max-height: none; }
.score-ring { display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto 16px; border: 7px solid rgba(57,183,165,.3); border-top-color: var(--teal-dark); border-radius: 50%; background: rgba(57,183,165,.08); text-align: center; animation: scoreReveal .7s ease-out both; }
.score-ring strong { color: var(--navy); font-size: 30px; line-height: 1; }
.score-ring small { font-size: 14px; color: var(--teal-dark); }
.score-ring span { color: #577074; font-size: 10px; }
@keyframes scoreReveal { from { opacity:0; transform: scale(.82) rotate(-12deg); } to { opacity:1; transform:scale(1) rotate(0); } }
.review-list { display: grid; gap: 10px; margin: 22px 0; }
.review-item { padding: 14px 16px; border: 1px solid rgba(16,28,36,.1); border-right: 4px solid #b45a55; border-radius: 12px; background: #fff; }
.review-item.review-correct { border-right-color: #238c7e; }
.review-item > div { display: grid; gap: 6px; }
.review-item span { color: #64807f; font-size: 10px; }
.review-item strong { color: var(--navy); font-size: 13px; line-height: 1.7; }
.review-item p { margin: 0; color: #455e60; font-size: 12px; }
.review-item small { color: #6c7b7b; font-size: 11px; line-height: 1.7; }
.review-item .btn { justify-self: start; color: #176f67; }
.exam-card h2 { text-align: center; }
.footer-inner { flex-wrap: wrap; }
.footer-inner span:last-child { color: var(--cyan); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 700px) {
  .equation-guide { padding: 12px; }
  .score-ring { width: 112px; height: 112px; }
  .review-item { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Structured learning, equation practice, and accessible topic-based assessment. */
.progress-overview { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(25,42,51,.78); color: var(--mist); }
.paper .progress-overview { border-color: #dce5e2; background: #f4f8f6; color: var(--navy); }
.progress-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-overview-head > div { display: grid; gap: 3px; }
.progress-overview-head strong { font-size: 15px; }
.progress-kicker { color: var(--muted); font-size: 10px; }
.paper .progress-kicker { color: #6f8083; }
.progress-percent { color: var(--teal); font-size: 22px; font-weight: 700; }
.progress-track { height: 7px; margin: 12px 0 10px; border-radius: 99px; background: rgba(128,148,148,.2); overflow: hidden; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #85d8d0); transition: width .5s ease; }
.progress-metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 10px; }
.paper .progress-metrics { color: #627579; }
.progress-metrics b { color: var(--teal); font-size: 12px; }
.paper .progress-metrics b { color: var(--teal-dark); }

.equation-workbench { padding: clamp(18px, 4vw, 34px); border-radius: 22px; background: var(--paper); color: var(--navy); box-shadow: var(--shadow); }
.equation-picker { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 12px; max-width: 560px; margin-bottom: 24px; }
.equation-picker label { color: #64777a; font-size: 12px; font-weight: 700; }
.equation-picker select { width: 100%; }
.equation-challenge { padding: clamp(16px, 3vw, 26px); border: 1px solid #dce5e1; border-radius: 17px; background: #fff; }
.challenge-title h2 { margin: 8px 0 5px; font-size: clamp(21px, 3vw, 30px); }
.challenge-title p { margin: 0 0 20px; color: #627579; font-size: 12px; line-height: 1.8; }
.equation-workbench .eyebrow { color: var(--teal-dark); }
.equation-workbench .eyebrow::before { background: var(--teal-dark); }
.balance-side { display: grid; gap: 8px; }
.balance-side h3 { margin: 0 0 3px; color: #607276; font-size: 11px; }
.balance-term { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 55px; padding: 9px 12px; border: 1px solid #e0e8e5; border-radius: 11px; background: #f8fbfa; }
.balance-term > span { display: flex; align-items: center; gap: 10px; color: #596e71; font-size: 12px; }
.balance-term bdi { color: var(--navy); font: 600 16px ui-monospace, monospace; }
.balance-term input { width: 66px; min-height: 38px; padding: 4px 8px; border: 1px solid #cfdad6; border-radius: 8px; color: var(--navy); background: white; text-align: center; font-weight: 700; }
.equation-arrow { padding: 11px 0; color: var(--teal-dark); text-align: center; font-size: 27px; }
.equation-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.equation-actions .btn.secondary { color: var(--navy); border-color: #cdd8d4; }
.balance-feedback { margin-top: 16px; padding: 15px; border: 1px solid #efc9c5; border-right: 4px solid #bd655a; border-radius: 11px; background: #fff5f3; }
.balance-feedback.balanced { border-color: #b9ded0; border-right-color: #39977d; background: #eff9f4; }
.balance-feedback > strong { display: block; font-size: 14px; }
.balance-feedback p { margin: 5px 0 12px; color: #5c6e70; font-size: 11px; line-height: 1.7; }
.atom-count-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; }
.atom-count-table > div { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid rgba(86,120,113,.15); border-radius: 8px; background: rgba(255,255,255,.75); color: #637578; font-size: 10px; }
.atom-count-table bdi, .atom-count-table b { color: var(--navy); font-weight: 700; }
.equation-steps { margin-top: 15px; padding: 16px 18px; border-radius: 11px; background: #eef5f3; color: var(--navy); }
.equation-steps > strong { font-size: 12px; }
.equation-steps ol { display: grid; gap: 7px; margin: 9px 0; padding-right: 20px; color: #53676a; font-size: 11px; line-height: 1.7; }
.equation-steps p { margin: 8px 0 0; color: #58706f; font-size: 11px; }
.concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.concept-grid article { min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: rgba(25,42,51,.72); }
.concept-grid article > span { color: var(--teal); font: 10px ui-monospace, monospace; }
.concept-grid h3 { margin: 12px 0 7px; font-size: 14px; }
.concept-grid p, .concept-grid small { color: var(--muted); font-size: 11px; line-height: 1.8; }
.concept-grid p { margin: 0 0 9px; }

.exam-setup { min-height: 0; }
.exam-setup h2 { margin-bottom: 20px; }
.exam-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.exam-topic-card { display: grid; gap: 5px; min-height: 72px; padding: 13px; border: 1px solid #d5dfdc; border-radius: 11px; color: var(--navy); background: white; text-align: right; transition: .2s ease; }
.exam-topic-card:hover, .exam-topic-card.selected { border-color: var(--teal-dark); background: #eff8f5; box-shadow: 0 0 0 2px rgba(57,183,165,.1); }
.exam-topic-card strong { font-size: 12px; }
.exam-topic-card span { color: #6e8082; font-size: 10px; }
.exam-setup-note { color: #647579; font-size: 11px; }
.exam-setup > .btn { margin-top: 7px; }
.skip-link { position: fixed; top: 8px; right: 8px; z-index: 100; padding: 10px 14px; border-radius: 8px; color: var(--navy); background: var(--mist); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.balance-term input:focus-visible, .exam-topic-card:focus-visible, .answer-option:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
@media (max-width: 700px) {
  .equation-workbench { padding: 16px; border-radius: 17px; }
  .equation-picker { grid-template-columns: 1fr; gap: 6px; }
  .balance-term { gap: 7px; padding: 8px; }
  .balance-term > span { gap: 6px; font-size: 10px; }
  .balance-term bdi { font-size: 14px; }
  .balance-term input { width: 56px; }
  .concept-grid { grid-template-columns: 1fr; }
  .exam-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-overview { padding: 15px; }
  .progress-metrics { display: grid; gap: 4px; }
}
.topic-breakdown { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.topic-breakdown h3 { margin: 0 0 9px; font-size: 12px; }
.topic-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.topic-result strong { font-size: 10px; }
.topic-strong { color: var(--teal); }
.topic-review { color: var(--warm); }

/* Legal and privacy center: readable, calm, and shared across every route. */
.footer-inner { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(280px, 2fr); gap: 14px 28px; align-items: start; }
.footer-brand { display: grid; gap: 5px; }
.footer-brand strong { color: var(--mist); font-size: 13px; }
.footer-brand span { color: var(--muted); font-size: 11px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.footer-legal a, .legal-back { color: var(--cyan); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .legal-back:hover { color: white; }
.footer-rights { grid-column: 1 / -1; color: var(--muted); line-height: 1.8; }
.legal-page { min-height: 65vh; }
.legal-heading { max-width: 850px; margin: 0 0 28px; }
.legal-heading .page-title { margin-top: 13px; }
.legal-heading p { max-width: 750px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.legal-heading time { display: block; margin-top: 14px; color: var(--cyan); font-size: 11px; }
.legal-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.legal-card { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(25,42,51,.72); transition: transform .2s ease, border-color .2s ease; }
.legal-card:hover { transform: translateY(-2px); border-color: rgba(130,216,208,.45); }
.legal-card > span { color: var(--cyan); font-size: 10px; }
.legal-card h2 { margin: 0; font-size: 20px; }
.legal-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.legal-card strong { color: var(--teal); font-size: 11px; }
.legal-document { max-width: 900px; margin: 0 auto; padding: clamp(22px,4vw,48px); border: 1px solid var(--line); border-radius: 22px; background: rgba(25,42,51,.62); }
.legal-document .legal-heading { margin-top: 19px; }
.legal-back { display: inline-block; }
.legal-sections { display: grid; gap: 0; }
.legal-section { padding: 19px 0; border-top: 1px solid var(--line); }
.legal-section h2 { margin: 0 0 9px; color: var(--mist); font-size: 16px; }
.legal-section p { margin: 0; color: #c3d0d0; font-size: 13px; line-height: 2; }
.legal-disclaimer { margin: 24px 0; padding: 13px 15px; border-right: 3px solid var(--warm); border-radius: 6px; background: rgba(231,181,106,.07); color: #d6c5a8; font-size: 11px; line-height: 1.9; }
.progress-erase { margin-top: 13px; padding: 7px 0; border: 0; background: transparent; color: #e5bb82; font: inherit; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.progress-erase:hover { color: #fff0d8; }
.progress-erase:focus-visible, .legal-card:focus-visible, .footer a:focus-visible, .legal-back:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 700px) {
  .footer-inner { display: grid; grid-template-columns: 1fr; gap: 13px; }
  .footer-rights { grid-column: auto; }
  .legal-card-grid { grid-template-columns: 1fr; }
  .legal-document { padding: 21px 17px; border-radius: 16px; }
}

/* Clear learner-first route on the landing page */
.learning-route { display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.8fr); gap: 24px; align-items: center; margin: 34px 0 18px; padding: clamp(20px,3vw,32px); border: 1px solid rgba(130,216,208,.18); border-radius: 20px; background: linear-gradient(125deg,rgba(30,63,68,.66),rgba(20,35,43,.72)); }
.route-heading h2 { margin: 10px 0 8px; color: var(--mist); font-size: clamp(20px,2vw,28px); line-height: 1.45; }
.route-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.route-grid { display: grid; gap: 9px; }
.route-card { display: grid; grid-template-columns: 42px 1fr 20px; gap: 12px; align-items: center; min-height: 72px; padding: 12px 15px; border: 1px solid rgba(221,244,237,.09); border-radius: 13px; background: rgba(13,27,34,.48); transition: transform .2s ease,border-color .2s ease,background .2s ease; }
.route-card:hover { transform: translateX(-3px); border-color: rgba(130,216,208,.4); background: rgba(25,52,58,.72); }
.route-number { color: var(--teal); font: 600 12px ui-monospace,monospace; }
.route-card div { display: grid; gap: 4px; }
.route-card strong { color: var(--mist); font-size: 13px; }
.route-card small { color: var(--muted); font-size: 10px; line-height: 1.65; }
.route-card > b { color: var(--cyan); font-size: 17px; }
.home-safety { margin: 22px 0 0; }
.home-safety summary { width: fit-content; color: #d6c5a8; cursor: pointer; font-size: 11px; text-underline-offset: 3px; }
.home-safety[open] .safety-banner { margin-top: 12px; }
@media(max-width:760px) { .learning-route { grid-template-columns: 1fr; gap: 17px; margin-top: 24px; } .route-card { min-height: 68px; } }
@media(prefers-reduced-motion:reduce) { .route-card { transition: none; } .route-card:hover { transform: none; } }

/* Explicit stages, provenance and discoverable study filters */
.stage-progress { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 13px; }
.stage-progress span { padding:6px 10px; border:1px solid rgba(221,244,237,.16); border-radius:999px; color:#b5c4c4; font-size:10px; }
.stage-progress span.complete { border-color:rgba(57,183,165,.38); color:#9ce4d4; background:rgba(57,183,165,.08); }
.inference-limit { margin-top:9px!important; padding-top:8px; border-top:1px solid rgba(221,244,237,.12); }
.inference-limit strong { color:#e8c894; }
.result-card small { display:block; margin-top:7px; color:#aebdbb; font-size:10px; }
.followup-result { border-color:rgba(231,181,106,.35); background:rgba(231,181,106,.055); }
.study-results-count { margin:0 0 10px; color:#6b7d80; font-size:11px; }
.empty-state { display:grid; gap:7px; }
.empty-state span { color:#718287; font-size:11px; line-height:1.7; }
.source-panel { margin:18px 0; padding:13px 15px; border:1px solid #d6dfdc; border-radius:11px; background:#f6f8f6; }
.source-panel summary { color:#345558; cursor:pointer; font-weight:700; font-size:12px; }
.source-panel > div { padding-top:8px; color:#596b6d; font-size:11px; line-height:1.8; }
.source-panel p { margin:8px 0; }
.source-panel a { color:#176b62; text-decoration:underline; text-underline-offset:2px; }
.source-panel small { display:block; color:#6e7d7c; font-size:10px; }
.filter-chip:focus-visible,.reaction-list-item:focus-visible,.study-toggle:focus-visible,.source-panel summary:focus-visible { outline:2px solid #167b70; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .stage-progress span { scroll-behavior:auto; } }

/* Calm, scannable reaction organization and review labels */
.field-help { display:block; margin-top:6px; color:#7a8989; font-size:10px; line-height:1.6; }
.reaction-summary { display:grid; gap:5px; margin-top:9px; padding:11px 12px; border:1px solid rgba(57,183,165,.22); border-radius:12px; background:rgba(57,183,165,.06); color:#41575a; font-size:11px; line-height:1.6; }
.reaction-summary strong { color:#153c3e; font-size:12px; }
.status-row { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.status-pill { display:inline-flex; align-items:center; width:max-content; max-width:100%; border-radius:999px; padding:5px 9px; font-size:10px; line-height:1.4; }
.status-pill.review { color:#80521e; background:#fbf0dc; border:1px solid #ead0a2; }
.status-pill.syllabus { color:#375b67; background:#e9f1f4; border:1px solid #ccdde3; }
.reaction-group { display:grid; gap:8px; margin:0 0 20px; }
.reaction-group > h3 { margin:0; padding:10px 12px; border-inline-start:3px solid var(--teal); border-radius:7px; background:#edf4f1; color:#244a4b; font-size:13px; }
.reaction-group > p { margin:0 2px 2px; color:#728184; font-size:10px; line-height:1.6; }
.reaction-list-item small { display:block; margin-top:5px; color:#8a652d; font-size:10px; line-height:1.5; }
.status-filters { margin-top:10px; }
.stopped-record { margin:14px 0; padding:14px; border:1px solid #e2b4b4; border-radius:12px; color:#792c32; background:#fff2f1; font-size:12px; line-height:1.65; }
.stopped-record p { margin:5px 0 0; }
.reaction-list-item:disabled,.study-toggle:disabled { opacity:.72; cursor:not-allowed; }
@media (max-width:640px) { .reaction-summary { font-size:10px; } .status-filters { overflow:auto; flex-wrap:nowrap; padding-bottom:5px; } .status-filters .filter-chip { flex:0 0 auto; } }

/* 3TH Lab theme system — polished light mode with the same visual language. */
.header-tools { display: flex; align-items: center; gap: 12px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(130,216,208,.25); border-radius: 999px; color: var(--mist); background: rgba(57,183,165,.08); font-size: 10px; transition: .2s ease; }
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(57,183,165,.15); transform: translateY(-1px); }
.theme-toggle-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--warm); font-size: 15px; line-height: 1; }

html[data-theme="light"] {
  --navy: #f4f8f6;
  --navy-deep: #e8f0ed;
  --slate: #ffffff;
  --slate-2: #edf4f1;
  --mist: #18333a;
  --paper: #ffffff;
  --teal: #148f80;
  --teal-dark: #0b766a;
  --cyan: #187d84;
  --muted: #5e7478;
  --warm: #a56b1e;
  --line: rgba(24,51,58,.14);
  --shadow: 0 18px 45px rgba(24,66,67,.12);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--navy); }
html[data-theme="light"] body::before { background: radial-gradient(circle at 8% 0%, rgba(57,183,165,.13), transparent 32%), radial-gradient(circle at 88% 22%, rgba(130,216,208,.16), transparent 28%); }
html[data-theme="light"] body::after { background: linear-gradient(transparent, rgba(24,141,128,.18) 20%, rgba(24,141,128,.04) 80%, transparent); }
html[data-theme="light"] .topbar { background: rgba(244,248,246,.88); }
html[data-theme="light"] .brand-copy span { color: #6b8183; }
html[data-theme="light"] .nav-link { color: #62787b; }
html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link.active { color: var(--mist); background: rgba(20,143,128,.11); }
html[data-theme="light"] .header-note { color: #6a8082; }
html[data-theme="light"] .theme-toggle { color: var(--mist); border-color: rgba(20,143,128,.25); background: rgba(20,143,128,.08); }
html[data-theme="light"] .lab-preview, html[data-theme="light"] .lab-bench { border-color: rgba(20,143,128,.2); background: linear-gradient(145deg, #d9efea, #b9d7d3 48%, #a7c8c5); }
html[data-theme="light"] .feature-item, html[data-theme="light"] .concept-grid article, html[data-theme="light"] .exam-side, html[data-theme="light"] .lab-controls { background: rgba(255,255,255,.74); }
html[data-theme="light"] .feature-item p, html[data-theme="light"] .concept-grid p, html[data-theme="light"] .concept-grid small, html[data-theme="light"] .exam-side p { color: #60777a; }
html[data-theme="light"] .route-card { border-color: rgba(24,90,91,.12); background: rgba(255,255,255,.65); }
html[data-theme="light"] .route-card:hover { background: #fff; border-color: rgba(20,143,128,.36); }
html[data-theme="light"] .route-card strong { color: var(--mist); }
html[data-theme="light"] select, html[data-theme="light"] input { color: var(--mist); background: rgba(255,255,255,.82); border-color: rgba(24,51,58,.18); }
html[data-theme="light"] .lab-status { color: #60777a; }
html[data-theme="light"] .result-card, html[data-theme="light"] .details-panel { border-color: rgba(24,51,58,.13); background: rgba(255,255,255,.76); color: var(--mist); }
html[data-theme="light"] .result-card p, html[data-theme="light"] .details-panel p { color: #60777a; }
html[data-theme="light"] .footer { color: #60777a; }
html[data-theme="light"] .footer-brand strong, html[data-theme="light"] .footer strong { color: var(--mist); }
html[data-theme="light"] .footer-brand span, html[data-theme="light"] .footer-rights { color: #667d80; }
html[data-theme="light"] .footer-legal a, html[data-theme="light"] .legal-back { color: var(--teal-dark); }
html[data-theme="light"] .legal-card, html[data-theme="light"] .legal-document { border-color: rgba(24,51,58,.13); background: rgba(255,255,255,.78); }
html[data-theme="light"] .legal-card p, html[data-theme="light"] .legal-heading p, html[data-theme="light"] .legal-section p { color: #60777a; }
html[data-theme="light"] .legal-section h2 { color: var(--mist); }
html[data-theme="light"] .legal-disclaimer { color: #795c32; background: rgba(231,181,106,.12); }
html[data-theme="light"] .progress-overview { border-color: rgba(24,51,58,.13); background: rgba(255,255,255,.8); color: var(--mist); }
html[data-theme="light"] .progress-kicker, html[data-theme="light"] .progress-metrics { color: #60777a; }
html[data-theme="light"] .study-card, html[data-theme="light"] .reaction-list { background: rgba(255,255,255,.78); }
html[data-theme="light"] .home-safety summary { color: #795c32; }
@media (max-width: 920px) { .header-tools { gap: 0; } }
@media (max-width: 700px) { .theme-toggle { width: 35px; padding: 0; justify-content: center; } .theme-toggle > span:last-child { display: none; } }

.footer-contact { grid-column: 1 / -1; display: grid; gap: 13px; min-width: min(100%, 380px); padding: 16px 17px; border: 1px solid rgba(130,216,208,.2); border-radius: 16px; background: linear-gradient(135deg, rgba(57,183,165,.1), rgba(25,42,51,.58)); box-shadow: 0 12px 28px rgba(4,12,16,.12); }
.contact-heading { display: grid; gap: 3px; }
.contact-kicker { color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.contact-heading strong { color: var(--mist); font-size: 16px; }
.contact-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contact-link { display: grid; grid-template-columns: 28px 1fr 14px; align-items: center; gap: 8px; min-height: 55px; padding: 8px 10px; border: 1px solid rgba(234,240,239,.13); border-radius: 11px; color: var(--mist); background: rgba(4,12,16,.2); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.contact-link:hover { transform: translateY(-2px); border-color: rgba(130,216,208,.5); background: rgba(57,183,165,.13); }
.contact-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: white; font-size: 17px; font-weight: 700; }
.contact-link.whatsapp .contact-icon { background: #22a968; }
.contact-link.telegram .contact-icon { background: #2d91c7; }
.contact-link b, .contact-link small { display: block; }
.contact-link b { font-size: 11px; }
.contact-link small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.contact-arrow { color: var(--cyan); font-size: 16px; }
html[data-theme="light"] .footer-contact { border-color: rgba(20,143,128,.2); background: linear-gradient(135deg, rgba(20,143,128,.08), rgba(255,255,255,.9)); box-shadow: 0 12px 28px rgba(24,66,67,.08); }
html[data-theme="light"] .contact-link { border-color: rgba(24,51,58,.12); background: rgba(255,255,255,.72); }
@media (max-width: 700px) { .footer-contact { min-width: 0; } .contact-actions { grid-template-columns: 1fr; } }

/* Contrast hardening: every component stays readable in light mode. */
html[data-theme="light"] .lab-preview::before { color: rgba(24,51,58,.62); }
html[data-theme="light"] .lab-preview::after { border-color: rgba(24,90,91,.18); }
html[data-theme="light"] .preview-tube { border-color: rgba(24,51,58,.45); background: linear-gradient(90deg, rgba(24,51,58,.08), rgba(255,255,255,.28) 42%, rgba(24,51,58,.1)); }
html[data-theme="light"] .preview-bubbles, html[data-theme="light"] .preview-bubbles::before, html[data-theme="light"] .preview-bubbles::after { background: rgba(24,90,91,.58); }
html[data-theme="light"] .preview-beaker { border-color: rgba(24,51,58,.42); }
html[data-theme="light"] .preview-beaker::before { border-color: rgba(24,51,58,.56); }
html[data-theme="light"] .lab-controls { color: var(--mist); }
html[data-theme="light"] .lab-controls .reaction-summary { color: #35565a; }
html[data-theme="light"] .lab-controls .field-help { color: #667d80; }
html[data-theme="light"] .lab-bench { color: #18333a; }
html[data-theme="light"] .bench-topline { color: rgba(24,51,58,.7); }
html[data-theme="light"] .bench-note { color: rgba(24,51,58,.68); }
html[data-theme="light"] .scene-footnote > span:last-child { color: rgba(24,51,58,.62); }
html[data-theme="light"] .scene-instructions { border-color: rgba(24,90,91,.22); background: rgba(255,255,255,.78); color: #31575b; }
html[data-theme="light"] .scene-angle { color: #31575b; border-color: rgba(24,90,91,.22); background: rgba(255,255,255,.72); }
html[data-theme="light"] .scene-angle:hover { color: #0b766a; }
html[data-theme="light"] .details-panel { background: #ffffff; border-color: rgba(24,51,58,.15); color: #18333a; }
html[data-theme="light"] .details-panel h3 { color: #18333a; }
html[data-theme="light"] .details-panel p, html[data-theme="light"] .details-panel li { color: #526b6f; }
html[data-theme="light"] .equation-box { background: #edf5f2; color: #18333a; border-right-color: #0b766a; }
html[data-theme="light"] .evidence-panel { border-color: rgba(24,51,58,.14); background: #ffffff; color: #18333a; }
html[data-theme="light"] .evidence-panel h3 { color: #18333a; }
html[data-theme="light"] .evidence-panel p, html[data-theme="light"] .evidence-item { color: #526b6f; }
html[data-theme="light"] .evidence-item strong { color: #18333a; }
html[data-theme="light"] .evidence-step { background: rgba(24,51,58,.14); }
html[data-theme="light"] .safety-banner { color: #684d24; background: rgba(231,181,106,.14); border-color: rgba(165,107,30,.3); }
html[data-theme="light"] .safety-banner strong { color: #684d24; }
html[data-theme="light"] .safety-banner span { color: #795f35; }
html[data-theme="light"] .empty-state { color: #60777a; }
html[data-theme="light"] .reaction-group > h3 { background: #edf5f2; color: #244a4b; }
html[data-theme="light"] .reaction-group > p { color: #60777a; }
html[data-theme="light"] .reaction-list-item small { color: #80521e; }
html[data-theme="light"] .source-panel { border-color: #cbdad5; background: #f6faf8; }
html[data-theme="light"] .source-panel summary { color: #244f51; }
html[data-theme="light"] .stopped-record { color: #792c32; background: #fff2f1; }
html[data-theme="light"] .home-safety summary { color: #795c32; }
html[data-theme="light"] .paper .section-head p, html[data-theme="light"] .paper .page-intro { color: #60777a; }
html[data-theme="light"] .study-content h3, html[data-theme="light"] .study-content h4 { color: #18333a; }
html[data-theme="light"] .study-content .study-block p { color: #53666b; }
html[data-theme="light"] .study-toggle { color: #0b766a; }
html[data-theme="light"] .balance-term input { background: #ffffff; color: #18333a; }
html[data-theme="light"] .equation-steps { background: #edf5f2; color: #18333a; }
html[data-theme="light"] .equation-steps ol, html[data-theme="light"] .equation-steps p { color: #526b6f; }
html[data-theme="light"] .balance-feedback p { color: #526b6f; }
html[data-theme="light"] .answer-explain { color: #526b6f; background: #edf5f2; }
html[data-theme="light"] .exam-progress { color: #526b6f; }
html[data-theme="light"] .exam-setup-note { color: #526b6f; }
html[data-theme="light"] .review-item p { color: #455e60; }
html[data-theme="light"] .review-item small { color: #60777a; }
html[data-theme="light"] .footer-contact { color: #18333a; }
html[data-theme="light"] .footer-contact .contact-link { color: #18333a; }

/* Semantic text colors: backgrounds and ink must never share the same theme token. */
html[data-theme="light"] .paper,
html[data-theme="light"] .sample-card,
html[data-theme="light"] .exam-card,
html[data-theme="light"] .equation-workbench { color: #18333a; }
html[data-theme="light"] .paper h1, html[data-theme="light"] .paper h2, html[data-theme="light"] .paper h3, html[data-theme="light"] .paper h4,
html[data-theme="light"] .sample-card h2, html[data-theme="light"] .exam-card h2,
html[data-theme="light"] .equation-workbench h2 { color: #18333a; }
html[data-theme="light"] .page-title-dark { color: #18333a; }
html[data-theme="light"] .study-search input,
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .filter-chip:hover,
html[data-theme="light"] .reaction-list-item,
html[data-theme="light"] .fact strong,
html[data-theme="light"] .test-choice,
html[data-theme="light"] .answer-option,
html[data-theme="light"] .score-ring strong,
html[data-theme="light"] .review-item strong,
html[data-theme="light"] .balance-term bdi,
html[data-theme="light"] .balance-term input,
html[data-theme="light"] .equation-actions .btn.secondary,
html[data-theme="light"] .atom-count-table bdi,
html[data-theme="light"] .atom-count-table b,
html[data-theme="light"] .exam-topic-card,
html[data-theme="light"] .skip-link { color: #18333a; }
html[data-theme="light"] .paper .progress-overview,
html[data-theme="light"] .equation-steps { color: #18333a; }
html[data-theme="light"] .study-content h3, html[data-theme="light"] .study-content h4,
html[data-theme="light"] .study-content strong { color: #18333a; }
html[data-theme="light"] .btn { color: #ffffff; }
html[data-theme="light"] .btn.secondary { color: #18333a; }
html[data-theme="light"] .warm-action { color: #18333a; }
html[data-theme="light"] ::selection { color: #18333a; background: #82d8d0; }

/* Friendly motion for the contact shortcuts. */
@keyframes contactIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 0 0 0 rgba(130,216,208,0); }
  45% { transform: translateY(-2px) rotate(-3deg); box-shadow: 0 0 0 5px rgba(130,216,208,.08); }
  70% { transform: translateY(0) rotate(2deg); }
}
.contact-icon { animation: contactIconFloat 3.2s ease-in-out infinite; }
.contact-link.telegram .contact-icon { animation-delay: .45s; }
.contact-link:hover .contact-icon { animation-play-state: paused; transform: translateY(-2px) scale(1.12) rotate(-6deg); box-shadow: 0 7px 14px rgba(4,12,16,.18); }
@media (prefers-reduced-motion: reduce) {
  .contact-icon { animation: none; }
  .contact-link, .contact-link:hover { transition: none; transform: none; }
  .contact-link:hover .contact-icon { transform: none; box-shadow: none; }
}

/* Premium contact motion: visible, polished, and still restrained. */
.contact-link { position: relative; overflow: hidden; box-shadow: 0 5px 14px rgba(4,12,16,.08); }
.contact-link::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.18) 48%, transparent 72%); transform: translateX(-125%); }
.contact-link:hover::before { animation: contactShine .75s ease-out forwards; }
.contact-link:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 12px 24px rgba(4,12,16,.16); }
.contact-icon { position: relative; z-index: 1; animation: contactIconPop 2.8s cubic-bezier(.4,0,.2,1) infinite; }
.contact-icon::after { content: ""; position: absolute; inset: -6px; border: 1px solid currentColor; border-radius: 12px; opacity: 0; pointer-events: none; animation: contactRing 2.8s ease-out infinite; }
.contact-link.telegram .contact-icon, .contact-link.telegram .contact-icon::after { animation-delay: .7s; }
.contact-arrow { position: relative; z-index: 1; animation: contactArrow 1.8s ease-in-out infinite; }
.contact-link.telegram .contact-arrow { animation-delay: .3s; }
@keyframes contactIconPop {
  0%, 58%, 100% { transform: translateY(0) rotate(0) scale(1); }
  66% { transform: translateY(-4px) rotate(-8deg) scale(1.12); }
  74% { transform: translateY(0) rotate(5deg) scale(1.03); }
}
@keyframes contactRing {
  0%, 52% { opacity: 0; transform: scale(.82); }
  64% { opacity: .65; }
  92%, 100% { opacity: 0; transform: scale(1.42); }
}
@keyframes contactArrow {
  0%, 55%, 100% { transform: translate(0,0); }
  68% { transform: translate(3px,-3px); }
  77% { transform: translate(0,0); }
}
@keyframes contactShine { to { transform: translateX(125%); } }
html[data-theme="light"] .contact-link { box-shadow: 0 6px 16px rgba(24,66,67,.1); }
html[data-theme="light"] .contact-link:hover { box-shadow: 0 13px 26px rgba(24,66,67,.16); }
@media (prefers-reduced-motion: reduce) {
  .contact-link::before, .contact-icon, .contact-icon::after, .contact-arrow { animation: none; }
  .contact-link:hover { transform: none; }
}

/* Refined icon motion: the circle pulses while Telegram's arrow travels inside it. */
.contact-icon,
.contact-link.telegram .contact-icon { animation: contactCirclePulse 2.4s ease-in-out infinite; }
.contact-icon::after { animation: contactHalo 2.4s ease-out infinite; }
.contact-link.telegram .contact-icon { font-size: 0; }
.contact-link.telegram .contact-icon::before { content: "➤"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 17px; line-height: 1; animation: telegramArrowFlight 1.9s cubic-bezier(.4,0,.2,1) infinite; }
.contact-link.telegram .contact-icon::after { animation-delay: .55s; }
.contact-link.whatsapp .contact-icon { animation-delay: .25s; }
.contact-link.whatsapp .contact-icon::before { content: "◌"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 17px; line-height: 1; animation: whatsappMarkBounce 2.1s ease-in-out infinite; }
.contact-link.whatsapp .contact-icon { font-size: 0; }
.contact-arrow { animation: contactArrow 1.8s ease-in-out infinite; }
@keyframes contactCirclePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(130,216,208,0); }
  48% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(130,216,208,.12), 0 7px 14px rgba(4,12,16,.12); }
  65% { transform: scale(1); box-shadow: 0 0 0 0 rgba(130,216,208,0); }
}
@keyframes contactHalo {
  0%, 50% { opacity: 0; transform: scale(.78); }
  64% { opacity: .7; }
  100% { opacity: 0; transform: scale(1.48); }
}
@keyframes telegramArrowFlight {
  0%, 18% { opacity: .55; transform: translate(-2px, 2px) rotate(-8deg) scale(.9); }
  42% { opacity: 1; transform: translate(2px, -2px) rotate(-3deg) scale(1.1); }
  60%, 100% { opacity: .72; transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes whatsappMarkBounce {
  0%, 100% { transform: scale(1) rotate(0); }
  45% { transform: scale(1.13) rotate(-8deg); }
  62% { transform: scale(1) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-icon, .contact-icon::before, .contact-icon::after, .contact-arrow { animation: none; }
}

/* Final contact motion: Telegram flies forward; WhatsApp has a rotating inner shine. */
.contact-link.telegram .contact-icon { animation: none; box-shadow: none; }
.contact-link.telegram .contact-icon::after { display: none; animation: none; }
.contact-link.telegram .contact-icon::before { animation: telegramArrowFlyForward 1.45s cubic-bezier(.42,0,.2,1) infinite; }
.contact-link.whatsapp .contact-icon { animation: none; box-shadow: none; overflow: hidden; }
.contact-link.whatsapp .contact-icon::before { z-index: 2; animation: none; }
.contact-link.whatsapp .contact-icon::after { content: ""; z-index: 1; inset: 1px; border: 0; border-radius: inherit; opacity: .9; background: conic-gradient(from 0deg, transparent 0deg, transparent 235deg, rgba(255,255,255,.78) 282deg, rgba(255,255,255,.15) 315deg, transparent 345deg); transform: none; animation: whatsappLightSpin 1.35s linear infinite; }
@keyframes telegramArrowFlyForward {
  0% { opacity: .35; transform: translate(-5px, 5px) rotate(-10deg) scale(.78); }
  18% { opacity: 1; }
  62% { opacity: 1; transform: translate(4px, -4px) rotate(-4deg) scale(1.14); }
  82%, 100% { opacity: 0; transform: translate(8px, -8px) rotate(-1deg) scale(.92); }
}
@keyframes whatsappLightSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-link.telegram .contact-icon::before, .contact-link.whatsapp .contact-icon::after { animation: none; }
}

/* Loading/flight motion: WhatsApp gets an orbiting status dot; Telegram gets forward airflow. */
.contact-link.whatsapp .contact-icon { animation: none; position: relative; background: #22a968; box-shadow: 0 0 9px rgba(34,169,104,.55), inset 0 0 0 1px rgba(255,255,255,.2); }
.contact-link.whatsapp .contact-icon::before { z-index: 2; color: #fff; opacity: .95; animation: whatsappIconGlow 1.8s ease-in-out infinite; }
.contact-link.whatsapp .contact-icon::after { z-index: 3; display: block; inset: auto; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border: 0; border-radius: 50%; opacity: 1; background: #fff; box-shadow: 0 0 5px 2px rgba(255,255,255,.78); transform-origin: 50% 50%; animation: whatsappLoadingDot 1.15s linear infinite; }
.contact-link.telegram .contact-icon { animation: none; position: relative; box-shadow: 0 0 8px rgba(45,145,199,.4), inset 0 0 0 1px rgba(255,255,255,.2); }
.contact-link.telegram .contact-icon::before { z-index: 3; animation: telegramForwardFlight 1.5s cubic-bezier(.42,0,.2,1) infinite; }
.contact-link.telegram .contact-icon::after { content: ""; z-index: 2; display: block; position: absolute; left: 7px; top: 17px; width: 13px; height: 2px; inset-inline: auto; border: 0; border-radius: 99px; opacity: 0; background: rgba(255,255,255,.75); box-shadow: 0 4px 0 rgba(255,255,255,.42), 0 8px 0 rgba(255,255,255,.2); transform: rotate(-35deg) translate(-3px, 3px); animation: telegramAirStream 1.5s cubic-bezier(.42,0,.2,1) infinite; }
@keyframes whatsappLoadingDot {
  from { transform: rotate(0deg) translateX(8px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}
@keyframes whatsappIconGlow {
  0%, 100% { opacity: .75; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}
@keyframes telegramForwardFlight {
  0% { opacity: .25; transform: translate(-5px, 5px) rotate(-10deg) scale(.82); }
  18% { opacity: 1; }
  58% { opacity: 1; transform: translate(4px, -4px) rotate(-10deg) scale(1.1); }
  78%, 100% { opacity: 0; transform: translate(8px, -8px) rotate(-10deg) scale(.88); }
}
@keyframes telegramAirStream {
  0%, 12% { opacity: 0; transform: rotate(-35deg) translate(-7px, 7px) scaleX(.45); }
  28% { opacity: .7; }
  62% { opacity: .35; transform: rotate(-35deg) translate(2px, -2px) scaleX(1); }
  80%, 100% { opacity: 0; transform: rotate(-35deg) translate(7px, -7px) scaleX(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-link.whatsapp .contact-icon::before, .contact-link.whatsapp .contact-icon::after,
  .contact-link.telegram .contact-icon::before, .contact-link.telegram .contact-icon::after { animation: none; }
}

/* Study is a fast reference view: selecting an item must not replay page motion. */
.study-page { animation: none !important; }
.study-page .reaction-list-item, .study-page .filter-chip, .study-page .study-content, .study-page .hidden-answer { transition: none !important; }
.study-page .reaction-list-item:hover, .study-page .reaction-list-item.active { transform: none; }


/* Content cleanup: shorter, calmer reading surfaces */
.learning-route { margin-top: clamp(2rem, 4vw, 3.5rem); }
.route-heading p, .section-head > p { max-width: 48ch; }
.route-card small { line-height: 1.5; }
.home-safety { margin-top: 1.5rem; }
.unknown-extra { margin: 1.5rem 0; padding: 1rem 1.2rem; border: 1px solid var(--line, rgba(120,140,150,.22)); border-radius: 16px; background: var(--surface, rgba(255,255,255,.025)); }
.unknown-extra > summary { cursor: pointer; font-weight: 700; list-style-position: inside; }
.unknown-extra[open] > summary { margin-bottom: 1rem; }
.unknown-extra .method-heading p { max-width: 52ch; }
.study-results-count { margin-block: .75rem 1rem; font-size: .9rem; opacity: .75; }
.footer-contact .contact-heading p { display: none; }
@media (max-width: 680px) {
  .hero-meta { gap: .75rem; }
  .hero-meta .meta-item { min-width: 0; }
  .route-card { gap: .75rem; }
  .route-card small { font-size: .82rem; }
  .unknown-extra { padding: .85rem; }
}


/* Cleaner two-step chemistry selection */
.lab-controls .control-group label { font-size: 12px; font-weight: 700; color: var(--mist); }
.lab-controls #reaction-select, .lab-controls #reagent-select { min-height: 48px; border-radius: 12px; padding: 11px 13px; line-height: 1.5; }
.lab-controls .reaction-summary { gap: 7px; padding: 12px 13px; border-radius: 12px; }
.lab-controls .reaction-summary strong { font-size: 16px; direction: ltr; text-align: right; }
.unsupported-result { border-color: rgba(224, 155, 94, .45); background: rgba(224, 155, 94, .08); }
.unsupported-result h3 { margin-bottom: 8px; }
.unsupported-result p { color: var(--muted); line-height: 1.8; }
html[data-theme="light"] .lab-controls .control-group label { color: #476064; }
@media (max-width: 640px) { .lab-controls #reaction-select, .lab-controls #reagent-select { min-height: 50px; font-size: 14px; } .lab-controls .reaction-summary strong { font-size: 15px; } }

/* Product-level lab interaction: catalog controls, challenge mode and experiment log. */
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; margin:0 0 18px; border:1px solid var(--line); border-radius:13px; background:rgba(5,16,21,.22); }
.mode-chip { min-height:40px; padding:8px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.mode-chip.active { color:var(--mist); background:rgba(57,183,165,.14); border-color:rgba(57,183,165,.34); }
.lab-controls input[type="search"] { width:100%; min-height:43px; margin:7px 0 8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; outline:none; background:rgba(7,20,25,.42); color:var(--mist); font:inherit; font-size:12px; }
.lab-controls input[type="search"]:focus-visible { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(57,183,165,.12); }
.catalog-count { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
.challenge-card { display:grid; gap:12px; padding:18px; margin-top:12px; border:1px solid var(--line); border-radius:15px; background:rgba(22,39,47,.7); }
.challenge-card label { color:var(--mist); font-size:13px; font-weight:700; }
.challenge-card select { width:100%; min-height:48px; padding:11px; border:1px solid var(--line); border-radius:10px; background:var(--panel, #172a32); color:var(--mist); font:inherit; font-size:12px; line-height:1.6; }
.challenge-card .btn { justify-self:start; }
.challenge-feedback { padding:12px 13px; border:1px solid var(--line); border-radius:11px; font-size:12px; }
.challenge-feedback strong { display:block; margin-bottom:5px; }
.challenge-feedback p { margin:0; line-height:1.8; }
.challenge-feedback.correct { border-color:rgba(68,190,142,.4); background:rgba(68,190,142,.08); }
.challenge-feedback.incorrect { border-color:rgba(227,162,94,.4); background:rgba(227,162,94,.08); }
.lab-history { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(19,35,43,.56); }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.history-heading h3 { margin:3px 0 0; font-size:17px; }
.history-list { display:grid; gap:7px; }
.history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.018); color:var(--mist); text-align:right; cursor:pointer; transition:border-color .18s ease,transform .18s ease; }
.history-item:hover { border-color:rgba(57,183,165,.4); transform:translateY(-1px); }
.history-item span { display:grid; gap:5px; min-width:0; }
.history-item strong { font-size:12px; }
.history-item small { color:var(--muted); font-size:10px; }
.history-item b { flex:0 0 auto; color:var(--teal); font-size:10px; }
.history-note { display:block; margin-top:10px; color:var(--muted); font-size:10px; }
.history-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:12px 0; }
.history-compare article { padding:12px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.history-compare article > strong { color:var(--teal); font-size:10px; }
.history-compare h4 { margin:8px 0; font-size:12px; }
.history-compare p { margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
html[data-theme="light"] .lab-controls input[type="search"], html[data-theme="light"] .challenge-card select { background:#fff; color:#213c42; }
html[data-theme="light"] .challenge-card, html[data-theme="light"] .lab-history { background:rgba(255,255,255,.8); }
@media(max-width:640px) {
  .mode-switch { margin-bottom:14px; }
  .mode-chip { min-height:44px; font-size:11px; }
  .history-heading { align-items:flex-start; }
  .history-heading .btn { max-width:145px; white-space:normal; }
  .history-item { align-items:flex-start; }
  .history-item b { max-width:84px; line-height:1.6; text-align:left; }
  .history-compare { grid-template-columns:1fr; }
  .lab-history { padding:13px; }
}
@media(prefers-reduced-motion:reduce) { .mode-chip,.history-item { transition:none; } .history-item:hover { transform:none; } }
.history-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.challenge-reveal { padding-top:12px; border-top:1px solid var(--line); }
.challenge-reveal h4 { margin:0 0 8px; font-size:12px; }
.challenge-reveal p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
@media(max-width:640px) { .history-actions { max-width:160px; } .history-actions .btn { padding:8px; font-size:10px; } }
.bench-labels { display:grid; gap:5px; max-width:min(48%,260px); padding:9px 11px; border:1px solid rgba(151,190,181,.18); border-radius:10px; background:rgba(8,20,25,.74); color:var(--mist); }
.bench-labels span { display:grid; gap:2px; }
.bench-labels b { color:var(--muted); font-size:9px; font-weight:500; }
.bench-labels strong { font-size:10px; line-height:1.5; }
html[data-theme="light"] .bench-labels { background:rgba(246,250,248,.9); color:#25474b; }
@media(max-width:640px) { .bench-labels { max-width:54%; padding:7px 8px; } .bench-labels strong { font-size:9px; } }

/* Iteration 2: clearer hierarchy, better touch targets, and evidence-first unknown analysis. */
.page .section-head { align-items: flex-end; margin-bottom: clamp(18px, 3vw, 30px); }
.page .section-head > div { min-width: 0; }
.page-intro, .section-head > p { max-width: 58ch; line-height: 1.85; }
.page-title { text-wrap: balance; }
.eyebrow { line-height: 1.7; }
.paper, .lab-controls, .lab-main, .sample-card, .evidence-panel, .exam-card, .exam-side { min-width: 0; }
.lab-controls { gap: 14px; }
.lab-controls .control-group { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.lab-controls .control-group:last-of-type { border-bottom: 0; }
.lab-controls input[type="search"], .lab-controls select, .challenge-card select { min-height: 48px; font-size: 13px; }
.lab-controls input[type="search"]::placeholder { color: var(--muted); opacity: .82; }
.catalog-count { line-height: 1.7; }
.control-actions { gap: 8px; }
.control-actions .btn { min-height: 43px; }
.result-card p, .details-panel p, .evidence-item, .test-result p { line-height: 1.9; }
.equation-box { max-width: 100%; overflow-wrap: anywhere; line-height: 1.9; }
.equation-box [dir="ltr"], .balance-term bdi { unicode-bidi: isolate; }
.unknown-reagent-note { display: grid; gap: 5px; margin: 17px 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(57,183,165,.06); }
.unknown-reagent-note > span { color: var(--muted); font-size: 10px; }
.unknown-reagent-note strong { font-size: 13px; line-height: 1.8; }
.unknown-reagent-note small, .unknown-science-note { color: var(--muted); font-size: 11px; line-height: 1.8; }
.unknown-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.unknown-actions .btn { min-height: 42px; }
.followup-evidence { border-color: rgba(57,183,165,.35); }
.evidence-tip { margin-top: 14px; padding: 13px; border-right: 3px solid var(--teal); border-radius: 8px; background: rgba(57,183,165,.07); color: var(--muted); font-size: 11px; line-height: 1.9; }
.final-inference p { margin: 8px 0; line-height: 1.9; }
.final-inference .status-pill { display: inline-flex; margin-top: 6px; white-space: normal; }
.test-choice:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.test-choice:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.study-results-count { position: sticky; top: 82px; z-index: 3; width: fit-content; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--navy); color: var(--mist); }
.exam-question { text-wrap: pretty; line-height: 1.75; }
.answer-option { min-height: 50px; line-height: 1.7; }
.nav-link { white-space: nowrap; }
button:disabled { cursor: not-allowed; }
button:disabled:hover { transform: none; }

@media (min-width: 921px) {
  .lab-controls { position: sticky; top: 94px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; }
  .lab-main { min-width: 0; }
  .study-layout { align-items: start; }
}
@media (max-width: 920px) {
  .lab-controls { max-height: none; overflow: visible; }
  .study-results-count { top: 8px; }
}
@media (max-width: 700px) {
  .topbar { backdrop-filter: blur(12px); }
  .topbar-inner { row-gap: 8px; }
  .main-nav { -webkit-overflow-scrolling: touch; }
  .nav-link { min-height: 40px; }
  .page { padding-bottom: 54px; }
  .page-title { font-size: clamp(30px, 8vw, 43px); line-height: 1.18; }
  .hero h1 { line-height: 1.16; }
  .hero-actions .btn { flex: 1 1 auto; }
  .lab-layout { gap: 12px; }
  .lab-controls { padding: 15px; }
  .lab-bench { min-height: 410px; }
  .bench-topline { font-size: 8px; }
  .scene-instructions { max-width: calc(100% - 35px); line-height: 1.6; }
  .scene-angle { max-width: 150px; font-size: 10px; }
  .unknown-layout { gap: 12px; }
  .sample-card, .evidence-panel { padding: 17px; }
  .test-choice-grid { grid-template-columns: 1fr; }
  .test-choice { min-height: 74px; }
  .unknown-actions { display: grid; grid-template-columns: 1fr; }
  .unknown-actions .btn { width: 100%; }
  .study-layout { gap: 12px; }
  .reaction-list { grid-template-columns: 1fr; }
  .study-results-count { top: 4px; }
  .equation-box { font-size: 12px; }
  .footer-legal { gap: 12px; }
  .footer-contact { width: 100%; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 22px); }
  .brand { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .theme-toggle { width: 34px; min-width: 34px; }
  .lab-bench { min-height: 380px; }
  .control-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .control-actions .btn:first-child:last-child { grid-column: 1 / -1; }
  .progress-metrics { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-track i { transition: none; }
  .study-results-count { scroll-behavior: auto; }
}

/* الوضع الداكن: خلفيات داكنة فعلًا في جميع البطاقات، مع إبقاء النصوص عالية التباين. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #172830;
  --slate: #192a33;
  --slate-2: #223841;
}
html[data-theme="dark"] .paper,
html[data-theme="dark"] .equation-workbench,
html[data-theme="dark"] .sample-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .exam-side,
html[data-theme="dark"] .reaction-list,
html[data-theme="dark"] .study-card {
  color: var(--mist);
  background: #172830;
  border-color: rgba(130,216,208,.19);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
html[data-theme="dark"] .paper h1,
html[data-theme="dark"] .paper h2,
html[data-theme="dark"] .paper h3,
html[data-theme="dark"] .paper h4,
html[data-theme="dark"] .equation-workbench h2,
html[data-theme="dark"] .sample-card h2,
html[data-theme="dark"] .exam-card h2 { color: #eaf0ef; }
html[data-theme="dark"] .paper p,
html[data-theme="dark"] .paper .section-head p,
html[data-theme="dark"] .paper .page-intro,
html[data-theme="dark"] .equation-workbench p,
html[data-theme="dark"] .exam-side p,
html[data-theme="dark"] .review-item p { color: #b5c5c6; }
html[data-theme="dark"] .paper .progress-overview { border-color: rgba(130,216,208,.18); background: #1d323a; color: #eaf0ef; }
html[data-theme="dark"] .paper .progress-kicker,
html[data-theme="dark"] .paper .progress-metrics { color: #b5c5c6; }
html[data-theme="dark"] .paper .progress-metrics b { color: #82d8d0; }
html[data-theme="dark"] .equation-steps,
html[data-theme="dark"] .source-panel,
html[data-theme="dark"] .reaction-group > h3,
html[data-theme="dark"] .reaction-summary { background: #20363e; color: #dce8e6; border-color: rgba(130,216,208,.18); }
html[data-theme="dark"] .equation-steps ol,
html[data-theme="dark"] .equation-steps p,
html[data-theme="dark"] .source-panel > div,
html[data-theme="dark"] .source-panel small,
html[data-theme="dark"] .reaction-group > p { color: #b5c5c6; }
html[data-theme="dark"] .source-panel summary,
html[data-theme="dark"] .reaction-group > h3,
html[data-theme="dark"] .reaction-summary strong { color: #9ce4d4; }
html[data-theme="dark"] .equation-box { background: #102128; color: #eaf0ef; }
html[data-theme="dark"] .study-results-count { color: #b5c5c6; }
html[data-theme="dark"] .catalog-list { display: grid; gap: 6px; max-height: 210px; overflow: auto; padding: 4px; border: 1px solid rgba(130,216,208,.15); border-radius: 11px; background: #101d24; scrollbar-color: #368e84 #101d24; }
html[data-theme="dark"] .catalog-option { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:38px; padding:7px 9px; border:1px solid transparent; border-radius:8px; color:#dce8e6; text-align:right; background:#1b2d35; font-size:11px; }
html[data-theme="dark"] .catalog-option:hover, html[data-theme="dark"] .catalog-option.selected { border-color:rgba(57,183,165,.55); background:#25433f; }
html[data-theme="dark"] .catalog-option strong { font-weight:600; }
html[data-theme="dark"] .catalog-option span { color:#9ce4d4; direction:ltr; }
html[data-theme="dark"] .catalog-empty { margin:5px; color:#b5c5c6; font-size:11px; }
html[data-theme="dark"] .control-group label { color:#c3d1d0; }
html[data-theme="dark"] .equation-challenge,
html[data-theme="dark"] .balance-term,
html[data-theme="dark"] .equation-steps,
html[data-theme="dark"] .atom-count-table > div,
html[data-theme="dark"] .exam-topic-card,
html[data-theme="dark"] .answer-explain,
html[data-theme="dark"] .balance-feedback {
  color: #eaf0ef;
  background: #1c3038;
  border-color: rgba(130,216,208,.2);
}
html[data-theme="dark"] .equation-picker label,
html[data-theme="dark"] .challenge-title p,
html[data-theme="dark"] .balance-side h3,
html[data-theme="dark"] .balance-term > span,
html[data-theme="dark"] .balance-feedback p,
html[data-theme="dark"] .atom-count-table span { color: #b5c5c6; }
html[data-theme="dark"] .equation-workbench .eyebrow,
html[data-theme="dark"] .equation-arrow { color: #82d8d0; }
html[data-theme="dark"] .equation-workbench .eyebrow::before { background: #39b7a5; }
html[data-theme="dark"] .balance-term bdi,
html[data-theme="dark"] .atom-count-table bdi,
html[data-theme="dark"] .atom-count-table b { color: #eaf0ef; }
html[data-theme="dark"] .balance-term input { color: #eaf0ef; background: #102128; border-color: rgba(130,216,208,.3); }
html[data-theme="dark"] .exam-topic-card.selected { background: #25433f; border-color: #39b7a5; }
html[data-theme="dark"] .answer-explain { color: #dce8e6; }
html[data-theme="dark"] .balance-feedback.balanced { background: #18352f; border-color: rgba(57,183,165,.4); }

/* صفحة مستقلة ومنظمة للتواصل والدعم */
.contact-page .legal-heading { margin-bottom: 26px; }
.contact-support-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:900px; margin:0 0 16px; }
.support-channel { display:grid; grid-template-columns:56px minmax(0,1fr) 20px; align-items:center; gap:15px; min-height:132px; padding:20px; border:1px solid rgba(130,216,208,.2); border-radius:18px; color:var(--mist); background:linear-gradient(135deg,rgba(30,63,68,.72),rgba(20,35,43,.9)); box-shadow:var(--shadow); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.support-channel:hover { transform:translateY(-3px); border-color:rgba(130,216,208,.48); }
.support-channel-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#fff; background:#22a968; font-size:25px; font-weight:700; }
.support-channel.telegram .support-channel-icon { background:#2d91c7; }
.support-channel-copy { display:grid; gap:5px; }
.support-channel-copy small { color:var(--cyan); font-size:10px; }
.support-channel-copy strong { color:var(--mist); font-size:19px; }
.support-channel-copy span { color:var(--muted); font-size:12px; line-height:1.6; }
.support-channel > b { color:var(--cyan); font-size:20px; }
.contact-support-note { max-width:900px; margin:14px 0 22px; color:var(--muted); font-size:11px; line-height:1.8; }
.route-contact-icon { display:grid; place-items:center; width:37px; height:37px; border:1px solid rgba(130,216,208,.28); border-radius:12px; background:rgba(57,183,165,.1); font-family:Arial,sans-serif; }
html[data-theme="light"] .support-channel { border-color:rgba(24,90,91,.16); color:#18333a; background:linear-gradient(135deg,#fff,#eaf4f1); }
html[data-theme="light"] .support-channel-copy strong { color:#18333a; }
html[data-theme="light"] .support-channel-copy span { color:#5e7478; }
@media(max-width:700px) { .contact-support-grid { grid-template-columns:1fr; } .support-channel { min-height:112px; } }
@media(prefers-reduced-motion:reduce) { .support-channel,.support-channel:hover { transition:none;transform:none; } }

/* تنظيم قوائم العينات والكواشف: النتائج تظهر عند الطلب فقط */
.catalog-trigger-row { display: flex; }
.catalog-trigger { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--mist); background: rgba(16,28,36,.62); text-align: right; font-size: 12px; transition: .2s ease; }
.catalog-trigger:hover, .catalog-trigger.open { border-color: var(--cyan); background: rgba(57,183,165,.1); }
.catalog-trigger b { color: var(--cyan); font-size: 17px; transition: transform .2s ease; }
.catalog-trigger.open b { transform: rotate(180deg); }
.catalog-popover { display: grid; gap: 8px; margin-top: 7px; padding: 9px; border: 1px solid rgba(130,216,208,.24); border-radius: 13px; background: rgba(10,24,30,.97); box-shadow: 0 16px 30px rgba(0,0,0,.2); animation: catalogOpen .18s ease-out both; }
.catalog-popover input[type="search"] { margin: 0; }
.catalog-list { max-height: 190px; overflow: auto; scrollbar-width: thin; }
.catalog-count { margin-top: 0; }
@keyframes catalogOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.balancing-method { position: relative; margin-top: 34px; border: 1px solid rgba(57,183,165,.2); border-radius: 17px; background: rgba(57,183,165,.06); overflow: hidden; }
.balancing-method > summary { display: grid; gap: 5px; padding: 18px 20px; cursor: pointer; list-style: none; }
.balancing-method > summary::-webkit-details-marker { display: none; }
.balancing-method > summary::after { content: "＋"; position: absolute; left: 20px; color: var(--teal-dark); font-size: 20px; }
.balancing-method[open] > summary::after { content: "−"; }
.balancing-method > summary strong { color: var(--navy); font-size: clamp(20px, 3vw, 30px); }
.balancing-method > summary small { color: #61777a; font-size: 11px; }
.method-content { padding: 0 20px 20px; }
.method-content > p { margin: 0 0 14px; color: #53676a; line-height: 1.8; }
html[data-theme="dark"] .balancing-method > summary strong { color: var(--mist); }
html[data-theme="dark"] .method-content > p { color: var(--muted); }
html[data-theme="dark"] .catalog-popover { background: rgba(10,24,30,.98); }
html[data-theme="light"] .catalog-trigger { color: #18333a; background: rgba(255,255,255,.86); border-color: rgba(24,51,58,.18); }
html[data-theme="light"] .catalog-trigger:hover, html[data-theme="light"] .catalog-trigger.open { background: #edf8f5; border-color: #0b766a; }
html[data-theme="light"] .catalog-popover { background: #fff; border-color: rgba(24,90,91,.2); box-shadow: 0 14px 30px rgba(24,66,67,.14); }
@media (max-width: 700px) { .catalog-popover { max-height: 270px; } .catalog-list { max-height: 155px; } }

/* بطاقات أمثلة المعادلات */
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.example-card { min-width: 0; padding: 17px; border: 1px solid rgba(57,183,165,.22); border-right: 4px solid var(--teal); border-radius: 15px; background: rgba(255,255,255,.74); box-shadow: 0 10px 24px rgba(24,66,67,.08); }
.example-card header { display: grid; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid rgba(24,51,58,.12); }
.example-card header span { color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.example-card bdi { display: block; overflow-wrap: anywhere; color: #18333a; font: 700 clamp(16px, 2vw, 21px) ui-monospace, monospace; direction: ltr; text-align: center; }
.example-card p { margin: 12px 0 0; color: #53676a; font-size: 11px; line-height: 1.85; }
/* مذاكرة بدون نزول: تصنيفات ثم بادجات للتفاعلات داخل نفس اللوحة */
.study-picker { min-width: 0; }
.study-picker-head { display: grid; gap: 5px; margin-bottom: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--slate-2); }
.study-picker-head strong { color: var(--mist); font-size: 14px; }
.study-picker-head span { color: var(--muted); font-size: 10px; }
.study-back { justify-self: start; padding: 0; border: 0; color: var(--teal-dark); background: transparent; font-size: 11px; font-weight: 700; }
.reaction-group { margin: 0 0 9px; }
.reaction-group-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--mist); background: var(--slate-2); text-align: right; }
.reaction-group-trigger:hover, .reaction-group.is-open .reaction-group-trigger { border-color: var(--teal); background: rgba(57,183,165,.1); }
.reaction-group-trigger span { display: grid; gap: 3px; }
.reaction-group-trigger b { font-size: 12px; }
.reaction-group-trigger small { color: var(--muted); font-size: 10px; font-weight: 400; }
.reaction-group-trigger i { color: var(--teal); font-size: 19px; font-style: normal; }
.reaction-badges { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; padding: 9px 2px 2px; }
.reaction-badge { display: grid; gap: 5px; min-height: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--mist); background: var(--paper); text-align: right; }
.reaction-badge:hover, .reaction-badge.active { border-color: var(--teal); background: rgba(57,183,165,.12); box-shadow: 0 5px 14px rgba(20,143,128,.1); }
.reaction-badge strong { font-size: 11px; line-height: 1.45; }
.reaction-badge span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.study-content { position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow: auto; scrollbar-width: thin; }
/* تباين متوازن للنصوص في الوضعين */
html[data-theme="dark"] .example-card { border-color: rgba(130,216,208,.25); background: #1c3038; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
html[data-theme="dark"] .example-card header { border-color: rgba(130,216,208,.16); }
html[data-theme="dark"] .example-card header span { color: #9ce4d4; }
html[data-theme="dark"] .example-card bdi { color: #eaf0ef; }
html[data-theme="dark"] .example-card p { color: #b5c5c6; }
html[data-theme="dark"] .study-picker-head,
html[data-theme="dark"] .reaction-group-trigger { background: #20363e; border-color: rgba(130,216,208,.18); }
html[data-theme="dark"] .reaction-group-trigger { color: #eaf0ef; }
html[data-theme="dark"] .reaction-group-trigger small,
html[data-theme="dark"] .reaction-badge span { color: #b5c5c6; }
html[data-theme="dark"] .reaction-badge { background: #1b2d35; border-color: rgba(130,216,208,.18); color: #eaf0ef; }
html[data-theme="dark"] .reaction-badge:hover, html[data-theme="dark"] .reaction-badge.active { background: #25433f; border-color: #39b7a5; }
html[data-theme="light"] .study-picker-head,
html[data-theme="light"] .reaction-group-trigger { background: #edf4f1; border-color: rgba(24,51,58,.14); }
html[data-theme="light"] .reaction-badge { background: #fff; border-color: rgba(24,51,58,.14); color: #18333a; }
html[data-theme="light"] .reaction-badge span { color: #5e7478; }
html[data-theme="light"] .reaction-badge:hover, html[data-theme="light"] .reaction-badge.active { background: #edf8f5; border-color: #148f80; }
/* منع وميض الصفحة: لا توجد حركة دخول عند تحديثات المكونات */
.page { animation: none !important; }
.study-page .study-picker, .study-page .study-content, .study-page .study-results-count { transition: none !important; }
@media (max-width: 920px) { .study-content { position: static; max-height: none; overflow: visible; } }
@media (max-width: 700px) { .example-grid { grid-template-columns: 1fr; } .reaction-badges { grid-template-columns: 1fr; } }

/* بحث ثابت بلا إعادة بناء: نفس بنية الداكن، بألوان فاتحة واضحة */
html[data-theme="light"] .catalog-popover { background: #edf4f1; border-color: rgba(24,90,91,.22); }
html[data-theme="light"] .catalog-popover input[type="search"] { color: #18333a; background: #fff; border-color: rgba(24,51,58,.2); box-shadow: 0 2px 7px rgba(24,66,67,.06); }
html[data-theme="light"] .catalog-list { display: grid; gap: 6px; max-height: 210px; overflow: auto; padding: 4px; border: 1px solid rgba(24,90,91,.14); border-radius: 11px; background: #e4efeb; scrollbar-color: #67aaa1 #e4efeb; }
html[data-theme="light"] .catalog-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; color: #18333a; text-align: right; background: #fff; font-size: 11px; box-shadow: 0 2px 6px rgba(24,66,67,.05); }
html[data-theme="light"] .catalog-option:hover, html[data-theme="light"] .catalog-option.selected { border-color: #148f80; background: #dff3ed; }
html[data-theme="light"] .catalog-option strong { color: #18333a; font-weight: 700; }
html[data-theme="light"] .catalog-option span { color: #0b766a; direction: ltr; }
html[data-theme="light"] .catalog-empty, html[data-theme="light"] .catalog-count { color: #5e7478; }
html[data-theme="light"] .reaction-group-trigger { box-shadow: 0 3px 10px rgba(24,66,67,.06); }
html[data-theme="light"] .reaction-badge { box-shadow: 0 3px 9px rgba(24,66,67,.06); }
/* القائمة التابعة للمجموعة تبقى في نفس المكان، وتفاصيل الاختيار لا تُدفن أسفل الصفحة على الهاتف */
.study-layout { align-items: start; }
@media (max-width: 920px) {
  .study-layout { display: grid; grid-template-columns: minmax(0,1fr); }
  .study-content { order: -1; }
}
/* لا حركة دخول ولا انتقالات على الحاويات عند تحديث حالة صغيرة */
.app-shell, #app, .study-page, .lab-controls { animation: none !important; }

/* بطاقات العينات: اختيار مباشر ثم بادجات التفاعلات التابعة لها */
.material-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.material-card { display: grid; gap: 6px; min-width: 0; padding: 13px; border: 1px solid rgba(130,216,208,.18); border-radius: 13px; color: #eaf0ef; background: #1b2d35; text-align: right; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.material-card:hover, .material-card:focus-visible { border-color: #39b7a5; background: #25433f; box-shadow: 0 8px 20px rgba(57,183,165,.16); }
.material-ion { color: #9ce4d4; font: 700 17px ui-monospace, monospace; direction: ltr; }
.material-card strong { color: #eaf0ef; font-size: 12px; }
.material-card bdi { color: #82d8d0; font: 600 12px ui-monospace, monospace; direction: ltr; }
.material-card small { color: #b5c5c6; font-size: 10px; line-height: 1.55; }
html[data-theme="light"] .material-card { border-color: rgba(24,51,58,.14); color: #18333a; background: #fff; box-shadow: 0 5px 14px rgba(24,66,67,.08); }
html[data-theme="light"] .material-card:hover, html[data-theme="light"] .material-card:focus-visible { border-color: #148f80; background: #edf8f5; box-shadow: 0 8px 18px rgba(20,143,128,.13); }
html[data-theme="light"] .material-ion { color: #0b766a; }
html[data-theme="light"] .material-card strong { color: #18333a; }
html[data-theme="light"] .material-card bdi { color: #0b766a; }
html[data-theme="light"] .material-card small { color: #5e7478; }
@media (max-width: 700px) { .material-cards { grid-template-columns: 1fr; } }


/* Theme polish: consistent light/dark surfaces, readable templates, and contained menus. */
html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #101c24;
  --navy-deep: #0c151b;
  --slate: #192a33;
  --slate-2: #223841;
  --mist: #eaf0ef;
  --paper: #172830;
  --teal: #39b7a5;
  --teal-dark: #208d80;
  --cyan: #82d8d0;
  --muted: #a8b8bc;
  --line: rgba(234,240,239,.15);
  --shadow: 0 18px 45px rgba(0,0,0,.24);
}
html[data-theme="light"] {
  color-scheme: light;
  --navy: #f5f8f6;
  --navy-deep: #eaf1ed;
  --slate: #ffffff;
  --slate-2: #eef4f1;
  --mist: #18333a;
  --paper: #ffffff;
  --teal: #148f80;
  --teal-dark: #0b766a;
  --cyan: #176d75;
  --muted: #5e7478;
  --line: rgba(24,51,58,.14);
  --shadow: 0 14px 34px rgba(24,66,67,.10);
}
html[data-theme="light"] body,
html[data-theme="light"] .app-shell { background: var(--navy); color: var(--mist); }
html[data-theme="light"] .topbar { background: rgba(245,248,246,.96); border-color: rgba(24,51,58,.12); }
html[data-theme="light"] .lab-controls,
html[data-theme="light"] .lab-history,
html[data-theme="light"] .result-card,
html[data-theme="light"] .details-panel,
html[data-theme="light"] .evidence-panel,
html[data-theme="light"] .route-card,
html[data-theme="light"] .feature-item,
html[data-theme="light"] .concept-grid article,
html[data-theme="light"] .exam-side,
html[data-theme="light"] .exam-card,
html[data-theme="light"] .exam-topic-card,
html[data-theme="light"] .study-picker-head,
html[data-theme="light"] .reaction-group-trigger,
html[data-theme="light"] .reaction-badge,
html[data-theme="light"] .material-card,
html[data-theme="light"] .history-item,
html[data-theme="light"] .reaction-list-item,
html[data-theme="light"] .review-item,
html[data-theme="light"] .test-choice,
html[data-theme="light"] .answer-option,
html[data-theme="light"] .example-card,
html[data-theme="light"] .source-panel,
html[data-theme="light"] .progress-overview {
  color: #18333a;
  background-color: #fff;
  border-color: rgba(24,51,58,.13);
  box-shadow: 0 5px 18px rgba(24,66,67,.055);
}
html[data-theme="light"] .lab-controls { background: #fdfefd; }
html[data-theme="light"] .lab-bench,
html[data-theme="light"] .lab-preview { border-color: rgba(20,143,128,.2); background: linear-gradient(145deg,#eef7f3 0%,#dcece7 55%,#d1e4df 100%); }
html[data-theme="light"] .result-card p,
html[data-theme="light"] .details-panel p,
html[data-theme="light"] .evidence-panel p,
html[data-theme="light"] .history-item small,
html[data-theme="light"] .feature-item p,
html[data-theme="light"] .route-card small,
html[data-theme="light"] .material-card small,
html[data-theme="light"] .reaction-badge span,
html[data-theme="light"] .reaction-group-trigger small,
html[data-theme="light"] .exam-progress,
html[data-theme="light"] .exam-setup-note { color: #536a6e; }
html[data-theme="light"] .lab-controls .control-group label,
html[data-theme="light"] .control-kicker,
html[data-theme="light"] .result-card h3,
html[data-theme="light"] .details-panel h3,
html[data-theme="light"] .evidence-panel h3,
html[data-theme="light"] .lab-history h2 { color: #18333a; }
html[data-theme="light"] select,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] .lab-controls input[type="search"],
html[data-theme="light"] .challenge-card select { color: #18333a; background: #fff; border-color: rgba(24,51,58,.2); }
html[data-theme="light"] select option { color: #18333a; background: #fff; }
html[data-theme="light"] .catalog-trigger { color: #18333a; background: #fff; border-color: rgba(24,51,58,.2); }
html[data-theme="light"] .catalog-trigger:hover,
html[data-theme="light"] .catalog-trigger.open { background: #edf7f3; border-color: #148f80; }
html[data-theme="light"] .catalog-trigger b { color: #0b766a; }
html[data-theme="light"] .catalog-popover { background: #fff; border-color: rgba(24,51,58,.18); box-shadow: 0 10px 24px rgba(24,66,67,.12); }
html[data-theme="light"] .catalog-list { background: #f2f7f4; border-color: rgba(24,51,58,.1); scrollbar-color: #8cbab1 #edf4f1; }
html[data-theme="light"] .catalog-option { color: #18333a; background: #fff; border-color: rgba(24,51,58,.08); box-shadow: none; }
html[data-theme="light"] .catalog-option:hover,
html[data-theme="light"] .catalog-option.selected { color: #123b39; background: #e8f5f0; border-color: #148f80; }
html[data-theme="light"] .catalog-option strong { color: #18333a; }
html[data-theme="light"] .catalog-option span { color: #0b766a; }
html[data-theme="light"] .catalog-count,
html[data-theme="light"] .catalog-empty { color: #536a6e; }
html[data-theme="light"] .mode-chip { color: #536a6e; }
html[data-theme="light"] .mode-chip.active { color: #075d55; background: #e3f3ed; border-color: rgba(20,143,128,.32); }
html[data-theme="light"] .btn.secondary { color: #18333a; background: #fff; border-color: rgba(24,51,58,.17); }
html[data-theme="light"] .btn.secondary:hover { color: #075d55; background: #edf7f3; border-color: #148f80; }
html[data-theme="light"] .footer-rights { color: #52686c; }

html[data-theme="dark"] .lab-controls,
html[data-theme="dark"] .lab-history,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .details-panel,
html[data-theme="dark"] .evidence-panel,
html[data-theme="dark"] .route-card,
html[data-theme="dark"] .feature-item,
html[data-theme="dark"] .concept-grid article,
html[data-theme="dark"] .exam-side,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .exam-topic-card,
html[data-theme="dark"] .study-picker-head,
html[data-theme="dark"] .reaction-group-trigger,
html[data-theme="dark"] .reaction-badge,
html[data-theme="dark"] .material-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .reaction-list-item,
html[data-theme="dark"] .review-item,
html[data-theme="dark"] .test-choice,
html[data-theme="dark"] .answer-option,
html[data-theme="dark"] .example-card,
html[data-theme="dark"] .source-panel,
html[data-theme="dark"] .progress-overview {
  color: #eaf0ef;
  background-color: #192a33;
  border-color: rgba(130,216,208,.17);
}
html[data-theme="dark"] .catalog-popover { background: #14232a; border-color: rgba(130,216,208,.2); }
html[data-theme="dark"] .catalog-list { background: #101d24; border-color: rgba(130,216,208,.14); }
html[data-theme="dark"] .catalog-option { color: #eaf0ef; background: #1b2d35; border-color: rgba(130,216,208,.08); box-shadow: none; }
html[data-theme="dark"] .catalog-option:hover,
html[data-theme="dark"] .catalog-option.selected { color: #f2faf8; background: #25433f; border-color: #39b7a5; }
html[data-theme="dark"] .catalog-option span { color: #9ce4d4; }
html[data-theme="dark"] .mode-chip { color: #a8b8bc; }
html[data-theme="dark"] .mode-chip.active { color: #d9f6ef; background: rgba(57,183,165,.16); border-color: rgba(57,183,165,.34); }
html[data-theme="dark"] .btn.secondary { color: #eaf0ef; background: rgba(255,255,255,.025); border-color: rgba(234,240,239,.18); }
html[data-theme="dark"] .btn.secondary:hover { background: rgba(57,183,165,.1); border-color: rgba(130,216,208,.4); }

/* Keep searchable menus in normal flow: no covering adjacent controls; use a bounded inner scroll. */
.catalog-popover { position: relative; z-index: 2; min-width: 0; max-width: 100%; max-height: min(300px, 42vh); overflow: hidden; gap: 7px; padding: 8px; animation: none; }
.catalog-list { display: grid; gap: 5px; min-width: 0; max-height: min(190px, 28vh); overflow-x: hidden; overflow-y: auto; padding: 4px; scrollbar-width: thin; overscroll-behavior: contain; }
.catalog-option { min-width: 0; min-height: 42px; gap: 8px; padding: 8px 9px; border-radius: 9px; text-align: right; line-height: 1.45; }
.catalog-option strong { min-width: 0; overflow-wrap: anywhere; }
.catalog-option span { flex: 0 0 auto; max-width: 42%; overflow-wrap: anywhere; font-size: 10px; text-align: left; }
.catalog-trigger, .catalog-option, .reaction-group-trigger, .reaction-badge, .material-card, .history-item { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.catalog-trigger:hover, .catalog-option:hover, .reaction-group-trigger:hover, .reaction-badge:hover, .material-card:hover, .history-item:hover { transform: none; }
.control-group, .control-actions, .confirmation-links { min-width: 0; }
.confirmation-links { flex-wrap: wrap; }
.confirmation-links .btn { flex: 1 1 100%; min-width: 0; min-height: 42px; white-space: normal; line-height: 1.45; }
.study-picker, .study-content, .reaction-badges, .reaction-badge { min-width: 0; }
.footer-rights { display: block; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .catalog-popover { max-height: min(250px, 38vh); }
  .catalog-list { max-height: min(145px, 23vh); }
  .catalog-option { min-height: 44px; }
  .catalog-option span { max-width: 38%; }
}

html[data-theme="light"] .learning-route {
  border-color: rgba(24,90,91,.15);
  background: linear-gradient(135deg, #f7fbf9, #e8f2ee);
  box-shadow: 0 12px 28px rgba(24,66,67,.07);
}
html[data-theme="light"] .route-heading h2 { color: #18333a; }
html[data-theme="light"] .route-card { border-color: rgba(24,51,58,.12); background: rgba(255,255,255,.9); }
html[data-theme="light"] .route-card:hover { border-color: #148f80; background: #fff; }
html[data-theme="light"] .route-card > b { color: #0b766a; }
html[data-theme="light"] .route-contact { background: #edf7f3; }
html[data-theme="light"] .home-safety summary { color: #795c32; }


/* Study page dark-mode contrast: prevent pale-on-white text and brighten secondary labels. */
html[data-theme="dark"] .study-content {
  color: #eaf0ef;
  background: #172830;
  border-color: rgba(130,216,208,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
html[data-theme="dark"] .study-content h3,
html[data-theme="dark"] .study-content h4,
html[data-theme="dark"] .study-content .study-block strong,
html[data-theme="dark"] .study-content .fact strong { color: #f0f6f4; }
html[data-theme="dark"] .study-content .study-subtitle,
html[data-theme="dark"] .study-content .study-block p,
html[data-theme="dark"] .study-content .fact span,
html[data-theme="dark"] .study-content .color-card span { color: #c1d0cf; }
html[data-theme="dark"] .study-content .study-facts .fact,
html[data-theme="dark"] .study-content .color-card {
  color: #eaf0ef;
  background: #20363e;
  border-color: rgba(130,216,208,.18);
}
html[data-theme="dark"] .study-content .color-card strong { color: #f0f6f4; }
html[data-theme="dark"] .study-content .study-toggle,
html[data-theme="dark"] .study-page .study-back { color: #9ce4d4; }
html[data-theme="dark"] .study-page .study-search input {
  color: #f0f6f4;
  background: #1b2d35;
  border-color: rgba(130,216,208,.28);
}
html[data-theme="dark"] .study-page .study-search input::placeholder { color: #b5c5c6; opacity: 1; }
html[data-theme="dark"] .study-page .filter-chip {
  color: #c3d1d0;
  border-color: rgba(130,216,208,.24);
  background: rgba(255,255,255,.025);
}
html[data-theme="dark"] .study-page .filter-chip:hover,
html[data-theme="dark"] .study-page .filter-chip.active {
  color: #effbf7;
  border-color: #56c7b4;
  background: #1c403a;
}
html[data-theme="dark"] .study-page .reaction-list-item {
  color: #eaf0ef;
  background: #1b2d35;
  border-color: rgba(130,216,208,.18);
}
html[data-theme="dark"] .study-page .reaction-list-item:hover,
html[data-theme="dark"] .study-page .reaction-list-item.active {
  color: #f2faf8;
  background: #25433f;
  border-color: #39b7a5;
}
html[data-theme="dark"] .study-page .reaction-list-item span { color: #c1d0cf; }
html[data-theme="dark"] .study-page .reaction-list-item small { color: #efd19a; }
html[data-theme="dark"] .study-page .study-picker-head span { color: #c1d0cf; }
html[data-theme="dark"] .study-page .study-results-count { color: #d0dcda; border-color: rgba(130,216,208,.2); }

/* Keep color-example names legible in both themes; the cards sit outside .study-content. */
html[data-theme="light"] .study-page .color-card strong { color: #18333a; }
html[data-theme="dark"] .study-page .color-card strong { color: #f0f6f4; }
html[data-theme="dark"] .study-page .color-card span { color: #c1d0cf; }

/* Zoom narrows the CSS viewport; allow responsive layouts and avoid clipping sticky content. */
.app-shell { overflow-x: clip; }
.container, .page, .paper, .exam-layout, .study-layout, .example-grid { min-width: 0; max-width: 100%; }
.exam-question, .answer-option, .example-card, .color-card { overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .study-layout, .exam-layout { grid-template-columns: minmax(0, 1fr); }
  .study-content { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 700px) {
  .example-grid { grid-template-columns: minmax(0, 1fr); }
  .exam-card { padding: clamp(16px, 4vw, 28px); }
  .exam-question { font-size: clamp(17px, 4.5vw, 20px); }
}

/* وضوح إضافي للمشهد الثلاثي الأبعاد والنصوص داخل المعمل */
.lab-bench { background: radial-gradient(ellipse at 50% 55%, rgba(84,168,164,.2), transparent 48%), linear-gradient(145deg, #31505a 0%, #1d343d 47%, #0e1d24 100%); }
.lab-bench::before { opacity: .58; }
.three-scene-host { inset: 58px 5% 48px; }
.lab-webgl-canvas { filter: saturate(1.12) contrast(1.04); }
.bench-topline { right: 18px; left: 18px; color: rgba(239,250,247,.78); font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.bench-labels { max-width: min(58%, 330px); padding: 11px 13px; border-color: rgba(152,224,207,.34); background: rgba(5,19,24,.88); box-shadow: 0 8px 24px rgba(0,0,0,.22); backdrop-filter: blur(9px); }
.bench-labels b { font-size: 10px; }
.bench-labels strong { color: #f2fffb; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
html[data-theme="light"] .bench-labels strong { color: #18333a; }
.scene-instructions { z-index: 6; max-width: min(70%, 470px); padding: 7px 12px; border: 1px solid rgba(148,220,207,.28); border-radius: 10px; background: rgba(5,18,23,.78); color: #effbf7; font-size: 12px; font-weight: 600; line-height: 1.6; text-shadow: none; backdrop-filter: blur(8px); }
.scene-angle { z-index: 7; min-height: 40px; padding: 8px 13px; border-color: rgba(137,219,204,.35); background: rgba(7,22,27,.82); color: #ecfffa; font-size: 11px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
@media(max-width:700px) { .three-scene-host { inset: 56px 1% 54px; } .bench-topline { right: 12px; left: 12px; font-size: 9px; } .scene-instructions { max-width: calc(100% - 22px); font-size: 10px; } .bench-labels { max-width: 62%; } .bench-labels strong { font-size: 10px; } }

/* تنظيم المعادلات إلى تجربة أساسية واختبار تأكيدي مستقل */
.result-stage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin-top: 12px; }
.result-stage-grid .result-stage { min-width: 0; height: 100%; margin: 0; padding: clamp(16px, 2.4vw, 22px); border-radius: 16px; }
.result-stage.primary-stage { border-inline-start: 3px solid #39b7a5; }
.result-stage.confirmatory-stage { border-inline-start: 3px solid #d6a15c; background: linear-gradient(145deg, rgba(38,34,26,.36), rgba(22,31,34,.52)); }
html[data-theme="light"] .result-stage.confirmatory-stage { background: linear-gradient(145deg, #fff9ef, #f5f7f4); }
.result-stage .result-tag { display: inline-flex; margin-bottom: 5px; padding: 5px 9px; border-radius: 99px; background: rgba(57,183,165,.12); color: #75d8c6; font-size: 10px; font-weight: 750; }
.result-stage.confirmatory-stage .result-tag { background: rgba(214,161,92,.13); color: #f0c888; }
html[data-theme="light"] .result-stage.confirmatory-stage .result-tag { color: #885515; }
.result-stage h3 { margin: 7px 0 11px; font-size: 17px; line-height: 1.6; }
.result-stage > p, .confirmation-method > p { font-size: 12px; line-height: 1.9; }
.result-stage .inference-limit { margin: 10px 0; padding: 10px 12px; border-radius: 9px; background: rgba(123,150,145,.1); font-size: 11px; }
.confirmation-method { margin-top: 11px; padding: 13px; border: 1px solid rgba(214,161,92,.22); border-radius: 12px; background: rgba(214,161,92,.045); }
.confirmation-method h4 { margin: 0 0 7px; color: var(--mist); font-size: 13px; }
html[data-theme="light"] .confirmation-method h4 { color: var(--navy); }
.confirmation-method small { display: block; margin-top: 8px; color: var(--muted); line-height: 1.7; }
.confirmation-links { margin-top: 10px; }
.confirmation-links .btn { white-space: normal; text-align: center; }
.equation-section { display: grid; gap: 8px; margin: 13px 0; padding: 12px; border: 1px solid rgba(125,157,151,.2); border-radius: 12px; background: rgba(6,18,22,.2); }
html[data-theme="light"] .equation-section { background: rgba(255,255,255,.64); }
.equation-section h4 { margin: 0 0 1px; color: var(--teal); font-size: 12px; }
.equation-row { display: grid; gap: 4px; min-width: 0; }
.equation-row small { color: var(--muted); font-size: 10px; }
.equation-section .equation-box { margin: 0; font-size: 13px; line-height: 1.85; }
.primary-conclusion { padding-top: 7px; border-top: 1px solid rgba(127,158,152,.16); }
.details-stage { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.details-stage h3 { margin-top: 0; }
.confirmatory-detail, .confirmatory-study-block { border-inline-start: 3px solid #d6a15c; }
.study-block.primary-study-block { border-inline-start: 3px solid #39b7a5; }
@media(max-width:760px) { .result-stage-grid { grid-template-columns: minmax(0,1fr); } .result-stage-grid .result-stage { height: auto; } }

.result-stage-grid.mode-primary .primary-stage { box-shadow: 0 0 0 1px rgba(57,183,165,.16), 0 12px 30px rgba(5,22,24,.08); }
.result-stage-grid.mode-confirmatory .confirmatory-stage { box-shadow: 0 0 0 1px rgba(214,161,92,.22), 0 12px 30px rgba(5,22,24,.08); }
.result-stage.locked-stage { opacity: .86; border-style: dashed; }
.result-stage.linked-confirmation { border-top: 2px solid rgba(214,161,92,.52); }

.nested-confirmation-step { margin-inline-start: 8px; border-inline-start: 2px solid rgba(214,161,92,.65); background: rgba(214,161,92,.035); }


/* أداء الهواتف الضعيفة: نقلل المؤثرات غير الضرورية ونحافظ على قابلية القراءة. */
@media (max-width: 700px) {
  .topbar { backdrop-filter: none; background: rgba(16,28,36,.98); }
  .grain, body::after { display: none; }
  .lab-preview, .lab-bench { box-shadow: 0 8px 24px rgba(4,12,16,.2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}




/* بطاقات الحفظ السريع: لون المادة ظاهر، والنص واضح في الثيمين */
.quick-colors { align-items: stretch; }
.color-card { display: grid; align-content: start; gap: 0; min-width: 0; }
.color-swatch { min-height: 30px; box-shadow: inset 0 0 0 1px rgba(16,28,36,.08), 0 2px 8px rgba(0,0,0,.08); }
.color-card strong { margin-bottom: 5px; color: #18333a; font-size: 12px; }
.color-card span { display: block; color: #536b6f; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
html[data-theme="dark"] .study-page .quick-colors { gap: 10px; }
html[data-theme="dark"] .study-page .color-card { background: #20363e; border-color: rgba(130,216,208,.24); box-shadow: 0 8px 18px rgba(0,0,0,.16); }
html[data-theme="dark"] .study-page .color-card strong { color: #f4fbf8; font-size: 12px; }
html[data-theme="dark"] .study-page .color-card span { color: #d0ddda; font-size: 11px; line-height: 1.7; }
html[data-theme="light"] .study-page .color-card { background: #f8fbfa; border-color: rgba(24,51,58,.16); }
html[data-theme="light"] .study-page .color-card strong { color: #18333a; }
html[data-theme="light"] .study-page .color-card span { color: #536b6f; }

/* أزرار التواصل لا تعرض الرقم عند الضغط المطول أو معاينة الرابط */
.support-channel { appearance: none; width: 100%; font: inherit; text-align: right; cursor: pointer; }
html[data-theme="light"] .support-channel { color: #18333a; }
html[data-theme="dark"] .support-channel:focus-visible,
html[data-theme="light"] .support-channel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* Study flow: ion families are separated and selected reactions get a clear, standalone answer card. */
.study-ion-group { margin: 16px 0 22px; }
.study-ion-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; padding: 0 2px 9px; border-bottom: 1px solid var(--line); }
.study-ion-group > header h3 { margin: 0; color: var(--mist); font-size: 15px; }
.study-ion-group > header span { color: var(--muted); font-size: 10px; }
html[data-theme="light"] .study-ion-group > header { border-color: rgba(24,51,58,.15); }
html[data-theme="light"] .study-ion-group > header h3 { color: #18333a; }
.study-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.study-picker { width: 100%; }
.study-picker-head { position: relative; gap: 8px; margin-bottom: 14px; padding: 17px 18px; border-radius: 15px; }
.study-picker-head strong { font-size: 16px; }
.study-picker-head .study-back { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(57,183,165,.28); border-radius: 9px; color: var(--cyan); background: rgba(57,183,165,.08); }
.study-picker-head .study-back:hover { background: rgba(57,183,165,.16); }
html[data-theme="light"] .study-picker-head .study-back { color: #0b766a; border-color: rgba(20,143,128,.26); background: #edf8f5; }
.study-detail-wrap { margin-top: 16px; }
.study-content { position: static; max-height: none; overflow: visible; width: 100%; padding: clamp(18px, 3vw, 30px); border: 1px solid rgba(130,216,208,.2); border-radius: 18px; background: #172830; box-shadow: 0 14px 34px rgba(0,0,0,.2); }
.study-content > h3 { margin-top: 13px; font-size: clamp(21px, 3vw, 29px); }
.study-content .study-toggle { margin-top: 12px; }
.study-empty-detail { display: grid; gap: 5px; padding: 19px; border: 1px dashed rgba(130,216,208,.3); border-radius: 14px; color: var(--muted); background: rgba(57,183,165,.035); }
.study-empty-detail strong { color: var(--mist); font-size: 13px; }
.study-empty-detail span { font-size: 11px; line-height: 1.7; }
html[data-theme="light"] .study-empty-detail { border-color: rgba(20,143,128,.3); color: #5e7478; background: #f4faf7; }
html[data-theme="light"] .study-empty-detail strong { color: #18333a; }
.study-page .reaction-badges { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.study-page .reaction-badge { min-height: 66px; padding: 12px 14px; }
.study-page .reaction-badge strong { font-size: 12px; }
.study-page .material-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 700px) {
  .study-layout { grid-template-columns: minmax(0, 1fr); }
  .study-page .material-cards, .study-page .reaction-badges { grid-template-columns: minmax(0, 1fr); }
  .study-content { padding: 17px; }
}

/* Independent PDF summary library and per-file download cards. */
.summary-file-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 900px; }
.summary-file-card { padding: clamp(20px, 4vw, 32px); border: 1px solid rgba(130,216,208,.22); border-radius: 20px; color: var(--mist); background: linear-gradient(145deg, rgba(34,56,65,.9), rgba(19,35,43,.96)); box-shadow: var(--shadow); }
.summary-file-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.summary-file-index { padding: 6px 10px; border: 1px solid rgba(57,183,165,.28); border-radius: 99px; color: var(--cyan); background: rgba(57,183,165,.1); font-size: 11px; font-weight: 700; }
.summary-file-meta { color: var(--muted); font-size: 11px; }
.summary-file-card h2 { margin: 18px 0 4px; font-size: clamp(21px, 3.5vw, 29px); letter-spacing: -.03em; }
.summary-file-subtitle { margin: 0; color: var(--cyan); font-size: 12px; }
.summary-topics { margin-top: 20px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8,20,26,.25); }
.summary-topics h3 { margin: 0 0 10px; font-size: 13px; }
.summary-topics ul { display: grid; gap: 8px; margin: 0; padding: 0 20px 0 0; color: #c1d0cf; font-size: 12px; line-height: 1.75; }
.summary-topics li::marker { color: var(--teal); }
.summary-download { margin-top: 18px; }
.summary-download small { margin-right: 4px; padding-right: 10px; border-right: 1px solid rgba(16,28,36,.28); font-size: 10px; font-weight: 500; }
.summary-library-note { max-width: 900px; margin-top: 14px; color: var(--muted); font-size: 11px; }
html[data-theme="light"] .summary-file-card { border-color: rgba(24,90,91,.16); color: #18333a; background: linear-gradient(145deg, #fff, #edf5f2); }
html[data-theme="light"] .summary-file-index { color: #0b766a; }
html[data-theme="light"] .summary-file-meta, html[data-theme="light"] .summary-library-note { color: #5e7478; }
html[data-theme="light"] .summary-file-subtitle { color: #0b766a; }
html[data-theme="light"] .summary-topics { border-color: rgba(24,51,58,.12); background: #f6faf8; }
html[data-theme="light"] .summary-topics ul { color: #455e60; }
@media(max-width:700px) { .summary-file-card { padding: 18px; } .summary-file-meta { width: 100%; } }

/* Make the student's next action visually unmistakable. */
.study-picker-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.study-current-kicker { color: var(--muted); font-size: 10px; font-weight: 700; }
.study-picker-head .study-back-prominent { min-height: 42px; padding: 0 14px; border: 1px solid rgba(57,183,165,.48); border-radius: 11px; color: #071c1b; background: linear-gradient(135deg, #79ddcb, #39b7a5); font-size: 12px; font-weight: 800; box-shadow: 0 7px 18px rgba(31,164,146,.2); }
.study-picker-head .study-back-prominent:hover { color: #071c1b; background: #91e8d8; transform: translateY(-1px); }
.study-back-bottom { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 16px; padding: 15px 17px; border: 1px solid rgba(57,183,165,.35); border-radius: 14px; color: var(--mist); background: linear-gradient(100deg, rgba(57,183,165,.16), rgba(57,183,165,.045)); text-align: right; }
.study-back-bottom > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; color: #071c1b; background: var(--teal); font-size: 23px; font-weight: 800; }
.study-back-bottom > span:last-child { display: grid; gap: 3px; }
.study-back-bottom strong { font-size: 12px; }
.study-back-bottom small { color: var(--muted); font-size: 10px; }
html[data-theme="light"] .study-back-bottom { color: #18333a; border-color: rgba(20,143,128,.28); background: linear-gradient(100deg, #e0f5ef, #f5faf8); }
html[data-theme="light"] .study-back-bottom small, html[data-theme="light"] .study-current-kicker { color: #5e7478; }
.lab-step-guide { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; margin: 14px 0 8px; padding: 10px 8px; border: 1px solid rgba(130,216,208,.14); border-radius: 13px; background: rgba(8,20,26,.35); }
.lab-step { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 5px; border-radius: 9px; opacity: .58; }
.lab-step.is-current { opacity: 1; background: rgba(57,183,165,.12); box-shadow: inset 0 0 0 1px rgba(57,183,165,.24); }
.lab-step.is-complete { opacity: 1; }
.lab-step > b { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(130,216,208,.25); border-radius: 50%; color: var(--cyan); font-size: 11px; }
.lab-step.is-current > b { color: #071c1b; border-color: var(--teal); background: var(--teal); }
.lab-step.is-complete > b { color: #071c1b; border-color: #81d9c8; background: #81d9c8; }
.lab-step > span { display: grid; gap: 1px; min-width: 0; }
.lab-step strong { color: var(--mist); font-size: 10px; }
.lab-step small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.lab-step-guide > i { color: var(--cyan); font-size: 13px; font-style: normal; }
.lab-run-actions { margin-top: 14px; padding: 11px; border: 1px solid rgba(130,216,208,.16); border-radius: 13px; background: rgba(8,20,26,.25); }
.lab-action-hint { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 600; line-height: 1.7; }
.lab-run-actions .control-actions { margin-top: 8px; }
.lab-start-btn { min-height: 50px; flex: 1.25 !important; font-size: 14px; box-shadow: 0 8px 22px rgba(57,183,165,.22); }
.lab-start-btn:disabled { color: #94a6a7; background: #34474c; box-shadow: none; cursor: not-allowed; opacity: .8; }
.followup-callout { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: center; margin-top: 15px; padding: 13px; border: 1px solid rgba(231,181,106,.42); border-radius: 14px; background: linear-gradient(120deg, rgba(231,181,106,.16), rgba(231,181,106,.055)); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.followup-callout-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #21170a; background: var(--warm); font-size: 14px; font-weight: 800; }
.followup-callout-copy { display: grid; gap: 3px; }
.followup-callout-copy strong { color: #f2cf98; font-size: 12px; }
.followup-callout-copy small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.followup-action { grid-column: 1 / -1; min-height: 45px; width: 100%; font-size: 12px; font-weight: 800; }
.followup-callout.is-complete { border-color: rgba(57,183,165,.35); background: rgba(57,183,165,.08); }
.followup-callout.is-complete .followup-callout-icon { color: #08201c; background: var(--teal); }
.followup-callout.is-complete .followup-callout-copy strong { color: var(--cyan); }
html[data-theme="light"] .lab-step-guide, html[data-theme="light"] .lab-run-actions { border-color: rgba(24,51,58,.12); background: #f3f8f6; }
html[data-theme="light"] .lab-step strong { color: #18333a; }
html[data-theme="light"] .lab-step small { color: #5e7478; }
html[data-theme="light"] .lab-action-hint { color: #0b766a; }
html[data-theme="light"] .followup-callout { background: linear-gradient(120deg, #fff5e4, #fffaf0); }
html[data-theme="light"] .followup-callout-copy strong { color: #765222; }
html[data-theme="light"] .followup-callout-copy small { color: #5e7478; }
@media(max-width:700px) {
  .study-picker-head-row { align-items: stretch; flex-direction: column-reverse; }
  .study-picker-head .study-back-prominent { width: 100%; justify-content: center; }
  .lab-step-guide { gap: 2px; padding: 7px 4px; }
  .lab-step { flex-direction: column; text-align: center; gap: 4px; padding: 5px 2px; }
  .lab-step > span { justify-items: center; }
  .lab-step small { font-size: 8px; }
  .lab-step-guide > i { font-size: 10px; }
  .lab-run-actions { padding: 9px; }
  .lab-run-actions .control-actions { flex-direction: column; }
  .lab-start-btn { width: 100%; }
}

.lab-empty-state { display: grid; justify-items: center; gap: 13px; min-height: 380px; padding: clamp(24px, 5vw, 56px); border: 1px solid rgba(130,216,208,.22); border-radius: 22px; background: radial-gradient(circle at 50% 25%, rgba(57,183,165,.12), transparent 42%), linear-gradient(145deg, rgba(34,56,65,.88), rgba(19,35,43,.96)); text-align: center; box-shadow: var(--shadow); }
.empty-state-number { color: var(--cyan); font-size: 11px; font-weight: 700; }
.empty-state-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(130,216,208,.28); border-radius: 20px; color: #07221e; background: var(--teal); font-size: 34px; box-shadow: 0 10px 30px rgba(57,183,165,.2); }
.lab-empty-state h2 { margin: 2px 0 0; color: var(--mist); font-size: clamp(21px, 3vw, 30px); }
.lab-empty-state p { max-width: 470px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.lab-empty-cta { min-height: 48px; padding-inline: 22px; font-weight: 800; }
.lab-empty-state > small { color: var(--muted); font-size: 10px; }
.catalog-category { display: grid; gap: 5px; padding: 7px 0; }
.catalog-category > strong { padding: 4px 9px; color: var(--cyan); font-size: 10px; }
html[data-theme="light"] .lab-empty-state { border-color: rgba(24,90,91,.16); background: radial-gradient(circle at 50% 25%, rgba(57,183,165,.12), transparent 42%), linear-gradient(145deg, #fff, #edf5f2); }
html[data-theme="light"] .lab-empty-state h2 { color: #18333a; }
html[data-theme="light"] .lab-empty-state p, html[data-theme="light"] .lab-empty-state > small { color: #5e7478; }
@media(max-width:900px) { .lab-empty-state { min-height: 300px; } }


/* Study menus follow the selected theme explicitly, including nested item text and states. */
html[data-theme="light"] .study-page .study-picker-head,
html[data-theme="light"] .study-page .reaction-group-trigger {
  color: #18333a;
  background: #f2f7f4;
  border-color: rgba(24,51,58,.14);
}
html[data-theme="light"] .study-page .study-picker-head strong,
html[data-theme="light"] .study-page .reaction-group-trigger b { color: #18333a; }
html[data-theme="light"] .study-page .study-picker-head span,
html[data-theme="light"] .study-page .reaction-group-trigger small { color: #5e7478; }
html[data-theme="light"] .study-page .reaction-group-trigger:hover,
html[data-theme="light"] .study-page .reaction-group.is-open .reaction-group-trigger {
  color: #123b39;
  background: #e8f5f0;
  border-color: #148f80;
}
html[data-theme="light"] .study-page .reaction-badge {
  color: #18333a;
  background: #fff;
  border-color: rgba(24,51,58,.14);
}
html[data-theme="light"] .study-page .reaction-badge strong { color: #18333a; }
html[data-theme="light"] .study-page .reaction-badge span { color: #5e7478; }
html[data-theme="light"] .study-page .reaction-badge:hover,
html[data-theme="light"] .study-page .reaction-badge.active {
  color: #123b39;
  background: #edf8f5;
  border-color: #148f80;
}
html[data-theme="light"] .study-page .material-card {
  color: #18333a;
  background: #fff;
  border-color: rgba(24,51,58,.14);
}
html[data-theme="light"] .study-page .material-card strong { color: #18333a; }
html[data-theme="light"] .study-page .material-card small { color: #5e7478; }
html[data-theme="light"] .study-page .filter-chip {
  color: #415b5f;
  background: #fff;
  border-color: rgba(24,51,58,.17);
}
html[data-theme="light"] .study-page .filter-chip:hover,
html[data-theme="light"] .study-page .filter-chip.active {
  color: #075d55;
  background: #e3f3ed;
  border-color: #148f80;
}
html[data-theme="light"] .study-page .study-results-count { color: #536a6e; }


/* Progressive fallback reaction: reagent first, then nuclei, gas, and settling. */
.lab-bench.reaction-running.has-primary-solid .precipitate {
  height: 29%;
  opacity: .98;
  clip-path: inset(100% 0 0);
  animation: labPrecipitateNucleation 2.45s .82s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes labPrecipitateNucleation {
  0% { clip-path: inset(100% 0 0); filter: blur(5px); opacity: 0; }
  24% { clip-path: inset(78% 0 0); filter: blur(2.6px); opacity: .58; }
  68% { clip-path: inset(28% 0 0); filter: blur(.7px); opacity: .88; }
  100% { clip-path: inset(0); filter: blur(0); opacity: .98; }
}
.lab-bench.reaction-running.has-primary-solid .solid-grains i {
  animation: labGrainSettle .92s cubic-bezier(.17,.8,.25,1) both;
}
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(1) { animation-delay: 1.02s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(2) { animation-delay: 1.18s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(3) { animation-delay: 1.34s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(4) { animation-delay: 1.52s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(5) { animation-delay: 1.68s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(6) { animation-delay: 1.84s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(7) { animation-delay: 2s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(8) { animation-delay: 2.14s; }
.lab-bench.reaction-running.has-primary-solid .solid-grains i:nth-child(9) { animation-delay: 2.28s; }
@keyframes labGrainSettle {
  0% { opacity: 0; transform: translateY(-26px) scale(.35) rotate(-10deg); }
  68% { opacity: .56; }
  100% { opacity: .68; transform: translateY(0) scale(1) rotate(0); }
}
.lab-bench.reaction-running.has-primary-gas .bubbles {
  opacity: 0;
  animation: labGasBubbles 1.45s .62s infinite ease-in;
}
@keyframes labGasBubbles {
  0% { opacity: 0; transform: translateY(18px) scale(.7); }
  24% { opacity: .74; }
  100% { opacity: 0; transform: translateY(-82px) scale(1.12); }
}
.lab-bench:not(.has-primary-gas) .bubbles { display: none; }
.lab-bench.reaction-running.has-primary-gas.effect-gas .gas-particles,
.lab-bench.reaction-running.has-primary-gas.effect-gas-precipitate .gas-particles {
  opacity: 0;
  animation: labGasAppears 1.85s .54s ease-out both;
}
@keyframes labGasAppears {
  0% { opacity: 0; filter: blur(8px); transform: translateY(8px) scale(.84); }
  58% { opacity: .54; filter: blur(5px); }
  100% { opacity: .72; filter: blur(5px); transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lab-bench.reaction-running.has-primary-solid .precipitate,
  .lab-bench.reaction-running.has-primary-solid .solid-grains i,
  .lab-bench.reaction-running.has-primary-gas .bubbles,
  .lab-bench.reaction-running.has-primary-gas.effect-gas .gas-particles,
  .lab-bench.reaction-running.has-primary-gas.effect-gas-precipitate .gas-particles {
    animation: none;
  }
  .lab-bench.reaction-running.has-primary-solid .precipitate { clip-path: inset(0); filter: none; opacity: .98; }
  .lab-bench.reaction-running.has-primary-solid .solid-grains i { opacity: .68; transform: none; }
  .lab-bench.reaction-running.has-primary-gas .bubbles { opacity: .37; }
  .lab-bench.reaction-running.has-primary-gas.effect-gas .gas-particles,
  .lab-bench.reaction-running.has-primary-gas.effect-gas-precipitate .gas-particles { opacity: .72; }
}

/* Light-theme contrast guard: study navigation and nested labels stay light and readable. */
html[data-theme="light"] .study-page .study-picker,
html[data-theme="light"] .study-page .study-ion-group,
html[data-theme="light"] .study-page .material-cards,
html[data-theme="light"] .study-page .reaction-badges { color: #18333a; }
html[data-theme="light"] .study-page .study-ion-group > header span,
html[data-theme="light"] .study-page .material-card bdi { color: #536a6e; }
html[data-theme="light"] .study-page .study-empty-detail,
html[data-theme="light"] .study-page .study-detail-wrap,
html[data-theme="light"] .study-page .study-content { color: #18333a; background-color: #fff; }
html[data-theme="light"] .study-page .study-content p,
html[data-theme="light"] .study-page .study-content li,
html[data-theme="light"] .study-page .study-content .study-subtitle,
html[data-theme="light"] .study-page .study-content .fact span,
html[data-theme="light"] .study-page .study-content .color-card span,
html[data-theme="light"] .study-page .study-content .study-block p { color: #455e60; }
html[data-theme="light"] .study-page .study-content h2,
html[data-theme="light"] .study-page .study-content h3,
html[data-theme="light"] .study-page .study-content h4,
html[data-theme="light"] .study-page .study-content strong,
html[data-theme="light"] .study-page .study-content .fact strong { color: #18333a; }
html[data-theme="light"] .study-page .study-content .equation-box { color: #18333a; background: #edf5f2; }
html[data-theme="light"] .study-page .filter-chip.active,
html[data-theme="light"] .study-page .filter-chip:hover { color: #075d55; }

/* A playful, brief quiz rhythm with clear correctness and reduced-motion support. */
.exam-question { animation: quizQuestionIn .38s cubic-bezier(.2,.75,.25,1) both; }
.answers .answer-option { animation: quizOptionIn .34s cubic-bezier(.2,.75,.25,1) both; }
.answers .answer-option:nth-child(2) { animation-delay: .035s; }
.answers .answer-option:nth-child(3) { animation-delay: .07s; }
.answers .answer-option:nth-child(4) { animation-delay: .105s; }
.answer-option.correct { animation: quizCorrect .52s ease both; }
.answer-option.wrong { animation: quizWrong .42s ease both; }
.exam-cheer { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 16px; border: 1px solid transparent; border-radius: 14px; font-size: 13px; animation: quizCheer .48s cubic-bezier(.16,.9,.26,1.25) both; }
.exam-cheer > span { flex: none; font-size: 25px; line-height: 1; }
.exam-cheer.is-correct { color: #12634e; background: #e6f7ed; border-color: #a8dec4; }
.exam-cheer.is-incorrect { color: #76531b; background: #fff5dd; border-color: #ecd28f; }
.exam-next-btn { animation: quizNextIn .35s .08s ease both; }
@keyframes quizQuestionIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes quizOptionIn { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes quizCorrect { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes quizWrong { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 65% { transform: translateX(3px); } }
@keyframes quizCheer { 0% { opacity: 0; transform: translateY(8px) scale(.97); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes quizNextIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
html[data-theme="dark"] .exam-cheer.is-correct { color: #d7f9e6; background: #18382f; border-color: #3f8066; }
html[data-theme="dark"] .exam-cheer.is-incorrect { color: #fff1cc; background: #453a23; border-color: #8b7140; }
@media (prefers-reduced-motion: reduce) {
  .exam-question, .answers .answer-option, .answer-option.correct, .answer-option.wrong, .exam-cheer, .exam-next-btn { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

/* Global readable text defaults: unified ink colors across every route and theme. */
html[data-theme="light"] body { color: #18333a; }
html[data-theme="dark"] body { color: #eaf0ef; }
html[data-theme="light"] body :is(h1, h2, h3, h4, h5, h6) { color: #18333a; }
html[data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6) { color: #f0f6f4; }
html[data-theme="light"] body :is(p, li, small, label, summary, figcaption, dt, dd) { color: #435b5f; }
html[data-theme="dark"] body :is(p, li, small, label, summary, figcaption, dt, dd) { color: #c3d0d2; }
html[data-theme="light"] body a:not(.btn):not(.nav-link):not(.footer-legal a) { color: #075d55; }
html[data-theme="dark"] body a:not(.btn):not(.nav-link):not(.footer-legal a) { color: #9ce4d4; }
html[data-theme="light"] body :is(input, select, textarea) { color: #18333a; }
html[data-theme="dark"] body :is(input, select, textarea) { color: #f0f6f4; }
html[data-theme="light"] body :is(input, textarea)::placeholder { color: #5b7074; opacity: 1; }
html[data-theme="dark"] body :is(input, textarea)::placeholder { color: #b9c7c9; opacity: 1; }
/* Preserve deliberate semantic/action colors after the page-wide text defaults. */
html[data-theme="light"] body :is(.eyebrow, .result-tag, .catalog-option span, .progress-kicker, .summary-file-index, .summary-file-subtitle, .study-back, .study-toggle, .lab-action-hint) { color: #075d55; }
html[data-theme="dark"] body :is(.eyebrow, .result-tag, .catalog-option span, .progress-kicker, .summary-file-index, .summary-file-subtitle, .study-back, .study-toggle, .lab-action-hint) { color: #9ce4d4; }
html[data-theme="light"] body .btn:not(.secondary):not(.ghost):not(.warm-action) { color: #ffffff; background-color: #0b6d62; }
html[data-theme="light"] body .btn:not(.secondary):not(.ghost):not(.warm-action):hover { color: #ffffff; background-color: #075d55; }
html[data-theme="light"] body :is(.answer-option.correct, .answer-option.wrong) { color: #18333a; }

/* Fix the few legacy muted/accent inks that fell below readable contrast on pale surfaces. */
html[data-theme="light"] :is(.brand-copy span, .header-note, .footer-brand span, .footer-rights, .lab-controls .field-help) { color: #52686c; }
html[data-theme="light"] :is(.reaction-badge:hover, .reaction-badge.active, .catalog-option:hover, .catalog-option.selected, .catalog-trigger:hover, .catalog-trigger.open, .material-card:hover, .material-card:focus-visible, .btn.secondary:hover, .route-card:hover, .study-page .reaction-group-trigger:hover, .study-page .reaction-group.is-open .reaction-group-trigger, .study-page .reaction-badge:hover, .study-page .reaction-badge.active, .study-page .filter-chip:hover, .study-page .filter-chip.active) { color: #075d55; }
html[data-theme="light"] :is(.catalog-option:hover, .catalog-option.selected) :is(strong, span) { color: #075d55; }