:root{
  --bg:#f5f4f0;--card:#fff;--ink:#1c1e22;--mute:#6b7280;--line:#e2e0d8;
  --brick:#a3452f;--brick-soft:#f6e6e0;--ok:#1f8a4c;--ok-soft:#e6f5ec;--bad:#c0392b;--bad-soft:#fbe9e7;
  --sel:#2b5cab;--sel-soft:#e7eefb;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Sukhumvit Set","Thonburi","Sarabun",-apple-system,system-ui,sans-serif}
.top{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.brand{font-weight:800;color:var(--brick);cursor:pointer;letter-spacing:.2px}
.brand span{color:var(--ink);font-weight:600;margin-left:6px}
.who{font-size:.85rem;color:var(--mute)}
main{max-width:760px;margin:0 auto;padding:16px 14px 90px}
h1{font-size:1.35rem;margin:6px 0 4px}
h2{font-size:1.05rem;margin:22px 0 8px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.sub{color:var(--mute);margin:0 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:10px 0}
.card.locked{opacity:.55}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:transform .08s}
.tile:active{transform:scale(.98)}
.tile.locked{cursor:default;background:#efeeea;color:var(--mute)}
.tile b{display:block;font-size:1rem}
.tile small{color:var(--mute)}
.tile .lock{float:right;font-size:.75rem;background:#e5e3dc;border-radius:999px;padding:1px 8px}
.tile .done{float:right;font-size:.75rem;background:var(--ok-soft);color:var(--ok);border-radius:999px;padding:1px 8px;font-weight:700}
.btn{display:inline-block;border:none;border-radius:10px;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer;background:var(--brick);color:#fff}
.btn.ghost{background:transparent;color:var(--brick);border:1.5px solid var(--brick)}
.btn.sm{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.45;cursor:default}
input.code{font:inherit;font-size:1.3rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:12px;border:1.5px solid var(--line);border-radius:10px;width:100%;max-width:320px}
.err{color:var(--bad);margin-top:8px}
/* ---- exam ---- */
.exambar{position:sticky;top:50px;z-index:4;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-bottom:12px}
.exambar b{font-variant-numeric:tabular-nums}
.q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
.q .no{font-weight:800;color:var(--brick);margin-right:6px}
.q .stem{font-weight:600}
.q .choices{display:none}                 /* ตัวเลือกใน html จากชีท ซ่อน — วาดเป็นปุ่มแทน */
.q .figwrap{text-align:center;margin:8px 0}
.q img.fig{max-width:100%;max-height:320px}
.opts{display:grid;gap:8px;margin-top:10px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff}
.opt .lb{flex:0 0 26px;height:26px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
.opt.sel{border-color:var(--sel);background:var(--sel-soft)}
.opt.sel .lb{background:var(--sel);color:#fff}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .lb{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.wrong .lb{background:var(--bad);color:#fff}
.opt .tx{flex:1;min-width:0}
textarea.open{width:100%;font:inherit;padding:10px;border:1.5px solid var(--line);border-radius:10px;min-height:70px}
.navq{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:10px;justify-content:space-between;align-items:center;z-index:5}
.dots{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 4px}
.dot{width:26px;height:26px;border-radius:6px;background:#e9e7e0;font-size:.72rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-variant-numeric:tabular-nums}
.dot.ans{background:var(--sel);color:#fff}
.dot.cur{outline:2px solid var(--brick);outline-offset:1px}
.dot.ok{background:var(--ok);color:#fff}.dot.ng{background:var(--bad);color:#fff}.dot.na{background:#cfcdc6}
/* ---- result ---- */
.score{font-size:2.4rem;font-weight:800;color:var(--brick);font-variant-numeric:tabular-nums}
.badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
.badge.ok{background:var(--ok-soft);color:var(--ok)}.badge.ng{background:var(--bad-soft);color:var(--bad)}.badge.na{background:#eee;color:var(--mute)}
.key{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.key .ans{display:inline-block;font-weight:700;color:#0b7a45;background:#e9f7ef;border:1px solid #bfe6d0;border-radius:6px;padding:0 10px}
.key .step{margin:3px 0 0 4px;padding-left:12px;border-left:2.5px solid #e3e3e8}
.hist td{padding:6px 8px;border-bottom:1px solid var(--line);font-size:.92rem}
.hist th{font-size:.75rem;color:var(--mute);text-align:left;padding:6px 8px;text-transform:uppercase;letter-spacing:.05em}
.hist{width:100%;border-collapse:collapse}
.hint{font-size:.85rem;color:var(--mute)}
@media(max-width:480px){.grid{grid-template-columns:1fr 1fr}}

/* ---- category bars ---- */
.brow{display:grid;grid-template-columns:minmax(110px,1.3fr) 2fr 44px auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.brow:last-child{border-bottom:none}
.brow .bl{font-weight:600}
.bar{height:10px;background:#ecebe6;border-radius:999px;overflow:hidden}
.bar .fill{display:block;height:100%;border-radius:999px}
.fill.good{background:var(--ok)}.fill.mid{background:#d9a441}.fill.weak{background:var(--bad)}
.bp{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.bp.good{color:var(--ok)}.bp.mid{color:#b47d1a}.bp.weak{color:var(--bad)}
.brow .btn{justify-self:start;padding:4px 12px;font-size:.85rem}
@media(max-width:480px){
  .brow{grid-template-columns:1fr 1.3fr 40px;row-gap:3px}
  .brow .hint{grid-column:1}
  .brow .btn{grid-column:2/4;justify-self:end;width:auto}
}
/* ---- passage box ---- */
.passage{background:#f6f6f8;border:1px solid var(--line);border-radius:12px;margin:12px 0 0;overflow:hidden}
.passage .ph{display:flex;gap:8px;align-items:center;padding:8px 14px;cursor:pointer;background:#ecebe6;font-size:.9rem}
.passage .ph .tg{margin-left:auto;color:var(--brick);font-weight:700;font-size:.85rem}
.passage .pb{padding:10px 14px;font-size:.95rem;line-height:1.7;max-height:60vh;overflow:auto}
.passage.closed .pb{display:none}
.passage img{max-width:100%}

/* ── กันก๊อป ────────────────────────────────────────────────────────────────
   ชั้นนี้กันได้แค่การลากเมาส์คลุมแล้วก๊อป กับกดขวา — คนที่ตั้งใจจริงเปิด
   DevTools ก็อ่าน HTML ได้อยู่ดี ตัวที่กันของจริงคือลายน้ำ (.wm ด้านล่าง)
   ที่ติดรหัสผู้ซื้อไปกับทุกภาพหน้าจอ และลิมิตความเร็วเปิดชุดที่ฝั่งเซิร์ฟเวอร์ */
.q, .key, .passage{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;   /* iOS: กดค้างแล้วไม่ขึ้นเมนู คัดลอก/แชร์ */
}
.q img, .key img{ -webkit-user-drag:none; user-drag:none; pointer-events:none }

/* ลายน้ำ — ทับบนโจทย์และเฉลย จางพอให้อ่านออก แต่ติดไปกับภาพหน้าจอเสมอ
   ใช้ background ปูซ้ำ ไม่ใช่ content:attr() เพราะข้อความมีความยาวจำกัด
   พอบล็อกเฉลยยาว ๆ ลายน้ำจะหมดก่อนแล้วโผล่แค่มุมบน (เจอตอนเทสต์ 21 ส.ค.)
   ตัว url ของลายน้ำถูกใส่เป็นตัวแปร --wm จาก app.js เพราะต้องมีรหัสของแต่ละคน */
.wmwrap{ position:relative }
.wmwrap::after{
  content:""; position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background-image:var(--wm); background-repeat:repeat;
}

/* สั่งพิมพ์ / บันทึกเป็น PDF → ได้กระดาษเปล่าพร้อมข้อความเตือน */
@media print{
  body > *{ display:none !important }
  body::after{
    content:"ข้อสอบติดฝันไม่อนุญาตให้พิมพ์ออกมา — เปิดอ่านในเว็บได้ตลอดอายุสิทธิ์ค่ะ";
    display:block; padding:40px; font-size:18px; text-align:center;
  }
}