/* ===== Design Tokens ===== */
:root{
  --primary:#2563EB;
  --primary-light:#60A5FA;
  --primary-dark:#1D4ED8;
  --accent:#F59E0B;
  --accent-dark:#D97706;
  --green:#10B981;
  --green-light:#D1FAE5;
  --yellow:#F59E0B;
  --red:#EF4444;
  --red-light:#FEE2E2;
  --purple:#8B5CF6;
  --teal:#14B8A6;
  --bg:#F8FAFC;
  --bg2:#F1F5F9;
  --card:#FFFFFF;
  --text:#0F172A;
  --text2:#475569;
  --muted:#94A3B8;
  --border:#E2E8F0;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow:0 1px 4px rgba(0,0,0,0.06),0 4px 12px rgba(0,0,0,0.04);
  --shadow-hover:0 4px 20px rgba(0,0,0,0.10);
  --transition:all 0.15s ease;
}

/* ===== Reset ===== */
*{box-sizing:border-box;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:#94A3B8;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Microsoft JhengHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:15px;
}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:4px;
}

/* ===== Header / Nav ===== */
header{
  background:#fff;border-bottom:1px solid var(--border);
  padding:0 28px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:0;position:sticky;top:0;z-index:100;height:56px;
}
header .brand{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text);letter-spacing:-0.01em;flex-shrink:0;}
header .brand .logo{width:28px;height:28px;background:var(--primary);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
header .brand .badge{background:var(--primary);color:#fff;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;opacity:.7;}
.nav-scroll-wrap{position:relative;min-width:0;height:100%;}
nav{display:flex;gap:2px;align-items:center;height:100%;}
nav button{background:transparent;border:none;color:var(--text2);padding:0 14px;height:56px;cursor:pointer;font-size:13px;font-family:inherit;font-weight:500;transition:var(--transition);white-space:nowrap;border-bottom:2px solid transparent;position:relative;}
nav button:hover{color:var(--primary);background:rgba(37,99,235,0.04);}
nav button.active{color:var(--primary);font-weight:700;border-bottom-color:var(--primary);}

/* ===== Main Layout ===== */
main{max-width:1040px;margin:0 auto;padding:28px 20px 80px;}
.page{display:none;animation:pageIn .2s ease;}
.page.show{display:block;}
@keyframes pageIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ===== Page Header ===== */
.ph{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.ph-icon{width:40px;height:40px;flex-shrink:0;background:linear-gradient(135deg,var(--primary-dark),var(--primary));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 2px 8px rgba(37,99,235,0.25);}
.ph-title{font-size:20px;font-weight:800;color:var(--text);margin:0 0 2px;line-height:1.2;}
.ph-sub{color:var(--muted);font-size:13px;margin:0;line-height:1.5;}
h1.title{font-size:20px;margin:0 0 4px;font-weight:700;color:var(--primary);}
p.subtitle{color:var(--muted);margin:0 0 22px;font-size:14px;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--radius-sm);border:none;font-family:inherit;font-size:14px;font-weight:700;color:#fff;cursor:pointer;transition:var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.08);}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.14);filter:brightness(1.06);}
.btn:active{transform:translateY(0);filter:brightness(0.98);}
.btn-primary{background:linear-gradient(135deg,var(--primary-dark),var(--primary));}
.btn-accent{background:linear-gradient(135deg,var(--accent-dark),var(--accent));}

/* ===== Grid / Card ===== */
.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);border:1px solid var(--border);transition:var(--transition);}
.card h3{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;}

/* ===== Pill / Stat ===== */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 9px;border-radius:20px;color:#fff;font-weight:600;margin-bottom:6px;letter-spacing:.02em;}
.pill.green{background:var(--green);}
.pill.yellow{background:var(--accent);}
.pill.gray{background:#94A3B8;}
.pill.blue{background:var(--primary);}
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;}
.stat{flex:1 1 120px;text-align:center;background:var(--card);border-radius:var(--radius);padding:16px 14px 14px;box-shadow:var(--shadow);border:1px solid var(--border);}
.stat .num{font-size:26px;font-weight:800;color:var(--primary);line-height:1.2;margin-top:2px;}
.stat .lbl{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;}

/* ===== Unit Cards ===== */
.unit-card{position:relative;border-radius:var(--radius);padding:16px 40px 16px 18px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;transition:var(--transition);border:1px solid var(--border);}
.unit-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--primary-light);}
.unit-card::after{content:'\203A';position:absolute;right:14px;top:16px;font-size:20px;font-weight:800;line-height:1;color:var(--border);transition:var(--transition);}
.unit-card:hover::after{color:var(--primary);transform:translateX(3px);}
.unit-card h4{margin:6px 0 8px;font-size:15px;font-weight:700;color:var(--text);}
.unit-card .desc{font-size:13px;color:var(--text2);line-height:1.6;}
.unit-card-topics{font-size:12px;color:var(--text2);padding:5px 8px;background:var(--bg2);border-radius:6px;display:inline-flex;margin-bottom:2px;}
.progress-bar{height:5px;border-radius:5px;background:var(--bg2);margin-top:10px;overflow:hidden;}
.progress-bar > div{height:100%;background:var(--green);border-radius:5px;transition:width 0.6s ease;}
.unit-card-progress{font-size:12px;color:var(--muted);margin-top:8px;font-weight:600;}
.unit-card-progress.done{color:var(--green);}
.unit-card-progress.partial{color:var(--primary);}

/* ===== Section Blocks ===== */
.section-block{background:var(--card);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--border);scroll-margin-top:114px;}
.section-block h2{font-size:16px;font-weight:700;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.tier-desc{font-size:13px;color:var(--muted);margin:-4px 0 12px;}
.tier-badge{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;color:#fff;letter-spacing:.02em;margin-left:auto;}
.section-block.tier-gifted{border-top:3px solid var(--accent);}
.section-block.tier-gifted h2{color:var(--accent-dark);}
.section-block.tier-gifted .tier-badge{background:var(--accent);}
.section-block.tier-advanced{border-top:3px solid var(--red);}
.section-block.tier-advanced h2{color:#B91C1C;}
.section-block.tier-advanced .tier-badge{background:var(--red);}
.back-link{color:var(--primary);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;font-weight:600;padding:5px 10px;border-radius:6px;background:var(--bg2);transition:var(--transition);}
.back-link:hover{background:var(--border);}
ul.bullets{margin:8px 0 0;padding-left:20px;line-height:1.9;font-size:14px;color:var(--text2);}
ul.bullets li{margin-bottom:2px;}

/* ===== Topic guides ===== */
.topic-cluster-label{display:inline-flex;padding:5px 11px;margin:-2px 0 12px;border-radius:20px;background:#E0F2FE;color:#075985;font-size:12px;font-weight:700;}
.topic-guide-list{display:grid;gap:9px;}
.topic-guide-card{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--card);}
.topic-guide-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:var(--card);font-family:inherit;text-align:left;cursor:pointer;color:var(--text);}
.topic-guide-toggle:hover{background:var(--bg);}
.topic-guide-number{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.topic-guide-heading{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;}
.topic-guide-heading strong{font-size:14px;}
.topic-guide-heading small{font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topic-guide-arrow{font-size:20px;color:var(--primary);transition:transform .2s;}
.topic-guide-toggle[aria-expanded="true"] .topic-guide-arrow{transform:rotate(180deg);}
.topic-guide-body{display:none;padding:0 16px 16px 60px;border-top:1px solid var(--border);background:#FCFDFE;}
.topic-guide-body.show{display:block;}
.topic-guide-body h5{font-size:13px;margin:14px 0 6px;color:var(--primary-dark);}
.topic-guide-body ul{margin:0 0 10px;padding-left:20px;font-size:13px;color:var(--text2);line-height:1.8;}
.topic-note{padding:8px 10px;margin-top:7px;border-radius:6px;font-size:12px;line-height:1.65;}
.topic-note.example{background:#EFF6FF;color:#1E40AF;border-left:3px solid var(--primary);}
.topic-note.tip{background:#FFFBEB;color:#92400E;border-left:3px solid var(--accent);}
.topic-note.trap{background:#FFF1F2;color:#9F1239;border-left:3px solid #FB7185;}
.topic-complete-btn{margin-top:12px;padding:7px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font:700 12px inherit;cursor:pointer;}
.topic-complete-btn.done{background:var(--green-light);border-color:var(--green);color:#065F46;}

/* ===== Unit sub-nav (jump links) ===== */
.unit-subnav{position:sticky;top:56px;z-index:90;display:flex;gap:8px;overflow-x:auto;background:var(--bg);padding:10px 0;margin-bottom:18px;border-bottom:1px solid var(--border);scrollbar-width:none;}
.unit-subnav::-webkit-scrollbar{display:none;}
.subnav-link{flex-shrink:0;padding:7px 14px;border-radius:20px;background:var(--card);border:1.5px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:var(--transition);}
.subnav-link:hover{border-color:var(--primary-light);color:var(--primary);}

/* ===== Simulator: shared chrome ===== */
.sim-tabs{display:flex;gap:6px;margin-bottom:12px;}
.sim-tab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);font-family:inherit;transition:var(--transition);}
.sim-tab:hover{border-color:var(--primary-light);color:var(--primary);}
.sim-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.sim-panel{display:none;}
.sim-panel.show{display:block;}

/* ===== Simulator: function-plot ===== */
.sim-controls{display:flex;gap:24px;flex-wrap:wrap;margin:14px 0;}
.sim-controls label{font-size:14px;font-weight:600;color:var(--text2);display:block;margin-bottom:6px;}
.sim-controls input[type=range]{width:200px;-webkit-appearance:none;height:5px;border-radius:5px;background:var(--bg2);outline:none;cursor:pointer;}
.sim-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);box-shadow:0 1px 4px rgba(37,99,235,0.4);cursor:pointer;}
.sim-readout{font-size:14px;margin-top:6px;color:var(--primary);font-weight:700;background:var(--bg2);padding:5px 10px;border-radius:6px;display:inline-block;}
.sim-canvas-wrap{background:var(--bg);border-radius:var(--radius);padding:14px;margin-top:10px;border:1px solid var(--border);}
.sim-canvas-wrap canvas{cursor:crosshair;}
.sim-hint{font-size:12px;color:var(--muted);display:block;margin:0 0 10px;}
.sim-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;}
.sim-actions .sim-hint{margin:0;}
.sim-reset-btn{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:var(--transition);}
.sim-reset-btn:hover{border-color:var(--primary-light);color:var(--primary);}

/* ===== 圖表↔概念連結：即時導讀與曲線標記 ===== */
.sim-insight{margin-top:12px;padding:11px 14px;background:linear-gradient(135deg,#EFF6FF,#F0FDFA);border:1px solid #BFDBFE;border-left:3px solid var(--primary);border-radius:var(--radius-sm);transition:var(--transition);}
.sim-insight.is-highlight{background:linear-gradient(135deg,#FEF3C7,#FFFBEB);border-color:#FCD34D;border-left-color:var(--accent-dark);}
.sim-insight-title{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--primary);margin-bottom:4px;}
.sim-insight.is-highlight .sim-insight-title{color:var(--accent-dark);}
.sim-insight-body{margin:0;font-size:13px;line-height:1.65;color:var(--text2);}
.sim-annotation-note{margin-top:10px;padding:9px 13px;background:var(--bg2);border-radius:var(--radius-sm);border-left:3px solid var(--accent);font-size:13px;line-height:1.6;color:var(--muted);transition:var(--transition);}
.sim-annotation-note.show{color:var(--text2);background:#FFFBEB;}

/* ===== Simulator: wave-lab / doppler-lab ===== */
.wave-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:12px 0 4px;}
.wave-stat{display:flex;flex-direction:column;gap:2px;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.wave-stat span{font-size:11px;color:var(--muted);font-weight:600;}
.wave-stat strong{font-size:18px;color:var(--primary);font-variant-numeric:tabular-nums;}
.wave-buttons{display:flex;gap:6px;flex-shrink:0;}

/* ===== Simulator: labeled-diagram ===== */
.diagram-wrap{position:relative;background:var(--bg);border-radius:var(--radius);padding:14px;margin-top:10px;border:1px solid var(--border);}
.diagram-wrap svg,.diagram-wrap img{display:block;width:100%;height:auto;border-radius:var(--radius-sm);}
.diagram-hotspot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border-radius:50%;background:var(--primary);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;transition:var(--transition);color:#fff;font-size:11px;font-weight:700;font-family:inherit;line-height:1;display:flex;align-items:center;justify-content:center;animation:hotspotPulse 2.2s ease-in-out infinite;}
.diagram-hotspot:hover,.diagram-hotspot.active{background:var(--accent);transform:scale(1.15);}
.diagram-hotspot.visited{animation:none;}
.diagram-hotspot.visited:not(.active):not(:hover){background:var(--primary-dark);}
@keyframes hotspotPulse{
  0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 0 0 rgba(37,99,235,.35);}
  50%{box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 0 7px rgba(37,99,235,0);}
}
.diagram-progress{margin-top:8px;font-size:12px;color:var(--muted);font-weight:600;}
.diagram-desc{margin-top:12px;padding:10px 14px;background:var(--bg2);border-radius:var(--radius-sm);border-left:3px solid var(--primary);font-size:13px;color:var(--text2);min-height:20px;}

/* ===== Simulator: sort-compare ===== */
.sort-wrap{margin-top:10px;}
.sort-items{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;padding:12px;background:var(--bg);border-radius:var(--radius-sm);border:1px dashed var(--border);min-height:44px;}
.sort-item{padding:8px 14px;background:var(--card);border:1.5px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;transition:var(--transition);}
.sort-item:hover{border-color:var(--primary-light);}
.sort-item.placed{opacity:.35;cursor:not-allowed;}
.sort-item[draggable="true"]{cursor:grab;}
.sort-item[draggable="true"]:active{cursor:grabbing;}
.sort-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.sort-bin{width:100%;min-height:80px;padding:10px;border:1.5px dashed var(--border);border-radius:var(--radius-sm);background:var(--card);font-family:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer;transition:var(--transition);}
.sort-bin.drag-over{border-color:var(--primary);border-style:solid;background:var(--bg2);}
.sort-bin-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px;text-align:center;}
.sort-bin .sort-item{display:inline-block;margin:2px;cursor:default;}
.sort-item.correct{background:var(--green-light);border-color:var(--green);color:#065F46;}
.sort-item.wrong{background:var(--red-light);border-color:var(--red);color:#991B1B;}
.sort-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;}
.sort-result{font-size:14px;font-weight:700;color:var(--primary);}

/* ===== Simulator: inquiry / virtual lab ===== */
.inquiry-intro{margin:10px 0 14px;padding:12px 14px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#EFF6FF,#F0FDFA);border:1px solid #BFDBFE;color:var(--text2);font-size:14px;}
.inquiry-intro p{margin:5px 0 0;font-weight:700;color:var(--text);}
.inquiry-step-tag{display:inline-flex;padding:2px 9px;border-radius:20px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;}
.inquiry-card{margin:12px 0;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);}
.inquiry-card h4,.balance-workspace h4{margin:0 0 12px;font-size:14px;color:var(--text);}
.prediction-choices{display:flex;gap:8px;flex-wrap:wrap;}
.prediction-choices button{padding:8px 13px;border:1.5px solid var(--border);border-radius:20px;background:var(--card);font-family:inherit;color:var(--text2);cursor:pointer;transition:var(--transition);}
.prediction-choices button:hover,.prediction-choices button.selected{border-color:var(--primary);color:var(--primary);background:#EFF6FF;}
.inquiry-feedback{display:none;margin-top:12px;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;color:var(--text2);}
.inquiry-feedback.show{display:block;}
.inquiry-feedback.correct{background:var(--green-light);border-left:3px solid var(--green);color:#065F46;}
.inquiry-feedback.wrong{background:var(--red-light);border-left:3px solid var(--red);color:#991B1B;}
.inquiry-feedback.neutral{background:#EFF6FF;border-left:3px solid var(--primary);}
.lab-controls{margin-bottom:8px;}
.lab-run-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lab-run-row .sim-hint{margin:0;}
.sim-hint.warning{color:#B45309;font-weight:700;}
.lab-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-top:12px;}
.lab-result{display:flex;flex-direction:column;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.lab-result span{font-size:12px;color:var(--muted);}
.lab-result strong{font-size:19px;color:var(--primary);}
.lab-goals{display:grid;gap:7px;margin:12px 0;}
.lab-goal{padding:9px 12px;border-radius:var(--radius-sm);background:var(--bg2);color:var(--text2);font-size:13px;}
.lab-goal.done{background:var(--green-light);color:#065F46;font-weight:700;}
.lab-table-wrap{overflow-x:auto;}
.lab-table{width:100%;border-collapse:collapse;min-width:560px;font-size:12px;background:var(--card);}
.lab-table th,.lab-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;}
.lab-table th:first-child,.lab-table td:first-child{text-align:center;}
.lab-table th{color:var(--text2);background:var(--bg2);font-weight:700;}

/* ===== Simulator: equation balancer ===== */
.balance-workspace{margin-top:12px;padding:16px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);}
.balance-equation{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:18px 8px;background:var(--card);border-radius:var(--radius-sm);}
.balance-term{display:inline-flex;align-items:center;gap:5px;font-size:18px;font-weight:700;color:var(--primary-dark);}
.balance-term input{width:50px;padding:6px;border:1.5px solid var(--border);border-radius:6px;font:700 15px inherit;text-align:center;color:var(--text);}
.balance-symbol,.balance-arrow{font-size:19px;font-weight:800;color:var(--muted);}
.balance-arrow{color:var(--primary);font-size:25px;}
.atom-balance-grid{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0;}
.atom-count{padding:5px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.atom-count.equal{background:var(--green-light);color:#065F46;}
.atom-count.unequal{background:var(--red-light);color:#991B1B;}
.balance-actions{display:flex;gap:8px;margin-top:12px;}

/* ===== Simulator: Punnett lab ===== */
.punnett-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:12px 0;}
.punnett-controls label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--text2);}
.punnett-controls select{min-width:110px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font:600 14px inherit;}
.punnett-mount{margin-top:14px;}
.punnett-grid{display:grid;grid-template-columns:repeat(3,minmax(64px,100px));justify-content:center;gap:4px;}
.punnett-cell{min-height:58px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:18px;font-weight:800;}
.punnett-cell.heading{background:var(--primary);color:#fff;}
.punnett-cell.child.dominant{background:#DBEAFE;color:#1D4ED8;border:1px solid #93C5FD;}
.punnett-cell.child.recessive{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;}
.offspring-sample{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
.sample-result{flex:1 1 300px;font-size:13px;color:var(--text2);}

/* ===== Simulator: sequence builder ===== */
.sequence-list{display:grid;gap:8px;list-style:none;counter-reset:sequence;margin:12px 0;padding:0;}
.sequence-item{counter-increment:sequence;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);font-size:13px;color:var(--text2);}
.sequence-item > span:first-child::before{content:counter(sequence) '. ';font-weight:800;color:var(--primary);}
.sequence-item.correct{border-color:var(--green);background:var(--green-light);color:#065F46;}
.sequence-item.wrong{border-color:#FCA5A5;background:#FFF7F7;}
.sequence-move{display:flex;gap:4px;flex-shrink:0;}
.sequence-move button{width:30px;height:30px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--primary);cursor:pointer;font-weight:800;}
.sequence-move button:disabled{opacity:.3;cursor:not-allowed;}
.sequence-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* ===== Quiz ===== */
.quiz-q{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.quiz-q:last-child{border-bottom:none;}
.quiz-q p.q-text{font-weight:700;margin:0 0 10px;color:var(--text);font-size:15px;}
.q-text .q-num{color:var(--primary);margin-right:2px;}
.quiz-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 14px;margin-bottom:6px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;font-size:14px;font-family:inherit;color:var(--text);transition:var(--transition);}
.quiz-opt:hover{background:var(--bg);border-color:var(--primary-light);}
.quiz-opt.correct{background:var(--green-light);border-color:var(--green);color:#065F46;font-weight:600;}
.quiz-opt.wrong{background:var(--red-light);border-color:var(--red);color:#991B1B;}
.quiz-opt[disabled]{cursor:not-allowed;}
.opt-letter{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bg2);color:var(--text2);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.quiz-opt:hover .opt-letter{background:var(--primary-light);color:#fff;}
.quiz-opt.correct .opt-letter{background:var(--green);color:#fff;}
.quiz-opt.wrong .opt-letter{background:var(--red);color:#fff;}
.opt-text{flex:1;}
.quiz-feedback{font-size:13px;color:var(--text2);margin-top:6px;display:none;padding:8px 12px;background:var(--bg);border-radius:6px;border-left:3px solid var(--border);}
.quiz-feedback.show{display:block;}

/* ===== Flashcards ===== */
.flash-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:10px;}
.flashcard{position:relative;width:100%;max-width:480px;min-height:160px;cursor:pointer;perspective:1400px;transition:transform .18s ease;}
.flashcard:hover{transform:translateY(-2px);}
.flash-inner{position:absolute;inset:0;transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
.flashcard.flipped .flash-inner{transform:rotateY(180deg);}
.flash-face{position:absolute;inset:0;overflow:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;font-weight:600;padding:26px;}
.flash-front{background:linear-gradient(135deg,var(--primary-dark),var(--primary));box-shadow:0 4px 20px rgba(37,99,235,0.25);}
.flash-back{background:linear-gradient(135deg,var(--accent-dark),var(--accent));box-shadow:0 4px 20px rgba(217,119,6,0.25);transform:rotateY(180deg);}
.flash-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.flash-btn{border:none;padding:10px 20px;border-radius:20px;font-size:14px;color:#fff;cursor:pointer;font-weight:600;font-family:inherit;transition:var(--transition);}
.flash-btn:hover{filter:brightness(1.08);}
.flash-btn.forget{background:var(--red);}
.flash-btn.fuzzy{background:var(--yellow);}
.flash-btn.know{background:var(--green);}
.flash-progress{font-size:13px;color:var(--muted);font-weight:500;}

/* ===== Toast ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--text);color:#fff;padding:10px 22px;border-radius:24px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,0.15);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;white-space:nowrap;}
.toast.show{opacity:1;bottom:40px;transform:translateX(-50%) translateY(0);}

/* ===== Course Map Tabs ===== */
.cm-subj-tabs{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.cm-subj-tab{flex:1;min-width:120px;padding:14px 16px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--card);cursor:pointer;font-size:14px;font-weight:700;color:var(--text2);text-align:center;transition:var(--transition);font-family:inherit;line-height:1.5;}
.cm-subj-tab:hover{border-color:var(--primary-light);color:var(--primary);}
.cm-subj-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 2px 10px rgba(37,99,235,0.2);}
.cm-groups{display:grid;gap:20px;}
.cm-group{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.55);}
.cm-group-header{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.cm-group-header h3{margin:0;font-size:16px;color:var(--text);}
.cm-group-order{padding:3px 8px;border-radius:20px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;}
.cm-group-count{margin-left:auto;font-size:11px;color:var(--muted);}

/* ===== Review Stats ===== */
.review-stats-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.review-stat{flex:1 1 120px;background:var(--card);border-radius:var(--radius);padding:12px 14px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--border);}
.review-stat .rs-num{font-size:22px;font-weight:800;color:var(--primary);}
.review-stat .rs-lbl{font-size:12px;color:var(--muted);margin-top:2px;}

/* ===== Simulator: prediction-poll ===== */
.prediction-lock{margin-top:12px;}
.prediction-choices button.prediction-correct-opt{border-color:var(--green);background:var(--green-light);color:#065F46;font-weight:700;}
.prediction-choices button.prediction-correct-opt::after{content:' ✓';}
.prediction-choices button.prediction-chosen-opt{border-color:var(--primary);background:#EFF6FF;color:var(--primary-dark);}
.prediction-reveal{display:grid;gap:10px;margin-top:14px;}
.reveal-block{padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);}
.reveal-block p{margin:6px 0 0;font-size:13px;line-height:1.7;}
.reveal-block.before{background:var(--bg2);}
.reveal-block.after{background:var(--green-light);border-color:var(--green);}
.reveal-label{display:inline-flex;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;background:var(--muted);}
.reveal-block.after .reveal-label{background:var(--green);}

/* ===== Simulator: particle-model ===== */
.particle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px;}
.particle-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:12px;}
.particle-caption{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px;}
.particle-box{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;min-height:96px;padding:12px;background:var(--bg);border-radius:var(--radius-sm);border:1px dashed var(--border);}
.particle-molecule{overflow:visible;}
.particle-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.particle-opt{flex:1 1 auto;padding:7px 10px;border:1.5px solid var(--border);border-radius:20px;background:var(--card);font:600 12px inherit;color:var(--text2);cursor:pointer;transition:var(--transition);}
.particle-opt:hover:not(:disabled){border-color:var(--primary-light);color:var(--primary);}
.particle-opt:disabled{cursor:not-allowed;}
.particle-opt.correct{background:var(--green-light);border-color:var(--green);color:#065F46;}
.particle-opt.correct::before{content:'✓ ';}
.particle-opt.wrong{background:var(--red-light);border-color:var(--red);color:#991B1B;}
.particle-opt.wrong::before{content:'✗ ';}
.particle-opt.reveal-correct{border-color:var(--green);border-style:dashed;color:#065F46;}

/* ===== Simulator: dichotomy-key ===== */
.dichotomy-board{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);}
.dichotomy-progress{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.dichotomy-sample{padding:10px 13px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#EFF6FF,#F0FDFA);border:1px solid #BFDBFE;margin-bottom:12px;}
.dichotomy-sample-label{display:block;font-size:11px;font-weight:700;color:var(--primary);margin-bottom:2px;}
.dichotomy-sample strong{font-size:15px;color:var(--text);}
.dichotomy-trail{margin:0 0 12px;padding-left:18px;font-size:12px;color:var(--muted);line-height:1.7;}
.dichotomy-node{padding:14px;border-radius:var(--radius-sm);background:var(--card);border:1.5px solid var(--border);font-size:14px;font-weight:700;color:var(--text);}
.dichotomy-node.result.correct{border-color:var(--green);background:var(--green-light);}
.dichotomy-node.result.wrong{border-color:var(--red);background:var(--red-light);}
.dichotomy-result-label,.misconception-q{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:4px;}
.dichotomy-node.result strong{display:block;font-size:18px;color:var(--text);margin-top:2px;}
.dichotomy-node.result p{margin:8px 0 0;font-size:13px;font-weight:400;color:var(--text2);}
.dichotomy-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.dichotomy-choice{flex:1 1 120px;padding:11px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--card);font:700 14px inherit;cursor:pointer;transition:var(--transition);}
.dichotomy-choice.yes:hover{border-color:var(--green);color:#065F46;background:var(--green-light);}
.dichotomy-choice.no:hover{border-color:var(--red);color:#991B1B;background:var(--red-light);}

/* ===== Simulator: misconception-check ===== */
.misconception-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:14px 16px;margin-top:12px;}
.misconception-speaker{font-size:13px;font-weight:700;color:var(--text2);}
.misconception-claim{margin:8px 0 12px;padding:12px 14px;border-left:3px solid var(--accent);background:#FFFBEB;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:14px;color:#92400E;font-style:normal;}
.misconception-options{display:grid;gap:6px;}
.misconception-opt{text-align:left;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);font:500 13px inherit;color:var(--text);cursor:pointer;transition:var(--transition);}
.misconception-opt:hover:not(:disabled){background:var(--bg);border-color:var(--primary-light);}
.misconception-opt:disabled{cursor:not-allowed;}
.misconception-opt.correct{background:var(--green-light);border-color:var(--green);color:#065F46;font-weight:600;}
.misconception-opt.correct::before{content:'✓ ';}
.misconception-opt.wrong{background:var(--red-light);border-color:var(--red);color:#991B1B;}
.misconception-opt.wrong::before{content:'✗ ';}
.inquiry-feedback p{margin:4px 0;}

/* ===== Reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  .diagram-hotspot{animation:none;}
}

/* ===== Footer ===== */
footer{text-align:center;color:var(--muted);font-size:12px;padding:18px 0;border-top:1px solid var(--border);margin-top:16px;}

/* ===== Responsive ===== */
@media(max-width:720px){
  header{padding:0 14px;gap:0;}
  header .brand{font-size:14px;}
  nav button{padding:0 10px;font-size:12px;}
  main{padding:16px 12px 60px;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .stat-row{gap:8px;}
  .stat{min-width:0;flex:1 1 calc(33.333% - 6px);padding:12px 8px;}
  .stat .num{font-size:19px;}
  .section-block{padding:16px;}
  .sim-controls input[type=range]{width:100%;}
  .flashcard{font-size:16px;padding:20px;min-height:140px;}
  .flash-btn{padding:9px 14px;font-size:13px;}
  .quiz-opt{font-size:13px;padding:9px 12px;}
  .review-stats-bar{gap:6px;}
  .review-stat{flex:1 1 calc(50% - 4px);}
  .ph-icon{width:34px;height:34px;font-size:17px;}
  .ph-title{font-size:17px;}
  .sort-bins{grid-template-columns:1fr;}
  .topic-guide-body{padding:0 12px 14px;}
  .topic-guide-heading small{white-space:normal;}
  .cm-group{padding:12px;}
  .balance-equation{gap:6px;padding:12px 4px;}
  .balance-term{font-size:15px;}
  .balance-term input{width:42px;}
  .punnett-controls label{flex:1 1 90px;}
  .punnett-controls select{min-width:0;width:100%;}
  .particle-grid{grid-template-columns:1fr;}
  .dichotomy-choice{flex:1 1 100%;}
}