:root {
  --navy: #123b57;
  --navy-2: #0b2c42;
  --teal: #0a7b78;
  --teal-soft: #e7f5f3;
  --gold: #d8a928;
  --red: #b7443e;
  --green: #2f7d4a;
  --ink: #18303f;
  --muted: #617481;
  --line: #d7e0e5;
  --paper: #f4f7f9;
  --white: #fff;
  --shadow: 0 10px 28px rgba(18, 59, 87, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: linear-gradient(145deg, #edf4f7, #f8fafb 58%, #edf3f5); }
button, input, textarea { font: inherit; }
button { border: 0; border-radius: 10px; padding: 9px 13px; font-weight: 780; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: .47; cursor: not-allowed; }
.primary-btn { background: var(--teal); color: #fff; box-shadow: 0 4px 10px rgba(10,123,120,.18); }
.ghost-btn { background: #eef3f5; color: var(--navy); border: 1px solid #cad6dc; }
.small-btn { padding: 7px 10px; font-size: 12px; }
.card { background: rgba(255,255,255,.96); border: 1px solid rgba(197,211,219,.9); border-radius: 15px; box-shadow: var(--shadow); }
.hidden { display: none !important; }
.eyebrow { margin: 0; color: var(--teal); font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .12em; }
.skip-link { position: fixed; left: 10px; top: -50px; z-index: 10000; background: #fff; padding: 10px; }
.skip-link:focus { top: 10px; }

.app-header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 7px 18px; color: #fff; background: linear-gradient(105deg, var(--navy-2), var(--navy)); box-shadow: 0 4px 15px rgba(5,34,51,.24); }
.brand-block { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #24a7a2, #0a7b78); font-size: 21px; font-weight: 900; }
.brand-block h1 { margin: 2px 0 0; font-size: 18px; white-space: nowrap; }
.app-header .eyebrow { color: #88ddd7; }
.header-actions { display: flex; gap: 7px; align-items: center; }
.header-link { display: inline-flex; align-items: center; justify-content: center; padding: 9px 13px; border-radius: 10px; font-weight: 780; text-decoration: none; white-space: nowrap; }
.app-header .ghost-btn { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.app-header .primary-btn { background: #fff; color: var(--navy); }

main { height: calc(100dvh - 58px); padding: 10px 14px 12px; overflow: hidden; }
.screen { height: 100%; min-height: 0; }

/* Home */
.home-screen { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 9px; max-width: 1500px; margin: 0 auto; }
.home-intro { padding: 12px 16px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(380px,.7fr); gap: 16px; align-items: center; }
.home-intro h2 { margin: 4px 0 4px; font-size: clamp(20px,2vw,27px); }
.home-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.hero-equations { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.hero-equations span { padding: 8px 7px; border-radius: 9px; text-align: center; font-size: 12px; font-weight: 800; color: var(--navy); background: #eef5f7; border: 1px solid #d8e4e9; }
.student-row { padding: 8px 12px; display: grid; grid-template-columns: auto minmax(220px,1fr) auto; align-items: center; gap: 9px; }
.student-row label { font-size: 12px; font-weight: 800; }
input, textarea { border: 1px solid #bfcdd5; border-radius: 9px; padding: 8px 10px; color: var(--ink); background: #fff; }
.toggle-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.toggle-label input { width: 17px; height: 17px; }
#resumeSlot:empty { display:none; }
.resume-box { padding: 8px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-left:4px solid var(--teal); font-size: 13px; }
.experiment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; min-height: 0; }
.experiment-card { padding: 14px; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; overflow: hidden; position: relative; }
.experiment-card::after { content:""; position:absolute; width:110px; height:110px; border-radius:50%; right:-40px; top:-46px; background:var(--accent-soft); }
.exp-head { display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.exp-icon { width: 43px; height: 43px; border-radius: 13px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-size:24px; }
.experiment-card h3 { margin:0; font-size:19px; }
.experiment-card p { margin: 8px 0; color: var(--muted); font-size:12.5px; line-height:1.36; }
.exp-meta { display:flex; flex-wrap:wrap; gap:5px; }
.exp-meta span { padding:4px 7px; border-radius:999px; background:#eef3f6; font-size:10.5px; font-weight:800; }
.exp-equation { margin-top:8px; padding:7px 8px; border-left:3px solid var(--accent); background:#f7fafb; font-size:11.5px; font-weight:800; color:var(--navy); }
.exp-start { width:100%; margin-top:9px; background:var(--accent); color:#fff; padding:9px 10px; }
.safety-card { padding: 8px 12px; border-left:4px solid var(--gold); font-size:11.5px; color:var(--muted); }
.safety-card strong { color:var(--ink); }

/* Lab */
.lab-screen { display:grid; grid-template-rows: 54px minmax(0,1fr) 82px; gap:8px; }
.lab-topbar { padding:8px 12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.6fr) auto; gap:14px; align-items:center; }
.lab-title-block h2 { margin:2px 0 0; font-size:18px; }
.step-summary { text-align:right; font-size:12px; font-weight:800; color:var(--muted); }
.progress-track,.quality-track { height:7px; border-radius:999px; background:#e1e9ed; overflow:hidden; }
.progress-track { margin-top:5px; }
.progress-track span,.quality-track span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),#4bc2bb); transition:width .3s ease; }
.split-lock { padding:7px 9px; border-radius:9px; background:var(--teal-soft); color:var(--teal); font-size:11px; font-weight:850; white-space:nowrap; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.62fr); gap:8px; min-height:0; }
.visual-panel,.task-panel { min-height:0; }
.visual-panel { padding:9px; display:flex; flex-direction:column; }
.panel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; height:38px; flex:0 0 auto; }
.panel-toolbar h3 { margin:2px 0 0; font-size:15px; }
.visual-stage { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid #c8d6dd; border-radius:12px; background:#eaf1f4; }
.view-half { min-width:0; min-height:0; position:relative; overflow:hidden; }
.macro-half { background:linear-gradient(#edf6f9 0 72%,#d7c1a3 72% 74%,#ecd8bc 74%); }
.particle-half { border-left:1px solid #bacbd3; background:radial-gradient(circle at 50% 42%,#173f56,#071d2b); }
.view-label { position:absolute; z-index:20; top:7px; left:8px; padding:4px 7px; border-radius:7px; background:rgba(255,255,255,.9); color:var(--navy); font-size:9px; font-weight:900; letter-spacing:.08em; }
.particle-label { color:#fff; background:rgba(4,22,33,.68); }
.macro-view,.particle-view { width:100%; height:100%; min-height:0; }
.macro-view { position:relative; touch-action:none; user-select:none; }
.particle-view { position:relative; }
.particle-view canvas { display:block; width:100%; height:100%; border-radius:12px; background:linear-gradient(180deg,#eef8ff,#d9edf8); }
.particle-legend { position:absolute; left:7px; right:7px; bottom:7px; display:flex; gap:5px; flex-wrap:wrap; }
.legend-item { display:inline-flex; align-items:center; gap:4px; color:#fff; background:rgba(0,0,0,.36); border-radius:999px; padding:3px 6px; font-size:8.5px; }
.legend-dot { width:7px; height:7px; border-radius:50%; }
.observation-strip { flex:0 0 auto; margin-top:6px; padding:7px 9px; border-radius:9px; background:var(--teal-soft); font-size:11.5px; line-height:1.3; min-height:31px; }

.task-panel { padding:12px; display:flex; flex-direction:column; overflow:hidden; }
.step-heading { flex:0 0 auto; }
.step-heading h3 { margin:3px 0 4px; font-size:18px; }
.step-heading p { margin:0 0 7px; color:var(--muted); font-size:12px; line-height:1.32; }
.hint-box { flex:0 0 auto; padding:7px 9px; margin-bottom:8px; border-left:4px solid var(--gold); border-radius:8px; background:#fff9e7; font-size:11.3px; line-height:1.3; }
.action-section { flex:0 0 auto; }
.action-section h4,.question-section h4 { margin:0 0 6px; font-size:12.5px; line-height:1.3; }
.stage-checklist { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.stage-checklist li { display:grid; grid-template-columns:19px 1fr; align-items:start; gap:6px; padding:5px 7px; border:1px solid #d6e0e5; border-radius:8px; background:#fafcfd; font-size:10.8px; line-height:1.25; }
.stage-checklist li::before { content:attr(data-number); width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#dfe9ed; color:var(--navy); font-weight:900; font-size:9px; }
.stage-checklist li.current { border-color:var(--teal); background:#f0fbfa; }
.stage-checklist li.done { color:#35644a; background:#f0f8f3; border-color:#b9d9c4; }
.stage-checklist li.done::before { content:"✓"; color:#fff; background:var(--green); }
.stage-checklist li.error { border-color:#e2b8b5; background:#fff5f4; }
.feedback-box { margin-top:6px; padding:7px 9px; border-radius:8px; font-size:10.8px; line-height:1.3; }
.feedback-box.success { background:#edf8f1; border-left:4px solid var(--green); }
.feedback-box.warning { background:#fff3e8; border-left:4px solid #d47b22; }
.feedback-box.error { background:#fff1f0; border-left:4px solid var(--red); }
.question-section { flex:1 1 auto; min-height:0; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); overflow:hidden; }
.question-badge { display:inline-block; margin-bottom:5px; padding:3px 6px; border-radius:999px; background:var(--navy); color:#fff; font-size:9px; font-weight:900; }
.option-list { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.option-btn { width:100%; text-align:left; padding:6px 7px; border:1px solid #cbd7de; background:#fff; color:var(--ink); font-size:10.5px; line-height:1.2; font-weight:650; }
.option-btn:hover:not(:disabled) { border-color:var(--teal); background:#f1fbfa; }
.option-btn.correct { border-color:var(--green); background:#edf8f1; }
.option-btn.incorrect { border-color:var(--red); background:#fff1f0; }
.task-actions { flex:0 0 auto; margin-top:auto; padding-top:7px; display:flex; justify-content:space-between; gap:8px; }
.task-actions button { padding:8px 11px; }

.data-panel { padding:7px 10px; display:grid; grid-template-columns:145px 1fr 290px; gap:9px; align-items:center; }
.data-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.data-heading h3 { margin:2px 0 0; font-size:13px; }
.data-heading .small-btn { display:inline-block; padding:4px 7px; font-size:9px; }
.data-tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.data-tile { min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:8px; background:#f9fbfc; }
.data-tile span { display:block; color:var(--muted); font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.data-tile strong { display:block; margin-top:2px; font-size:12px; overflow-wrap:anywhere; }
.quality-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.quality-row > div > span { display:block; margin-bottom:4px; color:var(--muted); font-size:9px; font-weight:800; }

/* Workbench equipment */
.workbench { position:absolute; inset:0; overflow:hidden; }
.bench-note { position:absolute; top:31px; left:8px; right:8px; z-index:5; text-align:center; color:var(--navy); font-size:9.5px; font-weight:800; pointer-events:none; }
.drag-item { position:absolute; z-index:8; touch-action:none; cursor:grab; filter:drop-shadow(0 3px 3px rgba(22,47,61,.18)); }
.drag-item.dragging { cursor:grabbing; z-index:50; filter:drop-shadow(0 8px 8px rgba(22,47,61,.26)); }
.drag-item.locked { cursor:default; }
.drop-target { position:absolute; z-index:2; border:2px dashed rgba(18,59,87,.22); border-radius:12px; display:grid; place-items:center; color:rgba(18,59,87,.65); font-size:8.5px; font-weight:800; text-align:center; padding:3px; }
.drop-target.active { border-color:var(--teal); background:rgba(10,123,120,.08); }
.drop-target.complete { border-style:solid; border-color:rgba(47,125,74,.45); background:rgba(47,125,74,.06); }
.tool-label { position:absolute; left:50%; transform:translateX(-50%); bottom:-15px; white-space:nowrap; color:var(--navy); font-size:8px; font-weight:850; }

.beaker-tool { width:72px; height:92px; border:4px solid #9db4c0; border-top:0; border-radius:0 0 14px 14px; background:rgba(255,255,255,.52); overflow:hidden; }
.beaker-tool::before { content:""; position:absolute; left:8px; top:12px; width:12px; height:54px; border-left:1px solid #8fa7b2; background:repeating-linear-gradient(to bottom,transparent 0 9px,#8fa7b2 9px 10px); }
.beaker-liquid { position:absolute; left:0; right:0; bottom:0; height:0%; background:rgba(91,179,217,.52); transition:height .18s linear, background .2s; }
.beaker-solid { position:absolute; left:8px; right:8px; bottom:5px; height:0; border-radius:50% 50% 8px 8px; background:#f5f1dc; transition:height .25s; }
.beaker-solid.visible { height:22px; }

.mortar-tool { width:82px; height:42px; border-radius:8px 8px 42px 42px; border:4px solid #a9b5ba; background:linear-gradient(#e9eef0,#bdc8cd); }
.mortar-fill { position:absolute; left:14px; right:14px; bottom:6px; height:10px; border-radius:50%; background:var(--sample-colour,#c4a45a); opacity:0; transition:all .22s ease; }
.mortar-fill.visible { opacity:1; }
.mortar-fill.ground { left:18px; right:18px; bottom:7px; height:8px; background:radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--sample-colour,#c4a45a) 86%, white 14%) 0 18%, transparent 19%), radial-gradient(circle at 50% 62%, var(--sample-colour,#c4a45a) 0 16%, transparent 17%), radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--sample-colour,#c4a45a) 84%, black 16%) 0 14%, transparent 15%), radial-gradient(circle at 35% 78%, var(--sample-colour,#c4a45a) 0 12%, transparent 13%), radial-gradient(circle at 62% 28%, color-mix(in srgb, var(--sample-colour,#c4a45a) 88%, white 12%) 0 13%, transparent 14%); }
.mortar-fragments { position:absolute; inset:9px 16px 8px; opacity:0; pointer-events:none; transition:opacity .22s ease; background:radial-gradient(circle at 18% 42%, color-mix(in srgb, var(--sample-colour,#c4a45a) 86%, white 14%) 0 8%, transparent 9%), radial-gradient(circle at 36% 58%, var(--sample-colour,#c4a45a) 0 7%, transparent 8%), radial-gradient(circle at 53% 34%, color-mix(in srgb, var(--sample-colour,#c4a45a) 84%, black 16%) 0 6%, transparent 7%), radial-gradient(circle at 70% 51%, var(--sample-colour,#c4a45a) 0 8%, transparent 9%), radial-gradient(circle at 84% 38%, color-mix(in srgb, var(--sample-colour,#c4a45a) 88%, white 12%) 0 6%, transparent 7%), radial-gradient(circle at 30% 24%, var(--sample-colour,#c4a45a) 0 5%, transparent 6%); }
.mortar-fragments.visible { opacity:1; }
.pestle-tool { width:18px; height:92px; border-radius:10px; background:linear-gradient(90deg,#aab7bc,#edf2f4,#9caab0); transform:rotate(-18deg); }

.sample-jar { width:54px; height:67px; border:3px solid #9fb1b9; border-radius:8px 8px 14px 14px; background:rgba(255,255,255,.68); }
.sample-jar::before { content:""; position:absolute; left:5px; right:5px; top:-8px; height:10px; border-radius:4px; background:#52656f; }
.sample-fill { position:absolute; left:5px; right:5px; bottom:5px; height:30px; border-radius:4px 4px 9px 9px; background:var(--sample-colour,#c4a45a); }

.scoop-tool { width:70px; height:16px; border-radius:9px; background:linear-gradient(#e9eef0,#9faeb4); transform-origin:left center; }
.scoop-tool::after { content:""; position:absolute; right:-15px; top:-4px; width:24px; height:24px; border-radius:50% 50% 45% 45%; background:#b8c4c9; border:2px solid #9baab0; }
.scoop-fill { position:absolute; right:-10px; top:1px; width:15px; height:9px; border-radius:50%; background:var(--sample-colour,#c4a45a); opacity:0; z-index:2; }
.scoop-fill.visible { opacity:1; }

.balance-tool { width:106px; height:72px; border-radius:11px; background:linear-gradient(#e6ecef,#bfcbd1); border:2px solid #a8b7be; }
.balance-pan { position:absolute; left:23px; top:-9px; width:60px; height:15px; border-radius:50%; background:#879aa4; box-shadow:inset 0 -3px 3px rgba(0,0,0,.15); }
.balance-screen { position:absolute; left:12px; right:12px; bottom:10px; height:24px; display:grid; place-items:center; border-radius:5px; background:#183c40; color:#d8ffd2; font:800 13px/1 ui-monospace,monospace; }
.balance-btn { position:absolute; bottom:-22px; padding:4px 7px; font-size:8px; border-radius:6px; }
.balance-btn.tare { left:5px; }
.balance-btn.record { right:5px; background:var(--teal); color:white; }

.bottle-tool { width:49px; height:74px; border:3px solid #9db1bb; border-radius:9px 9px 12px 12px; background:rgba(244,251,253,.86); display:grid; place-items:center; text-align:center; color:var(--navy); font-size:8.5px; font-weight:900; padding-top:7px; }
.bottle-tool::before { content:""; position:absolute; top:-11px; width:24px; height:13px; border-radius:5px 5px 0 0; background:#42555e; }
.bottle-tool.wrong { border-color:#d3918d; background:#fff2f1; }
.dropper-tool { width:66px; height:15px; border-radius:8px; background:linear-gradient(90deg,#52666f 0 23%,#dce7ea 23% 85%,#93a6ae 85%); }
.dropper-tool::after { content:""; position:absolute; right:-13px; top:4px; border-left:14px solid #90a5ad; border-top:4px solid transparent; border-bottom:4px solid transparent; }

.stirrod-tool { width:8px; height:105px; border-radius:8px; background:linear-gradient(90deg,#b9cbd3,#fff,#9fb3bc); }
.filter-funnel-tool { width:76px; height:80px; background:rgba(225,239,244,.9); clip-path:polygon(0 0,100% 0,62% 61%,56% 100%,44% 100%,38% 61%); border-top:4px solid #96acb6; }
.filter-paper-tool { width:42px; height:34px; background:#fffdf3; border:1px solid #dad6c7; clip-path:polygon(0 0,100% 0,50% 100%); }
.filter-paper-tool.torn { clip-path:polygon(0 0,100% 0,100% 100%,58% 100%,50% 68%,42% 100%,0 100%); }
.flask-tool { width:73px; height:91px; border:4px solid #9fb4be; border-radius:12px 12px 27px 27px; background:rgba(255,255,255,.48); overflow:hidden; }
.flask-tool::before { content:""; position:absolute; left:23px; top:-28px; width:21px; height:32px; border:4px solid #9fb4be; border-bottom:0; background:rgba(255,255,255,.48); }
.flask-liquid { position:absolute; left:0; right:0; bottom:0; height:0%; background:rgba(99,181,216,.5); transition:height .3s; }
.hotplate-tool { width:105px; height:31px; border-radius:8px; background:linear-gradient(#566971,#2f424a); }
.hotplate-tool::before { content:""; position:absolute; left:12px; right:12px; top:-8px; height:12px; border-radius:50%; background:#1f2d33; border:2px solid #778a92; }
.hotplate-control { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); padding:4px 8px; font-size:8px; white-space:nowrap; }
.thermometer { position:absolute; width:10px; height:92px; border-radius:8px; background:#e8f1f4; border:2px solid #9eb2bb; }
.thermometer::after { content:""; position:absolute; left:2px; right:2px; bottom:2px; height:var(--temp,18%); border-radius:5px; background:#db5c51; transition:height .2s; }

.oven-tool { width:116px; height:92px; border-radius:9px; background:linear-gradient(#5e6e75,#293940); border:3px solid #81939b; }
.oven-window { position:absolute; left:12px; top:14px; width:70px; height:48px; border:3px solid #9babb1; background:linear-gradient(135deg,#24353d,#617783); }
.oven-button { position:absolute; right:7px; bottom:10px; padding:4px 6px; font-size:8px; }
.desiccator-tool { width:88px; height:66px; border:3px solid #9fb4be; border-radius:44px 44px 13px 13px; background:rgba(225,241,246,.58); }
.desiccator-tool::before { content:""; position:absolute; top:-9px; left:35px; width:14px; height:10px; border-radius:50% 50% 0 0; background:#7f949d; }
.crucible-tool { width:47px; height:31px; border-radius:5px 5px 22px 22px; border:3px solid #c2c7c9; background:linear-gradient(#f9f8f2,#d7d8d4); }
.crucible-fill { position:absolute; left:7px; right:7px; bottom:4px; height:8px; border-radius:50%; background:#f1ead2; opacity:0; }
.crucible-fill.visible { opacity:1; }
.amber-cover { width:61px; height:48px; border-radius:8px; background:rgba(101,61,21,.55); border:3px solid rgba(77,45,14,.72); }

.sieve-tool { width:88px; height:34px; border:4px solid #899da6; border-radius:50%; background:repeating-linear-gradient(45deg,transparent 0 5px,#82969f 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#82969f 5px 6px); }
.drying-tray { width:96px; height:35px; border-radius:50%; background:#bdc9ce; border:3px solid #9aabb2; }
.volumetric-tool { width:55px; height:105px; border:3px solid #9fb4be; border-radius:8px 8px 23px 23px; background:rgba(255,255,255,.45); }
.volumetric-tool::before { content:""; position:absolute; left:19px; top:-45px; width:11px; height:48px; border:3px solid #9fb4be; border-bottom:0; }
.volume-mark { position:absolute; left:0; right:0; top:16px; height:2px; background:#c84a43; }
.volume-liquid { position:absolute; left:0; right:0; bottom:0; height:0%; background:rgba(99,181,216,.48); transition:height .2s; }
.fumehood { width:145px; height:112px; border:4px solid #859aa3; background:linear-gradient(rgba(219,235,241,.72),rgba(181,204,213,.64)); }
.fumehood::before { content:"FUME HOOD"; position:absolute; left:0; right:0; top:4px; text-align:center; font-size:8px; color:var(--navy); font-weight:900; }
.site-map { position:absolute; inset:42px 18px 24px; border-radius:14px; background:linear-gradient(28deg,#a8c78d,#d5c497 46%,#9ab77c 47% 68%,#c9af7e 69%); border:2px solid #829b73; }
.site-point { position:absolute; width:24px; height:24px; border-radius:50%; border:2px dashed #fff; background:rgba(101,68,40,.5); display:grid; place-items:center; color:#fff; font-size:8px; font-weight:900; }
.site-point.collected { background:var(--green); border-style:solid; }
.composite-jar { width:58px; height:72px; border:3px solid #9fb1b9; border-radius:8px 8px 15px 15px; background:rgba(255,255,255,.66); }
.composite-fill { position:absolute; left:5px; right:5px; bottom:5px; height:0; background:#826a4f; border-radius:4px 4px 9px 9px; transition:height .2s; }

.action-chip { position:absolute; z-index:12; padding:5px 7px; border-radius:7px; font-size:8px; font-weight:850; background:#fff; color:var(--navy); border:1px solid #b9c9d0; box-shadow:0 2px 7px rgba(18,59,87,.12); }
.action-chip.primary { background:var(--teal); color:#fff; border-color:var(--teal); }
.action-chip.warn { background:#fff3e8; color:#9a5519; border-color:#e2b483; }
.hold-meter { position:absolute; z-index:15; left:50%; transform:translateX(-50%); bottom:9px; width:170px; height:13px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid #b7c8cf; overflow:hidden; }
.hold-meter span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal),#6ed1ca); }
.hold-meter label { position:absolute; inset:0; display:grid; place-items:center; font-size:7.5px; font-weight:900; color:var(--navy); }

/* Results */
.results-screen { display:grid; grid-template-rows:60px 58px 42px minmax(0,1fr); gap:8px; }
.results-header { padding:8px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.results-header h2 { margin:2px 0 1px; font-size:19px; }
.results-header p { margin:0; color:var(--muted); font-size:11px; }
.results-actions { display:flex; gap:7px; }
.result-summary-strip { padding:7px 10px; display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.summary-tile { min-width:0; padding:5px 7px; border-radius:8px; background:#f3f7f8; border:1px solid #dce5e9; }
.summary-tile span { display:block; color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; }
.summary-tile strong { display:block; margin-top:2px; font-size:13px; overflow-wrap:anywhere; }
.result-tabs { display:flex; padding:4px; gap:4px; }
.result-tab { flex:1; padding:6px 8px; background:#eef3f5; color:var(--muted); font-size:11px; }
.result-tab.active { background:var(--navy); color:#fff; }
.result-content { min-height:0; padding:12px; overflow:hidden; }
.result-pane { display:none; height:100%; min-height:0; }
.result-pane.active { display:block; }
.result-pane h3 { margin:0 0 9px; font-size:16px; }
.report-table { width:100%; border-collapse:collapse; font-size:12px; }
.report-table th,.report-table td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; }
.report-table th { color:var(--muted); font-size:10px; text-transform:uppercase; }
.calculation-layout,.conclusion-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:16px; height:100%; }
.calculation-lines { display:grid; gap:7px; }
.calculation-line { padding:7px 9px; border-radius:8px; background:#f6f9fa; border-left:3px solid var(--teal); font-size:12px; line-height:1.3; }
.student-calculation { align-self:start; padding:12px; border:1px solid var(--line); border-radius:11px; background:#f8fafb; }
.student-calculation label { display:block; margin-bottom:7px; font-weight:800; }
.student-result-row { display:grid; grid-template-columns:1fr auto auto; gap:7px; align-items:center; }
.student-result-row input { min-width:0; }
.error-list,.quiz-list,.notes-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.error-item,.quiz-item,.note-item { padding:8px 9px; border:1px solid var(--line); border-radius:8px; background:#fafcfd; font-size:11px; line-height:1.3; }
.error-item strong,.quiz-item strong { display:block; margin-bottom:2px; }
.conclusion-layout textarea { width:100%; height:calc(100% - 31px); resize:none; }
#reportNotes { max-height:calc(100% - 31px); overflow:auto; }
.empty-state { padding:12px; border-radius:8px; background:#f5f8f9; color:var(--muted); font-size:12px; }

/* Dialog and print */
dialog { border:0; padding:0; border-radius:15px; box-shadow:0 18px 50px rgba(0,0,0,.24); }
dialog::backdrop { background:rgba(8,31,44,.48); }
.dialog-card { width:min(520px,90vw); padding:18px; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; }
.dialog-head h2 { margin:0 0 12px; font-size:20px; }
.icon-btn { width:34px; height:34px; border-radius:50%; background:#eef3f5; }
.dialog-card label { display:block; font-weight:800; margin-bottom:6px; }
.dialog-card textarea { width:100%; resize:vertical; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }

@media (max-width: 1080px) {
  .lab-layout { grid-template-columns:minmax(0,1.4fr) minmax(290px,.68fr); }
  .data-panel { grid-template-columns:120px 1fr 240px; }
  .brand-block h1 { font-size:16px; }
  .split-lock { display:none; }
  .lab-topbar { grid-template-columns:minmax(0,1fr) minmax(220px,.6fr); }
}

@media (max-width: 820px) {
  .header-link { display:none; }
  html, body { overflow:auto; }
  body { min-height:100%; }
  main { height:auto; min-height:calc(100dvh - 58px); overflow:visible; padding:8px; }
  .screen { height:auto; min-height:calc(100dvh - 74px); }
  .home-screen { grid-template-rows:auto; }
  .home-intro { grid-template-columns:1fr; }
  .hero-equations { grid-template-columns:1fr; }
  .student-row { grid-template-columns:1fr; }
  .experiment-grid { grid-template-columns:1fr; }
  .lab-screen { grid-template-rows:auto auto auto; }
  .lab-topbar { grid-template-columns:1fr; }
  .step-summary { text-align:left; }
  .lab-layout { grid-template-columns:1fr; }
  .visual-panel { min-height:620px; }
  .visual-stage { min-height:470px; grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .particle-half { border-left:0; border-top:1px solid #bacbd3; }
  .task-panel { min-height:520px; overflow:visible; }
  .data-panel { grid-template-columns:1fr; }
  .data-tiles { grid-template-columns:repeat(3,1fr); }
  .results-screen { grid-template-rows:auto auto auto minmax(500px,1fr); }
  .result-summary-strip { grid-template-columns:repeat(2,1fr); }
  .calculation-layout,.conclusion-layout { grid-template-columns:1fr; }
  .result-content { min-height:560px; overflow:auto; }
}

@media print {
  html, body { overflow:visible; background:#fff; }
  .app-header,.home-screen,.lab-screen,.result-tabs,.results-actions { display:none !important; }
  main { height:auto; padding:0; overflow:visible; }
  .results-screen { display:block !important; height:auto; }
  .results-header,.result-summary-strip,.result-content { box-shadow:none; border:1px solid #bbb; margin-bottom:10px; }
  .result-content { overflow:visible; }
  .result-pane { display:block !important; height:auto; margin-bottom:18px; page-break-inside:avoid; }
  .result-pane::before { content:attr(data-result-pane); display:block; text-transform:capitalize; font-weight:900; margin-bottom:7px; }
  .calculation-layout,.conclusion-layout { display:block; }
  textarea { min-height:120px; }
}

/* Compact classroom-laptop layout: preserve the no-scroll viewport on short desktop screens. */
@media (min-width: 821px) and (max-height: 720px) {
  .app-header { height:52px; padding-top:5px; padding-bottom:5px; }
  .brand-mark { width:32px; height:32px; }
  .brand-block h1 { font-size:15px; }
  main { height:calc(100dvh - 52px); padding:7px 10px 8px; }
  .home-screen { gap:6px; }
  .home-intro { padding:8px 12px; }
  .home-intro h2 { font-size:20px; }
  .home-intro p { font-size:11.5px; }
  .hero-equations span { padding:6px; font-size:10.5px; }
  .student-row,.safety-card { padding-top:6px; padding-bottom:6px; }
  .experiment-card { padding:10px; }
  .experiment-card p { margin:5px 0; font-size:11px; }
  .exp-head h3 { font-size:16px; }
  .exp-icon { width:36px; height:36px; }
  .exp-equation { margin-top:5px; padding:5px 7px; font-size:10px; }
  .exp-start { margin-top:6px; padding:7px; }
  .lab-screen { grid-template-rows:48px minmax(0,1fr) 70px; gap:6px; }
  .lab-layout { gap:6px; }
  .panel-toolbar { height:31px; }
  .panel-toolbar h3 { font-size:13px; }
  .visual-panel { padding:7px; }
  .observation-strip { margin-top:4px; padding:5px 7px; min-height:26px; font-size:10px; }
  .task-panel { padding:8px; }
  .step-heading h3 { font-size:15px; }
  .step-heading p,.hint-box { font-size:10px; }
  .hint-box { margin-bottom:5px; padding:5px 7px; }
  .stage-checklist { gap:3px; }
  .stage-checklist li { padding:3px 5px; font-size:9.5px; line-height:1.18; }
  .question-section { margin-top:5px; padding-top:5px; }
  .option-btn { padding:4px 5px; font-size:9px; }
  .feedback-box { padding:5px 7px; font-size:9.3px; }
  .task-actions { padding-top:4px; }
  .task-actions button { padding:6px 9px; }
  .data-panel { padding:5px 8px; grid-template-columns:120px 1fr 250px; gap:6px; }
  .data-tile { padding:4px 5px; }
  .data-tile strong { font-size:10px; }
  .results-screen { grid-template-rows:52px 50px 36px minmax(0,1fr); gap:6px; }
  .results-header,.result-summary-strip,.result-content { padding-top:6px; padding-bottom:6px; }
}


/* Version 4 weighing alignment */
.balance-tool { z-index:10; }
.beaker-tool { z-index:9; }
.balance-btn { z-index:30; pointer-events:auto; }
.balance-btn:disabled { opacity:.78; cursor:default; }
.beaker-tool.on-balance { z-index:11; }

.receiving-beaker{transform:scale(.96);}
.funnel-paper-internal{position:absolute;left:50%;top:42%;width:34px;height:24px;background:#fffdf3;border:1px solid #d8d4c7;clip-path:polygon(0 0,100% 0,50% 100%);transform:translate(-50%,-50%);opacity:.96;}
.funnel-paper-internal.rinsed{background:#ffffff;}
.filter-stream{position:absolute;width:12px;height:96px;background:linear-gradient(180deg,rgba(138,203,240,.92),rgba(138,203,240,.12));left:50%;top:46%;transform:translateX(-50%);border-radius:0 0 8px 8px;opacity:0;}
.filter-stream.active{opacity:.95;animation:filterFlow .7s linear 1 both;}
.filter-stream.rinsed{background:linear-gradient(180deg,rgba(180,220,245,.9),rgba(180,220,245,.16));}
@keyframes filterFlow{0%{background-position:0 -20px;}100%{background-position:0 90px;}}
.oven-crucible,.desiccator-crucible{position:absolute;left:50%;top:54%;width:36px;height:22px;border-radius:5px 5px 18px 18px;border:2px solid #d1d4d2;background:linear-gradient(#f9f8f2,#d7d8d4);transform:translate(-50%,-50%);box-shadow:inset 0 -8px 0 rgba(230,223,190,.9);}
.desiccator-crucible{top:44%;}

.filter-stream.pour{background:linear-gradient(180deg,rgba(138,203,240,.96),rgba(138,203,240,.15));}
.filter-stream.paper-rinse,.filter-stream.paper-rinse-final{background:linear-gradient(180deg,rgba(180,220,245,.94),rgba(180,220,245,.15));}
.filter-stream.beaker-rinse{background:linear-gradient(180deg,rgba(160,214,245,.96),rgba(160,214,245,.15));}

/* Version 9 stage controls and filtration updates */
.skip-btn { margin-left:auto; }
.active-crucible { z-index:22; }
.waste-tool { width:82px; height:64px; display:grid; place-items:center; border:3px solid #7d8b92; border-top-width:8px; border-radius:6px 6px 14px 14px; background:linear-gradient(#d8e1e5,#aebbc1); color:#384b56; font-size:12px; font-weight:900; letter-spacing:.08em; }

/* Version 10 combined results and student calculation workspace */
.result-summary-strip { grid-template-columns:repeat(4,1fr); }
.combined-results-layout { display:grid; grid-template-columns:minmax(250px,.78fr) minmax(500px,1.55fr) minmax(300px,.9fr); gap:12px; height:100%; min-height:0; }
.combined-results-section { min-width:0; min-height:0; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fbfcfd; overflow:auto; }
.combined-results-section h3 { margin:0 0 7px; }
.result-instruction { margin:0 0 8px; color:var(--muted); font-size:11px; line-height:1.35; }
.molar-mass-box { display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-bottom:7px; padding:7px; border-radius:9px; background:#eef6f7; border:1px solid #cfe2e5; font-size:11px; }
.molar-mass-box strong { margin-right:3px; }
.molar-mass-box span { padding:3px 6px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.calculation-inputs { display:grid; gap:5px; }
.calculation-entry { display:grid; grid-template-columns:minmax(0,1fr) 145px; gap:8px; align-items:center; padding:6px 7px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.calculation-entry-text { min-width:0; }
.calculation-entry-text strong { display:block; font-size:11px; margin-bottom:2px; }
.calculation-entry-text span { display:block; font-size:10px; line-height:1.25; color:var(--muted); }
.calculation-entry-answer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; }
.calculation-entry-answer input { width:100%; min-width:0; padding:7px 8px; border:2px solid var(--line); border-radius:8px; font:inherit; background:#fff; }
.calculation-entry-answer input.correct { border-color:#2c9b65; background:#effaf4; }
.calculation-entry-answer input.incorrect { border-color:#c85050; background:#fff3f3; }
.calculation-entry-answer span { font-size:10px; font-weight:800; white-space:nowrap; }
.calculation-check-row { display:flex; justify-content:flex-end; margin-top:7px; }
.conclusion-section .conclusion-layout { grid-template-columns:1fr; grid-template-rows:minmax(150px,.8fr) minmax(100px,.6fr); gap:10px; }
.conclusion-section textarea { min-height:120px; height:calc(100% - 28px); }

@media (max-width:1100px) {
  .combined-results-layout { grid-template-columns:1fr; overflow:auto; }
  .combined-results-section { overflow:visible; }
  .calculation-entry { grid-template-columns:1fr; }
  .result-summary-strip { grid-template-columns:repeat(2,1fr); }
}

@media print {
  .combined-results-layout { display:block; height:auto; }
  .combined-results-section { overflow:visible; margin-bottom:10px; page-break-inside:avoid; }
  .calculation-entry { page-break-inside:avoid; }
}