/* NL2 Med Quiz — สไตล์ทั้งเว็บ (แยกออกจาก index.html เพื่อให้เบราว์เซอร์แคชแยกได้
   แก้ CSS แล้วผู้ใช้ไม่ต้องโหลด JS ใหม่ และกลับกัน) */
/* ============================================================================
   DESIGN TOKENS — แหล่งความจริงเดียวของสี ระยะ มุมโค้ง เงา
   แก้ที่นี่ที่เดียวแล้วเปลี่ยนทั้งเว็บ ไม่ต้องไล่แก้ค่าดิบตามแต่ละ rule
   ========================================================================== */
:root{
  color-scheme:light;
  /* ── สีเน้น: เหลือสีเดียว ───────────────────────────────────────────────
     เดิมมี 3 ตระกูลแข่งกัน (น้ำเงิน + เขียวหัวเป็ด + ทอง) ทำให้ไม่มีสีไหน
     เป็น "สีของแบรนด์" จริง ๆ ตอนนี้เหลือเขียวหัวเป็ดเข้มตัวเดียว
     #0d7c6e คอนทราสต์ 4.9:1 บนพื้นขาว จึงใช้เป็นตัวอักษรได้ตามเกณฑ์ AA */
  --accent:#0d7c6e; --accent-h:#0a655a; --accent-w:#eefaf7; --accent-l:#c3ebe3;
  /* สีตัวอักษรบนพื้นสีเน้น — ต้องเป็นโทเคน ไม่ใช่กฎ html[data-theme="dark"] .btn
     เพราะกฎแบบนั้นมี specificity สูงกว่า .btn.outline แล้วไปทับสีตัวอักษร
     ของปุ่มรองจนกลืนหายไปกับพื้นในโหมดมืด */
  --on-accent:#ffffff;
  /* ── พื้นผิว 4 ขั้น ── */
  --bg:#fafafa; --paper:#ffffff; --sunken:#f4f5f7; --hover:#eef0f3;
  /* ── หมึก 3 ขั้น (ทุกขั้นผ่าน 4.5:1 บนพื้นขาว) ── */
  --ink:#0f1720;    /* 16.9:1 */
  --ink-2:#4a5561;  /*  7.4:1 */
  --ink-3:#646e7b;  /*  4.5:1 บนพื้นอ่อนสุด (--hover) — ห้ามใช้สีอ่อนกว่านี้กับตัวอักษร */
  /* ── เส้น 2 ขั้น ── */
  /* เส้น 2 ขั้น — ตรวจ contrast แล้ว (WCAG 1.4.11 non-text)
     line   = เส้นคั่น/ขอบการ์ด (ตกแต่ง) 1.40:1 บนพื้นอ่อนสุด
     line-2 = ขอบของสิ่งที่กดได้ (ปุ่ม ช่องกรอก ตัวเลือก) ต้อง >=3:1 เพราะ
              ในดีไซน์นี้ไม่มีเงาแล้ว เส้นขอบเป็นสิ่งเดียวที่บอกว่านี่คือตัวควบคุม */
  --line:#d0d1d5; --line-2:#898d92;
  /* ── สถานะ: โผล่เฉพาะตอนเฉลย ── */
  --ok:#0f7a45; --ok-w:#f0faf4; --ok-l:#bfe3cd;
  --no:#c0392b; --no-w:#fdf3f1; --no-l:#f0cac3;
  --star:#d9a326;   /* สีเติมของดาว — ใช้ที่เดียวคือดาว/ที่บันทึกไว้ ไม่ใช้เป็นพื้นผิว */
  --star-d:#b1851f; /* เส้นขอบดาว 3.1:1 บนพื้นอ่อนสุด — ทำให้ "รูปทรง" ผ่านเกณฑ์
                       โดยยังคงสีทองไว้ (ทองสด ๆ ได้แค่ 2.3:1 ซึ่งไม่ผ่าน) */
  --warn:#956800; --warn-w:#fdf6e5;  /* ระดับ "กลาง ๆ" — 4.6:1 บนพื้นป้ายสีอุ่น */
  /* ── มุมโค้ง: 3 ค่า (เดิม 5) ── */
  --r:8px; --r-lg:12px; --r-full:999px;
  /* ── เงา: เฉพาะของที่ "ลอย" จริง เช่น modal / dropdown
        การ์ดปกติไม่มีเงา ใช้เส้นขอบ 1px ทำงานแทน ── */
  --pop:0 4px 16px rgba(15,23,32,.10),0 1px 3px rgba(15,23,32,.06);
  --pop-lg:0 24px 56px rgba(15,23,32,.20);
  /* ── ระยะ: สเกล 4px ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --ease:cubic-bezier(.32,.72,0,1);
  --measure:68ch;   /* ความกว้างสูงสุดของเนื้อที่ต้องอ่านยาว ๆ */
  /* รูปดาวสำหรับใช้เป็น mask (ผังข้อ) — ไม่ใช้อีโมจิเพราะหน้าตาเพี้ยนข้ามระบบ */
  --starmask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 2.6 2.9 6 6.6 1-4.8 4.6 1.1 6.5L12 17.6 6.2 20.7l1.1-6.5L2.5 9.6l6.6-1Z'/></svg>");

  /* ══ ALIAS ของโทเคนเดิม ══════════════════════════════════════════════
     CSS เดิมอ้างชื่อพวกนี้อยู่หลายร้อยจุด แทนที่จะไล่แก้ทีละบรรทัด
     (เสี่ยงพลาดและ diff อ่านไม่รู้เรื่อง) ให้ชื่อเดิมชี้มาที่ชุดใหม่แทน
     เมื่อไล่เปลี่ยนครบทุกจุดแล้วค่อยลบบล็อกนี้ทิ้ง                         */
  --navy:var(--ink); --navy2:var(--ink-2);
  --teal:var(--accent); --teal-d:var(--accent); --teal-soft:var(--accent-w);
  --gold:var(--star); --gold-d:var(--warn);
  --paper2:var(--sunken);
  --ink2:var(--ink-2); --muted:var(--ink-3);
  --line2:var(--line-2);
  --okbg:var(--ok-w); --okline:var(--ok-l);
  --bad:var(--no); --badbg:var(--no-w); --badline:var(--no-l);
  --goldbg:var(--warn-w); --goldline:var(--line-2);  /* เหลือใช้เป็นป้ายเตือน ไม่ใช่พื้นกล่องเฉลย */
  --r-xs:var(--r); --r-sm:var(--r); --r-md:var(--r-lg);
  --sh-1:none; --sh-2:none; --sh-3:var(--pop); --sh-4:var(--pop-lg);
  --sp-1:var(--s1); --sp-2:var(--s2); --sp-3:var(--s4);
  --sp-4:var(--s5); --sp-5:var(--s6); --sp-6:var(--s7);
}
*{box-sizing:border-box}
/* ฟอนต์: Inter รับตัวอักษรละติน (โจทย์ส่วนใหญ่เป็นอังกฤษ) + Sarabun รับตัวไทย (เฉลย)
   เบราว์เซอร์เลือกให้เองทีละตัวอักษร จึงได้ทั้งความคมของ Inter และความอ่านง่ายของ Sarabun */
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter","Sarabun","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,.serif{font-family:"Inter","Sarabun",sans-serif;font-weight:650;letter-spacing:-.02em}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
::selection{background:var(--accent-w);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- header — พื้นอ่อน เส้นคั่นบาง ๆ แทนแถบน้ำเงินทึบ ---------- */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);color:var(--ink);border-bottom:1px solid var(--line)}
html[data-theme="dark"] header{background:rgba(12,17,22,.86)}
.hbar{max-width:1040px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:700;font-size:16px;
  letter-spacing:-.02em;color:var(--ink);flex:none}
.logo svg{width:28px;height:28px;flex:none}
/* โลโก้ผูกกับโทเคน — โหมดมืดกลับสีเองโดยไม่ต้องมีไฟล์ที่สอง */
.lg-bg{fill:var(--ink)} .lg-fg{stroke:var(--paper)}
html[data-theme="dark"] .lg-bg{fill:var(--accent)}
html[data-theme="dark"] .lg-fg{stroke:#08201d}

.search{flex:1;min-width:120px;max-width:380px;position:relative}
.search input{width:100%;padding:8px 13px 8px 36px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--paper2);color:var(--ink);font-family:inherit;font-size:14px;transition:.15s}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:var(--teal);background:var(--paper);box-shadow:0 0 0 3px var(--teal-soft)}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);
  pointer-events:none;display:flex}

/* แถบแท็บชั้นล่างของหัวเว็บ */
.tabsbar{padding-top:0;padding-bottom:0;border-top:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;width:100%}
.nav::-webkit-scrollbar{display:none}
.nav button{position:relative;background:transparent;color:var(--ink-3);border:none;font-family:inherit;
  font-size:14px;font-weight:550;cursor:pointer;padding:11px 13px 13px;border-radius:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;transition:color .13s var(--ease)}
.nav button:hover{color:var(--ink)}
/* ตำแหน่งปัจจุบันบอกด้วยเส้นใต้ ไม่ใช่พื้นสี — อ่านง่ายกว่าและไม่เพิ่มสีในหน้า */
.nav button.on{color:var(--ink);font-weight:650}
.nav button.on::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0}
.pill{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r-full);
  padding:4px 11px;font-size:12px;font-weight:500;color:var(--ink2);white-space:nowrap}
.navtoggle,.hsep{display:none}

/* เมนู "เพิ่มเติม" — รวมหน้าที่ใช้ไม่บ่อยไว้ในดรอปดาวน์เดียว */
.moremenu{position:relative}
.moremenu .drop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-3);padding:6px;
  display:none;flex-direction:column;z-index:40;animation:popIn .15s var(--ease)}
.moremenu.open .drop{display:flex}
.moremenu .drop button{width:100%;justify-content:flex-start;padding:9px 11px;font-size:14px;gap:10px}
.moremenu .drop .sep{height:1px;background:var(--line);margin:5px 6px}
.moremenu .drop .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:8px 11px 4px}

/* ---------- แถบล่างบนมือถือ — เข้าถึงหน้าหลัก 5 หน้าด้วยนิ้วโป้ง ---------- */
#tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);padding:5px 4px calc(5px + env(safe-area-inset-bottom))}
html[data-theme="dark"] #tabbar{background:rgba(12,17,22,.94)}
#tabbar .tb{display:flex;max-width:560px;margin:0 auto}
#tabbar button{flex:1;background:none;border:none;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;
  color:var(--muted);font-size:11px;font-weight:600;position:relative;border-radius:var(--r-xs)}
#tabbar button .i{width:21px;height:21px;stroke-width:1.8}
#tabbar button.on{color:var(--teal-d)}
#tabbar button .dot{position:absolute;top:3px;right:calc(50% - 17px);min-width:16px;height:16px;
  border-radius:var(--r-full);background:var(--bad);color:#fff;font-size:10px;font-weight:700;
  line-height:16px;padding:0 4px}

@media(max-width:760px){
  /* บนมือถือใช้แถบล่างเป็นตัวนำทางหลัก แถบแท็บด้านบนจึงซ่อนไป
     (เดิมยุบเป็นเมนูแฮมเบอร์เกอร์ ซึ่งซ้ำซ้อนกับแถบล่างที่มีอยู่แล้ว) */
  .tabsbar{display:none}
  .hbar{padding:10px 16px}
  #tabbar{display:block}
  body{padding-bottom:68px}
}
/* ปุ่ม — ความสูงคงที่ 42px ทุกตัว (แตะง่ายและเรียงกันตรง) ไม่มีเงา ไม่มีสีทอง
   มี 4 ระดับพอ: หลัก (accent) / รอง (ขอบ) / เงียบ (โปร่ง) / อันตราย         */
.btn{background:var(--accent);color:var(--on-accent);border:1px solid transparent;border-radius:var(--r);
  height:42px;padding:0 18px;font-weight:600;cursor:pointer;font-size:15px;font-family:inherit;
  line-height:1;transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--accent-h)}
.btn:active{transform:translateY(1px)}
/* .outline / .sec / .gold ในโค้ดเดิมยุบเหลือหน้าตาเดียวกันคือ "ปุ่มรอง"
   เพราะเดิมสามแบบนี้ต่างกันแค่เฉดสี ไม่ได้ต่างกันที่ลำดับความสำคัญ */
.btn.outline,.btn.sec,.btn.gold{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn.outline:hover,.btn.sec:hover,.btn.gold:hover{background:var(--hover);border-color:var(--ink-3);color:var(--ink)}
.btn.quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.btn.quiet:hover{background:var(--hover);color:var(--ink)}
.btn.danger{background:var(--no);color:#fff}
.btn.danger:hover{background:#a52f22;color:#fff}
.btn.sm{height:34px;padding:0 13px;font-size:13px}
.btn.lg{height:48px;padding:0 24px;font-size:16px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:var(--accent)}
.btn.outline:disabled:hover,.btn.sec:disabled:hover,.btn.gold:disabled:hover{background:var(--paper)}

/* ---------- hero ----------
   เดิมเป็นแถบไล่สีน้ำเงินเข้มสูงราว 320px พร้อมเส้น ECG วิ่ง สวยครั้งแรกที่เห็น
   แต่คนที่เข้ามาทุกวันต้องเลื่อนผ่านทุกครั้งเพื่อไปถึงสิ่งที่จะกดจริง
   ตอนนี้เป็นพื้นกระดาษเรียบ เตี้ยลง และให้ปุ่มกับตัวเลขเป็นตัวเด่นแทนพื้นหลัง  */
.hero{position:relative;background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{position:relative;z-index:1;padding:var(--s7) 24px var(--s6)}
.hero h1{font-size:clamp(26px,4vw,36px);margin:0 0 var(--s2);line-height:1.14;
  letter-spacing:-.03em;font-weight:700}
.hero p{font-size:17px;color:var(--ink-2);margin:0 0 var(--s5);font-weight:400;
  max-width:58ch;line-height:1.6}
/* บรรทัดทักทาย + นับถอยหลัง แล้วต่อด้วยเส้น ECG วิ่งไปจนสุดความกว้าง
   ย้ายมาจาก hero เดิมที่เส้นพาดเต็มความกว้างแถบไล่สี — ตอนนี้เป็นรายละเอียดเล็ก ๆ
   ที่ให้กลิ่นอายเครื่องมือแพทย์โดยไม่กินพื้นที่และไม่แย่งสายตาจากตัวเลข */
.greet{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-3);margin-bottom:8px}
.greet > span{flex:none}
.ecgline{flex:1;min-width:70px;height:24px;display:block}
.ecgline path{fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:760;stroke-dashoffset:760;animation:ecgsweep 5.5s linear infinite}
@keyframes ecgsweep{
  0%{stroke-dashoffset:760}
  55%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-760}
}
/* ปิดการเคลื่อนไหวให้คนที่ตั้งค่าไว้ และต้องคงเส้นให้เห็นเต็ม ๆ
   (กฎ reduced-motion รวมด้านล่างจะทำให้อนิเมชันจบที่เฟรมสุดท้าย = เส้นหายไป) */
@media(prefers-reduced-motion:reduce){
  .ecgline path{animation:none!important;stroke-dashoffset:0!important;opacity:.45}
}
@media(max-width:640px){ .ecgline{display:none} }
/* แถบตัวเลขสถานะ — 4 ตัวที่ทำให้ตัดสินใจได้ทันทีว่าจะทำอะไรต่อ */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);margin:var(--s5) 0}
.metric{padding:var(--s4) var(--s5);border-right:1px solid var(--line)}
.metric:last-child{border-right:none}
.metric .n{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.metric .n small{font-size:14px;font-weight:550;color:var(--ink-3);letter-spacing:0}
.metric .k{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.45}
.metric.hot .n{color:var(--accent)}
@media(max-width:860px){
  .metrics{grid-template-columns:1fr 1fr}
  .metric{border-bottom:1px solid var(--line)}
  .metric:nth-child(2n){border-right:none}
  .metric:nth-last-child(-n+2){border-bottom:none}
}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn{height:48px;padding:0 22px;font-size:16px}
.ecgline{display:none}
@keyframes draw{0%{stroke-dashoffset:1400}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1400}}

/* ---------- sections ---------- */
section{padding:var(--sp-5) 0}
.sechead{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
.sechead h2{font-size:21px;margin:0;color:var(--ink);letter-spacing:-.015em;font-weight:700}
.sechead .bar{display:none}
.sechead .more{margin-left:auto;font-size:14px;color:var(--teal-d);cursor:pointer;font-weight:600}
.sechead .more:hover{text-decoration:underline}

/* การ์ดหมวด — เลิกใช้ทรงแฟ้มผู้ป่วย (มุมเบี้ยว + แท็บทับหัวข้อ) เป็นการ์ดเรียบมุมเท่ากัน */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.file-card{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;box-shadow:var(--sh-1);cursor:pointer;overflow:hidden;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.file-card::before{display:none}
.file-card .tab{position:static;display:inline-block;color:var(--teal-d);background:var(--teal-soft);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;
  border-radius:var(--r-xs);white-space:nowrap;margin-bottom:10px}
/* hover: เปลี่ยนแค่สีขอบ ไม่ยกตัวและไม่เพิ่มเงา — เดิมทั้งกริดขยับตอนเลื่อนเมาส์ผ่าน */
.file-card:hover{border-color:var(--ink-3)}
.file-card h3{margin:0 0 6px;font-size:17px;color:var(--ink);line-height:1.34;font-weight:600}
.file-card .tags{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.tag{font-size:12px;background:var(--paper2);color:var(--ink2);border-radius:var(--r-xs);
  padding:2px 8px;font-weight:500}
.tag.teal{background:var(--teal-soft);color:var(--teal-d)}
.file-card .meta{color:var(--muted);font-size:13px;margin:6px 0 12px;display:flex;gap:12px;flex-wrap:wrap}
.file-card .best{color:var(--ok);font-size:13px;font-weight:600}
.bk{position:absolute;top:12px;right:12px;font-size:18px;cursor:pointer;color:var(--line2);
  z-index:2;user-select:none;transition:color .13s}
.bk:hover{color:var(--star-d)}
.bk.on{color:var(--star-d)}
.bk.on svg{fill:var(--star)}
.file-card.subj{text-align:center;cursor:pointer;padding:22px 18px}
.file-card.subj h3{margin-top:2px;font-size:16px}
.file-card.subj .meta{font-size:12px}
.file-card.subj .best{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px}
/* ไอคอนหมวด: วงกลมอ่อน ๆ ให้ดูเป็นชุดเดียวกันแทนอีโมจิที่สีมั่ว */
.subjico{width:46px;height:46px;margin:2px auto 12px;border-radius:var(--r-md);
  background:var(--teal-soft);color:var(--teal-d);display:flex;align-items:center;justify-content:center}
.subjico .i{width:24px;height:24px;stroke-width:1.7}
/* ไอคอนนำหน้าการ์ดแนวนอน (streak / นับถอยหลัง / ชุดประจำวัน) */
.cardico{width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--paper2);
  color:var(--ink2);display:flex;align-items:center;justify-content:center}
.cardico .i{width:21px;height:21px}

/* trending horizontal cards */
.trend-scroll{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x mandatory;
  scrollbar-width:thin}
.trend-card{scroll-snap-align:start;flex:0 0 292px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--sh-1);position:relative;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.trend-card:hover{border-color:var(--ink-3)}
/* แถบความคืบหน้าที่ขอบบนการ์ด */
.rail{position:absolute;left:0;right:0;top:0;height:3px;background:var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.rail i{display:block;height:100%;background:var(--accent)}
.file-card .rail{border-radius:var(--r-lg) var(--r-lg) 0 0}
.trend-card .foot{display:flex;align-items:center;gap:8px}
.trend-card h3{font-size:16px;margin:8px 0;color:var(--ink);font-weight:600;line-height:1.35}
.trend-card .meta{color:var(--muted);font-size:13px;display:flex;gap:12px;margin-bottom:12px}
.trend-card .foot{display:flex;align-items:center;gap:10px}

/* progress / ECG monitor */
/* แผงความคืบหน้า — เดิมเป็นการ์ดไล่สีน้ำเงินเข้มพร้อมเส้น ECG วิ่ง ซึ่งเป็น
   ภาษาภาพคนละชุดกับส่วนอื่นทั้งหน้า ตอนนี้เป็นการ์ดกระดาษเหมือนที่เหลือ
   แล้วให้ "ตัวเลข" เป็นตัวเด่นแทนพื้นหลัง */
.monitor{background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s5);position:relative;overflow:hidden}
.monitor h3{color:var(--ink);margin:0 0 4px;font-size:17px;font-weight:650}
.monitor .stats{display:flex;gap:var(--s6);flex-wrap:wrap;margin:var(--s4) 0 var(--s1)}
.monitor .stat .n{font-size:28px;font-weight:700;color:var(--ink);line-height:1.1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.monitor .stat:first-child .n{color:var(--accent)}
.monitor .stat .l{font-size:12px;color:var(--ink-3);margin-top:4px}
.monitor .msg{background:var(--accent-w);border-left:3px solid var(--accent);padding:11px 15px;
  border-radius:0 var(--r) var(--r) 0;margin-top:var(--s4);font-size:14px;color:var(--ink-2);line-height:1.6;
  position:relative;z-index:1}
/* เส้น ECG วิ่งในการ์ด — วางมุมขวา "บน" ซึ่งเป็นพื้นที่ว่างจริง ๆ
   (เดิมวางมุมขวาล่างเหมือน index เก่า แต่ดีไซน์ใหม่มีกล่องข้อความยาวเต็มความกว้าง
    อยู่ตรงนั้น เส้นเลยโดนบังเกือบหมด)
   ปรับให้เข้ากับพื้นกระดาษ: ใช้สีเน้นแทนเขียวเรืองแสง และลดความทึบลง
   ให้เป็นลายพื้นหลัง ไม่ใช่ของที่แย่งสายตากับตัวเลข */
.monitor .ecg{display:block;position:absolute;right:var(--s5);top:var(--s5);
  width:min(46%,440px);height:96px;opacity:.18;pointer-events:none;z-index:0}
.monitor .ecg path{fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:900;stroke-dashoffset:900;animation:ecgsweep 3.6s linear infinite}
html[data-theme="dark"] .monitor .ecg{opacity:.26}
/* ตัวเลขกับหัวข้อต้องลอยเหนือเส้นเสมอ */
.monitor h3,.monitor .stats,.monitor > .muted{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .monitor .ecg path{animation:none!important;stroke-dashoffset:0!important}
}
@media(max-width:640px){ .monitor .ecg{display:none} }

/* generic cards for quiz/result/history */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:var(--sp-3);box-shadow:var(--sh-1)}
.qtitle{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 4px;letter-spacing:-.012em}
.muted{color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:var(--paper2);
  color:var(--ink2);border-radius:var(--r-xs);padding:3px 9px;font-weight:500;letter-spacing:.01em}
label.fld{display:block;margin:14px 0 6px;font-weight:600;font-size:14px;color:var(--ink2);letter-spacing:.01em}
/* ช่องติ๊ก: ให้กล่องกับข้อความอยู่บรรทัดเดียวกันและกดได้ทั้งแถว */
label.fld.chk{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px;
  color:var(--ink);cursor:pointer;margin:10px 0;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper2);transition:.13s}
label.fld.chk:hover{border-color:var(--line2)}
label.fld.chk input{width:17px;height:17px;flex:none;accent-color:var(--teal);cursor:pointer}
input,select{font-family:inherit;font-size:15px;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line2);width:100%;background:var(--paper);color:var(--ink);transition:border-color .15s}
select:focus,input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}

/* ตัวเลือกคำตอบ — วงกลม A–E แยกออกจากข้อความ อ่านง่ายและกดง่ายขึ้น */
/* ตัวเลือกสูงขั้นต่ำ 52px — เกินเกณฑ์พื้นที่แตะ 44px และทำให้บรรทัดยาว ๆ ไม่อึดอัด */
.opt{display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;margin:var(--s2) 0;
  cursor:pointer;min-height:52px;
  font-size:16px;line-height:1.5;font-family:inherit;color:var(--ink);
  transition:border-color .13s var(--ease),background .13s var(--ease)}
.opt:hover:not(:disabled){border-color:var(--teal);background:var(--teal-soft)}
.opt.sel{border-color:var(--ink);background:var(--hover);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.correct{background:var(--okbg);border-color:var(--okline);box-shadow:inset 0 0 0 1px var(--ok)}
.opt.wrong{background:var(--badbg);border-color:var(--badline);box-shadow:inset 0 0 0 1px var(--bad)}
.opt:disabled{cursor:default}
.opt .lab{flex:none;width:26px;height:26px;border-radius:var(--r-full);background:var(--paper2);
  color:var(--ink2);font-weight:700;font-size:13px;display:inline-flex;align-items:center;
  justify-content:center;margin:0;line-height:1;transition:.13s}
.opt:hover:not(:disabled) .lab{background:var(--paper);color:var(--accent)}
.opt.sel .lab{background:var(--ink);color:var(--paper)}
.opt.correct .lab{background:var(--ok);color:#fff}
.opt.wrong .lab{background:var(--bad);color:#fff}
.opt .otxt{flex:1;min-width:0;padding-top:1px}

/* ══ หน้าเฉลย ══════════════════════════════════════════════════════════
   เฉลยยาว 2,000–5,000 ตัวอักษรต่อข้อ คือเนื้อหาหลักของเว็บนี้ ไม่ใช่หมายเหตุ
   จึงเลิกใส่กล่องพื้นทอง แล้วจัดหน้าแบบ "บทความ" 4 อย่าง:
     1. พื้นกระดาษปกติ ไม่มีพื้นสี
     2. จำกัดความกว้าง 68ch (~66 ตัวอักษร/บรรทัด) ตามช่วงที่ตาอ่านต่อเนื่องได้
     3. 17px / line-height 1.8 — ไทยมีสระบนล่าง ต้องการช่องไฟมากกว่าละติน
     4. ลำดับชั้นจริง (หัวข้อ / กล่องจุดตัดสิน / ตาราง) แทนการหนาทุกประโยค  */
.exp{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:17px;line-height:1.8;color:var(--ink);max-width:var(--measure)}
.exp > * + *{margin-top:var(--s4)}
.exp p{margin:0}
/* หัวข้อย่อย — ตัวเล็ก ตัวพิมพ์ใหญ่ มีขีดสีนำหน้า ต่างจากเนื้อความชัดเจน
   โดยไม่ต้องใช้ตัวหนาซึ่งชนกับตัวหนาในเนื้อความ */
.exp h4{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:var(--s6) 0 0}
.exp h4::before{content:"";width:16px;height:2px;background:var(--accent);border-radius:2px;flex:none}
.exp h4:first-child{margin-top:0}
.exp strong{font-weight:650;color:var(--ink)}
.exp ul,.exp ol{margin:0;padding-left:0;list-style:none}
.exp ol{counter-reset:xn}
.exp li{position:relative;padding-left:22px;margin-top:8px}
.exp ul li::before{content:"";position:absolute;left:6px;top:13px;width:5px;height:5px;
  border-radius:50%;background:var(--ink-3)}
.exp ol li{counter-increment:xn}
.exp ol li::before{content:counter(xn) ".";position:absolute;left:0;top:0;font-weight:700;
  color:var(--ink-3);font-size:14px}
/* ป้ายนำหน้าในบรรทัด — เดิมคือ [ข้อความ] ในวงเล็บเหลี่ยมซ้อนตัวหนา */
.exp-lb{font-weight:700;color:var(--accent);font-size:.9em}
/* กล่องคำตอบ — สิ่งเดียวที่ควรเด่นที่สุดในหน้า */
.exp-key{border-left:3px solid var(--accent);background:var(--accent-w);
  border-radius:0 var(--r) var(--r) 0;padding:14px 18px;font-size:16px;line-height:1.75}
.exp-key-l{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:5px}
.exp-note{border:1px solid var(--goldline);background:var(--goldbg);border-radius:var(--r);
  padding:12px 16px;font-size:15px;line-height:1.7}
.exp-note .exp-key-l{color:var(--warn)}
.exp-take{border:1px solid var(--line-2);background:var(--sunken);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);font-size:16px;line-height:1.75}
.exp-take .exp-key-l{color:var(--ink-3)}
/* ตัวเลือกที่ผิด — ยุบเก็บได้ เพราะรอบสองคนมักข้าม */
.exp-why{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);overflow:hidden}
.exp-why > summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;align-items:center;
  gap:10px;font-size:14px;font-weight:650;color:var(--ink-2);user-select:none}
.exp-why > summary::-webkit-details-marker{display:none}
.exp-why > summary:hover{background:var(--hover)}
.exp-why > summary .chev{margin-left:auto;transition:transform .2s var(--ease);color:var(--ink-3)}
.exp-why[open] > summary .chev{transform:rotate(180deg)}
.exp-why[open] > summary{border-bottom:1px solid var(--line)}
.exp-why .in{padding:var(--s4) var(--s4) var(--s5);font-size:16px}
.exp-why .in > * + *{margin-top:var(--s3)}
.exp-why .in li{padding-left:14px;border-left:2px solid var(--line-2);margin-top:var(--s3)}
.exp-why .in li::before{display:none}
/* ตารางเปรียบเทียบ — เครื่องมือที่มีค่าที่สุดของเฉลยแนวนี้ */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp th,.cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:var(--sunken);font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:none}
.cmp tbody th{font-weight:600;color:var(--ink-2);background:var(--paper);min-width:8em}
.exp .res{margin-bottom:var(--s4)}
@media(max-width:760px){ .exp{font-size:16px;line-height:1.78} }
.res{font-weight:700} .res.ok{color:var(--ok)} .res.bad{color:var(--bad)}
/* โจทย์เป็นภาษาอังกฤษยาว ต้องอ่านครั้งเดียวจบ จึงใหญ่กว่าเนื้อความทั่วไปหนึ่งขั้น */
.stem{font-weight:400;margin:0 0 var(--s5);font-size:18px;line-height:1.65;color:var(--ink);
  max-width:var(--measure)}
.opts,.card > .opt{max-width:var(--measure)}
.qimg{display:block;max-width:100%;max-height:380px;border-radius:var(--r-sm);
  border:1px solid var(--line);margin:2px 0 14px;background:#fff}
.qhead{display:flex;gap:8px;align-items:center;margin-bottom:var(--s3);min-height:36px}
.qnum{font-weight:700;color:var(--ink-3);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
/* ── ปุ่มประจำข้อ: ดาว (ทำเครื่องหมายไว้) และแผ่นดิสก์ (บันทึกเข้าคลัง) ──
   เป็นไอคอนล้วนเพื่อไม่ให้แย่งพื้นที่จากโจทย์ แต่ต้องมี title/aria-label เสมอ
   และตอนกดจะมีข้อความสั้น ๆ ขึ้นข้าง ๆ เพราะ "สีเปลี่ยน" อย่างเดียว
   คนตาบอดสีจะไม่เห็นความต่าง                                              */
.actbtn{width:36px;height:36px;flex:none;border-radius:var(--r);border:1px solid transparent;
  background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;
  transition:.14s var(--ease);padding:0}
.actbtn svg{width:20px;height:20px;stroke-width:1.8}
.actbtn:hover{background:var(--hover);color:var(--ink)}
/* ดาวติดแล้ว: เติมสีทองสด แต่ "เส้นขอบ" ใช้ทองเข้มเพื่อให้รูปทรงผ่าน 3:1
   (ทองสดล้วนได้แค่ 2.3:1 บนพื้นขาว ซึ่งไม่ผ่านเกณฑ์กราฟิกที่สื่อความหมาย) */
.actbtn.star.on{color:var(--star-d)}
.actbtn.star.on svg{fill:var(--star)}      /* ทึบ = ติดดาวแล้ว, โปร่ง = ยังไม่ติด */
.actbtn.save.on{color:var(--accent);background:var(--accent-w)}
.acthint{font-size:12px;font-weight:650;color:var(--accent);opacity:0;white-space:nowrap;
  transition:opacity .2s var(--ease)}
.acthint.show{opacity:1}
.star-badge{background:var(--goldbg);color:var(--warn)}
.star-badge svg{fill:var(--star)}
/* การ์ดที่ติดดาวไว้ มีแถบสีที่ขอบซ้าย เห็นได้แม้เลื่อนผ่านเร็ว ๆ */
.card.flagged{box-shadow:inset 3px 0 0 var(--star)}
.progressbar{height:6px;background:var(--line);border-radius:var(--r-full);overflow:hidden}
.progressbar>div{height:100%;background:var(--teal);border-radius:var(--r-full);transition:width .3s var(--ease)}
.scorebig{font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
/* ---------- หน้าสรุปผล ---------- */
.result-hd{display:flex;gap:var(--s6);align-items:center;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.dial{position:relative;width:132px;height:132px;flex:none}
.dial .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.dial .val b{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;display:block}
.dial .val span{font-size:12px;color:var(--ink-3);margin-top:3px;display:block}
.pass{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;margin-top:8px;
  background:var(--ok-w);color:var(--ok);border:1px solid var(--ok-l);border-radius:var(--r-full);
  padding:5px 12px}
.pass.no{background:var(--no-w);color:var(--no);border-color:var(--no-l)}
.weak{display:flex;flex-direction:column;gap:9px}
.weak .r{display:flex;align-items:center;gap:12px;font-size:14px}
.weak .r .nm{width:132px;flex:none;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weak .r .tk{flex:1;height:8px;background:var(--sunken);border-radius:var(--r-full);overflow:hidden}
.weak .r .tk i{display:block;height:100%;border-radius:var(--r-full)}
.weak .r .pc{width:44px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums;flex:none}
@media(max-width:640px){
  .result-hd{gap:var(--s4);padding:var(--s4)}
  .dial{width:104px;height:104px}
  .dial svg{width:104px;height:104px}
  .dial .val b{font-size:26px}
  .weak .r .nm{width:96px}
}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
tr:last-child td{border-bottom:none}
th{background:var(--paper2);color:var(--ink2);font-weight:600;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid var(--line2)}
.err{color:var(--bad);font-size:14px;margin-top:6px}
.ok-msg{color:var(--ok);font-size:14px;margin-top:6px}
.warn{background:var(--badbg);border:1px solid var(--badline);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:var(--sp-3)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(12,24,40,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:16px;
  animation:fadeIn .16s var(--ease)}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  max-width:420px;width:100%;box-shadow:var(--sh-4);animation:popIn .18s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{padding:8px 16px;border-radius:var(--r-xs);background:var(--paper2);cursor:pointer;
  font-weight:600;font-size:14px;color:var(--ink2);transition:.13s}
.tab:hover{background:var(--line)}
.tab.active{background:var(--ink);color:var(--paper)}

/* footer — พื้นอ่อน ไม่ใช่บล็อกน้ำเงินทึบ ให้จบหน้าแบบเบา ๆ */
footer{background:var(--paper);border-top:1px solid var(--line);color:var(--muted);
  margin-top:var(--sp-6);padding:var(--sp-5) 0 var(--sp-4)}
footer .cols{display:flex;gap:48px;flex-wrap:wrap}
footer h4{color:var(--ink);margin:0 0 10px;font-size:14px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase}
footer a,footer span{display:block;color:var(--muted);font-size:13px;margin:6px 0;cursor:pointer}
footer a:hover{color:var(--teal-d)}
footer .copy{border-top:1px solid var(--line);margin-top:var(--sp-4);padding-top:var(--sp-3);
  font-size:12px;line-height:1.7;color:var(--muted)}

/* loader — แถบไม่มีจุดจบแทนหัวใจเต้น ดูสงบกว่าและไม่กระตุก */
.loader-bg{position:fixed;inset:0;background:rgba(12,24,40,.62);backdrop-filter:blur(3px);
  z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;gap:18px;animation:fadeIn .15s var(--ease)}
.heart{width:180px;height:3px;border-radius:var(--r-full);background:rgba(255,255,255,.16);
  overflow:hidden;position:relative;font-size:0}
.heart::after{content:"";position:absolute;inset:0;width:40%;border-radius:var(--r-full);
  background:var(--teal);animation:slide 1.1s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.loader-bg .lbl{font-size:15px;letter-spacing:.02em;opacity:.9}

@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .hbar{gap:8px}
  .search{order:3;flex-basis:100%}
  .hero .wrap{padding:44px 16px 52px}
  .monitor .ecg{display:none}
  .card{padding:16px 16px;border-radius:var(--r-sm)}
  section{padding:var(--sp-4) 0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---------- dark mode ----------
   กลับค่า token ชุดเดียวกัน component ส่วนใหญ่จึงไม่ต้องเขียน override เพิ่ม
   ที่ยังต้อง override คือจุดที่ hard-code สีขาว/ดำไว้ หรือใช้ --navy เป็นพื้นหลัง */
html[data-theme="dark"]{
  color-scheme:dark;
  --accent:#3ecdb8; --accent-h:#5cdcc9; --accent-w:#0e2b28; --accent-l:#1d4c46;
  --on-accent:#06201c;
  --bg:#0c1116; --paper:#141b22; --sunken:#1b242d; --hover:#212c37;
  --ink:#e9eef4; --ink-2:#aebbc8; --ink-3:#8595a4;
  --line:#323e4c; --line-2:#577087;   /* ผ่าน 3:1 บนพื้นทั้ง 3 ระดับของโหมดมืด */
  --ok:#4ec97f; --ok-w:#0f2419; --ok-l:#255a3a;
  --no:#f0736a; --no-w:#2a1614; --no-l:#67332e;
  --star:#e8bf5a; --star-d:#e8bf5a; --warn:#e0b055;
  --pop:0 4px 16px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.3);
  --pop-lg:0 24px 56px rgba(0,0,0,.6);
  /* alias ที่ต้องกลับค่าเฉพาะโหมดมืด (ตัวที่เหลือสืบทอดจาก :root ได้เลย) */
  --warn-w:#2c2411;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
/* โหมดมืดแทบไม่ต้อง override แล้ว เพราะทุกอย่างผูกกับโทเคนที่กลับค่าให้เองข้างบน
   เหลือแค่รูปข้อสอบที่ต้องคงพื้นขาวไว้ ไม่งั้นภาพ ECG/ฟิล์มขาวดำจะอ่านไม่ออก */
html[data-theme="dark"] .opt:hover:not(:disabled) .lab{background:var(--sunken);color:var(--accent)}
html[data-theme="dark"] .qimg{background:#fff}
/* footer ตอนนี้ผูกกับ --paper/--line แล้ว จึงกลับสีเองในโหมดมืด ไม่ต้อง override
   เหลือแค่ .muted ที่มี inline style สีตายตัวติดมาจาก HTML เดิม */
html[data-theme="dark"] footer .muted{color:var(--muted)!important}

/* ---------- Question Dashboard (ปุ่มลอยตามจอ + โมดัลผังข้อ) ---------- */
#qdashFab{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:55;
  width:48px;height:48px;padding:0;border:1px solid var(--line2);border-radius:var(--r-md);
  cursor:pointer;background:var(--paper);box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:center;transition:.16s var(--ease)}
#qdashFab:hover{border-color:var(--teal);box-shadow:var(--sh-3)}
#qdashFab svg{width:22px;height:22px;display:block}
#qdashFab .sq{fill:none;stroke:var(--ink2);stroke-width:2.4}
#qdashFab:hover .sq{stroke:var(--teal-d)}
#qdashFab .fabdot{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  border-radius:var(--r-full);background:var(--teal);color:#fff;font-size:11px;font-weight:700;
  line-height:19px;padding:0 5px;border:2px solid var(--bg)}
/* จอแคบกว่านี้ ปุ่มซ้ายจะชนการ์ดข้อสอบ (.wrap = 1040px) → ย้ายไปมุมขวาล่างแทน */
@media(max-width:1239px){
  #qdashFab{left:auto;right:16px;top:auto;bottom:22px;transform:none}
}
/* ต้องอยู่หลังกฎ 1239px ไม่งั้นโดนทับ แล้วปุ่มจะไปซ้อนกับแถบเมนูล่างบนมือถือ */
@media(max-width:760px){ #qdashFab{bottom:78px} }
.qdash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;
  max-height:44vh;overflow:auto;padding:4px 2px 10px}
.qd{position:relative;height:44px;border-radius:var(--r-xs);background:var(--paper);
  border:1px solid var(--line2);color:var(--ink);font-family:inherit;font-size:14px;
  font-weight:600;cursor:pointer;transition:.12s var(--ease)}
.qd:hover{border-color:var(--teal);color:var(--teal-d);background:var(--teal-soft)}
.qd.done{border-color:transparent;background:var(--paper2);color:var(--muted);font-weight:500}
.qd.done:hover{border-color:var(--teal);color:var(--teal-d)}
.qd.cur{box-shadow:0 0 0 2px var(--teal);border-color:var(--teal)}
/* ดาวมุมช่อง — วาดด้วย mask จาก SVG ไม่ต้องพึ่งอีโมจิ ซึ่งหน้าตาเพี้ยนข้ามระบบ */
.qd.mark{border-color:var(--star-d)}
.qd.mark::after{content:"";position:absolute;top:-4px;right:-4px;width:13px;height:13px;
  background:var(--star-d);
  -webkit-mask:var(--starmask) center/contain no-repeat;mask:var(--starmask) center/contain no-repeat;
  filter:drop-shadow(0 0 1.5px var(--paper)) drop-shadow(0 0 1.5px var(--paper))}
.qdash-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-3);margin:2px 0 14px}
.qdash-legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.qdash-legend .box{width:16px;height:16px;border-radius:6px;border:1px solid var(--line-2);display:inline-block;flex:none}
.qdash-legend .box.done{border-color:transparent;background:var(--sunken)}
.qdash-legend .box.mark{border-color:var(--star);background:var(--goldbg)}
.qdash-legend .box.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-w)}
.qdash-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line)}

/* ---------- Smart Review hub ---------- */
.navdue{display:none;margin-left:6px;background:var(--bad);color:#fff;border-radius:var(--r-full);
  font-size:11px;font-weight:700;padding:1px 6px;vertical-align:middle}
.navdue.on{display:inline-block}
.srs-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.srs-big{font-size:48px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.03em}
.srs-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:16px}
.srs-mini .m{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.srs-mini .m b{display:block;font-size:22px;color:var(--ink);letter-spacing:-.02em;font-weight:700}
.srs-mini .m span{font-size:12px;color:var(--muted)}
.ladder{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ladder .lv{display:flex;align-items:center;gap:12px;font-size:13px}
.ladder .lv .nm{width:118px;flex:none;color:var(--muted)}
.ladder .lv .track{flex:1;height:10px;background:var(--line);border-radius:var(--r-full);overflow:hidden}
.ladder .lv .fill{height:100%;border-radius:var(--r-full)}
.ladder .lv .ct{width:52px;flex:none;text-align:right;font-weight:600;color:var(--ink2)}
.fcast{display:flex;align-items:flex-end;gap:8px;height:96px;margin-top:8px}
.fcast .d{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.fcast .d .bar{width:100%;background:var(--teal);border-radius:var(--r-xs) var(--r-xs) 0 0;min-height:3px;transition:.2s}
.fcast .d.today .bar{background:var(--gold)}
.fcast .d .lb{font-size:11px;color:var(--muted);white-space:nowrap}
.fcast .d .vv{font-size:12px;font-weight:700;color:var(--ink2)}
.plan-tgl{flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--paper);color:var(--ink2);font-size:19px;line-height:1;cursor:pointer;transition:.15s var(--ease)}
.plan-tgl:hover{border-color:var(--teal);color:var(--teal-d);background:var(--teal-soft)}

/* ---------- หน้าผลค้นหา ---------- */
/* ไฮไลต์คำค้น — เดิมใช้พื้นเหลืองสด ซึ่งเป็นสีที่สี่ในหน้าเดียว
   เปลี่ยนมาใช้พื้นอ่อนของสีเน้น + ขีดใต้ ทำให้เห็นชัดโดยไม่แย่งสายตา */
.srch mark{background:var(--accent-w);color:inherit;border-radius:3px;padding:0 3px;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent-l)}
.exp-snip{margin-top:10px;font-size:15px;line-height:1.7;color:var(--ink-2);
  border-left:2px solid var(--line-2);padding-left:12px}
.res{display:flex;align-items:center;gap:7px;font-size:15px}
.res-sub{color:var(--ink-2);font-weight:500}
.exp-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);max-width:var(--measure)}
tr.hrow:hover td{background:var(--paper2)}
.imgfail{background:var(--badbg);border:1px dashed var(--badline);border-radius:var(--r-sm);
  padding:14px 16px;margin:2px 0 14px;font-size:14px;color:var(--ink)}

/* ---------- หน้าทำข้อสอบ ----------
   แถบเครื่องมือชั้นเดียวสูง 44px เกาะบนสุด + เส้นความคืบหน้า 2px
   เดิมเป็น 3 ชั้น (qbar 2 บรรทัด + qnavbar เกาะล่าง + แถบคีย์ลัด) กินความสูง
   คงที่ราว 180px ซึ่งบนมือถือ 390px เหลือที่อ่านโจทย์ไม่ถึงครึ่งจอ           */
.qtop{position:sticky;top:0;z-index:25;background:var(--paper);border-bottom:1px solid var(--line)}
.qtop-bar{height:2px;background:var(--line)}
.qtop-bar i{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
.qtop-in{display:flex;align-items:center;gap:10px;height:44px;max-width:1120px;margin:0 auto;padding:0 24px}
.qtop-name{font-weight:600;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:min(38vw,280px)}
.qwrap{max-width:820px;padding-top:var(--s6);padding-bottom:var(--s7)}
.timer{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;
  font-weight:650;font-size:13px;color:var(--ink-2);background:var(--sunken);
  border-radius:var(--r);padding:4px 9px}
.timer.warn{background:var(--no-w);color:var(--no)}
.qcount{font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-3);font-weight:650}
#flagcnt:empty{display:none}
/* แถบปุ่มท้ายการ์ด — ไม่ตรึงไว้ที่ขอบล่างแล้ว ให้อยู่ตามลำดับการอ่าน */
.qfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.kbd{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1;
  padding:3px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;
  background:var(--sunken);color:var(--ink-3);margin:0 3px}
.kbdhint{font-size:12px;color:var(--ink-3);margin-left:auto;display:flex;align-items:center;
  gap:4px;flex-wrap:wrap}
@media(max-width:760px){
  .qtop-in{padding:0 16px} .kbdhint{display:none}
  .qwrap{padding-top:var(--s5)}
}

/* ---------- ระบบไอคอน ----------
   ใช้ <svg class="i"><use href="#i-ชื่อ"></use></svg> เรียกจาก sprite ที่ซ่อนไว้บนสุดของ body
   ข้อดีเทียบกับอีโมจิ: สีตามข้อความ (currentColor) จึงเข้าธีมเสมอ,
   ขนาดคงที่ทุกเครื่อง, และไม่เพี้ยนข้ามระบบปฏิบัติการ                        */
.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;
   fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i.lg{width:1.5em;height:1.5em}
.i.xl{width:2em;height:2em;stroke-width:1.6}
#icons{display:none}