* { box-sizing: border-box; }
:root{
  --teal-900:#0f766e; --teal-700:#139488; --ink:#102a43; --muted:#61768a;
  --gold:#b98316; --ok:#0a7d52; --no:#c0392b;
  --shadow:0 18px 50px rgba(15,42,67,.10);
  --line:rgba(15,118,110,.16);
}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:"Prompt","IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  letter-spacing:-.015em; line-height:1.7;
  /* พื้นหลังแบบนิ่ง ไม่ใช้ blur/attachment fixed (กัน GPU อ่อน) */
  background:
    radial-gradient(circle at 12% 8%, rgba(0,143,131,.08), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(201,154,46,.08), transparent 26%),
    linear-gradient(135deg,#ffffff 0%,#f6fbfc 42%,#eef8f7 100%);
}
/* พื้นหลังภาพ (เจนจาก AI) — fixed แต่ไม่ใช้ blur/attachment:fixed กัน GPU อ่อน · ถ้าไม่มีไฟล์ก็โปร่ง เห็น gradient เดิม */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* พื้นหลังต่อบท: engine ตั้ง --page-bg ตาม lesson.theme.page (โทน/ลายไม่ซ้ำทุกบท) · ไม่มี theme = ใช้ภาพเดิม */
  background: var(--page-bg, url('assets/bg-learn.jpg') center center / cover no-repeat);
}
h1,h2,h3{font-weight:600; letter-spacing:-.03em; line-height:1.15; margin:0;}
p,li,button,span,strong,label{line-height:1.7;}
button{font-family:inherit;}
a{color:inherit; text-decoration:none;}
code{background:rgba(15,118,110,.08); padding:1px 6px; border-radius:6px;}

.site-shell{max-width:1480px; margin:0 auto; padding:18px 18px 28px;}

/* การ์ด — ไม่มี backdrop-filter blur */
.panel{
  background:#ffffff; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.panel:hover{transform:translateY(-3px); border-color:rgba(15,118,110,.3);}
.panel-main,.main-visual-panel{border-color:rgba(15,118,110,.28);}

.topbar{margin-bottom:20px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.topbar-left{display:flex; align-items:center; gap:14px;}
.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--teal-900),var(--teal-700)); box-shadow:0 12px 30px rgba(15,118,110,.25);}
.brand-icon{font-size:22px;}
.brand-name{font-weight:700;font-size:1.15rem;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:.95rem;}
.sep{color:#9fb0bd;}

.primary-button,.secondary-button,.icon-pill{
  border:none;border-radius:16px;padding:11px 18px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.primary-button{background:linear-gradient(135deg,var(--teal-900),#0aa398);color:#fff;box-shadow:0 12px 28px rgba(15,118,110,.22);}
.primary-button:hover{transform:translateY(-2px);}
.secondary-button,.icon-pill{background:#fff;color:var(--ink);border:1px solid var(--line);}
.secondary-button:hover,.icon-pill:hover{background:#f0fffb;border-color:rgba(15,118,110,.3);transform:translateY(-2px);}

.lesson-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:start;}
.title-strip{grid-column:1/-1;padding:20px 24px;}
.title-strip-inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.gold-pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;font-size:.95rem;
  background:#fff;color:var(--gold);border:1px solid rgba(201,154,46,.3);}
.lesson-banner{display:block;width:100%;max-height:230px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-bottom:14px;}

/* ---------- KenBurns slideshow (ภาพนิ่งเคลื่อนช้า sync เสียงครู) ---------- */
/* กรอบทอง #C9A227 คงที่ · มอชัน transform+opacity ล้วน (GPU เบา ตาม feedback_weak_gpu_perf) */
.kb-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:3px solid #C9A227;margin:2px 0 16px;background:#eceae4;box-shadow:0 8px 22px rgba(15,42,67,.12);}
.kb-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .6s ease;will-change:transform,opacity;}
.kb-slide.kb-first{opacity:1;}
@keyframes kb-zoom-in{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes kb-zoom-out{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes kb-pan-left{from{transform:scale(1.14) translateX(2.5%)}to{transform:scale(1.14) translateX(-2.5%)}}
@keyframes kb-pan-right{from{transform:scale(1.14) translateX(-2.5%)}to{transform:scale(1.14) translateX(2.5%)}}
@keyframes kb-pan-up{from{transform:scale(1.14) translateY(2.5%)}to{transform:scale(1.14) translateY(-2.5%)}}
@keyframes kb-pan-down{from{transform:scale(1.14) translateY(-2.5%)}to{transform:scale(1.14) translateY(2.5%)}}
@keyframes kb-fade-scale-in{from{transform:scale(1.06)}to{transform:scale(1.0)}}
@keyframes kb-fade-scale-out{from{transform:scale(1.0)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){ .kb-slide{animation:none !important;} }
.lesson-title{flex:1 1 100%;max-width:880px;font-size:clamp(1.8rem,2.6vw,3rem);line-height:1.18;}
.lesson-subtitle{flex:1 1 100%;color:var(--muted);margin:0;}

.sidebar-left{display:grid;gap:18px;position:sticky;top:18px;}
.content-stack{display:grid;gap:18px;}
.controls-panel,.main-visual-panel,.practice-panel,.exam-panel,.teach-panel{padding:20px;}

.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.panel-heading h2{font-size:1.4rem;}
.panel-heading h3{font-size:1.15rem;}
.panel-sound-btn{padding:9px 14px;border-radius:999px;font-size:.92rem;white-space:nowrap;
  background:#fff;color:var(--teal-900);border:1px solid var(--line);cursor:pointer;}
.panel-sound-btn:hover{background:#f0fffb;border-color:rgba(15,118,110,.32);}

.hero-tip{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;}
.tip-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,143,131,.1);color:var(--teal-900);}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.icon-pill{min-height:84px;flex-direction:column;display:flex;align-items:center;justify-content:center;gap:6px;}
.icon-dot{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(0,143,131,.1);font-size:1.1rem;}

.hero-illustration-shell{border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(145deg,#e9f7f2,#fff);overflow:hidden;}
/* โชว์ภาพเต็มไม่ crop — แผงภาพอยู่เต็มความกว้างคอลัมน์เนื้อหา คู่กับกล่องสอนแรก */
.lesson-illustration{display:block;width:100%;height:auto;}
.hero-illustration{object-fit:contain;}

/* เนื้อหาสอน */
.teach-panel .teach-text{font-size:1.02rem;line-height:2;}
.teach-steps{margin:6px 0 0;padding-left:22px;display:grid;gap:6px;}
/* แต่ละ "ตัวอย่าง/ประเด็น" ที่คั่นด้วย · แยกเป็นบรรทัดกล่องของตัวเอง กันสมการยาวชนกันตอนตัดบรรทัด */
.example-line{
  font-size:1.02rem; line-height:1.9; padding:10px 14px; margin-top:8px;
  border-radius:14px; border:1px solid var(--line); background:#fafffe;
}
.example-line:first-child{margin-top:0;}
/* โซนคณิตศาสตร์ (ตัวเลข/เศษส่วน/= + − × ÷) ห้ามตัดบรรทัดกลางสมการ
   ถ้าที่แคบไป ให้ทั้งก้อนขยับลงบรรทัดใหม่แทน (ไม่ใช่หักครึ่งสมการ) */
.calc-chunk{display:inline-block; white-space:nowrap;}
.fraction-demo-row{margin-top:10px;display:flex;}
.example-board{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.example-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;border:1px solid var(--line);background:#fafffe;}
.example-meta{font-size:.95rem;}
.example-read{color:var(--teal-900);font-weight:500;}
.example-cap{color:var(--muted);font-size:.88rem;}

/* เศษส่วนบน-ล่าง
   ค่าเริ่มต้น = สัมพัทธ์กับตัวหนังสือรอบข้าง (em) กันปัญหาตัวเลขข้างเคียง (เช่น "2 1/5")
   ขนาดไม่สมส่วนกัน · จุดที่ต้องการเศษส่วนเดี่ยวตัวใหญ่ (โจทย์หลัก/การ์ดตัวอย่าง) override ไว้ด้านล่าง */
.fraction-display{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;font-weight:600;color:var(--ink);font-size:0.78em;vertical-align:-0.32em;margin:0 0.06em;}
.fraction-top{padding:0 0.14em 0.04em;}
.fraction-line{width:100%;min-width:0.85em;height:0.06em;min-height:1.4px;border-radius:999px;background:currentColor;}
.fraction-bottom{padding:0.04em 0.14em 0;}

/* จำนวนคละ (จำนวนเต็ม+เศษส่วน) — ก้อนเดียวกัน จัดกึ่งกลางแนวตั้งด้วยกันเสมอ
   กันปัญหาจำนวนเต็มลอยอยู่บน แต่เศษส่วนจมอยู่ล่าง (ไม่ตรงแนว) */
.mixed-number{display:inline-flex;align-items:center;gap:0.06em;vertical-align:-0.08em;}
.mixed-whole{font-weight:600;color:var(--ink);line-height:1;}
.mixed-number .fraction-display{font-size:0.85em;vertical-align:baseline;margin:0;}

/* เศษส่วนเดี่ยวตัวใหญ่ (ไม่ปนกับข้อความรอบข้าง) — ครอบคลุมจำนวนคละในบริบทนี้ด้วย */
.fraction-demo-row .fraction-display,
.example-item .fraction-display,
.practice-question .fraction-display,
.mock-question-text .fraction-display,
.practice-expression .fraction-display,
.fraction-demo-row .mixed-number .fraction-display,
.example-item .mixed-number .fraction-display,
.practice-question .mixed-number .fraction-display,
.mock-question-text .mixed-number .fraction-display,
.practice-expression .mixed-number .fraction-display{
  font-size:clamp(1.6rem,2vw,2.4rem); vertical-align:middle; margin:0 2px;
}
.fraction-demo-row .mixed-whole,.example-item .mixed-whole,.practice-question .mixed-whole,
.mock-question-text .mixed-whole,.practice-expression .mixed-whole{
  font-size:clamp(1.6rem,2vw,2.4rem);
}
.fraction-demo-row .fraction-top,.example-item .fraction-top,.practice-question .fraction-top,
.mock-question-text .fraction-top,.practice-expression .fraction-top{padding:0 10px 5px;}
.fraction-demo-row .fraction-line,.example-item .fraction-line,.practice-question .fraction-line,
.mock-question-text .fraction-line,.practice-expression .fraction-line{min-width:40px;height:3px;min-height:3px;}
.fraction-demo-row .fraction-bottom,.example-item .fraction-bottom,.practice-question .fraction-bottom,
.mock-question-text .fraction-bottom,.practice-expression .fraction-bottom{padding:5px 10px 0;}

/* แบบฝึก/ข้อสอบ */
.practice-lead{color:var(--muted);margin-bottom:8px;}
.practice-question,.mock-question-text{font-size:clamp(1.2rem,1.6vw,1.6rem);font-weight:500;margin:8px 0;}
.practice-audio-row,.mock-audio-row,.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;}
.practice-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.mock-choice-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;}
.practice-choice-item,.mock-choice-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;}
.practice-choice-item label,.mock-choice-item label{display:flex;align-items:center;gap:10px;cursor:pointer;}
.choice-badge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;
  background:rgba(0,143,131,.12);color:var(--teal-900);font-weight:600;}
.exam-copy{color:var(--muted);font-size:.95rem;}
.mock-question{margin-top:12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:#fafffe;}

.feedback{margin-top:12px;padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:#f6fffb;}
.feedback .ok,.example-read.ok{color:var(--ok);}
.feedback .no{color:var(--no);}
.solution{margin-top:12px;padding:16px;border-radius:18px;border:1px dashed rgba(15,118,110,.4);background:#f3fdf9;}
.solution-step{margin-top:10px;padding:12px 14px;border-radius:14px;background:#fafffe;border:1px solid var(--line);}
.solution-step strong{display:block;margin-bottom:4px;}
/* เฉลยทีละขั้น: เลขลำดับ 1 2 3 + เผยทีละกล่องคู่เสียงครู */
.step-solution .solution-step{display:flex;gap:12px;align-items:flex-start;}
.step-num{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;
  background:var(--teal-900,#0f766e);color:#fff;font-weight:600;font-size:1.05rem;}
.step-body{flex:1;min-width:0;}
.step-solution .panel-sound-btn{align-self:center;}
.sstep.hide{display:none;}
.sstep-in{animation:stepIn .5s ease;}
@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.step-controls{margin-top:12px;}

/* กระดานทด — เลขเรียงหลักแนวตั้ง ช่องตารางเหมือนสมุดกราฟ */
.work-board{margin:12px 0 4px;overflow-x:auto;}
.work-board-inner{display:inline-block;padding:10px 12px;border-radius:14px;
  background:#fffdf5;border:1px solid rgba(201,154,46,.35);}
.brow{display:flex;align-items:stretch;}
.blabel{flex:0 0 auto;min-width:104px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;font-size:.88rem;color:var(--muted);white-space:nowrap;}
.bcell{width:40px;min-height:46px;display:grid;place-items:center;
  font-size:1.45rem;font-weight:600;color:var(--ink,#123);
  border:1px solid rgba(15,118,110,.14);margin:-1px 0 0 -1px;background:#fff;}
.bdotcell{width:20px;background:transparent;border-color:transparent;font-weight:700;}
.bop{background:transparent;border-color:transparent;font-size:1.4rem;color:#b45309;}
.bheadrow .bcell{min-height:30px;font-size:.62rem;font-weight:500;line-height:1.15;
  color:var(--muted);background:#f4faf8;padding:2px;text-align:center;white-space:normal;}
.bfocus{background:#fff3cd !important;border-color:#d9a441 !important;position:relative;z-index:1;}
.bheadrow .bfocus{color:#8a5a00;font-weight:700;}
.banswer .bcell{border-top:3px double #0f766e;background:#f0fdf9;}
.bpad0{color:#c27803;}
.bnote{margin-top:8px;font-size:.98rem;font-weight:600;color:#0f766e;}

.toast-wrap{position:fixed;right:20px;bottom:20px;display:grid;gap:10px;z-index:50;}
.toast{min-width:220px;max-width:340px;padding:13px 16px;border-radius:16px;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow);animation:tin .18s ease;}
.hide{display:none !important;}
@keyframes tin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:1100px){
  .lesson-grid{grid-template-columns:1fr;}
  .sidebar-left{position:static;}
}
@media (max-width:620px){
  .practice-choice-list,.mock-choice-list{grid-template-columns:1fr;}
  .practice-choice-item,.mock-choice-item{flex-direction:column;align-items:stretch;}
  .lesson-title{font-size:clamp(1.5rem,6vw,2.2rem);}
}

/* Rapid Math signature skin: ห้องฝึกตัวเลข ไม่ใช้พื้นขาวแบบบทเรียนทั่วไป */
:root{
  --teal-900:#087f78;
  --teal-700:#13a99d;
  --ink:#10233a;
  --muted:#53677f;
  --gold:#b86d12;
  --line:rgba(79, 208, 190, .23);
  --shadow:0 20px 52px rgba(1, 13, 31, .22);
}
body{
  color:var(--ink);
  background:
    linear-gradient(rgba(113,224,205,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113,224,205,.045) 1px, transparent 1px),
    radial-gradient(circle at 8% 4%, rgba(18,175,159,.28), transparent 31rem),
    radial-gradient(circle at 93% 7%, rgba(247,184,75,.20), transparent 24rem),
    linear-gradient(135deg,#061427 0%,#092744 53%,#0a3c4a 100%);
  background-size:30px 30px,30px 30px,auto,auto,auto;
}
body::before{display:none;}
.panel{
  background:linear-gradient(145deg,#fffef9,#f5fffc);
  border-color:rgba(116,225,207,.28);
  box-shadow:var(--shadow);
}
.panel:hover{border-color:rgba(247,184,75,.65);}
.topbar,.title-strip{
  background:
    linear-gradient(110deg,rgba(4,23,45,.98),rgba(10,54,74,.96)),
    linear-gradient(90deg,var(--teal-900),var(--gold));
  color:#f7fffd;
  border-color:rgba(247,184,75,.32);
}
.topbar .breadcrumb,.lesson-subtitle{color:#c9e5e0;}
.topbar .sep{color:#6fcfc1;}
.brand-mark{background:linear-gradient(135deg,#ffbd4a,#0aa89a);box-shadow:0 12px 30px rgba(0,0,0,.28);}
.gold-pill{background:rgba(255,197,89,.14);color:#ffe0a0;border-color:rgba(255,205,111,.5);}
.primary-button{background:linear-gradient(135deg,#ffb33d,#dd7e13);box-shadow:0 12px 28px rgba(152,81,2,.28);}
.secondary-button,.icon-pill{background:#f8fffd;}
.hero-illustration-shell{
  padding:7px;
  border:1px solid rgba(255,193,74,.62);
  background:linear-gradient(135deg,#06213b,#0f6f6b 54%,#e9a53a);
  box-shadow:0 16px 36px rgba(0,20,40,.22);
}
.hero-illustration{border-radius:14px;}
.example-line,.example-item,.mock-question{background:#fbfffd;}
.choice-badge,.icon-dot,.tip-icon{background:rgba(7,154,143,.14);color:#086f68;}
.panel-sound-btn{background:#062a45;color:#d9fff8;border-color:#147f78;}
.panel-sound-btn:hover{background:#0b5c68;color:#fff;}
@media (max-width:620px){
  .site-shell{padding:12px 12px 24px;}
  .topbar,.title-strip{border-radius:18px;}
}

/* Rapid Math board-solution upgrade: make numbers large and readable for children */
.practice-question,.mock-question-text{
  font-size:clamp(1.55rem,3.2vw,2.45rem);
  line-height:1.35;
  font-weight:700;
}
.practice-choice-item,.mock-choice-item{
  min-height:68px;
  padding:16px 18px;
}
.practice-choice-item label span:last-child,
.mock-choice-item label span:last-child{
  font-size:clamp(1.25rem,2.5vw,1.9rem);
  line-height:1.25;
  font-weight:650;
}
.choice-badge{
  width:42px;
  height:42px;
  flex-basis:42px;
  font-size:1.18rem;
}
.teach-text .example-board,.example-board{
  display:block;
  padding:14px 18px;
  border-radius:16px;
  background:#fffdf3;
  border:1px solid rgba(255,193,74,.45);
  color:#15304b;
  font-size:clamp(1.25rem,2.4vw,2rem);
  line-height:1.65;
  font-weight:700;
}
.step-body{
  font-size:clamp(1.08rem,2vw,1.35rem);
  line-height:1.55;
}
.step-body strong{
  font-size:1.12em;
}
.work-board-inner{
  padding:14px 16px;
}
.bcell{
  width:52px;
  min-height:58px;
  font-size:clamp(1.7rem,3vw,2.35rem);
  font-weight:750;
}
.bop{
  font-size:clamp(1.6rem,2.8vw,2.2rem);
}
.bheadrow .bcell{
  min-height:34px;
  font-size:.72rem;
}
.banswer .bcell{
  background:#eafff7;
}
.bnote{
  font-size:1.05rem;
}

/* 11+ coach layer: answer feedback becomes a premium personal coaching card */
.coach-card{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(20,184,166,.28);
  background:linear-gradient(135deg,#f8fffd,#fff8e8);
  box-shadow:0 12px 26px rgba(4,31,54,.10);
}
.coach-ok{
  border-color:rgba(16,185,129,.35);
}
.coach-review{
  border-color:rgba(245,158,11,.42);
  background:linear-gradient(135deg,#fffdf3,#f8fffd);
}
.coach-eyebrow{
  font-size:.82rem;
  font-weight:800;
  color:#0f766e;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.coach-title{
  margin-top:4px;
  font-size:1.15rem;
  font-weight:850;
  color:#12304d;
}
.coach-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.coach-grid div{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(13,148,136,.13);
}
.coach-grid span{
  display:block;
  font-size:.78rem;
  color:#64748b;
  font-weight:700;
}
.coach-grid strong{
  display:block;
  margin-top:3px;
  color:#10233a;
  line-height:1.35;
}

/* Multiplication chant sidebar: left insert for rapid-math warmup */
.chant-panel{
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,196,87,.28), transparent 9rem),
    linear-gradient(145deg,#06223d,#074a55 58%,#0b766f);
  color:#f6fffb;
  border-color:rgba(255,196,87,.46);
}
.chant-panel .panel-heading h2{
  color:#fff2bf;
  font-size:1.22rem;
}
.chant-card{
  display:grid;
  gap:10px;
}
.chant-kicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#d6fff8;
  font-size:.78rem;
  font-weight:800;
}
.chant-title{
  font-size:1.28rem;
  line-height:1.25;
  font-weight:900;
  color:#ffe09a;
}
.chant-hint{
  margin:0;
  color:#d7efec;
  font-size:.92rem;
  line-height:1.5;
}
.chant-stage{
  display:grid;
  gap:7px;
  margin-top:2px;
  padding:10px;
  border-radius:18px;
  background:rgba(2,15,31,.38);
  border:1px solid rgba(255,255,255,.14);
}
.chant-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:7px 9px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  opacity:.5;
  transform:translateY(5px) scale(.98);
  transition:opacity .22s ease, transform .22s ease, background .22s ease;
}
.chant-row.show{
  opacity:1;
  transform:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,192,82,.20));
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.chant-left,.chant-eq,.chant-answer{
  font-variant-numeric:tabular-nums;
  font-weight:900;
}
.chant-left{
  text-align:right;
  font-size:1.22rem;
}
.chant-eq{
  color:#ffe5a7;
}
.chant-answer{
  text-align:left;
  font-size:1.55rem;
  color:#fff4cb;
  text-shadow:0 2px 8px rgba(0,0,0,.22);
}
.chant-row.show .chant-answer{
  animation:chantPop .34s ease;
}
@keyframes chantPop{
  0%{transform:scale(.82);filter:brightness(.9);}
  70%{transform:scale(1.12);filter:brightness(1.18);}
  100%{transform:scale(1);filter:brightness(1);}
}
.chant-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.chant-mini-btn{
  width:100%;
  justify-content:center;
  min-height:40px;
  padding:9px 12px;
  border-radius:13px;
}
.chant-speed{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.chant-speed-btn.active{
  background:linear-gradient(135deg,#ffd56a,#ff8a3d) !important;
  color:#151005 !important;
  border-color:#ffd56a !important;
  box-shadow:0 8px 18px rgba(255,138,61,.22);
}
.chant-panel .music-on{
  background:linear-gradient(135deg,#34d399,#10b981) !important;
  color:#052014 !important;
  border-color:#6ee7b7 !important;
  box-shadow:0 8px 20px rgba(16,185,129,.22);
}
.chant-panel .music-off{
  background:rgba(255,255,255,.10);
  color:#f6fffb;
  border-color:rgba(255,255,255,.22);
}
.chant-panel .secondary-button{
  background:rgba(255,255,255,.10);
  color:#f6fffb;
  border-color:rgba(255,255,255,.22);
}
.chant-panel .chant-disabled,
.chant-panel .chant-disabled:hover{
  cursor:not-allowed;
  opacity:.62;
  background:rgba(255,255,255,.07);
  color:#bde9e4;
  border-style:dashed;
}
.chant-note{
  color:#bde9e4;
  font-size:.78rem;
  line-height:1.45;
}
@media (max-width:620px){
  .coach-grid{grid-template-columns:1fr;}
  .chant-panel{padding:16px;}
  .chant-stage{grid-template-columns:1fr;}
}