/* ═══════════ ธีม ═══════════
   --panel = พื้นการ์ด | --raise = พื้นของสิ่งที่กดได้ (ต้องเด่นกว่าการ์ดเสมอ)
   โหมดมืดคุมคอนทราสต์ตัวอักษรหลักไว้เกิน 12:1 เพื่อให้อ่านได้แม้เปิด Night Shift
   ─────────────────────────── */
:root{
  --bg:#FAF6EF; --panel:#FFFFFF; --raise:#FFFFFF; --ink:#1E1C19; --ink2:#645B50;
  --line:#E6DCCC; --accent:#1B6B52; --accent-soft:#E0EFE7;
  --amber:#A85E05; --amber-soft:#FBEAD1; --red:#A93F2B; --red-soft:#F9E1DC;
  /* สีตัวอักษรบนพื้น accent — ต้องแยก token ไม่ใช่ #fff ตายตัว
     โหมดมืด accent เป็นเขียวมิ้นต์สว่าง ตัวอักษรขาวบนนั้นได้คอนทราสต์แค่ ~1.5:1 อ่านไม่ออก */
  --on-accent:#FFFFFF;
  /* สีรองไว้ใช้กับช่วงเวลาที่ควรรู้สึกดี — สถิติ ต่อเนื่อง เรียนจบ */
  --spark:#E2703A; --spark-soft:#FCE8DC;
  --radius:18px; --radius-lg:26px; --radius-pill:99px;
  --shadow:0 1px 2px rgba(42,39,36,.04), 0 10px 28px rgba(42,39,36,.07);
  --shadow-lift:0 2px 8px rgba(42,39,36,.06), 0 22px 48px rgba(42,39,36,.12);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  /* ความสูงบรรทัดสำหรับข้อความไทยตัวใหญ่ — ต่ำกว่า 1.42 วรรณยุกต์กับสระบนจะโดนบรรทัดบนทับ */
  --lh-thai-display:1.45;
  color-scheme:light;
}
/* ค่าชุดมืดถูกเขียนสองที่: ตามระบบ (auto) และตอนผู้ใช้เลือกเอง — CSS รวมสองเงื่อนไขนี้ไม่ได้ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14120F; --panel:#211E1A; --raise:#2E2A25; --ink:#FBF8F3; --ink2:#C6BBAA;
    --line:#453D33; --accent:#6FD3AA; --accent-soft:#173428;
    --on-accent:#08231A;                       /* เขียวเข้มบนมิ้นต์ = 9.8:1 ไม่ใช่ขาวที่ได้ 1.5:1 */
    --spark:#F0865A; --spark-soft:#3A2117;
    --amber:#F5B85F; --amber-soft:#3B2D17; --red:#F59B86; --red-soft:#42261F;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.38);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 22px 48px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14120F; --panel:#211E1A; --raise:#2E2A25; --ink:#FBF8F3; --ink2:#C6BBAA;
  --line:#453D33; --accent:#6FD3AA; --accent-soft:#173428;
  --on-accent:#08231A;
  --spark:#F0865A; --spark-soft:#3A2117;
  --amber:#F5B85F; --amber-soft:#3B2D17; --red:#F59B86; --red-soft:#42261F;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.38);
  --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 22px 48px rgba(0,0,0,.5);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sukhumvit Set",system-ui,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:var(--lh-thai-display); margin:0 0 .4em}
h1{font-size:1.9rem; letter-spacing:-.02em}
h2{font-size:1.35rem; letter-spacing:-.01em}
p{margin:0 0 .8em}
b{font-weight:650}
.muted{color:var(--ink2)}
.small{font-size:.85rem}
.center{text-align:center}
.en{font-family:"SF Pro Text",-apple-system,Segoe UI,sans-serif}

/* ---------- topbar ---------- */
#topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 20px; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; letter-spacing:-.01em; cursor:pointer; user-select:none}
.brand span{display:inline-block}
.topstats{display:flex; gap:14px; font-size:.85rem; color:var(--ink2); font-variant-numeric:tabular-nums}
.topstats b{color:var(--ink)}
.topright{display:flex; align-items:center; gap:14px}
.themebtn{font:inherit; font-size:1.05rem; line-height:1; cursor:pointer; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line); background:var(--raise); color:var(--ink); transition:.12s}
.themebtn:hover{border-color:var(--accent)}
.themebtn:active{transform:scale(.9)}

#app{max-width:920px; margin:0 auto; padding:24px 20px 80px}
.view{display:none}
.view.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:14px; padding:12px 19px;
  border:1px solid var(--line); background:var(--raise); color:var(--ink);
  transition:transform .12s var(--ease-bounce), box-shadow .18s var(--ease),
             background .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover{border-color:var(--ink2); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px}
/* --on-accent ไม่ใช่ #fff ตายตัว — โหมดมืด accent สว่าง ตัวอักษรต้องเป็นสีเข้ม */
.btn.primary{background:var(--accent); border-color:transparent; color:var(--on-accent);
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent),
             0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent)}
.btn.primary:hover{filter:brightness(1.06);
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent),
             0 16px 34px color-mix(in srgb, var(--accent) 22%, transparent)}
.btn.primary:active{box-shadow:0 1px 4px color-mix(in srgb, var(--accent) 30%, transparent)}
.btn.big{padding:16px 28px; font-size:1.07rem; width:100%; max-width:420px; border-radius:16px}
.btn.small{padding:7px 13px; font-size:.85rem; border-radius:10px}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red); border-color:color-mix(in srgb,var(--red) 35%, transparent)}

/* ---------- welcome ---------- */
.hero{padding-top:8px}
.lead{font-size:1.08rem; color:var(--ink2); max-width:58ch}
.sec{margin-top:2.2rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:22px 0}
.card{background:var(--panel); border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.card .ic{font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; background:var(--accent-soft); margin-bottom:4px}
.card h3{font-size:1rem; margin:.5em 0 .3em}
.card p{font-size:.9rem; color:var(--ink2); margin:0}

.roadmap{display:grid; gap:10px; margin:16px 0}
.stage{display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.stage .wk{font-size:.78rem; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border-radius:8px; padding:5px 8px; text-align:center}
.stage h4{margin:0 0 3px; font-size:.98rem}
.stage p{margin:0; font-size:.88rem; color:var(--ink2)}

.routine{margin:16px 0; padding-left:1.3em}
.routine li{margin-bottom:.5em}
.routine em{color:var(--ink2); font-style:normal; font-size:.85rem; margin-left:6px}

.cta{display:flex; flex-direction:column; align-items:center; gap:10px; margin:34px 0 10px}

/* ---------- test ---------- */
.testwrap{max-width:560px; margin:20px auto; text-align:center}
.progressbar{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:14px}
.progressbar>div{height:100%; background:var(--accent); width:0; transition:width .3s ease; border-radius:99px}
.qword{font-size:2.4rem; margin:18px 0 2px; letter-spacing:-.02em}
.opts{display:grid; gap:10px; margin:22px 0 14px}
.opt{font:inherit; font-size:1.02rem; text-align:left; padding:16px 18px; border-radius:15px;
  border:1.5px solid var(--line); background:var(--raise); color:var(--ink); cursor:pointer;
  transition:transform .14s var(--ease-bounce), border-color .15s ease, background .15s ease}
.opt:active{transform:scale(.985)}
.opt.ok{animation:pop .32s var(--ease-bounce)}
.opt:hover{border-color:var(--accent)}
.opt.ok{background:var(--accent-soft); border-color:var(--accent); font-weight:600}
.opt.no{background:var(--red-soft); border-color:var(--red)}
.opt:disabled{cursor:default}

.bigstat{margin:18px 0}
.bigstat span{font-size:3.4rem; font-weight:750; letter-spacing:-.03em; color:var(--accent)}
.bigstat small{display:block; color:var(--ink2); font-size:.9rem}
.hugeicon{font-size:3rem}
.bandbars{display:grid; gap:8px; margin:20px 0; text-align:left}
.bb{display:grid; grid-template-columns:90px 1fr 44px; gap:10px; align-items:center; font-size:.85rem}
.bb .track{height:9px; background:var(--line); border-radius:99px; overflow:hidden}
.bb .track>i{display:block; height:100%; background:var(--accent); border-radius:99px}

/* ---------- home ---------- */
.homegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.panel{background:var(--panel); border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow)}
.panel.today{grid-column:1/-1; text-align:center}
.eyebrow{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink2); font-weight:700; margin:0 0 6px}
.todaybits{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0 20px}
.pill{font-size:.86rem; padding:8px 15px; border-radius:var(--radius-pill);
  background:var(--accent-soft); color:var(--accent); font-weight:650;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent)}
.pill.amber{background:var(--amber-soft); color:var(--amber)}
.statrow{display:flex; gap:22px; margin-bottom:14px; flex-wrap:wrap}
.statrow div{flex:1; min-width:70px}
.statrow b{display:block; font-size:1.6rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.statrow span{font-size:.78rem; color:var(--ink2)}
.levelbar{height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:6px 0}
.levelbar>div{height:100%; background:var(--accent); border-radius:99px; transition:width .4s}
.heat{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.heat i{aspect-ratio:1; border-radius:6px; background:var(--line); display:block}
.heat i.on{background:var(--accent)}
.heat i.today{outline:2px solid var(--amber); outline-offset:1px}
.toolrow{display:flex; flex-wrap:wrap; gap:8px}
.toolrow .btn{padding:8px 13px; font-size:.85rem}
.setting{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; font-size:.88rem; color:var(--ink2)}
.setting select,#filterLv,#filterSt{font:inherit; font-size:.88rem; padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:var(--raise); color:var(--ink)}

/* ---------- lesson ---------- */
.lessonhead{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.lessonhead>span{flex-shrink:0; white-space:nowrap}
.steps{display:flex; gap:6px; flex:1; min-width:60px}
.steps i{height:5px; flex:1; background:var(--line); border-radius:99px}
.steps i.on{background:var(--accent)}
.steps i.cur{background:var(--amber)}

.stagehead{text-align:center; margin-bottom:18px}
.stagehead h2{margin-bottom:2px}
.stagehead p{color:var(--ink2); font-size:.9rem; margin:0}

.wordcard{
  background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px 24px;
  text-align:center; box-shadow:var(--shadow); max-width:520px; margin:0 auto;
}
.wordcard .word{font-size:2.5rem; font-weight:700; letter-spacing:-.03em; margin:0 0 2px}
.rom{font-size:1rem; color:var(--ink2); letter-spacing:.04em; margin:0 0 6px; font-style:normal}
.wordcard .pos{font-size:.8rem; color:var(--ink2); font-style:italic; margin-bottom:14px}
.wordcard .th{font-size:1.4rem; font-weight:600; color:var(--accent); margin:10px 0 16px}
.wordcard .exbox{border-top:1px solid var(--line); padding-top:16px; margin-top:8px; text-align:left}
.wordcard .ex{font-size:1.02rem; margin:0 0 4px}
.wordcard .exth{font-size:.9rem; color:var(--ink2); margin:0}
.speak{border:none; background:var(--accent-soft); color:var(--accent); border-radius:99px; width:42px; height:42px;
  font-size:1.1rem; cursor:pointer; margin-bottom:12px}
.speak:active{transform:scale(.92)}
.hidden-th{filter:blur(9px); cursor:pointer; user-select:none; transition:filter .2s}
.hidden-th.show{filter:none}
.rowbtns{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap}
.counter{text-align:center; color:var(--ink2); font-size:.82rem; margin-top:14px}

.passage{max-width:600px; margin:0 auto; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:26px; box-shadow:var(--shadow)}
.passage h3{margin-bottom:16px}
.pline{padding:11px 0; border-bottom:1px dashed var(--line); cursor:pointer}
.pline:last-child{border-bottom:none}
.pline .p-en{font-size:1.08rem}
.pline .p-th{font-size:.9rem; color:var(--ink2); margin-top:3px; display:none}
.pline.open .p-th{display:block}
.pline.open{background:var(--accent-soft); margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:10px}

.feedback{margin-top:16px; padding:14px 16px; border-radius:13px; font-size:.95rem; display:none}
.feedback.show{display:block}
.feedback.ok{background:var(--accent-soft); color:var(--accent)}
.feedback.no{background:var(--red-soft); color:var(--red)}
.feedback b{font-weight:700}

/* ---------- browse ---------- */
.browsehead{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
#searchBox{flex:1; min-width:180px; font:inherit; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--raise); color:var(--ink)}
.brow{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--line)}
.brow .w{font-weight:600}
.brow .t{color:var(--ink2); font-size:.92rem}
.tag{font-size:.68rem; padding:3px 8px; border-radius:99px; font-weight:700; white-space:nowrap}
.tag.new{background:var(--line); color:var(--ink2)}
.tag.learning{background:var(--amber-soft); color:var(--amber)}
.tag.mastered{background:var(--accent-soft); color:var(--accent)}
.chunkgrp{margin-bottom:22px}
.chunkgrp h3{font-size:1rem; color:var(--accent); margin-bottom:8px}

/* ═══════════ โหมดคุยกับลูกค้า ═══════════ */
.modecard{text-align:left; cursor:pointer; font:inherit; color:inherit; display:block; background:var(--raise)}
.modecard:hover{border-color:var(--accent)}
.cardmeta{display:block; margin-top:10px; font-size:.78rem; color:var(--accent); font-weight:700}

.scenegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.scenecard{font:inherit; color:inherit; text-align:left; cursor:pointer; background:var(--raise);
  border:1px solid var(--line); border-radius:15px; padding:16px; display:flex; flex-direction:column; gap:4px;
  box-shadow:var(--shadow); transition:.12s}
.scenecard:hover{border-color:var(--accent); transform:translateY(-2px)}
.scenecard .ic{font-size:1.4rem}
.scenecard b{font-size:1rem}
.scenecard .sub{font-size:.82rem; color:var(--ink2); line-height:1.5}
.scenecard .bar{height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:8px}
.scenecard .bar>i{display:block; height:100%; background:var(--accent); border-radius:99px}
.scenecard .cnt{font-size:.74rem; color:var(--ink2); font-weight:600}

.phrasecard{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:26px 24px;
  max-width:600px; margin:0 auto 16px; box-shadow:var(--shadow); text-align:center}
.usewhen{font-size:.8rem; color:var(--amber); font-weight:700; background:var(--amber-soft);
  display:inline-block; padding:5px 12px; border-radius:99px; margin-bottom:14px}
.target{font-size:1.6rem; font-weight:650; letter-spacing:-.02em; line-height:1.45; margin:0 0 8px}
.phrasecard .th{font-size:1rem; color:var(--ink2); margin:0 0 6px}
.tipbox{text-align:left; font-size:.88rem; background:var(--accent-soft); border-radius:12px;
  padding:12px 15px; margin:16px 0; line-height:1.6}
.tipbox b{color:var(--accent)}
.tipbox.why{background:var(--red-soft)} .tipbox.why b{color:var(--red)}
.tipbox.how{background:var(--accent-soft)}
.micmount{margin-top:18px}

.btn.mic{width:100%; max-width:340px; padding:15px; font-size:1.05rem; background:var(--accent);
  border-color:var(--accent); color:#fff}
.btn.mic.rec{background:var(--red); border-color:var(--red); animation:pulse 1.1s ease-in-out infinite}
.btn.mic:disabled{opacity:1; cursor:default}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.62}}

.scorebox{margin-top:16px; border-radius:15px; padding:18px; text-align:left; border:1px solid var(--line)}
.scorebox.ok{background:var(--accent-soft); border-color:var(--accent)}
.scorebox.mid{background:var(--amber-soft); border-color:var(--amber)}
.scorebox.no{background:var(--red-soft); border-color:var(--red)}
.scorenum{font-size:2.4rem; font-weight:750; letter-spacing:-.03em; line-height:1}
.scorenum small{font-size:1rem; font-weight:600; opacity:.6}
.scorewords{font-size:1.15rem; line-height:1.9; margin:10px 0 6px}
.scorewords span{padding:2px 5px; border-radius:6px}
.w-ok{background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent); font-weight:600}
.w-close{background:color-mix(in srgb,var(--amber) 26%,transparent); color:var(--amber); font-weight:600}
.w-miss{background:color-mix(in srgb,var(--red) 24%,transparent); color:var(--red); font-weight:700;
  text-decoration:underline wavy; text-underline-offset:3px}
.scoreverdict{font-weight:650; margin:8px 0 4px}
.legend i{font-style:normal; padding:2px 7px; border-radius:6px; margin-right:6px; font-size:.76rem}

.soundlist{display:grid; gap:8px}
.soundrow{font:inherit; color:inherit; text-align:left; cursor:pointer; display:grid;
  grid-template-columns:34px 1fr auto auto; gap:12px; align-items:center;
  background:var(--raise); border:1px solid var(--line); border-radius:14px; padding:13px 15px; transition:.12s}
.soundrow:hover{border-color:var(--accent)}
.soundrow .num{width:28px; height:28px; border-radius:50%; background:var(--line); color:var(--ink2);
  display:grid; place-items:center; font-size:.8rem; font-weight:700}
.soundrow .mid{min-width:0}
.soundrow .mid em{font-style:normal; font-size:.7rem; color:var(--amber); font-weight:700}
.soundrow .sub{display:block; font-size:.8rem; color:var(--ink2); line-height:1.5}
.soundrow .tick{color:var(--accent); font-weight:800}
.imp{font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:99px; white-space:nowrap}
.imp.hi{background:var(--red-soft); color:var(--red)}
.imp.mid{background:var(--amber-soft); color:var(--amber)}
.imp.low{background:var(--line); color:var(--ink2)}

.soundwrap{max-width:640px; margin:0 auto}
.wordchips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; padding:9px 15px; border-radius:11px;
  border:1px solid var(--line); background:var(--raise); color:var(--ink); transition:.12s}
.chip:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.chip:active{transform:scale(.95)}
.pairlist{display:grid; gap:8px}
.pairrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pairrow .chip{flex:1; min-width:110px; text-align:center}
.vs{font-size:.75rem; color:var(--ink2); font-weight:700}

.chat{max-width:600px; margin:0 auto 18px; display:grid; gap:10px}
.bubble{padding:13px 16px; border-radius:16px; max-width:86%}
.bubble .b-en{margin:0 0 3px; font-size:1.02rem}
.bubble .b-th{margin:0; font-size:.84rem; opacity:.72}
.bubble.c{background:var(--raise); border:1px solid var(--line); justify-self:start; border-bottom-left-radius:5px}
.bubble.y{background:var(--accent); color:#fff; justify-self:end; border-bottom-right-radius:5px}
.bubble.live{box-shadow:0 0 0 2px var(--amber)}

/* ═══════════ วินิจฉัยการออกเสียง ═══════════ */
.fixbox{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.fixhead{font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; font-weight:800; margin:0 0 8px; opacity:.75}
.fixrow{margin-bottom:10px; font-size:.9rem}
.fixrow b{display:inline-block; background:var(--raise); border:1px solid var(--line);
  padding:1px 9px; border-radius:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.fixrow ul{margin:6px 0 0; padding-left:1.1em}
.fixrow li{margin-bottom:4px; line-height:1.55}
.jump{font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; border:none; background:none;
  color:var(--accent); padding:0 2px; text-decoration:underline; text-underline-offset:2px}
.caveat{margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line);
  font-size:.8rem; line-height:1.6; opacity:.8}

.tipbox.strict{background:var(--amber-soft)} .tipbox.strict b{color:var(--amber)}
.strictcard{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px; text-align:center; box-shadow:var(--shadow)}
.strictword{font-size:2.6rem; font-weight:750; letter-spacing:-.03em; margin:2px 0 12px}
.heardline{font-size:.92rem; margin:6px 0 0}
.wrongheard{color:var(--red); text-decoration:underline wavy; text-underline-offset:3px}

/* ═══════════ โหมดฝึกฟัง ═══════════ */
.speedbar{display:flex; gap:6px; justify-content:center; margin:14px 0}
.spd{font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; padding:7px 13px; border-radius:99px;
  border:1px solid var(--line); background:var(--raise); color:var(--ink2); transition:.12s}
.spd:hover{border-color:var(--accent)}
.spd.on{background:var(--accent); border-color:var(--accent); color:#fff}

.reduceflow{display:grid; gap:2px; justify-items:center; margin-bottom:10px}
.rf-written{font-size:1.15rem; color:var(--ink2); text-decoration:line-through; text-decoration-color:var(--red)}
.rf-arrow{font-size:.72rem; color:var(--ink2); margin:4px 0}
.rf-spoken{font-size:2.1rem; font-weight:750; letter-spacing:-.03em; color:var(--accent)}
.exbox2{border-top:1px solid var(--line); margin-top:14px; padding-top:14px}
.ex2{font-size:1.08rem; margin:0 0 3px}
.exth2{font-size:.88rem; color:var(--ink2); margin:0}

.dictinput,.numinput{width:100%; font:inherit; margin-top:14px; padding:14px 16px; border-radius:13px;
  border:1.5px solid var(--line); background:var(--raise); color:var(--ink); resize:vertical}
.dictinput:focus,.numinput:focus{outline:none; border-color:var(--accent)}
.numinput{font-size:1.6rem; font-weight:700; text-align:center; letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.answerbox{margin-top:14px; padding:14px 16px; border-radius:13px; background:var(--accent-soft); text-align:left}
.ans{font-size:1.1rem; font-weight:650; margin:2px 0 4px}

/* ═══════════ ฝึกผลิตเอง / อีเมล / หางาน ═══════════ */
.clozesent{font-size:1.35rem; font-weight:600; line-height:1.6; margin:6px 0 8px}
.transth{font-size:1.25rem; font-weight:600; line-height:1.6; margin:6px 0 10px}
.checklist{list-style:none; padding:0; margin:10px 0 0; text-align:left}
.checklist li{padding:5px 0; font-size:.9rem}
.checklist li.hit{color:var(--accent); font-weight:600}
.checklist li.missed{color:var(--red)}

.emailwrap{max-width:640px; margin:0 auto}
.emailcard{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow); margin:14px 0}
.emailhead{display:flex; gap:10px; align-items:baseline; padding:14px 18px; border-bottom:1px solid var(--line);
  background:var(--raise)}
.emailhead .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink2); font-weight:800}
.emailhead .subj{font-weight:650}
.emailbody{padding:8px 18px 16px}
.eline{padding:9px 0; border-bottom:1px dashed var(--line); cursor:pointer}
.eline:last-child{border-bottom:none}
.eline:hover{background:var(--accent-soft); margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:8px}
.e-en{margin:0 0 2px; font-size:1rem; line-height:1.6}
.e-th{margin:0; font-size:.85rem; color:var(--ink2); line-height:1.6}
.tipbox ul{margin:8px 0 0; padding-left:1.1em}
.tipbox li{margin-bottom:5px}

.linelist{display:grid; gap:8px}
.lrow{background:var(--raise); border:1px solid var(--line); border-radius:12px; padding:12px 15px; cursor:pointer}
.lrow:hover{border-color:var(--accent)}
.l-en{margin:0 0 3px; font-size:1rem; font-weight:600}
.l-th{margin:0; font-size:.85rem; color:var(--ink2)}
.paracard{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:12px}
.parahead{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--accent); margin:0 0 8px}
.paracard .p-en{margin:0 0 6px; font-size:1.02rem; line-height:1.65; cursor:pointer}
.paracard .p-en:hover{color:var(--accent)}
.p-th2{margin:0; font-size:.88rem; color:var(--ink2); line-height:1.65}
.target.blurred{filter:blur(10px); cursor:pointer; user-select:none}

/* ═══════════ รายงานผลวิเคราะห์ ═══════════ */
.advice{padding:12px 0; border-bottom:1px solid var(--line)}
.advice:last-child{border-bottom:none}
.advice b{display:block; color:var(--accent); margin-bottom:4px}
.advice p{margin:0; font-size:.9rem; color:var(--ink2); line-height:1.65}
#reportBody code{font-size:.82rem; background:var(--raise); border:1px solid var(--line);
  padding:1px 6px; border-radius:6px}
#reportBody .soundrow .num{width:auto; min-width:28px; border-radius:8px; font-size:.7rem; padding:0 5px}
.imp.hi{background:var(--red-soft); color:var(--red)}

/* ═══════════ หน้าเลือกภาษาและเป้าหมาย ═══════════ */
.onboard{max-width:760px; margin:6vh auto 0; text-align:center}
.obstep{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:var(--ink2); margin:0 0 6px}
.onboard h1{font-size:1.9rem; margin-bottom:28px; letter-spacing:-.015em; line-height:var(--lh-thai-display)}
.langgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px}
.langcard{font:inherit; color:inherit; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:3px; padding:22px 14px; border-radius:18px;
  border:1.5px solid var(--line); background:var(--raise); box-shadow:var(--shadow); transition:.15s}
.langcard:hover{border-color:var(--accent); transform:translateY(-3px)}
.langcard .flag{font-size:2.1rem; line-height:1.2}
.langcard b{font-size:1rem}
.langcard .native{font-size:.82rem; color:var(--ink2)}
.langcard .imp{margin-top:6px}
.langcard.off{opacity:.45; cursor:not-allowed}
.langcard.off:hover{border-color:var(--line); transform:none}

.goalgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:26px}
.goalcard{font:inherit; color:inherit; cursor:pointer; text-align:left; padding:22px;
  border-radius:18px; border:1.5px solid var(--line); background:var(--raise);
  box-shadow:var(--shadow); transition:.15s; display:flex; flex-direction:column; gap:5px}
.goalcard:hover{border-color:var(--accent); transform:translateY(-3px)}
.goalcard .flag{font-size:1.8rem}
.goalcard b{font-size:1.05rem}
.goalcard .native{font-size:.88rem; color:var(--ink2); line-height:1.6}

/* ═══════════ หน้าแรก (landing) ═══════════ */
.landing{max-width:900px; margin:0 auto}
.lhero{text-align:center; padding:5vh 0 3vh}
.lbadge{display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.02em;
  padding:7px 15px; border-radius:99px; background:var(--accent-soft); color:var(--accent); margin-bottom:22px}
.lhead{font-size:clamp(2.1rem, 6.2vw, 3.4rem); line-height:var(--lh-thai-display); letter-spacing:-.02em;
  margin:0 0 18px; font-weight:800; padding-top:.06em;
  background:linear-gradient(175deg, var(--ink) 55%, color-mix(in srgb, var(--accent) 65%, var(--ink)));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lsub{font-size:1.12rem; color:var(--ink2); max-width:52ch; margin:0 auto 30px; line-height:1.7}
.lcta{display:flex; flex-direction:column; align-items:center; gap:10px}
.lflags{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:34px; font-size:1.5rem; opacity:.85}
.lflags span{transition:transform .25s var(--ease)}
.lflags span:hover{transform:translateY(-4px) scale(1.15)}

.lgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:44px 0}
.lcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow); transition:.25s var(--ease)}
.lcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.lic{font-size:1.7rem}
.lcard h3{font-size:1.02rem; margin:.6em 0 .35em}
.lcard p{font-size:.9rem; color:var(--ink2); margin:0; line-height:1.65}
.lsec{text-align:center; margin:48px 0 20px; font-size:1.4rem}

.ldiff{display:grid; gap:10px; max-width:640px; margin:0 auto}
.drow{display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; padding:16px 18px;
  border-radius:15px; border:1px solid var(--line); background:var(--panel)}
.drow.ok{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.drow b{font-size:.9rem}
.drow p{margin:2px 0 0; font-size:.9rem; color:var(--ink2); line-height:1.6}
.drow.ok p{color:var(--ink)}
.dx{color:var(--red); font-weight:800; font-size:1.1rem}
.dc{color:var(--accent); font-weight:800; font-size:1.1rem}
.lfoot{text-align:center; margin:44px 0 20px; display:flex; justify-content:center}

/* ═══════════ หน้าหลักใหม่ ═══════════ */
.hero-today{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 32px; box-shadow:var(--shadow); margin-bottom:16px}
.hero-today h2{font-size:1.7rem; letter-spacing:-.015em; margin:0 0 4px; line-height:1.35}
.hero-today .btn.big{max-width:320px}
.ht-right{display:grid; place-items:center}
.ring{width:112px; height:112px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:conic-gradient(var(--accent) var(--p,0%), var(--line) 0); position:relative}
.ring::after{content:''; position:absolute; inset:9px; border-radius:50%; background:var(--panel)}
.ring b,.ring small{position:relative; z-index:1; display:block}
.ring b{font-size:1.9rem; font-weight:750; letter-spacing:-.02em; line-height:1}
.ring small{font-size:.68rem; color:var(--ink2); margin-top:3px}

.modegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:16px}
.modetile{font:inherit; color:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow); transition:.22s var(--ease)}
.modetile:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lift)}
.modetile:active{transform:translateY(-1px)}
.modetile.wide{grid-column:1/-1; flex-direction:row; align-items:center; gap:14px; padding:16px 20px}
.modetile.wide b{flex:0 0 auto}
.modetile.wide .mt-sub{flex:1}
.mt-ic{font-size:1.5rem}
.modetile b{font-size:1rem}
.mt-sub{font-size:.82rem; color:var(--ink2); line-height:1.55}
.mt-meta{font-size:.75rem; font-weight:700; color:var(--accent); margin-top:5px}

.statstrip{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px; box-shadow:var(--shadow); margin-bottom:14px}
.ss-nums{display:flex; gap:26px; flex-wrap:wrap}
.ss-nums div{min-width:64px}
.ss-nums b{display:block; font-size:1.5rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2}
.ss-nums span{font-size:.74rem; color:var(--ink2)}
.ss-heat{min-width:170px}
.levelwrap{margin-bottom:16px; padding:0 4px}

.toolbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:0 20px}
.toolbox summary{cursor:pointer; padding:16px 0; font-size:.88rem; font-weight:650; color:var(--ink2); list-style:none}
.toolbox summary::-webkit-details-marker{display:none}
.toolbox summary::before{content:'▸ '; display:inline-block; transition:transform .2s}
.toolbox[open] summary::before{transform:rotate(90deg)}
.toolbox[open] summary{border-bottom:1px solid var(--line)}
.toolbox .toolrow{padding:16px 0 4px}
.toolbox .setting{padding-bottom:18px}

/* โฟกัสต้องมองเห็นได้ทุกที่ — จำเป็นสำหรับคนใช้คีย์บอร์ด */
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ═══════════ แผ่นตัวอักษร (ภาษาที่พิมพ์ยาก) ═══════════ */
.tilebox{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px}
.tile{font:inherit; font-size:1.25rem; font-weight:650; cursor:pointer; min-width:48px; padding:10px 14px;
  border-radius:12px; border:1.5px solid var(--line); background:var(--raise); color:var(--ink);
  transition:.12s var(--ease)}
.tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.tile:active{transform:scale(.94)}
.tile.used{opacity:.25; pointer-events:none}
.tile.ctrl{font-size:1rem; color:var(--ink2); background:transparent}
.selfcheck{margin-top:14px}

/* ═══════════ RTL (อาหรับ) ═══════════
   unicode-bidi:plaintext ทำให้แต่ละกล่องข้อความจัดทิศตามอักษรตัวแรกของตัวเอง
   ข้อความอาหรับจึงเรียงขวาไปซ้ายถูกต้อง โดย UI ภาษาไทยรอบ ๆ ไม่ถูกกระทบ */
.word,.target,.ex,.ex2,.ans,.clozesent,.qword,.b-en,.e-en,.p-en,.l-en,.strictword,
.rf-spoken,.rf-written,.dictinput,.scorewords,.opt,.pline .p-en,.transth,.tile{unicode-bidi:plaintext}

@media (max-width:600px){
  .hero-today{grid-template-columns:1fr; text-align:center; padding:24px 20px; gap:18px}
  .ht-right{order:-1}
  .hero-today .todaybits{justify-content:center}
  .hero-today .btn.big{max-width:100%}
  .statstrip{grid-template-columns:1fr; gap:18px}
  .ss-nums{justify-content:space-between; gap:14px}
  .modetile.wide{flex-direction:column; align-items:flex-start}
  .lhero{padding:3vh 0 2vh}
  .target{font-size:1.3rem}
  .strictword{font-size:2rem}
  .rf-spoken{font-size:1.7rem}
  .soundrow{grid-template-columns:30px 1fr; }
  .soundrow .imp,.soundrow .tick{grid-column:2}
  .bubble{max-width:94%}
  #app{padding:18px 16px 70px}
  h1{font-size:1.55rem}
  .qword{font-size:2rem}
  .wordcard .word{font-size:2rem}
  .brow{grid-template-columns:1fr auto; }
  .brow .t{grid-column:1/-1}
}

/* ═══════════ ชั้นการเคลื่อนไหวและการใช้งานบนมือถือ ═══════════
   เดิม UI นิ่งสนิท ทุกอย่างปรากฏพร้อมกันแบบแบน ๆ ทำให้รู้สึกแข็ง
   ที่เพิ่มคือ "ปฏิกิริยา" ล้วน ๆ ไม่ได้เปลี่ยนโครงหรือข้อความใด ๆ
   ─────────────────────────── */

@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes ringdraw{from{stroke-dashoffset:var(--ring-len,999)}}
@keyframes flamepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14) rotate(-4deg)}}

/* การ์ดในหน้าแรกไล่กันขึ้นมา แทนที่จะโผล่พร้อมกันทั้งหน้า */
.view.active{animation:fade .28s var(--ease)}
.view.active .modegrid>*,
.view.active .cards>*,
.view.active .lgrid>*{animation:rise .42s var(--ease) both}
.view.active .modegrid>*:nth-child(2),
.view.active .cards>*:nth-child(2),
.view.active .lgrid>*:nth-child(2){animation-delay:.06s}
.view.active .modegrid>*:nth-child(3),
.view.active .cards>*:nth-child(3),
.view.active .lgrid>*:nth-child(3){animation-delay:.12s}
.view.active .modegrid>*:nth-child(n+4),
.view.active .cards>*:nth-child(n+4),
.view.active .lgrid>*:nth-child(n+4){animation-delay:.18s}

/* วงแหวนวันต่อเนื่อง — วาดเส้นให้เห็นว่าสะสมมา ไม่ใช่วงกลมนิ่ง ๆ */
.ring circle.val{animation:ringdraw 1.1s var(--ease) both}
.streakflame{display:inline-block; animation:flamepulse 2.4s ease-in-out infinite}

/* ปุ่มเสียงกดแล้วต้องรู้สึกว่ากดติด */
.speak{transition:transform .14s var(--ease-bounce), background .15s ease}
.speak:hover{background:color-mix(in srgb, var(--accent) 22%, var(--accent-soft))}
.speak:active{transform:scale(.88)}
.speak.playing{animation:pop .5s var(--ease-bounce)}

/* ตอบถูกให้รู้สึกดี — เดิมแค่เปลี่ยนสีเฉย ๆ */
.feedback.show{animation:rise .3s var(--ease) both}
.feedback.ok{border-left:4px solid var(--accent)}
.feedback.no{border-left:4px solid var(--red)}

/* แถบความคืบหน้าเลื่อนแบบมีจังหวะ */
.progressbar>div,.levelbar>div,.bb .track>i{transition:width .55s var(--ease)}

/* ── มือถือ ── */
@media (max-width:640px){
  /* iPhone มีขอบจอโค้งและแถบล่าง — ไม่กันไว้เนื้อหาจะโดนบัง */
  #app{padding:18px 16px calc(84px + env(safe-area-inset-bottom))}
  #topbar{padding-top:calc(12px + env(safe-area-inset-top))}

  /* ปุ่มหลักของบทเรียนอยู่ล่างสุดในระยะนิ้วโป้ง ไม่ต้องเลื่อนหา */
  .rowbtns{position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:10;
    background:linear-gradient(to top, var(--bg) 62%, transparent);
    padding:12px 0 calc(6px + env(safe-area-inset-bottom)); margin-top:26px}
  .rowbtns .btn{flex:1; min-height:52px}       /* 44px คือขั้นต่ำที่ Apple แนะนำ */
  .btn{min-height:46px}
  .opt{min-height:56px}
  .panel{padding:18px}
  .lflags{font-size:1.35rem; gap:8px}
}

/* เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว (iOS: ลดการเคลื่อนไหว) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ═══════════ ปรับหน้าหลักให้มีชีวิตขึ้น ═══════════
   เดิมทุกการ์ดหน้าตาเหมือนกันหมด ไอคอน emoji ลอยเดี่ยว ๆ วงแหวนจืด
   ─────────────────────────── */

/* การ์ดบทเรียนวันนี้ต้องเป็นพระเอกของหน้า ไม่ใช่กล่องหนึ่งในหลายกล่อง */
.hero-today{
  background:
    radial-gradient(130% 100% at 12% -30%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 120%, color-mix(in srgb, var(--spark) 10%, transparent), transparent 62%),
    var(--panel);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.hero-today h2{line-height:var(--lh-thai-display)}

/* ไอคอนใส่กรอบสีอ่อน = ดูตั้งใจ ไม่ใช่ emoji หลุดมา */
.mt-ic{
  font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:15px; background:var(--accent-soft);
  margin-bottom:10px; transition:transform .25s var(--ease-bounce), background .2s ease;
}
.modetile:hover .mt-ic{transform:scale(1.08) rotate(-5deg); background:color-mix(in srgb, var(--accent) 24%, var(--accent-soft))}
.modetile.wide .mt-ic{margin-bottom:0; flex:0 0 auto}
.modetile{border-radius:var(--radius-lg); padding:20px}
.modetile:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px}
/* โหมดที่ยังไม่เคยแตะควรชวนให้กด ไม่ใช่จมไปกับพื้น */
.mt-meta{color:var(--spark)}

/* วงแหวน: หนาขึ้น มองเห็นรางชัด และมีขั้นต่ำให้รู้ว่าเริ่มแล้ว */
.ring{
  width:118px; height:118px;
  background:conic-gradient(from -90deg,
    var(--accent) var(--p,0%),
    color-mix(in srgb, var(--line) 70%, transparent) 0);
  filter:drop-shadow(0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent));
}
.ring::after{inset:11px}
.ring b{color:var(--spark)}
.ring small{line-height:1.4}

/* แถบสถิติ */
.statstrip,.toolbox{border-radius:var(--radius-lg)}
.ss-nums b{color:var(--ink)}
.heat i.on{background:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent)}
.heat i.today{outline-color:var(--spark)}

/* ═══════════ ระบบยกโทษและการกลับมาเรียน ═══════════
   คนที่หายไปแล้วกลับมาคือกลุ่มที่เปราะที่สุด — โทนต้องอบอุ่น ห้ามตำหนิ
   ─────────────────────────── */
.comeback{
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--spark) 14%, transparent), transparent 60%),
    var(--panel);
  border:1px solid color-mix(in srgb, var(--spark) 30%, transparent);
  border-radius:var(--radius-lg); padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--shadow); animation:rise .4s var(--ease) both;
}
.comeback b{font-size:1.05rem}
.comeback p{margin:.4em 0 0; font-size:.92rem; color:var(--ink2); line-height:1.6}
.comeback p.small{margin-top:.6em}

/* ข้อความตอนสิทธิ์ยกโทษถูกใช้จริง — ต้องเด่นพอให้รู้สึกว่า "รอด" */
.freezenote{
  display:inline-block; background:var(--spark-soft); color:var(--spark);
  border:1px solid color-mix(in srgb, var(--spark) 30%, transparent);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:12px;
  font-size:.9rem; line-height:1.6; text-align:left;
}
.freezeinfo{margin-top:10px}

/* ปุ่มเร่งด่วนต้องดูเป็นทางเลือกรอง ไม่แย่งความสนใจจากปุ่มหลัก */
#btnQuick{margin-top:10px; width:100%; max-width:420px; font-size:.9rem}
@media (max-width:640px){ #btnQuick{max-width:100%} }

/* ═══════════ หลักฐานว่าเรียนแล้วได้ผล ═══════════
   ตัวเลขเดี่ยว ๆ ไม่มีความหมาย — ต้องเห็นคู่กับตัวเองในอดีตถึงจะรู้สึก
   ออกแบบให้แคปหน้าจอแล้วอ่านรู้เรื่องทันที เพราะนี่คือสิ่งที่คนเอาไปโพสต์
   ─────────────────────────── */
.proof{
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
    var(--panel);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:var(--radius-lg); padding:22px 20px; margin:0 0 22px;
  box-shadow:var(--shadow-lift); animation:pop .5s var(--ease-bounce) both;
}
.proofrow{display:flex; align-items:center; justify-content:center; gap:18px}
.proofcell{min-width:96px}
.proofcell small{display:block; font-size:.74rem; color:var(--ink2); margin-bottom:2px}
.proofcell b{font-size:1.9rem; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink2)}
.proofcell.now b{font-size:2.5rem; color:var(--accent)}
.proofarrow{font-size:1.5rem; color:var(--ink2); opacity:.6}
.proofdelta{margin:14px 0 0; font-size:1.05rem; font-weight:650; color:var(--spark)}
.proofdelta .muted{display:block; font-weight:400; margin-top:2px}

/* กล่องชวนวัดซ้ำใช้โครงเดียวกับกล่องต้อนรับกลับ แต่โทนเขียวเพราะเป็นข่าวดี ไม่ใช่การปลอบ */
.comeback.retest{
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--panel);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.comeback.retest .btn{margin-top:12px}