/* ============================================================
   PF แนวข้อสอบ ก.พ. — โครงหน้าจอแบบ SAO/Computer + ธีมเหลืองทองแบบ ก.พ. (OCSC)
   ชั้นที่ 1: คอมโพเนนต์เฉพาะของ Extra (ถูก re-theme ด้วย alias ท้ายไฟล์)
   ============================================================ */
/* ============================================================
   แนวข้อสอบ ก.พ. ภาค ก — Stylesheet
   ธีมสีเขียว เน้นใช้งานง่ายบนมือถือ (Mobile-first)
   ============================================================ */

:root {
  --green:        #1eaf5d;
  --green-dark:   #178f4b;
  --green-light:  #e8f7ef;
  --green-soft:   #f1faf4;
  --blue:         #2f80ed;
  --red:          #eb5757;
  --red-bg:       #fdecec;
  --red-border:   #f3b0b0;
  --amber:        #f2994a;

  --text:         #2c3e50;
  --muted:        #8a98a6;
  --line:         #e8edf1;
  --bg:           #f4f6f8;
  --card:         #ffffff;

  --radius:       16px;
  --radius-sm:    12px;
  --shadow:       0 6px 22px rgba(20, 40, 30, .07);
  --shadow-soft:  0 2px 10px rgba(20, 40, 30, .05);
  --surface-2:    #eef2f7;
  --hero-from:    #1eaf5d;
  --hero-to:      #0f8a45;
}

/* ===== 🌙 โหมดมืด ===== */
[data-theme="dark"] {
  --green-light: #16321f; --green-soft: #14241b;
  --red-bg: #2c1a1a; --red-border: #5a3030;
  --text: #e6edf3; --muted: #9aa7b2; --line: #2b333d;
  --bg: #0f141a; --card: #1a212a; --surface-2: #232c36;
  --shadow: 0 6px 22px rgba(0,0,0,.45); --shadow-soft: 0 2px 10px rgba(0,0,0,.3);
  --hero-from: #178f4b; --hero-to: #0c5c30;
}
/* ===== 📖 โหมดอ่าน (โทนอุ่น ถนอมสายตา) ===== */
[data-theme="reading"] {
  --green-light: #e2ecd6; --green-soft: #ece2cd;
  --red-bg: #f4e2d4; --red-border: #e3b9a0;
  --text: #463b2c; --muted: #897a5f; --line: #e3d5b9;
  --bg: #efe2cb; --card: #faf2df; --surface-2: #f1e5cd;
  --shadow: 0 6px 22px rgba(120,90,40,.10); --shadow-soft: 0 2px 10px rgba(120,90,40,.07);
  --hero-from: #2e9e63; --hero-to: #1c7a45;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  width: 100%;
}
/* กัน bleed แนวนอนที่ระดับ html เท่านั้น — ค่า overflow ของ html ถูกส่งต่อไปให้ viewport
   viewport จึงเป็นตัวเลื่อนของทั้งหน้าตามปกติ (window.scrollTo / position:sticky ใช้ได้)
   ⚠️ ห้ามใส่ที่ body ด้วย: overflow-x:hidden จะบังคับให้ overflow-y คำนวณเป็น auto
   body กลายเป็น scroll container ซ้อนอีกชั้นใน viewport → window.scrollTo กลายเป็นคำสั่งเปล่า
   (มันสั่ง html ซึ่งไม่ได้เลื่อน) และ sticky ทุกตัวอ้างอิงผิดตัว — ดูคอมเมนต์ที่ .app ชั้นที่ 6 */
html { overflow-x: hidden; }

body {
  font-family: "Sarabun", "Noto Sans Thai", "Tahoma", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  position: relative;
}

/* กรอบแอป (จำลองหน้าจอมือถือบนเดสก์ท็อป) */
.app {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0,0,0,.06);
  /* ไม่มี overflow-x ที่นี่โดยตั้งใจ — กฎ .app ของชั้นที่ 6 เขียนคอมเมนต์เตือนไว้แล้วว่า
     ใส่แล้ว .app จะกลายเป็น scroll container ของตัวเอง (สูงพอดีเนื้อหาเสมอ เลยไม่เคยเลื่อนจริง)
     แล้ว position:sticky ของทุกแถบหัวในแอปจะอ้างอิง scroll container ตัวนี้ แล้วเลื่อนหายไป
     กับเนื้อหา — แต่ตอนนั้นลบออกจาก .app ไม่หมด บรรทัดนี้ตกค้างอยู่จนกฎใหม่ทับไม่ได้
     (กฎชั้นที่ 6 แค่ "ไม่ประกาศ" overflow-x ทับค่าเดิมไม่ได้) */
}

/* จอใหญ่ (แท็บเล็ต/เดสก์ท็อป): ทำให้คอลัมน์แอปเด่นขึ้น ดูเหมือนกรอบมือถือ */
@media (min-width: 540px) {
  body { background: #dbe2e8; }
  .app { box-shadow: 0 0 54px rgba(0,0,0,.13); border-radius: 0; }
  [data-theme="dark"] body { background: #05080b; }
  [data-theme="reading"] body { background: #e0d1b3; }
}

/* ---------- ระบบสลับหน้าจอ ---------- */
.screen { display: none; flex-direction: column; flex: 1; animation: fade .25s ease; }
.screen.active { display: flex; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to {opacity:1; transform:none;} }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============================================================
   ปุ่มทั่วไป
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 999px; font-size: 16px; font-weight: 600;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  width: 100%;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(30,175,93,.32); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: var(--card); color: var(--green-dark); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green-soft); }
.btn-ghost { background: var(--card); color: var(--text); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: #fafbfc; }
.btn-danger { background: var(--card); color: var(--red); border: 1.5px solid var(--red-border); }
.btn-danger:hover { background: var(--red-bg); }

/* ============================================================
   หน้าแรก (Home)
   ============================================================ */
.home-hero {
  background: linear-gradient(140deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: #fff; padding: 38px 22px 30px; text-align: center;
  border-radius: 0 0 28px 28px;
}
.home-hero .badge {
  display: inline-block; background: rgba(255,255,255,.2);
  padding: 5px 14px; border-radius: 999px; font-size: 13px; margin-bottom: 12px; font-weight: 600;
}
.home-hero h1 { font-size: 25px; font-weight: 800; line-height: 1.3; }
.home-hero p { opacity: .92; font-size: 14px; margin-top: 8px; }

.home-body { padding: 18px 16px 28px; display: flex; flex-direction: column; gap: 14px; }

.menu-card {
  background: var(--card); border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 14px;
  text-align: left; border: 1px solid transparent; transition: .15s; width: 100%;
}
.menu-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.menu-card .ico {
  width: 50px; height: 50px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 24px; background: var(--green-light);
}
.menu-card .mc-text { flex: 1; }
.menu-card .mc-text b { font-size: 16.5px; font-weight: 700; display: block; }
.menu-card .mc-text span { font-size: 13px; color: var(--muted); }
.menu-card .arrow { color: var(--muted); font-size: 20px; }

.section-title { font-size: 14px; color: var(--muted); font-weight: 700; margin: 8px 4px 2px; }

/* การ์ดโครงสร้างข้อสอบ */
.structure-card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); }
.structure-card h3 { font-size: 15px; margin-bottom: 10px; }
.struct-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.struct-row:last-child { border-bottom: none; }
.struct-row .s-name { flex: 1; padding-right: 8px; }
.struct-row .s-dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.struct-row .s-score { font-weight: 700; color: var(--text); white-space: nowrap; }

.subject-pick { display: none; flex-direction: column; gap: 10px; margin-top: 4px; }
.subject-pick.show { display: flex; }
.count-pick { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-soft); }
.count-pick .cp-label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }

/* การ์ดสรุปจำนวนข้อสอบทั้งระบบ (แท็บอ่านก่อน) */
.lib-stats { background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); color: #fff; margin: 14px 16px 2px; border-radius: var(--radius); padding: 20px 16px; text-align: center; box-shadow: var(--shadow-soft); }
.lib-main { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.lib-num { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: .5px; }
.lib-unit { font-size: 18px; font-weight: 700; opacity: .92; }
.lib-cap { font-size: 13.5px; margin-top: 6px; opacity: .96; font-weight: 600; }
.lib-break { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
.lib-chip { background: rgba(255,255,255,.2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }

/* คลังข้อสอบ — กดดูรายละเอียดแต่ละหมวด (พับเก็บ เปิดทีละกลุ่ม) */
.lib-groups { margin: 10px 16px 4px; }
/* แหล่งที่มาของข้อสอบ — ใต้การ์ดคลังคำถาม */
.lib-credit { margin: 14px 16px 18px; padding: 14px 16px 12px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 14px; box-shadow: var(--shadow-soft); }
.lib-credit .lc-h { font-size: 14px; font-weight: 800; color: var(--green-dark); margin-bottom: 7px; }
.lib-credit p { font-size: 13.5px; line-height: 1.72; color: #33433b; margin: 0; }
.lib-credit p + p { margin-top: 7px; }
.lib-credit b { color: var(--green-dark); font-weight: 800; }
.lib-credit .lc-thanks { color: var(--muted); font-size: 12.5px; font-weight: 600; }
[data-theme="dark"] .lib-credit { background: var(--card); }
[data-theme="dark"] .lib-credit p { color: var(--text); }
[data-theme="dark"] .lib-credit .lc-thanks { color: var(--muted); }
.lib-groups-cap { font-size: 12.5px; color: var(--muted); text-align: center; margin: 4px 2px 12px; line-height: 1.5; }
.lib-groups-cap b { color: var(--text); }
.lib-acc { border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; margin-bottom: 9px; background: var(--card); overflow: hidden; }
.lib-acc.pa { border-left-color: #1eaf5d; }
.lib-acc.pb { border-left-color: #2f80ed; }
.lib-acc.pc { border-left-color: #7b61ff; }
.lib-acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); }
.lib-eye { font-size: 17px; line-height: 1; opacity: .85; flex-shrink: 0; }
.lib-acc-title { flex: 1; font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.lib-acc-title b { color: var(--text); font-weight: 800; font-size: 14.5px; }
.lib-acc-count { font-size: 13px; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lib-chev { display: inline-block; font-size: 10px; opacity: .6; transition: transform .2s ease; }
.lib-acc.open > .lib-acc-head .lib-chev { transform: rotate(180deg); }
.lib-acc.open > .lib-acc-head .lib-eye { opacity: 1; }
.lib-acc-body { display: none; padding: 0 12px 8px; }
.lib-acc.open > .lib-acc-body { display: block; }
.lib-sub { border-top: 1px dashed var(--line); }
.lib-sub-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 4px; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text); }
.lib-sub-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.lib-sub-meta { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lib-sub-body { display: none; padding: 2px 0 8px; }
.lib-sub.open > .lib-sub-body { display: block; }
.lib-sub.open > .lib-sub-head .lib-chev { transform: rotate(180deg); }
.lib-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 10px; font-size: 13px; border-radius: 8px; }
.lib-row:nth-child(odd) { background: var(--surface-2); }
.lib-row-name { color: var(--text); line-height: 1.4; }
.lib-row-num { font-weight: 700; color: var(--muted); white-space: nowrap; }

/* โหมดทำข้อสอบแยกตามปี */
.year-pick { display: none; flex-direction: column; gap: 10px; margin-top: 4px; }
.year-pick.show { display: flex; }
.scope-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.scope-pick button { padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1.5px solid transparent; transition: transform .12s, background .15s, color .15s; }
.scope-pick button:active { transform: scale(.94); }
.scope-pick button.active { background: var(--green); color: #fff; box-shadow: 0 3px 8px rgba(30,175,93,.3); }
/* เลือกวิชาแบบเช็กบ็อกซ์ (เลือกได้หลายวิชา) */
.cp-sublabel { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin: 11px 0 1px; }
.subj-pick button { border-color: var(--line); }
.subj-pick button::before { content: "○  "; font-weight: 800; }
.subj-pick button.checked { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 3px 8px rgba(30,175,93,.3); }
.subj-pick button.checked::before { content: "✓  "; }
/* เด้งดึงความสนใจ ให้เลือกรูปแบบใหม่ เมื่อข้อสอบมีไม่ถึง */
@keyframes cpBounce { 0%,100%{ transform: translateY(0);} 22%{ transform: translateY(-7px);} 44%{ transform: translateY(0);} 66%{ transform: translateY(-4px);} 82%{ transform: translateY(0);} }
.count-pick.bounce { animation: cpBounce .65s ease; }
.count-pick.bounce .cp-label { color: var(--red); }

/* หน้าสรุป: ระหว่างรอ 1200ms โชว์เป็นเงา (เบลอ) + สปินเนอร์บนหน้าเดียวกัน แล้วค่อยเฉลย+อนิเมชั่น */
#screen-summary { position: relative; }
#screen-summary .result-head, #screen-summary .result-body { transition: opacity .4s ease, filter .4s ease; }
#screen-summary.loading .result-head, #screen-summary.loading .result-body { opacity: .25; filter: blur(3px); pointer-events: none; }
.summary-loader { display: none; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
#screen-summary.loading .summary-loader { display: flex; }

/* ลายน้ำหน้าสรุปผล (ทแยง ตัวหนาใหญ่ จาง ๆ — กันเอาไปอ้างเป็นผลสอบจริง) */
.result-watermark { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transform: rotate(-28deg); opacity: .12; transition: opacity .5s ease .25s; }
.result-watermark .wm-l1 { font-size: 46px; font-weight: 800; color: var(--text); white-space: nowrap; line-height: 1.1; }
.result-watermark .wm-l2 { font-size: 19px; font-weight: 800; color: var(--text); white-space: nowrap; }
#screen-summary.loading .result-watermark { opacity: 0; transition: none; }
@media (max-width: 400px) { .result-watermark .wm-l1 { font-size: 38px; } .result-watermark .wm-l2 { font-size: 16px; } }

/* โอเวอร์เลย์โหลด (ไอคอนหมุน) ก่อนเข้าหน้าสรุป */
.loading-overlay { position: fixed; inset: 0; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 200; }
.loading-overlay.show { display: flex; }
.spinner { width: 56px; height: 56px; border-radius: 50%; border: 5px solid var(--green-light); border-top-color: var(--green); animation: kp-spin .8s linear infinite; }
@keyframes kp-spin { to { transform: rotate(360deg); } }
.ld-text { color: var(--muted); font-weight: 700; font-size: 14px; }

/* ข้อความผู้พัฒนา/ฝากส่งข้อสอบ ในหน้าสรุป */
.summary-dev { background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13.5px; font-weight: 700; color: var(--text); text-align: center; line-height: 1.5; }
.summary-dev span { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; margin-top: 5px; }

/* อนิเมชั่นกราฟวิ่งจาก 0 + กดปุ่มให้รู้สึกตอบสนอง (UX) */
.ana-bar i { transition: width 1s cubic-bezier(.22,.8,.25,1); }
.menu-card { transition: transform .12s, box-shadow .15s, border-color .15s; }
.menu-card:active, .pos-card:active, .special-btn:active, .donate-card:active { transform: scale(.985); }

/* ============================================================
   แถบบนของหน้าทำข้อสอบ (Quiz top bar) — เลียนแบบรูปตัวอย่าง
   ============================================================ */
.topbar {
  background: var(--card); display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px; position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
}
.icon-btn { font-size: 22px; color: var(--green-dark); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--green-light); }
.topbar-title { flex: 1; font-weight: 800; color: var(--green-dark); font-size: 16px; line-height: 1.15; }
.topbar-title span { display: block; font-size: 12px; font-weight: 600; color: var(--green); opacity: .9; }
.topbar-nav { display: flex; gap: 6px; }
.round-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--green);
  background: var(--green-soft); color: var(--green-dark); font-size: 16px; font-weight: 800;
  display: grid; place-items: center; line-height: 1; transition: transform .12s, background .15s, box-shadow .15s, color .15s;
}
.round-btn:hover:not(:disabled) { background: var(--green); color: #fff; box-shadow: 0 4px 10px rgba(30,175,93,.32); }
.round-btn:active:not(:disabled) { transform: scale(.92); }
.round-btn:disabled { opacity: .4; border-color: var(--line); color: var(--muted); background: var(--card); cursor: not-allowed; box-shadow: none; }

.progress-row { background: var(--card); padding: 4px 16px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 9; }
.qcount { font-size: 13px; color: var(--muted); white-space: nowrap; }
.qcount b { color: var(--green-dark); font-size: 15px; }
/* เน้นเลขข้อปัจจุบันให้ใหญ่-เด่น จำง่าย */
.qcount #q-index { font-size: 24px; font-weight: 800; line-height: 1; color: var(--green-dark); vertical-align: -3px; margin: 0 1px; }
.progress-track { flex: 1; height: 8px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #2fd07a, #1eaf5d); border-radius: 999px; width: 0%; transition: width .3s ease; }

/* ---------- เนื้อหาข้อสอบ ---------- */
.quiz-body { padding: 18px 16px 28px; flex: 1; }

.subject-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; background: var(--green-light); color: var(--green-dark); margin-bottom: 14px;
}
.subject-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.instruction { text-align: center; font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.instruction-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.instruction-row .instruction { flex: 1 1 auto; margin-bottom: 0; text-align: left; }
.instruction-row .pause-open-btn { flex-shrink: 0; }

.passage {
  background: #fff7ec; border: 1px solid #f5e0c3; color: #6b5328;
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14.5px; margin-bottom: 14px; white-space: pre-line;
}

.question-text {
  text-align: center; font-size: 19px; font-weight: 700; color: var(--text);
  background: var(--card); border-radius: var(--radius); padding: 22px 16px;
  box-shadow: var(--shadow-soft); margin-bottom: 18px; white-space: pre-line; line-height: 1.7;
}
.question-text.has-list { text-align: left; font-size: 17px; }

/* คำใบ้ (ไกด์) รายข้อ — รูปหลอดไฟ มุมขวาล่างของกรอบคำถาม */
.qwrap { position: relative; margin-bottom: 18px; }
.qwrap .question-text { margin-bottom: 0; padding-bottom: 56px; }
.hint-btn { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff6da; border: 1.5px solid #f1c40f; font-size: 18px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .12s, background .15s; z-index: 3; }
.hint-btn:hover { background: #ffe9a8; }
.hint-btn:active { transform: scale(.9); }
.hint-btn.active { background: #ffdf85; border-color: #e0a400; }
/* คำใบ้รายข้อ — กล่องการ์ตูน sticky-note (สไตล์เดียวกับทริคในหน้าอ่านก่อน) */
.hint-pop { position: absolute; right: 0; top: calc(100% + 10px); max-width: 92%; background: linear-gradient(135deg,#fff8e8,#ffe9c2); color: #6b4e1e; font-size: 14px; line-height: 1.7; font-weight: 600; padding: 12px 15px; border: 2.5px dashed #f4b441; border-radius: 16px; box-shadow: 0 4px 0 rgba(244,180,65,.3), 0 10px 22px rgba(0,0,0,.16); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; z-index: 8; }
.hint-pop.show { opacity: 1; transform: translateY(0); }
.hint-pop::before { content: "💡 ทริคจับข้อนี้  "; font-weight: 800; color: #b5701a; }
[data-theme="dark"] .hint-pop { background: linear-gradient(135deg,#2c2616,#352b15); color: #f0dba6; border-color: #6b5524; box-shadow: 0 4px 0 rgba(107,85,36,.4); }
[data-theme="dark"] .hint-pop::before { color: #ffcf73; }

/* ---------- ตัวเลือก ---------- */
.choices { display: flex; flex-direction: column; gap: 12px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; font-size: 16.5px; transition: .15s; box-shadow: var(--shadow-soft);
}
.choice:hover:not(.disabled) { border-color: var(--green); }
.choice .letter {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; background: var(--surface-2); color: var(--muted); transition: .15s; font-size: 15px;
}
.choice .c-text { flex: 1; white-space: pre-line; }

/* สถานะตัวเลือก */
.choice.selected { border-color: var(--green); background: var(--green-soft); }
.choice.selected .letter { background: var(--green); color: #fff; }

.choice.correct { border-color: var(--green); background: var(--green-light); color: var(--green-dark); font-weight: 600; }
.choice.correct .letter { background: var(--green); color: #fff; }

.choice.wrong { border-color: var(--red-border); background: var(--red-bg); color: var(--red); }
.choice.wrong .letter { background: var(--red); color: #fff; }

.choice.disabled { cursor: default; }
.choice .mark { margin-left: auto; font-size: 18px; font-weight: 800; }

/* ---------- แถบปุ่มล่าง + เฉลย ---------- */
.action-row { display: flex; gap: 12px; margin-top: 20px; }
.action-row .btn { width: auto; flex: 1; }
.btn-explain { background: var(--card); color: var(--text); border: 1.5px solid var(--line); }
.btn-explain.open { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.btn-explain.locked, .btn-explain:disabled { opacity: .55; color: var(--muted); border-style: dashed; cursor: not-allowed; }
/* เปิดเฉลยแล้ว → ปุ่มเป็นสถานะ "ดูเฉลย" (แสดงอยู่) กดยุบกลับไม่ได้ */
.btn-explain.revealed, .btn-explain.revealed:disabled { opacity: 1; background: var(--green-soft); border: 1.5px solid var(--green); border-style: solid; color: var(--green-dark); cursor: default; font-weight: 800; }

.explanation {
  margin-top: 18px; background: var(--green-soft); border: 1px solid #cdeed9;
  border-radius: var(--radius); padding: 18px; display: none;
}
.explanation.show { display: block; animation: fade .25s ease; }
.explanation .exp-head { text-align: center; color: var(--green-dark); font-weight: 800; font-size: 16px; margin-bottom: 12px; }
.explanation .exp-body { white-space: pre-line; font-size: 15px; line-height: 1.7; }
.explanation .exp-body .q-recap { color: var(--muted); font-weight: 600; margin-bottom: 6px; }

/* ============================================================
   หน้าสรุปผล (Result) — ตารางเลียนแบบรูปตัวอย่าง "เป๊ะ"
   ============================================================ */
.result-head { background: var(--card); padding: 20px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.result-head h2 { font-size: 20px; font-weight: 800; }
.result-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.result-body { padding: 18px 14px 26px; }

.overall-banner {
  border-radius: var(--radius); padding: 18px; text-align: center; margin-bottom: 18px; color: #fff;
}
/* การ์ดผลรวม เด้งขึ้นมาแล้วลอยกลับเข้าที่ ก่อนเล่นอนิเมชั่นสรุปต่อ */
@keyframes bannerPop {
  0%   { transform: scale(.6) translateY(26px); opacity: 0; }
  45%  { transform: scale(1.09) translateY(-8px); opacity: 1; }
  68%  { transform: scale(.97) translateY(3px); }
  84%  { transform: scale(1.02) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}
.overall-banner.pop { animation: bannerPop .72s cubic-bezier(.22,.9,.3,1.1) both; }
.overall-banner.pass { background: linear-gradient(135deg, #2fd07a, #1aa052); }
.overall-banner.fail { background: linear-gradient(135deg, #f48a8a, #e23b3b); }
.overall-banner .big { font-size: 26px; font-weight: 800; }
.overall-banner .small { font-size: 14px; opacity: .95; margin-top: 2px; }

/* ----- ตารางผลคะแนน (เลียนแบบรูปภาพที่ 2) ----- */
/* หัวข้อตารางวิทยาศาสตร์สอบ */
.result-section-title { font-size: 16px; font-weight: 800; color: #2a2a2a; margin: 18px 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e0e0e0; }
[data-theme="dark"] .result-section-title { color: var(--text); border-bottom-color: #444; }

.result-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1.5px solid #d9dee3; border-radius: 8px; overflow: hidden; font-size: 15px;
}
.result-table th, .result-table td { border: 1px solid #d9dee3; padding: 14px 12px; vertical-align: middle; }
.result-table thead th {
  background: #eef1f3; font-weight: 800; color: #333; text-align: center; line-height: 1.25;
}
.result-table th.col-subject { text-align: center; }
.result-table td.col-subject { text-align: left; }
.result-table .subj-name { font-weight: 800; color: #2a2a2a; margin-bottom: 6px; }
.result-table .subj-crit { color: var(--red); font-weight: 700; font-size: 13.5px; line-height: 1.4; }
.result-table td.num { text-align: center; font-weight: 800; font-size: 17px; white-space: nowrap; color: #222; }
.result-table td.num.got-pass { color: var(--green-dark); }
.result-table td.num.got-fail { color: var(--red); }
.result-table .col-w { width: 78px; }

.result-meta { display: flex; gap: 10px; margin: 16px 0; }
.meta-box { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; text-align: center; box-shadow: var(--shadow-soft); }
.meta-box .v { font-size: 20px; font-weight: 800; color: var(--green-dark); }
.meta-box .l { font-size: 12px; color: var(--muted); }

.passmark-note { font-size: 12.5px; color: var(--muted); text-align: center; margin: 10px 6px 4px; }

.result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.result-main-btns { display: flex; gap: 10px; }
.result-main-btns .btn { flex: 1; }
.ck-submit-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 14px; }
.ck-submit-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.ck-submit-lbl { font-weight: 800; }
.ck-shopee-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; background: #fff5f2; border: 1px solid #ffd4c8; border-radius: 999px; line-height: 1; }
.shopee-ico { display: block; flex: none; }
.shopee-lbl { font-size: 12px; font-weight: 800; color: #ee4d2d; letter-spacing: .2px; }
.shopee-ad { font-size: 9px; font-weight: 800; color: #666; background: #eee; border: 1px solid #ddd; border-radius: 4px; padding: 1px 4px; line-height: 1.2; letter-spacing: .3px; text-transform: uppercase; }
.ck-shopee-note { display: block; width: 100%; font-size: 11px; font-weight: 500; line-height: 1.45; text-align: center; opacity: .92; padding: 0 2px; }

/* ============================================================
   หน้าทบทวน (Review) และประวัติ (History)
   ============================================================ */
.subscreen-head {
  background: var(--card); display: flex; align-items: center; gap: 10px; padding: 14px;
  position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line);
}
.subscreen-head h2 { font-size: 17px; font-weight: 800; flex: 1; }

.review-body, .history-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.review-card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); border-left: 5px solid var(--green); }
.review-card.is-wrong { border-left-color: var(--red); }
.review-card .rc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.review-card .rc-no { font-weight: 800; color: var(--green-dark); }
.review-card .rc-tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--green-light); color: var(--green-dark); font-weight: 700; }
.review-card .rc-status { margin-left: auto; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.review-card .rc-status.ok { background: var(--green-light); color: var(--green-dark); }
.review-card .rc-status.no { background: var(--red-bg); color: var(--red); }
.review-card .rc-q { font-weight: 700; margin-bottom: 8px; white-space: pre-line; }
.review-card .rc-pass { background:#fff7ec; border:1px solid #f5e0c3; color:#6b5328; padding:8px 10px; border-radius:10px; font-size:13.5px; margin-bottom:8px; white-space:pre-line;}
.review-card .rc-ans { font-size: 14px; margin: 3px 0; }
.review-card .rc-ans .ok { color: var(--green-dark); font-weight: 700; }
.review-card .rc-ans .no { color: var(--red); font-weight: 700; text-decoration: line-through; }
/* ตัวเลือก A–D ในหน้าเฉลย — ทำสัญลักษณ์ว่าผู้ใช้เลือกอะไร และเฉลยที่ถูก */
.review-card .rc-choices { margin: 8px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.review-card .rc-choice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; background: var(--bg); }
.review-card .rc-choice .rc-c-letter { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2, #eef2ef); color: var(--muted); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.review-card .rc-choice .rc-c-text { flex: 1; white-space: pre-line; }
.review-card .rc-choice .rc-c-tag { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.review-card .rc-choice .rc-c-tag.ok { background: #dcfce7; color: #166534; }
.review-card .rc-choice .rc-c-tag.you { background: #e0ecff; color: #1e40af; }
.review-card .rc-choice.correct { border-color: #16a34a; background: #f0fdf4; }
.review-card .rc-choice.correct .rc-c-letter { background: #16a34a; color: #fff; }
.review-card .rc-choice.wrong { border-color: var(--red); background: #fef2f2; }
.review-card .rc-choice.wrong .rc-c-letter { background: var(--red); color: #fff; }
.review-card .rc-noans { font-size: 12.5px; font-weight: 700; color: var(--red); padding: 2px 2px 0; }
[data-theme="dark"] .review-card .rc-choice.correct { background: #0a2010; }
[data-theme="dark"] .review-card .rc-choice.wrong { background: #2a1515; }
[data-theme="dark"] .review-card .rc-choice .rc-c-tag.ok { background: #14361f; color: #86efac; }
[data-theme="dark"] .review-card .rc-choice .rc-c-tag.you { background: #16294d; color: #93c5fd; }
.review-card .rc-exp { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); white-space: pre-line; font-size: 14px; color: #44515e; }

.filter-row { display: flex; gap: 8px; padding: 0 16px; margin-top: 14px; flex-wrap: wrap; }
.chip-btn { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); font-weight: 600; }
.chip-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
/* หน้า "เฉลยละเอียดทุกข้อ" → หัวข้อ + ปุ่มกรอง เลื่อนตามเป็นบล็อกเดียวกัน (ไม่มีช่องเหลื่อม กดง่ายตลอด) */
.rv-stick { position: sticky; top: 0; z-index: 12; background: var(--bg); }
#screen-review .subscreen-head { position: static; }
#review-filter { margin-top: 0; padding-top: 11px; padding-bottom: 11px; background: var(--bg); box-shadow: 0 8px 12px -8px rgba(0,0,0,.22); }
[data-theme="dark"] #review-filter, [data-theme="dark"] .rv-stick { background: var(--bg); }

/* ประวัติ */
.history-card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); }
.history-card .h-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.history-card .h-date { font-weight: 700; font-size: 14px; }
.history-card .h-mode { font-size: 11px; color: var(--muted); }
.history-card .h-badge { margin-left: auto; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.history-card .h-badge.pass { background: var(--green-light); color: var(--green-dark); }
.history-card .h-badge.fail { background: var(--red-bg); color: var(--red); }

.empty-state { text-align: center; color: var(--muted); padding: 50px 20px; }
.empty-state .e-ico { font-size: 48px; margin-bottom: 10px; }
.empty-state .es-sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.6; }

/* ===== การ์ดอธิบายวัตถุประสงค์ของแท็บ ===== */
.boss-intro { padding: 16px 16px 0; }

/* ===== ซ่อนโฆษณา Ad ทุกจุดชั่วคราว (30 นาที หลังกด Ad) ===== */
body.ads-off .ck-shopee-badge, body.ads-off .ck-shopee-note { display: none !important; }

/* ===== แท็บ Sudden Death (ดวลเดือด) ===== */
.sd-tab-body { padding: 18px 16px 90px; display: flex; flex-direction: column; gap: 16px; }
.sd-stat-card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); border: 1.5px solid #ffd9cc; }
.sd-stat-row { display: flex; gap: 10px; }
.sd-stat { flex: 1; text-align: center; background: #fff6f2; border-radius: 12px; padding: 12px 6px; }
.sd-stat .v { font-size: 24px; font-weight: 800; color: #e8590c; line-height: 1.1; }
.sd-stat .l { font-size: 11px; color: var(--muted); margin-top: 3px; }
.sd-remain { text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--text); }
.sd-remain b { color: #e8590c; font-size: 16px; }
.sd-request-btn { font-size: 17px; font-weight: 800; padding: 16px; background: linear-gradient(135deg, #ff7a45, #f03e3e); border: none; box-shadow: 0 6px 16px rgba(240,62,62,.28); }
.sd-request-btn:disabled { background: #cfd4da; box-shadow: none; }
.sd-tab-note { text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
[data-theme="dark"] .sd-stat { background: #2a1a13; }
[data-theme="dark"] .sd-stat-card { border-color: #5a3120; }
/* เฉลยข้อล่าสุด (Sudden Death) */
.sd-last-attempt { background: var(--card); border: 1.5px solid #ffd9cc; border-radius: var(--radius); overflow: hidden; }
.sd-la-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; background: none; border: none; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; gap: 8px; }
.sd-la-toggle:hover { background: var(--surface-2, #f4f7f5); }
.sd-la-arrow { flex-shrink: 0; font-size: 13px; }
.sd-la-body { padding: 14px 16px; border-top: 1.5px solid #ffd9cc; }
.sd-la-q { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text); line-height: 1.65; }
.sd-la-choice { padding: 7px 12px; border-radius: 8px; font-size: 13px; margin: 4px 0; background: var(--surface-2, #f4f7f5); color: var(--text); }
.sd-la-choice.correct { background: #d1fae5; color: #065f46; font-weight: 700; }
.sd-la-choice.wrong { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.sd-la-exp { margin-top: 12px; padding: 10px 12px; background: var(--green-soft, #f0fdf4); border-radius: 8px; font-size: 12.5px; line-height: 1.75; color: var(--text); border-left: 3px solid var(--green, #16a34a); }
[data-theme="dark"] .sd-last-attempt { border-color: #5a3120; }
[data-theme="dark"] .sd-la-body { border-top-color: #5a3120; }
[data-theme="dark"] .sd-la-choice { background: #2a1a13; }
[data-theme="dark"] .sd-la-choice.correct { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .sd-la-choice.wrong { background: #450a0a; color: #fca5a5; }
/* ===== Sudden Death History ===== */
#sd-history-host { margin-top: 18px; }
.sdh-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text); padding: 0 2px 10px; }
.sdh-count { background: var(--surface-2, #f4f7f5); color: var(--muted); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.sdh-list { display: flex; flex-direction: column; gap: 6px; }
.sdh-item { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sdh-toggle { display: flex; align-items: center; width: 100%; padding: 11px 14px; background: none; border: none; font-family: inherit; cursor: pointer; text-align: left; gap: 8px; min-width: 0; }
.sdh-toggle:hover { background: var(--surface-2, #f4f7f5); }
.sdh-num { flex-shrink: 0; width: 22px; text-align: right; font-size: 11px; font-weight: 700; color: var(--muted); }
.sdh-icon { flex-shrink: 0; font-size: 15px; }
.sdh-preview { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdhc-topic { display: inline-block; font-size: 10px; font-weight: 700; background: var(--surface-2, #f4f7f5); color: var(--muted); border-radius: 99px; padding: 1px 7px; margin-right: 5px; vertical-align: middle; flex-shrink: 0; white-space: nowrap; }
.sdh-arrow { flex-shrink: 0; font-size: 11px; }
.sdh-body { padding: 12px 14px; border-top: 1px solid var(--line); }
.sdh-q { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; color: var(--text); line-height: 1.65; }
.sdhc-list { display: flex; flex-direction: column; gap: 4px; }
.sdhc-choice { padding: 6px 11px; border-radius: 8px; font-size: 12.5px; background: var(--surface-2, #f4f7f5); color: var(--text); }
.sdhc-choice.sdhc-correct { background: #d1fae5; color: #065f46; font-weight: 700; }
.sdhc-choice.sdhc-wrong { background: #fee2e2; color: #991b1b; text-decoration: line-through; }
.sdhc-exp { margin-top: 10px; padding: 9px 12px; background: var(--green-soft, #f0fdf4); border-radius: 8px; font-size: 12px; line-height: 1.75; color: var(--text); border-left: 3px solid var(--green, #16a34a); }
[data-theme="dark"] .sdh-item { border-color: #2a2a2a; }
[data-theme="dark"] .sdh-toggle:hover { background: #1a1f2e; }
[data-theme="dark"] .sdhc-choice { background: #1f2937; }
[data-theme="dark"] .sdhc-choice.sdhc-correct { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .sdhc-choice.sdhc-wrong { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .sdhc-topic { background: #1f2937; }
[data-theme="dark"] .sd-la-exp { background: #1a2a1a; }

/* ===== แท็บ จุดบอดของฉัน ===== */
.boss-tab-body { padding: 18px 16px 90px; display: flex; flex-direction: column; gap: 14px; }
.boss-head-card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); border: 1.5px solid var(--line); text-align: center; }
.boss-count { font-size: 16px; margin-bottom: 14px; }
.boss-count b { color: var(--red); font-size: 20px; }
.boss-list { display: flex; flex-direction: column; gap: 8px; }
.boss-item { background: var(--card); border-radius: 12px; padding: 11px 13px; box-shadow: var(--shadow-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border-left: 4px solid var(--red); }
.boss-item .boss-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.boss-item .boss-q { flex: 1 1 100%; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.boss-item .boss-wc { font-size: 11px; font-weight: 800; color: var(--red); background: var(--red-bg); padding: 2px 8px; border-radius: 999px; margin-left: auto; }

/* ============================================================
   ตัวจับเวลา / Toast
   ============================================================ */
.timer-chip { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
/* โหมดรวบรวมล่าสุด — ตัวนับเวลา + รูปนาฬิกาใหญ่และเข้มขึ้น */
.timer-chip.timer-xl { font-size: 17px; font-weight: 800; color: var(--green-dark); gap: 5px; }
.timer-chip.timer-xl.pressure, #timer.timer-xl.pressure { font-size: 17px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #2c3e50; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: .25s; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ตัวเลือกระดับวุฒิ + ป้ายปี + ข้อมูลคลัง
   ============================================================ */
.level-select { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-soft); }
.level-select .ls-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; font-weight: 600; }
.seg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 4px; }
.seg-btn { flex: 1; padding: 10px 8px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); transition: .15s; }
.seg-btn.active { background: var(--green); color: #fff; box-shadow: 0 3px 8px rgba(30,175,93,.3); }

.bank-note { font-size: 13px; color: var(--green-dark); background: var(--green-soft); border: 1px dashed #bfe6cd; border-radius: 12px; padding: 10px 14px; text-align: center; }
.bank-note b { font-size: 15px; }

.chip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip-row .subject-chip { margin-bottom: 0; }
.year-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #fff4e0; color: #b9791f; white-space: nowrap; }
.review-card .rc-year { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: #fff4e0; color: #b9791f; font-weight: 700; }

/* ============================================================
   เก็ง 2569 + คลังเฉพาะทาง + วิเคราะห์จุดแข็ง/จุดอ่อน
   ============================================================ */
.menu-card.highlight { border-color: #d9c8ff; background: linear-gradient(180deg, #faf7ff, #fff); }
.menu-card.highlight .ico { background: #efe7ff; }

.year-chip.predicted, .review-card .rc-year.predicted { background: #efe7ff; color: #7b61ff; }

.special-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.special-btn .sb-count { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* การ์ดคะแนนของคลังเฉพาะทาง */
.special-score-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 16px; text-align: center; box-shadow: var(--shadow-soft); }
.special-score-card .ss-name { font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.special-score-card .ss-score { font-size: 40px; font-weight: 800; color: var(--green-dark); line-height: 1; }
.special-score-card .ss-score .ss-slash { color: var(--muted); font-weight: 600; }
.special-score-card .ss-pct { font-size: 16px; color: var(--muted); margin-top: 4px; }
.special-score-card .ss-pass { display: inline-block; margin-top: 12px; font-weight: 800; padding: 6px 16px; border-radius: 999px; font-size: 14px; }
.special-score-card .ss-pass.pass { background: var(--green-light); color: var(--green-dark); }
.special-score-card .ss-pass.fail { background: var(--red-bg); color: var(--red); }

/* บล็อกวิเคราะห์ผล */
.analysis { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-soft); margin-top: 16px; overflow: hidden; }
.analysis-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; background: none; border: none; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; gap: 8px; }
.analysis-toggle:hover { background: var(--surface-2, #f4f7f5); }
.ana-toggle-hint { font-size: 12px; font-weight: 600; color: var(--green, #16a34a); white-space: nowrap; flex-shrink: 0; }
.analysis-content { padding: 4px 18px 16px; border-top: 1px solid var(--line); }
.ana-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.ana-box { flex: 1; min-width: 150px; }
.ana-h { font-weight: 800; font-size: 14px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
.ana-h.good { color: var(--green-dark); border-color: #cdeed9; }
.ana-h.bad { color: var(--red); border-color: var(--red-border); }
.ana-item { margin-bottom: 10px; }
.ana-item .ana-top { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.ana-item .ana-top b.good { color: var(--green-dark); }
.ana-item .ana-top b.bad { color: var(--red); }
.ana-bar { height: 7px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.ana-bar i { display: block; height: 100%; border-radius: 999px; }
.ana-bar i.good { background: var(--green); }
.ana-bar i.bad { background: var(--red); }
.ana-empty { font-size: 13px; color: var(--muted); padding: 4px 0; }
.ana-reco { background: var(--green-soft); border: 1px dashed #bfe6cd; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 14px 0 12px; color: #2c4a39; line-height: 1.6; }

.history-card .h-simple { font-weight: 700; font-size: 15px; color: var(--green-dark); }
.history-card .h-review-btn { width: 100%; margin-top: 12px; font-size: 14px; padding: 10px; }
.history-card .h-shopee-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 14px; }
.history-card .h-shopee-btn .ck-submit-row { width: 100%; justify-content: center; }
/* SD toggle — ซ่อน Ad badge หลังจากเปิดแล้ว (ไม่มี Shopee action ตอนปิด) */
.sd-la-toggle[aria-expanded="true"] .ck-shopee-badge { display: none; }

/* หัวข้อแบ่งภาค ก / ข / ค บนหน้าแรก */
.part-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; margin: 22px 2px 2px; }
.part-head:first-of-type { margin-top: 6px; }
.pchip { font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 999px; color: #fff; }
.pchip.pa { background: #1eaf5d; }
.pchip.pb { background: #2f80ed; }
.pchip.pc { background: #7b61ff; }
.part-sub { font-size: 12.5px; color: var(--muted); margin: 0 2px 10px; }
.bank-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
/* แต่ละแถวของแบงก์: ปุ่มเลือกหัวข้อใหญ่ (80%) + ปุ่ม "อ่านข้อมูลสรุป" (20%) เป็นเสาด้านขวา */
.bank-row { display: flex; align-items: stretch; gap: 8px; }
.bank-row .special-btn { flex: 1 1 80%; min-width: 0; }                   /* ปุ่มหัวข้อหลัก ~80% — "Xข้อ" เลื่อนซ้ายเพราะวงแคบลง */
.bank-read { flex: 0 0 20%; max-width: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--green-dark); background: var(--green-soft); border: 1.5px solid var(--green); border-radius: 14px; padding: 8px 6px; line-height: 1.2; cursor: pointer; text-align: center; transition: transform .12s, background .15s; }
.bank-read:hover { background: var(--green); color: #fff; }
.bank-read:active { transform: scale(.95); }
.bank-read .br-ic { font-size: 17px; line-height: 1; }
.bank-read .br-t { font-size: 11.5px; }
[data-theme="dark"] .bank-read { background: #14241b; border-color: var(--green); }
/* ไฮไลต์การ์ดที่ถูกพาเข้ามาดู (กะพริบสั้น ๆ ให้สายตาจับได้) */
@keyframes studyFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(30,175,93,0); } 35% { box-shadow: 0 0 0 6px rgba(30,175,93,.35); } }
.study-card.flash, .special-btn.flash { animation: studyFlash 1.4s ease-in-out; }
/* ปุ่ม "อ่านให้ฟัง" — ใช้เสียงอ่านในเครื่อง (TTS) ไม่ต่อเน็ต */
.study-tts { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 2px; padding: 7px 15px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--green); color: var(--green-dark); font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .12s, background .15s; }
.study-tts:active { transform: scale(.96); }
.study-tts.speaking { background: var(--green); color: #fff; animation: ttsPulse 1.2s ease-in-out infinite; }
@keyframes ttsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
[data-theme="dark"] .study-tts { background: #14241b; }
[data-theme="dark"] .study-tts.speaking { background: var(--green); }

/* ปุ่ม "กลับไปลองทำข้อสอบ" ในการ์ดอ่านก่อน (หมวด ข/ค) — มุมขวาล่าง เคาะ 1 บรรทัด */
.study-back-wrap { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: flex-end; }
.study-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; background: var(--green); color: #fff; border: none; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: transform .12s, background .15s; box-shadow: 0 3px 8px rgba(30,175,93,.28); }
.study-back:hover { background: var(--green-dark); }
.study-back:active { transform: scale(.96); }
[data-theme="dark"] .study-back-wrap { border-top-color: var(--line); }

/* ===== Micro-Learn Menu (screen-micro-menu) ===== */
.micro-menu-body { display: flex; flex-direction: column; padding: 8px 0 40px; overflow-y: auto; }
.mm-group-head { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 14px 16px 6px; }
.mm-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mm-row:last-child { border-bottom: none; }
.mm-topic { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.mm-ic { font-size: 22px; flex-shrink: 0; }
.mm-info { display: flex; flex-direction: column; }
.mm-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.mm-count { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mm-btns { display: flex; gap: 6px; flex-shrink: 0; }
.mm-btns .btn { font-size: 12px; padding: 7px 10px; white-space: nowrap; }
/* Reading screen actions */
.inter-action-row { display: flex; gap: 10px; padding: 10px 16px; }
.inter-action-row .btn { flex: 1; }
/* ===== Difficulty Selection Cards (หน้าเนื้อหา) ===== */
.diff-section { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.diff-section-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.diff-cards { display: flex; gap: 8px; }
.diff-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 6px 15px; border-radius: 14px; border: 2px solid transparent; cursor: pointer; font-family: inherit; background: var(--surface-2, #f4f7f5); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s, background .2s; }
.diff-card:hover, .diff-card:focus-visible { transform: translateY(-4px); }
.diff-card:active { transform: scale(.95) translateY(-1px); }
.diff-badge { font-size: 26px; line-height: 1.15; }
.diff-name { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; }
.diff-desc { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4; margin-top: 1px; }
.diff-basic { border-color: #bbf7d0; }
.diff-basic .diff-name { color: #15803d; }
.diff-basic:hover { border-color: #16a34a; background: #f0fdf4; box-shadow: 0 8px 22px rgba(22,163,74,.22); }
.diff-medium { border-color: #bfdbfe; }
.diff-medium .diff-name { color: #1d4ed8; }
.diff-medium:hover { border-color: #2563eb; background: #eff6ff; box-shadow: 0 8px 22px rgba(37,99,235,.2); }
.diff-advanced { border-color: #e9d5ff; }
.diff-advanced .diff-name { color: #7c3aed; }
.diff-advanced:hover { border-color: #7c3aed; background: #faf5ff; box-shadow: 0 8px 22px rgba(124,58,237,.22); }
[data-theme="dark"] .diff-card { background: var(--surface-2, #1f2937); }
[data-theme="dark"] .diff-basic { border-color: #166534; }
[data-theme="dark"] .diff-basic:hover { background: #052e16; }
[data-theme="dark"] .diff-medium { border-color: #1e3a8a; }
[data-theme="dark"] .diff-medium:hover { background: #172554; }
[data-theme="dark"] .diff-advanced { border-color: #4c1d95; }
[data-theme="dark"] .diff-advanced:hover { background: #2e1065; }

/* ============================================================
   แถบเมนูล่าง / สอบตามตำแหน่ง / ดาวอัตราการออก / สัดส่วนภาค
   ============================================================ */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: var(--card); border-top: 1px solid var(--line); display: flex; z-index: 50; box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
.nav-btn { flex: 1; padding: 9px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.nav-btn .ni { font-size: 20px; line-height: 1; filter: grayscale(.5); opacity: .65; }
.nav-btn.active { color: var(--green-dark); }
.nav-btn.active .ni { filter: none; opacity: 1; }

.home-body, .positions-body, .history-body, .posdetail-body { padding-bottom: 140px; }

.plain-head { background: var(--card); padding: 20px 16px 16px; border-bottom: 1px solid var(--line); }
.plain-head h2 { font-size: 20px; font-weight: 800; }
.plain-head p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.plain-head.with-action { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-right: 62px; }
.plain-head .btn-danger { width: auto; padding: 8px 14px; font-size: 13px; border-radius: 999px; white-space: nowrap; }

.positions-body { padding: 16px; padding-bottom: 140px; display: flex; flex-direction: column; gap: 12px; }
.pos-card { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); text-align: left; transition: .15s; }
.pos-card:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); }
.pos-card .pos-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--green-light); display: grid; place-items: center; font-size: 24px; flex: none; }
.pos-card .pos-tx { flex: 1; }
.pos-card .pos-tx b { display: block; font-size: 16px; }
.pos-card .pos-tx span { font-size: 12.5px; color: var(--muted); }
.pos-card .arrow { color: var(--muted); font-size: 20px; }
.pos-group { display: flex; flex-direction: column; gap: 12px; }
.pos-group-h { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; color: var(--text); margin-top: 10px; }
.pos-group:first-child .pos-group-h { margin-top: 0; }
.pos-group .pg-ic { font-size: 18px; }
.dn-dev { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; font-weight: 700; color: var(--text); text-align: center; }
.dn-dev .dn-fb { color: var(--green-dark); font-weight: 800; text-decoration: underline; }
.dn-dev .dn-dev-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 5px; }

.posdetail-body { padding: 16px; padding-bottom: 140px; }
.pd-intro { font-size: 14px; margin-bottom: 14px; }
.pd-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.pd-h { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pd-chips { display: flex; flex-direction: column; gap: 8px; }
.pd-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; text-align: left; transition: .15s; }
.pd-chip:hover { border-color: var(--green); background: var(--green-soft); }
.pd-chip i { font-style: normal; font-size: 12px; color: var(--muted); }
.pd-prop { background: var(--green-soft); border: 1px dashed #bfe6cd; border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #2c4a39; margin: 6px 0 12px; text-align: center; }
.pd-note { font-size: 13px; color: var(--muted); line-height: 1.55; }
.pd-note b { color: var(--text); }

/* ผังหลักเกณฑ์การเลือกสรร (position blueprint) — prefix pbp- กันชนกับ popup ผังข้อสอบ (bp-) */
.pbp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; margin-bottom: 14px; }
.pbp-cap { background: var(--green-soft); color: #20603f; font-weight: 800; font-size: 13.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pbp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pbp-table th { background: #f4f8f5; color: #3a4a42; font-weight: 800; font-size: 12px; padding: 8px 10px; border: 1px solid var(--line); text-align: center; }
.pbp-table th:first-child { text-align: left; }
.pbp-table td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
.pbp-eval { line-height: 1.5; }
.pbp-e-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pbp-e-h b { font-size: 13.5px; text-decoration: underline; }
.pbp-tag { font-size: 11px; font-weight: 700; color: #fff; background: #2f80ed; border-radius: 999px; padding: 2px 8px; }
.pbp-e-sub { font-weight: 700; font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; }
.pbp-list { margin: 0; padding-left: 18px; }
.pbp-list li { font-size: 12.5px; line-height: 1.55; margin-bottom: 4px; }
.pbp-score { text-align: center; font-weight: 800; font-size: 15px; white-space: nowrap; }
.pbp-method { text-align: center; white-space: nowrap; font-size: 12.5px; }
.pbp-sum td { font-weight: 800; background: #f4f8f5; text-align: center; font-size: 14px; }
.pbp-sum td:first-child { text-align: center; }
.pbp-soon { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
[data-theme="dark"] .pbp-table th, [data-theme="dark"] .pbp-sum td { background: #1c2620; color: var(--text); }
[data-theme="dark"] .pbp-cap { color: #8fe0b0; }

.freq-row { margin-bottom: 10px; }
.freq-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #b9791f; background: #fff7ea; border: 1px solid #f3e2c2; padding: 5px 12px; border-radius: 999px; }
.freq-badge .stars { color: #f2a93b; letter-spacing: 1px; }
.freq-badge.pred { color: #7b61ff; background: #efe7ff; border-color: #d9c8ff; }
.freq-badge.skill { color: #2f80ed; background: #eaf2fe; border-color: #cfe0fb; }
.review-card .rc-freq { margin-bottom: 8px; }

#part-breakdown { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-soft); margin-bottom: 4px; }
.pb-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; text-align: center; }
.pb-row { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.pb-row:last-child { border-bottom: none; }
.pb-row b { color: var(--green-dark); }

/* แผงสรุปพัฒนาการ (เทียบก่อน→หลัง) */
#improvement { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); margin-bottom: 14px; }
.imp-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; color: var(--green-dark); }
.imp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.imp-row:last-of-type { border-bottom: none; }
.imp-t { flex: 1; }
.imp-vals { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.imp-vals .old { color: var(--muted); font-weight: 700; }
.imp-vals .new { font-weight: 800; }
.imp-vals .new.up { color: var(--green-dark); }
.imp-vals .new.down { color: var(--red); }
.imp-vals .new.same { color: var(--muted); }
.imp-d { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.imp-d.up { color: var(--green-dark); background: var(--green-light); }
.imp-d.down { color: var(--red); background: var(--red-bg); }
.imp-d.same { color: var(--muted); background: #eef1f4; }
.imp-overall { margin-top: 12px; background: var(--green-soft); border: 1px dashed #bfe6cd; border-radius: 12px; padding: 11px 14px; font-size: 14px; color: #2c4a39; line-height: 1.6; }
.imp-overall:empty { display: none; }

/* ============================================================
   บริจาค / สนับสนุน (การ์ด + ปุ่ม + ป๊อปอัป QR)
   ============================================================ */
.donate-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(180deg, #fff6f8, #fff); border: 1px solid #f3cdd8; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); margin-top: 6px; transition: .15s; }
.donate-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #ec9cb3; }
.donate-card .ico { width: 50px; height: 50px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 24px; background: #ffe6ee; }
.donate-card .mc-text { flex: 1; }
.donate-card .mc-text b { display: block; font-size: 16.5px; color: #c2185b; }
.donate-card .mc-text span { font-size: 13px; color: var(--muted); }
.donate-card .arrow { color: #e091a9; font-size: 20px; }

.btn-donate { background: #fff0f5; color: #c2185b; border: 1.5px solid #f3cdd8; }
.btn-donate:hover { background: #ffe0ec; }

.modal-overlay { position: fixed; inset: 0; background: rgba(20,30,25,.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 18px; }
.modal-overlay.show { display: flex; animation: fade .2s ease; }
.modal { background: var(--card); width: 100%; max-width: 380px; border-radius: 22px; padding: 24px 20px 20px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 92vh; overflow: auto; text-align: center; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 16px; display: grid; place-items: center; }
.modal-close:hover { background: #e6eaee; }
.dn-heart { font-size: 40px; line-height: 1; }
.modal h3 { font-size: 20px; font-weight: 800; margin: 6px 0; }
.dn-msg { font-size: 14px; color: #55636e; white-space: pre-line; line-height: 1.6; margin-bottom: 14px; }
.dn-amounts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.dn-amt { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dn-amt.active { background: var(--green); color: #fff; border-color: var(--green); }
.dn-qr { display: flex; justify-content: center; align-items: center; min-height: 180px; margin-bottom: 12px; }
.dn-canvas, .dn-img { width: 236px; height: 236px; border-radius: 14px; border: 1px solid var(--line); padding: 6px; background: var(--card); }
.dn-img { object-fit: contain; }
.dn-ph { width: 236px; min-height: 160px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; padding: 16px; line-height: 1.5; }
.dn-acc-text { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.6; }
.dn-copy { margin-top: 10px; border: 1.5px solid var(--green); color: var(--green-dark); background: var(--card); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; }
.dn-copy:hover { background: var(--green-soft); }
.dn-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* ============================================================
   ป๊อปอัปตรวจคำตอบก่อนส่ง (โหมดเฉลยตอนจบ)
   ============================================================ */
.check-summary { font-size: 14.5px; margin-bottom: 12px; color: var(--text); }
.check-summary .todo-n { color: var(--red); }
/* grid-auto-rows: auto ไม่ยอมวัดความสูงของ .ck-cell ให้ถูกตอนที่ความสูงนั้นมาจาก
   aspect-ratio (แถวยุบเหลือ ~5px ทั้งที่การ์ดจริงสูง 35px) การ์ดเลยซ้อนทับแถวถัดไป
   แก้โดยกำหนดความสูงแถวตรง ๆ ไม่ให้ grid ต้องคำนวณจาก aspect-ratio ของลูกอีกที */
.check-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(30px, 9vw, 40px); gap: 9px; margin: 10px 0 16px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; max-height: 260px; overflow: auto; }
.ck-cell { border-radius: 10px; border: 1.5px solid var(--line); font-weight: 800; font-size: 14px; display: grid; place-items: center; transition: .12s; }
.ck-cell.done { background: #fffaf0; color: #9a7400; border: 2px solid #f4c430; }
.ck-cell.todo { background: var(--card); color: var(--muted); border: 1.5px solid var(--line); }
.ck-cell.cur { outline: 2px solid var(--green); outline-offset: 1px; }
.ck-cell:hover { transform: translateY(-1px); }
.check-hint { font-size: 12px; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ck-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.ck-dot.done { background: #fffaf0; border: 2px solid #f4c430; }
.ck-dot.todo { background: var(--card); border: 1.5px solid var(--line); }
.check-actions { display: flex; flex-direction: column; gap: 8px; }
.check-note { font-size: 12.5px; color: var(--red); text-align: center; margin: 2px 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ============================================================
   สรุป/วิเคราะห์หน้าประวัติ
   ============================================================ */
.hist-summary { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-soft); }
.hist-summary h3 { font-size: 16px; margin-bottom: 12px; }
.hs-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.hs-stat { flex: 1; background: var(--green-soft); border-radius: 12px; padding: 10px 6px; text-align: center; }
.hs-stat .v { font-size: 20px; font-weight: 800; color: var(--green-dark); }
.hs-stat .l { font-size: 11.5px; color: var(--muted); }
.hs-trend { font-size: 13px; margin-bottom: 10px; }
.hs-trend .trend.up { color: var(--green-dark); font-weight: 700; }
.hs-trend .trend.down { color: var(--red); font-weight: 700; }
.hs-section-t { font-size: 13px; font-weight: 800; color: var(--muted); margin: 10px 0 6px; }
.hs-bar { margin-bottom: 8px; }
.hs-bar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; }
.hs-bar-top b.good { color: var(--green-dark); }
.hs-bar-top b.bad { color: var(--red); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chip { font-size: 12px; background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); border-radius: 999px; padding: 4px 10px; font-weight: 600; }
.hs-reco { background: var(--green-soft); border: 1px dashed #bfe6cd; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: #2c4a39; line-height: 1.6; margin: 12px 0; }

/* ============================================================
   เกร็ดความรู้ (สรุป + ทริค)
   ============================================================ */
.study-body { padding: 16px; padding-bottom: 140px; display: flex; flex-direction: column; gap: 12px; }
.study-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.study-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 16px; text-align: left; }
.study-head .sh-ic { font-size: 22px; flex: none; }
.study-head .sh-t { flex: 1; font-weight: 800; font-size: 15px; }
.study-head .sh-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--green-light); color: var(--green-dark); white-space: nowrap; }
.study-head .sh-arrow { color: var(--muted); font-size: 16px; transition: transform .2s; }
.study-card.open .study-head .sh-arrow { transform: rotate(180deg); }
.study-inner { display: none; padding: 0 16px 16px; }
.study-card.open .study-inner { display: block; }
.study-h { font-weight: 800; font-size: 14.5px; color: var(--green-dark); margin: 13px 0 6px; }
.study-ul { margin: 0 0 4px; padding-left: 20px; }
.study-ul li { font-size: 14.5px; line-height: 1.8; margin-bottom: 5px; }
.study-p { font-size: 14.5px; line-height: 1.75; margin: 6px 0; color: #44515e; }
/* ทริคการจำ — สไตล์การ์ตูน sticky-note อ่านสนุก จำง่าย */
.study-trick {
  background: linear-gradient(135deg, #fff8e8, #ffe9c2);
  border: 2.5px dashed #f4b441;
  border-radius: 18px;
  padding: 13px 16px;
  font-size: 15px;
  line-height: 1.85;
  margin: 14px 0;
  color: #6b4e1e;
  font-weight: 600;
  position: relative;
  box-shadow: 0 4px 0 rgba(244,180,65,.30), 0 6px 14px rgba(244,180,65,.18);
}
.study-trick b { color: #b5701a; font-weight: 800; }
.study-trick mark { background: #ffd84d; box-shadow: 0 2px 0 rgba(181,112,26,.18); border-radius: 7px; padding: 1px 6px; color: #5a3d12; font-weight: 800; }
mark { background: #fff2a8; color: inherit; padding: 0 3px; border-radius: 4px; font-weight: 700; }
/* ไฮไลต์ในโน้ต ให้ดูเหมือนปากกาเน้นข้อความ (อ่านง่าย น่าอ่าน) */
.study-inner mark { background: linear-gradient(180deg, transparent 35%, #ffe071 35%); border-radius: 3px; padding: 0 3px; font-weight: 800; color: #4a3c10; }
.study-trick mark { background: #ffd84d; }
/* กล่องอ้างอิง (กฎหมาย ภาค ข/ค) — แหล่งตัวหนา + ปุ่มลิงก์ไปแหล่งจริงคนละบรรทัด */
.study-ref { background: var(--surface-2, #f4f7f5); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin: 13px 0 4px; font-size: 12.8px; line-height: 1.62; }
.study-ref .sr-cite { color: var(--muted); }
.study-ref .sr-by { margin-top: 5px; color: #33433b; }
.study-ref .sr-by b { color: var(--green-dark); font-weight: 800; }
.study-ref .sr-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 13px; border-radius: 10px; background: var(--green-soft); border: 1px solid var(--green); color: var(--green-dark); font-weight: 800; font-size: 13px; text-decoration: none; }
.study-ref .sr-link:active { transform: scale(.98); }
[data-theme="dark"] .study-ref { background: #161b16; }
[data-theme="dark"] .study-ref .sr-by { color: var(--text); }
/* หัวข้อกลุ่มในแท็บอ่านก่อน */
.study-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 2px 6px; padding-bottom: 7px; border-bottom: 2px solid var(--line); font-size: 15.5px; font-weight: 800; color: var(--text); }
.study-group-head:first-child { margin-top: 4px; }
.study-group-head i { font-size: 12px; font-weight: 700; color: var(--muted); font-style: normal; white-space: nowrap; }
.study-group-head.sg-intro { color: #2563eb; border-color: #cdddfb; }
.study-group-head.sg-analytical { color: var(--green-dark); border-color: #cfead8; }
.study-group-head.sg-english { color: #c2740a; border-color: #f3e2c2; }
.study-group-head.sg-civil { color: #7c3aed; border-color: #e0d3fb; }
/* เนื้อหาบทเรียนในโมดัล "อ่านเสริม" */
.wt-lesson { border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 13px; padding: 10px 14px; margin-bottom: 10px; background: var(--card); }
.wt-lesson-h { width: 100%; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--green-dark); text-align: left; cursor: pointer; }
.wt-lesson-h .wt-ic { font-size: 19px; flex: none; }
.wt-lesson-h .wt-ttl { flex: 1; min-width: 0; }
.wt-lesson-h .wt-arrow { flex: none; color: var(--muted); font-size: 16px; transition: transform .2s; }
.wt-lesson.open .wt-lesson-h .wt-arrow { transform: rotate(180deg); }
.wt-lesson .wt-lesson-body { display: none; padding: 0; }
.wt-lesson.open .wt-lesson-body { display: block; animation: fadeSlide .22s ease; }
[data-theme="dark"] .wt-lesson { background: #11140f; }

/* ============================================================
   ปุ่มเปลี่ยนธีม (มุมขวาบน) + ป๊อปอัปยืนยันในธีมแอป + override โหมดมืด
   ============================================================ */
.theme-fab { position: fixed; top: 10px; right: max(10px, calc(50vw - 230px)); z-index: 85; }
/* ============================================================
   สวิตช์ธีม — แคปซูลกระจก 3 ช่อง ตัวเลื่อนวิ่งตามช่องที่เลือก
   ใช้ไอคอน SVG (เดิมเป็นอิโมจิ ซึ่งสีไม่เข้ากับธีมและคมชัดต่างกันในแต่ละเครื่อง)
   ตัวแปร --ts-w คือความกว้างช่อง ใช้คำนวณระยะเลื่อนของ .ts-thumb
   ============================================================ */
.theme-seg {
  --ts-w: 36px;
  position: relative; display: flex; gap: 0;
  padding: 4px; border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.theme-seg button {
  position: relative; z-index: 1;
  width: var(--ts-w); height: 32px;
  display: grid; place-items: center;
  border-radius: 999px; color: var(--muted);
  transition: color .2s, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.theme-seg button svg { width: 17px; height: 17px; display: block; }
.theme-seg button.active { color: var(--brand); transform: scale(1.06); }
.theme-seg button:active { transform: scale(.92); }
.theme-seg .ts-thumb {
  position: absolute; top: 4px; left: 4px;
  width: var(--ts-w); height: 32px; border-radius: 999px;
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent);
  /* เลื่อนทีละ "ความกว้างตัวเอง" ไม่ใช่ทีละ --ts-w
     เพราะในป๊อปอัปตั้งค่า --ts-w เป็นเปอร์เซ็นต์ และ % ใน translateX คิดจาก
     ความกว้างของตัวเลื่อนเอง (33.333% ของ 33.333% = เลื่อนแค่ ~1 ใน 3 ช่อง)
     กรอบจึงไปค้างคร่อมระหว่างไอคอน ไม่ตรงกับธีมที่เลือก
     ใช้ 100% แทน = เลื่อนหนึ่งช่องพอดีเสมอ ไม่ว่า --ts-w จะเป็น px หรือ % */
  transform: translateX(calc(var(--ti, 0) * 100%));
  transition: transform .34s cubic-bezier(.34,1.56,.64,1), background .2s;
}

.confirm-box { background: var(--card); width: 100%; max-width: 340px; border-radius: 20px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.confirm-box .cf-ic { font-size: 36px; line-height: 1; }
.confirm-box .cf-msg { font-size: 15px; color: var(--text); line-height: 1.6; margin: 8px 0 18px; white-space: pre-line; }
.confirm-box .cf-actions { display: flex; gap: 10px; }
.confirm-box .cf-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.confirm-box .cf-actions .ic-exit { flex: none; }
/* กันไอคอนในปุ่มยืนยันกางเต็มจอ ถ้าลืมใส่ width/height ที่ตัว <svg> */
.confirm-box .cf-actions svg { width: 17px; height: 17px; flex: none; }

[data-theme="dark"] .result-table thead th { color: var(--text); }
[data-theme="dark"] .subj-name { color: var(--text); }
[data-theme="dark"] .result-table td.num:not(.got-pass):not(.got-fail) { color: var(--text); }
[data-theme="dark"] .rc-exp, [data-theme="dark"] .dn-msg, [data-theme="dark"] .ana-reco, [data-theme="dark"] .hs-reco, [data-theme="dark"] .study-p, [data-theme="dark"] .pd-prop, [data-theme="dark"] .pd-intro, [data-theme="dark"] .dn-acc-text { color: var(--text); }
[data-theme="dark"] .freq-badge, [data-theme="dark"] .year-chip { background: #2a2417; color: #e8c98a; border-color: #4a3f22; }
[data-theme="dark"] .study-trick { background: linear-gradient(135deg,#2c2616,#352b15); color: #f0dba6; border-color: #6b5524; box-shadow: 0 4px 0 rgba(107,85,36,.4); }
[data-theme="dark"] .study-trick b { color: #ffcf73; }
[data-theme="dark"] .study-inner mark { background: linear-gradient(180deg, transparent 35%, #6b5524 35%); color: #ffe9b3; }
[data-theme="dark"] .passage, [data-theme="dark"] .rc-pass { background: #2a2417; color: #ddcaa0; border-color: #4a3f22; }
[data-theme="dark"] mark { background: #5a4a12; color: #ffe9a8; }
[data-theme="dark"] .toast { background: #2b333d; }
[data-theme="dark"] .modal-close { background: var(--surface-2); color: var(--muted); }
[data-theme="dark"] .ck-cell.todo { background: var(--surface-2); }
[data-theme="dark"] .btn-explain, [data-theme="dark"] .btn-ghost { color: var(--text); }
[data-theme="dark"] .dn-ph { background: var(--surface-2); }

/* ผังข้อสอบ ภาค ก (Blueprint modal) */
.bp-modal { max-width: 480px; max-height: 88vh; overflow-y: auto; }
/* โมดัล "อ่านทริคเสริม" ในหน้าสรุปผล */
.wt-modal { max-width: 460px; max-height: 88vh; overflow-y: auto; text-align: left; }
.wt-modal .bp-title, .wt-modal .bp-intro { text-align: left; }
.wt-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.wt-item { background: var(--green-soft); border: 1px solid #cfead8; border-left: 4px solid var(--green); border-radius: 12px; padding: 11px 13px; }
.wt-topic { font-weight: 800; font-size: 14px; color: var(--green-dark); margin-bottom: 4px; }
.wt-tip { font-size: 13.5px; line-height: 1.7; color: #3a4a40; }
.wt-actions { display: flex; flex-direction: column; gap: 9px; }
.wt-trick-btn { margin-bottom: 9px; }
[data-theme="dark"] .wt-item { background: #14241b; border-color: #20392a; }
[data-theme="dark"] .wt-tip { color: var(--text); }
.bp-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.bp-intro { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.bp-subject { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid var(--sc, var(--primary)); }
.bp-head { font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.bp-no { font-weight: 800; margin-right: 2px; }
.bp-score { display: block; font-size: 12.5px; font-weight: 600; color: var(--sc, var(--primary)); margin-top: 1px; }
.bp-topics { list-style: disc; padding-left: 22px; margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--text); }
.bp-topics b { color: var(--sc, var(--primary)); font-weight: 800; }
.bp-note { background: #fff8ec; border: 1px solid #f3e3c2; border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.6; margin: 12px 0; color: #7a5b00; }
.bp-start { width: 100%; margin-top: 6px; font-size: 17px; padding: 14px; }
[data-theme="dark"] .bp-note { background: #2a2417; color: #e8d6a8; border-color: #4a3f22; }
[data-theme="dark"] .bp-subject { border-color: var(--line); }
[data-theme="dark"] .bp-score { opacity: .85; }

/* ปุ่มโหลดแอปบนหน้าแรก */
.menu-card.dl-card { text-decoration: none; color: inherit; }

@media (max-width: 380px) {
  .question-text { font-size: 17px; }
  .home-hero h1 { font-size: 22px; }
}

/* ============================================================
   ลูกเล่น & อนิเมชั่น — ทำงานด้วย transform/opacity ล้วน (ลื่น ไม่กินเครื่อง)
   ============================================================ */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* การ์ด/ลิสต์ ทยอยลอยขึ้นมาทีละใบ (delay ใส่จาก JS หรือ nth-child) */
.study-card, .review-card, .bank-row { animation: riseIn .34s ease both; }
.menu-card { animation: riseIn .34s ease both; }
.menu-card:nth-child(2) { animation-delay: 40ms; }
.menu-card:nth-child(3) { animation-delay: 80ms; }
.menu-card:nth-child(4) { animation-delay: 120ms; }
.menu-card:nth-child(5) { animation-delay: 160ms; }
.pos-card { animation: riseIn .3s ease both; }

/* เปลี่ยนข้อ → คำถามสไลด์เข้า + ช้อยส์ทยอยตาม */
@keyframes qSwap { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.qwrap.qswap { animation: qSwap .26s ease; }
.choice.enter { animation: riseIn .3s ease both; }

/* กดเลือกคำตอบ → เด้งรับนิด ๆ */
@keyframes popSel { 0% { transform: scale(1); } 45% { transform: scale(1.02); } 100% { transform: scale(1); } }
.choice.selected { animation: popSel .2s ease; }

/* ไอคอนแถบเมนูล่าง เด้งตอนถูกเลือก */
@keyframes navBounce { 0% { transform: translateY(0); } 40% { transform: translateY(-4px) scale(1.15); } 100% { transform: translateY(0); } }
.nav-btn .ni { display: inline-block; }
.nav-btn.active .ni { animation: navBounce .35s ease; }

/* เปิดการ์ดอ่านก่อน → เนื้อหาเฟดสไลด์ลงมา */
@keyframes fadeSlide { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.study-card.open .study-inner { animation: fadeSlide .22s ease; }

/* ---------- ฉลองผลสอบบนการ์ดผลรวม ---------- */
.overall-banner { position: relative; }
.celebrate-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.cf-p { position: absolute; left: 50%; top: 55%; width: 9px; height: 14px; border-radius: 3px; opacity: 0; animation: cfBurst 1.1s ease-out forwards; }
@keyframes cfBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.5); }
  60%  { opacity: 1; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rz)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 74px)) rotate(calc(var(--rz) + 90deg)) scale(.9); }
}
.cf-star { position: absolute; bottom: 4px; font-size: 17px; opacity: 0; animation: starFloat 2s ease-in-out forwards; }
@keyframes starFloat { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-48px) scale(1.15); } }

/* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่อง */
@media (prefers-reduced-motion: reduce) {
  .study-card, .review-card, .bank-row, .menu-card, .pos-card, .choice.enter, .qwrap.qswap, .nav-btn.active .ni, .study-card.open .study-inner { animation: none !important; }
  .cf-p, .cf-star { display: none; }
  .theme-seg .ts-thumb, .theme-seg button { transition: none; }
}

/* กราฟคะแนนย้อนหลังในแท็บ "สรุปผลการวิเคราะห์" — แท่งโตขึ้นจากพื้นทีละแท่ง */
.hs-chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 8px 4px 2px; }
.hs-chart .hsc-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.hs-chart .hsc-col i { display: block; width: 72%; max-width: 26px; border-radius: 5px 5px 2px 2px; animation: barGrow .5s cubic-bezier(.25,.9,.35,1.1) both; transform-origin: bottom; }
.hs-chart .hsc-col i.good { background: linear-gradient(180deg, #2fd07a, #1aa052); }
.hs-chart .hsc-col i.bad { background: linear-gradient(180deg, #f48a8a, #e23b3b); }
.hs-chart .hsc-col span { font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .hs-chart .hsc-col i { animation: none !important; } }

/* หัวรายการประวัติ + ปุ่มล้างประวัติ (ย้ายลงมาจาก header เพื่อไม่ชนแคปซูลธีม) */
.hs-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 4px 8px; }
.hs-listhead .hs-section-t { margin: 0; }
/* ปุ่มล้างประวัติ — pill เล็ก โทนแดงนุ่ม มีไอคอนถังขยะ */
.hist-clear { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 7px 13px; border-radius: 999px; background: var(--red-bg, #fdecec); color: var(--red, #e23b3b); border: 1px solid var(--red-border, #f3c2c2); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.hist-clear:hover { background: var(--red, #e23b3b); color: #fff; border-color: var(--red, #e23b3b); }
.hist-clear:active { transform: scale(.95); }
.hist-clear .hc-ic { font-size: 13px; }
[data-theme="dark"] .hist-clear { background: #2a1717; border-color: #5a2a2a; color: #ff9a9a; }
[data-theme="dark"] .hist-clear:hover { background: #c43838; color: #fff; }

/* บรรทัด "เรื่องที่ยังพลาด" ในบทเรียนของโมดัลอ่านเสริม */
.wt-cover { font-size: 12.5px; line-height: 1.7; color: var(--muted); background: var(--surface-2, #f4f7f5); border-radius: 10px; padding: 8px 11px; margin: 2px 0 10px; }
.wt-cover b { color: var(--green-dark); font-weight: 700; }
[data-theme="dark"] .wt-cover { background: #161b16; }

/* Countdown Widget */
.countdown-widget { text-align: center; padding: 16px 12px; margin-bottom: 12px; background: linear-gradient(135deg, #fff5f5, #fff0f0); border-radius: 14px; border: 1.5px solid #fecaca; }
.cd-label { font-size: 13px; font-weight: 600; color: #b91c1c; margin-bottom: 10px; }
.cd-blocks { display: flex; justify-content: center; gap: 8px; }
.cd-block { background: #fff; border-radius: 10px; padding: 10px 14px; min-width: 60px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cd-num { display: block; font-size: 28px; font-weight: 800; color: #dc2626; line-height: 1.1; }
.cd-unit { display: block; font-size: 11px; color: #78716c; margin-top: 2px; }
.cd-done { font-size: 15px; font-weight: 700; color: #dc2626; animation: cdBlink 1s ease-in-out infinite; padding: 12px; }
@keyframes cdBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
[data-theme="dark"] .countdown-widget { background: linear-gradient(135deg, #1c1010, #2a1515); border-color: #7f1d1d; }
[data-theme="dark"] .cd-block { background: #1a1a1a; box-shadow: none; }
[data-theme="dark"] .cd-num { color: #fca5a5; }
[data-theme="dark"] .cd-label { color: #fca5a5; }
[data-theme="reading"] .countdown-widget { background: linear-gradient(135deg, #fdf8f0, #fdf2e8); border-color: #e8c9a0; }

/* การ์ดข้อควรรู้เกี่ยวกับข้อสอบ ก.พ. (กดอ่านเพิ่มเติม) ใต้ตัวนับเวลา */
.examinfo-card {
  margin-bottom: 12px; border-radius: 14px;
  background: linear-gradient(135deg, #eef4ff, #e8f0fe);
  border: 1.5px solid #c3d8f5; overflow: hidden;
}
.ei-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; text-align: left; cursor: pointer; background: transparent;
}
.ei-toggle .ei-i {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #2563eb; color: #fff;
  font-size: 12.5px; font-weight: 800; font-style: italic; font-family: Georgia, serif;
}
.ei-toggle .ei-title { flex: 1; font-size: 14px; font-weight: 700; color: #1e40af; }
.ei-toggle .ei-hint { font-size: 12px; font-weight: 600; color: #2563eb; white-space: nowrap; }
.ei-content { padding: 0 14px 14px; }
.ei-content .ei-body { font-size: 13px; line-height: 1.7; color: #3a4a5e; text-align: left; margin: 0 0 12px; }
.ei-cite-row { display: flex; justify-content: flex-end; }
.ei-cite {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #2563eb;
  background: rgba(37,99,235,.1); padding: 6px 12px; border-radius: 999px;
  text-decoration: none; transition: background .15s;
}
.ei-cite:hover { background: rgba(37,99,235,.18); text-decoration: underline; }
[data-theme="dark"] .examinfo-card { background: linear-gradient(135deg, #0e1726, #111d30); border-color: #2a3f5f; }
[data-theme="dark"] .ei-toggle .ei-title { color: #93c5fd; }
[data-theme="dark"] .ei-toggle .ei-hint { color: #93c5fd; }
[data-theme="dark"] .ei-content .ei-body { color: #b8c4d4; }
[data-theme="dark"] .ei-cite { color: #93c5fd; background: rgba(147,197,253,.12); }
[data-theme="reading"] .examinfo-card { background: linear-gradient(135deg, #f4f1ea, #efe9dc); border-color: #ddcdb0; }

.menu-card.glow-new { position: relative; border: 1.5px solid #fca5a5; background: linear-gradient(135deg, #fff5f5, #fef2f2); }
.menu-card.glow-new .mc-text b { color: #dc2626; }
[data-theme="dark"] .menu-card.glow-new { background: linear-gradient(135deg, #1c1010, #2a1515); border-color: #7f1d1d; }
[data-theme="dark"] .menu-card.glow-new .mc-text b { color: #fca5a5; }

/* Interstitial screen (Mode 5 micro-learn) */
#screen-interstitial .inter-body { padding: 16px; max-height: calc(100vh - 160px); overflow-y: auto; }
#screen-interstitial .inter-actions { padding: 12px 16px; text-align: center; }

/* Sudden Death modal */
.sd-modal { text-align: center; }
.sd-header { margin-bottom: 12px; }
.sd-icon { font-size: 40px; display: block; margin-bottom: 4px; }
.sd-header h3 { color: #dc2626; margin: 0; font-size: 18px; }
.sd-sub { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.sd-warn { font-size: 13.5px; font-weight: 700; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; line-height: 1.45; text-align: center; }
.sd-warn-pct { font-size: 26px; font-weight: 800; color: #dc2626; vertical-align: -2px; margin: 0 1px; }
.sd-warn-sub { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; margin-top: 2px; }
[data-theme="dark"] .sd-warn { background: #2a1515; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .sd-warn-pct { color: #f87171; }
[data-theme="dark"] .sd-warn-sub { color: #6b7280; }
.sd-question { font-size: 14px; line-height: 1.7; text-align: left; padding: 12px; background: var(--surface-2, #f4f7f5); border-radius: 10px; margin-bottom: 12px; }
.sd-choices { text-align: left; }
.sd-choices .sd-choice { display: block; width: 100%; padding: 10px 14px; margin-bottom: 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; font-size: 13.5px; text-align: left; transition: .15s; }
.sd-choices .sd-choice:hover { border-color: var(--green); }
.sd-choices .sd-choice.selected { border-color: var(--green); background: #f0fdf4; }
.sd-choices .sd-choice.correct { border-color: #16a34a; background: #dcfce7; }
.sd-choices .sd-choice.wrong { border-color: #dc2626; background: #fef2f2; }
.sd-passage { font-size: 13px; line-height: 1.75; background: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 10px; color: var(--text); }
/* SD result — review style */
.sd-result { margin: 8px 0; font-size: 13px; line-height: 1.6; }
.sd-verdict { display: block; text-align: center; font-size: 15px; font-weight: 800; padding: 10px 14px; border-radius: 10px; margin-bottom: 10px; }
.sd-verdict.pass { background: #dcfce7; color: #166534; }
.sd-verdict.fail { background: #fef2f2; color: #991b1b; }
.sd-rc-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.sd-rc-choice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); font-size: 13px; }
.sd-rc-choice.correct { border-color: #16a34a; background: #dcfce7; }
.sd-rc-choice.wrong { border-color: #dc2626; background: #fef2f2; }
.sd-rc-letter { flex-shrink: 0; font-weight: 800; width: 20px; }
.sd-rc-text { flex: 1; line-height: 1.55; }
.sd-rc-tag { margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.sd-rc-tag.ok { background: #16a34a; color: #fff; }
.sd-rc-tag.you { background: #dc2626; color: #fff; }
.sd-rc-choice.correct .sd-rc-tag.you { background: #065f46; }
.sd-exp-block { display: flex; gap: 8px; align-items: flex-start; background: var(--green-soft, #f0fdf4); border-left: 3px solid var(--green, #16a34a); border-radius: 0 10px 10px 0; padding: 10px 12px; margin-top: 4px; }
.sd-exp-ico { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sd-exp-text { font-size: 13px; line-height: 1.75; color: var(--text); }
.sd-actions { display: flex; gap: 8px; margin-top: 10px; }
.sd-actions .btn { flex: 1; }
[data-theme="dark"] .sd-question { background: #161b16; }
[data-theme="dark"] .sd-passage { background: #1a1f2e; border-left-color: #4b5563; }
[data-theme="dark"] .sd-choices .sd-choice.selected { background: #0a2010; }
[data-theme="dark"] .sd-rc-choice { background: #1a1f2e; border-color: #2d3748; }
[data-theme="dark"] .sd-rc-choice.correct { background: #052e16; border-color: #166534; }
[data-theme="dark"] .sd-rc-choice.wrong { background: #2d0a0a; border-color: #7f1d1d; }
[data-theme="dark"] .sd-exp-block { background: #0a2010; }

/* Hard question indicator (Mode 2,3,4) */
.quiz-body.hard-question { border: 2px solid #dc2626; border-radius: 12px; animation: hardShake .4s ease-in-out; }
@keyframes hardShake { 0%,100% { transform: translateX(0); } 15%,45%,75% { transform: translateX(-4px); } 30%,60%,90% { transform: translateX(4px); }  }
.hard-badge { display: inline-block; background: #fef2f2; color: #dc2626; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid #fecaca; margin-left: 6px; }
[data-theme="dark"] .hard-badge { background: #2a1515; border-color: #7f1d1d; color: #fca5a5; }

/* Timer pressure animation */
.timer-chip.pressure, #timer.pressure { color: #dc2626; font-weight: 700; animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Welcome Popup V.2 */
/* ===== ป๊อปอัปแนะนำเปิดในเบราว์เซอร์หลัก ===== */
.ext-modal { max-width: 380px; text-align: center; }
.ext-modal .ext-emoji { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.ext-modal h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.ext-modal .ext-desc { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.ext-modal #ext-open { font-size: 16px; font-weight: 800; padding: 14px; }
.ext-modal .ext-manual { font-size: 12.5px; color: var(--text); line-height: 1.6; margin: 12px 0; padding: 10px 12px; background: var(--green-light); border-radius: 10px; }
.ext-modal #ext-stay { margin-top: 2px; }

/* ===== กระดาษทด (scratchpad) ===== */
#scratch-open {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: 38px; border-radius: 999px;
  padding: 0 16px 0 12px;
  background: var(--card); color: var(--text);
  border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; position: relative;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
#scratch-open:hover { background: var(--surface-2, #f4f7f5); border-color: var(--green, #16a34a); color: var(--green, #16a34a); box-shadow: 0 3px 10px rgba(22,163,74,.15); }
#scratch-open:active { transform: scale(.95); }
#scratch-open.active { background: var(--green-light, #dcfce7) !important; color: var(--green, #16a34a) !important; border-color: var(--green, #16a34a) !important; box-shadow: 0 2px 8px rgba(22,163,74,.2) !important; }
#scratch-open.active::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; background: var(--green, #16a34a); border-radius: 50%; border: 2px solid var(--bg); }
.sc-open-ico { width: 15px; height: 15px; flex-shrink: 0; }
[data-theme="dark"] #scratch-open { background: #1a1f2e; border-color: #2d3748; color: var(--text); }
[data-theme="dark"] #scratch-open:hover { border-color: var(--green, #16a34a); color: var(--green, #16a34a); background: #0f2218; }

/* ===== ปุ่มหยุดพักชั่วคราว — ใหญ่กว่ากระดาษทด + มีกรอบสีชัดเจน ให้สังเกตเห็นง่าย ===== */
.pause-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; height: 46px; border-radius: 999px;
  padding: 0 20px;
  background: rgba(242, 153, 74, .12); color: var(--amber, #f2994a);
  border: 2px solid var(--amber, #f2994a);
  font-size: 14.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; position: relative;
  transition: background .18s, box-shadow .18s, transform .1s;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.pause-open-btn:hover { background: rgba(242, 153, 74, .2); box-shadow: 0 3px 10px rgba(242,153,74,.25); }
.pause-open-btn:active { transform: scale(.95); }
[data-theme="dark"] .pause-open-btn { background: rgba(242, 153, 74, .16); }

.scratch-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: none; flex-direction: column; touch-action: pan-x pan-y; }
.scratch-overlay.show { display: flex; }
/* ทูลบาร์ — เป็น flex item บนสุด ไม่อยู่ในพื้นที่ที่เลื่อน/ซูมได้ จึงลอยอยู่กับที่เสมอ */
.scratch-bar { flex-shrink: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.scratch-bar .sc-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sc-label { font-weight: 800; font-size: 14px; color: var(--green-dark); margin-right: 2px; }
.sc-colors { display: inline-flex; gap: 6px; }
.sc-color { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sc-color.active { box-shadow: 0 0 0 3px var(--c); transform: scale(1.14); }
.sc-sizes { display: inline-flex; gap: 4px; }
.sc-size { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; padding: 0; }
.sc-size i { display: block; background: var(--text); border-radius: 50%; }
.sc-size.active { border-color: var(--green); background: var(--green-light); }
.sc-btn { border: 1.5px solid var(--line); background: var(--card); color: var(--text); border-radius: 9px; padding: 0 11px; height: 34px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sc-btn#sc-eraser.active, .sc-btn#sc-pan.active { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.sc-btn.sc-close { color: var(--red); border-color: #f0c4c4; }
.sc-zoom-btn { padding: 0 9px; min-width: 34px; text-align: center; }
#sc-zoom-reset { font-size: 12px; }

/* พื้นที่เลื่อน/ซูม — เขียนทับได้ตรง ๆ บนการ์ดโจทย์จริง */
.sc-viewport { flex: 1; min-height: 0; overflow: auto; position: relative; background-color: #eef1f5;
  background-image: linear-gradient(#dfe4ec 1px, transparent 1px), linear-gradient(90deg, #dfe4ec 1px, transparent 1px);
  background-size: 26px 26px; }
.sc-stage-outer { position: relative; }
.sc-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
/* การ์ดโจทย์ที่ก๊อปมาจากหน้าจอข้อสอบจริง — ใช้คลาสเดิม (chip-row/freq-row/instruction/passage/question-text)
   จึงหน้าตาเหมือนของจริงเป๊ะ ๆ วางอยู่ใต้ canvas โปร่งใส เขียนทับตรงไหนของโจทย์ก็ได้ */
.sc-q-card.quiz-body { padding: 16px; background: var(--card); pointer-events: none; }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: transparent; }
.sc-pan-mode .scratch-canvas { pointer-events: none; cursor: grab; }

/* ===== หยุดพักชั่วคราว (pause) ===== */
.pause-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: none; align-items: center; justify-content: center; padding: 20px; touch-action: none; }
.pause-overlay.show { display: flex; animation: fade .2s ease; }
.pause-box { text-align: center; max-width: 320px; }
.pause-ico { font-size: 54px; margin-bottom: 10px; }
.pause-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--text); }
.pause-box p { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.pause-resume { width: 100%; height: 46px; font-size: 15px; }

.welcome-modal { max-width: 460px; text-align: left; }
.wc-header { margin: 0 0 16px; font-size: 19px; font-weight: 800; line-height: 1.45; color: var(--green, #16a34a); text-align: center; }
/* เนื้อหาหลัก — เว้นบรรทัดโปร่ง อ่านสบายตา */
.wc-body { margin-bottom: 6px; }
.wc-body p { font-size: 14px; line-height: 1.9; margin: 0 0 12px; color: var(--text); }
/* ย่อหน้าแรก = ข้อความต้อนรับ ทำเป็นการ์ดนุ่ม ๆ ให้สะดุดตา */
.wc-body p:first-child { font-weight: 600; padding: 12px 14px; background: var(--surface-2, #f4f7f5); border-radius: 12px; margin-bottom: 12px; }
.wc-body .wc-ps { background: #f0fdf4; border-left: 4px solid var(--green, #16a34a); padding: 12px 14px; border-radius: 10px; margin-top: 4px; font-size: 13.5px; line-height: 1.85; }
[data-theme="dark"] .wc-body p:first-child { background: #14241a; }
[data-theme="dark"] .wc-body .wc-ps { background: #0a2010; }
.wc-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 10px 0; padding: 12px; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--surface-2, #f4f7f5); color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: .15s; }
.wc-toggle:hover { border-color: var(--green, #16a34a); color: var(--green, #16a34a); }
.wc-more { margin: 4px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); animation: fade .25s ease; }
.wc-more p { font-size: 13px; line-height: 1.8; margin: 0 0 14px; color: var(--text); }
/* หัวข้อย่อยในส่วน "ดูเพิ่มเติม" ทำเป็นบรรทัดหัวข้อชัด ๆ */
.wc-more p b { display: block; color: var(--green, #16a34a); font-size: 14.5px; margin-bottom: 6px; }
/* รายชื่อผู้สนับสนุน — จัดเป็นการ์ดชิป 2 คอลัมน์ */
.wc-supporters { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.wc-supporters li { font-size: 12px; line-height: 1.4; color: var(--text); padding: 8px 10px 8px 28px; position: relative; background: #fff5f7; border: 1px solid #ffe0e6; border-radius: 9px; }
.wc-supporters li::before { content: "💖"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 11px; }
[data-theme="dark"] .wc-supporters li { background: #241418; border-color: #4a2730; color: #f0c4cc; }
@media (max-width: 360px) { .wc-supporters { grid-template-columns: 1fr; } }
.wc-go { display: block; width: 100%; margin-top: 6px; padding: 14px; border: none; border-radius: 12px; background: #cfd4da; color: #fff; font-size: 16px; font-weight: 800; cursor: not-allowed; box-shadow: none; transition: background .3s, box-shadow .3s, transform .15s; }
.wc-go:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); }
.wc-go:not(:disabled):active { transform: translateY(0); }
.wc-go.ready { background: linear-gradient(135deg, #2fd07a, #16a34a); box-shadow: 0 6px 18px rgba(22,163,74,.35); cursor: pointer; }
.wc-loader-block { margin-top: 14px; }
.wc-progress-wrap { position: relative; height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.wc-progress-bar { height: 100%; background: linear-gradient(90deg, #34d399, #16a34a, #0d9488); border-radius: 999px; width: 0%; transition: width .12s linear; }
.wc-progress-glow { display: none; }
.wc-load-row { display: flex; align-items: center; gap: 7px; }
.wc-load-dots { display: flex; gap: 4px; flex-shrink: 0; }
.wc-load-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--green, #16a34a); animation: wc-dot .9s ease-in-out 5; }
.wc-load-dots span:nth-child(2) { animation-delay: .18s; }
.wc-load-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes wc-dot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1.1);opacity:1} }
.wc-load-label { font-size: 12px; color: var(--muted); flex: 1; }
.wc-load-label.loaded { color: var(--green, #16a34a); font-weight: 700; }
.wc-countdown { font-size: 12px; font-weight: 700; color: var(--green, #16a34a); flex-shrink: 0; min-width: 38px; text-align: right; }
[data-theme="dark"] .wc-progress-wrap { background: #1f2937; }

/* เศษส่วนแนวตั้ง (จาก \frac{a}{b}) — แสดงเศษบน/ส่วนล่าง มีขีดคั่น ไม่ใช้สแลช */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; line-height: 1.05; font-weight: 600; }
.frac-n { padding: 0 5px 1px; border-bottom: 1.6px solid currentColor; }
.frac-d { padding: 1px 5px 0; }

/* Boss Room widget (history tab) */
#boss-room-widget { padding: 12px; margin-bottom: 12px; background: linear-gradient(135deg, #fef2f2, #fff5f5); border: 1.5px solid #fecaca; border-radius: 14px; text-align: center; }
.boss-info { font-size: 13px; margin-bottom: 10px; color: #991b1b; }
[data-theme="dark"] #boss-room-widget { background: linear-gradient(135deg, #1c1010, #2a1515); border-color: #7f1d1d; }
[data-theme="dark"] .boss-info { color: #fca5a5; }

/* Interstitial screen (topbar + body) */
#screen-interstitial .topbar { display: flex; align-items: center; gap: 8px; }
#screen-interstitial .topbar-title { flex: 1; font-size: 15px; }
#screen-interstitial .topbar-title span { font-size: 12px; color: var(--muted); margin-left: 8px; }
.inter-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 16px; border-top: 1px solid var(--border); }

/* ============================================================
   ชั้นที่ 2: ดีไซน์ซิสเต็ม (ทับคอมโพเนนต์ร่วม → ได้โครงหน้าจอ + ธีมแบบ SAO)
   ============================================================ */
/* ============================================================
   ธีม ก.พ. (OCSC) — โทนเหลืองทอง
   3 ธีม: กระดาษ / มืด / อ่านสบาย

   *** กติกาสำคัญของชุดสีนี้ ***
   --brand ถูกใช้เป็น "สีตัวอักษร" ในหลายที่ (หัวข้อ ปุ่ม ลิงก์) จึงต้องเป็น
   ทองเข้มพอที่คอนทราสต์ผ่านเกณฑ์บนพื้นขาว — ห้ามใส่เหลืองสดตรงนี้
   เหลืองสดให้ใช้ที่ --brand-2 / --brand-soft (พื้น/ไฮไลต์) เท่านั้น

   ต่างจากชุดสีเดิม (SAO) ตรงที่ --bad ไม่เท่ากับ --brand แล้ว
   (ทอง vs แดง) แต่ยังคงบล็อก "ตัวชี้ถูก-ผิด" ท้ายไฟล์ไว้ เพราะ alias
   ชั้นที่ 3 ยังแมป --green → --brand ซึ่งจะทำให้ "ถูก" กลายเป็นสีทอง
   ============================================================ */
:root {
  --brand: #9a6700;          /* ทองเข้ม — ใช้เป็นตัวอักษรได้ (คอนทราสต์ ~5.4 บนขาว) */
  --brand-dark: #7a5100;
  --brand-soft: #fdf0cd;     /* เหลืองอ่อน — พื้นไฮไลต์ */
  --brand-2: #d99b0a;        /* เหลืองทองสด — ไล่เฉด/แถบ */
  --brand-3: #b7810a;
  --gold: #b08420;
  --ok: #15803d;
  --ok-soft: #dcf1d9;
  --bad: #c0392b;            /* แดงอิฐ — แยกจากทองชัดเจน */
  --bad-soft: #fbe3df;
  --warn: #92400e;
  --warn-soft: #f7e6c8;
  --info: #1d4ed8;
  --info-soft: #dce4f7;
  --mint: #0d9488;
  --mint-soft: #cfe8e4;

  --text: #1f2429;
  --muted: #5b6470;
  --line: #ddd6c4;
  --bg: #f2eee3;             /* ครีมอ่อน โทนกระดาษราชการ */
  --card: #ffffff;
  --surface-2: #f6f1e5;

  --radius: 18px;
  --radius-sm: 14px;
  --shadow-soft: 0 1px 2px rgba(60,48,20,.05), 0 8px 24px -14px rgba(60,48,20,.22);
  --shadow-lift: 0 2px 8px rgba(60,48,20,.07), 0 20px 44px -20px rgba(60,48,20,.30);
  --shadow-pop: 0 24px 64px -18px rgba(60,48,20,.40);
  --glass-bg: rgba(255,255,255,.80);
  --glass-brd: rgba(60,48,20,.12);
  --maxw: 480px;
}
[data-theme="dark"] {
  --brand: #f4bf3f; --brand-dark: #ffd77a; --brand-soft: rgba(244,191,63,.15);
  --brand-2: #e0a91f; --brand-3: #c99516; --gold: #e2c07a;
  --ok: #4ade80; --ok-soft: #0e2618; --bad: #f87171; --bad-soft: #2e1616; --warn: #fbbf24; --warn-soft: #2c2310;
  --info: #7aa8fb; --info-soft: #111d33;
  --mint: #2dd4bf; --mint-soft: #0d2b26;
  --text: #f1ece1; --muted: #a09786; --line: #322c22;
  --bg: #12100b; --card: #1c1913; --surface-2: #241f18;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px -12px rgba(0,0,0,.7);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.5), 0 22px 48px -20px rgba(0,0,0,.85);
  --glass-bg: rgba(28,25,19,.74);
  --glass-brd: rgba(255,255,255,.08);
}
[data-theme="reading"] {
  --brand: #8a5a00; --brand-dark: #6d4700; --brand-soft: #f2e4bf;
  --brand-2: #b8860b; --brand-3: #9c7208; --gold: #a9853f;
  --ok: #15803d; --ok-soft: #e3eed6; --bad: #b3402e; --bad-soft: #f4ddd6; --warn: #a1590c; --warn-soft: #f3e5c3;
  --info: #1d5c8a; --info-soft: #dde9ef;
  --mint: #0d8272; --mint-soft: #dcefe6;
  --text: #3a3120; --muted: #7d6f56; --line: #e2d6bb;
  --bg: #f3e9d5; --card: #fdf7ea; --surface-2: #f3ead6;
  --shadow-lift: 0 2px 8px rgba(120,90,40,.10), 0 20px 44px -20px rgba(120,90,40,.30);
  --glass-bg: rgba(253,247,234,.80);
  --glass-brd: rgba(68,55,42,.12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.app {
  /* ห้ามใส่ overflow-x ที่นี่: จะทำให้เบราว์เซอร์คำนวณ overflow-y เป็น auto ให้อัตโนมัติ
     กลายเป็น .app เป็น scroll container ซ้อนของตัวเอง (ทั้งที่ไม่เคย scroll จริงเพราะสูงพอดีเนื้อหาเสมอ)
     ผลคือ position:sticky ของทุกแถบหัวในแอปอ้างอิง scroll container ผิดตัว แล้วเลื่อนหายไปกับเนื้อหาทั้งหมด
     ย้าย overflow-x:hidden ไปไว้ที่ html,body แทน (กัน bleed แนวนอนเหมือนเดิม แต่ไม่ทำให้ sticky พัง) */
  max-width: var(--maxw); margin: 0 auto; min-height: 100vh;
  background: var(--bg); position: relative; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}
b, strong { font-weight: 700; }
button { font-family: inherit; cursor: pointer; }

/* ---------- screens ---------- */
.screen { display: none; animation: fade .25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- theme switch (โฉมใหม่ + ไอคอนเคลื่อนไหว) ---------- */
.theme-fab { position: fixed; top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px)); right: max(12px, calc(50% - var(--maxw)/2 + 12px)); z-index: 60; }
.theme-trigger {
  width: 44px; height: 44px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift); cursor: pointer; font-family: inherit;
  transition: transform .12s, color .15s, background .15s, border-color .15s;
}
.theme-trigger:active { transform: scale(.9); }
.theme-trigger svg { width: 20px; height: 20px; }

/* อนิเมชั่นเปลี่ยนธีมทั้งจอ (วงกลมแผ่ขยาย) + ป้ายบอกชื่อธีม */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-ripple { position: fixed; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: .5; pointer-events: none; z-index: 9999; }
.theme-ripple.go { transform: translate(-50%, -50%) scale(75); opacity: 0; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .65s ease-out; }
.theme-toast {
  position: fixed; top: max(72px, calc(env(safe-area-inset-top, 0px) + 66px)); right: max(14px, calc(50% - var(--maxw)/2 + 14px)); z-index: 9998;
  display: flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  font-size: 12.5px; font-weight: 800; pointer-events: none;
  opacity: 0; transform: translateY(-8px) scale(.88); transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.theme-toast.show { opacity: 1; transform: none; }
.theme-toast .tt-ic { width: 18px; height: 18px; color: var(--brand); display: grid; place-items: center; }
.theme-toast .tt-ic svg { width: 18px; height: 18px; }

/* ---------- generic buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; border: none; transition: transform .1s, filter .15s; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn:active { transform: scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 8px 20px -8px var(--brand); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -8px var(--brand); }
.btn-outline { background: var(--card); color: var(--brand); border: 1.5px solid var(--brand); }
.btn-ghost { background: var(--card); color: var(--text); border: 1.5px solid var(--line); }
.btn-danger { background: var(--card); color: var(--bad); border: 1.5px solid var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- home ---------- */
.home-hero { position: relative; padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px 4px; }
.hero-chips { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; flex-wrap: wrap; }
.hchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--brand); }
.hchip svg { width: 14px; height: 14px; color: var(--muted); }
.hero-brand { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }
.hero-logo { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.home-hero h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--text); letter-spacing: -.01em; }
.hero-h-sub { display: block; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }
.readiness { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.rd-ring { position: relative; width: 80px; height: 80px; flex: 0 0 80px; }
.rd-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.rd-ring .rt { fill: none; stroke: var(--surface-2); stroke-width: 8; }
.rd-ring .rp { fill: none; stroke: var(--brand); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 72; animation: ringdraw 1.5s cubic-bezier(.4,0,.2,1); }
@keyframes ringdraw { from { stroke-dashoffset: 226; } }
.rd-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 21px; font-weight: 700; line-height: 1; color: var(--text); }
.rd-num span { font-size: 11px; font-weight: 700; position: relative; top: 1px; }
.rd-tx { flex: 1; min-width: 0; }
.rd-tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.rd-sub { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.rd-sub svg { width: 13px; height: 13px; flex: 0 0 auto; }
.rd-praise {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand);
}
.rd-praise.warm { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.rd-praise svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rd-praise[hidden] { display: none; }
.rd-stats { display: flex; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--muted); align-items: center; }
.rd-stats i { color: var(--line); font-style: normal; }
/* "ข้อควรรู้เกี่ยวกับข้อสอบ ก.พ." เลิกเป็นการ์ดกางในที่เดิม (.cred-card > .cc-h) แล้ว
   เหลือแค่ตัวหนังสือเล็กที่กดแล้วเด้ง tooltip — ดู .cred-tip-trigger / .cred-tip-modal ท้ายไฟล์ */
.cc-b { font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.cc-ref {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  padding: 9px 11px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; line-height: 1.5;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.cc-ref-ic { flex: 0 0 auto; color: var(--brand); }
.cc-ref-ic svg { width: 15px; height: 15px; }
.cc-ref-tx { flex: 1; min-width: 0; color: var(--text); }
.cc-ref-go { flex: 0 0 auto; color: var(--muted); }
.cc-ref-go svg { width: 14px; height: 14px; }
.cc-ref:hover { border-color: var(--brand); }
.cc-ref:hover .cc-ref-go { color: var(--brand); }
.hero-badge { display: inline-block; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4); padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.home-body { padding: 16px 16px 8px; }

.section-label { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .04em; margin: 18px 4px 9px; text-transform: uppercase; }

.menu-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; margin-bottom: 11px; box-shadow: var(--shadow-soft); transition: transform .2s cubic-bezier(.34,1.4,.6,1), box-shadow .22s, border-color .18s; }
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.menu-card:active { transform: scale(.985); }
.menu-card .ico { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; background: var(--surface-2); display: grid; place-items: center; font-size: 23px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); transition: transform .2s; }
.menu-card:hover .ico { transform: scale(1.06) rotate(-3deg); }
.menu-card.feat .ico { background: linear-gradient(145deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -6px var(--brand); }
.menu-card .mc-text { flex: 1; min-width: 0; }
.menu-card .mc-text b { display: block; font-size: 15px; color: var(--text); }
.menu-card .mc-text span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.menu-card .arrow { color: var(--muted); font-size: 22px; font-weight: 300; transition: transform .2s; }
.menu-card:hover .arrow { transform: translateX(3px); color: var(--brand); }
.menu-card.feat { border-color: transparent; background: linear-gradient(180deg, var(--brand-soft), var(--card)); box-shadow: var(--shadow-soft), 0 10px 30px -14px var(--brand); }
.menu-card.feat::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1.5px; background: linear-gradient(140deg, var(--brand), var(--brand-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.menu-card { position: relative; }
.mc-lock { position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 12px; display: grid; place-items: center; z-index: 1; }
.mc-lock[hidden] { display: none; }

/* expandable picker (part / topic) */
.picker { display: none; padding: 4px 2px 6px; }
.picker.open { display: block; animation: fade .2s; }
.pick-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--text); }
.pick-btn:active { transform: scale(.99); }
.pick-btn .cnt { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--surface-2); padding: 2px 9px; border-radius: 999px; }
.pick-btn .pp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pick-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

.opt-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 2px 12px; }
.opt-chip { flex: 1; min-width: 90px; text-align: center; background: var(--card); border: 1.5px solid var(--line); color: var(--muted); border-radius: 999px; padding: 9px 10px; font-size: 13px; font-weight: 700; }
.opt-chip.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.opt-label { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 6px 4px 4px; }

/* ---------- reveal toggle switch ---------- */
.reveal-row { margin: 0 4px 16px; }
.reveal-seg {
  position: relative; display: flex;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.rs-thumb {
  position: absolute; top: 4px; height: calc(100% - 8px);
  left: 4px; width: calc(50% - 4px);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 999px;
  box-shadow: 0 4px 14px -6px var(--brand), inset 0 1px 0 rgba(255,255,255,.3);
  transition: left .38s cubic-bezier(.5,1.35,.4,1);
  pointer-events: none;
}
.rs-opt {
  flex: 1; position: relative; z-index: 1; border: none; background: none;
  padding: 10px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: color .28s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rs-opt.active { color: #fff; }
.rs-ic { width: 15px; height: 15px; flex: 0 0 15px; display: block; }

/* สวิตช์เปิด/ปิด เปลี่ยนข้อถัดไปอัตโนมัติ (หน้าหลัก) */
.setting-switch { display: flex; align-items: center; gap: 12px; margin: 0 4px 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
.ss-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; }
.ss-ico svg { width: 19px; height: 19px; }
.ss-tx { flex: 1; min-width: 0; }
.ss-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ss-tx span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.switch { flex: 0 0 auto; width: 48px; height: 28px; padding: 0; border: none; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .25s; }
.switch .sw-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28); transition: transform .28s cubic-bezier(.5,1.35,.4,1); }
.switch.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.switch.on .sw-knob { transform: translateX(20px); }
.switch:active .sw-knob { width: 25px; }

/* registration info card on home */
.info-card { background: linear-gradient(160deg, #1e3a8a, #2563eb); color: #fff; border-radius: var(--radius); padding: 16px 16px 14px; margin-bottom: 13px; box-shadow: var(--shadow-soft); }
.info-card h3 { margin: 0 0 4px; font-size: 15.5px; }
.info-card .ic-sub { font-size: 12.5px; opacity: .9; }
.info-card .ic-rows { margin-top: 11px; display: grid; gap: 7px; }
.info-card .ic-row { display: flex; gap: 9px; font-size: 13px; background: rgba(255,255,255,.12); border-radius: 10px; padding: 8px 11px; }
.info-card .ic-row .k { opacity: .85; flex: 0 0 78px; }
.info-card .ic-row .v { font-weight: 700; }
.info-more-btn { margin-top: 11px; width: 100%; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; }

/* ---------- quiz ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px; border-bottom: 1px solid var(--glass-brd); }
.topbar-title { font-weight: 800; font-size: 15px; flex: 1; }
.icon-btn { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 18px; display: grid; place-items: center; }
.round-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 16px; display: grid; place-items: center; }
.round-btn svg { width: 18px; height: 18px; }

.progress-row { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 63px); z-index: 15; display: flex; align-items: center; gap: 11px; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); padding: 9px 16px 12px; border-bottom: 1px solid var(--glass-brd); }
.qcount { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.qcount b { color: var(--brand); font-size: 18px; font-weight: 800; }
.progress-track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,23,42,.06); }
.progress-fill { position: relative; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .4s cubic-bezier(.34,1.2,.64,1); overflow: hidden; }
.progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: shimmer 1.8s ease-in-out infinite; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
.timer-chip { font-size: 12.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

.quiz-body { padding: 14px 16px 30px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.subject-chip, .topic-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.subject-chip { background: var(--brand-soft); color: var(--brand); }
.topic-chip { background: var(--surface-2); color: var(--muted); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

.instruction-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.instruction { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); margin-bottom: 0; }
.instruction-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pause-btn, .share-btn { width: 32px; height: 32px; border-radius: 50%; border: none; display: grid; place-items: center; transition: transform .12s; flex: 0 0 auto; }
.pause-btn svg, .share-btn svg { width: 16px; height: 16px; }
.pause-btn { background: linear-gradient(135deg, var(--warn), #d97706); color: #fff; box-shadow: 0 4px 12px -4px var(--warn); }
.share-btn { border: 1.5px solid var(--line); background: var(--card); color: var(--muted); }
.pause-btn:active, .share-btn:active { transform: scale(.9); }

/* ---------- หยุดพักชั่วคราว ---------- */
.pause-overlay { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pause-overlay[hidden] { display: none; }
.pause-card { max-width: 340px; width: 100%; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; box-shadow: var(--shadow-pop); }
.pause-card-ico { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); align-items: center; justify-content: center; margin-bottom: 14px; }
.pause-card-ico svg { width: 26px; height: 26px; }
.pause-card h3 { margin: 0 0 8px; font-size: 17px; }
.pause-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.pause-card .btn { width: 100%; margin-bottom: 9px; }
.pause-card .btn:last-child { margin-bottom: 0; }

/* ---------- แบนเนอร์ "มีข้อสอบค้างไว้ชั่วคราว" (หน้าแรก) ---------- */
.resume-banner { position: relative; display: flex; align-items: center; gap: 12px; background: var(--warn-soft); border: 1.5px solid var(--warn); border-radius: var(--radius); padding: 13px 42px 13px 14px; margin-bottom: 14px; }
.resume-banner[hidden] { display: none; }
.rb-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--warn); color: #fff; display: grid; place-items: center; }
.rb-ico svg { width: 18px; height: 18px; }
.rb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-tx b { font-size: 13.5px; color: var(--text); }
.rb-tx span { font-size: 11.5px; color: var(--muted); }
.rb-go { flex: 0 0 auto; width: auto; padding: 9px 16px; font-size: 13px; }
.rb-close { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: none; color: var(--muted); font-size: 13px; display: grid; place-items: center; }
.qwrap { position: relative; }
.q-num-badge {
  position: absolute; top: -12px; left: 14px;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 800; display: grid; place-items: center;
  box-shadow: var(--shadow-soft); font-variant-numeric: tabular-nums;
}
.question-text { min-height: 100px; font-size: 17px; font-weight: 700; line-height: 1.6; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 46px 50px 18px; box-shadow: var(--shadow-soft); white-space: pre-wrap; }
.bookmark-btn { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s, transform .12s; }
.bookmark-btn svg { width: 17px; height: 17px; transition: fill .15s; }
.bookmark-btn:active { transform: scale(.9); }
.bookmark-btn.on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.bookmark-btn.on svg { fill: var(--warn); }
.hint-btn { position: absolute; bottom: 12px; left: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--warn); background: var(--card); color: var(--warn); display: grid; place-items: center; }
.hint-btn svg { width: 17px; height: 17px; }
.hint-pop { display: none; margin-top: 10px; background: linear-gradient(135deg, #fff7e6, #fff1cc); border: 1px solid #f3d488; color: #7a5a12; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; }
.hint-pop svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }
.hint-pop.show { display: block; animation: fade .2s; }
[data-theme="dark"] .hint-pop { background: #2c2616; border-color: #5f4d22; color: #f0dba6; }
[data-theme="reading"] .hint-pop { background: #f3e6c4; border-color: #d8c089; color: #6b531d; }

.choices { display: grid; gap: 10px; margin-top: 16px; }
.choice { display: flex; align-items: flex-start; gap: 11px; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; font-size: 15px; color: var(--text); transition: border-color .15s, background .15s, transform .1s, box-shadow .18s; width: 100%; box-shadow: var(--shadow-soft); }
.choice:not(.correct):not(.wrong):not(.selected):hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.choice:active { transform: scale(.99); }
.choice .lab { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; background: var(--surface-2); color: var(--muted); font-weight: 800; font-size: 13px; display: grid; place-items: center; transition: background .15s, color .15s; }
.choice .ctext { flex: 1; padding-top: 1px; }
.choice.selected { border-color: var(--brand); background: var(--brand-soft); }
.choice.selected .lab { background: var(--brand); color: #fff; }
.choice.correct { border-color: var(--ok); background: var(--ok-soft); }
.choice.correct .lab { background: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .lab { background: var(--bad); color: #fff; }
.choice.locked { pointer-events: none; }

/* แถบ 'ไปข้อถัดไปอัตโนมัติ' + ปุ่มยกเลิก (โหมดไม่เฉลยทันที) */
.auto-adv { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 12px; animation: fade .2s; }
.auto-adv[hidden] { display: none; }
.auto-adv .aa-bar { position: relative; flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.auto-adv .aa-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.auto-adv .aa-text { font-size: 13px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.auto-adv .aa-cancel { flex: 0 0 auto; background: var(--card); border: 1.5px solid var(--brand); color: var(--brand); font-weight: 800; font-size: 13px; border-radius: 9px; padding: 7px 14px; }
.auto-adv .aa-cancel:active { transform: scale(.97); }

.btn-submit-early { display: block; width: 100%; margin-top: 16px; padding: 12px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--ok), #16a34a); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 8px 20px -8px var(--ok); }
.btn-submit-early:active { transform: scale(.98); }
.btn-submit-early[hidden] { display: none; }
.action-row { display: flex; gap: 10px; margin-top: 16px; }
.explanation { display: none; margin-top: 16px; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: 14px 16px; }
.explanation.show { display: block; animation: fade .2s; }
.exp-head { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--brand); margin-bottom: 7px; font-size: 14px; }
.exp-head svg { width: 15px; height: 15px; flex: 0 0 auto; }
.exp-body { font-size: 14px; line-height: 1.75; white-space: pre-wrap; }

/* ---------- summary ---------- */
.subscreen-head { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 16; }
.subscreen-head h2 { margin: 0; font-size: 16px; }
.result-head { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; margin: calc(env(safe-area-inset-top, 0px) + 14px) 16px 0; border-radius: var(--radius); padding: 22px 16px 20px; text-align: center; box-shadow: var(--shadow-lift); }
.result-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
.result-head .sub { font-size: 12.5px; color: rgba(255,255,255,.85); }
.result-body { padding: 16px; }
.overall-banner { border-radius: var(--radius); padding: 20px; text-align: center; margin-bottom: 16px; color: #fff; }
.overall-banner.pass { background: linear-gradient(145deg, #16a34a, #15803d); }
.overall-banner.fail { background: linear-gradient(145deg, #ef4444, #b91c1c); }
.overall-banner .big { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 26px; font-weight: 800; }
.overall-banner .big svg { width: 26px; height: 26px; flex: 0 0 auto; }
.overall-banner .small { font-size: 15px; opacity: .95; margin-top: 3px; }

.result-section-title { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; margin: 18px 0 10px; }
.result-section-title svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.result-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); font-size: 13.5px; }
.result-table th, .result-table td { padding: 11px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.result-table th { background: var(--surface-2); font-size: 12px; color: var(--muted); }
.result-table td.col-subject, .result-table th.col-subject { text-align: left; }
.result-table .pass-tag { font-weight: 800; }
.result-table .pass-tag.ok { color: var(--ok); }
.result-table .pass-tag.no { color: var(--bad); }
.passmark-note { font-size: 12px; color: var(--muted); margin: 8px 2px 0; }

.result-meta { display: flex; gap: 10px; margin: 16px 0; }
.meta-box { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 8px; text-align: center; box-shadow: var(--shadow-soft); }
.meta-box .v { font-size: 19px; font-weight: 800; color: var(--brand); }
.meta-box .l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.analysis { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: 16px; overflow: hidden; }
.analysis-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 16px; background: none; border: none; font-size: 14.5px; font-weight: 800; color: var(--text); }
.at-label { display: flex; align-items: center; gap: 6px; }
.at-label svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
#ana-caret svg { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; display: block; }
#ana-caret.open svg { transform: rotate(180deg); }
.analysis-content { padding: 0 16px 16px; }
.ana-block { margin-top: 12px; }
.ana-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; margin-bottom: 7px; }
.ana-h svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ana-h.good { color: var(--ok); }
.ana-h.bad { color: var(--bad); }
.ana-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 6px; }
.ana-item .pct { font-size: 16px; font-weight: 900; }
.ana-item .pct.good { color: var(--ok); }
.ana-item .pct.bad { color: var(--bad); }
.ana-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--brand); font-weight: 700; background: var(--brand-soft); border: none; border-radius: 999px; padding: 4px 10px; }
.ana-link svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ana-reco { margin-top: 12px; font-size: 13px; line-height: 1.7; background: var(--brand-soft); border-radius: 12px; padding: 12px 14px; color: var(--text); }
.ana-reco svg, .ana-block svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }

.result-actions { display: grid; gap: 10px; }

/* ---------- review ---------- */
.filter-row { display: flex; gap: 8px; padding: 11px 16px; background: var(--bg); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 67px); z-index: 10; }
.chip-btn { font-size: 12.5px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); font-weight: 700; }
.chip-btn.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.chip-btn .fc { font-size: 11px; font-weight: 800; opacity: .72; margin-left: 2px; }
.chip-btn.active .fc { opacity: 1; }
.review-body { padding: 22px 16px 24px; display: grid; gap: 28px; }
/* กันแถบ sticky (subscreen-head+filter-row สูงรวม ~126px) บังตอน scrollIntoView จากปุ่ม "ผลรายข้อ"
   +17px ชดเชยเลขข้อ (.rc-qnum) ที่ลอยเหนือกรอบการ์ด อีก +10px เว้นระยะให้ไม่ชิดขอบเกินไป */
.review-card { position: relative; background: var(--card); border-radius: var(--radius); padding: 26px 15px 15px; box-shadow: var(--shadow-soft); border-left: 5px solid var(--muted); scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 153px); }
.review-card.ok { border-left-color: var(--ok); }
.review-card.no { border-left-color: var(--bad); }
.rc-qnum { position: absolute; top: -17px; left: 14px; z-index: 1; background: var(--card); padding: 3px 13px; border-radius: 999px; font-size: 19px; font-weight: 900; line-height: 1.4; }
.review-card.ok .rc-qnum { color: var(--ok); border: 2px solid var(--ok); }
.review-card.no .rc-qnum { color: var(--bad); border: 2px solid var(--bad); }
.rc-status { position: absolute; top: -16px; right: 14px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; box-shadow: var(--shadow-soft); }
.rc-status.ok { background: var(--ok); }
.rc-status.no { background: var(--bad); }
.rc-top { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rc-badge { font-weight: 800; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; }
.rc-badge.ok { background: var(--ok-soft); color: var(--ok); }
.rc-badge.no { background: var(--bad-soft); color: var(--bad); }
.rc-bookmark { margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s; }
.rc-bookmark svg { width: 13px; height: 13px; }
.rc-bookmark.on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.rc-bookmark.on svg { fill: var(--warn); }
.rc-q { font-size: 15px; font-weight: 700; line-height: 1.55; white-space: pre-wrap; }
.rc-choices { display: grid; gap: 6px; margin: 10px 0; }
.rc-choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.rc-choice.correct { border-color: var(--ok); background: var(--ok-soft); }
.rc-choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.rc-tag { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: auto; white-space: nowrap; }
.rc-tag.ok { background: var(--ok); color: #fff; }
.rc-tag.you { background: var(--brand); color: #fff; }
.rc-exp { font-size: 13px; line-height: 1.7; background: var(--surface-2); border-radius: 10px; padding: 11px 13px; white-space: pre-wrap; }
.rc-exp svg { width: 14px; height: 14px; vertical-align: -2px; }
.rc-why-toggle { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 10px; border: 1.5px dashed var(--line); background: none; color: var(--brand); font-size: 12.5px; font-weight: 700; text-align: left; }
.rc-why-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rc-why-toggle .rc-why-caret { margin-left: auto; transition: transform .2s; color: var(--muted); display: flex; }
.rc-why-toggle.open .rc-why-caret { transform: rotate(180deg); }
.rc-why-body { display: none; margin-top: 8px; }
.rc-why-toggle.open + .rc-why-body { display: grid; gap: 7px; animation: fade .2s ease; }
.rc-why-item { display: flex; gap: 8px; padding: 9px 11px; background: var(--surface-2); border-left: 3px solid var(--bad); border-radius: 8px; font-size: 12.5px; line-height: 1.6; }
.rc-why-item b { flex: 0 0 auto; color: var(--bad); }

/* ---------- study (อ่านก่อน) ---------- */
.study-body { padding: 14px 16px 24px; }
.reg-card { background: linear-gradient(160deg, #1e3a8a, #2563eb); color: #fff; border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-soft); }
.reg-card h3 { margin: 0 0 10px; font-size: 16px; }
.reg-grid { display: grid; gap: 8px; }
.reg-row { display: flex; gap: 10px; font-size: 13.5px; background: rgba(255,255,255,.12); border-radius: 11px; padding: 9px 12px; }
.reg-row .k { flex: 0 0 86px; opacity: .85; }
.reg-row .v { font-weight: 700; flex: 1; }
.reg-sub { margin-top: 14px; }
.reg-sub h4 { margin: 0 0 6px; font-size: 13.5px; opacity: .95; }
.reg-sub ul { margin: 0; padding-left: 18px; font-size: 13px; }
.reg-sub li { margin-bottom: 3px; }
.reg-note { margin-top: 12px; font-size: 11.5px; opacity: .8; line-height: 1.55; }

.note-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 11px; box-shadow: var(--shadow-soft); overflow: hidden; }
.note-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; background: none; border: none; text-align: left; color: var(--text); }
.note-head .nh-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: var(--brand-soft); display: grid; place-items: center; font-size: 20px; }
.note-head .nh-title { flex: 1; min-width: 0; }
.note-head .nh-title b { display: block; font-size: 14.5px; }
.note-head .nh-tag { font-size: 11px; color: var(--muted); }
.note-head .nh-caret { color: var(--muted); transition: transform .2s; font-size: 13px; }
.note-card.open .nh-caret { transform: rotate(180deg); }
.note-body { display: none; padding: 0 16px 16px; }
.note-card.open .note-body { display: block; animation: fade .2s; }
.study-tts { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 7px 14px; border-radius: 999px; background: var(--brand-soft); border: 1.5px solid var(--brand); color: var(--brand); font-size: 12.5px; font-weight: 700; }
.study-tts.speaking { background: var(--brand); color: #fff; }
.nb-h { font-size: 13.5px; font-weight: 800; margin: 12px 0 6px; color: var(--brand); }
.nb-points { margin: 0; padding-left: 19px; }
.nb-points li { font-size: 13.5px; line-height: 1.7; margin-bottom: 5px; }
.nb-p { font-size: 13.5px; line-height: 1.7; margin: 8px 0; }
.nb-trick { background: linear-gradient(135deg, #fff7e6, #fff1cc); border: 1px solid #f3d488; color: #7a5a12; border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.65; margin: 10px 0 2px; }
.nb-trick svg { width: 14px; height: 14px; vertical-align: -2px; }
[data-theme="dark"] .nb-trick { background: #2c2616; border-color: #5f4d22; color: #f0dba6; }
[data-theme="reading"] .nb-trick { background: #f3e6c4; border-color: #d8c089; color: #6b531d; }
mark, .hl { background: linear-gradient(transparent 55%, #ffe49b 55%); color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 700; }
[data-theme="dark"] mark, [data-theme="dark"] .hl { background: linear-gradient(transparent 55%, rgba(96,165,250,.4) 55%); color: #cfe2ff; }

/* ---------- history / วิเคราะห์ผล (topbar เดียวกับ sn-topbar ของสรุปหนังสือ) ---------- */
.hs-topbar {
  position: sticky; top: 0; z-index: 15;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 16px 10px;
}
.hs-tb-ico { display: inline-grid; place-items: center; color: var(--muted); }
.hs-tb-ico svg { width: 24px; height: 24px; }
.hs-tb-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.hs-intro { margin: 10px 16px 0; font-size: 13px; color: var(--muted); }
.history-body { padding: 14px 16px 24px; }
.hist-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.hist-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 8px; text-align: center; box-shadow: var(--shadow-soft); }
.hist-stat .v { font-size: 26px; font-weight: 900; color: var(--brand); }
.hist-stat .l { font-size: 11px; color: var(--muted); }
.weak-board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; margin-bottom: 14px; box-shadow: var(--shadow-soft); }
.weak-board h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14.5px; }
.weak-board h3 svg { width: 15px; height: 15px; color: var(--muted); }
.wb-bar { margin-bottom: 9px; }
.wb-bar .wb-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-bottom: 4px; }
.wb-pct { font-size: 16px; font-weight: 900; }
.wb-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wb-fill { height: 100%; border-radius: 999px; }
.history-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 52px 14px 14px; margin-bottom: 10px; box-shadow: var(--shadow-soft); }
.hc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hc-mode { font-weight: 800; font-size: 14px; }
.hc-del { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); display: grid; place-items: center; transition: color .15s, background .15s, border-color .15s, transform .12s; }
.hc-del svg { width: 17px; height: 17px; }
.hc-del:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.hc-del:active { transform: translateY(-50%) scale(.9); }
.hc-date { font-size: 11.5px; color: var(--muted); }
.hc-score { font-size: 13px; margin-top: 6px; }
.hc-score b { color: var(--brand); }
.hc-review-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px; border-radius: 10px; border: 1.5px solid var(--brand); background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 800; }
.hc-review-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hc-review-btn:active { transform: scale(.98); }
.stats-deep-btn { width: calc(100% - 32px); margin: 12px 16px 4px; }
.trend-chart-wrap { margin-top: 2px; }
.trend-svg { width: 100%; height: 130px; display: block; }
.trend-svg text { font-family: inherit; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
.empty-state .es-ico { display: flex; justify-content: center; margin-bottom: 10px; color: var(--muted); }
.empty-state .es-ico svg { width: 36px; height: 36px; }

/* ---------- ข้อผิดพลาด (แก้ตัว) ---------- */
.mistakes-body { padding: 14px 16px 24px; }
.mx-start { width: 100%; margin-bottom: 14px; background: linear-gradient(135deg, var(--bad), #b91c1c); box-shadow: 0 8px 20px -8px var(--bad); }
.mx-list { display: flex; flex-direction: column; gap: 10px; }
.mx-card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow-soft); }
.mx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.mx-topic { font-size: 11.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 3px 10px; border-radius: 999px; }
.mx-count { font-size: 11.5px; font-weight: 800; color: var(--bad); white-space: nowrap; }
.mx-q { font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* ---------- ข้อสอบมาร์คไว้ (บุ๊คมาร์ค) ---------- */
.bm-card { border-left-color: var(--warn); }
.bm-remove { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; background: none; color: var(--warn); display: grid; place-items: center; }
.bm-remove svg { width: 16px; height: 16px; fill: var(--warn); }
.bm-remove:active { transform: scale(.88); }

/* ---------- bottom nav (3 ปุ่ม) — floating glass pill ---------- */
.bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: calc(100% - 28px); max-width: 452px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--glass-brd); border-radius: 24px;
  display: flex; padding: 6px; gap: 4px; z-index: 50;
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.4);
}
.nav-btn {
  flex: 1; min-width: 0; border: none; background: none; padding: 8px 4px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 700; position: relative;
  transition: color .2s ease, background .28s ease;
}
.nav-btn > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-btn .ni { font-size: 19px; transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.nav-btn.active { color: var(--brand); background: var(--brand-soft); }
.nav-badge { position: absolute; top: 2px; right: 18%; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.nav-badge[hidden] { display: none; }
.nav-lock-badge { position: absolute; top: 1px; left: 20%; width: 14px; height: 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 8px; display: grid; place-items: center; line-height: 1; }
.nav-lock-badge[hidden] { display: none; }
.nav-btn[hidden] { display: none; }
.nav-btn.active .ni { transform: translateY(-2px) scale(1.14); }

/* ---------- modal / confirm / toast / loader ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-overlay.show { display: flex; animation: fade .2s; }
.modal { background: var(--card); border-radius: 20px; padding: 22px; width: 100%; max-width: 400px; box-shadow: var(--shadow-pop); max-height: 86vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--muted); font-size: 15px; }
.modal h3 { margin: 0 0 12px; font-size: 17px; }
/* กันไอคอนหัวข้อป๊อปอัปกางเต็มจอ: <svg viewBox> ที่ไม่กำหนด width/height
   และไม่มีกฎ CSS คุม จะกางเป็น ~356px ดันหัวข้อสูงเกือบ 400px */
.modal h3 svg { width: 19px; height: 19px; vertical-align: -3px; flex: 0 0 auto; }
.confirm-box { background: var(--card); border-radius: 18px; padding: 24px; max-width: 340px; width: 100%; text-align: center; box-shadow: var(--shadow-pop); }
.cf-ic { display: flex; justify-content: center; margin-bottom: 8px; color: var(--muted); }
.cf-ic svg { width: 34px; height: 34px; }
.cf-msg { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.cf-actions { display: flex; gap: 10px; }

.bp-modal { max-width: 420px; }
.bp-head { display: flex; align-items: center; gap: 12px; margin: 2px 34px 14px 0; }
.bp-head-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; }
.bp-head-ico svg { width: 23px; height: 23px; }
.bp-head-tx h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; color: var(--text); }
.bp-head-tx span { font-size: 12px; color: var(--muted); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.bp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 5px 10px; }
.bp-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }

.pw-modal { max-width: 420px; }
.pw-ico { background: linear-gradient(145deg, var(--brand), var(--brand-2)) !important; color: #fff !important; box-shadow: 0 8px 18px -6px var(--brand); }
.pw-feat-list { list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 10px; }
.pw-feat-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text); line-height: 1.4; }
.pw-feat-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pw-price-row { text-align: center; font-size: 20px; font-weight: 900; color: var(--brand); margin-bottom: 12px; }
.bp-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; margin-bottom: 12px; background: var(--card); box-shadow: var(--shadow-soft); }
.bp-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bp-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--pc); }
.bp-block-head h4 { margin: 0; flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; color: var(--text); }
.bp-total { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--pc); padding: 3px 11px; border-radius: 999px; }
.bp-rows { display: flex; flex-direction: column; }
.bp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.bp-row:last-child { border-bottom: none; }
.bp-row-name { color: var(--text); flex: 1; min-width: 0; }
.bp-row-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--pc); background: var(--surface-2); padding: 3px 9px; border-radius: 999px; }

.loading-overlay { position: fixed; inset: 0; background: var(--bg); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 200; }
.loading-overlay.show { display: flex; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-text { font-size: 14px; color: var(--muted); }

.toast-stack {
  position: fixed; z-index: 300;
  right: max(16px, calc(50% - var(--maxw)/2 + 16px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(300px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-card {
  pointer-events: auto;
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 30px 12px 14px; border-radius: 12px;
  border-left: 4px solid var(--tc-accent);
  background: var(--tc-bg); color: var(--text);
  box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateX(16px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.toast-card.show { opacity: 1; transform: translateX(0) scale(1); }
.toast-card.success { --tc-accent: var(--ok); --tc-bg: var(--ok-soft); }
.toast-card.warning { --tc-accent: var(--warn); --tc-bg: var(--warn-soft); }
.toast-card.info { --tc-accent: var(--info); --tc-bg: var(--info-soft); }
.tc-ico { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--tc-accent); }
.tc-ico svg { width: 19px; height: 19px; display: block; }
.tc-body { flex: 1; min-width: 0; }
.tc-title { display: block; font-size: 13.5px; font-weight: 800; color: var(--tc-accent); margin-bottom: 2px; }
.tc-msg { display: block; font-size: 12.5px; color: var(--text); line-height: 1.5; opacity: .88; }
.tc-close { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border: none; background: none; color: var(--muted); display: grid; place-items: center; opacity: .8; }
.tc-close svg { width: 14px; height: 14px; }

/* count-up flourish */
.countup { font-variant-numeric: tabular-nums; }

/* confetti */
#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 250; display: none; }
#confetti-canvas.show { display: block; }

/* ---------- SVG icons sizing ---------- */
.nav-btn .ni { display: grid; place-items: center; }
.nav-btn .ni svg { width: 22px; height: 22px; }
.menu-card .ico svg { width: 25px; height: 25px; color: var(--muted); display: block; }
.menu-card.feat .ico svg { color: #fff; }

/* ---------- สรุปหนังสือ (flipbook reader) ---------- */
.book-wrap { display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px 0; min-height: calc(100vh - 120px); }
.book-wrap[hidden] { display: none; }   /* กันหนังสือเปล่าโผล่ท้ายลิสต์เมื่อยังไม่เข้าโหมดหนังสือ ([hidden] ต้องชนะ display:flex ด้านบน) */
.book-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.book-bar-title { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.book-bar-title svg { width: 22px; height: 22px; color: var(--muted); }
.book-bar-tools { display: flex; gap: 8px; }
.book-tool { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--glass-brd); background: var(--glass-bg); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow-soft); transition: transform .15s, color .15s, background .15s; }
.book-tool svg { width: 20px; height: 20px; }
.book-tool:active { transform: scale(.9); }
.book-tool.on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

.book { position: relative; flex: 1 1 auto; min-height: 60vh; perspective: 2200px; }
.book-paper, .leaf-face {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,0) 7%, rgba(0,0,0,0) 95%, rgba(0,0,0,.04)),
    linear-gradient(160deg, var(--card), var(--surface-2));
  border-radius: 5px 16px 16px 5px; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.book-paper { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page-inner { padding: 24px 22px 32px; min-height: 100%; box-sizing: border-box; }

/* turning leaf */
.leaf { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; z-index: 6; will-change: transform; }
.leaf.anim { transition: transform .62s cubic-bezier(.42,.04,.22,1); }
.leaf-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-back { transform: rotateY(180deg); }
.leaf-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.04) 60%, transparent); opacity: 0; pointer-events: none; }
.leaf.anim .leaf-shade { animation: leafshade .62s ease; }
@keyframes leafshade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* page content */
.bk-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; gap: 9px; }
.bk-emblem { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 14px 32px -10px var(--brand); margin-bottom: 4px; }
.bk-emblem svg { width: 40px; height: 40px; }
.bk-cover h1 { font-size: 27px; font-weight: 800; margin: 4px 0 0; color: var(--text); line-height: 1.25; }
.bk-rule { width: 48px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.bk-cover .bk-sub { font-size: 14px; color: var(--muted); max-width: 280px; line-height: 1.6; }
.bk-cover .bk-ed { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 6px 15px; border-radius: 999px; margin-top: 8px; }
.bk-open { margin-top: 16px; font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.bk-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bk-chip { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; background: linear-gradient(145deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-size: 25px; box-shadow: 0 8px 18px -8px var(--brand); }
.bk-chip svg { width: 24px; height: 24px; }
.bk-tt { flex: 1; min-width: 0; }
.bk-tt b { display: block; font-size: 18px; line-height: 1.3; color: var(--text); }
.bk-tt span { font-size: 11.5px; color: var(--brand); font-weight: 800; letter-spacing: .03em; }
.bk-divider { height: 1px; background: linear-gradient(90deg, var(--brand), transparent); margin: 4px 0 14px; opacity: .5; }
.bk-pageno { text-align: center; font-size: 11px; color: var(--muted); margin-top: 14px; letter-spacing: .14em; }
/* ปุ่มลิงก์แหล่งอ้างอิงประจำหน้า (ท้ายเนื้อหาของโน้ต) */
.bk-src-wrap { margin-top: 22px; }
.bk-src { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); text-decoration: none; color: var(--text); box-shadow: var(--shadow-soft); transition: transform .12s, border-color .15s, box-shadow .15s; }
.bk-src:active { transform: scale(.99); }
.bk-src:hover { border-color: var(--brand); box-shadow: var(--shadow-lift); }
.bk-src-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.bk-src-ic svg { width: 18px; height: 18px; }
.bk-src-tx { flex: 1; min-width: 0; }
.bk-src-tx b { display: block; font-size: 13.5px; line-height: 1.35; }
.bk-src-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.bk-src-domain { font-size: 11.5px; color: var(--brand); word-break: break-all; }
.bk-src-go { color: var(--muted); flex: 0 0 auto; }
.bk-src-go svg { width: 16px; height: 16px; }
.bk-author-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: center; margin: 6px 0 4px; }
.bk-author-card .who-l { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.bk-author-card .who { font-size: 19px; font-weight: 800; color: var(--text); margin-top: 3px; }

/* navigation row */
.book-nav { display: flex; align-items: center; gap: 12px; padding: 6px 2px 14px; }
.book-arrow { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; border: 1px solid var(--glass-brd); background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow-soft); transition: transform .15s, opacity .15s; }
.book-arrow svg { width: 23px; height: 23px; }
.book-arrow:active { transform: scale(.9); }
.book-arrow:disabled { opacity: .3; color: var(--muted); }
.book-meter { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.book-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .45s cubic-bezier(.34,1.2,.64,1); }
.book-ind { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* fullscreen mode */
.book-wrap.is-fullscreen { position: fixed; inset: 0; z-index: 220; background: var(--bg); padding: 16px 14px; min-height: 0; height: 100dvh; }
.book-wrap.is-fullscreen .book { min-height: 0; }

/* ---------- สารบัญ (TOC) panel ---------- */
.toc-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.22);
  opacity: 0; pointer-events: none;
  transition: opacity .26s; z-index: 44;
}
.toc-backdrop.open { opacity: 1; pointer-events: all; }
.toc-panel {
  position: fixed; top: 0; bottom: 0;
  right: max(0px, calc((100vw - var(--maxw)) / 2));
  width: min(25vw, 148px); min-width: 120px;
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -6px 0 28px -6px rgba(0,0,0,.22);
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 45; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.toc-panel.open { transform: translateX(0); }
.toc-inner { padding: 14px 8px 32px; }
.toc-head {
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 0 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.toc-item {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 8px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: background .14s, color .14s; line-height: 1.4; margin-bottom: 2px;
}
.toc-item:hover { background: var(--surface-2); }
.toc-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.toc-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.toc-lbl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; min-width: 0; }
.toc-lbl svg { width: 12px; height: 12px; vertical-align: -1px; color: var(--brand); }

/* แท็บคั่นหนังสือด้านขวา (สไตล์ Color Note) */
.book-tabs { position: absolute; top: 18px; bottom: 18px; right: -5px; width: 15px; display: flex; flex-direction: column; gap: 3px; z-index: 9; }
.book-tab { flex: 1 1 0; min-height: 6px; background: var(--tc); border: none; padding: 0; border-radius: 3px 6px 6px 3px; cursor: pointer; box-shadow: 1px 1px 3px rgba(0,0,0,.18); transition: transform .16s ease, box-shadow .16s, filter .16s; position: relative; }
.book-tab:hover { filter: brightness(1.07); }
.book-tab.active { transform: translateX(-5px); filter: brightness(1.12) saturate(1.15); box-shadow: -1px 2px 8px rgba(0,0,0,.32); z-index: 3; }
.book-tab.active::after { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.95); }
.page-inner { padding-right: 26px; }

/* ป้ายบอกว่าเป็น "ลิงก์ภายนอก" ใช้ร่วมกันทุกจุดที่พาออกนอกแอป */
.ext-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.ext-badge svg { width: 10px; height: 10px; flex: 0 0 auto; }
.cc-ref-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.cc-ref-domain { font-size: 11.5px; color: var(--brand); word-break: break-all; }

/* ========================================================
   สรุปหนังสือ — Card Reader (redesign)
   ======================================================== */

/* topbar */
.sn-topbar {
  position: sticky; top: 0; z-index: 15;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 16px 10px;
}
.sn-tb-l { display: flex; align-items: center; gap: 10px; }
.sn-tb-ico { display: inline-grid; place-items: center; color: var(--muted); }
.sn-tb-ico svg { width: 24px; height: 24px; }
.sn-tb-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.sn-tb-r { display: flex; gap: 8px; }
.sn-tool {
  width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); display: grid; place-items: center;
  box-shadow: var(--shadow-soft); transition: transform .15s, color .15s, background .15s, border-color .15s;
}
.sn-tool svg { width: 19px; height: 19px; }
.sn-tool:active { transform: scale(.91); }
.sn-tool.on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ปุ่ม toggle อ่านแบบหนังสือ — แสดง label ในหน้าที่กว้างพอ */
.sn-book-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 40px; padding: 0 12px; gap: 6px;
  color: var(--brand); border-color: var(--brand); background: var(--brand-soft);
}
.sn-book-toggle svg { flex: 0 0 auto; }
.sn-book-toggle .sn-book-lbl { font-size: 12.5px; font-weight: 800; white-space: nowrap; line-height: 1; }
@media (max-width: 380px) {
  .sn-book-toggle .sn-book-lbl { display: none; }
  .sn-book-toggle { width: 40px; padding: 0; }
}

/* เมื่ออยู่ book mode ให้ซ่อน tabs + list แบบเนียน ๆ */
.book-mode .sn-tabs, .book-mode .sn-list { display: none !important; }
.book-mode .sn-topbar { display: none !important; }

/* part filter tabs */
.sn-tabs {
  position: sticky; top: 65px; z-index: 14;
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; gap: 7px;
  padding: 8px 14px; overflow-x: auto; scrollbar-width: none;
}
.sn-tabs::-webkit-scrollbar { display: none; }
.sn-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  white-space: nowrap; transition: all .18s;
  --snt: var(--brand);
}
.sn-tab-a { --snt: #2563eb; }
.sn-tab-b { --snt: #7c3aed; }
.sn-tab-c { --snt: #0e7490; }
.sn-tab.active { background: var(--snt); color: #fff; border-color: var(--snt); }
.sn-tab-ct {
  font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
  background: var(--surface-2); color: var(--muted); transition: all .18s;
}
.sn-tab.active .sn-tab-ct { background: rgba(255,255,255,.25); color: #fff; }

/* note list */
.sn-list { padding: 10px 12px 40px; display: flex; flex-direction: column; gap: 8px; }

/* group header */
.sn-group {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 2px; margin-top: 4px;
}
.sn-group svg { width: 12px; height: 12px; flex: 0 0 auto; }
.sn-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ─── note card ─── */
.nc {
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); overflow: hidden;
  box-shadow: var(--shadow-soft);
  --nc: var(--brand);
  /* กันแถบ sticky (sn-topbar+sn-tabs สูงรวม ~117px) บังตอน scrollIntoView จากลิงก์ "อ่านทริค"/สารบัญ */
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 127px);
}
.nc[data-part="a"] { --nc: #2563eb; }
.nc[data-part="b"] { --nc: #7c3aed; }
.nc[data-part="c"] { --nc: #0e7490; }
.nc.nc-pinned { border-color: var(--brand); }

/* card header */
.nc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 16px; width: 100%; text-align: left;
  cursor: pointer; user-select: none;
  background: none; border: none; color: inherit; font-family: inherit;
  position: relative;
}
.nc-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--nc); border-radius: 4px 0 0 4px;
}
.nc-icon {
  font-size: 20px; flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2);
}
.nc-info { flex: 1; min-width: 0; }
.nc-title { font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.3; display: block; }
.nc-badges { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.nc-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: var(--nc); color: #fff; opacity: .82; }
.nc-pin { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.nc-pin svg { width: 10px; height: 10px; flex: 0 0 auto; }
.nc-caret {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--muted);
  transition: transform .25s cubic-bezier(.34,1.5,.5,1);
}
.nc-caret svg { width: 15px; height: 15px; }
.nc.open .nc-caret { transform: rotate(180deg); }

/* card body */
.nc-body { display: none; padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.nc.open .nc-body { display: block; animation: fade .2s ease; }

/* section block */
.nc-sec { margin-top: 10px; }
.nc-sec-h {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--nc); padding: 5px 0 4px;
  border-bottom: 1.5px solid; border-color: var(--line);
  margin-bottom: 6px;
}

/* bullet points */
.nc-pts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.nc-pts li {
  padding: 6px 10px 6px 16px; border-radius: 8px;
  background: var(--surface-2); font-size: 13.5px; line-height: 1.6;
  position: relative;
}
.nc-pts li::before {
  content: ""; position: absolute; left: 6px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--nc);
}

/* paragraph */
.nc-p { font-size: 13.5px; line-height: 1.7; color: var(--text); margin: 6px 0; }

/* trick box */
.nc-trick {
  margin-top: 10px; padding: 10px 12px 10px 38px;
  border-radius: 10px; border: 1.5px solid #fde047;
  background: #fefce8; color: #713f12;
  font-size: 13px; line-height: 1.6; position: relative;
}
.nc-trick-ico { position: absolute; left: 10px; top: 11px; color: #b45309; }
.nc-trick-ico svg { width: 16px; height: 16px; display: block; }
[data-theme="dark"] .nc-trick { background: #1c1710; border-color: #7a5a14; color: #fde68a; }
[data-theme="reading"] .nc-trick { background: #fdfae8; border-color: #d97706; color: #78350f; }

/* mark highlight */
.nc mark { background: #fef08a; color: #854d0e; border-radius: 3px; padding: 0 2px; font-weight: 700; }
[data-theme="dark"] .nc mark { background: #3d2e04; color: #fde68a; }
[data-theme="reading"] .nc mark { background: #fef3c7; color: #78350f; }

/* source link */
.nc-src-wrap { margin-top: 12px; }
.nc-src {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.nc-src:hover { border-color: var(--brand); }
.nc-src-ic { flex: 0 0 auto; color: var(--brand); display: grid; place-items: center; }
.nc-src-ic svg { width: 16px; height: 16px; }
.nc-src-tx { flex: 1; min-width: 0; }
.nc-src-tx b { display: block; font-size: 12.5px; line-height: 1.4; font-weight: 700; }
.nc-src-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.nc-src-domain { font-size: 11px; color: var(--brand); word-break: break-all; }

/* ========================================================
   Question grid (หน้าสรุปผล) — ผลรายข้อ พร้อมเวลา/สถานะ
   ======================================================== */
.qgrid-wrap {
  margin: 18px 0 6px; padding: 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.qgrid-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qgrid-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.01em; }
.qgrid-title svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.qgrid-legend { display: flex; gap: 10px; font-size: 11.5px; color: var(--muted); }
.qgl { display: inline-flex; align-items: center; gap: 4px; }
.qgl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.qgl-dot.ok { background: var(--ok); }
.qgl-dot.no { background: var(--bad); }
.qgl-dot.skip { background: var(--muted); opacity: .5; }

.qgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.qg-cell {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--line); background: var(--card);
  border-radius: 12px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; position: relative;
  transition: transform .12s, border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.qg-cell:active { transform: scale(.94); }
.qg-cell:hover { box-shadow: var(--shadow-soft); }
.qg-num { font-size: 17px; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.qg-time { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.qg-mark {
  position: absolute; right: -5px; top: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; color: #fff; font-weight: 900;
  border: 2px solid var(--card); box-sizing: content-box;
}

.qg-cell.ok { border-color: var(--ok); background: var(--ok-soft); }
.qg-cell.ok .qg-num { color: var(--ok); }
.qg-cell.ok .qg-time { color: var(--ok); opacity: .8; }
.qg-cell.ok .qg-mark { background: var(--ok); }

.qg-cell.no { border-color: var(--bad); background: var(--bad-soft); }
.qg-cell.no .qg-num { color: var(--bad); }
.qg-cell.no .qg-time { color: var(--bad); opacity: .8; }
.qg-cell.no .qg-mark { background: var(--bad); }

.qg-cell.skip { border-color: var(--line); background: var(--surface-2); }
.qg-cell.skip .qg-num { color: var(--muted); }
.qg-cell.skip .qg-time { color: var(--muted); }
.qg-cell.skip .qg-mark { background: var(--muted); opacity: .7; }

.qgrid-hint { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.qgrid-hint svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* small screens — 4 columns */
@media (max-width: 360px) {
  .qgrid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .qg-num { font-size: 15px; }
}

/* ปุ่มลอย "ผลรายข้อ" บนหน้าเฉลยละเอียด — ลอยตามการเลื่อนตลอด */
.qgrid-fab {
  position: fixed;
  right: max(18px, calc(50% - var(--maxw)/2 + 18px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  z-index: 40;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--brand); color: #fff; border: none;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform .15s;
}
.qgrid-fab svg { width: 23px; height: 23px; }
.qgrid-fab:active { transform: scale(.9); }

/* ========================================================
   Pre-check modal (ตรวจคำตอบก่อนส่ง)
   ======================================================== */
.modal.precheck { padding: 20px 18px 16px; max-width: 430px; }
.pc-head { text-align: center; margin-bottom: 14px; }
.pc-h { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.pc-ico { display: grid; place-items: center; color: var(--muted); }
.pc-ico svg { width: 20px; height: 20px; }
.pc-status { font-size: 13px; color: var(--muted); margin-top: 5px; }
.pc-status b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-status.complete { color: var(--ok); font-weight: 700; }
.pc-status.complete b { color: var(--ok); }

.pc-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  padding: 12px; margin: 8px 0 12px;
  background: var(--surface-2); border-radius: 14px;
  max-height: 42vh; overflow-y: auto;
}
.pc-cell {
  aspect-ratio: 1/1;
  border: 1.5px solid var(--line); background: var(--card);
  border-radius: 11px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
}
.pc-cell:active { transform: scale(.93); }
.pc-cell:hover { box-shadow: var(--shadow-soft); }
.pc-cell .pc-num { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.pc-cell .pc-time { font-size: 10px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }

.pc-cell.done { border-color: #fbbf24; background: #fef9c3; }
[data-theme="dark"] .pc-cell.done { border-color: #92640c; background: #2b2410; }
[data-theme="reading"] .pc-cell.done { border-color: #d97706; background: #fef3c7; }
.pc-cell.done .pc-num { color: #a16207; }
.pc-cell.done .pc-time { color: #a16207; opacity: .85; }
[data-theme="dark"] .pc-cell.done .pc-num,
[data-theme="dark"] .pc-cell.done .pc-time { color: #facc15; }

.pc-cell.skip { border-color: var(--line); background: var(--surface-2); }
.pc-cell.skip .pc-num { color: var(--muted); }
.pc-cell.skip .pc-time { color: var(--muted); opacity: .6; }
.pc-cell.current { border-width: 2.5px; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.pc-legend { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.pc-lg { display: inline-flex; align-items: center; gap: 5px; }
.pc-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1.5px solid; }
.pc-dot.done { background: #fef9c3; border-color: #fbbf24; }
.pc-dot.skip { background: var(--surface-2); border-color: var(--line); }

.pc-note { text-align: center; font-size: 11.5px; color: var(--muted); margin: 4px 0 12px; line-height: 1.5; }

.pc-submit {
  width: 100%; padding: 14px 16px; font-size: 15px; font-weight: 800;
  border-radius: 14px; margin-bottom: 8px;
  background: var(--ok); color: #fff; border: none;
  box-shadow: 0 8px 20px -8px var(--ok);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.pc-submit:active { transform: scale(.98); }
.pc-submit:disabled {
  background: var(--surface-2); color: var(--muted);
  box-shadow: none; cursor: not-allowed; opacity: .8;
}
.pc-back {
  width: 100%; padding: 11px 14px; font-size: 13.5px; font-weight: 700;
  border-radius: 12px; background: none; border: 1px solid var(--line); color: var(--text);
}

@media (max-width: 380px) {
  .pc-grid { grid-template-columns: repeat(4, 1fr); }
  .pc-cell .pc-num { font-size: 14px; }
}

/* disabled next button */
.btn.btn-disabled, .btn.btn-primary[disabled] {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .75;
}

/* ========================================================
   กระดาษทด (Scratch Pad)
   ======================================================== */
.scratch-open-btn {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform .12s;
}
.scratch-open-btn svg { width: 16px; height: 16px; }
.scratch-open-btn:active { transform: scale(.9); }

.scratch-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: none; flex-direction: column;
}
.scratch-overlay.show { display: flex; animation: fade .2s; }

.sc-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
  border-bottom: 1px solid var(--line);
}
.sc-bar-title { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 800; color: var(--text); }
.sc-bar-title svg { width: 18px; height: 18px; color: var(--muted); }

.sc-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 8px 8px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.sc-toolbar::-webkit-scrollbar { display: none; }
.sc-toolbar .sc-group { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.sc-tool {
  width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text); font-size: 13px; display: grid; place-items: center;
  transition: transform .12s, color .15s, background .15s, border-color .15s;
}
.sc-tool svg { width: 14px; height: 14px; }
.sc-tool:active { transform: scale(.9); }
.sc-tool.on { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.sc-tool:disabled { opacity: .35; pointer-events: none; }
.sc-zoom-btn { width: auto; padding: 0 7px; font-size: 10.5px; font-weight: 700; }

.sc-color {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .12s, border-color .15s;
}
.sc-color.active { border-color: var(--brand); transform: scale(1.1); }

.sc-size {
  width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center;
  transition: border-color .15s, background .15s;
}
.sc-size i { display: block; border-radius: 50%; background: var(--text); }
.sc-size[data-size="2"] i { width: 3px; height: 3px; }
.sc-size[data-size="4"] i { width: 6px; height: 6px; }
.sc-size[data-size="8"] i { width: 10px; height: 10px; }
.sc-size.active { border-color: var(--brand); background: var(--brand-soft); }

.sc-body {
  flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
  background-color: var(--card);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  touch-action: none;
}
#scratch-bg-canvas, #scratch-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#scratch-bg-canvas { pointer-events: none; }
#scratch-canvas { cursor: crosshair; }

/* ============================================================
   ชั้นที่ 3: Alias โทเค็นสี — จับ token เดิมของ Extra (--green ฯลฯ)
   ให้ชี้ไปยัง token ของ Computer (--brand ฯลฯ) เพื่อ re-theme ทั้งแอป
   ครอบทุกธีม (light/dark/reading) และมาท้ายไฟล์ = ชนะด้วยลำดับ source
   ============================================================ */
:root,
[data-theme="light"],
[data-theme="dark"],
[data-theme="reading"] {
  --green:        var(--brand);
  --green-dark:   var(--brand-dark);
  --green-light:  var(--brand-soft);
  --green-soft:   var(--brand-soft);
  --blue:         var(--info);
  --red:          var(--bad);
  --red-bg:       var(--bad-soft);
  --red-border:   var(--bad);
  --amber:        var(--warn);
  --hero-from:    var(--brand);
  --hero-to:      var(--brand-2);
  --shadow:       var(--shadow-lift);
  --primary:      var(--brand);
}

/* ---------- final tweaks: กันคอมโพเนนต์เฉพาะของ Extra ให้เข้าธีม Computer ---------- */
/* กล่องเนื้อเรื่อง (passage) / คำใบ้ / ปุ่มหลอดไฟ ใช้โทน gold/warm ของ Computer */
.passage { background: var(--warn-soft); border-color: var(--line); color: var(--text); }
.hint-btn { background: var(--warn-soft); border-color: var(--gold); }
.hint-btn:hover { background: var(--warn-soft); }
.hint-btn.active { background: var(--warn-soft); border-color: var(--gold); }
.hint-pop { background: var(--warn-soft); color: var(--text); border-color: var(--gold); box-shadow: var(--shadow-lift); }
.hint-pop::before { color: var(--gold); }

/* progress fill ใช้ gradient แบรนด์ของ Computer */
.progress-fill { background: linear-gradient(90deg, var(--brand-2), var(--brand)); }
.progress-track { background: var(--surface-2); }

/* explanation ให้ใช้กรอบแบรนด์ */
.explanation { border-color: var(--line); background: var(--brand-soft); }

/* home-hero: ล้าง gradient เขียว + ข้อความขาวของธีมเดิม → ใช้ hero แบบ editorial ของ Computer
   (นั่งบนพื้นครีมของหน้า ข้อความสีเข้ม) */
.home-hero { background: none !important; border-radius: 0 !important; color: var(--text); }
.home-hero h1 { color: var(--text); }
.home-hero p { color: var(--muted); opacity: 1; }

/* home-body: เว้นระยะการ์ดให้เท่ากับสไตล์ Computer (การ์ดมี margin-bottom เองแล้ว) */
.home-body { gap: 0; padding: 4px 16px calc(env(safe-area-inset-bottom, 0px) + 40px); }

/* ============================================================
   แผง "ขอบเขตการสอบ ภาค ก" บนหน้าแรก (สร้างความเชื่อมั่น)
   ดีไซน์ตามแผง scope-card ของแอป SAO — แถบสีซ้ายบอกวิชา + กล่องเกณฑ์ผ่าน
   ============================================================ */
.scope-card {
  margin: 0 0 18px; padding: 14px 14px 10px;
  border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.scope-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scope-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft); border: 1px solid var(--line);
}
.scope-ic svg { width: 19px; height: 19px; }
.scope-h-tx { display: flex; flex-direction: column; min-width: 0; }
.scope-h-tx b { font-size: 14.5px; color: var(--text); line-height: 1.4; }
.scope-h-tx .scope-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.scope-sec {
  position: relative; padding: 11px 12px 10px 14px; margin-bottom: 10px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line);
}
.scope-sec::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px;
}
.scope-1::before { background: var(--brand); }
.scope-2::before { background: #0f766e; }
.scope-3::before { background: #b45309; }
.scope-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scope-badge {
  flex: none; font-size: 11px; font-weight: 800; color: #fff;
  padding: 2px 9px; border-radius: 999px;
}
.scope-1 .scope-badge { background: var(--brand); }
.scope-2 .scope-badge { background: #0f766e; }
.scope-3 .scope-badge { background: #b45309; }
.scope-sec-t { font-size: 13px; font-weight: 700; color: var(--text); flex: 1 1 auto; min-width: 0; }
.scope-sec-n { flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.scope-sec-sub { font-size: 11px; color: var(--muted); margin: 4px 0 7px; line-height: 1.55; }
.scope-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.scope-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.sc-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--muted); opacity: .55; }
.scope-pass {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.6; color: var(--text);
  background: var(--ok-soft); border-left: 3px solid var(--ok);
}
.scope-pass b { color: var(--ok); font-weight: 800; }
.scope-pass-en { background: var(--warn-soft); border-left-color: var(--warn); }
.scope-pass-en b { color: var(--warn); }
.scope-footnote {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 2px 0; font-size: 11.5px; line-height: 1.65; color: var(--muted);
}
.scope-footnote svg { flex: none; width: 14px; height: 14px; margin-top: 3px; }
.scope-footnote b { color: var(--text); }
.scope-important { color: var(--text); }
.scope-important svg { color: var(--bad); }
.scope-important b:first-child { color: var(--bad); }
[data-theme="dark"] .scope-pass { background: color-mix(in srgb, var(--ok) 16%, var(--card)); }
[data-theme="dark"] .scope-pass-en { background: color-mix(in srgb, var(--warn) 16%, var(--card)); }

/* ============================================================
   ตัวชี้ "ถูก / ผิด" — ต้องผูกกับ --ok / --bad เท่านั้น
   เหตุผล: ธีม SAO กำหนด --bad ให้เท่ากับ --brand (แดงทั้งคู่) และ alias ชั้นที่ 3
   แมป --green → --brand ดังนั้นคอมโพเนนต์ชั้นที่ 1 ที่ใช้ --green สื่อ "ถูก"
   จะกลายเป็นสีแดงเหมือน "ผิด" ทันที ทำให้ผู้ใช้แยกไม่ออก
   บล็อกนี้จึงบังคับให้ "ถูก = เขียว (--ok)" กลับมา และอยู่ท้ายไฟล์เพื่อชนะลำดับ
   (บางกฎของชั้นที่ 1 มี specificity สูงกว่าชั้นที่ 2 เช่น .review-card .rc-status.ok)
   ============================================================ */
.choice.correct { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.choice.correct .letter,
.choice.correct .lab { background: var(--ok); color: #fff; }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.choice.wrong .letter,
.choice.wrong .lab { background: var(--bad); color: #fff; }

.review-card .rc-status.ok { background: var(--ok); color: #fff; }
.review-card .rc-status.no { background: var(--bad); color: #fff; }
.review-card .rc-ans .ok { color: var(--ok); }
.review-card .rc-ans .no { color: var(--bad); }

/* ============================================================
   แผ่น "หยุดพักชั่วคราว" (pause overlay) — แก้บั๊กกดอะไรไม่ได้ทั้งหน้า
   ชั้นที่ 1 ตั้ง display:none แล้วเปิดด้วยคลาส .show  (ตรงกับ app.js ที่ใช้
   classList.add/remove("show") ใน pauseQuiz()/resumeQuiz())
   แต่ชั้นที่ 2 ตั้ง display:flex เป็นค่าเริ่มต้น และซ่อนด้วย [hidden] แทน
   ชั้นที่ 2 มาทีหลังจึงชนะ → แผ่นนี้ค้างคลุมทั้งจอ (position:fixed; inset:0; z-index:70)
   ดักคลิกไว้หมด ทำให้เข้าหน้าปกติไม่ได้เลย
   บล็อกนี้บังคับกลับไปใช้ระบบ .show ให้ตรงกับ JS
   ============================================================ */
.pause-overlay { display: none; }
.pause-overlay.show { display: flex; }

/* ============================================================
   หน้าทำข้อสอบ — จัดโครงใหม่ให้ตรงกับต้นแบบ (PF Exam Computer / SAO)
   เดิมมี action-row ซ้อนกัน 3 แถว (กระดาษทด / ก่อนหน้า-ถัดไป / เฉลย-ตรวจ)
   ตอนนี้ย้ายกระดาษทด+หยุดพักไปเป็นปุ่มไอคอนเล็กบนแถวคำสั่ง เหลือแถวปุ่มหลักแถวเดียว
   ============================================================ */
.instruction-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.q-tool {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
  display: grid; place-items: center;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.q-tool svg { width: 17px; height: 17px; display: block; }
.q-tool:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.q-tool:active { transform: scale(.9); }

/* คำใบ้: ชั้นที่ 1 เคยตั้ง position:absolute ไว้ตอนที่ .hint-pop อยู่ใน .qwrap
   ตอนนี้ย้ายออกมาเป็นบล็อกใต้การ์ดคำถามแล้ว จึงต้องล้างค่าเดิมทิ้ง */
.hint-pop { position: static; right: auto; top: auto; max-width: none;
            transform: none; pointer-events: auto; opacity: 1; }
.hint-pop:not(.show) { display: none; }
/* ปุ่มคำใบ้อยู่มุมซ้ายล่างของการ์ด — ล้าง right ที่ชั้นที่ 1 ตั้งไว้ ไม่งั้นปุ่มจะยืดเต็มความกว้าง */
.hint-btn { right: auto; }

/* แถวปุ่มรอง (เฉลย/ตรวจคำตอบ) ให้เบากว่าแถวหลัก */
.action-row-sub { margin-top: 8px; }

/* ============================================================
   แท็บ "สิ่งที่ต้องอ่าน" — หัวแท็บ + ชั้นเนื้อหา study-guide.js
   หลักการอ่าน: ตัวอักษร ≥13.5px · ระยะบรรทัด 1.75–1.9 (ภาษาไทยมีสระบน-ล่าง)
   แต่ละบล็อกมีแถบสีซ้ายบอกประเภท เพื่อให้กวาดตาหาได้เร็ว
   ============================================================ */
.sn-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
  border-bottom: 1px solid var(--line);
}
.sn-tb-l { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.sn-tb-ico { color: var(--brand); display: grid; place-items: center; }
.sn-tb-ico svg { width: 20px; height: 20px; }
.sn-tb-title { font-size: 17px; font-weight: 800; color: var(--text); }
.sn-tool {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s;
}
.sn-tool svg { width: 17px; height: 17px; }
.sn-tool:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.sn-intro {
  margin: 12px 16px 4px; font-size: 12.5px; line-height: 1.75; color: var(--muted);
}
.sn-intro b { color: var(--text); }

/* ---------- อ่านสบายขึ้น: จังหวะบรรทัด/ระยะห่าง/ลำดับชั้นในการ์ดเนื้อหา ---------- */
.study-inner { padding: 0 16px 18px; }
.study-inner > * + * { margin-top: 2px; }
/* หัวข้อย่อย: มีเส้นนำหน้าให้กวาดตาเจอง่าย และเว้นบนมากกว่าล่าง (จัดกลุ่มสายตา) */
.study-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14.5px; font-weight: 800; color: var(--text);
  margin: 20px 0 8px; padding-bottom: 6px;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--brand) 30%, var(--line));
}
.study-inner > .study-h:first-child { margin-top: 8px; }
.study-ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.study-ul li {
  position: relative; padding-left: 17px;
  font-size: 14.5px; line-height: 1.85; margin-bottom: 0; color: var(--text);
}
.study-ul li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .55;
}
.study-p { font-size: 14.5px; line-height: 1.85; margin: 10px 0; color: var(--text); }
.study-trick { margin-top: 14px; line-height: 1.75; }

.gd-block {
  position: relative; margin: 14px 0 0; padding: 13px 14px 14px 16px;
  border-radius: 13px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
}
.gd-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.gd-think::before  { background: var(--info); }
.gd-worked::before { background: var(--brand); }
.gd-memo::before   { background: var(--mint); }
.gd-source::before { background: var(--gold); }
.gd-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.gd-h-ic { display: grid; place-items: center; color: var(--muted); }
.gd-h-ic svg { width: 16px; height: 16px; display: block; }
.gd-h b { font-size: 13.5px; font-weight: 900; color: var(--text); }
.gd-lead { margin: 0 0 10px; font-size: 13.5px; line-height: 1.8; color: var(--text); }

.gd-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.gd-steps li { font-size: 13.5px; line-height: 1.8; color: var(--text); }
.gd-steps li b { display: block; margin-bottom: 2px; }
.gd-steps li::marker { color: var(--info); font-weight: 800; }

.gd-ex { padding: 11px 12px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.gd-ex + .gd-ex { margin-top: 10px; }
.gd-ex-tag {
  display: inline-block; margin-right: 7px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; background: var(--brand); color: #fff; vertical-align: 2px;
}
.gd-ex-tag.ok { background: var(--ok); }
.gd-ex-q { font-size: 13.5px; line-height: 1.8; font-weight: 600; color: var(--text); }
.gd-ex-steps { margin: 9px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.gd-ex-steps li { font-size: 13px; line-height: 1.8; color: var(--text); }
.gd-ex-steps li::marker { color: var(--brand); font-weight: 800; }
.gd-ex-ans { margin-top: 10px; font-size: 13.5px; line-height: 1.8; font-weight: 700; color: var(--text); }
.gd-ex-check {
  margin-top: 9px; padding: 8px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.78; color: var(--text);
  background: var(--ok-soft); border-left: 3px solid var(--ok);
}
.gd-ex-check b { color: var(--ok); }

.gd-memo-list { display: flex; flex-direction: column; gap: 7px; }
.gd-memo-row { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.gd-memo-k {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  background: color-mix(in srgb, var(--mint) 88%, #000); color: #fff;
}
.gd-memo-v { flex: 1 1 170px; min-width: 0; font-size: 13px; line-height: 1.78; color: var(--text); }

.gd-src-cite { font-size: 12px; font-weight: 800; line-height: 1.6; color: color-mix(in srgb, var(--gold) 80%, var(--text)); margin-bottom: 7px; }
.gd-src-text {
  margin: 0; padding: 12px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 7%, var(--card));
  border-left: 3px solid color-mix(in srgb, var(--gold) 58%, var(--line));
  font-size: 13px; line-height: 1.92; color: var(--text);
}
.gd-src-text span { display: block; text-indent: 1.3em; }
.gd-src-text span + span { margin-top: 7px; }

.gd-flash-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 14px; padding: 13px 14px; border-radius: 13px;
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 55%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  transition: transform .15s, box-shadow .2s;
}
.gd-flash-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.gd-flash-btn:active { transform: scale(.985); }
.gd-flash-ic { flex: 0 0 auto; display: grid; place-items: center; color: color-mix(in srgb, var(--brand) 70%, var(--text)); }
.gd-flash-ic svg { width: 22px; height: 22px; display: block; }
.gd-flash-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* ข้อความบนพื้นทองอ่อน: ใช้ --brand ล้วนจะได้คอนทราสต์แค่ ~3.5 (ทองบนทอง)
   จึงผสมเข้าหา --text ให้เข้มขึ้นจนผ่านเกณฑ์ AA */
.gd-flash-tx b { font-size: 14px; color: color-mix(in srgb, var(--brand) 55%, var(--text)); }
.gd-flash-tx span { font-size: 11.5px; color: color-mix(in srgb, var(--muted) 70%, var(--text)); }
.gd-flash-go { flex: 0 0 auto; font-size: 20px; color: color-mix(in srgb, var(--brand) 70%, var(--text)); }

[data-theme="dark"] .gd-ex { background: color-mix(in srgb, var(--card) 82%, #000); }
[data-theme="dark"] .gd-memo-k { color: #04211d; }

/* ============================================================
   แฟลชการ์ด — การ์ดพลิก ๒ ด้าน
   ============================================================ */
.flash-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
.flash-panel {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; background: var(--bg);
}
.flash-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 10px;
  border-bottom: 1px solid var(--line); background: var(--card);
}
.flash-bar-tx { display: flex; flex-direction: column; min-width: 0; }
.flash-bar-tx b { font-size: 15px; color: var(--text); }
.flash-bar-tx span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.flash-track { flex: 0 0 auto; height: 4px; background: var(--surface-2); }
.flash-progress { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-2), var(--brand)); transition: width .3s; }
.flash-body { flex: 1 1 auto; display: grid; place-items: center; padding: 20px 18px; min-height: 0; }

.fl-card {
  width: 100%; max-width: 380px; aspect-ratio: 3 / 4; max-height: 62vh;
  position: relative; cursor: pointer;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.4,.2,.2,1);
}
.fl-card.flipped { transform: rotateY(180deg); }
.fl-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 20px; padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
.fl-back { transform: rotateY(180deg); background: linear-gradient(160deg, var(--brand-soft), var(--card)); border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); }
.fl-from { position: absolute; top: 14px; left: 0; right: 0; font-size: 10.5px; color: var(--muted); padding: 0 16px; }
.fl-side { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fl-back .fl-side { color: var(--brand); }
.fl-q { font-size: 18px; font-weight: 700; line-height: 1.65; color: var(--text); }
.fl-a { font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--text); }
.fl-tap { position: absolute; bottom: 18px; font-size: 11.5px; color: var(--muted); }

.flash-actions {
  flex: 0 0 auto; display: flex; gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--card); border-top: 1px solid var(--line);
}
.flash-actions .btn { flex: 1; }
.fl-again { background: var(--bad-soft); color: var(--bad); border: 1.5px solid var(--bad); font-weight: 800; }
.fl-got { background: var(--ok); color: #fff; font-weight: 800; }
.fl-done { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fl-done-ic { font-size: 46px; line-height: 1; }
.fl-done b { font-size: 19px; color: var(--text); }
.fl-done span { font-size: 13.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .fl-card { transition: none; } }

/* ============================================================
   ปรับ UI ทั้งโปรเจคให้เป็นชุดเดียวกัน
   หลักที่ยึด:
     1) ไอคอนทุกตัวเป็น "เส้นสีเดียว" (currentColor) เหมือนไอคอนแท็บล่าง
        ไม่ใช้อิโมจิสี เพราะสีของอิโมจิคุมไม่ได้และหน้าตาต่างกันทุกเครื่อง
     2) พื้นผิวทุกอันเป็น "การ์ด" ชุดเดียวกัน: มุมโค้ง เส้นขอบ เงาชั้นเดียวกัน
     3) ระยะห่างใช้สเกลเดียว (8 / 12 / 16 / 22) ไม่ตั้งค่ามั่ว ๆ รายจุด
   ============================================================ */

/* ---------- ไอคอนการ์ดเมนู: กรอบกลมโทนเดียว ไม่มีสีพื้นหลังฉูดฉาด ---------- */
.menu-card .ico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: none;
  display: grid; place-items: center;
  transition: color .18s, border-color .18s, background .18s, transform .2s;
}
.menu-card .ico svg { width: 22px; height: 22px; color: var(--muted); display: block; }
.menu-card:hover .ico { transform: none; border-color: var(--brand); background: var(--brand-soft); }
.menu-card:hover .ico svg { color: var(--brand); }
/* การ์ดเด่น (ข้อสอบเสมือนจริง) — เน้นด้วยเส้นขอบ ไม่ใช่พื้นสีจัด */
.menu-card.feat .ico { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.menu-card.feat .ico svg { color: var(--brand); }

/* ---------- การ์ดเมนู: เงา/ขอบชุดเดียวกัน ยกตัวเบา ๆ ตอน hover ---------- */
.menu-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
  transition: transform .18s, box-shadow .2s, border-color .18s;
}
.menu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.menu-card:active { transform: scale(.99); }
.menu-card .arrow { color: var(--muted); font-size: 20px; transition: transform .18s, color .18s; }
.menu-card:hover .arrow { color: var(--brand); transform: translateX(2px); }

/* ---------- การ์ดเรื่องในแท็บอ่าน: หัวการ์ดเป็นปุ่มหุบ/ขยายที่ชัดเจน ---------- */
.study-card { transition: box-shadow .2s, border-color .18s; }
.study-card.open { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); box-shadow: var(--shadow-lift); }
.study-head { gap: 12px; padding: 15px 16px; }
.study-head .sh-ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
  transition: color .18s, background .18s, border-color .18s;
}
.study-head .sh-ic svg { width: 19px; height: 19px; display: block; }
.study-card.open .study-head .sh-ic { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.study-head .sh-tag { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
/* ลูกศรหุบ/ขยาย: ทำให้เห็นชัดว่ากดได้ และหมุนเมื่อเปิด */
.study-head .sh-arrow {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
  background: var(--surface-2); color: var(--muted);
  transition: transform .22s, background .18s, color .18s;
}
.study-card.open .study-head .sh-arrow { background: var(--brand-soft); color: var(--brand); }

/* ---------- หัวกลุ่มในแท็บอ่าน: ไอคอนเส้น + สีเดียวทั้งหมด ---------- */
.study-group-head { align-items: center; gap: 9px; color: var(--text); border-bottom-color: var(--line); }
.study-group-head .sg-ic { display: grid; place-items: center; color: var(--muted); }
.study-group-head .sg-ic svg { width: 17px; height: 17px; display: block; }
.study-group-head span:not(.sg-ic) { flex: 1; }
/* ล้างสีเฉพาะกลุ่มของธีมเดิม (เคยเป็นน้ำเงิน/เขียว/ส้ม/ม่วง คนละโทนกันหมด) */
.study-group-head.sg-intro,
.study-group-head.sg-analytical,
.study-group-head.sg-english,
.study-group-head.sg-civil { color: var(--text); border-color: var(--line); }

/* ---------- หัวหน้าจอแบบธรรมดา ให้สมดุลกับหน้าจออื่น ---------- */
.plain-head { padding: 18px 16px 16px; }
.plain-head h2 { font-size: 19px; line-height: 1.4; }
.plain-head p { font-size: 13px; line-height: 1.7; margin-top: 6px; }

/* ---------- แถบเลือก (ปี/จำนวนข้อ/วิชา) ที่กางออกมา ให้เป็นการ์ดซ้อนชั้นใน ---------- */
.year-pick.show {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px;
  margin: -4px 0 12px;
}

/* ---------- การ์ดข้อที่ผิดบ่อย ---------- */
.boss-head-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 15px 16px; margin-bottom: 12px;
}
.boss-count { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 11px; }
.boss-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft); padding: 12px 13px; margin-bottom: 9px;
  display: flex; flex-direction: column; gap: 6px;
}
.boss-wc { font-size: 11.5px; font-weight: 700; color: var(--bad); }
.boss-tag {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.boss-q { font-size: 13.5px; line-height: 1.75; color: var(--text); }

/* ---------- แผง "ฝึกเฉพาะเรื่อง": เลือกวิชา → จำนวนข้อ → เรื่อง ---------- */
.topic-pick .cp-label,
.topic-pick .cp-sublabel {
  display: block; font-size: 11.5px; font-weight: 800; color: var(--muted);
  margin: 0 0 7px; letter-spacing: .01em;
}
.topic-pick .cp-sublabel { margin-top: 13px; }
.topic-list-label {
  font-size: 11.5px; font-weight: 800; color: var(--muted);
  margin: 15px 0 8px; letter-spacing: .01em;
}
.topic-list { display: flex; flex-direction: column; gap: 7px; max-height: 320px; overflow-y: auto; }
.topic-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .15s, background .15s, transform .12s;
}
.topic-row:hover { border-color: var(--brand); background: var(--brand-soft); }
.topic-row:active { transform: scale(.985); }
.topic-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.55; color: var(--text); }
.topic-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.topic-row:hover .topic-count { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.topic-go { flex: 0 0 auto; font-size: 18px; color: var(--muted); }
.topic-row:hover .topic-go { color: var(--brand); }
.topic-empty { font-size: 13px; color: var(--muted); padding: 14px 4px; text-align: center; }

/* ---------- ปุ่มไอคอนกลม: ให้ขนาด/สีชุดเดียวกันทั้งแอป ---------- */
.round-btn { border: 1px solid var(--line); background: var(--card); color: var(--muted); box-shadow: none; }
.round-btn:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); box-shadow: none; }
.round-btn svg { width: 18px; height: 18px; }

/* ============================================================
   หัวข้อหมวดบนหน้าแรก (section-label) — แบ่งการ์ดเป็นหมวดแบบ SAO
   เดิมการ์ดทั้งหมดกองรวมใต้ "โหมดสอบ" อันเดียว ตอนนี้แบ่งเป็น
   สอบเสมือนจริง / ฝึกซ้อม / เรียนรู้ / สนับสนุนผู้พัฒนา
   .sl-sub = คำอธิบายสั้นใต้ชื่อหมวด (ตัวเล็ก ไม่ตะโกน ไม่ใช้ตัวพิมพ์ใหญ่)
   ============================================================ */
.section-label {
  display: flex; flex-direction: column; gap: 2px;
  margin: 22px 4px 10px;
  color: var(--text);          /* ชื่อหมวดเข้มกว่าคำอธิบาย → ลำดับชั้นชัด */
}
.section-label:first-child { margin-top: 6px; }
.section-label .sl-sub {
  font-size: 11px; font-weight: 600;
  /* ผสม --muted เข้ากับ --text เล็กน้อย: ยังอ่อนกว่าชื่อหมวดชัดเจน แต่คอนทราสต์ผ่านเกณฑ์
     (ธีม "อ่าน" ถ้าใช้ --muted ล้วนจะได้คอนทราสต์แค่ ~2.8 ซึ่งอ่านยากที่ขนาด 11px) */
  color: color-mix(in srgb, var(--muted) 62%, var(--text));
  letter-spacing: 0; text-transform: none;
}


/* ============================================================
   คลังข้อสอบ (ปี → วิชา → หมวด → เรื่องย่อย)
   เพิ่มเมื่อ 2026-08-08 พร้อมธนาคารข้อสอบชุดใหม่
   ============================================================ */
.browse-crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px 2px; max-width: var(--maxw, 640px); margin: 0 auto;
}
.browse-crumb .bc-item {
  background: none; border: 0; padding: 4px 8px; border-radius: 8px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.browse-crumb .bc-item.on { color: var(--text); background: var(--surface-2); }
.browse-crumb .bc-sep { color: var(--muted); font-size: 12px; }

.browse-body {
  padding: 10px 16px 96px; max-width: var(--maxw, 640px); margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.browse-note {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 12.5px; line-height: 1.75; color: var(--text);
}
.browse-note b { font-weight: 700; }

.browse-count { display: flex; flex-direction: column; gap: 8px; margin-bottom: 2px; }
.browse-count .bcount-label { font-size: 11.5px; font-weight: 700; color: var(--muted); }

.browse-hero {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  width: 100%; border: 0; cursor: pointer; font: inherit;
  padding: 15px 17px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff; box-shadow: var(--shadow-soft);
}
.browse-hero b { font-size: 15px; font-weight: 700; }
.browse-hero span { font-size: 12px; opacity: .9; line-height: 1.6; }

.browse-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; cursor: pointer; font: inherit; color: var(--text);
  box-shadow: var(--shadow-soft);
}
.browse-row:active { transform: scale(.99); }
.browse-row .br-ic {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); font-size: 16px;
}
.browse-row .br-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.browse-row .br-tx b { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.browse-row .br-tx span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.browse-row .br-n {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 3px 8px; border-radius: 999px;
}
.browse-row .br-go { flex: 0 0 auto; color: var(--muted); font-size: 18px; }

/* ============================================================
   ตารางข้อมูลในโจทย์ — วาดเป็น <table> จริง เลื่อนแนวนอนได้บนมือถือ
   ============================================================ */
.qtable { margin: 10px 0 4px; }
.qtable .qt-cap {
  font-size: 12px; font-weight: 700; color: var(--text);
  margin-bottom: 7px; line-height: 1.6;
}
.qtable .qt-cap .qt-unit { font-weight: 600; color: var(--muted); }
.qtable .qt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.qtable table { border-collapse: collapse; width: 100%; min-width: 380px; font-size: 12.5px; }
.qtable th, .qtable td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: right; white-space: nowrap;
}
.qtable th { background: var(--surface-2); font-weight: 700; }
.qtable .qt-first { text-align: left; font-weight: 600; }
.qtable tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

.pass-tx { line-height: 1.95; }

/* ============================================================
   เฉลยแบบมีโครงสร้าง — คำตอบ · วิธีคิดทีละขั้น · ทริค · ทำไมข้ออื่นผิด
   จุดประสงค์: อ่านแล้วรู้ทันทีว่า "ตอบอะไร" "คิดยังไง" "จำอะไรไปใช้ต่อ"
   ============================================================ */
.ex-wrap { display: flex; flex-direction: column; gap: 12px; }
.ex-wrap .ex-b { font-weight: 700; }
.ex-wrap .ex-hl { background: color-mix(in srgb, var(--gold, #f2c94c) 34%, transparent); border-radius: 3px; padding: 0 2px; }

.ex-ans {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--ok-soft, var(--green-light)); border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.ex-ans .ex-ans-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--ok, var(--green)); padding: 3px 8px; border-radius: 999px;
}
.ex-ans .ex-ans-val { font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--text); }
.ex-ans .ex-ans-val b { font-weight: 800; }

.ex-sec { border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); }
.ex-sec .ex-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 8px;
}
.ex-sec .ex-h-ic { font-size: 13px; }

.ex-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.ex-steps li { font-size: 13px; line-height: 1.95; color: var(--text); }
.ex-steps li::marker { color: var(--muted); font-weight: 700; }

.ex-trick { background: color-mix(in srgb, var(--gold, #f2c94c) 15%, var(--card)); border: 1px solid color-mix(in srgb, var(--gold, #f2c94c) 40%, transparent); }
.ex-trick p { margin: 0; font-size: 13px; line-height: 2; color: var(--text); }

.ex-why ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ex-why li { display: flex; gap: 9px; align-items: flex-start; }
.ex-why .ex-why-l {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center; margin-top: 1px;
  border-radius: 6px; background: var(--card); border: 1px solid var(--line);
  font-size: 11px; font-weight: 800; color: var(--muted);
}
.ex-why .ex-why-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-why .ex-why-t b { font-size: 12.5px; font-weight: 700; line-height: 1.65; }
.ex-why .ex-why-t span { font-size: 12px; line-height: 1.85; color: var(--muted); }
.ex-why li.ex-picked .ex-why-l { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.ex-why .ex-you {
  font-size: 10px; font-weight: 800; color: var(--red);
  background: var(--red-bg); padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

.ex-law {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 11.5px; line-height: 1.8; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 9px;
}
.ex-law span {
  font-size: 10px; font-weight: 800; color: var(--text);
  background: var(--surface-2); padding: 2px 7px; border-radius: 999px;
}

.review-card .rc-sub {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); padding: 2px 7px; border-radius: 999px;
}
.review-card .rc-exp { background: transparent; padding: 0; margin-top: 12px; }

/* ============================================================
   แผงคลังข้อสอบบนหน้าแรก — ตัวเลขนับจากข้อมูลจริง
   ============================================================ */
.bank-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 16px 14px; box-shadow: var(--shadow-soft); margin-top: 14px;
}
.bank-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.bank-head .bank-ic {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); color: var(--text);
}
.bank-head .bank-ic svg { width: 18px; height: 18px; }
.bank-h-tx { display: flex; flex-direction: column; gap: 2px; }
.bank-h-tx b { font-size: 14px; font-weight: 700; }
.bank-h-tx .bank-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.bank-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px; margin-bottom: 13px;
}
.bank-cell {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 10px 9px; text-align: center;
}
.bank-cell.pred { background: color-mix(in srgb, var(--gold, #f2c94c) 20%, var(--surface-2)); }
.bank-cell .bk-y { font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1.5; }
.bank-cell .bk-n { font-size: 19px; font-weight: 800; color: var(--text); line-height: 1.35; }
.bank-cell .bk-n i { font-size: 10px; font-weight: 600; font-style: normal; color: var(--muted); margin-left: 3px; }
.bank-cell .bk-mix { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }

.bank-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bank-facts li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12px; line-height: 1.8; color: var(--muted);
}
.bank-facts li b { color: var(--text); font-weight: 700; }
.bank-facts .bk-dot {
  flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px;
}
.bank-facts .bk-dot.ok { background: var(--ok, var(--green)); }
.bank-facts .bk-dot.warn { background: var(--gold, #f2994a); }

/* ทริคและขั้นตอนเฉลยมีการขึ้นบรรทัดใหม่ในข้อความ ต้องคงไว้ให้อ่านเป็นบรรทัด */
.ex-trick p, .ex-steps li, .ex-why .ex-why-t span { white-space: pre-line; }
.ex-wrap .ex-em { font-style: normal; font-weight: 700; color: var(--text); }

/* ============================================================
   สารบัญของ "สิ่งที่ต้องอ่าน" — จัดเป็นบท เห็นภาพรวมทั้งเล่มก่อนลงอ่าน
   ============================================================ */
.study-toc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 15px 11px; box-shadow: var(--shadow-soft); margin-bottom: 6px;
}
.study-toc .stoc-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.study-toc .stoc-h b { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.study-toc .stoc-h span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.study-toc .stoc-list { list-style: none; margin: 0; padding: 0; }
.study-toc .stoc-item {
  display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px dashed var(--line);
  padding: 11px 2px; cursor: pointer; font: inherit; color: var(--text);
}
.study-toc .stoc-list li:last-child .stoc-item { border-bottom: 0; }
.study-toc .stoc-no {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center; margin-top: 1px;
  border-radius: 8px; background: var(--surface-2);
  font-size: 12px; font-weight: 800; color: var(--text);
}
.study-toc .stoc-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.study-toc .stoc-tx b { font-size: 13px; font-weight: 700; line-height: 1.55; }
.study-toc .stoc-tx span { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.study-toc .stoc-n {
  flex: 0 0 auto; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* หัวบทในตัวเล่ม — มีเลขบทและคำนำสั้น ๆ ให้รู้ว่ากำลังจะอ่านอะไร */
.study-group-head .sg-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.study-group-head .sg-ch {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: var(--muted); text-transform: none;
}
.study-group-head .sg-lead {
  font-size: 11.5px; font-weight: 600; line-height: 1.7;
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
}

/* กระดาษทด — ป้ายเลขข้อบนแถบหัว */
.sc-bar { justify-content: flex-start; }
.sc-bar-q {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 4px 10px; border-radius: 999px;
}

/* ============================================================
   ตั้งค่าการเฉลย · สวิตช์ตั้งค่า
   ============================================================ */
.reveal-row { margin-bottom: 12px; }
.reveal-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface-2); border-radius: 14px; padding: 4px;
}
.reveal-seg .rs-thumb {
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  background: var(--card); border-radius: 11px; box-shadow: var(--shadow-soft);
  transition: transform .22s cubic-bezier(.4,.1,.2,1);
}
.reveal-seg .rs-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; background: none; font: inherit; cursor: pointer;
  padding: 10px 6px; font-size: 13px; font-weight: 700; color: var(--muted);
  transition: color .18s;
}
.reveal-seg .rs-opt.active { color: var(--text); }
.reveal-seg .rs-ic { width: 15px; height: 15px; }
.reveal-hint { margin: 8px 4px 0; font-size: 11.5px; line-height: 1.75; color: var(--muted); }

.setting-switch {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; box-shadow: var(--shadow-soft);
  transition: opacity .2s;
}
.setting-switch.is-off { opacity: .5; }
.setting-switch .ss-ico {
  flex: 0 0 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); color: var(--text);
}
.setting-switch .ss-ico svg { width: 16px; height: 16px; }
.setting-switch .ss-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-switch .ss-tx b { font-size: 13px; font-weight: 700; }
.setting-switch .ss-tx span { font-size: 11px; color: var(--muted); line-height: 1.6; }
.switch {
  flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface-2); position: relative; transition: background .2s;
}
.switch .sw-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
}
.switch.on { background: var(--ok, var(--green)); }
.switch.on .sw-knob { transform: translateX(18px); }

/* ============================================================
   ปุ่มมาร์คดาว (ในหน้าทำข้อสอบ และในการ์ดเฉลย)
   ============================================================ */
.bookmark-btn svg { width: 18px; height: 18px; }
.bookmark-btn.on { color: var(--gold, #d4a017); }
.bookmark-btn.on svg { fill: currentColor; }
.review-card .rc-bookmark {
  margin-left: auto; width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.review-card .rc-bookmark svg { width: 14px; height: 14px; }
.review-card .rc-bookmark.on { color: var(--gold, #d4a017); border-color: currentColor; }
.review-card .rc-bookmark.on svg { fill: currentColor; }

/* ============================================================
   หน้าข้อที่มาร์คไว้
   ============================================================ */
.bookmarks-body, .stats-body {
  padding: 8px 16px 96px; max-width: var(--maxw, 640px); margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.bm-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bm-top .bm-count { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: auto; }
.bm-top .bm-count b { font-size: 19px; font-weight: 800; color: var(--text); }
.bm-top .btn { flex: 0 0 auto; padding: 9px 14px; font-size: 12.5px; }
.bm-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bm-group-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 14px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.bm-group-h i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.bm-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.bm-item:first-of-type { border-top: 0; }
.bm-it-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bm-it-tx .bm-tag { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bm-it-tx b { font-size: 12.5px; font-weight: 600; line-height: 1.75; }
.bm-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; font-size: 11px;
}

/* ============================================================
   หน้าสถิติ
   ============================================================ */
.st-hero {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff; border-radius: var(--radius); padding: 18px 18px; box-shadow: var(--shadow-soft);
}
.st-hero .st-hero-n { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.st-hero .st-hero-n i { font-size: 17px; font-style: normal; font-weight: 700; margin-left: 2px; }
.st-hero .st-hero-tx { display: flex; flex-direction: column; gap: 3px; }
.st-hero .st-hero-tx b { font-size: 14px; font-weight: 700; }
.st-hero .st-hero-tx span { font-size: 11.5px; opacity: .9; }

.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.st-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 8px; text-align: center;
}
.st-tile b { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; }
.st-tile span { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.st-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 15px 13px; box-shadow: var(--shadow-soft);
}
.st-card .st-h { font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.st-bar-row { margin-bottom: 13px; }
.st-bar-row:last-child { margin-bottom: 0; }
.st-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.st-bar-top span { font-size: 12.5px; font-weight: 600; }
.st-bar-top b { font-size: 12.5px; font-weight: 800; }
.st-bar-top b.ok { color: var(--ok, var(--green)); }
.st-bar-top b.bad { color: var(--bad, var(--red)); }
.st-bar-top b i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.st-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: visible; }
.st-bar i { display: block; height: 100%; border-radius: 999px; }
.st-bar i.ok { background: var(--ok, var(--green)); }
.st-bar i.bad { background: var(--bad, var(--red)); }
.st-bar .st-goal { position: absolute; top: -3px; width: 2px; height: 14px; border-radius: 2px; background: var(--text); opacity: .45; }

.st-weak { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.st-weak li {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: 12.5px;
}
.st-weak li:last-child { border-bottom: 0; }
.st-weak .stw-n { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.st-weak .stw-p { flex: 0 0 auto; font-weight: 800; }
.st-weak .stw-p.ok { color: var(--ok, var(--green)); }
.st-weak .stw-p.bad { color: var(--bad, var(--red)); }
.st-weak .stw-c { flex: 0 0 46px; text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; }

.st-chart { display: flex; align-items: flex-end; gap: 6px; height: 118px; }
.stc-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.stc-col i { display: block; width: 100%; max-width: 24px; border-radius: 6px 6px 2px 2px; }
.stc-col i.ok { background: var(--ok, var(--green)); }
.stc-col i.bad { background: var(--bad, var(--red)); }
.stc-col b { font-size: 9.5px; font-weight: 700; color: var(--muted); }

.topbar-plain { justify-content: flex-start; }

/* ============================================================
   ไอคอนเส้นสีเดียวแทนอิโมจิ — ขนาดและตำแหน่งให้เข้ากับข้อความ
   ============================================================ */
.btn > svg, .exp-head > svg, .result-section-title > svg, .imp-title > svg,
.ana-h > svg, .bp-title > svg, .bp-note > svg, .ana-toggle > svg,
.check-note > svg, .rc-noans > svg, .wt-cover > svg, .wt-topic > svg,
.wt-tip > svg, .hs-reco > svg, .trend > svg, .sr-cite > svg, .study-trick > svg,
.diff-section-label > svg, .lib-groups-cap > svg, .ck-submit-lbl > svg,
.ana-toggle-hint > svg, .freq-badge > svg, .mm-read-btn > svg, .mm-prac-btn > svg {
  width: 1em; height: 1em; flex: 0 0 auto;
  vertical-align: -0.14em; margin-right: .3em;
}
.timer-chip > svg { width: 13px; height: 13px; vertical-align: -.16em; margin-right: .28em; }
.e-ico > svg { width: 30px; height: 30px; }
.cf-ic > svg, .pause-ico > svg, .ext-emoji > svg, .fl-done-ic > svg { width: 28px; height: 28px; }
.diff-badge > svg { width: 16px; height: 16px; }
.hc-ic > svg, .lib-eye > svg { width: 13px; height: 13px; vertical-align: -.15em; }
.br-ic > svg { width: 17px; height: 17px; }
.ex-h-ic > svg { width: 14px; height: 14px; display: block; }
.bank-facts .bk-dot { flex: 0 0 7px; }

/* ============================================================
   สวิตช์ธีมลอย — เดิมทับหัวข้อของหน้า
   แก้โดย (1) เว้นที่ว่างด้านขวาให้หัวข้อทุกหน้า และ (2) ทำแคปซูลให้เล็กลง
   เมื่อหน้าจอแคบ พร้อมพื้นหลังกระจกให้ตัวหนังสือที่อยู่ใต้ยังอ่านออก
   ============================================================ */
.theme-fab {
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
/* หัวข้อของแต่ละหน้าเว้นที่ให้แคปซูลธีมเสมอ ไม่ให้ตัวอักษรวิ่งไปชน */
.topbar { padding-right: calc(126px + env(safe-area-inset-right, 0px)); }
.topbar .topbar-title, .topbar .topbar-sub { min-width: 0; overflow-wrap: anywhere; }
.home-hero { padding-right: 118px; }
.home-hero .hero-chips { padding-right: 0; }
@media (max-width: 380px) {
  .theme-fab { transform: scale(.88); transform-origin: top right; }
  .topbar { padding-right: calc(110px + env(safe-area-inset-right, 0px)); }
  .home-hero { padding-right: 104px; }
}
/* หน้าที่มีปุ่มของตัวเองอยู่มุมขวาบนอยู่แล้ว (ทำข้อสอบ/กระดาษทด) ไม่ต้องเว้น */
#screen-quiz .topbar, .scratch-overlay .sc-bar { padding-right: 16px; }

/* แถบหัวหน้า: จัดชื่อ+คำอธิบายชิดซ้ายเป็นบล็อกเดียว แล้วกันพื้นที่ขวาให้แคปซูลธีมพอ
   (เดิม .topbar-sub ถูกดัน margin-left:auto ไปชิดขวา จึงไปชนแคปซูลพอดี) */
.topbar { padding-right: calc(150px + env(safe-area-inset-right, 0px)); flex-wrap: wrap; row-gap: 2px; }
.topbar .topbar-sub { margin-left: 0; }
#screen-browse .topbar, .topbar-plain { align-items: baseline; }
#screen-browse .topbar .topbar-sub, .topbar-plain .topbar-sub { flex: 1 1 100%; }
@media (max-width: 380px) {
  .topbar { padding-right: calc(120px + env(safe-area-inset-right, 0px)); }
}
#screen-quiz .topbar, .scratch-overlay .sc-bar { padding-right: 12px; flex-wrap: nowrap; }

/* ============================================================
   หน้าสรุปผลการวิเคราะห์ — จัดใหม่เป็นการ์ดแยกเรื่อง
   ปัญหาเดิม: ยัดสถิติ กราฟ บาร์ ชิป และปุ่ม CTA ไว้ในกล่องเดียว
   ทำให้บนจอแคบชิปล้น ปุ่มยืดสูงผิดสัดส่วน และลำดับสายตาอ่านไม่ออก
   ============================================================ */
#screen-history h2 { padding-right: 132px; }

.hsum {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-soft); margin-bottom: 12px;
}
.hsum-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.hsum-ring {
  flex: 0 0 74px; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ok, var(--green)) calc(var(--p, 0) * 1%), var(--surface-2) 0);
  position: relative;
}
.hsum-ring::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card);
}
.hsum-ring-n {
  position: relative; z-index: 1; font-size: 21px; font-weight: 800; color: var(--text); line-height: 1;
}
.hsum-ring-n i { font-size: 11px; font-style: normal; font-weight: 700; color: var(--muted); }
.hsum-hero-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hsum-hero-tx b { font-size: 14.5px; font-weight: 800; }
.hsum-hero-tx > span { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.hsum-trend { margin-top: 2px; }
.hsum-trend .trend { font-size: 11px; font-weight: 700; }

.hsum-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hsum-tile {
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 11px 6px; text-align: center;
}
.hsum-tile b { display: block; font-size: 18px; font-weight: 800; line-height: 1.4; }
.hsum-tile span { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.hcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 15px 14px; box-shadow: var(--shadow-soft); margin-bottom: 12px;
}
.hcard-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 800; margin-bottom: 12px;
}
.hcard-h i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.hcard .hs-bar { margin-bottom: 12px; }
.hcard .hs-bar:last-child { margin-bottom: 0; }
.hcard .hs-chart { margin: 0; }
.hcard .hs-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.hcard .hs-chip {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.hcard-reco { display: flex; flex-direction: column; gap: 12px; }
.hreco-tx { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.85; color: var(--text); }
.hreco-tx > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; color: var(--muted); }
.hreco-tx b { font-weight: 700; }
.hreco-act .btn { width: 100%; }

.hs-listhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 18px 0 10px;
}
.hs-listhead .hs-section-t { margin: 0; font-size: 13px; font-weight: 800; }

/* ============================================================
   การ์ด "ขอบเขตการสอบ ภาค ก" — หุบ/กางได้ ค่าเริ่มต้นคือหุบ
   ============================================================ */
.scope-card > .scope-head {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
  text-align: left; padding: 0;
}
.scope-card .scope-h-tx { flex: 1 1 auto; min-width: 0; }
.scope-card .scope-chev {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: var(--surface-2); color: var(--muted);
  transition: transform .22s ease;
}
.scope-card .scope-chev svg { width: 14px; height: 14px; }
.scope-card:not(.is-collapsed) .scope-chev { transform: rotate(180deg); }
/* ใช้ display:none ตรง ๆ แทนทริก grid 0fr เพราะ .scope-inner มีลูกหลายตัว
   (ทริกนั้นย่อได้เฉพาะแถวแรก เนื้อหาที่เหลือจะยังค้างอยู่) */
.scope-card .scope-inner { animation: scopeIn .24s ease; }
.scope-card.is-collapsed .scope-inner { display: none; }
.scope-card.is-collapsed { padding-bottom: 14px; }
@keyframes scopeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   ตัวบทฉบับจริง — รายการเอกสาร + ตัวอ่าน PDF ในแอป
   ============================================================ */
.laws-body {
  padding: 8px 16px 96px; max-width: var(--maxw, 640px); margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.laws-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 12px; line-height: 1.8; color: var(--muted);
}
.laws-note > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; }
.laws-note b { color: var(--text); font-weight: 700; }

.law-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; cursor: pointer; font: inherit; color: var(--text); box-shadow: var(--shadow-soft);
}
.law-item:active { transform: scale(.995); }
.law-ic {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); color: var(--text);
}
.law-ic svg { width: 17px; height: 17px; }
.law-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.law-tx b { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.law-tx > span { font-size: 11.5px; color: var(--muted); line-height: 1.75; }
.law-tx .law-cite {
  font-size: 10.5px; font-weight: 600;
  color: color-mix(in srgb, var(--muted) 75%, var(--text));
}
.law-go { flex: 0 0 auto; color: var(--muted); font-size: 18px; margin-top: 6px; }

.laws-missing {
  background: color-mix(in srgb, var(--gold, #f2c94c) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold, #f2c94c) 38%, transparent);
  border-radius: var(--radius); padding: 14px;
}
.laws-missing .lm-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; margin-bottom: 8px; }
.laws-missing .lm-h > svg { width: 15px; height: 15px; }
.laws-missing p { margin: 0 0 9px; font-size: 11.5px; line-height: 1.85; color: var(--muted); }
.laws-missing code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 11px; }
.laws-missing ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.laws-missing li { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.laws-missing li b { font-weight: 700; }
.laws-missing li span { color: var(--muted); overflow-wrap: anywhere; font-size: 10.5px; }

.law-open-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(135deg, var(--hero-from), var(--hero-to));
  color: #fff; border: 0; border-radius: var(--radius);
  padding: 15px; cursor: pointer; font: inherit; margin: 4px 0 12px;
  box-shadow: var(--shadow-soft);
}
.law-open-card .loc-ic { flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: rgba(255,255,255,.18); }
.law-open-card .loc-ic svg { width: 17px; height: 17px; }
.law-open-card .loc-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.law-open-card .loc-tx b { font-size: 14px; font-weight: 700; }
.law-open-card .loc-tx span { font-size: 11.5px; opacity: .92; line-height: 1.6; }
.law-open-card .loc-go { font-size: 20px; opacity: .85; }

#screen-pdf { display: none; }
#screen-pdf.active { display: flex; flex-direction: column; height: 100dvh; }
.pdf-cite {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.pdf-cite .pc-l {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--muted);
  padding: 2px 8px; border-radius: 999px;
}
.pdf-cite .pc-t { font-size: 11.5px; color: var(--text); font-weight: 600; }
.pdf-frame-wrap { flex: 1 1 auto; min-height: 0; background: var(--surface-2); }
#pdf-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   สมดุลหน้าแรก
   ปัญหา: เดิมกันที่ให้แคปซูลธีมด้วย padding-right ที่ .home-hero ทั้งก้อน
   ทำให้ *ทุกอย่าง* ในฮีโร่ (ชิป หัวเรื่อง การ์ดความพร้อม การ์ดอ้างอิง)
   แคบเหลือ 249px ขณะที่การ์ดข้างล่างกว้าง 343px → ขอบขวาเหลื่อมกัน 94px
   และขอบซ้ายก็ไม่ตรงกัน (22px กับ 16px)

   แก้: ให้ฮีโร่ใช้ระยะขอบเท่ากับเนื้อหาข้างล่าง แล้วกันที่ให้แคปซูลเฉพาะ
   "แถวชิป" ซึ่งเป็นแถวเดียวที่อยู่ระดับเดียวกับแคปซูลจริง ๆ
   ============================================================ */
.home-hero { padding-left: 16px; padding-right: 16px; }
/* ต้องกว้างกว่าตัวแคปซูลจริง (118px) + ระยะห่าง มิฉะนั้นบนจอกว้างที่ชิป
   เรียงอยู่บรรทัดเดียว ชิปตัวที่สองจะยื่นไปชนแคปซูล */
.home-hero .hero-chips { padding-right: 128px; }

@media (max-width: 380px) {
  .home-hero { padding-left: 14px; padding-right: 14px; }
  .home-hero .hero-chips { padding-right: 116px; }   /* จอแคบ แคปซูลย่อเหลือ ~104px */
  .home-body { padding-left: 14px; padding-right: 14px; }
}

/* การ์ดความพร้อม: ให้ตัวเลขสรุปอยู่บรรทัดเดียว ไม่หักคำ */
.readiness .rd-stats { flex-wrap: wrap; row-gap: 2px; }
.readiness .rd-stats > span { white-space: nowrap; }

/* แผงตั้งค่าการเฉลยรับ margin 4px ด้านข้างมาจากกฎเดิม ทำให้เยื้องจากการ์ดใบอื่น 4px */
.home-body .reveal-row, .home-body .setting-switch { margin-left: 0; margin-right: 0; }

/* ============================================================
   การ์ดข้อมูลอ้างอิงบนหน้าแรก (ขอบเขตการสอบ · คลังข้อสอบ · ข้อควรรู้)
   หุบได้ทั้งหมด ค่าเริ่มต้นหุบ — หน้าแรกคือหน้าลงมือทำข้อสอบ
   ============================================================ */
.card-chev {
  flex: 0 0 26px; height: 26px; display: grid; place-items: center; margin-left: auto;
  border-radius: 8px; background: var(--surface-2); color: var(--muted);
  transition: transform .22s ease;
}
.card-chev svg { width: 14px; height: 14px; }
.bank-card:not(.is-collapsed) .card-chev { transform: rotate(180deg); }
.card-inner { animation: scopeIn .24s ease; }
.is-collapsed > .card-inner { display: none; }

.bank-card > .bank-head {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; padding: 0;
}
.bank-card.is-collapsed .bank-head { margin-bottom: 0; }

.scope-card, .bank-card { margin-bottom: 10px; }
/* "ข้อควรรู้เกี่ยวกับข้อสอบ ก.พ." ไม่ใช่การ์ดกางในที่เดิมแล้ว — เป็นตัวหนังสือเล็ก
   ที่กดแล้วเด้ง tooltip (.cred-tip-trigger / #cred-tip-pop) สไตล์อยู่ท้ายไฟล์ */

/* ============================================================
   แถบปีบนหน้าแรก — คลี่ออกมาให้กดปีได้ทันที ไม่ต้องเข้าไปอีกชั้น
   ============================================================ */
.year-strip-head { display: flex; flex-direction: column; gap: 2px; margin: 4px 2px 9px; }
.year-strip-head b { font-size: 13.5px; font-weight: 800; }
.year-strip-head span { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.year-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.year-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 6px 11px; cursor: pointer; font: inherit; color: var(--text);
  box-shadow: var(--shadow-soft); transition: transform .12s, border-color .15s;
}
.year-btn:active { transform: scale(.97); }
.year-btn b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.year-btn span { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.year-btn.is-latest { border-color: var(--ok, var(--green)); }
.year-btn .yb-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 9px; font-weight: 800; white-space: nowrap;
  color: #fff; background: var(--ok, var(--green)); padding: 2px 7px; border-radius: 999px;
}
.year-all {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 9px; padding: 11px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text);
}
.year-all svg { width: 15px; height: 15px; color: var(--muted); }

/* ฝึกเฉพาะเรื่อง: บอกด้วยว่ารวมข้อจากปีไหนบ้าง */
.topic-row .topic-name { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.topic-row .topic-meta { font-size: 10px; font-weight: 600; color: var(--muted); }

/* ============================================================
   คลังข้อสอบแยกตามปี — ใส่กรอบการ์ดให้เข้าชุดกับ .menu-card ใบอื่น
   (.menu-card เดิมเป็น flex แนวนอนสำหรับปุ่มบรรทัดเดียว
    ใบนี้มีหลายส่วนซ้อนกัน จึงเปลี่ยนเป็นแนวตั้งและปิดพฤติกรรมปุ่ม)
   ============================================================ */
.menu-card.year-card {
  display: block; cursor: default; text-align: left;
  padding: 14px 14px 13px;
}
.menu-card.year-card:active { transform: none; }
.year-card .year-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.year-card .year-card-head .ico { flex: 0 0 auto; }
.year-card .year-card-head .mc-text { flex: 1 1 auto; min-width: 0; }
.year-card .year-strip { margin: 0; }
.year-card .year-btn { background: var(--surface-2); box-shadow: none; }
.year-card .year-btn.is-latest { background: var(--card); }
.year-card .year-all { margin-top: 10px; background: var(--card); }

/* หัวข้อลอยแบบเดิมไม่ใช้แล้ว (ย้ายเข้าไปอยู่ในการ์ด) */
.year-strip-head { display: none; }

/* ============================================================
   ๑ · ความพร้อมสอบ — ออกแบบใหม่
   เดิมเป็นวงแหวน + ข้อความสองบรรทัด ซึ่งบอกได้แค่ "กี่เปอร์เซ็นต์"
   ใหม่: มีขีดเป้าเกณฑ์ผ่านบนวง บอกว่ายังขาดอีกเท่าไร และมีตัวเลขสรุป 3 ช่อง
   ============================================================ */
.ready-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px 14px; box-shadow: var(--shadow-soft); margin-bottom: 10px;
}
.ready-top { display: flex; align-items: center; gap: 16px; }
.ready-ring { position: relative; flex: 0 0 96px; width: 96px; height: 96px; }
.ready-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); display: block; }
.ready-ring .rr-track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.ready-ring .rr-path {
  fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1), stroke .3s;
}
.ready-ring .rr-goal { fill: none; stroke: var(--text); stroke-width: 11; opacity: .34; }
.ready-card.is-pass .rr-path { stroke: var(--ok, var(--green)); }
.ready-card.is-warn .rr-path { stroke: var(--warn, #d98324); }
.ready-card.is-empty .rr-path { stroke: var(--muted); opacity: .5; }
.ready-ring .rr-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.ready-ring .rr-mid b { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ready-ring .rr-mid b span { font-size: 12px; font-weight: 700; color: var(--muted); }
.ready-ring .rr-mid i {
  font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em;
}
.ready-card.is-pass .rr-mid i { color: var(--ok, var(--green)); }

.ready-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ready-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--muted);
}
.ready-tx b { font-size: 15px; font-weight: 800; line-height: 1.5; }
.ready-hint { font-size: 11px; color: var(--muted); line-height: 1.75; }

.ready-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
}
.ready-meta .rm-item { text-align: center; }
.ready-meta .rm-item b { display: block; font-size: 16px; font-weight: 800; line-height: 1.4; }
.ready-meta .rm-item span { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* ============================================================
   ๒ · ข้อควรรู้ — แยกที่มาของข้อสอบแต่ละปีให้ชัด
   ============================================================ */
.cred-tip-modal .cc-b p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.9; }
.cred-tip-modal .cc-b p:last-child { margin-bottom: 0; }
/* .cc-part/.cc-ref เดิมใช้ var(--card) ตัดกับพื้น var(--brand-soft) ของการ์ดแม่
   ตอนนี้แม่กลายเป็น .modal ซึ่งพื้นก็ var(--card) เหมือนกัน — สลับมาใช้ surface-2
   ให้กล่องย่อยยังตัดกับพื้นได้ ไม่จมหายไปเหมือนสีเดียวกันหมด */
.cred-tip-modal .cc-part, .cred-tip-modal .cc-ref { background: var(--surface-2); }
.cc-split { display: flex; flex-direction: column; gap: 9px; margin: 11px 0; }
.cc-part {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: 10px; padding: 10px 12px;
}
.cc-part .cc-tag {
  display: inline-block; margin-bottom: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--brand); padding: 2px 9px; border-radius: 999px;
}
.cc-part p { margin: 0 !important; font-size: 12px !important; line-height: 1.85 !important; }
.cc-foot {
  font-size: 11.5px !important; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 9px;
}

/* ============================================================
   ๓ · ตั้งค่าการเฉลย — การ์ดหุบได้ ค่าเริ่มต้นหุบ
   ============================================================ */
.set-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-soft); margin-bottom: 10px;
}
.set-card > .set-head {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; padding: 0;
}
.set-card .set-ic {
  flex: 0 0 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-2); color: var(--text);
}
.set-card .set-ic svg { width: 16px; height: 16px; }
.set-card .set-h-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-card .set-h-tx b { font-size: 13.5px; font-weight: 700; }
.set-card .set-h-tx span { font-size: 11px; color: var(--muted); font-weight: 600; }
.set-card:not(.is-collapsed) .card-chev { transform: rotate(180deg); }
.set-card .card-inner { padding-top: 14px; }
.set-card .reveal-row { margin: 0 0 10px; }
.set-card .setting-switch { margin: 0; border: 0; box-shadow: none; background: var(--surface-2); }

/* ============================================================
   ๔ · การ์ดสอบเสมือนจริง — ให้ใช้โทนแบรนด์ ไม่ใช่สีแดงฮาร์ดโค้ด
   ============================================================ */
.menu-card.glow-new {
  border: 1.5px solid color-mix(in srgb, var(--brand) 42%, transparent);
  background: linear-gradient(135deg, var(--brand-soft), var(--card));
}
.menu-card.glow-new .mc-text b { color: var(--brand); }
.menu-card.glow-new .ico {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
}
.menu-card.glow-new .ico svg { color: var(--brand); }
[data-theme="dark"] .menu-card.glow-new {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--card)), var(--card));
}

/* หัวการ์ดที่กดหุบ/กางได้ ต้องสูงพอให้นิ้วกดถนัด (เดิมบางใบสูงแค่ 26px) */
.bank-card > .bank-head,
.scope-card > .scope-head,
.set-card > .set-head { min-height: 44px; }
.browse-crumb .bc-item { min-height: 32px; display: inline-flex; align-items: center; }

/* การ์ดคลังข้อสอบเมื่อย้ายมาอยู่แท็บเกร็ดความรู้ */
.study-top {
  padding: 0 16px; max-width: var(--maxw, 640px); margin: 0 auto 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.study-top .bank-card, .study-top .scope-card { margin-bottom: 0; }

/* ============================================================
   ตัวอ่านตัวบท (PDF) — ต้องเต็มจอจริง
   ปัญหาเดิม: .screen ตัวแม่ไม่ได้สูงเต็มจอ ทำให้ height:100% ของ iframe
   ไม่มีฐานอ้างอิง เบราว์เซอร์เลยใช้ค่า default ของ iframe คือ 150px
   แก้ด้วยการตรึงหน้านี้เป็น fixed เต็มจอ แล้วให้ iframe เป็น flex item
   ============================================================ */
#screen-pdf.active {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  height: 100dvh; max-height: 100dvh; overflow: hidden;
  background: var(--bg);
}
#screen-pdf .topbar {
  flex: 0 0 auto; padding-right: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
}
#screen-pdf .topbar-title {
  font-size: 14px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere;
}
.pdf-frame-wrap { flex: 1 1 auto; min-height: 0; display: flex; position: relative; background: var(--surface-2); }
#pdf-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; display: block; }

/* แถบทางออกใต้แหล่งอ้างอิง — ติดไว้เสมอ เพราะตัวอ่าน PDF ล้มแบบเงียบ ๆ ได้
   (จอเทาเข้มเปล่า ๆ ไม่มี error) ผู้ใช้ต้องมีทางไปต่อโดยไม่ต้องเดา */
.pdf-esc {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--line); background: var(--card);
}
.pdf-esc .pe-q { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pdf-esc .pe-b {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  color: var(--brand-dark, var(--brand)); background: var(--brand-soft);
  border: 1px solid var(--glass-brd); border-radius: 999px; padding: 3px 11px;
  text-decoration: none; line-height: 1.7;
}
.pdf-esc .pe-b:hover { background: var(--card); }

/* ตัวอ่านตัวบท — ข้อความล้วนจากไฟล์จริง เลื่อนอ่านได้ ปรับตามธีม
   ตั้งใจให้อ่านยาว ๆ บนมือถือ: บรรทัดไม่กว้างเกิน ระยะบรรทัดโปร่ง */
.law-read {
  flex: 1 1 auto; min-width: 0; overflow: auto;
  background: var(--bg); -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* pinch (2 นิ้ว) ดักจับเองด้วย JS แล้ว preventDefault */
}
/* ชั้นที่ถูก transform: scale() จริงตอนซูม — สกอลล์ของ .law-read กินพื้นที่ตามขนาดหลัง scale
   เพราะ browser นับ overflow ของ transform ด้วย จึงเลื่อนดูส่วนที่ล้นจากการซูมได้โดยไม่ต้องเขียน pan เอง
   padding ย้ายมาไว้ที่นี่ (แทนที่จะอยู่บน .law-read) ให้ระยะขอบขยายตามซูมไปด้วยเหมือนกล้องซูมจริง */
.law-zoom-stage {
  padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px));
  transform-origin: 0 0; transition: transform .12s ease;
}
.law-read .lr-page { max-width: 44em; margin: 0 auto 22px; }
.law-read .lr-pno {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
}
.law-read p {
  font-size: 14.5px; line-height: 2; color: var(--text);
  margin: 0 0 9px; text-align: left;
}
.law-read .lr-end {
  max-width: 44em; margin: 8px auto 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center;
}
/* สถานะกำลังโหลด / โหลดไม่สำเร็จ */
.law-read .lr-msg {
  max-width: 340px; margin: 48px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--muted);
}
.law-read .lr-msg svg { width: 26px; height: 26px; color: var(--brand); }
.law-read .lr-msg b { font-size: 14.5px; color: var(--text); }
.law-read .lr-msg p { font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* หน้ารายการตัวบท: เผื่อพื้นที่ท้ายหน้าไม่ให้ชนแถบเมนูล่าง */
.laws-body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* คอนทราสต์: ชื่อการ์ด "ข้อสอบเก็ง" บนพื้น brand-soft ได้ 4.2 ยังไม่ถึงเกณฑ์ 4.5
   ใช้โทนเข้มขึ้นอีกขั้นเพื่อให้ผ่าน WCAG AA */
.menu-card.glow-new .mc-text b { color: var(--brand-dark, var(--brand)); }

/* ============================================================
   ชั้นที่ 4: จัดระเบียบระบบดีไซน์ (typography · สี · ระยะ · พื้นที่กดนิ้ว)
   ------------------------------------------------------------
   ไฟล์นี้โตมาจากการรวมสองชุดสไตล์เข้าด้วยกัน ทำให้เกิดของกระจัดกระจาย 3 อย่าง
     1) ขนาดตัวอักษร 37 ค่าที่ต่างกัน (9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 12.8 …)
        ซึ่งไม่ใช่ "สเกล" แต่เป็นค่าที่ค่อย ๆ ใส่เพิ่มทีละจุด และเล็กเกินอ่านสำหรับภาษาไทย
        (ไทยมีสระบน-ล่างและวรรณยุกต์ ต้องการขนาดมากกว่าอังกฤษที่ px เท่ากัน)
     2) สีฮาร์ดโค้ดที่ไม่ผูกกับ token — พอสลับโหมดมืด/โหมดอ่านแล้วไม่เปลี่ยนตาม
        บางจุดกลายเป็น "ตัวหนังสือขาวบนพื้นขาว" คือหายไปเลย
     3) สีเทาอมฟ้าชุดเดิม (#eef1f4 #f4f7f5 #cfd4da) ที่ตีกับพื้นครีมอุ่นของธีมปัจจุบัน

   ชั้นนี้จึงประกาศ "สเกล" ให้เป็นทางการ แล้วแก้เฉพาะจุดที่หลุดออกนอกสเกลจริง ๆ
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source โดยไม่ต้องไปรื้อ 4,000 บรรทัดข้างบน
   ============================================================ */
:root {
  /* ---- สเกลตัวอักษร ----
     พื้นล่างอยู่ที่ 11px สำหรับ "ป้ายสั้น ๆ" และ 12px สำหรับ "ข้อความที่เป็นประโยค"
     เพราะภาษาไทยที่เล็กกว่านี้สระกับวรรณยุกต์จะเริ่มติดกันจนอ่านยาก */
  --fs-micro: 11px;    /* ป้าย/แท็กสั้น ๆ คำเดียว */
  --fs-tiny:  12px;    /* คำอธิบายใต้หัวข้อ */
  --fs-sm:    13px;    /* ข้อความรอง */
  --fs-body:  14px;    /* เนื้อความทั่วไป */
  --fs-md:    15px;    /* ปุ่ม/ชื่อรายการ */
  --fs-lg:    17px;    /* โจทย์ข้อสอบ */
  --fs-xl:    20px;    /* หัวข้อหน้าจอ */
  --fs-hero:  25px;    /* หัวเรื่องหน้าแรก */

  /* ---- ความโค้งมุม ---- */
  --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;

  /* ---- ระยะการ์ด (ให้ทุกใบบนหน้าแรกใช้ค่าเดียวกัน) ---- */
  --card-pad: 15px;
  --card-gap: 10px;

  /* ---- พื้นที่กดขั้นต่ำ (Apple HIG / Material = 44px) ---- */
  --tap: 44px;

  /* ---- โทน "ข้อสอบเก็ง" (ม่วง) ให้เป็น token จะได้เปลี่ยนตามธีมได้ ---- */
  --pred: #6d28d9; --pred-soft: #efe7ff; --pred-line: #d9c8ff;

  /* ---- โทน "หมึกบนพื้นจาง" ----
     --ok / --bad / --warn ถูกจูนมาให้อ่านออกบนพื้นการ์ดสีขาว-ครีม
     แต่เวลาเอาไปวางบนพื้นจางของตัวเอง (--ok บน --ok-soft) พื้นจะสว่างน้อยลง
     คอนทราสต์เลยตกลงมาเหลือ 4.1–4.44 คือเฉียดเกณฑ์ AA (4.5) แต่ไม่ผ่าน
     จึงแยก token "หมึก" ที่เข้มขึ้นอีกขั้นไว้ใช้เฉพาะกรณีนี้
     โหมดมืดพื้นเป็นสีเข้ม ตัวอักษรต้องสว่างขึ้นแทน จึงผสมกับขาว */
  --ok-ink:    color-mix(in srgb, var(--ok) 86%, #000);
  --bad-ink:   color-mix(in srgb, var(--bad) 86%, #000);
  --warn-ink:  color-mix(in srgb, var(--warn) 86%, #000);
  --muted-ink: color-mix(in srgb, var(--muted) 84%, #000);
}
[data-theme="dark"] {
  --pred: #c4b5fd; --pred-soft: #241b3d; --pred-line: #4c3d7a;
  --ok-ink: var(--ok); --bad-ink: var(--bad); --warn-ink: var(--warn); --muted-ink: var(--muted);
}
[data-theme="reading"] {
  --pred: #5b21b6; --pred-soft: #e9e0f5; --pred-line: #cbb8e8;
  /* โหมดอ่านตั้ง --muted ไว้ที่ #7d6f56 ซึ่งบนพื้นครีมอ่อนของธีมนี้ได้แค่ 4.1–4.35
     ข้อความรองทั้งธีม (คำอธิบายใต้หัวข้อ ป้ายตัวเลข ข้อความตอนยังไม่มีข้อมูล)
     จึงไม่ผ่านเกณฑ์พร้อมกันหมด — แก้ที่ token ตัวเดียวจบทั้งธีม */
  --muted: #6b5e46;
  --ok-ink:    color-mix(in srgb, var(--ok) 82%, #000);
  --bad-ink:   color-mix(in srgb, var(--bad) 82%, #000);
  --warn-ink:  color-mix(in srgb, var(--warn) 82%, #000);
  --muted-ink: color-mix(in srgb, var(--muted) 84%, #000);
}

/* ------------------------------------------------------------
   1 · บั๊กจริง: หน้า "ทบทวนเฉลย" เลื่อนออกด้านข้างได้
   ------------------------------------------------------------
   .review-body เป็น grid คอลัมน์เดียว และลูก (grid item) มีค่าเริ่มต้น
   min-width:auto = "ห้ามแคบกว่าเนื้อหาขั้นต่ำของตัวเอง"
   ปัญหาคือ **ภาษาไทยไม่เว้นวรรคระหว่างคำ** เบราว์เซอร์จึงมองทั้งประโยคเป็นคำเดียว
   → min-content ของย่อหน้าไทย = ความกว้างของทั้งประโยคที่ไม่ตัดบรรทัด
   → track ถูกดันจาก 343px เป็น 415px การ์ดทุกใบล้นกรอบแอปออกไป 72px
   แก้ด้วย minmax(0,1fr) + min-width:0 เพื่อบอกว่า "หดได้ ตัดบรรทัดเอา"
   ------------------------------------------------------------ */
.review-body { grid-template-columns: minmax(0, 1fr); }
.review-body > .review-card { min-width: 0; }
.review-card .rc-top,
.review-card .rc-q,
.review-card .rc-choices,
.review-card .rc-choice,
.review-card .rc-exp { min-width: 0; }
.review-card .rc-c-text { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   2 · พื้นที่กดนิ้ว — ปุ่มกลมเล็ก ๆ เดิมกว้าง 26–38px กดพลาดง่าย
   ขยาย "พื้นที่รับสัมผัส" ด้วย ::after โปร่งใส หน้าตาปุ่มคงเดิมทุกประการ
   ------------------------------------------------------------ */
.rc-bookmark, .q-tool, .hint-btn, .icon-btn, .round-btn, .sn-tool, .switch { position: relative; }
.rc-bookmark::after, .q-tool::after, .hint-btn::after,
.icon-btn::after, .round-btn::after, .sn-tool::after, .switch::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tap); height: var(--tap); transform: translate(-50%, -50%);
}
/* ปุ่มกรองในหน้าทบทวน/สถิติ สูง 37px → ดันให้ครบ 44 ด้วย padding */
.chip-btn { padding: 10px 14px; }
.hist-clear { padding: 10px 14px; }

/* ------------------------------------------------------------
   3 · พื้นล่างขนาดตัวอักษร — ไล่เก็บทุกจุดที่เล็กกว่า 11px
   (ของเดิมมีถึง 9px ซึ่งบนมือถือจริงแทบอ่านสระไม่ออก)
   ------------------------------------------------------------ */
.year-btn .yb-tag, .year-btn span { font-size: var(--fs-micro); }
.ready-ring .rr-mid i { font-size: var(--fs-micro); }
.cc-part .cc-tag, .ext-badge,
.bk-mix, .bk-y, .sdhc-topic, .pbp-cap { font-size: var(--fs-micro); }
.ready-eyebrow, .ready-meta .rm-item span,
.review-card .rc-sub, .rc-tag, .sd-rc-tag { font-size: var(--fs-micro); }
.ex-ans .ex-ans-tag { font-size: var(--fs-micro); }

/* ข้อความที่เป็น "ประโยค" ต้องใหญ่กว่าป้าย — 12px ขึ้นไป และเพิ่มระยะบรรทัด
   ให้สระบน-ล่างของไทยไม่ชนกันระหว่างบรรทัด */
.ready-hint, .reveal-hint, .cc-foot, .cc-ref-tx, .cc-ref-domain,
.section-label .sl-sub, .setting-switch .ss-tx span,
.set-card .set-h-tx span, .topic-row .topic-meta {
  font-size: var(--fs-tiny); line-height: 1.75;
}
.cred-tip-modal .cc-b p { font-size: var(--fs-sm); line-height: 1.85; }
.cc-part p { font-size: var(--fs-tiny) !important; line-height: 1.8 !important; }

/* หน้าสถิติ / วิเคราะห์ผล / เกร็ดความรู้ — ป้ายกำกับตัวเลขยังเหลือ 9.5–10.5px */
.hsum-tile span, .st-tile span,
.hcard-h i, .st-bar-top b i,
.hs-chart .hsc-col span, .st-chart .stc-col b,
.bank-cell .bk-y, .bank-cell .bk-n i, .bank-cell .bk-mix,
.scope-sec-h .scope-sec-n, .stoc-item .stoc-n,
.study-group-head .sg-ch { font-size: var(--fs-micro); }

/* ------------------------------------------------------------
   4 · รูปทรงการ์ดบนหน้าแรก — เดิมความโค้ง 16/18 และ padding 14/15/16/18 ปนกัน
   มองเผิน ๆ เหมือนการ์ดคนละชุด ทั้งที่อยู่เรียงต่อกันในหน้าเดียว
   ------------------------------------------------------------ */
.ready-card, .set-card, .menu-card, .scope-card, .bank-card {
  border-radius: var(--r-lg);
  padding: var(--card-pad);
  margin-bottom: var(--card-gap);
}
.ready-card { padding: 18px var(--card-pad) 14px; }
.menu-card.year-card { padding: var(--card-pad); }
/* หัวข้อคั่นหมวด: เว้นบนให้เท่ากันทุกอัน */
.section-label { margin: 22px 4px 10px; }
.section-label:first-child { margin-top: 6px; }

/* ------------------------------------------------------------
   5 · สีที่ไม่ผูก token — จุดที่ "หายไป" ในโหมดมืด
   วัดจริงด้วยการคำนวณคอนทราสต์บนหน้าจอ ค่าที่ได้ก่อนแก้อยู่ในวงเล็บ
   ------------------------------------------------------------ */
.ana-bar { background: var(--surface-2); }                       /* 1.04 : ขาวบนขาว */
.imp-d.same { color: var(--muted-ink); background: var(--surface-2); }/* 2.55 */
.imp-overall { border: 1px dashed var(--line); color: var(--text); background: var(--brand-soft); }/* 1.44 */
.sc-viewport {
  background-color: var(--surface-2);                            /* 1.04 */
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
.pc-dot.done { background: var(--brand-soft); border-color: var(--brand-2); }/* 1.10 */
.wc-go { background: var(--surface-2); color: var(--muted-ink); }     /* 1.49 : ขาวบนเทาอ่อน */
.wc-go.ready { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; }
.ck-cell.done { background: var(--brand-soft); color: var(--brand-dark); border: 2px solid var(--brand-2); }/* 4.14 */
.ck-cell.cur { outline-color: var(--brand); }
.cd-unit { color: var(--muted-ink); }                                /* 3.96 */
.cd-done { color: var(--bad); }                                  /* 3.94 */
.timer-chip.pressure, #timer.pressure { color: var(--bad); }     /* 2.92 */
.nc-trick-ico { color: var(--warn-ink); }                            /* 3.79 */
.sd-header h3 { color: var(--bad); }
.sd-stat .v, .sd-remain b { color: var(--warn-ink); }
.sd-request-btn:disabled { background: var(--surface-2); color: var(--muted-ink); }
.btn-ghost:hover { background: var(--surface-2); }
.modal-close:hover { background: var(--surface-2); }
.result-table td.num, .result-table .subj-name { color: var(--text); }

/* ดวลเดือด: ตัวเลือกถูก/ผิด เดิมพื้นเขียว-แดงอ่อนคงที่ ตัวอักษรใช้สีตามธีม
   โหมดมืดจึงเป็นตัวหนังสือเกือบขาวบนพื้นเกือบขาว (1.07 / 1.08) */
.sd-choices .sd-choice.correct { background: var(--ok-soft); border-color: var(--ok); color: var(--text); }
.sd-choices .sd-choice.wrong   { background: var(--bad-soft); border-color: var(--bad); color: var(--text); }
.sd-verdict.pass { background: var(--ok-soft); color: var(--ok-ink); }
.sd-verdict.fail { background: var(--bad-soft); color: var(--bad-ink); }
.sd-rc-choice.correct { background: var(--ok-soft); border-color: var(--ok); }
.sd-rc-choice.wrong { background: var(--bad-soft); border-color: var(--bad); }
.sd-rc-tag.ok { background: var(--ok); }
.sd-rc-tag.you { background: var(--bad); }

/* การ์ดพื้นไล่เฉดสีขาว — ในโหมดมืดกลายเป็นการ์ดขาวสว่างจ้ากลางหน้าจอดำ
   และตัวอักษร (สีตามธีม = เกือบขาว) จมหายไปกับพื้น */
.menu-card.highlight {
  border-color: var(--pred-line);
  background: linear-gradient(180deg, var(--pred-soft), var(--card));
}
.menu-card.highlight .ico { background: var(--pred-soft); color: var(--pred); }
.donate-card { background: linear-gradient(180deg, var(--bad-soft), var(--card)); border-color: var(--bad-soft); }
.donate-card .ico { background: var(--bad-soft); color: var(--bad); }
.donate-card .mc-text b { color: var(--bad-ink); }
.btn-donate { background: var(--bad-soft); color: var(--bad-ink); }
.btn-donate:hover { background: var(--bad-soft); filter: brightness(.97); }

/* โทนม่วง "ข้อสอบเก็ง" — เดิม #7b61ff บนพื้น #efe7ff ได้ 3.5 ไม่ผ่าน AA
   และในโหมดมืดพื้นยังขาวอยู่ */
.year-chip.predicted, .review-card .rc-year.predicted,
.freq-badge.pred { color: var(--pred); background: var(--pred-soft); border-color: var(--pred-line); }
.diff-advanced .diff-name { color: var(--pred); }
.sn-tab-b { --snt: var(--pred); }
.nc[data-part="b"] { --nc: var(--pred); }

/* ป้ายปีในหน้าทบทวน — 3.31 ทุกธีม */
.year-chip, .review-card .rc-year { background: var(--warn-soft); color: var(--warn-ink); }
.freq-badge { color: var(--warn-ink); background: var(--warn-soft); border-color: var(--line); }
/* ดาวบอกความถี่ที่ออกสอบ — --brand-2 เป็นเหลืองทองสด บนพื้น warm-soft ได้แค่ 2.6
   จึงหรี่ลงให้อ่านออก แต่ยังต่างจากตัวหนังสือข้าง ๆ พอให้เห็นว่าเป็นดาว
   (โหมดมืดไม่ต้องหรี่ เพราะสีสดบนพื้นเข้มคอนทราสต์สูงอยู่แล้ว)
   72% ยังได้แค่ 3.62 — ดาวเป็นตัวอักษรจริง ไม่ใช่ไอคอนตกแต่ง จึงต้องถึง 4.5
   หรี่เป็น 55% ได้ ~5.5 ทั้งโหมดสว่างและโหมดอ่าน */
.freq-badge .stars { color: color-mix(in srgb, var(--brand-2) 55%, #000); }
[data-theme="dark"] .freq-badge .stars { color: var(--brand-2); }
.freq-badge.skill { color: color-mix(in srgb, var(--info) 88%, #000); background: var(--info-soft); border-color: var(--info-soft); }

/* ตัวอักษรประจำตัวเลือกในหน้าทบทวน — 3.30 */
.review-card .rc-choice .rc-c-letter { background: var(--surface-2); color: var(--text); }
.review-card .rc-choice.correct .rc-c-letter { background: var(--ok); color: #fff; }
.review-card .rc-choice.wrong .rc-c-letter { background: var(--bad); color: #fff; }
.ex-why .ex-why-l { background: var(--surface-2); color: var(--text); }
.ex-why li.ex-picked .ex-why-l { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-ink); }
.review-card .rc-sub { color: var(--muted-ink); }

/* ช่อง "ข้อสอบเก็ง" ในตารางคลัง มีพื้นทองจาง ทำให้ข้อความรอง (--muted) เหลือ 3.56–4.40
   โหมดมืดพื้นช่องนี้สว่างกว่าพื้นปกติ จึงต้องใช้สีตัวอักษรหลักไปเลย */
.bank-cell.pred .bk-y,
.bank-cell.pred .bk-n i,
.bank-cell.pred .bk-mix { color: var(--muted-ink); }
[data-theme="dark"] .bank-cell.pred .bk-y,
[data-theme="dark"] .bank-cell.pred .bk-n i,
[data-theme="dark"] .bank-cell.pred .bk-mix { color: var(--text); }
.special-score-card .ss-pass.pass { background: var(--ok-soft); color: var(--ok-ink); }
.special-score-card .ss-pass.fail { background: var(--bad-soft); color: var(--bad-ink); }

/* ชิปเวลาบนหัวข้อสอบ: ทองบนพื้นเหลืองอ่อนได้ 4.29 — ใช้ทองเข้มขึ้นอีกขั้น */
.timer-chip { color: var(--brand-dark); }
[data-theme="dark"] .timer-chip { color: var(--brand); }

/* ป้ายผ่าน/ไม่ผ่านในประวัติ และปุ่มล้างประวัติ — 4.44 */
.history-card .h-badge.pass { background: var(--ok-soft); color: var(--ok-ink); }
.history-card .h-badge.fail { background: var(--bad-soft); color: var(--bad-ink); }
.hist-clear { background: var(--bad-soft); color: var(--bad-ink); border-color: var(--bad); }
.hist-clear:hover { background: var(--bad); color: #fff; border-color: var(--bad); }

/* กล่องเกณฑ์ผ่านในแผงขอบเขตการสอบ — ตัวหนาบนพื้นจางได้ 4.21 */
.scope-pass b { color: var(--ok-ink); }
.scope-pass-en b { color: var(--warn-ink); }

/* หมวดสีของ "เกร็ดความรู้" ให้ผูก token จะได้สลับธีมตาม */
.study-group-head.sg-intro { color: var(--info); border-color: var(--info-soft); }
.study-group-head.sg-civil { color: var(--pred); border-color: var(--pred-line); }
.diff-basic .diff-name { color: var(--ok); }
.diff-medium .diff-name { color: var(--info); }

/* ------------------------------------------------------------
   6 · เทาอมฟ้าชุดเดิมที่ตีกับพื้นครีมอุ่น — เปลี่ยนมาใช้เทาอุ่นของธีม
   ------------------------------------------------------------ */
.progress-track, .diff-card, .sd-question, .sd-la-choice, .sdhc-choice,
.sdh-count, .sdhc-topic, .wt-cover, .study-ref { background: var(--surface-2); }
.sd-la-toggle:hover, .sdh-toggle:hover, .analysis-toggle:hover, #scratch-open:hover { background: var(--surface-2); }
@media (min-width: 540px) {
  /* พื้นนอกกรอบแอปบนจอใหญ่ เดิมเป็นเทาอมฟ้า #dbe2e8 ตัดกับกรอบครีมชัดเกินไป */
  body { background: #e6e0d2; }
  [data-theme="dark"] body { background: #0a0906; }
  [data-theme="reading"] body { background: #e6d8bd; }
}

/* ------------------------------------------------------------
   7 · คอนทราสต์บนหน้าแรก — ทองเข้ม #9a6700 บนพื้นเหลืองอ่อนได้ 4.2–4.29
   ขยับไปใช้ --brand-dark ให้ผ่าน 4.5
   ------------------------------------------------------------ */
.hchip { color: var(--brand-dark); }
.chip-btn.active { color: var(--brand-dark); }
.ana-toggle-hint { color: var(--brand-dark); }
.nav-btn.active { color: var(--brand-dark); }   /* แท็บที่เลือกอยู่ วัดได้ 4.29 */
[data-theme="dark"] .hchip,
[data-theme="dark"] .chip-btn.active,
[data-theme="dark"] .ana-toggle-hint,
[data-theme="dark"] .nav-btn.active { color: var(--brand); }

/* ------------------------------------------------------------
   7.5 · แถบเมนูล่าง — ป้ายภาษาไทยโดนตัดท้ายด้วย …
   ------------------------------------------------------------
   ป้ายยาว ๆ อย่าง "เกร็ดความรู้" / "วิเคราะห์ผล" / "ข้อที่ผิดบ่อย" กว้าง ~55px
   แต่ที่ว่างต่อช่องเหลือแค่ ~44px จึงโดนตัดเป็น "เกร็ดคว…" อ่านไม่รู้เรื่อง
   (เป็นมาก่อนแล้ว ไม่ได้เกิดจากการเปลี่ยนชื่อแท็บ — "วิเคราะห์ผล" ก็โดนตัดอยู่เดิม)

   ไม่ลดขนาดตัวอักษรต่ำกว่าพื้นล่าง 11px แต่ไปเอาที่ว่างคืนจากขอบนอก ช่องไฟ
   และระยะในปุ่ม ซึ่งเดิมกินไปรวม ~50px โดยไม่ได้ให้ประโยชน์อะไร
   ครอบถึง 430px เพื่อให้กรณี 6 แท็บ (ปลดล็อก "ข้อที่ผิดบ่อย" แล้ว) พอดีด้วย
   ------------------------------------------------------------ */
@media (max-width: 430px) {
  .bottom-nav { width: calc(100% - 10px); padding: 4px 3px; gap: 1px; }
  .nav-btn { padding: 8px 1px; }
  /* บีบช่องไฟตัวอักษรอีกนิด — ที่ 11px แทบมองไม่ออก แต่ได้คืนมา ~1px ต่อป้าย
     ซึ่งพอดีกับที่ยังขาดอยู่ตอนมี 6 แท็บบนจอ 360px */
  .nav-btn > span:last-child { letter-spacing: -.02em; }
  .nav-badge { right: 8%; }
}

/* ------------------------------------------------------------
   8 · ตัวอักษรบนพื้นสีเน้น (accent) ในโหมดมืด
   ------------------------------------------------------------
   ทั้งแอปใช้สูตร "พื้น = สีเน้น, ตัวอักษร = ขาว" อยู่ราว 40 จุด
   ซึ่งถูกต้องในโหมดสว่าง/โหมดอ่าน เพราะ --brand --ok --warn เป็นโทนเข้ม

   แต่โหมดมืดกลับด้าน: --brand เป็น #f4bf3f (ทองสว่าง) --ok เป็น #4ade80
   (เขียวสว่าง) --warn เป็น #fbbf24 — ขาวบนสีพวกนี้เหลือคอนทราสต์ 1.7–2.6
   คือแทบอ่านไม่ออก ป้าย "ชุดจริงล่าสุด" กับ "วิชา ①" วัดได้ 1.74 / 1.70

   แก้ที่เดียวด้วยการสลับ "หมึกบนสีเน้น" เป็นสีพื้นหลังเข้มของธีมแทนสีขาว
   (เฉพาะโหมดมืด — โหมดอื่นไม่แตะ) */
[data-theme="dark"] {
  --on-accent: #17140d;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .scope-pick button.active,
[data-theme="dark"] .subj-pick button.checked,
[data-theme="dark"] .round-btn:hover:not(:disabled),
[data-theme="dark"] .choice.selected .letter,
[data-theme="dark"] .choice.correct .letter,
[data-theme="dark"] .choice.wrong .letter,
[data-theme="dark"] .choice.selected .lab,
[data-theme="dark"] .choice.correct .lab,
[data-theme="dark"] .choice.wrong .lab,
[data-theme="dark"] .seg-btn.active,
[data-theme="dark"] .bank-read:hover,
[data-theme="dark"] .study-tts.speaking,
[data-theme="dark"] .study-back,
[data-theme="dark"] .dn-amt.active,
[data-theme="dark"] .pause-btn,
[data-theme="dark"] .rb-ico,
[data-theme="dark"] .btn-submit-early,
[data-theme="dark"] .result-head,
[data-theme="dark"] .rc-tag.ok,
[data-theme="dark"] .rc-tag.you,
[data-theme="dark"] .sd-rc-tag.ok,
[data-theme="dark"] .sd-rc-tag.you,
[data-theme="dark"] .nav-badge,
[data-theme="dark"] .pw-ico,
[data-theme="dark"] .pw-feat-ico,
[data-theme="dark"] .bk-emblem,
[data-theme="dark"] .bk-chip,
[data-theme="dark"] .fl-got,
[data-theme="dark"] .ex-ans .ex-ans-tag,
[data-theme="dark"] .year-btn .yb-tag,
[data-theme="dark"] .cc-part .cc-tag,
[data-theme="dark"] .scope-badge,
[data-theme="dark"] .q-num-badge,
[data-theme="dark"] .wc-go.ready,
[data-theme="dark"] .hist-clear:hover,
[data-theme="dark"] .review-card .rc-choice.correct .rc-c-letter,
[data-theme="dark"] .review-card .rc-choice.wrong .rc-c-letter,
[data-theme="dark"] .review-card .rc-status.ok,
[data-theme="dark"] .review-card .rc-status.no { color: var(--on-accent); }
/* ไอคอน SVG ข้างในก็ต้องเปลี่ยนตาม ไม่งั้นเส้นขาวจะยังจมอยู่ */
[data-theme="dark"] .pause-btn svg,
[data-theme="dark"] .rb-ico svg,
[data-theme="dark"] .bk-emblem svg,
[data-theme="dark"] .btn-primary svg { color: var(--on-accent); }
/* ข้อยกเว้น: ป้ายวิชา ๒/๓ ใช้พื้นเขียวหัวเป็ด/ส้มอิฐที่เป็นสีเข้มคงที่ทุกธีม
   จึงยังต้องเป็นตัวหนังสือขาวเหมือนเดิม (ถ้าใส่หมึกเข้มจะเหลือ 3.4) */
[data-theme="dark"] .scope-2 .scope-badge,
[data-theme="dark"] .scope-3 .scope-badge { color: #fff; }

/* ------------------------------------------------------------
   9 · โมดัลที่เปิดอยู่ต้องไม่ประกาศ aria-hidden="true"
   (เครื่องอ่านหน้าจอจะข้ามทั้งกล่อง ทั้งที่ผู้ใช้กำลังมองเห็นอยู่)
   CSS ทำแทนไม่ได้ จึงแก้ที่ app.js — บล็อกนี้ไว้กันสไตล์ตกหล่นเท่านั้น
   ------------------------------------------------------------ */
.modal-overlay[aria-hidden="false"] { display: flex; }

/* ============================================================
   ชั้นที่ 5 — ปุ่มมุมการ์ดโจทย์ + tooltip ลอย
   เจตนา: เลิกใช้บล็อกที่ "ดันของอื่นลง" เวลากดดูคำอธิบายสั้น ๆ
   ทุกอย่างในบล็อกนี้ลอยทับ ไม่กินพื้นที่แนวตั้งของหน้า
   ============================================================ */

/* ทริคอยู่มุมขวาล่างของการ์ด · กระดาษทดอยู่มุมซ้ายล่าง (ตรงข้ามกัน)
   .question-text มี padding-bottom 56px เผื่อที่ให้สองปุ่มนี้อยู่แล้ว

   ต้องเจาะจงถึง .qwrap ด้วย ไม่ใช่แค่ .hint-btn/.scratch-btn เฉย ๆ เพราะ:
     · #scratch-open เป็นตัวเลือกแบบ id (1,0,0) ชนะคลาสเดี่ยวทุกกรณี
       ของเดิมเป็นปุ่มแคปซูลมีข้อความในแถวคำสั่ง จึงตั้ง display/width/height ไว้คนละแบบ
     · ชั้นที่ 4 ตั้ง .hint-btn { position: relative } ไว้เพื่อทำพื้นที่รับสัมผัส
       ซึ่งลบล้าง position: absolute ของชั้นที่ 1 ไปเงียบ ๆ */
.qwrap .hint-btn { position: absolute; left: auto; right: 10px; bottom: 10px; width: 38px; height: 38px; }
/* ปุ่มมาร์คดาว มุมขวาบนของการ์ด — ต้องเจาะจง .qwrap เพราะชั้นที่ 4 ตั้ง
   .round-btn { position: relative } ไว้ทำพื้นที่รับสัมผัส ซึ่งจะลบล้าง absolute */
.qwrap .bookmark-btn { position: absolute; top: 12px; right: 10px; bottom: auto; left: auto; width: 38px; height: 38px; }
/* เผื่อที่ด้านขวาให้ครบ 38+10 ไม่ให้ตัวโจทย์ลอดใต้ปุ่ม (เดิมเผื่อไว้ 46px) */
.qwrap .question-text { padding-right: 56px; }
/* tooltip ของปุ่มมุมบนต้องลอยลงล่าง ไม่ใช่ขึ้นบน ไม่งั้นจะโดนขอบการ์ดบังหมด */
.qwrap .bookmark-btn::before { bottom: auto; top: calc(100% + 9px); }
.qwrap #scratch-open {
  position: absolute; left: 10px; right: auto; bottom: 10px;
  width: 38px; height: 38px; min-width: 0; padding: 0; gap: 0;
  border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; z-index: 3;
  color: var(--brand-dark, var(--brand));
  background: var(--brand-soft); border: 1.5px solid var(--brand);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .12s, background .15s, color .15s;
}
.qwrap #scratch-open svg { width: 17px; height: 17px; display: block; }
.qwrap #scratch-open:hover { background: var(--card); }
.qwrap #scratch-open:active { transform: scale(.9); }

/* ทริคของข้อ — ลอยขึ้นมาจากปุ่ม ไม่ดันตัวเลือกลงอีกต่อไป
   จำกัดความกว้างและให้ scroll ในตัวเอง เผื่อทริคยาว */
.hint-pop {
  position: absolute; right: 6px; bottom: 52px; left: 6px; top: auto;
  max-width: none; width: auto; max-height: 44vh; overflow-y: auto;
  z-index: 9; pointer-events: auto;
  opacity: 0; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.hint-pop:not(.show) { display: none; }
.hint-pop.show { opacity: 1; transform: translateY(0); }

/* tooltip ลอยแบบใช้ซ้ำได้: ใส่ data-tip ที่ปุ่มไหนก็ได้
   แสดงตอน hover (เมาส์) และตอนโฟกัสด้วยคีย์บอร์ด */
/* หมายเหตุ: ตรงนี้ *ห้าม* ตั้ง [data-tip] { position: relative }
   เพราะจะไปลบล้าง position: absolute ของปุ่มมุมการ์ด (specificity เท่ากันแต่มาหลังกว่า)
   ปุ่มที่ใช้ data-tip ต้องเป็น element ที่ positioned อยู่แล้วเท่านั้น
   (ปุ่มมุมการ์ด = absolute · ปุ่มตั้งค่า = fixed · .tip-chip ตั้ง relative ไว้ให้เอง) */
[data-tip]::before {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translate(-50%, 4px);
  width: max-content; max-width: 15rem; padding: 7px 11px;
  font-size: 11.5px; font-weight: 600; line-height: 1.65; text-align: center;
  color: var(--on-accent, #fff); background: rgba(24,20,14,.94);
  border-radius: 10px; box-shadow: 0 8px 22px -8px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; z-index: 40;
  transition: opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
/* ปุ่มที่ใช้ ::after เป็นพื้นที่รับสัมผัสอยู่แล้ว จึงใช้ ::before ทำ tooltip
   เพื่อไม่ไปทับกลไกขยายพื้นที่กดของชั้นที่ 4 */
@media (hover: none) { [data-tip]::before { display: none; } }  /* จอสัมผัส: ไม่มี hover จริง อย่าให้ค้าง */

/* ชิปเล็กแทนปุ่มเต็มความกว้าง (ใช้กับ "ทริคเสริม" ในหน้าวิเคราะห์ผล) */
.tip-chip {
  position: relative;                     /* จุดเกาะของ tooltip [data-tip]::before */
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; font: inherit;
  font-size: 12.5px; font-weight: 700; line-height: 1.6;
  color: var(--brand-dark, var(--brand));
  background: var(--brand-soft); border: 1px solid var(--brand);
}
.tip-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tip-chip:hover { background: var(--card); }
.tip-chip:active { transform: scale(.97); }
.wt-trick-btn { margin: 2px 0 10px; }

/* ============================================================
   ปุ่มตั้งค่า + ป๊อปอัปตั้งค่า (ธีม / วุฒิที่ใช้สมัครสอบ)
   เดิมมุมขวาบนเป็นแคปซูลธีม 3 ช่องกว้าง ~126px และ .topbar/.home-hero
   ต้องเว้น padding-right ให้ทั้งก้อน = กินพื้นที่หัวข้อทุกหน้า
   ตอนนี้เหลือปุ่มกลมเดียว จึงคืนพื้นที่ให้หัวข้อได้เกือบทั้งหมด
   ============================================================ */
.settings-fab {
  position: fixed; z-index: 85; cursor: pointer;
  top: max(18px, calc(env(safe-area-inset-top, 0px) + 12px));
  right: max(12px, calc(50% - var(--maxw)/2 + 12px));
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: transform .14s ease, color .15s ease;
}
.settings-fab svg { width: 19px; height: 19px; display: block; }
.settings-fab:hover { color: var(--brand); }
.settings-fab:active { transform: scale(.92); }

/* คืนพื้นที่ที่เคยเว้นไว้ให้แคปซูลธีม (126px → พอสำหรับปุ่มกลม 40px) */
.topbar { padding-right: calc(62px + env(safe-area-inset-right, 0px)); }
.home-hero { padding-right: 58px; }
@media (max-width: 380px) {
  .topbar { padding-right: calc(58px + env(safe-area-inset-right, 0px)); }
  .home-hero { padding-right: 54px; }
}

.set-modal { max-width: 380px; overflow-y: auto; max-height: 90dvh; }
.set-modal .reveal-row { margin-bottom: 10px; }
.set-modal .setting-switch { border: 0; box-shadow: none; background: var(--surface-2); }
.set-group { margin-bottom: 18px; }
.set-group:last-child { margin-bottom: 0; }
.set-label { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.set-note { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin: 0 0 10px; }
/* ในป๊อปอัปไม่ต้องเบลอพื้นหลังแล้ว (พื้นทึบอยู่แล้ว) และให้กางเต็มความกว้าง */
.set-group .theme-seg {
  /* ปุ่มเป็น flex:1 1 0 อยู่ใน content box (= กว้างทั้งหมด ลบ padding ข้างละ 4px)
     ตัวเลื่อนเป็น absolute ซึ่ง % คิดจาก padding box จึงต้องหัก 8px เองให้เท่ากับปุ่มพอดี
     เดิมใช้ 33.333% เฉย ๆ ตัวเลื่อนเลยกว้างเกินปุ่ม ~2.7px และล้นขอบขวาตอนเลือกช่องท้าย */
  --ts-w: calc((100% - 8px) / 3);
  width: 100%; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--surface-2);
}
.set-group .theme-seg button { flex: 1 1 0; }

.set-opts { display: flex; flex-direction: column; gap: 8px; }
.set-opt {
  display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left;
  padding: 11px 13px; border-radius: var(--radius-sm); font: inherit;
  background: var(--surface-2); border: 1.5px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.set-opt .so-tick {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: transparent;
  background: var(--card); border: 1.5px solid var(--line);
}
.set-opt .so-tick svg { width: 12px; height: 12px; display: block; }
.set-opt .so-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.set-opt .so-tx b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.set-opt .so-tx span { font-size: 11px; color: var(--muted); line-height: 1.6; }
.set-opt:hover { border-color: var(--brand); }
.set-opt.on { border-color: var(--brand); background: var(--brand-soft); }
.set-opt.on .so-tick { color: var(--on-accent, #fff); background: var(--brand); border-color: var(--brand); }

/* ============================================================
   มุมมอง "หน้ากระดาษจริง" — ภาพที่เรนเดอร์จาก PDF ไว้ล่วงหน้า
   (tools/build_law_pages.py → pdf-pages/docN/001.jpg)
   ภาพเป็นกระดาษขาวเสมอ จึงใส่กรอบ+เงาให้ดูเป็นแผ่นกระดาษ
   และในธีมมืดหรี่ความสว่างลงหน่อย ไม่ให้แสบตาตอนอ่านกลางคืน
   ============================================================ */
.law-read .lr-sheet { max-width: 46em; margin: 0 auto 16px; }
.law-read .lr-img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-soft); background: #fff;
}
[data-theme="dark"] .law-read .lr-img { filter: brightness(.86) contrast(1.04); }
[data-theme="reading"] .law-read .lr-img { filter: sepia(.10); }

/* แถบสลับมุมมอง (ใช้โครง .pdf-esc เดิม) — ปุ่มที่เลือกอยู่เน้นทึบ */
.pdf-esc .pe-b.on {
  color: var(--on-accent, #fff); background: var(--brand); border-color: var(--brand);
}

/* ปุ่มซูมลอย — มุมล่างขวาของกรอบอ่าน อยู่นอก .law-read เลยไม่เลื่อนหายไปกับเนื้อหา */
.law-zoom-bar {
  position: absolute; z-index: 5; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-lift, var(--shadow-soft));
}
.lz-btn {
  flex: 0 0 auto; height: 32px; min-width: 32px; padding: 0 4px;
  border-radius: 999px; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, background .15s;
}
.lz-btn:active { transform: scale(.9); }
.lz-btn:disabled { opacity: .35; pointer-events: none; }
.lz-pct { min-width: 46px; font-size: 11px; font-weight: 800; color: var(--muted); }
.law-zoom-bar.is-zoomed .lz-pct { color: var(--brand); }
/* ซูมเกิน 100% บนเดสก์ท็อป → ลากด้วยเมาส์เพื่อแพนได้ (มือถือใช้สกอลล์ปกติ ไม่ต้องมีเคอร์เซอร์นี้) */
.law-read.is-zoomed { cursor: grab; }
.law-read.law-dragging { cursor: grabbing; }

/* ============================================================
   "อ่านจากฉบับจริง" ท้ายเนื้อหาของแต่ละเรื่องในบทที่ ๓
   อ่านสรุปเรื่องไหนอยู่ ก็เปิดตัวบทของเรื่องนั้นได้จากตรงนั้นเลย
   ============================================================ */
.gd-block.gd-lawsrc { border-left-color: var(--brand); }
.gd-lawsrc .gl-lead { font-size: 11.5px; line-height: 1.7; color: var(--muted); margin: 0 0 9px; }
.gd-lawsrc .gl-item {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  text-align: left; font: inherit; margin-bottom: 7px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.gd-lawsrc .gl-item:last-child { margin-bottom: 0; }
.gd-lawsrc .gl-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.gd-lawsrc .gl-item:active { transform: scale(.995); }
.gd-lawsrc .gl-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-lawsrc .gl-tx b { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.55; }
.gd-lawsrc .gl-cite { font-size: 10.5px; color: var(--muted); line-height: 1.6; }
.gd-lawsrc .gl-go { flex: 0 0 auto; font-size: 18px; color: var(--brand); }

/* ============================================================
   ชั้นที่ 6 — Master UX/UI v2 : "แผ่นเต็มความกว้าง"
   ------------------------------------------------------------
   สิ่งที่เปลี่ยน = โครงสร้างการมองเห็นและการกด เท่านั้น
   ไม่แตะคำและตัวเลขเดิมสักตัว

   ปัญหาของ v1 ที่ v2 มาแก้
     1) การ์ดซ้อนการ์ด — หน้าแรกมีการ์ดขอบมน+เงา วางเรียงบนพื้นครีม
        แล้วข้างในการ์ดยังมีกล่องขอบมนซ้อนอีกชั้น (.cc-part, .count-pick,
        .meta-box) สายตาต้องไล่ขอบ 2–3 ชั้นกว่าจะเจอเนื้อหา
        และเนื้อที่แนวนอนหายไปกับ margin+padding+border รวม 34px ต่อข้าง
     2) แถวกดได้สูงไม่เท่ากัน (44 / 52 / 78px) เพราะแต่ละใบตั้ง padding เอง
     3) ปุ่มหลักลอยอยู่กลางหน้า ต้องเลื่อนหาทุกครั้ง — บนจอสูง 800px
        ปุ่ม "ข้อต่อไป" ตกอยู่ใต้เส้นพับเสมอเมื่อโจทย์ยาวเกิน 3 บรรทัด

   ทางแก้ = "แผ่น (sheet)" แทน "การ์ด"
     · แผ่นขาวกินเต็มความกว้างจอ ไม่มีขอบมน ไม่มีเงา
     · คั่นกันด้วยเส้นบาง 1px เส้นเดียว (ไม่ใช่กรอบรอบใบ)
     · หัวข้อกลุ่มไม่อยู่ในแผ่น แต่ลอยอยู่บนพื้นครีมระหว่างแผ่น
       → พื้นครีมกลายเป็น "ตัวคั่นหมวด" ไม่ใช่แค่พื้นหลัง
     · ปุ่มหลักย้ายลงแถบล่างที่ติดหน้าจอเสมอ

   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–5
   ============================================================ */

/* ------------------------------------------------------------
   6.1 · โทเคนของ v2
   ------------------------------------------------------------ */
:root {
  --gutter: 20px;     /* ขอบจอ — ค่าเดียวทั้งแอป (เดิมปน 14/16/22) */
  --row-h: 66px;      /* แถวกดได้ อยู่กลางช่วง 64–68 ที่กำหนดไว้ */
  --choice-h: 60px;   /* ตัวเลือกข้อสอบ */
  --bar-btn-h: 54px;  /* ปุ่มหลักในแถบล่าง */
  --fs-lg: 18px;      /* โจทย์ข้อสอบ — v2 ขยายจาก 17 */
}

/* ------------------------------------------------------------
   6.2 · ขอบจอเดียวกันทุกหน้า
   ------------------------------------------------------------
   ตัวแผ่นจะ "ถอยออก" ด้วย margin ติดลบเท่ากับ --gutter พอดี
   วิธีนี้ปลอดภัยกว่าการตั้ง padding ของ body เป็น 0 แล้วไล่ใส่คืนทีละชิ้น
   เพราะของที่ไม่ใช่แผ่น (แถวชิป ป้ายกำกับ ตาราง) ยังได้ระยะขอบเดิมอัตโนมัติ
   ------------------------------------------------------------ */
.home-body, .quiz-body, .result-body, .review-body, .history-body,
.study-body, .stats-body, .bookmarks-body, .boss-tab-body,
.browse-body, .laws-body, .inter-body {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ------------------------------------------------------------
   6.3 · ระบบแผ่น — เลิกการ์ดซ้อนการ์ด
   ------------------------------------------------------------
   border-top + margin-top:-1px = แผ่นที่ต่อกันเห็นเส้นคั่นเส้นเดียว
   ส่วนหัวและท้ายของ "ชุดแผ่น" ได้เส้นปิดหัว-ท้ายเองโดยไม่ต้องรู้ลำดับ
   (ถ้าใช้ border-bottom อย่างเดียว แผ่นใบแรกจะไม่มีเส้นบน)
   ------------------------------------------------------------ */
.home-body > .ready-card,
.home-body > .set-card,
.home-body > .menu-card,
.home-body > .resume-banner,
.home-body > .setting-switch,
.home-body > .year-pick,
.browse-body > .browse-row,
.browse-body > .browse-hero,
.browse-body > .browse-note,
.history-body > .hsum,
.history-body > .hcard,
.stats-body > .st-card,
.bookmarks-body > .bm-group,
.study-top > .bank-card,
.study-top > .scope-card,
.study-body > .study-card,
.review-body > .review-card,
.laws-body > .laws-note,
.result-body > .overall-banner,
.result-body > #kp-result,
.result-body > #special-result,
.result-body > #improvement,
.result-body > #part-breakdown,
.result-body > .result-meta,
.result-body > .analysis,
.v2-sheet {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-bottom: 0;
  margin-top: -1px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  box-shadow: none;
  width: auto;
  max-width: none;
}

/* แผ่นต่อกันต้องไม่มีช่องว่างคั่น ไม่งั้น margin-top:-1px จะไม่ทับกัน
   และจะเห็นเป็น "การ์ดลอย" เหมือนเดิม — ระยะห่างย้ายไปอยู่ที่หัวข้อกลุ่มแทน */
.home-body, .browse-body, .history-body, .study-body,
.stats-body, .bookmarks-body, .boss-tab-body, .review-body {
  gap: 0;
}
/* .review-body เป็น grid: ต้องคง minmax(0,1fr) ของชั้นที่ 4 ไว้
   (ภาษาไทยไม่เว้นวรรค → min-content ของย่อหน้า = ทั้งประโยค ดันคอลัมน์ล้นจอ) */
.review-body { grid-template-columns: minmax(0, 1fr); }

/* ระยะในแผ่น: บน-ล่าง 14px เป็นค่าเริ่มต้น ส่วนซ้าย-ขวาถูกตั้งไปแล้วข้างบน */
.home-body > .ready-card,
.home-body > .set-card,
.home-body > .resume-banner,
.home-body > .setting-switch,
.browse-body > .browse-note,
.history-body > .hsum,
.history-body > .hcard,
.stats-body > .st-card,
.study-top > .bank-card,
.study-top > .scope-card,
.review-body > .review-card,
.laws-body > .laws-note,
.result-body > #kp-result,
.result-body > #improvement,
.result-body > #part-breakdown,
.result-body > .analysis {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ------------------------------------------------------------
   6.4 · หัวข้อกลุ่ม — ลอยอยู่บนพื้นครีม ไม่อยู่ในแผ่น
   ------------------------------------------------------------
   นี่คือสิ่งที่ทำให้ "แผ่นขาวติดกันเป็นพืด" ยังอ่านเป็นหมวดได้
   ระยะบน 22px = ช่องครีมที่ตาใช้แบ่งหมวด · ระยะล่าง 8px = ผูกหัวข้อกับแผ่นใต้มัน
   ------------------------------------------------------------ */
.section-label,
.hs-listhead,
.study-group-head,
.topic-list-label,
.browse-count .bcount-label,
.opt-label {
  margin-left: 0;
  margin-right: 0;
  margin-top: 22px;
  margin-bottom: 8px;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: none;
}
.section-label:first-child { margin-top: 10px; }
.section-label .sl-sub {
  display: block;
  margin-top: 3px;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--fs-tiny);
  line-height: 1.75;
}
/* หัวรายการที่มีปุ่มอยู่ข้างขวา (เช่น "รายการที่ทำทั้งหมด" + ล้างประวัติ) */
.hs-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hs-listhead .hs-section-t { font: inherit; color: inherit; letter-spacing: inherit; }

/* หัวข้อในหน้าสรุปผล — เดิมเป็นหัวข้อในการ์ด ตอนนี้ลอยบนครีมเหมือนหัวข้อกลุ่มอื่น */
.result-body > .result-section-title,
#kp-result > .result-section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------
   6.5 · แถวกดได้สูง 64–68px เท่ากันทุกแถว
   ------------------------------------------------------------
   เดิมความสูงมาจาก padding ของแต่ละใบ จึงได้ 44 / 52 / 78px ปนกัน
   v2 กำหนดที่ min-height แทน — เนื้อหาสั้นก็ยังสูงเท่ากัน เนื้อหายาวก็ยืดได้
   ไอคอนย่อจาก 48 เหลือ 34 เพราะ 48 + padding เดิม = 78px เกินช่วงที่ตั้งไว้
   ------------------------------------------------------------ */
.home-body > .menu-card,
.browse-body > .browse-row,
.topic-row,
.pick-btn,
.gd-lawsrc .gl-item,
.lib-row {
  min-height: var(--row-h);
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}
.home-body > .menu-card .ico {
  width: 34px; height: 34px; flex-basis: 34px;
  border-radius: 10px;
}
.home-body > .menu-card .ico svg { width: 17px; height: 17px; }
.home-body > .menu-card .mc-text b { font-size: var(--fs-md); font-weight: 600; }
.home-body > .menu-card .mc-text span { font-size: var(--fs-tiny); line-height: 1.6; }
.home-body > .menu-card:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.home-body > .menu-card:hover .ico { transform: none; }
.home-body > .menu-card:active { transform: none; background: var(--surface-2); }

/* แถวเน้น (สอบเสมือนจริง / ข้อสอบเก็ง) — เดิมเป็นการ์ดไล่เฉด + วงแหวนขอบทอง
   ซึ่งอ่านเป็น "การ์ดคนละชุด" กับแถวอื่น v2 ใช้พื้นไฮไลต์บาง ๆ แทน
   สีทองยังทำหน้าที่นำสายตาเหมือนเดิม แต่ไม่แตกโครงแผ่น */
.home-body > .menu-card.feat,
.home-body > .menu-card.glow-new {
  background: var(--brand-soft);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.home-body > .menu-card.feat::after { display: none; }
.home-body > .menu-card.feat .ico {
  background: linear-gradient(145deg, var(--brand), var(--brand-2));
  box-shadow: none;
}

/* ------------------------------------------------------------
   6.6 · เลิกกล่องซ้อนกล่อง "ข้างใน" แผ่น
   ------------------------------------------------------------
   จุดที่เจอ: .cc-part (ในข้อควรรู้), .count-pick (ในตัวเลือกฝึก),
   .meta-box (ในสรุปผล), .bm-group-h, .ana-item
   ทั้งหมดเคยเป็นกล่องขอบมน+พื้นเทา ซ้อนอยู่ในการ์ดอีกใบ
   v2 เหลือแค่ "เส้นคั่น" หรือ "ช่องว่าง" ก็แยกออกจากกันได้แล้ว
   ------------------------------------------------------------ */
.count-pick,
.year-pick .count-pick {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
/* .cc-part ในกล่อง "ข้อควรรู้" ไม่ได้อยู่ในแผ่นสอดต่อกันแบบนี้แล้ว (ย้ายไปอยู่ใน
   .cred-tip-modal ที่เป็นป๊อปอัปลอย) จึงตั้งใจ "ไม่" แบนตามกฎนี้ — คงกล่องขอบมน+พื้นสี
   จากนิยามฐาน (บรรทัด ~4008) ไว้ เพื่อให้อ่านแยกจากพื้นโมดัลได้ */

.result-meta { gap: 0; margin: 0; }
.result-body > .result-meta { padding-top: 0; padding-bottom: 0; }
.result-meta .meta-box {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 6px;
}
.result-meta .meta-box + .meta-box { border-left: 1px solid var(--line); }

/* กล่องตัวเลือกปีในหน้าแรก: เดิมเป็นการ์ดในการ์ด (year-card ครอบ year-strip) */
.home-body > .menu-card.year-card {
  display: block;
  min-height: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}
.home-body > .menu-card.year-card .year-card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}

/* ------------------------------------------------------------
   6.7 · หน้าทำข้อสอบ — โจทย์ 18px · ตัวเลือกสูง 60px
   ------------------------------------------------------------
   โจทย์เป็นแผ่นเต็มความกว้าง (ใส่ที่ .qwrap ไม่ใช่ .question-text
   เพราะปุ่มมุมการ์ดทั้งสามปุ่มเกาะตำแหน่งกับ .qwrap ถ้าถอย margin
   ที่ .question-text ปุ่มจะไปกองอยู่ในตำแหน่งเดิม หลุดจากขอบแผ่น)
   ------------------------------------------------------------ */
.quiz-body > .qwrap {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}
.quiz-body .question-text {
  font-size: var(--fs-lg);
  line-height: 1.7;
  font-weight: 600;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  padding-left: var(--gutter);
  padding-top: 22px;
}
.quiz-body .question-text.has-list { font-size: var(--fs-lg); }
/* ปุ่มมุมการ์ดขยับตามขอบแผ่นใหม่ — เดิมอิงขอบการ์ดที่ร่นเข้ามา 16px */
.qwrap .hint-btn,
.qwrap #scratch-open { left: auto; right: calc(var(--gutter) - 6px); }
.qwrap #scratch-open { left: calc(var(--gutter) - 6px); right: auto; }
.qwrap .bookmark-btn { right: calc(var(--gutter) - 6px); }
.qwrap .question-text { padding-right: calc(var(--gutter) + 36px); }
.qwrap .q-num-badge { left: var(--gutter); }
.hint-pop { left: calc(var(--gutter) - 8px); right: calc(var(--gutter) - 8px); }

/* ตัวเลือก: สูงอย่างน้อย 60px และหมายเลขข้ออยู่กึ่งกลางแนวตั้งเสมอ
   (เดิม align-items: flex-start ทำให้ตัวเลือกบรรทัดเดียวมีที่ว่างใต้ป้ายเยอะ
   พอบังคับความสูงขั้นต่ำแล้วยิ่งเห็นชัด) */
.quiz-body .choices { gap: 10px; margin-top: 18px; }
.quiz-body .choice {
  min-height: var(--choice-h);
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  line-height: 1.65;
  box-shadow: none;
}
.quiz-body .choice .lab,
.quiz-body .choice .letter { align-self: center; }
.quiz-body .choice .ctext,
.quiz-body .choice .c-text { padding-top: 0; min-width: 0; }

/* ------------------------------------------------------------
   6.8 · แถบปุ่มล่างที่ติดหน้าจอเสมอ
   ------------------------------------------------------------
   ใช้ position: sticky ไม่ใช่ fixed — เพราะ sticky ยังกินที่ของตัวเองในสายเนื้อหา
   จึงไม่ต้องไปเผื่อ padding-bottom ให้ทุกหน้า (ซึ่งพลาดง่ายและลืมง่าย)
   เงื่อนไขเดียวที่ต้องตามเก็บคือ .app มี padding-bottom 96px ไว้หลบแถบเมนูล่าง
   หน้าที่ไม่มีแถบเมนู แถบปุ่มจะ "หลุดลอย" ขึ้นมา 96px ตอนเลื่อนสุด
   จึงตัด padding นั้นทิ้งผ่าน data-screen ที่ app.js เขียนไว้ให้
   ------------------------------------------------------------ */
.v2-bar,
#screen-summary .result-actions,
#screen-interstitial .inter-actions {
  position: sticky;
  bottom: 0;
  z-index: 18;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border-top: 1px solid var(--glass-brd);
}
#screen-interstitial .inter-actions { margin-left: 0; margin-right: 0; }
#screen-interstitial .inter-action-row { padding: 0; }
.v2-bar .action-row { margin-top: 0; gap: 10px; }
.v2-bar .btn,
#screen-summary .result-actions .btn {
  min-height: var(--bar-btn-h);
  border-radius: var(--r-md);
}
/* ปุ่มหลัก 1 ปุ่มต่อหน้า — ปุ่มรองย่อลงให้เหลือแค่ "ทางออก" ไม่แย่งสายตา */
.v2-bar .action-row .btn-ghost { flex: 0 0 auto; width: auto; padding-inline: 16px; }
.v2-bar .action-row .btn-primary { flex: 1 1 auto; }

/* หน้าที่ไม่มีแถบเมนูล่าง ไม่ต้องเผื่อที่ 96px ให้มัน — ถ้าเผื่อไว้
   แถบปุ่ม sticky จะเลิกเกาะขอบล่างตอนเลื่อนถึงท้ายหน้า แล้วลอยค้างเหนือครีมเปล่า ๆ
   (ค่านี้ตั้งจาก data-screen ที่ showScreen() ใน app.js เขียนให้) */
.app[data-screen="quiz"],
.app[data-screen="summary"],
.app[data-screen="review"],
.app[data-screen="browse"],
.app[data-screen="interstitial"],
.app[data-screen="micro-menu"],
.app[data-screen="laws"],
.app[data-screen="pdf"] { padding-bottom: 0; }
.app[data-screen="browse"] .browse-body,
.app[data-screen="laws"] .laws-body { padding-bottom: 28px; }
#screen-quiz.active {
  display: flex; flex-direction: column;
  height: 100dvh; height: 100vh;
  overflow: hidden;
}
#screen-quiz > .topbar,
#screen-quiz > .progress-row,
#screen-quiz > .qstat-row { flex: none; }
#screen-quiz > .quiz-body {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.quiz-body { padding-bottom: 0; }
#screen-quiz .quiz-body .choices { margin-bottom: 5%; }
#screen-summary .result-body { padding-bottom: 0; }

/* ------------------------------------------------------------
   6.9 · หน้าสรุปผล — "เรื่องที่ควรเสริม" อ่านเป็น % ความเข้าใจ
   ------------------------------------------------------------
   เดิมเขียนรวมบรรทัดเดียวว่า "30% (3/10)" ผู้อ่านต้องแปลงในหัวเองว่า
   เลขนั้นแปลว่าอะไร และ 3/10 กับ 30% คือตัวเลขเดียวกันพูดสองรอบ
   v2 แยกเป็น 3 ชั้น: ตัวเลขใหญ่ = % ความเข้าใจ · แถบ = ระดับ · บรรทัดล่าง = ที่มาของตัวเลข
   ------------------------------------------------------------ */
.und-cap {
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.und-row { padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.und-row:first-of-type { border-top: 0; padding-top: 0; }
.und-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.und-topic { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.55; }
.und-pct { flex: 0 0 auto; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.und-pct i { font-style: normal; font-size: var(--fs-tiny); font-weight: 600; margin-left: 1px; }
.und-pct.good { color: var(--ok-ink); }
.und-pct.bad { color: var(--bad-ink); }
.und-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.und-band { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-pill); }
.und-band.good { background: var(--ok-soft); color: var(--ok-ink); }
.und-band.bad { background: var(--bad-soft); color: var(--bad-ink); }
.und-raw { font-size: var(--fs-tiny); color: var(--muted); white-space: nowrap; }
.und-row .ana-bar { height: 8px; border-radius: var(--r-pill); }
.ana-reco b i { font-style: normal; font-weight: 700; color: var(--bad-ink); }
/* สองคอลัมน์ (จุดแข็ง / ควรเสริม) บนจอแคบต้องเรียงลงมา ไม่ใช่บีบให้แคบลง
   แถวความเข้าใจมีทั้งชื่อเรื่องภาษาไทยและตัวเลข 22px อยู่บรรทัดเดียวกัน */
.ana-grid { gap: 22px; }
.ana-box { min-width: 0; flex: 1 1 100%; }

/* ------------------------------------------------------------
   6.10 · ผลกระทบที่ตรวจเจอตอนไล่ดูทีละหน้าจอ แล้วเก็บให้ครบ
   ------------------------------------------------------------
   วิธีตรวจ: ไล่ทุกหน้า วัด getBoundingClientRect ของลูกทุกตัวเทียบกับกรอบ .app
   แล้วรายงานตัวที่ล้นออกนอกกรอบ + เทียบ documentElement.scrollWidth กับความกว้างจอ
   ------------------------------------------------------------ */

/* (ก) บั๊กจริง: หน้าเกร็ดความรู้เลื่อนออกด้านข้างได้ 4px
   .study-top เป็นคนละคอนเทนเนอร์กับ .study-body และตั้ง padding ไว้ 16px
   แต่แผ่นถอย margin ออก 20px ตาม --gutter → ล้นข้างละ 4px พอดี
   (scrollWidth 379 บนจอ 375) จับได้เพราะวัดทุกลูกเทียบกรอบแอป ไม่ได้ดูด้วยตา */
.study-top { padding-left: var(--gutter); padding-right: var(--gutter); gap: 0; }
.laws-body { gap: 0; }
.inter-body { padding-left: var(--gutter); padding-right: var(--gutter); }

/* (ข) แผ่นที่ตกสำรวจรอบแรก — ยังเป็นการ์ดลอยอยู่กลางพื้นครีมทั้งที่ควรเป็นแผ่น */
.history-body > .history-card,
.stats-body > .st-hero,
.study-body > .study-toc,
.boss-tab-body > .boss-card,
.laws-body > .law-doc {
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-bottom: 0;
  margin-top: -1px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  box-shadow: none;
  width: auto;
  max-width: none;
}

/* (ค) หัวหน้าสรุปผล — เดิมเป็นการ์ดไล่เฉดลอยห่างขอบ 16px มุมมน 18px
   ซึ่งเป็น "การ์ดบนพื้นครีม" ใบสุดท้ายที่เหลืออยู่ในหน้านี้ */
#screen-summary .result-head {
  margin: 0;
  border-radius: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 22px);
}

/* (ง) แถวหน้าแรกวัดได้ 68.2px เกินช่วง 64–68 ไปนิดเดียว
   ต้นเหตุคือ padding 10px + ข้อความสองบรรทัด ไม่ใช่ไอคอน — ลด padding ลง 1px พอ */
.home-body > .menu-card { padding-top: 9px; padding-bottom: 9px; }

/* (จ) แถบปุ่มล่างของหน้าสรุปผลมีปุ่มเรียงลงมาสองปุ่ม (grid gap 10)
   ในแถบติดขอบล่างควรเรียงข้างกันเพื่อไม่กินความสูงจอเกินครึ่ง */
#screen-summary .result-actions { display: flex; flex-direction: column; gap: 10px; }
#screen-summary .result-main-btns { display: flex; gap: 10px; margin: 0; }
#screen-summary .result-main-btns .btn { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------------------
   7 · หน้าคั่น "กำลังตรวจข้อสอบ" (ก่อนเข้าหน้าสรุปผล)
   ------------------------------------------------------------
   เปิด/ปิดด้วยไอดี ไม่ใช่คลาส เพราะไฟล์นี้รวมสองดีไซน์ซิสเต็มเข้าด้วยกัน
   และเคยมีเคสที่เลเยอร์ล่างตั้ง display ของคลาสโอเวอร์เลย์เป็น flex ทับไว้
   จนแผ่นเต็มจอค้างบังทั้งแอป (ดู #pause-overlay) — (1,0,0) กันเคสนั้นซ้ำ
   ------------------------------------------------------------ */
#grading-overlay {
  position: fixed; inset: 0; z-index: 250;
  display: none; background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
}
#grading-overlay.show { display: block; }
#grading-overlay.leaving { pointer-events: none; opacity: 0; transition: opacity .3s ease; }

.grd-inner {
  min-height: 100%;
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 22px calc(env(safe-area-inset-bottom, 0px) + 16px);
}
#grading-overlay.show .grd-inner { animation: grdIn .34s cubic-bezier(.22,.9,.35,1) both; }
@keyframes grdIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ชื่อชุดที่เพิ่งสอบ — ตอบคำถามแรกในหัวคนอ่านว่า "กำลังตรวจของอะไรอยู่"
   ข้อความไทยยาวได้ จึงให้ตัดบรรทัดเองแทนการตัดท้ายด้วย ellipsis */
/* ทองบนพื้นครีมของโหมดสว่างวัดได้ 4.2–4.29 ซึ่งไม่ผ่าน AA (4.5) สำหรับตัวอักษร 11–12px
   --brand-dark เข้มขึ้นอีกขั้นได้ 6.0–6.1 และในโหมดมืดค่านี้กลับเป็นทองสว่าง (#ffd77a) พอดี */
.grd-chip {
  max-width: 100%;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: var(--fs-micro); font-weight: 800; line-height: 1.45;
}

/* วงแหวนความคืบหน้า — margin auto ทั้งบน (ตรงนี้) และล่าง (.grd-foot)
   แบ่งที่ว่างที่เหลือให้เท่ากัน กลุ่มกลางจึงลอยกลางจอ ส่วนบรรทัดเวลาเกาะขอบล่าง */
.grd-ring { position: relative; width: 172px; height: 172px; margin: auto 0 0; }
.grd-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.grd-ring-track { fill: none; stroke: var(--line); stroke-width: 12; }
.grd-ring-bar { fill: none; stroke: var(--brand-2); stroke-width: 12; stroke-linecap: round; }
.grd-ring-mid { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; }
.grd-pct { display: flex; align-items: baseline; gap: 1px; color: var(--text); }
.grd-pct span { font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -.5px; }
.grd-pct i { font-style: normal; font-size: 17px; font-weight: 800; color: var(--muted); }
.grd-ring-label { font-size: var(--fs-tiny); font-weight: 700; color: var(--muted); }
/* ตรวจครบ 100% แล้ว — เน้นแค่คำใต้ตัวเลข ไม่เปลี่ยนวงแหวนเป็นเขียว
   เพราะในหน้าผลสอบสีเขียวถูกอ่านว่า "ผ่าน" ซึ่งคนละเรื่องกับ "ตรวจเสร็จ" */
#grading-overlay.done .grd-ring-label { color: var(--brand-dark); font-weight: 800; }

.grd-title { margin: 22px 0 0; font-size: var(--fs-xl); font-weight: 900; color: var(--text); line-height: 1.35; }
.grd-sub { margin: 9px 0 0; max-width: 330px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.7; }

.grd-steps { list-style: none; margin: 22px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.grd-step {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; text-align: left;
}
.grd-box {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  border: 2px solid var(--line); background: var(--card);
  display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease;
}
.grd-box svg { width: 15px; height: 15px; color: var(--on-accent, #fff); opacity: 0; transition: opacity .2s ease; }
.grd-txt { min-width: 0; }
.grd-txt b { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); line-height: 1.45; transition: color .25s ease; }
.grd-txt i { display: block; font-style: normal; font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; margin-top: 3px; opacity: 0; transition: opacity .25s ease; }
.grd-val { font-size: var(--fs-tiny); font-weight: 800; color: var(--text); opacity: 0; transition: opacity .25s ease; white-space: nowrap; }

/* กำลังทำขั้นนี้ — กล่องกลายเป็นวงแหวนหมุน ตัวอักษรเข้มขึ้น และเผยค่าที่ได้ */
.grd-step[data-st="run"] .grd-box {
  border-radius: 50%; border-color: var(--brand-2); border-top-color: transparent; background: transparent;
  animation: grdSpin .8s linear infinite;
}
.grd-step[data-st="run"] .grd-txt b { color: var(--text); font-weight: 900; }
.grd-step[data-st="run"] .grd-txt i,
.grd-step[data-st="done"] .grd-txt i { opacity: 1; }
.grd-step[data-st="run"] .grd-val { opacity: 1; color: var(--brand-dark); }
/* ตรวจขั้นนี้เสร็จแล้ว */
.grd-step[data-st="done"] .grd-box { background: var(--ok); border-color: var(--ok); }
.grd-step[data-st="done"] .grd-box svg { opacity: 1; }
.grd-step[data-st="done"] .grd-txt b { color: var(--text); }
.grd-step[data-st="done"] .grd-val { opacity: 1; }
.grd-step[data-st="done"] .grd-val.ok { color: var(--ok-ink); }
.grd-step[data-st="done"] .grd-val.warn { color: var(--brand-dark); }
@keyframes grdSpin { to { transform: rotate(360deg); } }

.grd-note {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  margin: 20px 0 0; padding: 12px 14px; width: 100%;
  border-radius: var(--r-md); background: var(--brand-soft);
  font-size: var(--fs-micro); color: var(--text); line-height: 1.6;
}
.grd-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); margin-top: 1px; }
.grd-foot { margin: auto 0 0; padding-top: 22px; font-size: var(--fs-micro); color: var(--muted); }

/* จอเตี้ย (iPhone SE ~667px) — ลดวงแหวนกับระยะห่างลง ไม่ให้ต้องเลื่อนดูขั้นตอน */
@media (max-height: 700px) {
  .grd-ring { width: 132px; height: 132px; }
  .grd-pct span { font-size: 32px; }
  .grd-title { margin-top: 16px; font-size: var(--fs-lg); }
  .grd-sub { margin-top: 7px; }
  .grd-steps { margin-top: 16px; gap: 8px; }
  .grd-note { margin-top: 14px; }
  .grd-foot { padding-top: 14px; }
}

/* จอเตี้ยมาก (iPhone SE รุ่นแรก 320x568) — ย่อวงแหวนอีกขั้นและตัดคำอธิบายรองที่ซ้ำกับหัวเรื่อง
   หน้านี้เลื่อนเองได้อยู่แล้ว แต่ระหว่างที่ขั้นตอนไล่ทีละบรรทัด การต้องเลื่อนตามคืออาการที่ควรเลี่ยง */
@media (max-height: 600px) {
  .grd-ring { width: 104px; height: 104px; }
  .grd-pct span { font-size: 26px; }
  .grd-pct i { font-size: 14px; }
  .grd-title { margin-top: 12px; font-size: var(--fs-md); }
  .grd-sub { display: none; }
  .grd-steps { margin-top: 12px; gap: 7px; }
  .grd-note { margin-top: 10px; padding: 9px 11px; }
  .grd-foot { padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #grading-overlay.show .grd-inner { animation: none; }
  .grd-step[data-st="run"] .grd-box { animation: none; border-top-color: var(--brand-2); }
}

/* ------------------------------------------------------------
   6.11 · เส้นคั่นแผ่นในโหมดมืด — ผลกระทบที่ v2 สร้างขึ้นเอง
   ------------------------------------------------------------
   v1 แยกการ์ดออกจากกันด้วย 3 อย่างพร้อมกัน: ช่องว่าง + มุมโค้ง + เงา
   v2 ตัดทิ้งทั้งสาม เหลือ "เส้นบาง 1px" เส้นเดียวรับงานแยกแผ่นทั้งหมด
   เส้นนั้นเลยกลายเป็นของสำคัญ ไม่ใช่ของประดับอีกต่อไป

   วัดจริง (--line เทียบ --card):
     กระดาษ 1.45 · อ่านสบาย 1.35 · มืด 1.27  ← มืดจางเกินจนแผ่นเชื่อมกันเป็นพืด
   จึงแยก token ของ "เส้นคั่นแผ่น" ออกจาก --line (ซึ่งยังใช้กับขอบช่องกรอกและชิป
   ที่จางได้ไม่เป็นไร) แล้วเพิ่มน้ำหนักเฉพาะโหมดมืด
   ------------------------------------------------------------ */
:root { --sheet-line: var(--line); }
[data-theme="dark"] { --sheet-line: #463e30; }
[data-theme="reading"] { --sheet-line: #dccbaa; }

.home-body > .ready-card, .home-body > .set-card,
.home-body > .menu-card, .home-body > .resume-banner, .home-body > .setting-switch,
.home-body > .year-pick,
.browse-body > .browse-row, .browse-body > .browse-hero, .browse-body > .browse-note,
.history-body > .hsum, .history-body > .hcard, .history-body > .history-card,
.stats-body > .st-card, .stats-body > .st-hero,
.bookmarks-body > .bm-group,
.study-top > .bank-card, .study-top > .scope-card,
.study-body > .study-card, .study-body > .study-toc,
.review-body > .review-card,
.boss-tab-body > .boss-card,
.laws-body > .laws-note, .laws-body > .law-doc,
.result-body > .overall-banner, .result-body > #kp-result, .result-body > #special-result,
.result-body > #improvement, .result-body > #part-breakdown,
.result-body > .result-meta, .result-body > .analysis,
.v2-sheet {
  border-top-color: var(--sheet-line);
  border-bottom-color: var(--sheet-line);
}
/* แถวเน้นสีทองก็ต้องใช้เส้นเดียวกัน ไม่งั้นจะเห็นเส้นสองน้ำหนักในคอลัมน์เดียว */
.home-body > .menu-card.feat, .home-body > .menu-card.glow-new {
  border-top-color: var(--sheet-line);
  border-bottom-color: var(--sheet-line);
}
/* เส้นคั่น "ในแผ่น" (แถวความเข้าใจ · กล่องข้อมูลย่อย) ใช้ --line ตามเดิม
   เพราะอยู่บนพื้นเดียวกันและมีระยะห่างช่วยแยกอยู่แล้ว */

/* ------------------------------------------------------------
   6.12 · แอนิเมชันเปลี่ยนข้อ ต้องไม่เลื่อนแนวนอนอีกต่อไป
   ------------------------------------------------------------
   qSwap เดิมเลื่อนเข้ามาจากขวา translateX(16px) ซึ่งพอดีเป๊ะกับตอนที่
   การ์ดโจทย์ยังร่นเข้ามาข้างละ 16px — เลื่อนเท่าไรก็ยังอยู่ในจอ
   พอ v2 ทำให้การ์ดกินเต็มความกว้าง การเลื่อน 16px กลายเป็นล้นขอบขวา
   วัดได้ scrollWidth 391 บนจอ 375 ทุกครั้งที่เปลี่ยนข้อ (โผล่ ~260ms แล้วหาย)
   เป็นบั๊กที่มองด้วยตาแทบไม่ทัน แต่บนมือถือคือจอสะบัดข้างทุกข้อ

   แก้ที่ต้นเหตุ: เปลี่ยนเป็นเลื่อนแนวตั้งแทน — สื่อความหมาย "ข้อใหม่มาแล้ว"
   ได้เหมือนเดิม และเลื่อนแนวตั้งทำให้ล้นแนวนอนไม่ได้เลยไม่ว่าการ์ดจะกว้างแค่ไหน
   (ดีกว่าไปปิดด้วย overflow ที่ .quiz-body เพราะจะไปทำให้แถบปุ่ม sticky
    เกาะผิดตัวอ้างอิง)
   ------------------------------------------------------------ */
@keyframes qSwapV2 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qwrap.qswap { animation: qSwapV2 .26s ease; }

/* ------------------------------------------------------------
   6.13 · คำอธิบายใต้ชื่อแถว จำกัดบรรทัดเดียว
   ------------------------------------------------------------
   วัดความสูงแถวหน้าแรกได้ 66.2 · 66.2 · 85.4 · 66.2 · 85.4
   สองแถวที่หลุดช่วง 64–68 คือแถวที่คำอธิบายยาวจนตัดลงบรรทัดที่สอง
   ("ฝึกเฉพาะเรื่อง" และ "อ่านก่อน แล้วทำข้อสอบ")

   ทำไมไม่ยอมให้สูง 85: จุดประสงค์ของการล็อกความสูงคือให้ "จังหวะการกวาดตา"
   ของลิสต์คงที่ นิ้วโป้งกะตำแหน่งแถวถัดไปได้โดยไม่ต้องมอง แถวสูงไม่เท่ากันทำลายข้อนั้น
   ทำไมไม่ย่อตัวอักษรลงแทน: ชั้นที่ 4 ตั้งพื้นล่างไว้ว่าข้อความที่เป็นประโยค
   ห้ามเล็กกว่า 12px (ภาษาไทยสระบน-ล่างจะเริ่มชนกัน) สองบรรทัดจึงลงในกรอบ 68px ไม่ได้จริง ๆ

   ส่วนที่ถูกตัดคือหางที่ app.js ต่อท้ายให้ (" · ปี 68 · 69 · เก็ง 70")
   ซึ่งเป็นข้อมูลซ้ำกับการ์ด "เลือกปีที่จะเอามาฝึก" ที่อยู่เหนือแถวพวกนี้อยู่แล้ว
   ข้อความเต็มยังอยู่ใน DOM ครบ เครื่องอ่านหน้าจอยังอ่านได้ทั้งประโยค
   ------------------------------------------------------------ */
.home-body > .menu-card .mc-text span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------
   8 · ตัวหนังสือกลืนพื้น — เก็บให้ครบทั้งสามธีม
   ------------------------------------------------------------ */

/* (ก) แบนเนอร์สรุปผล: ตัวหนังสือขาวบนพื้นขาว
   layer 2 ตั้ง .overall-banner { color:#fff } คู่กับพื้นไล่เฉดเขียว/แดง
   แต่กฎ "แผ่นเต็มความกว้าง" ของ v2 (.result-body > .overall-banner) มา
   ทีหลังและมี specificity เท่ากัน (0,2,0) จึงชนะด้วยลำดับ แล้วเปลี่ยนพื้น
   เป็น var(--card) — เหลือแต่ตัวหนังสือขาวบนพื้นครีม อ่านไม่ออกทั้งบรรทัด
   คืนพื้นเป็นโทนจางของผล/ไม่ผ่าน แล้วใช้หมึกคู่ของมันตามที่ token ออกแบบไว้ */
.result-body > .overall-banner { color: var(--text); }
.result-body > .overall-banner.pass { background: var(--ok-soft); }
.result-body > .overall-banner.fail { background: var(--bad-soft); }
.result-body > .overall-banner .big { color: var(--text); }
.result-body > .overall-banner.pass .big { color: var(--ok-ink); }
.result-body > .overall-banner.fail .big { color: var(--bad-ink); }
.result-body > .overall-banner .small { color: var(--muted-ink); opacity: 1; }

/* (ข) ไอคอนแว่นขยายกางเต็มหน้าจอในปุ่ม "จุดแข็ง และเรื่องที่ยังควรเสริม"
   ลิสต์ไอคอนที่ 3606 เขียนชื่อคลาสไว้เป็น .ana-toggle ซึ่งไม่มีอยู่จริงในหน้าไหนเลย
   (ของจริงคือ .analysis-toggle) svg จึงไม่เคยถูกกำหนดขนาด แล้วยืดเต็มพื้นที่ว่าง */
.analysis-toggle > svg {
  width: 1em; height: 1em; flex: 0 0 auto;
  vertical-align: -0.14em; margin-right: .3em;
}

/* (ค) การ์ด "ความแม่นยำรวม" หน้าสถิติ — อาการเดียวกับแบนเนอร์สรุปผลเป๊ะ
   .st-hero ตั้ง color:#fff คู่กับพื้นไล่เฉด --hero-from/--hero-to
   แต่กฎแผ่นเต็มความกว้าง (.stats-body > .st-hero) เปลี่ยนพื้นเป็น var(--card)
   วัดได้คอนทราสต์ 1.07 ทั้งสามธีม = ตัวเลข 40px กับข้อความข้าง ๆ หายไปกับพื้น */
.stats-body > .st-hero { color: var(--text); }
.stats-body > .st-hero .st-hero-n { color: var(--brand-dark); }
.stats-body > .st-hero .st-hero-tx b { color: var(--text); }
.stats-body > .st-hero .st-hero-tx span { color: var(--muted); opacity: 1; }

/* (ง) ปุ่ม "ทำทั้งปีตามผังสอบจริง" หน้าคลังข้อสอบ — ครอบครัวเดียวกับ (ก) และ (ค)
   .browse-hero เป็น color:#fff บนไล่เฉด --hero-* แล้วถูก .browse-body > .browse-hero
   แบนพื้นเป็น var(--card) → วัดได้ 1.00 ในโหมดสว่าง คือขาวบนขาวเป๊ะ ๆ
   ปุ่มนี้เป็นปุ่มหลักของหน้า จึงคงความเด่นไว้ด้วยพื้นทองจาง ไม่ใช่แผ่นขาวเปล่า */
.browse-body > .browse-hero { background: var(--brand-soft); color: var(--text); }
.browse-body > .browse-hero b { color: var(--brand-dark); }
.browse-body > .browse-hero span { color: var(--muted-ink); opacity: 1; }

/* (จ) คำอธิบายใต้ตัวเลือกวุฒิที่เลือกอยู่ ในป๊อปอัปตั้งค่า — โหมดมืดได้ 4.37
   พื้นของแถวที่เลือกเป็น --brand-soft ซึ่งในโหมดมืดเป็นทองโปร่งแสงทับการ์ด
   ทำให้พื้นสว่างขึ้นจนหมึก --muted เฉียดเกณฑ์ ดึงเข้าหา --text อีกนิดเดียวพอ */
[data-theme="dark"] .set-opt.on .so-tx span { color: color-mix(in srgb, var(--muted) 55%, var(--text)); }

/* ------------------------------------------------------------
   9 · หน้าทำข้อสอบ — จัดวางปุ่มใหม่
   ------------------------------------------------------------
   ปัญหาเดิมสองข้อ
   (1) "ตรวจคำตอบ" อยู่ใต้ตัวเลือกทันที และใช้สไตล์ .btn-ghost ซึ่งเป็น
       การ์ดขาวขอบบางเต็มความกว้าง — หน้าตาเหมือนตัวเลือกอีกข้อเป๊ะ ๆ
       ย้ายลงแถบล่างที่ติดหน้าจอ รวมกับปุ่มเดินเรื่องอื่นให้อยู่ที่เดียว
   (2) ปุ่มมาร์คดาว/กระดาษทด/ทริค เป็นวงกลมลอยอยู่สามมุมของการ์ดโจทย์
       ไม่มีป้ายบอกว่าอันไหนทำอะไร และกินที่ในการ์ดจนต้องเผื่อ padding 56px
       รวบมาเป็นแถวชิปใต้การ์ด มีทั้งไอคอนและข้อความ
   ------------------------------------------------------------ */

/* --- แถวเครื่องมือของข้อ --- */
.q-tools {
  display: flex; gap: 8px; margin: 10px 0 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.q-tools::-webkit-scrollbar { display: none; }
.q-tools .q-chip {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 10px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card); color: var(--muted);
  font: inherit; font-size: var(--fs-tiny); font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
/* ปุ่มพวกนี้เคยเป็นวงกลม absolute อยู่ในการ์ด — หลายชั้นตั้ง position/ขนาดไว้
   และ #scratch-open เป็นตัวเลือกแบบ id ที่ชนะคลาสเดี่ยว จึงต้องล้างด้วย id เหมือนกัน
   ⚠️ เคยเขียน place-items: initial ไว้ล้างค่า grid เก่า แต่ตัวปุ่มเป็น flex (ไม่ใช่ grid)
   place-items ที่มีผลจริงในบริบท flex คือ align-items เท่านั้น การ "ล้างเป็น initial"
   จึงไปรีเซ็ต align-items ของปุ่มนี้กลับเป็น normal (=stretch) ทับ align-items:center
   ที่ .q-tools .q-chip ตั้งไว้ — ไอคอนเลยลอยชิดขอบบนแทนกึ่งกลางวงกลม (สูง 36 ไอคอน 17
   ควรห่างขอบบน 9.5px แต่วัดได้แค่ 1px) ตัวเลือกนี้เป็น id ชนะกฎ .q-chip เสมอ
   จึงต้องตั้ง align-items: center ตรงนี้เองแทนการล้างเป็น initial */
.q-tools #bookmark-btn,
.q-tools #scratch-open,
.q-tools #hint-btn {
  position: relative; inset: auto;
  width: auto; height: auto; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.q-tools .q-chip > svg { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; }
.q-tools .q-chip > span { overflow: hidden; text-overflow: ellipsis; }
.q-tools .q-chip:active { transform: scale(.96); }
.q-tools .q-chip:hover { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-soft); }
/* มาร์คไว้แล้ว / เปิดทริคอยู่ — สถานะติดต้องเห็นชัดจากสีพื้น ไม่ใช่แค่เส้นขอบ */
.q-tools #bookmark-btn.on { color: var(--warn-ink); border-color: var(--warn); background: var(--warn-soft); }
.q-tools #bookmark-btn.on > svg { fill: var(--warn); }
.q-tools #hint-btn.active { color: var(--brand-dark); border-color: var(--brand); background: var(--brand-soft); }
/* ไม่ต้องเผื่อที่ให้ปุ่มลอยในการ์ดอีกแล้ว — คืนพื้นที่ให้ตัวโจทย์ */
.qwrap .question-text { padding-right: var(--gutter); padding-bottom: 20px; }

/* --- แถบล่าง: ย้อนกลับ (ไอคอน) · กระดาษคำตอบ · ข้อต่อไป (ปุ่มหลัก) --- */
.v2-bar .action-row .btn-prev-ico {
  /* ปุ่มนี้ไม่มีป้ายกำกับแล้ว จึงพึ่ง tooltip [data-tip] — ซึ่งเกาะ element ที่ positioned
     ถ้าไม่ตั้ง relative ตรงนี้ tooltip จะไปเกาะ .v2-bar (sticky) แล้วโผล่ผิดที่ */
  position: relative;
  flex: 0 0 auto; width: var(--tap); min-width: var(--tap);
  padding-inline: 0; font-size: 15px;
}
.v2-bar .action-row .btn-sheet {
  flex: 0 0 auto; width: auto; padding-inline: 13px;
  gap: 6px; font-size: var(--fs-sm); font-weight: 700;
}
.v2-bar .action-row .btn-sheet > svg { width: 16px; height: 16px; }
.v2-bar .action-row .btn-primary { flex: 1 1 auto; min-width: 110px; }

/* --- ปุ่มรองใต้ตัวเลือก (อ่านเฉลยละเอียด) ---
   เหลือปุ่มเดียวแล้ว แต่ยังกว้างเต็มแถวเท่าตัวเลือก จึงคั่นด้วยเส้นบาง
   และหุบให้พอดีข้อความ เพื่อไม่ให้อ่านเป็นตัวเลือกเพิ่มอีกข้อ */
.quiz-body .action-row-sub {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  justify-content: center;
}
.quiz-body .action-row-sub .btn { flex: 0 1 auto; width: auto; padding-inline: 18px; }

/* --- นับถอยหลังก่อนเปลี่ยนข้ออัตโนมัติ --- */
.aa-note {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px; padding: 8px 10px 10px;
  border-radius: var(--r-md); background: var(--brand-soft);
  font-size: var(--fs-tiny); color: var(--text);
}
.aa-note[hidden] { display: none; }
.aa-note .aa-sec {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: var(--on-accent, #fff);
  font-size: var(--fs-micro); font-weight: 900; line-height: 1;
}
.aa-note .aa-tx { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.aa-note .aa-cancel {
  flex: 0 0 auto; border: 1px solid var(--brand); background: var(--card);
  color: var(--brand-dark); font: inherit; font-size: var(--fs-micro); font-weight: 800;
  padding: 6px 11px; border-radius: var(--r-pill); cursor: pointer; min-height: 30px;
}
.aa-note .aa-bar {
  position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px;
  border-radius: 2px; background: color-mix(in srgb, var(--brand) 22%, transparent);
  overflow: hidden;
}
.aa-note .aa-bar i { display: block; height: 100%; width: 100%; background: var(--brand); }
.quiz-body .action-row-sub[hidden] { display: none; }

/* (ฉ) ข้อความในตัวเลือกที่เฉลยว่าถูก/ผิด — 4.21 กับ 4.44 ในโหมดสว่าง
   ต้นเหตุเดียวกับที่เคยเจอตอนทำ token ชุด -ink คือ --ok/--bad ถูกจูนมาให้อ่านออก
   "บนพื้นการ์ดขาว" พอเอาไปวางบนพื้นจางของตัวเอง (--ok บน --ok-soft) พื้นสว่างน้อยลง
   คอนทราสต์เลยตกมาเฉียดเกณฑ์ ตรงนี้จึงต้องใช้หมึกเข้มอีกขั้นที่ทำไว้แล้ว */
.choice.correct { color: var(--ok-ink); }
.choice.wrong { color: var(--bad-ink); }

/* ชิปเครื่องมือสูง 38px ตามสัดส่วนที่ดูดีในแถว แต่พื้นที่นิ้วต้องได้ 44px ตามเกณฑ์
   ใช้วิธีเดียวกับปุ่มไอคอนอื่นในแอป คือขยายพื้นที่รับสัมผัสด้วย ::after ไม่ขยายตัวชิปเอง */
.q-tools .q-chip::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--tap); transform: translateY(-50%);
}


/* ============================================================
   ชั้นที่ 7 — Master UI (ทอง #EFAA20 / หมึกเข้ม #241F18)
   ------------------------------------------------------------
   ที่มา: "PF Exam Master UIUX" + "PF Exam Full Screens v2"
   สิ่งที่เปลี่ยนจากชั้นที่ 6
     · เลิก "แผ่นเต็มความกว้าง" กลับมาเป็นการ์ดลอยมุมโค้ง 20px + เงาอ่อน
       บนพื้นครีม (Master UI ข้อ 4: ไม่มีเส้นขอบการ์ด ใช้เงาอ่อนแทน)
     · เพิ่มทองสด #EFAA20 เป็น "สีของการกระทำ" แยกจาก --brand (#9A6700)
       ที่เป็นสีตัวอักษร — ของเดิมใช้ค่าเดียวกันทั้งพื้นและตัวอักษร
       ปุ่มหลักจึงดูจม ไม่ดึงสายตา
     · หัวข้อกลุ่มมีขีดทอง 4px นำหน้า และย้ายคำขยายไปชิดขวา
     · หน้าที่มีตัวเลขสำคัญได้หัวจอเป็นแถบเข้ม #241F18 โค้งล่าง 28px
   เขียว/แดงยังสงวนไว้บอกผลคำตอบเท่านั้น (Master UI ข้อ 3)
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–6
   ============================================================ */

/* ------------------------------------------------------------
   7.1 · โทเคน
   ------------------------------------------------------------
   ตั้งใจไม่ตั้งชื่อซ้ำกับ --on-accent เพราะชั้นที่ 4 ผูกโทเคนนั้นไว้กับ
   --brand ของธีมมืดโดยเฉพาะ ถ้ายกมาไว้ที่ :root ปุ่มในธีมสว่าง
   (พื้น #9a6700) จะกลายเป็นหมึกดำบนทองเข้ม = คอนทราสต์ตก
   ทั้งสามธีมเขียนแยกกันครบ เพราะกฎนี้อยู่ท้ายไฟล์ ถ้าเขียนแต่ :root
   ค่าจะไปทับ --bg ของธีมมืดที่ประกาศไว้ก่อนหน้าด้วย specificity เท่ากัน
   ------------------------------------------------------------ */
:root, [data-theme="light"] {
  --acc: #efaa20;              /* ทองสด — พื้นปุ่มหลัก ความคืบหน้า ตัวเลือกที่เลือก */
  --acc-press: #c98a12;
  --acc-ink: #17140d;          /* ตัวอักษรบนพื้น --acc */
  --acc-soft: #fdf0cd;
  --ink: #241f18;              /* พื้นเข้ม — หัวจอ การ์ดเน้น ตัวเลือกที่เลือก */
  --ink-tx: #ffffff;
  --ink-mute: rgba(255, 255, 255, .62);
  --ink-face: rgba(255, 255, 255, .08);
  --ink-line: rgba(255, 255, 255, .14);
  --card-line: #f1ece0;        /* เส้นคั่น "ภายใน" การ์ด — อ่อนกว่า --line */
  --lift: 0 1px 2px rgba(60, 48, 20, .06), 0 8px 20px -16px rgba(60, 48, 20, .5);
  --lift-1: 0 1px 2px rgba(60, 48, 20, .06);
  --r-card: 20px;
  --r-btn: 15px;
  --on-solid: #ffffff;         /* ตัวอักษรบนพื้นทึบ --ok / --bad */
}
/* ⚠️ --bg และ --surface-2 ห้ามอยู่ในบล็อก `:root` เปล่า ๆ ข้างบน
   :root จับ <html> ได้ทุกธีม และกฎนี้อยู่ท้ายไฟล์ จึงจะไปทับ
   `[data-theme="dark"] { --bg: #12100b }` ที่ประกาศไว้ก่อนหน้าด้วย
   specificity เท่ากัน → ธีมมืดจะกลายเป็นพื้นครีมทั้งหน้า */
:root:not([data-theme="dark"]):not([data-theme="reading"]),
[data-theme="light"] {
  --bg: #f4f1e8;
  --surface-2: #f4f1e8;
}
[data-theme="dark"] {
  --acc: #f4bf3f; --acc-press: #e0a91f; --acc-ink: #17140d; --acc-soft: rgba(244, 191, 63, .15);
  --ink: #241f18; --ink-tx: #f4efe4;
  --ink-mute: rgba(244, 239, 228, .62); --ink-face: rgba(255, 255, 255, .07); --ink-line: rgba(255, 255, 255, .12);
  --card-line: #2e2820;
  --lift: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -16px rgba(0, 0, 0, .9);
  --lift-1: 0 1px 2px rgba(0, 0, 0, .45);
  --r-card: 20px; --r-btn: 15px;
  /* ธีมมืดพลิก --ok/--bad เป็นสีสด (#4ade80 / #f87171) ตัวอักษรขาวบนพื้นนั้น
     วัดได้ 1.7–2.8 — ต้องเป็นหมึกเข้มแทน (เหตุผลเดียวกับ --on-accent ของชั้นที่ 4) */
  --on-solid: #17140d;
}
[data-theme="reading"] {
  --acc: #d99b18; --acc-press: #b57f0c; --acc-ink: #1d1708; --acc-soft: #f6e7c0;
  --ink: #2f2718; --ink-tx: #fbf5e8;
  --ink-mute: rgba(251, 245, 232, .7); --ink-face: rgba(255, 255, 255, .09); --ink-line: rgba(255, 255, 255, .15);
  --card-line: #e9dcc0;
  --lift: 0 1px 2px rgba(70, 55, 20, .08), 0 8px 20px -16px rgba(70, 55, 20, .55);
  --lift-1: 0 1px 2px rgba(70, 55, 20, .08);
  --r-card: 20px; --r-btn: 15px;
  --on-solid: #ffffff;
}

/* ------------------------------------------------------------
   7.2 · การ์ดลอย — ย้อนระบบ "แผ่น" ของชั้นที่ 6
   ------------------------------------------------------------
   รายชื่อ selector ต้องตรงกับชุดของชั้นที่ 6 ทุกตัว ไม่งั้นจะเหลือ
   แผ่นเต็มความกว้างปนกับการ์ดลอยอยู่ในหน้าเดียวกัน
   ------------------------------------------------------------ */
.home-body > .ready-card,
.home-body > .set-card,
.home-body > .menu-card,
.home-body > .resume-banner,
.home-body > .setting-switch,
.home-body > .year-pick,
.browse-body > .browse-row,
.browse-body > .browse-hero,
.browse-body > .browse-note,
.history-body > .hsum,
.history-body > .hcard,
.stats-body > .st-card,
.bookmarks-body > .bm-group,
.study-top > .bank-card,
.study-top > .scope-card,
.study-body > .study-card,
.review-body > .review-card,
.laws-body > .laws-note,
.result-body > .analysis,
.v2-sheet,
.v7-card {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--lift);
  width: auto;
  max-width: none;
}
/* กล่องที่เป็นเพียง "ตัวห่อกลุ่ม" — หัวข้อกลุ่มอยู่ข้างในจึงต้องโปร่ง ไม่ใช่การ์ด */
.result-body > #kp-result,
.result-body > #special-result,
.result-body > #improvement,
.result-body > #part-breakdown,
.result-body > #qmap-wrap,
.result-body > #weak-first {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  width: auto;
  max-width: none;
}
.home-body, .browse-body, .history-body, .study-body,
.stats-body, .bookmarks-body, .boss-tab-body, .review-body {
  gap: 11px;
}
.result-body {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 var(--gutter) 8px;
}

/* ------------------------------------------------------------
   7.3 · หัวข้อกลุ่ม — ขีดทอง 4px + คำขยายชิดขวา
   ------------------------------------------------------------ */
.gh,
.section-label,
.hs-listhead,
.study-group-head,
.topic-list-label,
.opt-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 22px 0 12px;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text);
  text-transform: none;
}
.gh:first-child,
.section-label:first-child { margin-top: 12px; }
.gh > .gbar,
.section-label::before,
.hs-listhead::before,
.study-group-head::before,
.topic-list-label::before,
.opt-label::before {
  content: "";
  flex: none;
  width: 4px; height: 17px;
  border-radius: 2px;
  background: var(--acc);
}
.gh > b { font: inherit; }
.gh > i,
.section-label .sl-sub {
  display: block;
  margin: 0 0 0 auto;
  padding-left: 10px;
  text-align: right;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--muted);
}

/* ------------------------------------------------------------
   7.4 · ปุ่ม
   ------------------------------------------------------------
   ทองทึบ = การกระทำหลัก (หน้าละใบเดียว) · ครีม = การกระทำรอง
   เส้นขอบ = การกระทำที่ย้อนไม่ได้ · แดงล้วน = การกระทำที่ลบผลงาน
   ------------------------------------------------------------ */
.btn-primary {
  background: var(--acc);
  border: 0;
  color: var(--acc-ink);
  border-radius: var(--r-btn);
  font-weight: 600;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--acc); color: var(--acc-ink); }
.btn-primary:active { background: var(--acc-press); }
.btn-primary svg { color: var(--acc-ink); }
.btn-primary:disabled, .btn-primary[disabled] { background: color-mix(in srgb, var(--muted) 22%, var(--surface-2)); color: var(--muted); }
.btn-ghost, .btn-secondary {
  background: var(--surface-2);
  border: 0;
  color: var(--text);
  border-radius: var(--r-btn);
  font-weight: 500;
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: var(--r-btn);
  font-weight: 600;
}

/* ------------------------------------------------------------
   7.5 · ตัวเลือกคำตอบ — 4 สถานะตาม Master UI
   ------------------------------------------------------------ */
/* ต้องเจาะจงถึง .quiz-body เพราะชั้นที่ 6 เขียน `.quiz-body .choice` ไว้ (0,2,0)
   ถ้าเขียนแค่ `.choice` (0,1,0) มุมโค้งกับเงาจะไม่ถูกทับ */
.choice,
.quiz-body .choice {
  border-radius: 17px;
  border: 0;
  background: var(--card);
  box-shadow: var(--lift-1);
  min-height: var(--choice-h);
}
.choice > .letter, .choice > .lab {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
}
.choice.selected {
  background: var(--ink);
  border: 0;
  color: var(--ink-tx);
  box-shadow: none;
}
.choice.selected > .letter, .choice.selected > .lab {
  background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700;
}
.choice.selected .ctext { color: var(--ink-tx); }
.choice.correct {
  background: var(--ok-soft); border: 0; box-shadow: none; color: var(--ok-ink, var(--ok));
}
.choice.correct > .letter, .choice.correct > .lab { background: var(--ok); border-color: var(--ok); color: var(--on-solid); }
.choice.wrong {
  background: var(--bad-soft); border: 0; box-shadow: none; color: var(--bad-ink, var(--bad));
}
.choice.wrong > .letter, .choice.wrong > .lab { background: var(--bad); border-color: var(--bad); color: var(--on-solid); }

/* ------------------------------------------------------------
   7.6 · ชิป
   ------------------------------------------------------------ */
.chip-btn { border-radius: 18px; border: 0; background: var(--surface-2); color: var(--muted); font-weight: 500; }
.chip-btn.active, .chip-btn.on { background: var(--ink); color: var(--ink-tx); font-weight: 600; border: 0; }
.chip-btn.active svg, .chip-btn.on svg { color: var(--acc); }

/* ------------------------------------------------------------
   7.7 · แถบเมนูล่าง — แคปซูลครีมขอบทองอ่อน
   ------------------------------------------------------------
   เดิม box-shadow มีแค่ var(--lift) (เงาฟุ้งเบา ๆ) ไม่มีขอบหนาแบบของกดได้ชิ้นอื่น
   ในแอป (.btn-primary, .choice.selected ใช้สูตร "เส้นขอบทึบไม่เบลอ + เงาฟุ้งซ้อน")
   แคปซูลจึงดูแบนกว่าปุ่ม/การ์ดรอบข้าง — เติมขอบล่างทึบสี --acc-press (โทนกดของ
   --acc เอง มีให้ทั้ง 3 ธีมอยู่แล้ว) หนา 3px เท่า --pz ของปุ่มหลัก แล้วเปลี่ยนเงาฟุ้ง
   จาก --lift (เบา) เป็น --shadow-lift (ใหญ่กว่า ใช้กับของ "ลอย" เช่นการ์ด hover/โมดัล)
   ให้สมกับที่มันเป็นแผงลอยจริง ๆ (position: fixed เว้นช่องว่างจากขอบจอ)
   ------------------------------------------------------------ */
.bottom-nav {
  background: var(--acc-soft);
  border: 1px solid color-mix(in srgb, var(--acc) 35%, var(--card));
  border-radius: 22px;
  padding: 7px 4px;
  box-shadow: 0 3px 0 var(--acc-press), var(--shadow-lift);
}
.nav-btn { border-radius: 16px; color: var(--muted); }
.nav-btn.active {
  background: color-mix(in srgb, var(--acc) 42%, var(--card));
  /* Master UI วางไว้เป็น #9A6700 บน #F6E4B4 ซึ่งวัดได้ 3.87 — ต่ำกว่า AA ที่ 11px
     จึงใช้ --brand-dark แทน (5.22) สีและน้ำหนักตัวอักษรยังอ่านเป็นทองเหมือนเดิม */
  color: var(--brand-dark);
  font-weight: 600;
}
.nav-btn.active svg { color: var(--brand-dark); }
/* ธีมมืด: --brand-dark เป็นทองอ่อน (#ffd77a) ถ้าพื้นแคปซูลผสมทอง 42%
   จะกลายเป็นทองบนทอง (3.6) — ลดสัดส่วนทองให้พื้นยังเข้มอยู่ */
[data-theme="dark"] .nav-btn.active { background: color-mix(in srgb, var(--acc) 20%, var(--card)); }

/* ------------------------------------------------------------
   7.8 · หน้าแรก — หัวจอเข้มกลืนกับการ์ด "ความพร้อมสอบ" เป็นก้อนเดียว
   ------------------------------------------------------------
   ตาม Full Screens v2 หน้า 1: ชื่อแอป + วงแหวนความพร้อม อยู่ในแถบเข้ม
   ก้อนเดียวกัน แล้วโค้งมนที่ขอบล่าง 28px ก่อนจะถึงการ์ดสีขาว
   ทำด้วย CSS ล้วน ไม่ย้าย markup — .home-hero กับ .ready-card
   เป็นคนละพี่น้องกัน จึงให้ .ready-card ถอยขอบออกเท่า --gutter
   แล้วรับมุมโค้งล่างไปแทน
   ------------------------------------------------------------ */
.home-hero {
  /* ชั้นที่ 3 ตั้ง background/border-radius ไว้ด้วย !important จึงต้องสู้ด้วย !important */
  background: var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink-tx);
  margin-bottom: 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: 4px;
}
.home-hero h1 { color: var(--ink-tx); }
.home-hero .hero-h-sub { color: var(--ink-mute); }
.home-hero p { color: var(--ink-mute); }
.home-hero .hchip {
  background: var(--ink-face);
  border-color: var(--ink-line);
  color: var(--ink-tx);
}
.home-hero .hchip svg { color: var(--acc); }
.settings-fab { background: var(--ink-face); border-color: var(--ink-line); color: var(--ink-tx); }
.settings-fab:hover { color: var(--acc); }

.home-body { padding-top: 0; }
.home-body > .ready-card {
  margin: 0 calc(var(--gutter) * -1);
  padding: 14px var(--gutter) 22px;
  background: var(--ink);
  color: var(--ink-tx);
  border-radius: 0 0 28px 28px;
  box-shadow: none;
}
.home-body > .ready-card .ready-eyebrow { color: var(--ink-mute); }
.home-body > .ready-card .ready-tx b { color: var(--ink-tx); }
.home-body > .ready-card .ready-hint { color: var(--ink-mute); }
.home-body > .ready-card .rr-track { stroke: var(--ink-line); }
.home-body > .ready-card .rr-goal { stroke: var(--ink-tx); opacity: .3; }
.home-body > .ready-card .rr-path { stroke: var(--acc); }
.home-body > .ready-card.is-pass .rr-path { stroke: #4ade80; }
.home-body > .ready-card.is-warn .rr-path { stroke: var(--acc); }
.home-body > .ready-card.is-empty .rr-path { stroke: var(--ink-mute); }
.home-body > .ready-card .rr-mid b { color: var(--ink-tx); }
.home-body > .ready-card .rr-mid b span { color: var(--ink-mute); }
.home-body > .ready-card .rr-mid i,
.home-body > .ready-card.is-pass .rr-mid i { color: var(--ink-mute); }
.home-body > .ready-card .ready-meta {
  border-top: 1px solid var(--ink-line);
  gap: 8px;
}
.home-body > .ready-card .ready-meta .rm-item {
  background: var(--ink-face); border-radius: 14px; padding: 10px 6px;
}
.home-body > .ready-card .ready-meta .rm-item b { color: var(--ink-tx); }
.home-body > .ready-card .ready-meta .rm-item span { color: var(--ink-mute); }
/* การ์ดใบถัดไปต้องเว้นจากก้อนเข้มเท่าระยะการ์ดปกติ (flex gap ให้มาแล้ว 11px) */

/* ------------------------------------------------------------
   7.9 · หน้าทำข้อสอบ — หัวจอเข้ม เวลาเป็นแคปซูลทอง
   ------------------------------------------------------------ */
#screen-quiz > .topbar {
  background: var(--ink);
  /* คงเส้นล่าง 1px ไว้ (แค่เปลี่ยนสีให้กลืน) — ถ้าตั้งเป็น 0 แถบจะเตี้ยลง 1px
     แล้วโผล่เป็นเส้นครีมคั่น เพราะ sticky top ของ .progress-row ตรึงไว้ที่ 63px */
  border-bottom: 1px solid var(--ink);
  color: var(--ink-tx);
  /* ห้ามแตะ padding ของ .topbar — ความสูง 63px ของมันคือค่าที่ sticky top
     ของ .progress-row อ้างอิงอยู่ (calc(safe-area + 63px)) ถ้าเปลี่ยนจะเกิด
     เส้นครีมคั่นกลางแถบเข้ม */
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#screen-quiz > .topbar .topbar-title,
#screen-quiz > .topbar .topbar-sub { color: var(--ink-tx); }
#screen-quiz > .topbar .icon-btn,
#screen-quiz > .topbar .round-btn {
  background: var(--ink-face); border-color: var(--ink-line); color: var(--ink-tx);
}
#screen-quiz > .progress-row {
  background: var(--ink);
  border-bottom: 0;
  border-radius: 0 0 28px 28px;
  padding: 4px var(--gutter) 18px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#screen-quiz > .progress-row .qcount { color: var(--ink-mute); }
#screen-quiz > .progress-row .qcount b { color: var(--ink-tx); }
#screen-quiz > .progress-row .progress-track { background: var(--ink-line); box-shadow: none; }
#screen-quiz > .progress-row .progress-fill { background: var(--acc); }
#screen-quiz > .progress-row .timer-chip {
  background: var(--acc); color: var(--acc-ink);
  padding: 7px 13px; font-size: 13.5px; font-weight: 700;
}
#screen-quiz > .progress-row .timer-chip.pressure,
#screen-quiz > .progress-row #timer.pressure { background: #f87171; color: #17140d; }
/* หัวจอ 3 ช่อง: ปิด · เวลา · หยุดพัก — ชื่อชุดข้อสอบไม่ต้องแสดงตรงนี้
   (เห็นตอนกดเริ่มและเห็นอีกทีในหน้าสรุปผล) พื้นที่ตรงกลางเป็นของเวลาอย่างเดียว */
#screen-quiz > .topbar { justify-content: space-between; gap: 10px; padding-inline: var(--gutter); }
#screen-quiz > .topbar .topbar-title { display: none; }
#screen-quiz > .topbar .icon-btn {
  width: 42px; height: 42px; flex: none;
  border-radius: 14px; border: 0;
  background: var(--ink-face); color: var(--ink-tx);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0;
}
#screen-quiz > .topbar .icon-btn svg { width: 18px; height: 18px; }
#screen-quiz > .progress-row .timer-chip,
#screen-quiz > .topbar .timer-chip {
  margin: 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 21px;
  background: var(--acc); color: var(--acc-ink);
  font-size: 15px; font-weight: 700;
}
#screen-quiz > .topbar .timer-chip > svg { width: 16px; height: 16px; }
#screen-quiz > .topbar .timer-chip.pressure,
#screen-quiz > .topbar #timer.pressure { background: #f87171; color: #17140d; }

#screen-quiz > .progress-row { padding-bottom: 12px; }
#screen-quiz > .progress-row .qskip { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }
#screen-quiz > .progress-row .qskip.zero { opacity: .55; }

/* แถวนับสถานะ — ปิดท้ายแถบเข้ม จึงรับมุมโค้งล่างแทน progress-row
   ตั้งใจไม่ทำ sticky: ค่าออฟเซ็ตจะต้องเป็นเลขตายตัวที่ผูกกับความสูงของสองแถบข้างบน
   ซึ่งพังทันทีที่ชื่อชุดข้อสอบยาวจนแถบบนขึ้นสองบรรทัด */
#screen-quiz > .progress-row { border-radius: 0; }
.qstat-row {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0; padding: 0 var(--gutter) 16px;
  background: var(--ink);
  border-radius: 0 0 28px 28px;
}
.qstat { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-mute); }
.qstat > i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.qstat.done > i { background: var(--acc); }
.qstat.skip > i { background: rgba(255, 255, 255, .35); }
.qstat.todo > i { background: rgba(255, 255, 255, .14); }
.qstat > b { color: var(--ink-tx); font-weight: 600; }

/* --- การ์ดโจทย์ --- */
.quiz-body { padding-top: 14px; }
.quiz-body > .qwrap {
  background: var(--card);
  border: 0; border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 16px;
  margin: 0 0 3px;
}
.qhead { display: flex; align-items: flex-start; gap: 10px; }
.q-num-badge {
  position: static; flex: none;
  width: 40px; height: 40px; padding: 0;
  border-radius: 13px; background: var(--ink); border: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.q-num-badge > b { font-size: 15px; font-weight: 700; line-height: 1; color: var(--acc); }
.q-num-badge > i { margin-top: 2px; font-style: normal; font-size: 7.5px; line-height: 1; color: var(--ink-mute); }
.qhead-tx { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 6px; padding-top: 1px; flex-wrap: nowrap; }
.qhead-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 10px; margin-left: auto; flex: none; }
/* ชิปวิชาเคยเป็นแคปซูลพื้นสี — ในการ์ดนี้เหลือแค่จุดสีกับตัวหนังสือ
   สีพื้น/สีอักษรถูกฝังไว้ที่ตัว element โดย readableInk() จึงต้องใช้ !important ล้าง */
.qhead .subject-chip {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0;
  color: var(--muted) !important;
  font-size: 11px; font-weight: 500; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 7px;
  flex: 1 1 0; min-width: 0; overflow: hidden;
}
.qhead .subject-chip #subject-chip-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qhead .subject-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.qhead .freq-row { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 10.5px; color: var(--brand); }
.qhead .year-chip {
  padding: 3px 8px; border-radius: 11px; border: 0;
  background: var(--surface-2); color: var(--muted);
  font-size: 10px; font-weight: 500;
}
.q-star {
  flex: none; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 13px; cursor: pointer;
  background: var(--surface-2); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.q-star svg { width: 18px; height: 18px; }
.q-star.on { background: var(--acc-soft); color: var(--brand-dark); }
.q-star.on svg { fill: var(--acc); stroke: var(--brand-dark); }
.qwrap .instruction { display: none; }
.qwrap .question-text {
  margin-top: 6px; padding: 0;
  font-size: 18px; font-weight: 500; line-height: 1.8; color: var(--text);
  text-wrap: pretty;
}
/* แถวเครื่องมือ — ไอคอนวงกลมชิดขวา ไม่มีเส้นคั่น */
.qwrap .q-tools {
  margin: 10px 0 0; padding-top: 0;
  border-top: 0;
  justify-content: flex-end; overflow: visible;
}
.qwrap .q-tools .q-chip {
  flex: 0 0 auto;
  width: 36px; height: 36px; min-height: 0; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--muted);
  font-size: 0;
  justify-content: center;
}
.qwrap .q-tools .q-chip > span { display: none; }
.qwrap .q-tools #hint-btn,
.qwrap .q-tools #scratch-open {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted);
  box-shadow: none;
}
.qwrap .q-tools #hint-btn { background: var(--acc-soft); color: var(--brand-dark); border-color: var(--brand, #d4a020); }
.qwrap .q-tools #hint-btn > svg { color: var(--brand-dark); }
.qwrap .q-tools #hint-btn.active { background: var(--ink); color: var(--acc); border-color: var(--ink); }
.qwrap .q-tools #hint-btn.active > svg { color: var(--acc); }
.qwrap .q-tools .q-chip > svg { width: 17px; height: 17px; }

/* --- แถบล่าง: ❮ | ข้อต่อไป | ข้ามไว้ · คำอธิบาย · ส่งคำตอบ --- */
#screen-quiz > .v2-bar {
  /* relative + z-index สูงกว่าแผ่นเฉลย (60) และฉากหลัง (59)
     เพื่อให้ปุ่ม ❮ / ข้อต่อไป / ส่งกระดาษคำตอบ กดได้ตลอดแม้เปิดเฉลยค้างไว้
     ต้องเป็น relative ไม่ใช่ static เพราะ z-index ไม่มีผลกับกล่องที่ไม่ได้จัดตำแหน่ง */
  position: relative; z-index: 61; flex: none;
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px -18px rgba(60, 48, 20, .6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-top: 10px;
}
#screen-quiz > .v2-bar > .btn-explain {
  display: block; width: auto;
  margin: 0 0 8px auto; padding: 5px 14px;
  font-size: 12px; min-height: 0; border-radius: var(--r-pill);
}
#screen-quiz .v2-bar .action-row .btn { min-height: 54px; border-radius: var(--r-btn); }
#screen-quiz .v2-bar .action-row .btn-prev-ico { flex: 0 0 58px; width: 58px; padding: 0; }
#screen-quiz .v2-bar .action-row .btn-skip { flex: 0 0 88px; width: 88px; padding: 0; font-size: 13px; }
#screen-quiz .v2-bar .action-row .btn-skip.on { background: var(--acc-soft); color: var(--brand-dark); font-weight: 600; }
#screen-quiz .v2-bar .action-row .btn-primary { flex: 1 1 auto; min-width: 0; font-size: 15.5px; }
#screen-quiz .v2-bar .bar-hint { display: none; }
#screen-quiz .v2-bar .btn-submit {
  width: 100%; margin-top: 10px; min-height: 46px;
  border-radius: var(--r-md); font-size: 13.5px;
}

/* --- เฉลยเป็น popup bottom-sheet --- */
#screen-quiz .explanation {
  /* วางชิดขอบบนของแถบปุ่ม ไม่ใช่ขอบล่างจอ — --v2bar-h เขียนโดย syncBarHeight() ใน app.js
     (ค่า fallback 0px ใช้ตอนที่ยังไม่ทันวัด แผ่นเฉลยจะยังทำงานได้เหมือนเดิม) */
  position: fixed; bottom: var(--v2bar-h, 0px); left: 50%;
  width: min(100%, var(--maxw, 480px));
  /* กันไม่ให้แผ่นสูงจนดันโจทย์หายไปหมด: เหลือพื้นที่ด้านบนไว้อย่างน้อย 132px */
  max-height: min(60vh, calc(100dvh - var(--v2bar-h, 0px) - 132px));
  overflow-y: auto;
  transform: translate(-50%, 100%);
  margin: 0; z-index: 60;
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  background: var(--card); border: 0; border-top: 3px solid var(--brand);
  padding: 18px 20px;
  transition: transform .25s ease;
}
#screen-quiz .explanation.show {
  display: block;
  /* ปิด @keyframes fade ที่ .explanation.show ทั่วไปตั้งไว้ — คีย์เฟรมนั้นสั่ง transform ด้วย
     (from: translateY(6px) → to: none) ซึ่งชนะกฎธรรมดาระหว่างที่เล่นอยู่
     ผลคือ translate(-50%) ถูกล้างชั่วคราว แผ่นเลยกระตุกไปทางขวาครึ่งจอตอนเปิด
     แผ่นนี้มี transition: transform ของตัวเองเลื่อนขึ้นอยู่แล้ว ไม่ต้องใช้คีย์เฟรมซ้อน */
  animation: none;
  transform: translate(-50%, 0);
}
#screen-quiz .explanation .exp-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
}
#screen-quiz .explanation .exp-close {
  margin-left: auto;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex: none;
}
#screen-quiz .explain-backdrop {
  /* เว้นแถบปุ่มล่างไว้ ไม่งั้นฉากหลังจะกินคลิกของปุ่มไปหมด (กดแล้วกลายเป็นปิดเฉลยแทน) */
  position: fixed; inset: 0 0 var(--v2bar-h, 0px) 0; z-index: 59;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
#screen-quiz .explain-backdrop.show {
  opacity: 1; pointer-events: auto;
}

/* ปุ่มเปลี่ยนธีมย้ายมาอยู่ในหน้าหยุดพัก — กว้างพอจะมีป้ายกำกับแล้ว
   (ข้อความมาจาก syncQuizThemeIcon ใน app.js ไม่ใช่ ::after เพราะชั้นที่ 4
   จอง .round-btn::after ไว้ทำพื้นที่รับสัมผัสอยู่แล้ว) */
.pause-box .quiz-theme-btn {
  width: auto; min-height: 44px; margin-top: 14px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-btn);
  background: var(--surface-2); color: var(--muted);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.pause-box .quiz-theme-btn svg { width: 17px; height: 17px; flex: none; }

/* ------------------------------------------------------------
   7.10 · หน้าสรุปผล — หัวจอเข้ม + ตาราง ก.พ. + ผลรายข้อ
   ------------------------------------------------------------ */
#screen-summary { padding: 0; }

.sm-hero {
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) 24px;
  background: var(--ink);
  border-radius: 0 0 28px 28px;
  color: var(--ink-tx);
  box-shadow: none;
  border: 0;
}
.sm-hero-h { text-align: center; }
.sm-hero-h h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink-tx); }
.sm-hero-h .sub { margin-top: 5px; font-size: 11.5px; font-weight: 400; line-height: 1.6; color: var(--ink-mute); }

.sm-score { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.sm-ring { position: relative; width: 112px; height: 112px; flex: none; }
.sm-ring svg { width: 112px; height: 112px; display: block; }
.sm-ring .sm-rt { fill: none; stroke: var(--ink-line); stroke-width: 14; }
.sm-ring .sm-rp {
  fill: none; stroke: var(--acc); stroke-width: 14; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .9s cubic-bezier(.22, .8, .3, 1);
}
.sm-hero.fail .sm-ring .sm-rp { stroke: #f87171; }
.sm-ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sm-ring-mid b { font-size: 29px; font-weight: 700; line-height: 1; color: var(--ink-tx); }
.sm-ring-mid i { margin-top: 5px; font-style: normal; font-size: 10.5px; line-height: 1; color: var(--ink-mute); }

.sm-verdict { flex: 1; min-width: 0; }
.sm-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 15px;
  background: rgba(74, 222, 128, .16);
}
.sm-pill > i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex: none; }
.sm-pill > b { font-size: 12px; font-weight: 600; color: #86efac; }
.sm-pill.fail { background: rgba(240, 113, 113, .16); }
.sm-pill.fail > i { background: #f87171; }
.sm-pill.fail > b { color: #fca5a5; }
.sm-say {
  margin: 11px 0 0; font-size: 12px; font-weight: 400; line-height: 1.7;
  color: var(--ink-mute); text-wrap: pretty;
}
.sm-rule { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, .5); }
[data-theme="dark"] .sm-rule, [data-theme="reading"] .sm-rule { color: var(--ink-mute); }

.sm-tiles { display: flex; gap: 8px; margin-top: 20px; }
.sm-tile { flex: 1; min-width: 0; background: var(--ink-face); border-radius: 14px; padding: 12px; }
.sm-tile b { display: block; font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--ink-tx); }
.sm-tile b .den { font-size: 12px; font-weight: 400; color: var(--ink-mute); }
.sm-tile i { display: block; margin-top: 4px; font-style: normal; font-size: 10px; color: var(--ink-mute); }
.sm-cheer { margin: 14px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-mute); text-wrap: pretty; }
.sm-cheer:empty { display: none; }

/* ตาราง ก.พ. รายวิชา — คงรูปแบบใบคะแนนจริง (วิชา / คะแนนเต็ม / คะแนนที่ได้)
   แล้วเติมแถบเทียบเกณฑ์ที่มีขีดดำ ตามที่หัวข้อกลุ่มบอกไว้ */
#kp-result .v7-card { padding: 4px 16px; }
#kp-result .result-table { width: 100%; border-collapse: collapse; background: none; border: 0; box-shadow: none; }
#kp-result .result-table th {
  padding: 12px 0 10px; border: 0; border-bottom: 1px solid var(--card-line);
  background: none; text-align: right;
  font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--muted);
}
#kp-result .result-table th.col-subject { text-align: left; }
#kp-result .result-table th.col-w { width: 62px; padding-left: 8px; }
#kp-result .result-table td {
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--card-line);
  background: none; vertical-align: top;
}
#kp-result .result-table tr:last-child td { border-bottom: 0; }
#kp-result .result-table td.num {
  width: 62px; padding-left: 8px; text-align: right; white-space: nowrap;
  font-size: 15px; font-weight: 700; color: var(--text);
}
#kp-result td.num.got-pass { color: var(--ok); }
#kp-result td.num.got-fail { color: var(--bad); }
#kp-result .subj-name { font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--text); }
#kp-result .subj-crit { margin-top: 4px; font-size: 11px; line-height: 1.55; color: var(--brand); }
.kp-bar {
  position: relative; height: 10px; margin-top: 10px;
  border-radius: 5px; background: var(--surface-2);
}
.kp-bar > i {
  display: block; height: 100%; border-radius: 5px;
  transition: width .8s cubic-bezier(.22, .8, .3, 1);
}
.kp-bar > i.ok { background: var(--ok); }
.kp-bar > i.bad { background: var(--bad); }
.kp-goal {
  position: absolute; top: -3px; width: 2px; height: 16px;
  border-radius: 1px; background: var(--ink);
}
[data-theme="dark"] .kp-goal { background: var(--text); }
.kp-gap { margin-top: 7px; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.passmark-note { margin: 10px 2px 0; font-size: 10.5px; line-height: 1.6; color: var(--muted); }

/* ผลรายข้อ */
#qmap-wrap .v7-card { padding: 16px; }
.qmap-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 13px; }
.qml { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--muted); }
.qml > i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.qml > i.ok { background: var(--ok); }
.qml > i.bad { background: var(--bad); }
.qml > i.mark { background: var(--acc); }
.qmap-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px 5px; }
/* ช่องหนึ่ง = ปุ่มสี (ถูก/ผิด) + เวลาที่ใช้ห้อยอยู่ใต้ปุ่ม
   เวลาอยู่นอกปุ่มเพราะถ้าวางทับพื้นเขียว/แดงจะอ่านไม่ออก และสีของมันต้อง
   สื่อ "เร็ว/ช้า" อิสระจากสี "ถูก/ผิด" — สองสัญญาณคนละเรื่องกัน */
.qm-cell { display: flex; flex-direction: column; min-width: 0; }
.qm {
  aspect-ratio: 1; min-width: 0; padding: 0;
  border: 0; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 9.5px; font-weight: 600;
  color: var(--on-solid);
}
.qm.ok { background: var(--ok); }
.qm.bad { background: var(--bad); }
.qm.mark { background: var(--acc); color: var(--acc-ink); }
.qm:active { transform: scale(.9); }
.qm-t {
  display: block; margin-top: 3px;
  font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  text-align: center; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.qm-t.t2 { color: var(--ok-ink, var(--ok)); }
.qm-t.t3 { color: var(--brand-dark, var(--brand)); }
.qm-t.t4 { color: var(--bad-ink, var(--bad)); }
/* ชุดเก่าที่กู้คืนมาไม่มีนาฬิการายข้อ — ซ่อนบรรทัดเวลาไปเลย ดีกว่าโชว์ "0ว" ทั้งตาราง */
.qmap-grid.no-time .qm-t { display: none; }
.qml > i.qt { border-radius: 3px; }
.qml > i.qt.t1 { background: var(--muted); }
.qml > i.qt.t2 { background: var(--ok); }
.qml > i.qt.t3 { background: var(--brand); }
.qml > i.qt.t4 { background: var(--bad); }
.qmap-foot { margin-top: 12px; font-size: 10.5px; line-height: 1.6; color: var(--muted); }

/* ---- สรุปเวลา: ยุบกล่อง "เวลาที่ใช้ไป" มาไว้ในการ์ดผลรายข้อใบเดียวกัน ----
   หัวจอ (sm-tile) โชว์ "เวลาที่ใช้" ไปแล้ว ตรงนี้จึงไม่ทวนซ้ำ
   เหลือเฉพาะสามค่าที่หัวจอไม่ได้บอก: โควตาที่ให้ · เฉลี่ยต่อข้อ · เหลือ/เกิน */
.qt-sum { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--card-line); }
.qt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qt-tile { padding: 11px 8px; border-radius: 13px; background: var(--surface-2); text-align: center; }
.qt-tile b {
  display: block; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--text);
}
.qt-tile i { display: block; margin-top: 5px; font-size: 9px; font-style: normal; line-height: 1.4; color: var(--muted); }
.qt-tile.ok b { color: var(--ok-ink, var(--ok)); }
.qt-tile.bad b { color: var(--bad-ink, var(--bad)); }
.qt-verdict {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 11px;
  font-size: 11.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty;
}
.qt-verdict svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand); }
.qt-verdict.bad svg { color: var(--bad); }
.qt-verdict b { color: var(--text); font-weight: 700; }

/* เวลาแยกตามหมวด — แถวเดียวจบต่อหมวด (เดิมเป็นการ์ดแยกสูงกว่านี้สามเท่า) */
.qt-subs { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--card-line); }
.qts-h { margin-bottom: 9px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.qts-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.qts-nm {
  flex: 0 0 32%; min-width: 0; font-size: 11px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qts-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--card-line); overflow: hidden; }
.qts-bar > i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--sub, var(--acc));
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.qts-v {
  flex: none; text-align: right; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qts-v > i { display: block; margin-top: 2px; font-size: 9px; font-style: normal; font-weight: 500; color: var(--muted); }
.qts-v.ok { color: var(--ok-ink, var(--ok)); }
.qts-v.bad { color: var(--bad-ink, var(--bad)); }

/* "ข้อที่กินเวลามากที่สุด" — หุบไว้ ไม่ให้กินความสูงตอนยังไม่ได้อยากดู */
.qt-more { margin-top: 13px; border-top: 1px solid var(--card-line); }
.qt-more-h {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 0 3px; cursor: pointer; list-style: none;
  font-size: 11.5px; font-weight: 700; color: var(--text);
}
.qt-more-h::-webkit-details-marker { display: none; }
.qt-more-h svg { width: 15px; height: 15px; margin-left: auto; color: var(--muted); transition: transform .2s; }
.qt-more[open] .qt-more-h svg { transform: rotate(180deg); }
/* แถว .trq มี padding ซ้าย-ขวา 16px ของตัวเอง ดึงให้เต็มขอบการ์ดจะได้ไม่เยื้องซ้อนสองชั้น */
.qt-more .tr-slowest { margin: 4px -16px 0; }

/* เรื่องที่ควรเสริมก่อน */
.wf-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--card-line); }
.wf-row:last-child { border-bottom: 0; }
.wf-bar { width: 5px; height: 26px; border-radius: 3px; flex: none; }
.wf-bar.bad { background: var(--bad); }
.wf-bar.warn { background: var(--acc); }
.wf-tx { flex: 1; min-width: 0; }
.wf-tx b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--text); }
.wf-tx span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.wf-tx span:empty { display: none; }
.wf-sc { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.wf-sc.bad { color: var(--bad); }
.wf-sc.warn { color: var(--warn-ink, var(--warn)); }

/* การ์ดยืนยันความถูกต้องท้ายหน้า */
.sm-trust { display: flex; gap: 11px; align-items: flex-start; padding: 16px; margin-top: 22px; }
.sm-trust svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--brand); }
.sm-trust p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }

/* แถบท้ายที่ติดหน้าจอ */
.result-actions.sm-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  margin: 22px calc(var(--gutter) * -1) 0;
  padding: 14px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: var(--card);
  box-shadow: 0 -8px 20px -18px rgba(60, 48, 20, .6);
}
.result-actions.sm-bar .btn { width: 100%; }
.result-actions.sm-bar #btn-weak { height: 54px; font-size: 15.5px; }
.result-actions.sm-bar .result-main-btns { display: flex; gap: 10px; }
.result-actions.sm-bar .result-main-btns .btn { flex: 1; height: 48px; font-size: 13px; }

/* หน้านี้ไม่มีแถบเมนูล่าง — ชั้นที่ 6 เว้นที่ให้แคปซูลเมนูไว้ 96px
   ถ้าไม่ล้าง แถบท้ายจะลอยขึ้นก่อนถึงขอบจอ (ค่า data-screen ที่ app.js เขียนคือ "summary") */
.app[data-screen="summary"] { padding-bottom: 0; }

/* ลายน้ำหน้าสรุปผล — เดิมหมุนทั้งกล่อง position:fixed ทำให้กล่องสี่เหลี่ยมล้อมรอบ
   กว้างกว่าจอ และดัน scrollWidth ของเอกสารออกไป 80px (ไฟล์นี้ไม่มี overflow-x
   กันไว้ที่ html/body) ย้ายการหมุนไปที่ตัวอักษร ภาพเหมือนเดิมแต่กล่องไม่บาน */
.result-watermark { transform: none; }
.result-watermark .wm-l1,
.result-watermark .wm-l2 { transform: rotate(-28deg); }

/* ระหว่างหน้าตรวจข้อสอบยังทำงาน ให้เนื้อหาข้างหลังเบลอเหมือนเดิม */
#screen-summary.loading .result-body { filter: blur(4px); opacity: .5; }

/* ข้อที่ถูกเปิดมาจากตาราง "ผลรายข้อ" — วงทองรอบใบให้เห็นว่ามาถึงข้อไหน */
.review-card.rv-focus { box-shadow: var(--lift), 0 0 0 2px var(--acc); }

/* ============================================================
   Scrollbar theming — ใช้ CSS custom properties ให้เปลี่ยนตามธีม
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 3px;
  transition: background .15s;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ============================================================
   ชั้นที่ 8 — เวลา · การวิเคราะห์รายหมวด · ปุ่มที่กดแล้วรู้สึกว่ากด
   ------------------------------------------------------------
   สิ่งที่ชั้นนี้เพิ่ม
     · 8.1 ระบบ "ปุ่มมีมิติ" — ของกดได้ทุกชิ้นมีขอบล่างหนา กดแล้วยุบลงจริง
     · 8.2 นาฬิกาหน้าปัดเดินได้บนหัวจอทำข้อสอบ
     · 8.3 ป้ายจังหวะเวลา (เร็ว/ช้ากว่าแผน)
     · 8.4 แท็บใหญ่ของหน้าสรุปผล
     · 8.5 ตารางผลรายข้อ มุมมอง "เวลาที่ใช้"
     · 8.6 การ์ดวิเคราะห์เวลา
     · 8.7 กราฟแมงมุมแยก 3 หมวด
     · 8.8 เรื่องที่ควรเสริม จัดกลุ่มตามหมวดวิชา
     · 8.9 ส่วนเพิ่มของหน้าสถิติ
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–7
   ============================================================ */

/* ------------------------------------------------------------
   8.1 · ระบบปุ่มมีมิติ
   ------------------------------------------------------------
   หลักการ: ของกดได้ = มี "ความหนา" ที่ขอบล่าง (box-shadow แนวตั้งแข็ง ไม่เบลอ)
   กดแล้วตัวปุ่มเลื่อนลงมาเท่าความหนานั้นพอดี เงาหายไป = เหมือนกดปุ่มจริงจนสุด
   ใช้ --pz คุมความหนาต่อชนิดของปุ่ม จะได้ปรับทีเดียวทั้งระบบ

   ⚠️ ไม่แตะ transform ของปุ่มที่ชั้นก่อนหน้าใช้จัดตำแหน่งอยู่แล้ว
      (เช่น .hc-del ที่ใช้ translateY(-50%) จัดกึ่งกลางแนวตั้ง) — รายชื่อข้างล่าง
      จึงเลือกเฉพาะปุ่มที่ transform ว่างจริง ๆ
   ⚠️ .qm มี aspect-ratio + grid — ใส่ margin-bottom เท่าความหนาไม่ได้
      ไม่งั้นตารางจะสูงเกิน จึงใช้ inset shadow แทนความหนาในกรณีนั้น
   ------------------------------------------------------------ */
.btn, .icon-btn, .chip-btn, .choice, .menu-card, .topic-row, .browse-row,
.sm-tab, .qv-btn, .trq, .nav-btn, .ck-cell, .analysis-toggle, .tip-chip,
.wt-lesson-h, .year-btn, .rs-opt, .modal-close, .qm {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
/* ปุ่มหลัก/ปุ่มรอง — ความหนา 3px แล้วยุบลง 3px ตอนกด */
.btn {
  --pz: 3px;
  position: relative;
  transition: transform .09s ease, box-shadow .09s ease, background .15s ease;
  will-change: transform;
}
.btn-primary {
  box-shadow: 0 var(--pz) 0 var(--acc-press), 0 6px 14px -8px rgba(60, 48, 20, .6);
}
.btn-ghost, .btn-secondary {
  box-shadow: 0 var(--pz) 0 var(--line), var(--lift-1);
}
.btn:active:not(:disabled) {
  transform: translateY(var(--pz));
  box-shadow: 0 0 0 var(--acc-press);
}
.btn-ghost:active:not(:disabled), .btn-secondary:active:not(:disabled) {
  box-shadow: 0 0 0 var(--line);
}
.btn:disabled { box-shadow: none; opacity: .55; }
/* ปุ่มกลม/ไอคอน — ยุบ 2px */
.icon-btn, .modal-close {
  --pz: 2px;
  transition: transform .09s ease, box-shadow .09s ease, background .15s ease;
}
.icon-btn:active, .modal-close:active { transform: translateY(var(--pz)) scale(.96); }
/* ชิป/แท็บ — ยุบ 1px ก็พอ ตัวเล็กเกินกว่าจะยุบเยอะ */
.chip-btn, .tip-chip, .qv-btn, .sm-tab, .year-btn, .rs-opt {
  transition: transform .09s ease, box-shadow .09s ease, background .15s ease, color .15s ease;
}
.chip-btn:active, .tip-chip:active, .qv-btn:active, .sm-tab:active, .year-btn:active {
  transform: translateY(1px) scale(.98);
}
/* ตัวเลือกคำตอบ — ก้อนใหญ่สุดของแอป ให้ความหนา 3px และมีวงกระเพื่อมตอนแตะ */
.choice, .quiz-body .choice {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 0 var(--line), var(--lift-1);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease, border-color .15s ease;
}
.choice:active:not(.disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.choice.selected { box-shadow: 0 3px 0 var(--acc-press), var(--lift-1); }
.choice.correct { box-shadow: 0 3px 0 color-mix(in srgb, var(--ok) 70%, #000); }
.choice.wrong { box-shadow: 0 3px 0 color-mix(in srgb, var(--bad) 70%, #000); }
.choice.disabled { box-shadow: var(--lift-1); }
/* วงกระเพื่อมจากจุดที่นิ้วแตะ — app.js ตั้ง --rx/--ry ให้ตอน pointerdown */
.choice::before, .menu-card::before, .btn::before, .qm::before, .trq::before {
  content: "";
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}
.choice.rippling::before, .menu-card.rippling::before, .btn.rippling::before,
.qm.rippling::before, .trq.rippling::before {
  animation: kpRipple .45s ease-out;
}
@keyframes kpRipple {
  0% { opacity: .26; transform: scale(1); }
  100% { opacity: 0; transform: scale(26); }
}
.btn, .menu-card, .trq { position: relative; overflow: hidden; }
/* การ์ดเมนู/แถวรายการที่กดได้ — ยกขึ้นเล็กน้อยแล้วยุบตอนกด */
.menu-card, .topic-row, .browse-row, .trq, .wt-lesson-h {
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
.menu-card:active, .topic-row:active,
.browse-row:active, .trq:active, .wt-lesson-h:active {
  transform: translateY(2px) scale(.995);
  box-shadow: var(--lift-1);
}
/* การ์ดหน้าแรกบางใบมีปุ่มเล็ก ๆ ซ้อนอยู่ข้างใน (เลือกปี · เลือกวิชา · จำนวนข้อ)
   :active ไหลไปถึงตัวการ์ดที่เป็นบรรพบุรุษด้วย ถ้าปล่อยให้ขยับ การแตะชิปข้างในจะ
   ทำให้ทั้งใบกระตุก — ชั้นก่อนหน้าจึงเคยตั้ง transform:none ทับไว้ทั้งหมด
   :has() คืนความรู้สึกกดให้เฉพาะใบที่ "ตัวมันเองคือเป้าที่ถูกแตะ" เท่านั้น
   เบราว์เซอร์ที่ไม่รู้จัก :has() จะทิ้งกฎนี้ทั้งก้อน = กลับไปนิ่งเหมือนเดิม ไม่พัง */
.home-body > .menu-card:active { transform: none; }
.home-body > .menu-card:active:not(:has(:active)) { transform: translateY(2px) scale(.995); }
/* ช่องในตารางผลรายข้อ/กระดานตรวจคำตอบ — ยุบด้วย inset ไม่ใช่ margin (aspect-ratio) */
.qm, .ck-cell {
  position: relative; overflow: hidden;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s ease;
}
.qm:active, .ck-cell:active {
  transform: scale(.9);
  box-shadow: inset 0 0 0 rgba(0, 0, 0, .18);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .choice, .menu-card, .qm, .ck-cell, .trq, .chip-btn,
  .sm-tab, .qv-btn, .modal-close, .topic-row, .browse-row, .year-btn {
    transition: none !important;
  }
  .choice.rippling::before, .menu-card.rippling::before, .btn.rippling::before,
  .qm.rippling::before, .trq.rippling::before { animation: none; }
}

/* ------------------------------------------------------------
   8.2 · นาฬิกาหน้าปัดบนหัวจอทำข้อสอบ
   ------------------------------------------------------------
   ค่าองศาของเข็มกับ stroke-dashoffset ของวงนอกถูกเขียนจาก JS ทุก 1 วินาที
   จึงไม่มี transition ที่เข็ม (ไม่งั้นวินาทีที่ 59→0 จะกวาดถอยหลังทั้งหน้าปัด)
   ------------------------------------------------------------ */
#screen-quiz > .topbar .timer-chip,
#screen-quiz > .progress-row .timer-chip { gap: 9px; padding: 0 15px 0 8px; }
.timer-chip .tk { flex: none; display: inline-flex; width: 26px; height: 26px; }
.timer-chip .tk svg { width: 26px; height: 26px; display: block; overflow: visible; }
.tk-track { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .22; }
.tk-arc {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 18px 18px;
}
.tk-face { fill: currentColor; opacity: .13; stroke: none; }
.tk-hm { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .95; }
.tk-hs { stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
.tk-pin { fill: currentColor; }
#timer-tx { font: inherit; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* เหลือ ≤ 5 นาที = ส้มเตือน · เหลือ ≤ 1 นาที = แดงและเต้น (ของเดิมมีแค่แดง) */
#screen-quiz > .topbar .timer-chip.warnly,
#screen-quiz > .progress-row .timer-chip.warnly { background: #f6a623; color: #2a1e05; }
#screen-quiz > .topbar .timer-chip.pressure .tk-arc,
#screen-quiz > .progress-row .timer-chip.pressure .tk-arc { stroke-width: 3; }
@media (prefers-reduced-motion: reduce) {
  .timer-chip.pressure, #timer.pressure { animation: none; }
}

/* ------------------------------------------------------------
   8.3 · ป้ายจังหวะเวลาในแถวนับสถานะ
   ------------------------------------------------------------ */
.qstat.pace { margin-left: auto; }
.qstat.pace > i { border-radius: 50%; }
.qstat.pace.ahead > i { background: #4ade80; }
.qstat.pace.onpace > i { background: var(--acc); }
.qstat.pace.behind > i { background: #f87171; }
.qstat.pace.behind > b { color: #ffd9d9; }

/* ------------------------------------------------------------
   8.4 · แท็บใหญ่ของหน้าสรุปผล
   ------------------------------------------------------------
   ติดใต้หัวจอเข้มเวลาเลื่อน จะได้สลับมุมมองได้โดยไม่ต้องเลื่อนกลับขึ้นไป
   ------------------------------------------------------------ */
.sm-off { display: none !important; }
#screen-summary [data-smtab].sm-off { display: block !important; }
.sm-tabs {
  position: sticky; top: 0; z-index: 6;
  display: flex; gap: 6px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 8px var(--gutter);
  background: var(--bg);
}
.sm-tab {
  flex: 1; min-width: 0;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 1px 0 var(--line), var(--lift-1);
  color: var(--muted);
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  text-align: center; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.sm-tab:active { transform: scale(.96); }
.sm-tab svg { width: 14px; height: 14px; flex: none; }
.sm-tab > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-tab.active {
  background: var(--ink); color: var(--ink-tx);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), var(--lift);
}
[data-theme="dark"] .sm-tab.active { background: var(--acc); color: var(--acc-ink); }

/* ------------------------------------------------------------
   8.5 · (ยุบแล้ว) ปุ่มสลับมุมมอง ถูก/ผิด ↔ เวลา
   ------------------------------------------------------------
   ตารางผลรายข้อโชว์ทั้งสองอย่างพร้อมกันแล้ว (ช่องสี = ถูก/ผิด · เลขใต้ช่อง = เวลา)
   จึงไม่มี .qv-row / .qm.qt อีกต่อไป — สไตล์ของสองอันนั้นถูกลบทิ้งที่นี่
   สีแถบเวลาในคำอธิบายตารางย้ายไปอยู่กับ .qm-t ในหัวข้อ "ผลรายข้อ" ด้านบน
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   8.6 · การ์ดวิเคราะห์เวลา (ตอนนี้อยู่ในการ์ดผลรายข้อ)
   ------------------------------------------------------------ */
/* ไทล์เวลา · แถบแยกตามหมวด · บทวิเคราะห์เวลา ถูกยุบไปเป็น .qt-tile / .qts-row
   ในหัวข้อ "ผลรายข้อ" ด้านบนแล้ว (และ "สิ่งที่อ่านได้จากเวลา" ถูกตัดทิ้งทั้งบล็อก)
   เหลือเฉพาะรายการ "ข้อที่กินเวลามากที่สุด" ที่ยังใช้อยู่ในตัวหุบ .qt-more */
.tr-slowest { display: flex; flex-direction: column; }
.trq {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 16px;
  border: 0; border-bottom: 1px solid var(--card-line); border-radius: 0;
  background: none; text-align: left; cursor: pointer;
  font-family: inherit;
}
.trq:last-child { border-bottom: 0; }
.trq-n {
  flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 12px; font-weight: 700; color: var(--on-solid);
}
.trq-n.ok { background: var(--ok); }
.trq-n.bad { background: var(--bad); }
.trq-tx { flex: 1; min-width: 0; }
.trq-tx b { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--text); }
.trq-tx span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.trq-t { flex: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.trq-t.ok { color: var(--ok-ink, var(--ok)); }
.trq-t.bad { color: var(--bad-ink, var(--bad)); }

/* ------------------------------------------------------------
   8.7 · กราฟแมงมุม (radar) — 3 หมวดของ ภาค ก
   ------------------------------------------------------------ */
.rd-card { padding: 16px 10px 6px; }
.rd-box { width: 100%; overflow: hidden; }
.rd-svg { display: block; width: 100%; height: auto; }
.rd-grid { fill: none; stroke: var(--card-line); stroke-width: 1; }
.rd-grid-out { stroke: var(--line); }
.rd-spoke { stroke: var(--card-line); stroke-width: 1; }
.rd-need {
  fill: none; stroke: var(--muted); stroke-width: 1.4;
  stroke-dasharray: 5 4; opacity: .8;
}
.rd-got {
  fill: color-mix(in srgb, var(--acc) 26%, transparent);
  stroke: var(--acc); stroke-width: 2.4; stroke-linejoin: round;
  transform-origin: 180px 138px;
}
.rd-svg.grow .rd-got, .rd-svg.grow .rd-dot { animation: rdGrow .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rdGrow { from { transform: scale(.05); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rd-dot { stroke: var(--card); stroke-width: 2; transform-origin: 180px 138px; }
.rd-dot.ok { fill: var(--ok); }
.rd-dot.bad { fill: var(--bad); }
.rd-lb { fill: var(--text); font-size: 11px; font-weight: 600; font-family: inherit; }
.rd-lv { font-size: 12.5px; font-weight: 800; font-family: inherit; font-variant-numeric: tabular-nums; }
.rd-lv.ok { fill: var(--ok-ink, var(--ok)); }
.rd-lv.bad { fill: var(--bad-ink, var(--bad)); }
@media (prefers-reduced-motion: reduce) { .rd-svg.grow .rd-got, .rd-svg.grow .rd-dot { animation: none; } }
.rd-key { display: flex; justify-content: center; gap: 18px; margin: 2px 0 4px; }
.rdk { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--muted); }
.rdk > i { width: 16px; height: 0; border-top: 3px solid var(--acc); border-radius: 2px; }
.rdk > i.rdk-need { border-top: 2px dashed var(--muted); }
/* รายการใต้กราฟ (.rd-legend / .rdl-*) ถูกยุบทิ้งทั้งชุด — หัวกลุ่ม .wg-h ที่ต่อท้ายกราฟ
   บอกข้อมูลเดียวกันเป๊ะ ๆ (ชื่อหมวด · ถูก c/t · เวลาที่ใช้ · % · ยังขาดอีกกี่จุด)
   แถมมีแถบเทียบเกณฑ์กับรายการเรื่องที่อ่อนต่อให้อีก จึงเหลือไว้ที่เดียว */
/* แบบสำรอง: แถบแนวนอน เมื่อชุดนั้นมีไม่ถึง 3 หมวด */
.rd-bars { padding: 2px 6px 10px; }
.rd-bar-row { padding: 10px 0; }
.rd-bar-top { display: flex; align-items: baseline; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.rd-bar-top > span { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.rd-bar-top > b { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.rd-bar-top > b.ok { color: var(--ok-ink, var(--ok)); }
.rd-bar-top > b.bad { color: var(--bad-ink, var(--bad)); }
.rd-bar-top > b > i { font-style: normal; font-weight: 500; font-size: 11px; color: var(--muted); }
.rd-bar { position: relative; height: 9px; border-radius: 5px; background: var(--card-line); }
.rd-bar > i {
  display: block; height: 100%; border-radius: 5px;
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.rd-bar > i.ok { background: var(--ok); }
.rd-bar > i.bad { background: var(--bad); }
.rd-goal { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); }
[data-theme="dark"] .rd-goal { background: var(--text); }

/* ------------------------------------------------------------
   8.8 · เรื่องที่ควรเสริม — จัดกลุ่มตามหมวดวิชา
   ------------------------------------------------------------ */
#wf-rows { padding: 0; }
.wg { border-bottom: 8px solid var(--bg); }
.wg:last-child { border-bottom: 0; }
.wg-h { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px 11px; }
.wg-dot { flex: none; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--sub, var(--acc)); }
.wg-tx { flex: 1; min-width: 0; }
.wg-tx b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--text); }
.wg-tx span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.wg-pct { flex: none; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wg-pct.ok { color: var(--ok-ink, var(--ok)); }
.wg-pct.bad { color: var(--bad-ink, var(--bad)); }
.wg-bar { position: relative; height: 8px; margin: 0 16px 9px; border-radius: 4px; background: var(--card-line); }
.wg-bar > i {
  display: block; height: 100%; border-radius: 4px;
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.wg-bar > i.ok { background: var(--ok); }
.wg-bar > i.bad { background: var(--bad); }
/* บรรทัด "ยังขาดอีกกี่จุด ≈ กี่ข้อ" — ย้ายมาจาก .rd-legend ที่ถูกยุบทิ้ง
   (แถวนั้นบอกข้อมูลชุดเดียวกับหัวกลุ่มนี้เป๊ะ ๆ เลยเหลือไว้ที่เดียว) */
.wg-verdict { padding: 0 16px 13px; font-size: 11px; font-weight: 600; line-height: 1.55; }
.wg-verdict.ok { color: var(--ok-ink, var(--ok)); }
.wg-verdict.bad { color: var(--bad-ink, var(--bad)); }
/* คำกำกับเหนือรายการเรื่องที่ควรเสริม — แทนหัวข้อ .gh เดิมที่ถูกรวมเข้ากับกราฟ */
.wf-cap { margin: 15px 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.wg-goal { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); }
[data-theme="dark"] .wg-goal { background: var(--text); }
.wg-rows { border-top: 1px solid var(--card-line); }
.wg-more { padding: 10px 16px 12px; font-size: 10.5px; color: var(--muted); }
.wg-ok {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 16px 15px; font-size: 11.5px; line-height: 1.6; color: var(--ok-ink, var(--ok));
}
.wg-ok svg { width: 15px; height: 15px; flex: none; }
.wg-do {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 0 12px 13px; padding: 12px;
  border-radius: 13px;
  background: var(--acc-soft);
  font-size: 11.5px; line-height: 1.7; color: var(--text); text-wrap: pretty;
}
.wg-do svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-dark, var(--brand)); }
.wg-do b { font-weight: 700; }
/* ชื่อหมวดวิชาต่อท้ายหัวข้อในกล่อง "จุดแข็ง / ควรเสริม" */
.und-sub {
  display: inline-block; margin-left: 7px;
  font-size: 9.5px; font-style: normal; font-weight: 600;
  color: var(--muted); white-space: nowrap;
}

/* ------------------------------------------------------------
   8.9 · หน้าสถิติ — จังหวะเวลา + เรื่องที่ควรเสริมแยกหมวด
   ------------------------------------------------------------ */
.st-pace { display: flex; align-items: center; gap: 14px; padding: 4px 0 2px; }
.stp-n {
  flex: none; font-size: 24px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stp-n > i { display: block; margin-top: 4px; font-size: 10px; font-style: normal; font-weight: 600; color: var(--muted); }
.st-pace.ok .stp-n { color: var(--ok-ink, var(--ok)); }
.st-pace.bad .stp-n { color: var(--bad-ink, var(--bad)); }
.stp-tx { flex: 1; min-width: 0; }
.stp-tx b { display: block; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--text); }
.stp-tx span { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.st-bar-foot { margin-top: 6px; font-size: 10px; line-height: 1.5; color: var(--muted); }
.stg { padding: 12px 0; border-bottom: 1px solid var(--card-line); }
.stg:last-child { border-bottom: 0; padding-bottom: 0; }
.stg-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.stg-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sub, var(--acc)); }
.stg-h > b { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.stg-h > i { flex: none; font-size: 10.5px; font-style: normal; color: var(--muted); }
.stg-ok {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 4px; font-size: 11px; color: var(--ok-ink, var(--ok));
}
.stg-ok svg { width: 14px; height: 14px; flex: none; }
.stw-t { display: block; margin-top: 2px; font-size: 9.5px; font-style: normal; color: var(--muted); }
.stats-body > .st-card .rd-box { margin: 4px -6px 0; }

/* ------------------------------------------------------------
   8.10 · ป้ายเวลาบนใบเฉลยรายข้อ
   ------------------------------------------------------------ */
.rc-time {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2, var(--bg));
  font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.rc-time svg { width: 12px; height: 12px; }
.rc-time.over { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad-ink, var(--bad)); }


/* ============================================================
   ชั้นที่ 9 — หน้าแรก: เก็บจุดที่ยัง "วางไม่ครบ" บนจอโทรศัพท์จริง
   ------------------------------------------------------------
   วัดจริงในกรอบ 390px (ความกว้างของมือถือส่วนใหญ่) แล้วเจอของ 5 ชิ้น
   ที่ตกบรรทัด/ตกขอบ ทั้งที่บนจอกว้างมันดูปกติ
     · 9.1 แถบปีในคลัง — ลงได้แค่ 3 ปุ่ม ปี 2569 จึงตกไปอยู่แถวสองใบเดียว
     · 9.2 ชิปเลือกปีฝึกซ้อม — ลงได้ 4 ชิป "เก็ง 70" ตกไปแถวสองใบเดียว
     · 9.3 ชิปหัวจอใบที่สอง — ข้อความหักบรรทัดกลางแคปซูล กลายเป็นแคปซูลสองชั้น
     · 9.4 คำอธิบายในการ์ดทรงบล็อก — โดน line-clamp:1 ตัดทิ้งทั้งที่การ์ดมีที่ว่าง
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–8
   ============================================================ */

/* ------------------------------------------------------------
   9.1 · แถบปีในคลังข้อสอบ — ให้ทุกปีอยู่แถวเดียว
   ------------------------------------------------------------
   เดิม minmax(78px, 1fr): ในการ์ดกว้าง 300px ลงได้ 3 คอลัมน์
   (78×4 + 8×3 = 336 > 300) ปี 2569 ซึ่งเป็น "ชุดจริงล่าสุด" และเป็นปุ่มที่
   ควรเด่นที่สุด จึงหล่นไปอยู่แถวสองตัวเดียว ดูเหมือนวางค้างไว้
   78 → 60 ทำให้ 4 ปุ่มลงแถวเดียวตั้งแต่จอ 360px ขึ้นไป (คอลัมน์ละ ~69px)
   ยังเป็น auto-fit เหมือนเดิม ปีที่เพิ่มมาทีหลังมันจะจัดคอลัมน์ให้เองตามที่ว่าง
   ------------------------------------------------------------ */
.year-strip { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
/* ป้าย "ชุดจริงล่าสุด" กว้าง 71.5px ล้นปุ่ม 69px ออกข้างละ 1.3px
   ลดแพดดิ้งข้างแทนการลดตัวอักษร — 11px คือพื้นล่างของสเกลชั้นที่ 4 */
.year-btn .yb-tag { padding: 2px 4px; }

/* ------------------------------------------------------------
   9.2 · ชิปเลือกปีที่จะเอามาฝึก — 5 ปีในแถวเดียว
   ------------------------------------------------------------
   .scope-pick เป็น flex-wrap ชิปละ ~68–79px รวม 352px เกินการ์ด 300px
   "เก็ง 70" จึงตกไปแถวสอง ทั้งที่เป็นชิปที่ถูกกดบ่อยที่สุด
   เปลี่ยนเฉพาะแถวนี้เป็นกริดแบ่งความกว้างเท่ากัน แล้วหั่นแพดดิ้งข้างลง
   (ข้อความยาวสุดคือ "✓  เก็ง 70" = 39.6px ยังเหลือที่ในคอลัมน์ 53.6px ของจอ 360px)
   ค่า min 48px ไม่ใช่ 52px เพราะ 52 ทำให้ 5 คอลัมน์ต้องการ 284px พอดี ๆ
   จอ 360 ที่มีแถบเลื่อนกินไปอีก 10px จะหล่นกลับไปเป็น 4+1 ทันที
   ไม่แตะ .scope-pick ใบอื่น (เลือกวิชา / จำนวนข้อ) ซึ่งจำนวนปุ่มไม่เท่ากัน
   ------------------------------------------------------------ */
#drill-year-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 6px;
}
#drill-year-row button { padding: 8px 4px; white-space: nowrap; }

/* ------------------------------------------------------------
   9.3 · ชิปบนหัวจอ — ที่ที่กันไว้ให้ปุ่มตั้งค่า ใหญ่เกินของจริงไป 54px
   ------------------------------------------------------------
   ที่กันไว้ 128px มาจากยุคที่มุมขวาบนเป็น "แคปซูลสลับธีม" กว้าง 118px
   ตอนนี้มันคือ .settings-fab วงกลม 40px (fixed, right: 22px) ค่าเดิมจึงค้าง
   ผลคือชิปใบที่สอง "ภาค ก · เตรียมสอบ ก.พ. 2570" (ต้องการ 205px) เหลือที่ 178px
   แล้วหักบรรทัดกลางแคปซูล กลายเป็นแคปซูลสองชั้นสูง 52px ซึ่งไม่ใช่ทรงของแคปซูล
   74px = ตัวปุ่ม 40 + ระยะขอบขวา 22 + ช่องไฟ 12 → ทุกบรรทัดยังไม่ชนปุ่ม
   และชิปใบที่สองได้ที่ 274px ที่จอ 390px ลงตัวในบรรทัดเดียว
   (กฎนี้อยู่หลังบล็อก @media max-width:380 ที่ตั้ง 116px ไว้ จึงทับได้ทั้งสองที่)
   ------------------------------------------------------------ */
.hchip { white-space: nowrap; }
.home-hero .hero-chips { padding-right: 74px; }

/* ------------------------------------------------------------
   9.4 · คำอธิบายในการ์ดทรงบล็อก — ไม่ต้องตัดเหลือบรรทัดเดียว
   ------------------------------------------------------------
   กฎ line-clamp: 1 (หัวข้อ 7 ของไฟล์นี้) มีไว้ล็อกความสูง "แถวเมนู" ให้เท่ากันทุกแถว
   แต่มันเหมารวม .year-card ซึ่งเป็นการ์ดทรงบล็อก ไม่ได้ล็อกความสูงไว้ตั้งแต่แรก
   ผลคือ "ปี 2566–2569 รวม 899 ข้อ · เลือกเจาะได้ถึงระดับเรื่องย่อย" ถูกตัดครึ่ง
   ทั้งที่ใต้บรรทัดนั้นยังว่าง — คืนให้เป็น 2 บรรทัด
   ⚠️ ต้องเขียนเป็น .home-body > .menu-card.year-card (0,4,1) ให้ชนะกฎเดิม
      .home-body > .menu-card .mc-text span (0,3,1) — ลำดับ source อย่างเดียวไม่พอ
   ------------------------------------------------------------ */
.home-body > .menu-card.year-card .mc-text span {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}


/* ============================================================
   ชั้นที่ 10 — หัวจอหน้าแรก: จัดใหม่ตามภาพอ้างอิงที่ผู้ใช้ส่งมา
   ------------------------------------------------------------
   ผู้ใช้ส่งภาพหน้าจอที่ต้องการให้ตรงเป๊ะ ๆ กับส่วนบนของหน้าแรก:
     · 10.1 แถวชิปย้ายไปชิดขวา อยู่แถวเดียวกับปุ่มตั้งค่า แทนแถวเต็มความกว้างชิดซ้าย
       ("ยังไม่เริ่มฝึก" ยังอยู่ครบตามที่ขอ แค่ย้ายที่+ย่อขนาด)
     · 10.2 เอาบรรทัด "เตรียมสอบราชการ" (.hero-kicker) กับเส้นคั่นทอง (.hero-rule) ออก
       ย้ายข้อความไปรวมกับ "ภาค ก" เป็นบรรทัดเดียว "ภาค ก · เตรียมสอบราชการ" ใต้ชื่อแอป
       (ลบ markup ทิ้งเลยเพราะไม่มีที่อื่นอ้างถึงแล้ว — ดู CSS ที่เคยตั้งให้สองคลาสนี้ก็ลบตามไปด้วย)
     · 10.3 โลโก้+ชื่อแอปคืนเป็นชิดซ้าย — แก้ตรงจุดเดิมที่ .hero-brand (ไม่ต้องเพิ่มกฎใหม่)
       ภาพอ้างอิงใหม่ระบุชัดว่าชิดซ้าย ส่วนที่เคยจัดกึ่งกลางไว้ก่อนหน้านี้ถูกยกเลิก
     · 10.4 แถวตัวเลขสรุปสลับลำดับเป็น ข้อในคลัง → วิชาที่ต้องผ่าน → ครั้งที่ทำ (แก้ที่ index.html)
       และเปลี่ยนจากช่องพื้นทึบรายช่องเป็นตัวเลขลอยคั่นด้วยเส้นบาง ตัวเลขใหญ่ขึ้น
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–9
   ============================================================ */

/* 10.1 · แถวชิป: ชิดขวา กะทัดรัดขึ้น อยู่แถวเดียวกับปุ่มตั้งค่า
   (padding-right: 74px ของชั้นที่ 9 ยังใช้ได้ เว้นที่ให้ .settings-fab เหมือนเดิม) */
.home-hero .hero-chips {
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.home-hero .hero-chips .hchip {
  padding: 5px 10px;
  font-size: 11px;
  gap: 4px;
}
.home-hero .hero-chips .hchip svg { width: 12px; height: 12px; }

/* 10.2 · ข้อความใต้ชื่อแอป: รวม "เตรียมสอบราชการ" เข้ามาเป็นบรรทัดเดียวกับ "ภาค ก" แล้ว
   (ข้อความแก้ที่ index.html) ให้เป็นโทนทองอย่างที่ .hero-kicker เดิมเคยเป็น
   ไม่ใช่สีเทาเรียบของ .hero-h-sub เดิม — คลาสเดียวกัน แค่ทับสีจากชั้นที่ 7.8 */
.home-hero .hero-h-sub { color: var(--acc); font-weight: 700; }

/* 10.4 · แถวตัวเลขสรุปใต้วงแหวน — ของเดิม (ชั้นที่ 7.8) ให้พื้นทึบรายช่อง (--ink-face)
   ภาพอ้างอิงใหม่เป็นตัวเลขลอยบนพื้นเข้มเดียวกัน ไม่มีเส้นคั่นระหว่างช่อง
   (เคยมีเส้นคั่นบาง ๆ แบบเดียวกับ .result-meta — ผู้ใช้ขอเอาออก ดูโล่งกว่า) */
.home-body > .ready-card .ready-meta .rm-item {
  background: none;
  border-radius: 0;
  padding: 4px 0;
}
.home-body > .ready-card .ready-meta .rm-item b { font-size: 21px; }


/* ============================================================
   ชั้นที่ 11 — รวมหัวจอ 4 หน้า (เกร็ดความรู้ · สรุปผลการวิเคราะห์ ·
   สถิติการฝึก · ข้อที่มาร์คไว้) ให้เป็นแถบเข้มแบบเดียวกับ Master UI
   ------------------------------------------------------------
   เอกสาร "PF Exam Master UIUX" (Claude Design, get_file) เขียนกติกาหัวจอไว้ชัดว่า
   "แถบเข้ม #241F18 โค้งล่าง 28px ยกตัวเลขสำคัญที่สุดของหน้ามาไว้ที่นี่" ของเดิมมีแค่
   หน้าแรก (ชั้นที่ 7.8) กับหน้าทำข้อสอบ (ชั้นที่ 7.9) ที่ทำตามกติกานี้ — 4 หน้านี้ยังเป็น
   หัวจอสว่างแบบเก่า และเป็นคนละโครงสร้าง HTML กันเองด้วย (.plain-head / .sn-topbar /
   .topbar.topbar-plain) ไม่แตะ markup เพราะแต่ละหน้ามีปุ่ม/ตรรกะผูกอยู่คนละแบบ
   (Study มีปุ่มแฟลชการ์ด) แค่ทำให้ "หน้าตา" ตรงกันผ่าน CSS ที่ระบุ id หน้าเจาะจง
   ไม่แตะ #screen-boss ที่ใช้ .plain-head ร่วมกับ History เพราะผู้ใช้ไม่ได้ขอหน้านั้น

   ระหว่างทางเจอบั๊กเดิม: .sn-topbar ไม่เคยเผื่อที่ให้ .settings-fab (วงกลมลอย 40px
   มุมขวาบน ซ่อนเฉพาะหน้าทำข้อสอบ/อ่านตัวบท — หน้านี้ไม่ได้ซ่อน) ปุ่มแฟลชการ์ดเลยไป
   วางซ้อนทับปุ่มตั้งค่าพอดี (วัดจริง: ปุ่มแฟลชการ์ด x=838 ปุ่มตั้งค่า x=836 ห่างกัน 2px)
   ใช้ padding-right 74px เดียวกับที่ชั้นที่ 9 ใช้กับหน้าแรก (40 ตัวปุ่ม + 22 ขอบขวา + 12 ช่องไฟ)
   ============================================================ */
/* หมายเหตุ: #screen-stats ถูกยุบรวมเข้า #screen-history แล้ว (ดูชั้นที่ 12)
   เหลือสามหน้าในชุดนี้ */
:is(#screen-study .sn-topbar,
    #screen-history .plain-head,
    #screen-bookmarks > .topbar) {
  background: var(--ink);
  border-bottom: 0;
  border-radius: 0 0 28px 28px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) calc(74px + env(safe-area-inset-right, 0px)) 22px 20px;
}
:is(#screen-study .sn-tb-title,
    #screen-history .plain-head h2,
    #screen-bookmarks > .topbar .topbar-title) {
  color: var(--ink-tx);
  font-size: 20px;
}
#screen-study .sn-tb-ico { color: var(--acc); }
:is(#screen-history .plain-head p,
    #screen-bookmarks > .topbar .topbar-sub) {
  color: var(--ink-mute);
  font-size: 12.5px;
  font-weight: 400;
  margin-top: 4px;
}
#screen-study .sn-tool {
  background: var(--ink-face);
  border-color: var(--ink-line);
  color: var(--ink-tx);
  box-shadow: none;
}
#screen-study .sn-tool.on { color: var(--acc); border-color: var(--acc); background: var(--ink-face); }


/* ============================================================
   ชั้นที่ 12 — รวม "สรุปผลการวิเคราะห์" + "สถิติการฝึก" เป็นหน้าเดียว
                และป๊อปอัปกราฟแมงมุมจากวงแหวน % ความพร้อมสอบ
   ------------------------------------------------------------
   สองหน้าเดิมอ่านประวัติชุดเดียวกันแล้ววาดของซ้ำกันสามอย่าง (กราฟคะแนน
   ย้อนหลัง · แถบรายวิชา · ไทล์ตัวเลข) ตอนนี้ยุบเหลือหน้าเดียวใน
   #screen-history แล้วแบ่งเป็นสามแท็บด้วย data-anpane:
     ภาพรวม (overview) · รายวิชา (subject) → #stats-body
     ประวัติ (history)                      → #history-body
   ยังเก็บคลาส .stats-body / .history-body ไว้ทั้งคู่ เพราะกฎ "การ์ดลอย"
   ของชั้นที่ 6–7 ผูกกับสองคลาสนี้แบบลูกตรง (>) — ยุบเหลือกล่องเดียว
   เมื่อไหร่ การ์ดทั้งหน้าจะกลับไปเป็นแผ่นเต็มจอทันที
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–11
   ============================================================ */

/* 12.1 · แท็บของหน้าวิเคราะห์ผล — ทรงเดียวกับ .sm-tabs ของหน้าสรุปผล
   ต่างกันที่ตัวนี้เกาะใต้หัวจอเข้ม (.plain-head) จึงต้องมีพื้นครีมทึบรองไว้
   ไม่งั้นการ์ดจะไหลผ่านให้เห็นตอนเลื่อน */
.an-tabs {
  position: sticky; top: 0; z-index: 6;
  display: flex; gap: 6px;
  padding: 10px var(--gutter);
  background: var(--bg);
}
.an-tab {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: 0 1px 0 var(--line), var(--lift-1);
  color: var(--muted);
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  text-align: center; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.an-tab:active { transform: scale(.96); }
.an-tab svg { width: 14px; height: 14px; flex: none; }
.an-tab > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-tab.active { background: var(--ink); color: var(--ink-tx); box-shadow: 0 1px 0 rgba(0, 0, 0, .35), var(--lift); }
[data-theme="dark"] .an-tab.active { background: var(--acc); color: var(--acc-ink); }

/* หมุดของแต่ละหัวข้อ — เว้นที่ให้แถบปุ่มที่เกาะอยู่ด้านบน (56px) ไม่งั้น scrollIntoView
   จะพาหัวข้อไปจอด*ใต้*แถบพอดีจนมองไม่เห็นว่ามาถึงหัวข้อไหนแล้ว
   ใช้ scroll-margin-top แทนการคำนวณ offset เองในสคริปต์ — เบราว์เซอร์จัดการให้ทั้ง
   smooth scroll และการกดลิงก์ #hash */
.an-anchor { scroll-margin-top: 64px; }

/* 12.2 · สองกล่องเนื้อหาต่อกันเป็นหน้าเดียว เลื่อนยาวรวด
   .stats-body อยู่บน .history-body อยู่ล่าง — ระยะกันแถบเมนูล่างจึงอยู่ที่ตัวล่างพอ
   แต่ถ้าไม่มีประวัติเลย .history-body จะว่าง .stats-body ต้องกันเอง */
#screen-history > .stats-body { padding-top: 4px; padding-bottom: 0; }
#screen-history > .history-body { padding-top: 0; padding-bottom: 140px; }
/* .history-body ที่ว่าง (ยังไม่มีประวัติ) ต้องไม่กินที่เปล่า ๆ ท้ายหน้า */
#screen-history > .history-body:empty { display: none; }
/* ...แต่ตอนนั้นระยะกันแถบเมนูล่างหายไปด้วย — :last-child ใช้ไม่ได้เพราะ #history-body
   ยังเป็น element อยู่จริง (แค่ display:none) ตัวเลือกเชิงโครงสร้างจึงยังนับมัน
   เกาะที่กล่องสถานะว่างตรง ๆ แทน ไม่ต้องพึ่ง :has() ที่ WebView เก่าอาจไม่รู้จัก */
#screen-history > .stats-body > .empty-state { margin-bottom: 140px; }
.hs-listhead .hs-section-t i { font-style: normal; font-weight: 600; color: var(--muted); opacity: .85; }

/* หัวจอของหน้านี้ไม่ต้องโค้งล่าง 28px แล้ว เพราะมีแถบแท็บมาต่อท้ายทันที
   (ชั้นที่ 11 ให้ .plain-head โค้งไว้ตอนที่ยังต่อกับพื้นครีมโล่ง ๆ) */
#screen-history .plain-head { border-radius: 0 0 24px 24px; padding-bottom: 20px; }

/* 12.3 · แนวโน้ม +/- ในหัวจอ "ความแม่นยำรวม"
   .st-hero ถูกทับสีเป็นพื้นการ์ด (ชั้นที่ 8) ตัวเลขจึงเป็น --text ปกติอยู่แล้ว */
.st-hero .st-hero-trend { margin-top: 3px; }
.st-hero .st-hero-trend .trend { font-size: 11px; font-weight: 700; }
.st-hero .st-hero-trend .trend svg { width: 13px; height: 13px; vertical-align: -2px; }
/* สี่ไทล์ต้องอยู่แถวเดียวตั้งแต่ 360px ขึ้นไป — auto-fit minmax(78px) ของชั้นที่ 4
   ตกเหลือ 3 คอลัมน์ที่ 360px (ที่ว่าง 328px) แล้วไทล์สุดท้ายไปยืนโดดแถวล่าง */
#screen-history .st-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
#screen-history .st-tiles .st-tile { padding-left: 4px; padding-right: 4px; }
#screen-history .st-tiles .st-tile span { font-size: 10px; letter-spacing: -.01em; }

/* การ์ดคำแนะนำใช้ทรง .st-card แต่จัดวางข้างในแบบ .hcard-reco เดิม */
.st-card.hcard-reco { display: flex; flex-direction: column; gap: 12px; }
.st-card.hcard-reco .hreco-tx { margin: 0; }

/* ชิป "เรื่องที่พลาดบ่อย" — แดง #c0392b บนชมพูอ่อนได้ 4.44 ขาดอีกนิดเดียวจะถึง 4.5
   (ตัวหนังสือ 12px ไม่เข้าข่ายตัวใหญ่ที่ยอมให้ 3.0 ได้) เข้มขึ้นอีกขั้นให้ผ่านเกณฑ์ */
.st-card .hs-chip { color: #a5301f; }
[data-theme="dark"] .st-card .hs-chip { color: #ffb4b4; }

/* 12.6 · สถานะ "ยังไม่ได้ทำหมวดนี้" — กราฟแมงมุมมีแกนครบทุกวิชาที่สอบเสมอแล้ว
   ไม่ใช่เฉพาะวิชาที่เคยทำ (ทำ 10 ข้อแล้วไม่โดนวิชาข้าราชการที่ดีเลย เมื่อก่อนเหลือ 2 แกน
   → ตกไปวาดเป็นแถบ) วิชาที่ยังว่างต้องอ่านออกว่า "ยังไม่ทำ" ไม่ใช่ "ได้ 0%"
   จึงใช้สีเทา --muted ไม่ใช่สีแดงของ .bad */
.rd-dot.none { fill: var(--muted); opacity: .55; }
.rd-lv.none { fill: var(--muted); font-size: 10.5px; font-weight: 700; }
.st-bar-top b.none { color: var(--muted); font-weight: 700; }
.st-bar i.none { background: none; }
.rd-todo, .rdm-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 4px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--card-line);
  font-size: 11.5px; line-height: 1.7; color: var(--muted);
}
.rd-todo > svg, .rdm-note > svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
/* ในป๊อปอัปคำเตือนอยู่*ก่อน*กราฟ เส้นคั่นจึงต้องอยู่ใต้ ไม่ใช่บน */
.rdm-body > .rdm-note { border-top: 0; border-bottom: 1px solid var(--card-line); padding: 0 0 10px; margin: 0 0 10px; }

/* 12.7 · หัวตารางในการ์ดประวัติ โหมดมืด — ตัวหนังสือหายไปทั้งแถว (คอนทราสต์ 1.04)
   ต้นเหตุ: .result-table thead th ตั้ง background: #eef1f3 เป็นเลขดิบไว้ (ไม่ใช่ token)
   ส่วนกฎโหมดมืดแก้แค่ color เป็น --text ที่เป็นสีครีม → ครีมบนเทาสว่าง
   กฎที่ทับพื้นเป็น --surface-2 มีอยู่แล้วแต่ specificity ต่ำกว่า (.result-table th)
   จึงต้องระบุ thead ให้ชนะ ทำที่ธีมมืดเท่านั้น ธีมสว่าง/กระดาษของเดิมอ่านได้ปกติ
   (#kp-result ในหน้าสรุปผลไม่โดน เพราะมีกฎ id ของตัวเองทับพื้นเป็น none อยู่แล้ว) */
[data-theme="dark"] .result-table thead th { background: var(--surface-2); }

/* 12.4 · วงแหวน % ความพร้อมสอบกลายเป็นปุ่ม — ล้างหน้าตาปุ่มของเบราว์เซอร์ทิ้ง
   (.ready-ring เดิมเป็น <div> กฎขนาด/ตำแหน่งของชั้นที่ 4 ยังใช้ต่อได้ทั้งชุด) */
button.ready-ring {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
button.ready-ring:active { transform: scale(.95); }
/* ป้ายบอกว่า "แตะได้" — วางทับมุมล่างขวาของวง ไม่กินที่ของตัวเลขตรงกลาง */
.ready-ring .rr-tap {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acc); color: var(--acc-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.ready-ring .rr-tap svg { width: 14px; height: 14px; }
/* หน้าแรกใช้พื้นเข้ม ป้ายจึงต้องเป็นทองบนเข้มให้ตัดกับวงแหวน */
.home-body > .ready-card .rr-tap { box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* 12.5 · ป๊อปอัปกราฟแมงมุม */
.rdm-modal { max-width: 420px; text-align: left; }
.rdm-modal .rdm-title { margin: 2px 34px 4px 0; font-size: 17px; font-weight: 800; }
.rdm-modal .rdm-title b { font-weight: 800; }
.rdm-modal .rdm-title b.ok { color: var(--ok-ink, var(--ok)); }
.rdm-modal .rdm-title b.bad { color: var(--bad-ink, var(--bad)); }
.rdm-sub { margin: 0 0 6px; font-size: 11.5px; line-height: 1.75; color: var(--muted); }
.rdm-note { margin: 0 0 8px; font-size: 11.5px; line-height: 1.7; color: var(--muted); }
.rdm-body .rd-box { margin: 0 -6px; }
.rdm-body .rd-key { margin: 0 0 6px; }
.rdm-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--card-line); }
.rdm-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--card-line);
  font-size: 12.5px;
}
.rdm-list li:last-child { border-bottom: 0; }
.rdm-nm { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.rdm-pc { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.rdm-pc.ok { color: var(--ok-ink, var(--ok)); }
.rdm-pc.bad { color: var(--bad-ink, var(--bad)); }
.rdm-note-s { flex: 0 0 92px; text-align: right; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.rdm-actions { margin-top: 14px; }
.rdm-actions .btn { width: 100%; }

/* ============================================================
   ชั้นที่ 13 — โครงโหลด (skeleton) ของทุกหน้า
   ------------------------------------------------------------
   ปัญหาที่แก้: บนเครื่องช้า renderX() อาจกินเวลา 100–800ms
   ระหว่างนั้นสลับหน้า → ผู้ใช้เห็นจอเปล่า/ครีมโล่ง ๆ ก่อน content โผล่ทีเดียว

   วิธีคิด: showScreen() ยิง skeleton overlay ทับเข้าไปในหน้าจอทันที
   render() เดินไปในเฟรมถัดไป (rAF) — เครื่องเร็ว skeleton flash 1 เฟรมแล้วหาย
   เครื่องช้า skeleton ค้างจนกว่า render จะเสร็จ (rAF ตัวที่สองไม่ถูก schedule)

   ไม่ใช้ gradient sweep (ค่าใช้ paint สูงบนมือถือช้า) ใช้ opacity pulse แทน
   respects prefers-reduced-motion — ยกเลิกอนิเมชั่นทั้งหมด เหลือแค่โครงนิ่ง

   z-index ไว้ที่ 40 (ทับ topbar sticky ที่ 15, ต่ำกว่า .bottom-nav ที่ 50 และ modal-overlay 100)
   ให้ bottom-nav โผล่ขึ้นบน skeleton — ผู้ใช้ยังกดเมนูอื่นได้ระหว่างโหลด
   pointer-events: none ระหว่างหาย ตอน visible เต็ม = auto กัน tap ทะลุไปโดนของหลัง
   ============================================================ */
.scr-skel {
  position: absolute; inset: 0; z-index: 40;
  background: var(--bg);
  padding: 14px 14px 96px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  opacity: 1; transition: opacity .32s ease;
  pointer-events: auto;
}
.scr-skel.leaving { opacity: 0; pointer-events: none; }
.screen:not(.active) .scr-skel { display: none; }

/* ก้อน skeleton — ใช้ pulse บาง ๆ กัน CPU มือถือช้า
   คอนทราสต์: --surface-2 ในธีมครีมกับพื้น --bg ห่างกันแค่ ~5% — เห็นไม่ชัด
   จึงต้องผสมสี ink 6% เพิ่มความคม (color-mix ผลลัพธ์เดียวกันทุกธีม) */
.sk-block, .sk-line, .sk-circle, .sk-pill {
  background: color-mix(in srgb, var(--text) 10%, var(--surface-2));
  border-radius: 8px;
  animation: skPulse 1.6s ease-in-out infinite;
}
.sk-block { min-height: 12px; }
.sk-line  { height: 12px; border-radius: 6px; }
.sk-line.short { width: 40%; }
.sk-line.mid   { width: 65%; }
.sk-line.long  { width: 88%; }
.sk-line.full  { width: 100%; }
.sk-line.h16   { height: 16px; }
.sk-line.h20   { height: 20px; }
.sk-line.h28   { height: 28px; }
.sk-circle { border-radius: 50%; flex: none; }
.sk-pill   { border-radius: 999px; height: 26px; }

/* หน่วง phase ของแต่ละก้อน — pulse ไม่ซิงก์กันทั้งหน้า ดูมีชีพจร ไม่ประหลาด */
.sk-block:nth-child(2n), .sk-line:nth-child(2n), .sk-circle:nth-child(2n) { animation-delay: .18s; }
.sk-block:nth-child(3n), .sk-line:nth-child(3n) { animation-delay: .36s; }

/* กล่องจำลองการ์ด/ส่วน — ใช้เส้นขอบเดียวกับ .v7-card เพื่อให้กลืนกับ layout จริง */
.sk-card {
  background: var(--card); border: 1px solid var(--card-line, var(--line));
  border-radius: var(--radius-sm, 12px);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-soft, none);
}
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.sk-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sk-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sk-spacer { flex: 1 1 auto; }
.sk-tile { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); border-radius: 10px; height: 62px; animation: skPulse 1.6s ease-in-out infinite; }
.sk-chip { background: color-mix(in srgb, var(--text) 10%, var(--surface-2)); height: 28px; border-radius: 999px; min-width: 66px; animation: skPulse 1.6s ease-in-out infinite; }

/* หัวจอเข้ม (home / quiz / summary) — พื้น --ink แทน --card
   เพื่อให้ตอน skeleton ค้าง โครงหัวจอตรงกับสีจริง ไม่มีสีสลับตอน swap */
.sk-hero {
  background: var(--ink, #241f18); color: var(--ink-tx, #fff);
  border-radius: 0 0 22px 22px;
  padding: 18px 16px 20px;
  margin: -14px -14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.sk-hero .sk-line, .sk-hero .sk-block, .sk-hero .sk-circle, .sk-hero .sk-tile, .sk-hero .sk-chip {
  background: var(--ink-face, rgba(255,255,255,.08));
}
.sk-hero .sk-tile { background: var(--ink-face, rgba(255,255,255,.06)); }

/* หัวจอโปร่ง (plain-head) — history / bookmarks / boss */
.sk-plainhead { padding: 4px 4px 8px; display: flex; flex-direction: column; gap: 8px; }

/* แถบบน (topbar) แบบขาว/ครีม — study / laws / pdf / browse / interstitial */
.sk-topbar {
  background: var(--card); border-bottom: 1px solid var(--card-line, var(--line));
  margin: -14px -14px 6px; padding: 14px 14px 12px;
  display: flex; align-items: center; gap: 12px;
}
.sk-topbar .sk-circle { width: 36px; height: 36px; background: var(--surface-2); }
.sk-topbar .sk-col { gap: 6px; }

/* ปุ่มลอย/แถบล่าง — quiz มี .v2-bar, summary มี .sm-bar */
.sk-bottombar {
  margin-top: auto; margin-left: -14px; margin-right: -14px;
  padding: 12px 14px; background: var(--card);
  border-top: 1px solid var(--card-line, var(--line));
  display: flex; gap: 10px; align-items: center;
}
.sk-btn { height: 46px; border-radius: var(--radius-sm, 12px); flex: 1 1 auto;
  background: color-mix(in srgb, var(--text) 10%, var(--surface-2));
  animation: skPulse 1.6s ease-in-out infinite; }
.sk-btn.primary { background: color-mix(in srgb, var(--acc, #efaa20) 44%, var(--surface-2)); }

/* ---------- pulse ---------- */
@keyframes skPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: .90; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-block, .sk-line, .sk-circle, .sk-pill, .sk-tile, .sk-chip, .sk-btn {
    animation: none; opacity: .7;
  }
}

/* ============ ป้ายบอกสถานะภายใน skeleton ============
   บางหน้าโหลดจริง ๆ (PDF, ตัวบทกฎหมาย) ต้องมีข้อความว่ากำลังทำอะไร
   ไม่ใช่แค่ skeleton เพราะผู้ใช้จะไม่รู้ว่ารอเนื่องจากอะไร */
.sk-status {
  position: absolute; left: 50%; bottom: 24%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13px; font-weight: 700; text-align: center;
  z-index: 1; pointer-events: none;
}
.sk-status .sk-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--surface-2);
  border-top-color: var(--acc, var(--brand, #b8860b));
  animation: skSpin .9s linear infinite;
}
@keyframes skSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sk-status .sk-spin { animation: none; border-top-color: transparent; }
}

/* ============ Loader ระหว่างโหลด async (PDF/law-text) ============
   ต่างจาก skeleton ตรงที่ตัวเนื้อหาจริง ๆ ยังไม่มีในเครื่อง (network/parse ล้วน)
   จึงใช้ป้ายกลางจอ + สปินเนอร์ แทนการวาดโครง ผู้ใช้จะได้รู้ว่ากำลัง "โหลด" ไม่ใช่ "จัด layout" */
.lr-msg-load {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 44px 22px; color: var(--muted); text-align: center;
}
.lr-msg-load .lr-spin {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--surface-2);
  border-top-color: var(--acc, var(--brand, #b8860b));
  animation: skSpin .8s linear infinite;
}
.lr-msg-load b { font-size: 14.5px; color: var(--text); font-weight: 800; }
.lr-msg-load p { margin: 0; font-size: 12.5px; line-height: 1.7; max-width: 320px; }
.lr-msg-load .lr-pct { font-size: 22px; font-weight: 800; color: var(--brand-dark, var(--text));
  font-variant-numeric: tabular-nums; margin-top: -4px; }
@media (prefers-reduced-motion: reduce) {
  .lr-msg-load .lr-spin { animation: none; border-top-color: transparent; }
}

/* ============ ป้ายโหลดเล็ก ๆ ใน image / thumbnail ============
   ใช้กับหน้ากระดาษกฎหมาย (loading="lazy") — placeholder เห็นเงาก่อนภาพมาถึง */
.lr-sheet .lr-img[loading="lazy"]:not([complete]) { background: var(--surface-2); }
.lr-sheet {
  position: relative;
}
.lr-sheet::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0,0,0,.03) 50%, transparent 56%),
    var(--surface-2);
  border-radius: 6px;
  animation: skPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
.lr-sheet .lr-img { position: relative; z-index: 1; }
.lr-sheet .lr-img[data-loaded="1"] ~ ::before,
.lr-sheet:has(.lr-img[data-loaded="1"])::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lr-sheet::before { animation: none; opacity: .55; }
}

/* ============================================================
   ชั้นที่ 13 · ป้ายวุฒิบนหัวจอ (chip-level)
   ============================================================
   ก่อนหน้านี้แอปตั้งค่าวุฒิได้ที่ป๊อปอัปตั้งค่าเท่านั้น จึงไม่มีทางรู้จากหน้าแรก
   ว่าตอนนี้เกณฑ์ผ่านของแอปกำลังใช้ชุดของ ปวช./ปวส./ป.ตรี หรือ ป.โท —
   ผู้ใช้ ป.โท ที่ต้องได้ 65% วิชาคิดวิเคราะห์ อาจเข้าใจผิดว่าตัวเองผ่านแล้ว
   ตอน 60% (เกณฑ์ของอีกวุฒิ) ป้ายนี้เป็นชิปที่ 3 ต่อจากชิปสตรีก/ปีสอบ
   คลิกได้ = ทางลัดเปิดตั้งค่า ไม่ต้องเดินไปกดปุ่มมุมขวาบน
   สีเน้นเพื่อให้เห็นง่ายกว่าอีกสองชิป (ที่บอกสถานะเฉย ๆ) */
.hchip.lvl-chip {
  cursor: pointer;
  background: color-mix(in oklab, var(--acc) 14%, transparent);
  border-color: color-mix(in oklab, var(--acc) 32%, var(--line));
  color: var(--acc);
  font-weight: 700;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.hchip.lvl-chip svg { color: var(--acc); opacity: .9; }
.hchip.lvl-chip b { font-weight: 800; }
.hchip.lvl-chip:hover {
  background: color-mix(in oklab, var(--acc) 22%, transparent);
  border-color: color-mix(in oklab, var(--acc) 55%, var(--line));
}
.hchip.lvl-chip:active { transform: scale(.96); }
.hchip.lvl-chip:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
/* ชิปนี้เป็นปุ่มจริง (button element) — ล้างค่า default ของเบราว์เซอร์ที่จะเพี้ยนจากชิปอื่น
   ที่เป็น span (font-family/margin/appearance) */
button.hchip.lvl-chip { font-family: inherit; margin: 0; appearance: none; }
/* โหมดมืด — --acc เดิมของโหมดมืดสว่างพอ ไม่ต้องแก้ค่า แต่พื้นควรเข้มขึ้นเล็กน้อย
   กัน backdrop ที่ตัดกับสีการ์ดในหน้าแรกให้อยู่ในโทนเดียวกัน */
[data-theme="dark"] .hchip.lvl-chip {
  background: color-mix(in oklab, var(--acc) 18%, transparent);
  border-color: color-mix(in oklab, var(--acc) 42%, var(--line));
}

/* ============================================================
   ชั้นที่ 14 · ป้าย "เกณฑ์ของวุฒิไหน" ตรงจุดที่เอาเกณฑ์ไปใช้จริง
   ============================================================
   ชั้นที่ 13 ติดป้ายวุฒิไว้บนหัวจอหน้าแรกแล้ว แต่ตัวเลขเกณฑ์ผ่านไปโผล่อีกหลายที่
   (หน้าเลือกวิชา · แถบรายวิชาในหน้าวิเคราะห์ผล · กราฟแมงมุม · ตารางคะแนนตอนจบ)
   ทุกที่พิมพ์แค่ "60%" ลอย ๆ ซึ่งเป็นเลขคนละความหมายระหว่างสองวุฒิ
   → ติดป้ายกำกับไว้ทุกจุด ผู้ใช้จะได้ไม่ต้องเดาว่าที่เห็นอยู่คิดจากชุดไหน

   .lvl-tag.is-live = ผูกกับวุฒิปัจจุบัน กดแล้วเปิดตั้งค่าเปลี่ยนได้ทันที
   .lvl-tag เปล่า    = ค่าที่ frozen ไว้ในผลสอบ/ประวัติ กดไม่ได้ (แก้ย้อนหลังไม่ได้อยู่แล้ว)
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–13 */
.lvl-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 10px;
  font-size: 11.5px; line-height: 1.6; color: var(--muted);
}
/* --lvl-tag-ink = สีตัวอักษรของป้าย ไม่ใช่ var(--acc) ตรง ๆ
   ทองสด #efaa20 บนพื้นสว่างวัดได้ 2.0:1 — ต่ำกว่าเกณฑ์อ่านออก 4.5:1 เกือบเท่าตัว
   (ป้ายวุฒิบนหัวจอชั้นที่ 13 ใช้ทองสดได้เพราะนั่งบนแถบเข้ม แต่ป้ายชุดนี้อยู่บนการ์ดขาว/ครีม)
   ธีมสว่างจึงใช้ทองเข้ม #7a5100 = 6.2:1 บนทั้งขาวและครีม · ธีมมืดใช้ทองสดตามเดิม (10.3:1) */
:root { --lvl-tag-ink: #7a5100; }
.lvl-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid color-mix(in oklab, var(--acc) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, var(--acc) 13%, transparent);
  color: var(--lvl-tag-ink);
  font-family: inherit; font-size: 11px; font-weight: 800;
  line-height: 1.5; white-space: nowrap;
}
[data-theme="dark"] { --lvl-tag-ink: var(--acc); }
/* ตัวเล็ก "เปลี่ยน" ต่อท้ายป้ายที่กดได้ — บอกว่าป้ายนี้เป็นทางลัด ไม่ใช่ป้ายอ่านอย่างเดียว */
.lvl-tag i {
  padding-left: 6px;
  border-left: 1px solid color-mix(in oklab, var(--acc) 34%, transparent);
  font-style: normal; font-size: 10px; font-weight: 700; opacity: .85;
}
.lvl-tag.is-live {
  cursor: pointer; margin: 0; appearance: none;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.lvl-tag.is-live:hover {
  background: color-mix(in oklab, var(--acc) 22%, transparent);
  border-color: color-mix(in oklab, var(--acc) 55%, var(--line));
}
.lvl-tag.is-live:active { transform: scale(.96); }
.lvl-tag.is-live:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* ป้ายแบบ frozen (ผลสอบ/ประวัติ) — เป็นข้อมูลประกอบ ไม่ใช่ปุ่ม จึงถอนสีเน้นลงเป็นโทนเทา
   ไม่งั้นจะดูเหมือนกดได้ทั้งที่กดไม่ได้ */
.lvl-tag:not(.is-live) {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}
/* หมายเหตุใต้ตารางคะแนน — ป้าย frozen ขึ้นบรรทัดบน ข้อความดาวอยู่บรรทัดล่าง */
#kp-passmark-note { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#kp-passmark-note .lvl-line { margin: 0; }
/* ในป๊อปอัปแมงมุม .lvl-line ซ้อนอยู่ใน <p> จึงต้องดันขึ้นบรรทัดใหม่เอง */
.rdm-sub .lvl-line { display: flex; margin: 8px 0 0; }

/* กล่อง "เปลี่ยนแล้วมีผลกับ" ในป๊อปอัปตั้งค่า — ตอบคำถามว่าสวิตช์วุฒิไปกระทบตรงไหนบ้าง */
.set-where {
  margin: 10px 0 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-left: 3px solid var(--acc);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 12px; line-height: 1.65; color: var(--muted);
}
.set-where > b { display: block; margin-bottom: 5px; color: var(--text); font-size: 12.5px; font-weight: 800; }
/* ตัวหนาในประโยคต้องอยู่ใน .sw-line เท่านั้น ถ้าวางเป็นลูกตรงของ .set-where
   จะโดนกฎบรรทัดบนบังคับ display:block แล้วคำนั้นจะตกไปขึ้นบรรทัดใหม่เอง */
.set-where .sw-line { display: block; }
.set-where .sw-line b { color: var(--text); font-weight: 700; }
.set-where-note {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
}
.set-where-note b { color: var(--text); font-weight: 800; }

/* ============================================================
   ชั้นที่ 15 — เวอร์ชันฟรี: กุญแจทอง · แท็บข้อสอบฟรี · หน้าขาย 199
   ------------------------------------------------------------
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–14
   สามธีม (สว่าง/มืด/อ่าน) ใช้โทเคนชุดเดิมทั้งหมด ไม่มีสีตายตัวนอกจาก
   โลโก้ ก.พ. ใน SVG ซึ่งเป็นสีของแบรนด์จริง ไม่ควรเปลี่ยนตามธีม
   ============================================================ */

/* ---------- 15.1 · กุญแจทองบนของที่ล็อก ---------- */
[data-lock] { position: relative; }
.lock-key {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 27px; height: 27px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 36%, transparent);
  box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--brand) 55%, transparent);
  pointer-events: none;              /* คลิกทะลุไปโดนการ์ด ให้ตัวดัก data-lock ทำงาน */
  z-index: 3;
}
.lock-key svg { width: 15px; height: 15px; }

/* เนื้อหาในใบที่ล็อกหรี่ลง แต่หัวข้อยังอ่านออก — ให้รู้ว่ามีอะไรอยู่ข้างใน ถึงได้อยากปลดล็อก */
[data-lock].is-locked > *:not(.lock-key) { opacity: .58; }
[data-lock].is-locked { border-style: dashed; }
[data-lock].is-locked .arrow,
[data-lock].is-locked .sh-arrow,
[data-lock].is-locked .card-chev { visibility: hidden; }
[data-lock].is-locked:active { transform: none; }

/* การ์ดทรงสูง — กุญแจไปอยู่มุมขวาบน ไม่ใช่กลางใบ */
.year-card.is-locked > .lock-key,
.bank-card.is-locked > .lock-key { top: 15px; right: 14px; transform: none; }
/* ใบเรื่องในหน้าเกร็ดความรู้ — วางแทนที่ลูกศรกางการ์ดพอดี */
.study-card.is-locked > .lock-key { right: 13px; }
/* ปุ่มแฟลชการ์ดบนหัวจอเล็กมาก ใช้กุญแจย่อเกาะมุม */
.sn-tool.is-locked > .lock-key {
  width: 17px; height: 17px; border-radius: 6px;
  top: -4px; right: -4px; transform: none;
}
.sn-tool.is-locked > .lock-key svg { width: 10px; height: 10px; }

/* ---------- 15.2 · ป้ายเวลาทดลองบนหัวจอหน้าแรก ---------- */
.trial-chip[hidden] { display: none; }
.hero-chips .trial-chip {
  background: color-mix(in srgb, var(--brand-2) 26%, transparent);
  border-color: color-mix(in srgb, var(--brand-2) 52%, transparent);
  color: var(--ink-tx); font-weight: 700;
}
.hero-chips .trial-chip svg { width: 13px; height: 13px; }

/* ---------- 15.3 · แถบเมนูล่างตอนมี 6 ปุ่ม ---------- */
.nav-free-btn:not(.active) { color: var(--brand); }
.bottom-nav[data-navcount="6"] .nav-btn { padding-left: 0; padding-right: 0; }
.bottom-nav[data-navcount="6"] .nav-btn > span:last-child { font-size: 9.5px; letter-spacing: -.03em; }
.bottom-nav[data-navcount="6"] .nav-btn .ni svg { width: 19px; height: 19px; }
@media (max-width: 359px) {
  .bottom-nav[data-navcount="6"] .nav-btn > span:last-child { font-size: 9px; }
}

/* ---------- 15.4 · หน้าข้อสอบฟรี 30 ข้อ ---------- */
.free-hero {
  background: var(--ink); color: var(--ink-tx);
  padding: 26px 22px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.free-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-2) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-2) 48%, transparent);
  color: var(--brand-2); font-size: 11px; font-weight: 700;
}
.free-badge svg { width: 13px; height: 13px; }
.free-h1 { margin: 13px 0 0; font-size: 25px; font-weight: 800; line-height: 1.25; color: var(--ink-tx); }
.free-lead { margin: 9px 0 0; font-size: 13px; line-height: 1.85; color: var(--ink-mute); text-wrap: pretty; }
.free-lead b { color: var(--ink-tx); font-weight: 700; }

.free-body { padding: 16px 16px 26px; }
.free-mix { display: flex; gap: 8px; margin-bottom: 14px; }
.fm-item {
  flex: 1; min-width: 0; padding: 12px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
}
/* เดิมเป็นวงกลมพื้นสีวิชา (background: s.color) — ผู้ใช้ขอเอาพื้นออกและ "ย้ำ" ตัวเลขแทน
   จึงตัดกล่อง/สีพื้นทิ้ง เหลือแค่ตัวเลขตัวโตหนักมาก สีคือ readableInk(s.color) ที่ผูกมาจาก
   HTML แล้ว (ผ่านเกณฑ์ contrast กับทั้ง --card และ --bg พร้อมกันอยู่แล้ว ดู readableInk() ใน app.js) */
.fm-dot { font-size: 27px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.fm-item b { font-size: 11.5px; font-weight: 700; color: var(--text); line-height: 1.3; }
.fm-item > span:last-child { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.free-start {
  width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-accent, #fff);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand) 90%, transparent);
}
.free-start svg { width: 19px; height: 19px; }
.free-start:active { transform: scale(.985); }
.free-start-note { margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }

.free-facts { list-style: none; margin: 18px 0 0; padding: 0; }
.free-facts li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.free-facts li b { color: var(--text); font-weight: 700; }
.ff-tick {
  flex: none; width: 20px; height: 20px; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.ff-tick svg { width: 12px; height: 12px; }

.free-up {
  width: 100%; margin-top: 18px; padding: 15px 14px;
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--ink); color: var(--ink-tx);
  border: 1px solid var(--ink-line); border-radius: var(--radius);
}
.fu-key {
  flex: none; width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand-2) 20%, transparent); color: var(--brand-2);
}
.fu-key svg { width: 19px; height: 19px; }
.fu-tx { flex: 1; min-width: 0; }
.fu-tx b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink-tx); }
.fu-tx b i { font-style: normal; color: var(--brand-2); }
.fu-tx > span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.6; color: var(--ink-mute); }
.fu-go { flex: none; font-size: 20px; color: var(--brand-2); }

/* ---------- 15.5 · หน้าขายเต็มจอ ---------- */
body.pw-open { overflow: hidden; }
.pw-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none;
}
.pw-overlay.show { display: block; animation: pwIn .26s ease both; }
.pw-overlay [hidden] { display: none !important; }
.toast, .toast-stack { z-index: 1000; }
.pw-overlay.is-paid .pw-sales,
.pw-overlay.is-paid .pw-final,
.pw-overlay.is-paid .pw-foot { display: none; }
.premium-entry { width: 100%; margin-bottom: 14px; }
.hero-chips .premium-chip { cursor: pointer; min-height: 44px; color: var(--ink-tx); }
.trial-rule { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.premium-member-card { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.premium-member-card h3 { margin: 0 0 8px; font-size: 18px; }
.premium-member-card h4 { margin: 20px 0 8px; font-size: 16px; }
.premium-member-card p { font-size: 14px; line-height: 1.8; }
.premium-member-card .btn { width: 100%; min-height: 44px; white-space: normal; }
.premium-member-card .premium-support { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.premium-member-card a { display: inline-block; padding: 10px 0; color: var(--text); text-decoration: underline; }
@keyframes pwIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pw-sheet { max-width: var(--maxw); margin: 0 auto; padding-bottom: 8px; }

.pw-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 0; background: var(--ink);
}
.pw-x {
  width: 38px; height: 38px; border-radius: 13px; border: 0; cursor: pointer;
  background: var(--ink-face); color: var(--ink-tx);
  display: grid; place-items: center;
}
.pw-x svg { width: 16px; height: 16px; }
.pw-restore {
  border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 3px;
}
.pw-restore[hidden] { display: none; }

.pw-hero { position: relative; background: var(--ink); color: var(--ink-tx); padding: 20px 22px 26px; overflow: hidden; }
.pw-glow {
  position: absolute; top: -70px; right: -50px; width: 210px; height: 210px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 68%);
  pointer-events: none;
}
.pw-brand { position: relative; display: flex; align-items: center; gap: 13px; }
.pw-logo { width: 52px; height: 52px; flex: none; }
.pw-h1 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--ink-tx); }
.pw-h2 { margin-top: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--brand-2); }
.pw-lead { position: relative; margin: 18px 0 0; font-size: 13px; line-height: 1.85; color: var(--ink-mute); text-wrap: pretty; }
.pw-lead b { color: var(--ink-tx); font-weight: 700; }
.pw-stats { position: relative; display: flex; gap: 8px; margin-top: 20px; }
.pw-stat { flex: 1; min-width: 0; padding: 12px 9px; border-radius: 14px; background: var(--ink-face); }
.pw-stat b { display: block; font-size: 17px; font-weight: 800; line-height: 1; color: var(--ink-tx); }
.pw-stat.is-gold b { color: var(--brand-2); }
.pw-stat span { display: block; margin-top: 6px; font-size: 9.5px; line-height: 1.3; color: var(--ink-mute); }

.pw-pad { padding: 18px 16px 0; }
.pw-price {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--ink-tx);
  border-radius: var(--radius); padding: 20px;
}
.pw-price-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-2), transparent);
}
.pw-price-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pw-once { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--brand-2); }
.pw-off {
  flex: none; padding: 5px 10px; border-radius: 11px;
  background: var(--brand-2); color: #1b1712; font-size: 10.5px; font-weight: 800;
}
.pw-price-n { display: flex; align-items: flex-end; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.pw-price-n b { font-size: 48px; font-weight: 800; line-height: 1; color: var(--ink-tx); }
.pw-baht { font-size: 15px; font-weight: 600; color: var(--ink-mute); padding-bottom: 7px; }
.pw-price-n s { font-size: 14px; color: var(--ink-mute); opacity: .7; padding-bottom: 8px; }
.pw-price-sub { margin-top: 8px; font-size: 11.5px; color: var(--ink-mute); }
.pw-hr { height: 1px; background: var(--ink-line); margin: 16px 0 12px; }
.pw-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12px; }
.pw-row span { color: var(--ink-mute); }
.pw-row b { font-size: 12.5px; font-weight: 700; color: var(--ink-tx); }
.pw-row b.is-gold { color: var(--brand-2); }

.pw-gh { display: flex; align-items: center; gap: 9px; padding: 24px 20px 10px; }
.pw-gh b { font-size: 14px; font-weight: 800; color: var(--text); }
.pw-gh i { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); }
.pw-gb { width: 4px; height: 16px; border-radius: 2px; background: var(--brand-2); }
.pw-card {
  margin: 0 16px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.pw-li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-top: 1px solid var(--line); }
.pw-card > .pw-li:first-child, .pw-card > .pw-no:first-child { border-top: 0; }
.pw-li > div { flex: 1; min-width: 0; }
.pw-li b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--text); }
.pw-li span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.65; color: var(--muted); }
.pw-li em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); align-self: center; }
.pw-tick {
  flex: none; width: 20px; height: 20px; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.pw-tick svg { width: 12px; height: 12px; }

.pw-us { display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--brand-soft); }
.pw-us svg { width: 30px; height: 30px; flex: none; }
.pw-us > div { flex: 1; min-width: 0; }
.pw-us b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); }
.pw-us span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--brand-dark); }
/* ราคาของเราในตารางเทียบ — ใช้ --brand-dark เหมือนบรรทัดคำโปรยข้าง ๆ ไม่ใช่ --brand
   ทองสด (--brand) บนพื้นทองจาง (--brand-soft) วัดคอนทราสต์ได้ 4.29:1 ในธีมสว่าง
   ตกเกณฑ์ 4.5:1 ของตัวอักษรขนาดปกติ · --brand-dark ได้ 6.16 (สว่าง) / 6.52 (อ่านสบายตา) */
.pw-us em { flex: none; font-style: normal; font-size: 15px; font-weight: 800; color: var(--brand-dark); }

.pw-no { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-top: 1px solid var(--line); }
.pw-no b { font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--text); }
.pw-x-ic {
  flex: none; width: 20px; height: 20px; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center; background: var(--bad-soft); color: var(--bad);
}
.pw-x-ic svg { width: 11px; height: 11px; }

.pw-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px; border-radius: var(--radius);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.pw-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--brand); }
.pw-note b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.pw-note span { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.7; color: var(--brand-dark); }

.pw-final { padding: 20px; border-radius: var(--radius); background: var(--ink); text-align: center; }
.pw-final b { display: block; font-size: 17px; font-weight: 800; line-height: 1.45; color: var(--ink-tx); }
.pw-final span { display: block; margin-top: 7px; font-size: 11.5px; color: var(--ink-mute); }

.pw-bar {
  position: sticky; bottom: 0; margin-top: 20px;
  padding: 13px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 26px -20px rgba(0, 0, 0, .55);
}
.pw-buy {
  width: 100%; min-height: 56px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--brand-2); color: #1b1712;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16px; font-weight: 800;
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--brand-2) 90%, transparent);
}
.pw-buy svg { width: 19px; height: 19px; }
.pw-buy:active { transform: scale(.985); }
.pw-free {
  width: 100%; min-height: 48px; margin-top: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  font-size: 13.5px; font-weight: 700;
}
.pw-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; }
.pw-foot span { font-size: 10.5px; color: var(--muted); }
.pw-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .pw-overlay.show { animation: none; }
}

/* ============================================================
   ชั้นที่ 16 — ช่องขวาของแถบล่างหน้าทำข้อสอบ = "ส่งกระดาษคำตอบ"
   ------------------------------------------------------------
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–15

   ช่องขวาเคยเป็นปุ่ม "ข้ามไว้" (ข้อความล้วน กว้าง 88px) ตอนนี้เป็นทางลัดส่ง
   กระดาษคำตอบแทน ถ้าใส่คำว่า "ส่งกระดาษคำตอบ" เป็นบรรทัดเดียวขนาดปกติ
   จะกินความกว้างจนปุ่มหลัก "ข้อต่อไป" เหลือไม่พอที่ 360px จึงวางเป็น
   ไอคอนบน + ตัวหนังสือเล็กสองบรรทัดใต้ไอคอน (มี <br> คั่นเอง ไม่พึ่ง
   การตัดคำภาษาไทยของเบราว์เซอร์ ซึ่ง WebView บางรุ่นไม่ตัดให้)

   ใช้ .btn-outline ตามกติกา Master UI: เส้นขอบ = การกระทำที่ย้อนไม่ได้
   (เทียบกับครีมทึบของปุ่มรองอย่าง ❮ ที่กดผิดแล้วกดกลับได้) */
#screen-quiz .v2-bar .action-row .btn-submit-ico {
  /* .btn เป็น inline-flex แนวนอน gap 8px padding 14/20 — ต้องพลิกเป็นแนวตั้งทั้งชุด
     กว้างคงที่ 84px (เดิม 88px) เพื่อคืนที่ให้ "ตรวจและส่งคำตอบ" ของข้อสุดท้าย */
  flex: 0 0 84px; width: 84px; min-width: 0;
  flex-direction: column; gap: 3px;
  padding: 6px 4px;
  font-size: 10.5px; font-weight: 700; line-height: 1.12;
  text-align: center; white-space: normal;
  color: var(--text);
}
#screen-quiz .v2-bar .action-row .btn-submit-ico > svg {
  width: 20px; height: 20px; flex: none;
}
/* กดค้าง/โฟกัส — ยืมโทนทองอ่อนของปุ่มสถานะติด ให้รู้ว่ากดโดนแล้ว */
#screen-quiz .v2-bar .action-row .btn-submit-ico:active {
  background: var(--acc-soft); border-color: var(--brand, #d4a020);
}

/* ============================================================
   ชั้นที่ 17 — หัวจอหน้าแรกแถวเดียว · สวิตช์มีมิติ · ข้อสอบฟรีย้ายเข้าแท็บข้อสอบ
   ------------------------------------------------------------
   อยู่ท้ายไฟล์ = ชนะด้วยลำดับ source เหมือนชั้นที่ 4–16
   ============================================================ */

/* ---------- 17.1 · หัวจอหน้าแรก: แบรนด์เด่นเต็มแถว · ชิปเป็นแถวล่าง ----------
   เวอร์ชันก่อนวางชิปเป็นคอลัมน์ชิดขวา ปรากฏว่าชิป 4 ใบกองสูงจนกินความกว้าง
   ไปครึ่งจอ บีบให้ชื่อแอปเหลือ 19px และดูรกกว่าที่ควร
   จัดใหม่เป็นสองชั้นแทน:
     ชั้นบน  โลโก้ใหญ่ + ชื่อแอปตัวใหญ่ + คำโปรย  (ได้ความกว้างทั้งแถว)
     ชั้นล่าง ชิปเรียงเป็นแถวนอน ตกบรรทัดเองได้ ชิดซ้ายให้ตรงกับโลโก้
   ผลคือชื่อแอปขึ้นเป็น 26px และโลโก้ 58px ตามที่ต้องการ โดยหัวจอไม่ได้สูงขึ้น */
.home-hero .hero-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
/* ชั้นที่ 8 กัน padding-right: 58px ไว้ให้ .settings-fab ตอนที่หัวจอยังเป็นบล็อกเดียว
   ตอนนี้ที่ให้ปุ่มถูกกันด้วย margin-right ของชิปใบแรกแล้ว (ใบเดียวที่อยู่ระดับปุ่ม)
   ถ้าปล่อยไว้จะกลายเป็นกันที่ซ้อนกันสองชั้น = หัวจอเสียความกว้างไปเปล่า ๆ 58px
   ซึ่งเป็นสาเหตุที่คำอธิบายใต้ชื่อแอปโดนตัดท้ายตั้งแต่จอ 390px ลงมา */
.home-hero { padding-right: 16px; }
/* ---- ชั้นบน: โลโก้ + ชื่อแอป ----
   เฉพาะแถวนี้ที่อยู่ระดับเดียวกับ .settings-fab (fixed 40px ห่างขอบ 12px)
   จึงกันที่ให้ปุ่มแค่แถวนี้แถวเดียว แถวชิปข้างล่างได้ความกว้างเต็ม */
.home-hero .hero-brand {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding-right: 46px;
  min-width: 0;
}
.home-hero .hero-brand .hero-logo {
  width: 58px; height: 58px; flex: none;
  border-radius: 16px;
  /* เงาทองจาง ๆ ใต้โลโก้ ให้ดูลอยจากพื้นเข้มแทนที่จะจมหายไปกับมัน */
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--brand-2) 32%, transparent));
}
/* ชื่อแอปคือของที่ต้องเห็นก่อนเพื่อน — ได้ทั้งแถวแล้วจึงขยายได้เต็มที่
   (คำโปรย .hero-h-sub เป็น <span> อยู่ข้างใน <h1> ไม่ใช่พี่น้องกัน)
   ยังคง nowrap + … ไว้กันจอแคบมากดันให้หักบรรทัดจนหัวจอสูงพรวด */
.home-hero .hero-brand h1 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 26px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-hero .hero-brand .hero-h-sub {
  display: block; margin-top: 5px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- ชั้นล่าง: แถวชิป ----
   แถวนอนธรรมดาที่ตกบรรทัดเองได้ ชิดซ้ายให้ขอบตรงกับโลโก้
   ไม่ต้องกันที่ให้ปุ่มตั้งค่าแล้ว เพราะอยู่คนละระดับความสูงกัน */
.home-hero .hero-top .hero-chips {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding-right: 0;
  margin: 0;
}
/* ขนาดชิปถูกจูนให้ 4 ใบลงตัวใน 2 แถวที่จอ 360–430px พอดี
   ใหญ่กว่านี้อีกนิดเดียว (10.5px + แพดดิ้ง 11px) จะตกเป็น 3 แถวทันที
   ซึ่งดันหัวจอสูงขึ้น 24px โดยไม่ได้อะไรกลับมา */
.home-hero .hero-top .hero-chips .hchip {
  max-width: 100%;
  padding: 5px 10px;
  font-size: 10px;
  gap: 5px;
  border-radius: 999px;
}
.home-hero .hero-top .hero-chips .hchip svg { width: 11.5px; height: 11.5px; flex: none; }
.home-hero .hero-top .hero-chips .hchip > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

@media (max-width: 380px) {
  .home-hero .hero-top { gap: 12px; }
  .home-hero .hero-brand { gap: 2px; }
  .home-hero .hero-brand .hero-logo { width: 50px; height: 50px; }
  .home-hero .hero-brand h1 { font-size: 22px; }
  .home-hero .hero-brand .hero-h-sub { font-size: 10.5px; }
  .home-hero .hero-top .hero-chips { gap: 6px; }
  .home-hero .hero-top .hero-chips .hchip { font-size: 9.5px; padding: 5px 8px; }
  .home-hero .hero-top .hero-chips .hchip svg { width: 10.5px; height: 10.5px; }
}

/* ---------- 17.2 · สวิตช์ในป๊อปอัปตั้งค่า: ให้มีมิติขึ้น ----------
   เดิมเป็นแคปซูลแบนสีเดียว + ลูกกลมขาว แยกไม่ออกว่าเปิดหรือปิดถ้าไม่เพ่ง
   เพิ่ม: รางมีเงาจม (inset) · ลูกกลมมีไล่เฉดและเงาลอย · ตอนเปิดรางเป็นไล่เฉดทอง
   · กดแล้วลูกกลมยืดออกเล็กน้อยเหมือนสวิตช์จริง */
.setting-switch .switch {
  width: 52px; height: 30px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16), inset 0 -1px 0 rgba(255, 255, 255, .5);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.setting-switch .switch .sw-knob {
  top: 3px; left: 3px; width: 22px; height: 22px;
  background: linear-gradient(180deg, #fff, #e9e6df);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .08), inset 0 1px 0 #fff;
  transition: transform .28s cubic-bezier(.5, 1.35, .4, 1), width .14s ease;
}
.setting-switch .switch.on {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-color: var(--brand);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .22),
              0 2px 8px -3px color-mix(in srgb, var(--brand) 70%, transparent);
}
.setting-switch .switch.on .sw-knob { transform: translateX(22px); }
.setting-switch .switch:active .sw-knob { width: 26px; }
.setting-switch .switch.on:active .sw-knob { width: 26px; transform: translateX(18px); }
.setting-switch .switch:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
/* ทั้งแถวกดได้ → ให้รู้ว่ากดได้ และมีจังหวะยุบตอนกดเหมือนการ์ดอื่นในแอป */
.setting-switch { cursor: pointer; transition: transform .12s ease, border-color .18s ease; }
.setting-switch:active { transform: scale(.99); }
[data-theme="dark"] .setting-switch .switch {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), inset 0 -1px 0 rgba(255, 255, 255, .06);
}
[data-theme="dark"] .setting-switch .switch .sw-knob {
  background: linear-gradient(180deg, #f4efe4, #cfc7b8);
}

/* ---------- 17.3 · การ์ด "ทำข้อสอบ แบบฟรี" ในแท็บข้อสอบ ----------
   ย้ายมาจากแท็บแยก — ผู้ใช้เวอร์ชันฟรีจะได้เห็นของที่ล็อกอยู่รอบ ๆ ไปด้วย */
.menu-card.free-card[hidden] { display: none; }
.menu-card.free-card {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: linear-gradient(135deg, var(--brand-soft), var(--card) 62%);
}
.menu-card.free-card .ico { background: var(--brand-soft); color: var(--brand); }
.free-card-tag {
  flex: none; align-self: center;
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand); color: var(--on-accent, #fff);
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}

/* ปุ่มย้อนกลับบนหัวจอหน้าข้อสอบฟรี (ไม่ใช่แท็บแล้ว จึงต้องมีทางกลับ) */
.free-hero { position: relative; }
.free-back {
  position: absolute; top: 18px; left: 16px;
  width: 36px; height: 36px; border-radius: 12px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--ink-face); color: var(--ink-tx);
}
.free-back svg { width: 18px; height: 18px; }
.free-back:active { transform: scale(.94); }
/* มีปุ่มย้อนกลับแล้ว เนื้อหาต้องถอยลงมาไม่ให้ทับกัน */
.free-hero .free-badge { margin-top: 44px; }

/* ---------- 17.4 · บรรทัดตัดสิน ถูก/ผิด บนหัวเฉลย ----------
   โหมดเฉลยทันทีต้องตอบคำถามแรกของผู้ใช้ให้ได้ก่อน: "ที่กดไป ถูกหรือเปล่า" */
.ex-verdict {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.ex-verdict .ex-v-ic {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
}
.ex-verdict .ex-v-ic svg { width: 16px; height: 16px; }
.ex-verdict .ex-v-tx { min-width: 0; }
.ex-verdict .ex-v-tx b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.ex-verdict .ex-v-tx > span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.6; }
.ex-verdict.is-right {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
}
.ex-verdict.is-right .ex-v-ic { background: var(--ok); color: var(--card); }
/* --ok ล้วนบนพื้น --ok-soft วัดได้ 4.21 — ต่ำกว่าเกณฑ์ 4.5 เช่นเดียวกับฝั่ง --bad */
.ex-verdict.is-right .ex-v-tx b { color: color-mix(in srgb, var(--ok) 84%, #000); }
.ex-verdict.is-right .ex-v-tx > span { color: var(--text); }
.ex-verdict.is-wrong {
  background: var(--bad-soft);
  border-color: color-mix(in srgb, var(--bad) 34%, transparent);
}
.ex-verdict.is-wrong .ex-v-ic { background: var(--bad); color: var(--card); }
/* --bad ล้วนบนพื้น --bad-soft วัดได้ 4.38 ในธีมอ่าน ต่ำกว่าเกณฑ์ 4.5 ของตัวอักษรขนาดปกติ
   ผสมดำเข้าไปอีกนิดเฉพาะธีมสว่าง/อ่าน (ธีมมืด --bad เป็นสีอ่อนบนพื้นเข้ม ผสมดำจะแย่ลง) */
.ex-verdict.is-wrong .ex-v-tx b { color: color-mix(in srgb, var(--bad) 80%, #000); }
.ex-verdict.is-wrong .ex-v-tx > span { color: var(--text); }
[data-theme="dark"] .ex-verdict.is-wrong .ex-v-tx b { color: var(--bad); }
[data-theme="dark"] .ex-verdict.is-right .ex-v-tx b { color: var(--ok); }

/* ============================================================
   ชั้นที่ 18 — "ข้อควรรู้เกี่ยวกับข้อสอบ ก.พ." ย้ายจากการ์ดกางเป็นตัวหนังสือเล็ก + tooltip
   ------------------------------------------------------------
   เดิมเป็นการ์ดกาง-หุบเต็มใบ (.cred-card) คั่นอยู่ระหว่างการ์ดความพร้อมสอบกับหมวด
   "สอบเสมือนจริง" ผู้ใช้ขอให้เหลือแค่ตัวหนังสือเล็ก ๆ ใต้การ์ดหัว กดแล้วเด้ง tooltip
   แสดงเนื้อหาเดิมแทนการกางในที่เดิม (ดูการลบ .cred-card/.cc-h เดิมที่เกี่ยวข้องด้านบน)

   เนื้อหาข้างในยังใช้คลาสเดิมทั้งหมด (.cc-b/.cc-split/.cc-part/.cc-tag/.cc-foot/.cc-ref*)
   เปลี่ยนแค่ "กล่องที่ห่อมันไว้" จากการ์ดในหน้าเป็นป๊อปอัปลอย (.cred-tip-modal)
   ใช้คลาส modal-overlay ร่วมกับป๊อปอัปอื่นทั้งแอป (ปุ่มย้อนกลับ Android/แตะพื้นหลังปิดได้ฟรี)
   แค่ทับ align-items ให้ลอยใกล้ขอบบนแทนกึ่งกลางจอ จะได้ความรู้สึกเป็น tooltip ที่ผุด
   ขึ้นมาจากตัวกระตุ้นด้านบน ไม่ใช่กล่องโต้ตอบกลางจอแบบโมดัลทั่วไป
   ============================================================ */

/* ---- ตัวกระตุ้น: แถวข้อความเล็กใต้การ์ดความพร้อมสอบ ---- */
.cred-tip-trigger {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-start;                 /* .home-body เป็น flex column stretch โดยดีฟอลต์ — กันไม่ให้ยืดเต็มแถว */
  margin: 0 4px 4px;
  padding: 5px 2px;
  min-height: 32px;
  border: 0; background: none; cursor: pointer;
  font-size: var(--fs-tiny, 12px); font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 38%, transparent);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.cred-tip-trigger svg { width: 14px; height: 14px; flex: none; color: var(--brand); }
.cred-tip-trigger:active { opacity: .65; }

/* ---- ป๊อปอัป: ลอยใกล้ขอบบนแทนที่จะอยู่กึ่งกลางจอเหมือนโมดัลทั่วไป ----
   (align-items มาจาก .modal-overlay ฐาน — ทับเฉพาะจุดนี้ ที่เหลือ ยังใช้ padding/backdrop เดิม) */
.cred-tip-overlay { align-items: flex-start; }
.cred-tip-modal {
  max-width: 420px; text-align: left; padding-top: 20px;
  margin-top: max(60px, calc(env(safe-area-inset-top, 0px) + 52px));
}
.cred-tip-h {
  display: flex; align-items: center; gap: 9px;
  margin: 0 30px 12px 0;
  font-size: 15.5px; font-weight: 800; color: var(--text);
}
.cred-tip-h svg { flex: none; width: 18px; height: 18px; color: var(--brand); }

/* .cc-part/.cc-ref เดิมใช้ var(--card) ตัดกับพื้น var(--brand-soft) ของการ์ดแม่เดิม
   ตอนนี้แม่กลายเป็น .modal ซึ่งพื้นก็ var(--card) เหมือนกัน — สลับมาใช้ surface-2
   ให้กล่องย่อยยังตัดกับพื้นได้ ไม่จมหายไปเหมือนสีเดียวกันหมด */
.cred-tip-modal .cc-part, .cred-tip-modal .cc-ref { background: var(--surface-2); }
/* ขนาดตัวอักษรของ .cc-b p / .cc-part .cc-tag ฯลฯ อยู่ที่นิยามฐานของ .cc-* แล้ว
   (ย้ายมาจาก .cred-card เดิม — ดูใกล้ ๆ กับ .cc-split/.cc-part ด้านบนของไฟล์) */

/* ============================================================
   ชั้นที่ 19 — ยืนยันก่อนออกไปเว็บภายนอก (#extlink-modal)
   ------------------------------------------------------------
   ลิงก์ทุกเส้นที่ชี้ออกนอก origin ของแอปถูกดักด้วย openExternal() ใน app.js
   แล้วเด้งกล่องนี้ก่อนเสมอ ผู้ใช้ต้องเห็น "จะไปที่ไหน" ก่อนตัดสินใจ
   เน้น hostname ตัวโต เพราะนั่นคือข้อมูลชิ้นเดียวที่ใช้ตัดสินว่าปลายทางน่าเชื่อไหม
   ส่วน URL เต็มวางไว้ใต้ตัวเล็ก ให้ตรวจได้แต่ไม่แย่งสายตา
   ============================================================ */
.xl-modal { max-width: 380px; text-align: center; }
.xl-modal .xl-ic {
  width: 46px; height: 46px; margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2); color: var(--brand);
  border: 1px solid var(--line);
}
.xl-modal .xl-ic svg { width: 24px; height: 24px; }
.xl-modal h3 { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.xl-lead { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 13px; }

/* กล่องปลายทาง — เส้นซ้ายทองบอกว่า "นี่คือข้อมูลที่ต้องอ่านก่อนกด" แบบเดียวกับ .set-where */
.xl-dest {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--acc);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: left;
}
.xl-dest-l { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.xl-host {
  display: block; margin-top: 2px;
  font-size: 15.5px; font-weight: 800; color: var(--text);
  /* โดเมนยาว ๆ ต้องตัดได้ทุกตัวอักษร ไม่งั้นดันกล่องกว้างจนล้นจอแคบ */
  word-break: break-all; line-height: 1.35;
}
.xl-url {
  /* URL ยาวมาก (เช่น พาธ PDF ของ ก.พ. ที่เป็น percent-encoding ทั้งเส้น)
     จำกัดไว้ 3 บรรทัด ไม่งั้นกล่องยาวจนปุ่มยืนยันหลุดจอ
     -webkit-box คือค่า display ที่ line-clamp ต้องใช้ จึงกินที่ block ไปในตัว */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 4px;
  font-size: 11px; color: var(--muted); line-height: 1.5;
  word-break: break-all;
}
.xl-note {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  margin: 0 0 14px;
}
.xl-modal #xl-go { font-size: 15.5px; font-weight: 800; padding: 13px; }
.xl-modal #xl-go svg { width: 18px; height: 18px; }
.xl-modal #xl-cancel { margin-top: 8px; }

/* ============================================================
   ชั้นที่ 20 — เครื่องหมายถูกในรายการ "ซื้อครั้งเดียว ได้ทั้งหมดนี้"
   ------------------------------------------------------------
   กับดัก specificity: .pw-tick เป็น <span> จึงโดน .pw-li span ทับทั้งชุด
       .pw-li span  (0,1,1) ชนะ  .pw-tick (0,1,0)
   ผลคือ color: var(--brand) ที่ตั้งใจให้เป็นทอง กลายเป็น var(--muted) สีเทาอมฟ้า
   และ margin-top: 4px ของกฎนั้นก็ทับ margin-top: 2px ของตัวเอง ทำให้เครื่องหมาย
   ลอยสูงกว่ากึ่งกลางแถว — ต้องยกน้ำหนักตัวเลือกให้ชนะก่อน แล้วค่อยตั้งค่าจริง

   ลองมาสองรอบ: (1) ทองทึบ+ไอคอนเข้ม (2) พื้นเทา+ไอคอนทองใหญ่ — ผู้ใช้ขอเอาพื้นออกทั้งคู่
   สุดท้ายไม่มีกล่องพื้นหลังเลย เหลือแค่เครื่องหมายถูกตัวโตสีทองล้วน
   ใช้ var(--brand) ไม่ใช่ var(--acc) เพราะทองสด (--acc) วางบนพื้นการ์ดขาว/ครีมตรง ๆ
   วัดคอนทราสต์ได้แค่ 1.77:1 (สว่าง) และ 2.72:1 (โหมดอ่าน) ตกเกณฑ์ 3:1 ของกราฟิก
   --brand คือทองรุ่นเข้มลงที่ระบบมีให้อยู่แล้วสำหรับกรณีนี้โดยเฉพาะ (ใช้จุดเดียวกับ
   ไอคอนป๊อปอัปยืนยันลิงก์ภายนอก .xl-ic) วัดได้ 4.29:1 (สว่าง) / 10.33:1 (มืด) /
   4.69:1 (โหมดอ่าน) ผ่านเกณฑ์ AA ปกติ (4.5:1) เกือบทุกธีมโดยไม่ต้องพึ่งพื้นหลังช่วย
   ============================================================ */
.pw-card .pw-li > .pw-tick {
  align-self: center;                    /* กึ่งกลางแถวในแนวตั้ง ไม่ลอยไปชิดบรรทัดแรก */
  margin-top: 0;
  display: grid; place-items: center;    /* กึ่งกลางกล่องตัวเองในแนวนอน+ตั้ง */
  width: 30px; height: 30px;
  background: none; color: var(--brand);
  /* .pw-li span ยัด font-size 11.5px มาด้วย ซึ่งพา line-height มาดัน svg ให้เยื้อง
     ตั้งเป็น 0 ตัดปัญหาที่ต้นเหตุ (ขนาดจริงของไอคอนคุมด้วย width/height ข้างล่าง) */
  font-size: 0; line-height: 0;
}
.pw-card .pw-li > .pw-tick svg { width: 26px; height: 26px; display: block; stroke-width: 3; }

/* เป้าหมายถัดไป: ข้อความและปุ่มชิ้นเดียวที่พาคนกลับไปลงมือทำต่อ */
.home-next {
  margin: 2px 0 4px; padding: 15px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-soft);
}
.home-next.is-resume { border-left-color: var(--ok, var(--green)); }
.hn-kicker { margin-bottom: 4px; color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-next.is-resume .hn-kicker { color: var(--ok, var(--green)); }
.home-next > b { display: block; color: var(--text); font-size: 15px; line-height: 1.42; }
.home-next > p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.hn-progress { height: 5px; overflow: hidden; margin-top: 11px; border-radius: 99px; background: var(--surface-2); }
.hn-progress i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .4s ease; }
.hn-actions { display: flex; gap: 8px; margin-top: 12px; }
.hn-actions .btn { min-height: 38px; padding: 8px 13px; font-size: 12.5px; }
.sm-next { margin: 8px 0 0; padding-top: 9px; border-top: 1px solid var(--ink-line); color: var(--ink-tx); font-size: 11.5px; line-height: 1.65; }
.sm-next:empty { display: none; }
.pw-core-benefits { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.pw-core-benefits > div { padding: 12px 13px; background: var(--card); }
.pw-core-benefits b { display: block; color: var(--text); font-size: 13px; }
.pw-core-benefits span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
@media (max-width: 360px) { .hn-actions { flex-wrap: wrap; } .hn-actions .btn { flex: 1 1 auto; } }

/* หน้าทำข้อสอบ: โจทย์และตัวเลือกเป็นจุดเด่น ข้อมูลช่วยตัดสินใจยังอยู่ครบแต่เบาลง */
#screen-quiz .qhead-meta { opacity: .72; }
#screen-quiz .q-tools .q-chip { color: var(--muted); background: transparent; box-shadow: none; }
#screen-quiz .quiz-body.hard-question { border: 0; border-radius: 0; animation: none; }
#screen-quiz .hard-badge { margin-left: 0; color: var(--brand); background: var(--brand-soft); border-color: transparent; }
/* หน้าแรกใช้เส้นและระยะเพื่อจัดลำดับการ์ดรอง ลดเงาที่ทำให้หลายใบดูสำคัญเท่ากัน */
.home-body > .menu-card:not(.feat):not(.glow-new) { box-shadow: none; }