@charset "UTF-8";
/* ============================================================
   KruClass — ใบงานออนไลน์ (ตัวสร้าง · หน้าทำ · หน้าตรวจ · พิมพ์)
   ============================================================ */

/* ---------- โครงใบงาน ---------- */
.ws{display:flex;flex-direction:column;gap:14px;padding-bottom:90px}
.ws-page{position:relative}
.ws-pagelabel{font-size:.8rem;color:var(--ink-3);font-weight:700;margin:6px 0}
.ws-canvas-wrap{position:relative}
.ws-layer{display:flex;flex-direction:column;gap:14px}

.ws-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--shadow-1);transition:.15s var(--ease);position:relative
}
.ws-item.done{border-color:color-mix(in srgb,var(--ok-500) 45%,var(--line))}
.ws-item.s-ok{border-inline-start:4px solid var(--ok-500)}
.ws-item.s-warn{border-inline-start:4px solid var(--warn-500)}
.ws-item.s-bad{border-inline-start:4px solid var(--bad-500)}
.ws-item.s-info{border-inline-start:4px solid var(--info-500)}
.ws-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px}
.ws-no{
  width:28px;height:28px;flex:none;border-radius:50%;background:var(--brand-100);color:var(--brand-700);
  display:grid;place-items:center;font-weight:800;font-size:.86rem
}
.ws-item.done .ws-no{background:var(--ok-100);color:var(--ok-700)}
.ws-prompt{font-size:1rem;line-height:1.75}
.ws-prompt code{background:var(--surface-3);padding:1px 5px;border-radius:5px}
.ws-pts{flex:none;text-align:end;font-size:.86rem;min-width:64px}
.ws-pts b{font-size:1.15rem}
.ws-hint{margin-top:6px}
.ws-hint summary{cursor:pointer;font-size:.82rem;color:var(--ink-3)}
.ws-hint>div{font-size:.88rem;color:var(--ink-2);padding:6px 10px;background:var(--surface-3);
  border-radius:8px;margin-top:4px}
.ws-media{max-height:300px;border-radius:10px;border:1px solid var(--line);margin-bottom:10px}
.ws-body{margin-inline-start:39px}
@media(max-width:560px){.ws-body{margin-inline-start:0}}
.ws-foot{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;
  border-top:1px dashed var(--line)}
.ws-key{margin-top:8px;padding:8px 11px;background:var(--ok-50);border:1px solid var(--ok-500);
  border-radius:9px;font-size:.87rem}
.ws-key summary{cursor:pointer}
.ws-sol{white-space:pre-wrap;background:var(--surface-3);padding:9px;border-radius:7px;
  font-size:.82rem;overflow:auto;max-height:260px;margin:6px 0 0}

/* ---------- ตัวเลือก ---------- */
.ws-choices{display:flex;flex-direction:column;gap:7px}
.ws-choices.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:620px){.ws-choices.grid{grid-template-columns:1fr}}
.ws-opt{
  display:flex;align-items:flex-start;gap:9px;padding:9px 12px;border:1.5px solid var(--line);
  border-radius:var(--r);cursor:pointer;background:var(--surface-2);transition:.12s var(--ease)
}
.ws-opt:hover{border-color:var(--brand-300);background:var(--brand-50)}
.ws-opt.on{border-color:var(--brand-500);background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand-300)}
.ws-opt.key{border-color:var(--ok-500);background:var(--ok-50)}
.ws-opt input{margin-top:3px;accent-color:var(--brand-600);width:17px;height:17px;flex:none}
.ws-bullet{
  width:24px;height:24px;flex:none;border-radius:7px;background:var(--surface-3);color:var(--ink-2);
  display:grid;place-items:center;font-weight:700;font-size:.8rem
}
.ws-opt.on .ws-bullet{background:var(--brand-600);color:#fff}
.ws-opt.key .ws-bullet{background:var(--ok-600);color:#fff}

/* ---------- เติมคำ / ตอบสั้น ---------- */
.wsfill,.ws-short{
  display:inline-block;border:0;border-bottom:2px solid var(--brand-400);background:transparent;
  padding:2px 6px;font:inherit;font-weight:600;color:var(--brand-700);min-width:70px;border-radius:4px 4px 0 0
}
.wsfill:focus,.ws-short:focus{outline:none;background:var(--brand-50);border-bottom-color:var(--brand-600)}
.wsfill.ok{border-bottom-color:var(--ok-600);color:var(--ok-700);background:var(--ok-50)}
.wsfill.bad{border-bottom-color:var(--bad-600);color:var(--bad-700);background:var(--bad-50)}
.ws-short{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:7px 10px;font-weight:600}
.ws-bank{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.ws-essay{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}

/* ---------- จับคู่ ---------- */
.ws-match{display:flex;flex-direction:column;gap:7px}
.ws-match .ws-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);flex-wrap:wrap}
.ws-match .ws-row.ok{border-color:var(--ok-500);background:var(--ok-50)}
.ws-match .ws-row.bad{border-color:var(--bad-500);background:var(--bad-50)}
.ws-sel{width:auto;min-width:150px;padding:5px 9px}

/* ---------- ลากวาง ---------- */
.ws-drag{display:flex;flex-direction:column;gap:11px}
.ws-tokens{display:flex;flex-wrap:wrap;gap:7px;min-height:48px;padding:9px;border:1.5px dashed var(--line-2);
  border-radius:var(--r);background:var(--surface-2)}
.ws-tokens.over,.ws-drop.over{border-color:var(--brand-500);background:var(--brand-50)}
.ws-token{
  display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-full);
  background:var(--brand-100);color:var(--brand-800);font-weight:600;font-size:.9rem;cursor:grab;
  border:1.5px solid var(--brand-200);user-select:none;touch-action:none
}
.ws-token.in{background:var(--ok-100);color:var(--ok-700);border-color:var(--ok-500)}
.ws-token.dragging{opacity:.4}
.ws-token.picked{outline:3px solid var(--brand-400);outline-offset:2px}
.ws-zones{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.ws-zone{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--surface)}
.ws-drop{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;margin-top:5px;padding:6px;
  border:1.5px dashed var(--line-2);border-radius:9px}

/* ---------- เรียงลำดับ ---------- */
.ws-order{list-style:none;padding:0;margin:0;counter-reset:ord;display:flex;flex-direction:column;gap:6px}
.ws-order li{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);counter-increment:ord
}
.ws-order li::before{
  content:counter(ord);width:24px;height:24px;flex:none;border-radius:7px;background:var(--brand-100);
  color:var(--brand-700);display:grid;place-items:center;font-weight:800;font-size:.8rem
}

/* ---------- แนบรูป / วาดรูป ---------- */
.ws-upload .ws-files{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.ws-upload figure{margin:0;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--surface-2)}
.ws-upload figure img{max-height:200px;display:block}
.ws-upload figure .btn{position:absolute;top:5px;inset-inline-end:5px;background:rgba(255,255,255,.9)}
.ws-draw{display:flex;flex-direction:column;gap:8px}
.ws-tools{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:7px;background:var(--surface-3);
  border-radius:var(--r)}
.ws-tools .btn.on{background:var(--brand-600);color:#fff;border-color:var(--brand-600)}
.ws-tools input[type=color]{width:38px;height:30px;padding:2px;border:1px solid var(--line-2);border-radius:7px;background:none}
.ws-canvas{border:1px solid var(--line-2);border-radius:10px;background:#fff;touch-action:none;
  cursor:crosshair;max-width:100%}

/* ---------- เขียนโปรแกรม ---------- */
.ws-code{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.ws-code-head{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface-3);
  border-bottom:1px solid var(--line)}
.ws-editor{
  width:100%;border:0;background:#0f172a;color:#e2e8f0;padding:12px 14px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88rem;line-height:1.6;
  resize:vertical;tab-size:4;white-space:pre;overflow-x:auto
}
.ws-editor:focus{outline:2px solid var(--brand-500);outline-offset:-2px}
.ws-syntax{padding:0 10px}

/* ---------- แถบล่าง ---------- */
.ws-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:35;background:color-mix(in srgb,var(--surface) 94%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 0;box-shadow:0 -4px 16px rgba(16,24,40,.08)
}

/* ---------- วงแหวนคะแนน ---------- */
.ws-score-ring{
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;margin-inline:auto;
  background:conic-gradient(var(--brand-500) calc(var(--p)*1%),var(--surface-3) 0)
}
.ws-score-ring>div{
  width:104px;height:104px;border-radius:50%;background:var(--surface);display:grid;place-items:center;
  line-height:1.1;text-align:center
}
.ws-score-ring b{font-size:1.7rem;display:block}
.ws-score-ring span{font-size:.82rem;color:var(--ink-3)}

/* ---------- โหมดครอบบน PDF ---------- */
.ws-overlay .ws-canvas-wrap{position:relative;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#fff}
.ws-overlay .ws-layer{position:absolute;inset:0}
.ws-overlay .ws-item.boxed{
  background:color-mix(in srgb,var(--surface) 92%,transparent);border:2px solid var(--brand-400);
  padding:7px 9px;font-size:.88rem;overflow:auto;box-shadow:var(--shadow-2)
}
.ws-overlay .ws-item.boxed .ws-head{margin-bottom:5px}
.ws-overlay .ws-item.boxed .ws-body{margin-inline-start:0}

/* ---------- เลย์เอาต์สองคอลัมน์ที่ยุบลงบนมือถือ ---------- */
.split-l{display:grid;gap:16px;grid-template-columns:300px minmax(0,1fr);align-items:start}
.split-r{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 320px;align-items:start}
.split-l>*,.split-r>*{min-width:0}
.sticky-side{position:sticky;top:calc(var(--header-h) + 10px)}
@media(max-width:900px){
  .split-l,.split-r{grid-template-columns:minmax(0,1fr)}
  .split-l>:first-child{order:2}
  .sticky-side{position:static}
}

/* ---------- ตัวสร้างใบงาน ---------- */
.bd-kinds{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr))}
.bd-kind{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 13px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);font:inherit;
  text-align:start;transition:.14s var(--ease)
}
.bd-kind:hover{border-color:var(--brand-400);background:var(--brand-50);transform:translateY(-2px)}
.bd-kind .ico{font-size:1.25rem;line-height:1}
.bd-kind span:nth-of-type(1){font-weight:700;font-size:.92rem}
.bd-kind i{font-style:normal;font-size:.7rem}
.bd-item .card-h{gap:7px;flex-wrap:wrap}
.bd-badge{
  width:30px;height:30px;border-radius:9px;background:var(--brand-100);color:var(--brand-700);
  display:grid;place-items:center;font-weight:800;flex:none
}
.bd-pts{border-color:var(--brand-300)!important;font-weight:700}
.bd-rows{display:flex;flex-direction:column;gap:6px}
.bd-row{display:flex;align-items:center;gap:7px}
.bd-row.col{flex-direction:column;align-items:stretch;padding:8px;border:1px solid var(--line);border-radius:9px}
.bd-row input[type=radio],.bd-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--ok-600);flex:none}
.bd-letter{
  width:24px;height:24px;flex:none;border-radius:7px;background:var(--surface-3);color:var(--ink-2);
  display:grid;place-items:center;font-weight:700;font-size:.78rem
}
.bd-stage{max-height:62vh;overflow:auto;background:var(--surface-3);border-radius:10px;padding:10px}
.bd-sheet{position:relative;display:inline-block;max-width:100%;background:#fff;box-shadow:var(--shadow-2)}
.bd-sheet canvas,.bd-sheet img{display:block;max-width:100%;height:auto;cursor:crosshair}
.bd-box{
  position:absolute;border:2px solid var(--brand-500);background:rgba(99,102,241,.14);
  border-radius:6px;font-size:.72rem;font-weight:700;color:var(--brand-800);padding:1px 4px;pointer-events:none
}
.bd-box.other{border-color:var(--ink-4);background:rgba(107,114,128,.12);color:var(--ink-3)}

/* ---------- พิมพ์ ---------- */
@media print{
  .ws{padding-bottom:0;gap:9px}
  .ws-item{box-shadow:none;border:1px solid #bbb;padding:8px 10px;background:#fff}
  .ws-bar,.ws-tools,.ws-code-head,.ws-hint{display:none!important}
  .ws-opt{background:#fff;border-color:#999;padding:4px 8px}
  .ws-opt.on{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ws-editor{background:#f6f6f6;color:#111;border:1px solid #bbb;white-space:pre-wrap}
  .ws-no{background:#eee!important;color:#111!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wsfill,.ws-short{border-bottom:1px solid #333;color:#111;background:none!important}
  .ws-token{background:#eee!important;color:#111!important;border-color:#999;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =====================================================================
   ตัวแก้ไขใบงานแบบวางช่องบนหน้ากระดาษ (แบบ Topworksheets) — .lx-*
   ===================================================================== */
.lx{display:grid;grid-template-columns:200px minmax(0,1fr) 330px;gap:12px;align-items:start;
  --lx-h:calc(100vh - var(--header-h) - 120px)}
.lx-tools{position:sticky;top:calc(var(--header-h) + 10px);display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-1)}
.lx-tsep{font-size:.7rem;font-weight:800;color:var(--ink-4);letter-spacing:.04em;padding:8px 6px 2px}
.lx-tool{display:flex;align-items:center;gap:8px;width:100%;border:1px solid transparent;background:none;color:var(--ink-2);
  border-radius:10px;padding:7px 8px;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;text-align:start}
.lx-tool:hover{background:var(--surface-3);color:var(--ink)}
.lx-tool.on{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-1)}
.lx-tool .lx-ti{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-3);flex:none}
.lx-tool.on .lx-ti{background:rgba(255,255,255,.18)}
.lx-tool .lx-tl{flex:1;min-width:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-tool kbd{font-size:.66rem;opacity:.55;padding:0 4px;border:1px solid currentColor;border-radius:4px;background:none}

.lx-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.lx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:6px 8px;position:sticky;top:calc(var(--header-h) + 10px);z-index:5;box-shadow:var(--shadow-1)}
.lx-pager,.lx-zoom,.lx-hist{display:flex;align-items:center;gap:4px}
.lx-stat{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-zoom #lx-zoom{min-width:62px;justify-content:center;font-variant-numeric:tabular-nums}
/* แถบ "กำลังเพิ่ม…" ลอยเหนือใบงาน — ไม่ดันหน้ากระดาษให้เลื่อน (เดิมคลิกจุดที่สองแล้วตำแหน่งเพี้ยนลง) */
.lx-main{position:relative}
.lx-mode{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-radius:999px;
  background:var(--surface);border:1.5px solid var(--brand-300);color:var(--ink);font-size:.88rem;box-shadow:var(--shadow-3)}
.lx-mode .ico{color:var(--brand-600);display:inline-flex}

.lx-stage{height:var(--lx-h);min-height:460px;overflow:auto;background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;outline:none}
.lx-pages{display:flex;flex-direction:column;align-items:center;gap:22px;min-width:min-content}
.lx-pw{position:relative;flex:none}
.lx-pl{font-size:.75rem;font-weight:700;color:var(--ink-3);margin:0 0 4px}
.lx-paper{position:relative;width:100%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12),0 10px 30px -10px rgba(0,0,0,.25);
  border-radius:3px;overflow:hidden;user-select:none;-webkit-user-select:none}
.lx-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* ต้องชนะกฎรวม svg:not(.i){height:auto} — ไม่งั้นกรอบเส้นกลายเป็นจัตุรัส เส้นโยงไปผิดตำแหน่ง */
.lx-paper svg.lx-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:2}
.lx-svg line{stroke:#2563eb;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.lx-svg line.sel{stroke-width:3.6;opacity:1}
.lx-svg line.tmp{stroke:#7c3aed;stroke-width:2.4;stroke-dasharray:6 4}
.lx-layer{position:absolute;inset:0;z-index:2;touch-action:none}
.lx.drawing .lx-layer{cursor:crosshair}
.lx-loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-3);padding:60px 10px}

/* ช่องบนหน้ากระดาษ */
.lx-f{position:absolute;box-sizing:border-box;border:1.6px solid rgba(79,70,229,.85);background:rgba(99,102,241,.10);
  border-radius:4px;cursor:move;display:flex;align-items:center;container-type:size;color:#3730a3;font-size:12px;
  touch-action:none}
.lx.drawing .lx-f{cursor:crosshair}
.lx-f:hover{background:rgba(99,102,241,.18)}
.lx-f.sel{border-color:#7c3aed;background:rgba(124,58,237,.12)}
.lx-f.on{border-color:#7c3aed;border-width:2px;box-shadow:0 0 0 3px rgba(124,58,237,.25);background:rgba(124,58,237,.16);z-index:3}
.lx-f .lx-n{position:absolute;top:50%;left:-10px;transform:translateY(-50%);min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:#4f46e5;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1;z-index:2;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.lx-f.sel .lx-n{background:#7c3aed}
.lx-ph{padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(13px,62cqh);font-weight:600;
  display:flex;align-items:center;gap:4px;width:100%}
.lx-ph i{font-style:normal;opacity:.65;font-weight:500}
.lx-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
  font-weight:700;font-size:13px;opacity:.85;text-align:center}
.lx-f.t-draw{border-style:dashed;background:repeating-linear-gradient(45deg,rgba(99,102,241,.06) 0 8px,rgba(99,102,241,.13) 8px 16px)}
.lx-f.t-photo{border-style:dashed;background:rgba(14,165,233,.10);border-color:rgba(2,132,199,.85);color:#075985}
.lx-f.t-essay{align-items:flex-start;padding-top:4px}
.lx-f.t-tick{justify-content:center;background:rgba(16,185,129,.10);border-color:rgba(5,150,105,.85);color:#065f46;border-radius:5px}
.lx-mk{font-weight:800;font-size:min(13px,70cqh);display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.lx-mk.ok{color:#fff;background:#059669;border-radius:3px}
.lx-f.t-tf .lx-tf{display:flex;gap:4px;padding:0 6px;font-size:min(12px,60cqh);font-weight:700}
.lx-tf em{font-style:normal;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.06)}
.lx-tf em.ok{background:#059669;color:#fff}
.lx-f.t-join{--pc:#94a3b8;border-radius:50%;justify-content:center;border-color:var(--pc);border-width:2px;color:var(--pc);
  background:color-mix(in srgb,var(--pc) 18%,transparent)}
.lx-f.t-join.paired{border-width:2.6px;background:color-mix(in srgb,var(--pc) 24%,transparent)}
.lx-f.t-join.rect{border-radius:6px;background:color-mix(in srgb,var(--pc) 9%,transparent)}
.lx-f.t-join.rect.side-L{justify-content:flex-end;padding-right:4px}
.lx-f.t-join.rect.side-R{justify-content:flex-start;padding-left:4px}
.lx-f.t-join.rect .lx-dot{width:auto;min-width:16px;height:16px;border-radius:8px;background:var(--pc);color:#fff;font-size:10px}
.lx-f.t-join.sel,.lx-f.t-join.on{border-color:var(--pc)}
.lx-f.t-join.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 40%,transparent)}
.lx-f.target{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--pc)!important;transform:scale(1.08)}
.lx-knob{position:absolute;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--pc,#2563eb);
  border:2.5px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.45);cursor:crosshair;z-index:6;touch-action:none}
.lx-knob::after{content:"";position:absolute;inset:-3px}
.lx-knob::before{content:"";position:absolute;top:50%;height:2px;width:10px;margin-top:-1px;background:var(--pc,#2563eb)}
.side-L>.lx-knob{right:-25px}
.side-L>.lx-knob::before{right:100%}
.side-R>.lx-knob{left:-25px}
.side-R>.lx-knob::before{left:100%}
.lx-knob:hover{transform:scale(1.25)}
.lx-dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;font-size:11px;
  font-weight:800;color:#fff;background:#2563eb}
.lx-dot.r{background:#ea580c}
.lx-f.t-join .lx-dot{min-width:0;width:100%;height:100%;padding:0;font-size:min(11px,60cqh);background:none;color:inherit}
.lx-f.t-drop{border-style:dashed;background:rgba(234,88,12,.08);border-color:#ea580c;color:#9a3412}
.lx-f.t-drop[data-part=bank]{border-style:solid;background:rgba(100,116,139,.15);border-color:#64748b;color:#334155}
.lx-bank{display:flex;align-items:center;gap:5px;padding:0 8px;font-size:min(12px,55cqh);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;width:100%}
.lx-f.t-card{border-style:dotted;background:rgba(100,116,139,.10);color:#334155}
.lx-h{position:absolute;width:11px;height:11px;background:#fff;border:2px solid #7c3aed;border-radius:3px;z-index:7}
.lx-h.h-nw{left:-6px;top:-6px;cursor:nwse-resize}.lx-h.h-ne{right:-6px;top:-6px;cursor:nesw-resize}
.lx-h.h-sw{left:-6px;bottom:-6px;cursor:nesw-resize}.lx-h.h-se{right:-6px;bottom:-6px;cursor:nwse-resize}
.lx-h.sm{width:9px;height:9px;border-width:1.5px}
.lx-h.sm.h-nw{left:-9px;top:-9px}.lx-h.sm.h-ne{right:-9px;top:-9px}.lx-h.sm.h-sw{left:-9px;bottom:-9px}.lx-h.sm.h-se{right:-9px;bottom:-9px}
.lx-ghost{position:absolute;border:2px dashed #7c3aed;background:rgba(124,58,237,.12);border-radius:4px;pointer-events:none}
.lx-guide{position:absolute;pointer-events:none;z-index:5;background:#ec4899}
.lx-guide.gx{top:0;bottom:0;width:1px}
.lx-guide.gy{left:0;right:0;height:1px}

/* อัปโหลดไฟล์ใบงาน (ยังไม่มีพื้นหลัง) */
.lx-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:360px;border:2px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface);cursor:pointer;padding:30px}
.lx-drop.over{border-color:var(--brand-500);background:var(--brand-50)}
.lx-nobg .lx-tools{opacity:.5;pointer-events:none}

/* แผงตั้งค่า */
.lx-panel{position:sticky;top:calc(var(--header-h) + 10px);max-height:calc(100vh - var(--header-h) - 24px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--shadow-1)}
.lx-panel hr{margin:12px 0}
.lx-panel .field{margin-bottom:10px}
.lx-ph-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.lx-howto{margin:0 0 10px;padding-left:20px;font-size:.88rem;line-height:1.75}
.lx-rows{display:flex;flex-direction:column;gap:3px}
.lx-row{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;
  padding:6px 8px;font:inherit;font-size:.86rem;cursor:pointer;text-align:start;color:var(--ink)}
.lx-row:hover{border-color:var(--brand-300);background:var(--brand-50)}
.lx-row small{display:block;color:var(--ink-3);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-row .lx-n,.lx-panel .lx-n{min-width:20px;height:20px;border-radius:10px;background:#4f46e5;color:#fff;font-size:11px;
  font-weight:800;display:grid;place-items:center;flex:none;position:static}
.lx-orows{display:flex;flex-direction:column;gap:4px}
.lx-orow{display:flex;align-items:center;gap:6px;padding:4px;border-radius:8px;border:1px solid transparent}
.lx-orow.on{border-color:var(--brand-300);background:var(--brand-50)}
.lx-orow input:not([type=radio]):not([type=checkbox]),.lx-orow select{flex:1;min-width:0;padding:5px 8px;font-size:.86rem}
.lx-oi{width:22px;text-align:center;font-weight:800;color:var(--ink-2);flex:none}
.lx-okb{display:inline-flex;align-items:center;cursor:pointer;flex:none}
.lx-okb input{position:absolute;opacity:0;width:1px;height:1px}
.lx-okb span{display:inline-flex;align-items:center;gap:3px;padding:4px 8px;border-radius:7px;border:1px solid var(--line-2);
  font-size:.78rem;font-weight:700;color:var(--ink-3)}
.lx-okb input:checked+span{background:var(--ok-600);border-color:var(--ok-600);color:#fff}
.lx-okb input:focus-visible+span{box-shadow:var(--ring)}
.lx-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:5px;background:var(--surface)}
.lx-chips input{flex:1;min-width:90px;border:0!important;box-shadow:none!important;padding:4px!important;background:none}
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 9px;border-radius:999px;background:var(--ok-100);
  color:var(--ok-700);font-size:.84rem;font-weight:600}
.chip button{border:0;background:none;color:inherit;cursor:pointer;display:grid;place-items:center;padding:2px;border-radius:50%}
.chip button:hover{background:rgba(0,0,0,.08)}
.lx-opts{display:flex;flex-direction:column;gap:0;margin-bottom:6px}
.lx-opts .check{padding:3px 0}
.lx-pos summary{cursor:pointer;margin-top:10px}
.lx-xywh{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.lx-xywh label{display:flex;flex-direction:column;gap:2px;font-size:.7rem;color:var(--ink-3);font-weight:700}
.lx-xywh input{padding:4px 6px;font-size:.82rem}

@media (max-width:1180px){
  .lx{grid-template-columns:62px minmax(0,1fr) 300px}
  .lx-tool .lx-tl,.lx-tool kbd,.lx-tsep{display:none}
  .lx-tool{justify-content:center;padding:6px}
}
@media (max-width:900px){
  .lx{grid-template-columns:1fr}
  .lx-tools{position:static;flex-direction:row;overflow-x:auto;padding:6px}
  .lx-tool{width:auto}
  .lx-panel{position:static;max-height:none}
  .lx-bar{position:static}
  .lx{--lx-h:70vh}
}

/* =====================================================================
   หน้าใบงาน PDF/รูป + ช่องคำตอบวางทับ (นักเรียนทำ · ผล · ตรวจ · พิมพ์)
   กระดาษเป็นสีขาวเสมอแม้ธีมมืด ตัวอักษรในช่องย่อ/ขยายตามขนาดกระดาษ (container query)
   ===================================================================== */
.ws.ws-layout{max-width:1060px;margin-inline:auto}
.wl-zoom{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));z-index:40;display:flex;
  flex-direction:column;align-items:center;gap:2px;padding:4px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);backdrop-filter:blur(6px)}
.wl-zoom .xs{display:none}
.wl-zoom .btn{min-width:40px;justify-content:center;padding-inline:6px}
.wl-zoom [data-z=fit]{font-size:.75rem;font-variant-numeric:tabular-nums}
.wl{--wlz:1;display:flex;flex-direction:column;align-items:center;gap:24px;overflow-x:auto;padding:2px 2px 10px}
.wl.zoomed{align-items:flex-start}
.wl-page{flex:none;width:calc(min(100%, 980px) * var(--wlz))}
.wl-pl{margin:0 0 6px 2px;font-size:.8rem;font-weight:600;color:var(--ink-3)}
.wl-paper{position:relative;width:100%;aspect-ratio:210/297;background:#fff;color:#0f172a;border-radius:3px;overflow:hidden;
  container-type:inline-size;box-shadow:0 1px 3px rgba(15,23,42,.14),0 14px 34px -14px rgba(15,23,42,.38)}
.wl-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wl-bg canvas,.wl-bg img{display:block;width:100%;height:100%;max-width:none;object-fit:fill;user-select:none;-webkit-user-drag:none}
.wl-load{display:flex;align-items:center;gap:8px;font-size:.88rem;color:#64748b}
.wl-miss{padding:12px 16px;border-radius:8px;background:#fef2f2;color:#b91c1c;font-size:.9rem}
.wl-layer{position:absolute;inset:0}
.wl-layer svg.wf-lines{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;z-index:2}
.wl-more{display:flex;align-items:center;gap:8px;margin:28px 0 12px}

.wf{position:absolute;box-sizing:border-box;z-index:1;font-family:Sarabun,"Noto Sans Thai",sans-serif}
.ws-item.wf,.wf-group{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}
.wf-short,.wf-choice,.wf-truefalse,.wf-mark,.wf-dot{container-type:size}
.wf .wf-in{display:block;box-sizing:border-box;width:100%;height:100%;margin:0;min-height:0;min-width:0;outline:0;color:#1e3a8a;
  font-family:inherit;transition:background .15s,box-shadow .15s,border-color .15s}
.wf .wf-in:disabled{opacity:1;-webkit-text-fill-color:currentColor;cursor:default}
.wf .wf-in:focus{box-shadow:0 0 0 2px rgba(37,99,235,.4)}

/* ช่องพิมพ์ */
.wf-short .wf-in{padding:0 .3em;border:0;border-bottom:1.6px dashed rgba(37,99,235,.6);border-radius:4px 4px 0 0;
  background:rgba(219,234,254,.42);font-weight:600;font-size:calc(62cqh * var(--fs,1));line-height:1}
.wf-short .wf-in:focus{background:rgba(219,234,254,.75);border-bottom-style:solid}
.wf-short.done .wf-in{background:rgba(219,234,254,.16)}
/* เขียนตอบยาว */
.wf-essay .wf-in{resize:none;padding:.3em .45em;border:1.5px dashed rgba(37,99,235,.5);border-radius:5px;background:rgba(219,234,254,.32);
  font-weight:500;font-size:calc(1.75cqw * var(--fs,1));line-height:1.55;overflow:auto}
.wf-essay .wf-in:focus{background:rgba(219,234,254,.6);border-style:solid}
.wf-essay.done .wf-in{background:rgba(219,234,254,.12)}
/* รายการดึงลง */
.wf-choice .wf-in{padding:0 1.1em 0 .2em;background-position:right .25em center;background-size:.62em;border:1.5px solid rgba(124,58,237,.55);border-radius:5px;background-color:rgba(237,233,254,.65);
  color:#4c1d95;font-weight:600;font-size:calc(56cqh * var(--fs,1));cursor:pointer}
/* ถูก/ผิด */
.wf-tf{display:flex;gap:5%;width:100%;height:100%}
.wf-tf label{position:relative;flex:1;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(71,85,105,.45);
  border-radius:6px;background:rgba(241,245,249,.8);color:#334155;font-weight:700;font-size:min(56cqh,20cqw);line-height:1;cursor:pointer;
  user-select:none;transition:background .15s,color .15s}
.wf-tf label:hover{background:rgba(226,232,240,.95)}
.wf-tf input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wf-tf label.on{background:#2563eb;border-color:#2563eb;color:#fff}
.wf-tf label:focus-within{box-shadow:0 0 0 2px rgba(37,99,235,.45)}
.wf-tf label.key{box-shadow:0 0 0 2px #059669}
.wf-truefalse.st-ok .wf-tf label.on{background:#059669;border-color:#059669}
.wf-truefalse.st-bad .wf-tf label.on{background:#dc2626;border-color:#dc2626}

/* ติ๊ก / วงกลม / กากบาท / ระบาย */
.wf-mark{--mk:#1d4ed8;display:block;border-radius:4px;background:rgba(16,185,129,.08);outline:1.5px dashed rgba(5,150,105,.5);
  outline-offset:-1.5px;cursor:pointer;transition:background .15s}
.wf-mark:hover{background:rgba(16,185,129,.18)}
.wf-mark input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wf-mark:focus-within{box-shadow:0 0 0 2px rgba(37,99,235,.45)}
.wf-mark .wf-m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wf-mark.on{background:transparent;outline-color:transparent}
.wf-mark.on .wf-m::after{content:"";display:block}
.wf-mark.mk-tick.on .wf-m::after,.wf-mark.mk-cross.on .wf-m::after{width:min(118cqw,118cqh);height:min(118cqw,118cqh);background:var(--mk);
  -webkit-mask:var(--mk-img) center/contain no-repeat;mask:var(--mk-img) center/contain no-repeat}
.wf-mark.mk-tick{--mk-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.8c1.6 1.2 3.4 3.1 5 5.4 2.6-5.1 6.6-9.6 11.8-13' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wf-mark.mk-cross{--mk-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5.5c4.6 4 9 8.6 14 13.5M19 5c-5 4.4-9.4 9-14 14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.wf-mark.mk-circle.on .wf-m::after{width:112%;height:118%;flex:none;border:max(2px,min(9cqh,9cqw)) solid var(--mk);border-radius:50%;
  transform:rotate(-4deg)}
.wf-mark.mk-fill.on .wf-m::after{width:86%;height:80%;border-radius:min(30cqh,30cqw);background:var(--mk);opacity:.88}
.wf-mark.key{outline:2px dashed #059669;outline-offset:1px}
.wf-mark.st-ok{--mk:#059669}
.wf-mark.st-bad{--mk:#dc2626}
.wf-mark.st-warn{--mk:#d97706}

/* โยงเส้นจับคู่ */
.wf-dot{--jc:#2563eb;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;background:transparent;cursor:pointer;
  touch-action:none;z-index:3;-webkit-tap-highlight-color:transparent}
.wf-dot::before{content:"";display:block;flex:none;width:min(100cqw,100cqh);height:min(100cqw,100cqh);box-sizing:border-box;border-radius:50%;
  border:max(2px,min(16cqw,16cqh)) solid var(--jc);background:rgba(255,255,255,.9);transition:transform .12s,background .12s,box-shadow .12s}
.wf-dot::after{content:"";position:absolute;inset:-60%}
.wf-dot:hover::before,.wf-dot.hover::before{transform:scale(1.25)}
.wf-dot.on::before{background:var(--jc)}
.wf-dot.pick::before{background:color-mix(in srgb,var(--jc) 35%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--jc) 35%,transparent);transform:scale(1.2)}
/* กรอบครอบข้อความ (ครูลากกรอบแทนจุด) — โปร่งให้เห็นข้อความ เส้นเกาะขอบด้านใน */
.wf-dot.rect::before{width:100%;height:100%;border-radius:7px;border-width:2px;border-style:dashed;
  background:color-mix(in srgb,var(--jc) 6%,transparent)}
.wf-dot.rect::after{inset:-4px}
.wf-dot.rect:hover::before,.wf-dot.rect.hover::before{transform:none;background:color-mix(in srgb,var(--jc) 14%,transparent)}
.wf-dot.rect.on::before{border-style:solid;background:color-mix(in srgb,var(--jc) 12%,transparent)}
.wf-dot.rect.pick::before{transform:none;border-style:solid;background:color-mix(in srgb,var(--jc) 20%,transparent)}
.wf-dot:focus-visible{outline:0}
.wf-dot:focus-visible::before{box-shadow:0 0 0 4px rgba(37,99,235,.45)}
.wf-dot:disabled{cursor:default}
.wl-layer.joining .wf-dot:not(.pick)::before{animation:wfPulse 1.1s ease-in-out infinite}
@keyframes wfPulse{50%{box-shadow:0 0 0 5px rgba(37,99,235,.18)}}
.wf-lines .wf-ln{stroke:#2563eb;stroke-width:3;stroke-linecap:round;fill:none}
.wf-lines .wf-ln.ok{stroke:#059669}
.wf-lines .wf-ln.bad{stroke:#dc2626}
.wf-lines .wf-ln.key{stroke:#059669;stroke-width:2.4;stroke-dasharray:7 6;opacity:.9}
.wf-lines .wf-ln.tmp{stroke:#60a5fa;stroke-dasharray:6 5}
.wf-lines .wf-hit{stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
.wf-lines .wf-hit:hover{stroke:rgba(220,38,38,.18)}

/* ลากคำไปวาง */
.wl .wf-bank{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:.35em;min-height:0;margin:0;padding:.35em;
  border:1.5px dashed #94a3b8;border-radius:8px;background:rgba(248,250,252,.94);overflow:auto;font-size:max(9px,1.45cqw)}
.wl .wf-bank::before{content:"บัตรคำ";flex-basis:100%;font-size:.75em;font-weight:700;color:#64748b;line-height:1}
.wl .wf .ws-token{padding:.22em .6em;border-radius:6px;font-size:max(9px,1.45cqw);font-weight:600;line-height:1.25;color:#1e293b;
  background:#fff;border:1.5px solid #cbd5e1;box-shadow:0 1px 2px rgba(15,23,42,.12);cursor:grab;touch-action:none}
.wl .wf .ws-token.in{background:#fff7ed;border-color:#fb923c;color:#9a3412}
.wl .wf-zone{display:flex;padding:0;border:1.6px dashed #ea580c;border-radius:6px;background:rgba(255,237,213,.45)}
.wl .wf-zone .ws-drop{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.2em;min-height:0;margin:0;padding:.12em;
  border:0;border-radius:5px;background:none;font-size:max(9px,1.45cqw)}
.wl .wf-zone .ws-drop.over{background:rgba(251,146,60,.2)}
.wl .wf-bank.over{background:rgba(219,234,254,.9);border-color:#2563eb}
.wl .wf-zone.st-ok{border-style:solid;border-color:#059669;background:rgba(209,250,229,.5)}
.wl .wf-zone.st-bad{border-style:solid;border-color:#dc2626;background:rgba(254,226,226,.5)}

/* วาดรูป */
.wf.wf-draw{border:1.6px dashed rgba(124,58,237,.6);border-radius:6px;background:rgba(237,233,254,.16)}
.wf-draw .wf-ink{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}
.wf.wf-draw.has-ink{border-color:rgba(124,58,237,.3);background:transparent}
.wf-drawbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}
.wf-drawbtn:hover{background:rgba(124,58,237,.06)}
.wf-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;border:1px solid #c4b5fd;background:rgba(255,255,255,.95);
  color:#5b21b6;font:600 14px/1 Sarabun,sans-serif;box-shadow:0 3px 10px -2px rgba(91,33,182,.25)}
.wf-draw.has-ink .wf-drawbtn{align-items:flex-end;justify-content:flex-end;padding:6px}
.wf-draw.has-ink .wf-pill{padding:5px 10px;font-size:12px;opacity:.92}
.wf-drawbtn:disabled .wf-pill{opacity:.6}
.wf-print-opts{display:flex;position:absolute;inset:0;align-items:center;padding:0 .3em;font-size:min(48cqh,14px);color:#475569;white-space:nowrap;overflow:hidden}
.wf-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#94a3b8}

/* แนบรูป */
.wf.wf-image{border:1.6px dashed rgba(2,132,199,.65);border-radius:6px;background:rgba(224,242,254,.3);overflow:hidden}
.wf-up{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px}
.wf-up .ws-files{flex:1 1 0;display:flex;justify-content:center;gap:4px;width:100%;min-height:0;margin:0;overflow:hidden}
.wf-up .ws-files:empty{display:none}
.wf-up figure{position:relative;height:100%;margin:0;border:0;background:none}
.wf-up figure img{display:block;height:100%;max-height:100%;width:auto;object-fit:contain;border-radius:4px}
.wf-up figure .btn{position:absolute;top:2px;right:2px;padding:1px 7px;background:rgba(255,255,255,.92)}
.wf-up .wf-upbtn{background:rgba(255,255,255,.95)}

/* การ์ดคำถามในกรอบ (ชนิดที่ไม่มีรูปแบบช่องบนใบงาน) */
.wf-cardbox{overflow:auto;padding:4px;border:1.5px solid #c7d2fe;border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;z-index:2}
.wf-cardbox > .ws-item{margin:0;border:0;box-shadow:none}

/* เฉลย / เลขช่อง / ผลตรวจ */
.wf-key{position:absolute;left:0;top:100%;z-index:6;margin-top:2px;padding:1px 7px;border-radius:5px;background:#059669;color:#fff;
  font:600 12px/1.45 Sarabun,sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px rgba(5,150,105,.35)}
.wf-key::before{content:"เฉลย: ";opacity:.85;font-weight:500}
.wf-no{position:absolute;left:0;top:50%;z-index:6;min-width:20px;height:20px;padding:0 5px;border-radius:10px;transform:translate(-55%,-50%);
  background:#4f46e5;color:#fff;font:700 11px/20px Sarabun,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff;pointer-events:none}
.wf-no.t-ok{background:#059669}.wf-no.t-bad{background:#dc2626}.wf-no.t-warn{background:#d97706}.wf-no.t-info{background:#2563eb}
.wf.st-ok .wf-in{border-color:#059669;background:rgba(209,250,229,.5);color:#065f46}
.wf.st-bad .wf-in{border-color:#dc2626;background:rgba(254,226,226,.55);color:#991b1b}
.wf.st-warn .wf-in{border-color:#d97706;background:rgba(254,243,199,.55);color:#92400e}
.wf.st-info .wf-in{border-color:#2563eb}
.wf.wf-draw.st-ok,.wf.wf-image.st-ok{border-color:#059669;border-style:solid}
.wf.wf-draw.st-bad,.wf.wf-image.st-bad{border-color:#dc2626;border-style:solid}
.wf.flash{animation:wfFlash 1.2s ease 2}
@keyframes wfFlash{50%{box-shadow:0 0 0 4px rgba(245,158,11,.75)}}

/* ตรวจงาน / ดูผล: หน้าใบงานซ้าย รายการคะแนนขวา */
.rv-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.rv-side{position:sticky;top:calc(var(--header-h) + 12px);max-height:calc(100vh - var(--header-h) - 24px);overflow:auto}
.rv-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.rv-row:last-child{border-bottom:0}
.rv-row:hover{background:var(--surface-2)}
.rv-row .n{width:24px;height:24px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:var(--brand-600);color:#fff}
.rv-row .n.t-ok{background:var(--ok-600)}.rv-row .n.t-bad{background:var(--bad-600)}.rv-row .n.t-warn{background:var(--warn-600)}.rv-row .n.t-info{background:var(--info-600)}
.rv-row .a{font-size:.8rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-row input[type=number]{width:64px;padding:4px 6px;text-align:center;font-weight:700}
.rv-row input[type=number]::placeholder{font-weight:500;color:var(--info-600)}
.rv-max{padding:2px 4px;border:0;border-radius:6px;background:none;color:var(--ink-3);font:inherit;font-size:.78rem;cursor:pointer}
.rv-max:hover{background:var(--ok-50);color:var(--ok-700)}
@media (max-width:1100px){.rv-split{grid-template-columns:1fr}.rv-side{position:static;max-height:none}}

@media print{
  .wl{gap:0;overflow:visible;padding:0}
  .wl-page{width:100%!important;max-width:182mm;margin-inline:auto;break-after:page;page-break-after:always;break-inside:avoid}
  .wl-page:last-child{break-after:auto;page-break-after:auto}
  .wl-paper{box-shadow:none;border-radius:0;outline:1px solid #ddd}
  .wf .wf-in,.wf-mark,.wl .wf-zone,.wf-draw,.wf-image{background:none!important;box-shadow:none!important}
  .wf-short .wf-in,.wf-essay .wf-in{border-color:transparent!important}
  .wf.wf-draw,.wf.wf-image{border-color:transparent!important}

  .wf-mark{outline-color:transparent!important}
  .wf-pill,.wf-upbtn,.wf-empty,.wl-zoom{display:none!important}
  .wf-choice .wf-in{appearance:none;-webkit-appearance:none;border-color:transparent!important}
  .wl .wf .ws-token{box-shadow:none}
}

/* =====================================================================
   กระดานวาด (DrawPad)
   ===================================================================== */
.dp{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;outline:0}
.dp-title{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.dp-title b{display:block;font-size:1.02rem;line-height:1.3}
.dp-title .f1 > span{display:block;font-size:.8rem;color:var(--ink-3)}
.dp-head{display:flex;align-items:center;gap:6px;padding:5px 6px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.dp-tools{display:flex;align-items:stretch;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}
.dp-t{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;padding:5px 3px 4px;border:0;
  border-radius:10px;background:transparent;color:var(--ink-2);font:600 10.5px/1.1 Sarabun,sans-serif;cursor:pointer;transition:background .12s,color .12s}
.dp-t:hover{background:var(--surface-3)}
.dp-t.on{background:var(--brand-600);color:#fff;box-shadow:0 2px 8px -2px rgba(79,70,229,.5)}
.dp-t:focus-visible,.dp-b:focus-visible,.dp-sw:focus-visible{outline:2px solid var(--brand-500);outline-offset:1px}
.dp-sep{flex:none;width:1px;align-self:stretch;margin:5px 3px;background:var(--line-2)}
.dp-acts{display:flex;align-items:center;gap:1px;flex:none}
.dp-b{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:9px;background:transparent;
  color:var(--ink-2);cursor:pointer}
.dp-b:hover{background:var(--surface-3)}
.dp-b:disabled{opacity:.32;cursor:default;background:none}
.dp-zl{width:auto;min-width:50px;padding:0 6px;font:700 12px Sarabun,sans-serif;font-variant-numeric:tabular-nums}
.dp-props{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.dp-pal{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.dp-sw{position:relative;flex:none;width:24px;height:24px;padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--c);
  box-shadow:0 0 0 1px var(--line-2);cursor:pointer;transition:transform .1s}
.dp-sw:hover{transform:scale(1.12)}
.dp-sw.on{box-shadow:0 0 0 2px var(--brand-600);transform:scale(1.08)}
.dp-custom{background:conic-gradient(#ef4444,#facc15,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444)}
.dp-custom.on{background:var(--c)}
.dp-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.dp-rng{display:flex;align-items:center;gap:7px;margin:0;font:600 12px Sarabun,sans-serif;color:var(--ink-3)}
.dp-rng input{width:110px;accent-color:var(--brand-600)}
.dp-rng output{min-width:36px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dp-chip{padding:4px 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 12px Sarabun,sans-serif;cursor:pointer}
.dp-chip.on{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700)}
.dp-stage{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;
  background:var(--surface-3) repeating-conic-gradient(rgba(127,138,160,.13) 0 25%,transparent 0 50%) 0 0/22px 22px}
.dp-stage[data-tool=hand],.dp-stage.grab{cursor:grab}
.dp-stage.panning{cursor:grabbing}
.dp-stage[data-tool=text]{cursor:text}
.dp-stage[data-tool=picker]{cursor:copy}
.dp-stage[data-tool=fill]{cursor:cell}
.dp-sheet{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;isolation:isolate;box-shadow:0 2px 12px rgba(15,23,42,.22)}
.dp-sheet canvas{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.dp-ring{position:absolute;left:0;top:0;z-index:3;display:none;border:1px solid rgba(15,23,42,.7);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.85)}
.dp-ring.erase{border-style:dashed;background:rgba(255,255,255,.25)}
.dp-text{position:absolute;z-index:4;margin:0;padding:4px;min-width:40px;border:1.5px dashed #6366f1;border-radius:3px;background:rgba(255,255,255,.5);
  outline:0;resize:none;overflow:hidden;white-space:pre;box-sizing:border-box}
.dp-foot{display:flex;justify-content:space-between;gap:12px;padding:5px 10px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--ink-3)}
.dp-help{white-space:nowrap}
.dp-inline .dp-stage{width:100%;max-height:72vh}
.dp-full{position:fixed;inset:0;z-index:1200;border:0;border-radius:0}
.dp-full .dp-stage,.dp-modal .dp-stage{flex:1;min-height:0;max-height:none;aspect-ratio:auto!important}
.dp-overlay{position:fixed;inset:0;z-index:1200;display:flex;background:rgba(15,23,42,.6)}
.dp-modal{flex:1;height:100vh;height:100dvh;border:0;border-radius:0}
html.dp-lock,html.dp-lock body{overflow:hidden}
.ws-draw .dp{width:100%}
@media (max-width:760px){
  .dp-t span{display:none}
  .dp-t{min-width:40px;padding:8px 6px}
  .dp-help{display:none}
  .dp-rng input{width:84px}
  .dp-head{flex-wrap:wrap}
  .dp-acts{margin-inline-start:auto}
  .dp-title .btn span{display:none}
}
@media print{.dp-head,.dp-props,.dp-foot{display:none}}

/* ===== เครื่องหมายของครูบนใบงาน (เฟส 8) ===== */
.wl-anno{position:absolute;inset:0;z-index:6;pointer-events:none;container-type:size}
.wl-anno.hidden{display:none}
.wl-anno.drawing{pointer-events:auto;cursor:crosshair;touch-action:none}
.wl-anno[data-tool=text]{cursor:text}
.wl-anno .an-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.wl-anno .an-svg *{fill:none;stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.wl-anno .an-svg .an-pen{stroke-width:2.2}
.wl-anno .an-html{position:absolute;inset:0}
.an-m{pointer-events:auto;cursor:move}
.wl-anno.drawing .an-m{pointer-events:none}
.an-svg .an-m.sel{stroke-dasharray:4 3;filter:drop-shadow(0 0 2px rgba(37,99,235,.7))}
.an-stamp{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(18px,4.2cqw,36px);aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.an-stamp svg{stroke-width:3;width:72%;height:72%}
.an-stamp.t-q svg{stroke-width:2.6}
.an-text{position:absolute;transform:translate(0,-50%);max-width:46%;background:#fffbe6;border:2px solid var(--ac);color:var(--ac);
  font-weight:700;font-size:clamp(9px,1.75cqw,15px);line-height:1.35;padding:.25em .6em;border-radius:8px;white-space:pre-wrap;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.an-m.sel:not(polyline):not(ellipse):not(rect):not(line){outline:2px dashed #2563eb;outline-offset:2px}
.an-input{position:absolute;transform:translate(0,-50%);z-index:8;width:min(46%,260px);font:inherit;font-size:.9rem;font-weight:700;
  color:var(--ac);border:2px solid var(--ac);border-radius:8px;padding:4px 8px;background:#fffbe6;resize:none;pointer-events:auto}
.an-bar{position:sticky;top:calc(var(--header-h) + 6px);z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 10px;box-shadow:var(--shadow-2);margin-bottom:10px}
.an-lbl{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--ink-2)}
.an-tools,.an-colors,.an-acts{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.an-tools{padding-inline-end:6px;border-inline-end:1px solid var(--line)}
.an-colors{padding-inline-end:6px;border-inline-end:1px solid var(--line)}
.an-t{width:36px;height:36px;border:1px solid transparent;background:none;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.an-t:hover{background:var(--surface-3)}
.an-t.on{background:var(--brand-50);border-color:var(--brand-400);color:var(--brand-700)}
.an-t:disabled{opacity:.35;cursor:default}
.an-c{width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line-2);cursor:pointer}
.an-c.on{box-shadow:0 0 0 2px var(--c)}
.an-viewbar{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;background:#fff7ed;
  border:1px solid #fdba74;color:#9a3412;border-radius:12px;padding:8px 12px;margin-bottom:10px}
.an-note{margin-top:10px;padding:8px 10px;border-radius:10px;background:#fff7ed;border:1px solid #fdba74;color:#9a3412;font-size:.9rem}
.an-note.edit{background:var(--surface-2);border-color:var(--line);color:inherit}
.an-note textarea{width:100%;margin-top:4px;min-height:38px}
@media print{.an-bar,.an-viewbar,.an-input{display:none!important}.an-note.edit textarea:placeholder-shown{display:none}}
.wl-paper.img-paper{aspect-ratio:auto!important;height:auto}
.wl-paper.img-paper>img{display:block;width:100%;height:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.wl-imgs .wl-page{width:min(100%,900px)}