/* 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}
  .hbar{flex-wrap:wrap}            /* ให้ช่องค้นหา (flex-basis:100%) ลงไปอยู่แถวที่สองได้จริง — เดิมไม่ wrap จึงดันปุ่มล้นจอแนวนอน */
  .search{order:3;flex-basis:100%}
  /* ป้ายชื่อ/สถานะ: basis 0 จึงไม่บังคับให้ปุ่มธีม/เมนูตกบรรทัด แล้วค่อยขยายได้ไม่เกินความยาวข้อความ ยาวเกินตัด … */
  .hbar>.hspacer{display:none}
  #modePill{flex:1 1 0;min-width:0;max-width:max-content;margin-left:auto;overflow:hidden;text-overflow:ellipsis}
  .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}

/* ═══════════════════════════════════════════════════════════════════════
   กล่องขยายรูปข้อสอบ (lightbox)
   ทำไมต้องมี: ข้อสอบที่มีรูป 400+ ข้อ ส่วนใหญ่เป็น ECG 12 lead, ฟิล์ม
   และ blood smear ซึ่งย่อลงมาอยู่ในกรอบ 380px แล้วอ่านรายละเอียดไม่ออก
   โดยเฉพาะบนมือถือ — ต้องซูมได้จริงถึงจะใช้ทำข้อสอบได้
   ═══════════════════════════════════════════════════════════════════════ */
.qimg{cursor:zoom-in}
/* บอกใบ้ว่ากดได้ ไม่งั้นผู้ใช้ไม่รู้ว่ารูปกดขยายได้ */
.qimg:hover{border-color:var(--accent)}
.qimg:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.lbx{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;background:rgba(8,12,20,.94);
  opacity:0;transition:opacity .16s var(--ease);
  /* กันเบราว์เซอร์แย่งท่าทางไปทำ pinch-zoom ของหน้าเว็บทั้งหน้า
     เพราะเราจัดการ pinch เองใน JS */
  touch-action:none;overscroll-behavior:contain}
.lbx.on{opacity:1}
.lbx img{max-width:100%;max-height:100%;
  /* ไม่มี transition ตอนลาก/ซูม ไม่งั้นภาพจะตามนิ้วไม่ทันและรู้สึกหนืด */
  transform-origin:0 0;will-change:transform;background:#fff;
  user-select:none;-webkit-user-drag:none;touch-action:none}
.lbx img.glide{transition:transform .18s var(--ease)}
.lbx.zoomed{cursor:grab}
.lbx.zoomed.drag{cursor:grabbing}

/* แถบปุ่มด้านบน — วางชิดขวาบน ไม่บังรูป และสูงพอให้นิ้วกดติดบนมือถือ */
.lbx-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  gap:6px;padding:10px 12px;
  /* ไล่เฉดแทนพื้นทึบ เพื่อให้ยังเห็นขอบบนของรูปที่อยู่ข้างหลัง */
  background:linear-gradient(rgba(8,12,20,.82),rgba(8,12,20,0))}
.lbx-bar .sp{flex:1}
.lbx-btn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);color:#fff;cursor:pointer;
  transition:background .12s var(--ease),border-color .12s var(--ease)}
.lbx-btn:hover{background:rgba(255,255,255,.20)}
.lbx-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbx-btn[disabled]{opacity:.38;cursor:default}
.lbx-btn[disabled]:hover{background:rgba(255,255,255,.10)}
.lbx-pct{color:#fff;font-size:13px;font-variant-numeric:tabular-nums;
  min-width:52px;text-align:center;opacity:.85}
/* คำใบ้วิธีใช้ ซ่อนอัตโนมัติหลังผู้ใช้ซูมครั้งแรก */
.lbx-tip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#fff;background:rgba(8,12,20,.72);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-full);padding:7px 15px;font-size:13px;
  pointer-events:none;transition:opacity .2s var(--ease);max-width:92vw;text-align:center}
.lbx.zoomed .lbx-tip{opacity:0}
@media (max-width:600px){
  .lbx-tip{font-size:12px;padding:6px 12px}
  .lbx-pct{min-width:46px}
}
@media (prefers-reduced-motion:reduce){
  .lbx{transition:none}
  .lbx img.glide{transition:none}
}

/* ══ สรุปเนื้อหา (#/study, #/note/<id>) ═════════════════════════════════ */
.notes-wrap{padding-top:20px;padding-bottom:60px}
.notes-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.notes-h1{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;color:var(--ink);margin:0 0 4px;letter-spacing:-.015em}
.notes-h1 .i{width:26px;height:26px}
.notes-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.notes-search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 12px;height:44px;max-width:520px}
.notes-search input{flex:1;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;height:100%}
.notes-chips,.note-qlinks{display:flex;flex-wrap:wrap;gap:8px}
.notes-chips .chip,.note-qlinks .chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:var(--r-full);padding:6px 14px;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}
.notes-chips .chip:hover,.note-qlinks .chip:hover{background:var(--hover);color:var(--ink)}
.notes-chips .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.notes-group{font-size:18px;font-weight:700;color:var(--ink);margin:24px 0 10px}
.notes-kind{margin-top:10px}
.notes-kind .chip-n{opacity:.75;font-size:12px;margin-left:4px}
.notes-sec{margin-top:28px}
.notes-sec-h{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.notes-sec-d{margin-bottom:4px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.note-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.note-card:hover{border-color:var(--accent);box-shadow:var(--pop);transform:translateY(-1px)}
.note-card-top{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.note-sys{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-w);border-radius:var(--r-full);padding:2px 10px}
.note-star{font-size:12px;font-weight:700;color:var(--warn);background:var(--warn-w);border-radius:var(--r-full);padding:2px 10px}
.note-title{font-size:17px;font-weight:700;color:var(--ink);line-height:1.35}
.note-th{color:var(--ink-2);font-size:14px;margin-top:2px}
.note-meta{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;margin-top:10px;flex-wrap:wrap}
.note-meta .i{width:14px;height:14px}
.note-crumb{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:10px}
.note-crumb a{display:inline-flex;align-items:center;gap:4px;color:var(--accent);text-decoration:none;font-weight:600}
.note-crumb .i{width:16px;height:16px}
.note-hero{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.note-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.note-toc{position:sticky;top:120px;max-height:calc(100vh - 140px);overflow:auto;font-size:13.5px}
.note-toc-btn{display:none}
.note-toc ol{list-style:none;margin:0;padding:0 0 0 10px;border-left:2px solid var(--line)}
.note-toc li{margin:0}
.note-toc a{display:block;padding:5px 8px;color:var(--ink-2);text-decoration:none;border-radius:6px;line-height:1.35}
.note-toc a:hover{background:var(--hover);color:var(--ink)}
.note-body{max-width:820px;font-size:16px;line-height:1.8;color:var(--ink)}
.note-body h2{font-size:21px;font-weight:750;color:var(--ink);margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);scroll-margin-top:120px}
.note-body h3{font-size:17.5px;font-weight:700;margin:22px 0 8px}
.note-body p{margin:10px 0}
.note-body ul,.note-body ol{padding-left:22px;margin:8px 0}
.note-body li{margin:4px 0}
.note-body a{color:var(--accent)}
.note-body strong{color:var(--ink);font-weight:700}
.note-body code{background:var(--sunken);border-radius:4px;padding:1px 5px;font-size:.92em}
.note-table{overflow-x:auto;margin:14px 0;border:1px solid var(--line);border-radius:var(--r-lg)}
.note-table table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.6}
.note-table th,.note-table td{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.note-table th{background:var(--sunken);font-weight:700;white-space:nowrap}
.note-table tr:last-child td{border-bottom:0}
.note-table td+td,.note-table th+th{border-left:1px solid var(--line)}
.note-body blockquote{margin:16px 0;padding:12px 16px;border-left:4px solid var(--line-2);background:var(--sunken);border-radius:0 var(--r-lg) var(--r-lg) 0}
.note-body blockquote p{margin:6px 0}
.note-body blockquote.co-pearl{border-left-color:var(--ok);background:var(--ok-w)}
.note-body blockquote.co-warn{border-left-color:var(--warn);background:var(--warn-w)}
.note-body blockquote.co-red{border-left-color:var(--no);background:var(--no-w)}
.note-body img{display:block;max-width:100%;height:auto;margin:6px auto 0;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;cursor:zoom-in}
.note-body img.half{max-width:50%}
.note-atlas table{table-layout:fixed}
.note-atlas td{width:50%;font-size:13.5px}
.note-body .note-atlas td img{width:100%;height:210px;object-fit:contain;background:var(--sunken);margin:0 0 6px}
.note-body .note-fig{margin:20px 0 18px}
.note-body .note-fig figcaption{text-align:center;font-size:13.5px;color:var(--muted);line-height:1.55;margin:8px auto 0;max-width:680px}
.note-body .note-fig figcaption strong{color:var(--ink-2)}
.note-body details{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 14px;margin:6px 0 18px}
.note-body summary{cursor:pointer;font-weight:700;color:var(--accent)}
.note-body hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.note-practice{padding:16px 18px;margin-top:28px}
.note-practice b{display:flex;align-items:center;gap:6px;margin-bottom:10px}
@media (max-width:900px){
  .note-layout{grid-template-columns:1fr;gap:0}
  .note-toc{position:sticky;top:64px;z-index:5;max-height:none;background:var(--bg);padding:6px 0;margin-bottom:8px}
  .note-toc-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
  .note-toc ol{display:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;margin-top:6px;max-height:60vh;overflow:auto}
  .note-toc.open ol{display:block}
  .note-body img.half{max-width:80%}
  .note-body .note-atlas td img{height:140px}
  .note-atlas td{padding:6px 8px}
  .notes-h1{font-size:22px}
}

/* ── สรุปเนื้อหา: ปุ่มบนหัว, ซ่อนสารบัญ, หน้าล็อก, พิมพ์/PDF ── */
.note-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.note-topbar .note-crumb{margin-bottom:0}
.note-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.note-actions .btn{display:inline-flex;align-items:center;gap:6px}
.note-actions .i{width:16px;height:16px}
.note-layout.toc-hidden{grid-template-columns:minmax(0,1fr)}
.note-layout.toc-hidden .note-toc{display:none}
.note-layout.toc-hidden .note-body{max-width:1000px;margin:0 auto}
.notes-lock{max-width:520px;margin:48px auto;padding:32px 28px;text-align:center}
.notes-lock h2{font-size:20px;margin:10px 0 6px}
.notes-lock p{margin:0 0 18px}
.notes-lock .btn{display:inline-flex;align-items:center;gap:6px}
.notes-lock-ic .i{width:40px;height:40px;color:var(--accent)}
@media (max-width:900px){
  .note-actions{justify-content:flex-start}
  .note-actions .note-toc-toggle{display:none}
  .note-layout.toc-hidden .note-toc{display:block}
}
@media print{
  @page{size:A4;margin:14mm 12mm}
  html,body{background:#fff !important;color:#111 !important}
  #bgScene,body>header,#tabbar,body>footer,.loader-bg,.qdash,.lbx,
  .note-topbar,.note-crumb,.note-actions,.note-toc,.note-practice{display:none !important}
  .note-hero,.note-body,.card{background:#fff !important;box-shadow:none !important;border-color:#ccc !important;backdrop-filter:none !important}
  #app{padding:0 !important;margin:0 !important}
  .wrap,.notes-wrap{max-width:none !important;padding:0 !important;margin:0 !important}
  .note-layout{display:block !important}
  .note-hero{border-bottom:1px solid #999}
  .notes-h1{color:#111 !important;font-size:22pt}
  .note-th,.note-meta,.muted{color:#444 !important}
  .note-sys,.note-star{border:1px solid #999;background:#fff !important;color:#111 !important}
  .note-body{max-width:none !important;font-size:10.5pt;line-height:1.55;color:#111 !important}
  .note-body strong,.note-body h2,.note-body h3{color:#000 !important}
  .note-body h2{font-size:14pt;break-after:avoid;border-bottom:1px solid #bbb}
  .note-body h3{break-after:avoid}
  .note-body a{color:#0b5394 !important;text-decoration:none}
  .note-table{overflow:visible;border-color:#bbb}
  .note-table th{background:#eee !important;color:#000 !important}
  .note-table th,.note-table td{border-color:#bbb !important;color:#111 !important}
  .note-table tr,.note-fig,.note-body blockquote,.note-body details{break-inside:avoid}
  .note-body blockquote{background:#f4f4f4 !important;border-left-color:#888 !important;color:#111 !important}
  .note-body blockquote.co-pearl{background:#eef8f1 !important;border-left-color:#2e8b57 !important}
  .note-body blockquote.co-warn{background:#fff6e5 !important;border-left-color:#d9820b !important}
  .note-body blockquote.co-red{background:#fdecec !important;border-left-color:#c0392b !important}
  .note-body details{background:#fafafa !important;border-color:#ccc !important}
  .note-body summary{color:#0b5394 !important}
  .note-body img{border-color:#ccc;max-height:230mm}
  .note-body code{background:#eee !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- UX pass 2026-10-19 ---------- */
/* เมนูที่ซ่อนบนมือถือ (แถบแท็บบนถูกซ่อน) ย้ายมาอยู่ในดรอปดาวน์ไอคอนผู้ใช้ */
.moremenu .drop .mob-only{display:none}
@media(max-width:760px){
  .moremenu .drop button.mob-only{display:flex}
  .moremenu .drop .sep.mob-only{display:block}
}
/* การ์ดสรุปวัน (ข้อสอบประจำวัน / เป้าวันนี้ / นับถอยหลัง) ย้ายลงใต้ hero */
.home-cards{padding-bottom:4px}
/* ปุ่มหลักบนหน้าแรกเต็มความกว้างบนจอแคบ — เดิมกว้างไม่เท่ากันและชิดซ้าย */
@media(max-width:600px){
  .hero .cta{flex-direction:column}
  .hero .cta .btn{width:100%}
}
/* พื้นที่แตะขั้นต่ำ 44px บนอุปกรณ์จอสัมผัส (เดิม 34–36px) */
@media(pointer:coarse){
  .btn.sm{height:44px;padding:0 16px;font-size:14px}
  .actbtn{width:44px;height:44px}
  .notes-chips .chip,.note-qlinks .chip{padding:10px 14px}
}
/* ข้อเดี่ยวจากลิงก์ในสรุป */
.single-foot{display:flex;gap:10px;flex-wrap:wrap}

/* note → ข้อเดี่ยว: แถบบอกว่ามาจากสรุปไหน + ข้อที่เท่าไร */
.single-q{margin-top:14px}
.single-q-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;font-size:14px}
.single-q-h a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;text-decoration:none;min-height:44px}
.single-q-h a .i{width:18px;height:18px}
.single-q-n{margin-left:auto;color:var(--ink-3)}
.single-foot a.btn{text-decoration:none}

.note-scope{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-3);max-width:75ch}
.note-scope b{color:var(--ink-2);font-weight:600;margin-right:4px}

/* ---------- ความคืบหน้ารายสรุป + Flashcards (2026-10-20) ---------- */
.notes-head-act{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.note-prog{display:flex;height:6px;border-radius:var(--r-full);background:var(--sunken);overflow:hidden;margin-top:10px}
.note-prog i{display:block;height:100%}
.note-prog i.ok{background:var(--ok)}
.note-prog i.bad{background:var(--bad)}
.note-prog.big{height:8px;margin:4px 0 14px}
.note-prog-t{font-size:12px;color:var(--ink-3);margin-top:4px}
.np-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.np-head b{margin:0 !important}
.np-stat{font-size:14px;color:var(--ink-2)}
.np-head .btn{margin-left:auto;text-decoration:none}
.np-done{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:600;font-size:14px}
.note-qlinks .chip{display:inline-flex;align-items:center;gap:5px}
.note-qlinks .chip .i{width:15px;height:15px}
.note-qlinks .chip.ok{border-color:var(--okline);background:var(--okbg);color:var(--ok)}
.note-qlinks .chip.bad{border-color:var(--badline);background:var(--badbg);color:var(--bad)}
.np-legend{margin-top:10px;font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.np-legend .i{width:13px;height:13px}

.fc-wrap{max-width:760px}
.fc-head{margin-bottom:14px}
.fc-head .note-crumb{display:inline-flex;align-items:center;gap:4px;text-decoration:none;min-height:44px}
.fc-bar{height:4px;background:var(--sunken);border-radius:var(--r-full);overflow:hidden}
.fc-bar i{display:block;height:100%;background:var(--accent);transition:width .2s ease}
.fc-pos{font-size:13px;color:var(--ink-3);margin:6px 0 10px;text-align:right}
.fc-card{padding:26px 24px;min-height:220px;cursor:pointer;display:flex;flex-direction:column;gap:10px}
.fc-card.flip{cursor:default}
.fc-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fc-lab{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.fc-front{font-size:19px;line-height:1.65}
.fc-q{align-self:flex-start;font-size:15px;font-weight:700;color:var(--accent);background:var(--accent-w);border:1px solid var(--accent-l);border-radius:999px;padding:3px 12px;letter-spacing:.01em}
.fc-ans{border-top:1px dashed var(--line);margin-top:8px;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.fc-back{font-size:19px;line-height:1.6;color:var(--accent)}
.fc-back b{color:inherit}
.fc-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px}
.fc-meta a{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);text-decoration:none;min-height:32px}
.fc-meta a:hover{color:var(--accent)}
.fc-hint{margin-top:auto;font-size:13px;color:var(--ink-3)}
.fc-act{display:flex;gap:10px;margin-top:14px}
.fc-act .btn{flex:1;justify-content:center;height:48px}
.fc-act .kbd{margin-left:6px;opacity:.7}
.fc-end{padding:30px 24px;text-align:center}
.fc-end-ic .i{width:36px;height:36px;color:var(--ok)}
.fc-end-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.fc-end-act .btn{text-decoration:none}
@media (pointer:coarse){ .fc-act .kbd{display:none} }
@media (max-width:600px){ .fc-front,.fc-back{font-size:17px} .fc-card{padding:20px 16px} }
/* ลิงก์จากเฉลยไปสรุป */
.exp-notes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.exp-notes:empty{display:none}
.exp-notes-l{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.exp-notes-l .i{width:16px;height:16px}
.exp-notes .chip{display:inline-flex;align-items:center;border:1px solid var(--accent-l);background:var(--accent-w);color:var(--accent);border-radius:var(--r-full);padding:6px 14px;font-size:14px;text-decoration:none;min-height:36px}
.exp-notes .chip:hover{background:var(--accent);color:#fff}
@media (pointer:coarse){ .exp-notes .chip{min-height:44px} }
/* ค้นในเนื้อหาสรุป */
.ns-box{padding:16px 18px;margin-bottom:18px}
.ns-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;margin-bottom:6px}
.ns-h .i{width:16px;height:16px}
.ns-note{padding:12px 0;border-top:1px solid var(--line)}
.ns-note:first-of-type{border-top:0}
.ns-title{font-weight:600;color:var(--ink);text-decoration:none}
.ns-title:hover{color:var(--accent)}
.ns-th{font-size:13px}
.ns-hit{display:block;margin-top:8px;padding:8px 10px;border-radius:var(--r);background:var(--sunken);color:var(--ink-2);text-decoration:none;line-height:1.6;font-size:14px}
.ns-hit:hover{background:var(--hover)}
.ns-sec{display:block;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:2px}
.ns-snip mark{background:#ffe58a;color:#1a1a1a;border-radius:3px;padding:0 2px}
.ns-more{font-size:13px;margin-top:6px}
/* อ่านแล้ว + แผนอ่าน */
.note-read{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ok);margin-left:auto}
.note-read .i{width:13px;height:13px}
.linkbtn{background:none;border:0;padding:0 2px;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;min-height:32px}
.plan-wrap{max-width:860px}
.plan-wrap .note-crumb{display:inline-flex;align-items:center;gap:4px;text-decoration:none;min-height:44px}
.plan-sec{padding:16px 18px;margin-top:16px}
.plan-h{font-size:18px;margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-h .muted{font-size:14px;font-weight:400}
.plan-d{font-size:13px;margin-bottom:8px}
.plan-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.plan-item:first-of-type{border-top:0}
.plan-chk{flex:none;width:44px;height:44px;border-radius:var(--r);border:2px solid var(--line-2);background:var(--paper);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.plan-chk .i{width:20px;height:20px}
.plan-item.done .plan-chk{background:var(--ok);border-color:var(--ok)}
.plan-item.done .plan-t{color:var(--ink-3);text-decoration:line-through}
.plan-main{flex:1;min-width:0}
.plan-t{font-weight:600;color:var(--ink);text-decoration:none}
.plan-t:hover{color:var(--accent)}
.plan-s{font-size:13px;margin-top:2px}
.plan-go{flex:none;text-decoration:none}
.plan-tb .num{text-align:right;white-space:nowrap}
.plan-tb th,.plan-tb td{text-transform:none;letter-spacing:0}
.plan-tb tbody th{font-weight:500;font-size:14px;line-height:1.45}
@media (max-width:600px){ .plan-tb th,.plan-tb td{padding:10px 8px} .plan-tb tbody th{font-size:13px} }

/* แผนทบทวน 7 วันหลัง NL2 Simulator */
.sp-day{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.sp-day:first-child{border-top:0}
.sp-day.done .sp-body{opacity:.55}
.sp-chk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:92px;cursor:pointer;font-weight:700}
.sp-chk input{width:20px;height:20px;accent-color:var(--accent);margin:0 0 4px}
.sp-chk small{font-weight:400;color:var(--ink-3);font-size:13px}
.sp-body{flex:1;min-width:0}
.sim-tbl td{vertical-align:middle}
@media (max-width:560px){ .sp-day{flex-direction:column;gap:6px} .sp-chk{flex-direction:row;align-items:center;gap:8px} .sp-chk input{margin:0} }

/* ข้อสอบจริงที่ต้นฉบับมีตัวเลือกไม่ครบ */
.tag.tag-incomplete{background:var(--warn-w);color:var(--warn);border:1px solid var(--warn)}
/* หน้าสถิติแอดมิน */
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.adm-kpi{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.adm-v{font-size:24px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.adm-l{font-size:13px;color:var(--ink-3);margin-top:2px}
.adm-h{font-size:16px;margin:22px 0 8px}
.adm-leg{display:flex;gap:16px;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.adm-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.adm-leg i.a,.adm-bars i.a{background:var(--accent)} .adm-leg i.s,.adm-bars i.s{background:var(--accent-l)}
.adm-chart{display:flex;gap:6px;align-items:flex-end;height:170px;padding-bottom:4px;overflow-x:auto}
.adm-col{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;height:100%}
.adm-bars{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.adm-bars i{display:block;width:40%;min-height:2px;border-radius:4px 4px 0 0}
.adm-x{font-size:11px;color:var(--ink-3);margin-top:4px;white-space:nowrap}
.adm-t{width:100%;border-collapse:collapse;font-size:14px}
.adm-t th,.adm-t td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-t th{font-size:12px;color:var(--ink-3);font-weight:600}
.adm-t td:not(:first-child),.adm-t th:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.adm-q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.adm .tbl-wrap{overflow-x:auto}
/* toast แจ้งเตือนสั้น ๆ */
.toast-box{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;width:min(92vw,440px);pointer-events:none}
.toast{background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-lg);font-size:14px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toastIn .2s ease-out}
.toast.warn{background:var(--warn-w);color:var(--ink);border:1px solid var(--warn)}
.toast.ok{border-left:4px solid var(--accent)}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .toast{animation:none} .toast.out{transition:none} }
.weak-drill{display:flex;gap:14px;align-items:center;flex-wrap:wrap;border-color:var(--accent-l);background:var(--accent-w)}