@charset "UTF-8";
/* ============================================================
   KruClass — ดีไซน์ซิสเทม
   โทเคนสี → คอมโพเนนต์ → ยูทิลิตี้ → ตอบสนองทุกจอ
   ============================================================ */

/* ---------- ฟอนต์ไทย (ฝังในโปรเจกต์ ไม่ง้อ CDN) ---------- */
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-thai-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-thai-600-normal.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-thai-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;src:url(../fonts/sarabun-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap}

/* ---------- โทเคน ---------- */
:root{
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-300:#a5b4fc;
  --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --brand-800:#3730a3; --brand-900:#312e81;

  --ok-50:#ecfdf5;  --ok-100:#d1fae5;  --ok-500:#10b981; --ok-600:#059669; --ok-700:#047857;
  --warn-50:#fffbeb; --warn-100:#fef3c7; --warn-500:#f59e0b; --warn-600:#d97706; --warn-700:#b45309;
  --bad-50:#fef2f2;  --bad-100:#fee2e2; --bad-500:#ef4444; --bad-600:#dc2626; --bad-700:#b91c1c;
  --info-50:#eff6ff; --info-100:#dbeafe; --info-500:#3b82f6; --info-600:#2563eb;
  --violet-100:#ede9fe; --violet-500:#8b5cf6; --violet-600:#7c3aed;

  --bg:#f4f6fb; --surface:#fff; --surface-2:#fafbff; --surface-3:#eef1f8;
  --ink:#0f1729; --ink-2:#39435c; --ink-3:#6a7690; --ink-4:#9aa5bd;
  --line:#e4e8f0; --line-2:#ccd3e0;

  --grad:linear-gradient(135deg,var(--brand-500),var(--violet-600));
  --grad-soft:linear-gradient(135deg,var(--brand-50),var(--violet-100));

  --r-sm:9px; --r:13px; --r-lg:17px; --r-xl:24px; --r-full:999px;
  --sp:4px;
  --shadow-1:0 1px 2px rgba(18,26,48,.05),0 1px 3px rgba(18,26,48,.06);
  --shadow-2:0 4px 10px -3px rgba(18,26,48,.09),0 2px 5px -3px rgba(18,26,48,.06);
  --shadow-3:0 14px 28px -8px rgba(18,26,48,.14),0 5px 10px -5px rgba(18,26,48,.07);
  --shadow-pop:0 22px 52px -14px rgba(18,26,48,.3);
  --ring:0 0 0 3px var(--brand-200);
  --header-h:60px;
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
:root[data-theme=dark],
:root[data-theme=auto] body.dark{
  --bg:#0b0f1d; --surface:#141a2c; --surface-2:#1a2139; --surface-3:#242d49;
  --ink:#eff2f9; --ink-2:#c9d1e4; --ink-3:#97a4c1; --ink-4:#71809f;
  --line:#2a3252; --line-2:#3a4469;
  --grad-soft:linear-gradient(135deg,#232a52,#2b2456);
  --brand-50:#1d2242; --brand-100:#262c55; --brand-200:#333a6d;
  --ok-50:#0e2a22; --ok-100:#13392e;
  --warn-50:#2e2409; --warn-100:#3d3010;
  --bad-50:#301317; --bad-100:#43181d;
  --info-50:#111f3a; --info-100:#152949;
  --violet-100:#251c48;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 10px rgba(0,0,0,.45);
  --shadow-3:0 14px 30px rgba(0,0,0,.5); --shadow-pop:0 24px 60px rgba(0,0,0,.6);
  --ring:0 0 0 3px #3b4487;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:Sarabun,"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px;line-height:1.62;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.3;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.07rem} h4{font-size:.98rem}
p{margin:0 0 .8em}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
/* ไอคอนต้องไม่ถูก height:auto ยุบเป็นศูนย์ จึงยกเว้น svg.i ออกจากกฎรวม */
svg:not(.i){max-width:100%;height:auto}

/* ---------- ไอคอน ---------- */
.i{flex:none;vertical-align:-.16em;overflow:visible;height:1em}
.i[width]{height:revert}
.i-xs{width:14px;height:14px} .i-lg{width:22px;height:22px} .i-xl{width:28px;height:28px}
.i-bold{stroke-width:2.1px}
/* กล่องไอคอนแบบมีพื้นสี — ใช้นำสายตาในหัวข้อ/การ์ด/สถิติ */
.ico-box{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--brand-50);color:var(--brand-600)
}
.ico-box.sm{width:30px;height:30px;border-radius:9px}
.ico-box.lg{width:46px;height:46px;border-radius:14px}
.ico-box.ok{background:var(--ok-100);color:var(--ok-600)}
.ico-box.warn{background:var(--warn-100);color:var(--warn-600)}
.ico-box.bad{background:var(--bad-100);color:var(--bad-600)}
.ico-box.info{background:var(--info-100);color:var(--info-600)}
.ico-box.violet{background:var(--violet-100);color:var(--violet-600)}
.ico-box.neutral{background:var(--surface-3);color:var(--ink-3)}
.ico-box.grad{background:var(--grad);color:#fff;box-shadow:var(--shadow-1)}
/* ปุ่มสลับธีม: โชว์ไอคอนของธีมที่จะเปลี่ยนไป */
.th-sun{display:none}
:root[data-theme=dark] .th-sun,:root[data-theme=auto] body.dark .th-sun{display:inline}
:root[data-theme=dark] .th-moon,:root[data-theme=auto] body.dark .th-moon{display:none}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
small{font-size:.83em}
code,kbd,pre{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.9em}
kbd{background:var(--surface-3);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:1px 6px;font-size:.8em;color:var(--ink-2)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
::selection{background:var(--brand-200);color:var(--ink)}

/* ---------- โครงหน้า ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 16px}
.wrap-sm{max-width:760px}
.wrap-md{max-width:1020px}
main{flex:1;padding:18px 0 56px}

/* ---------- แถบบนสุด ---------- */
.top{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;gap:10px;height:var(--header-h)}
/* ชื่อระบบบนหัวเว็บ — จำกัดไว้ที่ a/span เท่านั้น เพราะ .brand ถูกใช้เป็นสีของ .stat ด้วย
   (ถ้าไม่จำกัด การ์ดสถิติ .stat.brand จะกลายเป็น flex แล้วตัวเลขไปต่อท้ายป้ายชื่อ) */
a.brand:not(.badge),span.brand:not(.badge){display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.03rem;
  color:var(--ink);white-space:nowrap}
a.brand:not(.badge):hover{text-decoration:none}
a.brand .logo,span.brand .logo{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--brand-500),var(--violet-600));box-shadow:var(--shadow-1);
  font-size:15px;font-weight:800
}
.nav{display:flex;gap:2px;margin-inline-start:12px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:var(--r-full);color:var(--ink-2);font-weight:600;font-size:.93rem;
  white-space:nowrap;transition:.15s var(--ease)
}
.nav a .i{color:var(--ink-4);transition:.15s var(--ease)}
.nav a:hover{background:var(--surface-3);text-decoration:none;color:var(--ink)}
.nav a:hover .i{color:var(--brand-500)}
.nav a.on{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-1)}
.nav a.on .i{color:#fff}
.top-right{display:flex;align-items:center;gap:6px;flex:none}
.top .burger{display:none}
/* เมนูยาว (ครู/แอดมิน 8 รายการ) — กระชับลงตามความกว้าง แล้วค่อยย้ายไปลิ้นชักก่อนจะล้น (1.8.4) */
@media (max-width:1480px){.nav a{padding:7px 10px;gap:6px;font-size:.9rem}}
@media (max-width:1320px){.nav a .i{display:none}.nav a{padding:7px 9px}}
@media (max-width:1140px) and (min-width:861px){.nav{display:none}.top .burger{display:inline-flex}}

/* ลิ้นชักเมนูสำหรับจอเล็ก — แทนแถวเมนูที่ตกบรรทัดจนหน้าตาแน่น */
.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(10,14,28,.5);backdrop-filter:blur(2px);animation:fade .18s}
.drawer-panel{
  position:absolute;inset-block:0;inset-inline-start:0;width:min(84vw,300px);background:var(--surface);
  border-inline-end:1px solid var(--line);box-shadow:var(--shadow-pop);padding:14px;
  display:flex;flex-direction:column;gap:3px;overflow-y:auto;animation:slideL .22s var(--ease)
}
@keyframes slideL{from{transform:translateX(-100%)}}
.drawer-panel .dh{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.drawer-panel a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  color:var(--ink-2);font-weight:600;font-size:.96rem
}
.drawer-panel a .i{color:var(--ink-4)}
.drawer-panel a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.drawer-panel a.on{background:var(--brand-50);color:var(--brand-700)}
.drawer-panel a.on .i{color:var(--brand-600)}
.drawer-panel .dlabel{font-size:.74rem;font-weight:700;color:var(--ink-4);padding:12px 12px 4px;
  letter-spacing:.04em}

.avatar{
  width:32px;height:32px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;overflow:hidden
}
.avatar img{width:100%;height:100%;object-fit:cover}

/* เมนูผู้ใช้ */
.menu{position:relative}
.menu-pop{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:6px;
  display:none;z-index:50
}
.menu.open .menu-pop{display:block;animation:pop .14s var(--ease)}
.menu-pop a,.menu-pop button{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--ink-2);font:inherit;text-align:start;cursor:pointer
}
.menu-pop a:hover,.menu-pop button:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.menu-sep{height:1px;background:var(--line);margin:5px 2px}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}}

/* ---------- การ์ด ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1)
}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h2,.card-h h3{margin:0}
.card-b{padding:16px}
.card-f{padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.card.pad{padding:16px}
.card-link{display:block;color:inherit;transition:.18s var(--ease)}
.card-link:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-3);border-color:var(--brand-200)}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.93rem;
  cursor:pointer;transition:.15s var(--ease);white-space:nowrap;text-decoration:none;line-height:1.3
}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.disabled{opacity:.55;pointer-events:none}
.btn-primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-ok{background:var(--ok-600);border-color:var(--ok-600);color:#fff}
.btn-ok:hover{background:var(--ok-700)}
.btn-danger{background:var(--bad-600);border-color:var(--bad-600);color:#fff}
.btn-danger:hover{background:var(--bad-700)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn-outline{background:transparent;border-color:var(--brand-300);color:var(--brand-700)}
.btn-outline:hover{background:var(--brand-50)}
.btn-sm{padding:5px 10px;font-size:.85rem;border-radius:7px;gap:5px}
.btn-lg{padding:12px 22px;font-size:1rem}
.btn-icon{padding:7px;width:34px;height:34px}
.btn-block{width:100%}
.btn-group{display:inline-flex}
.btn-group .btn{border-radius:0;margin-inline-start:-1px}
.btn-group .btn:first-child{border-start-start-radius:var(--r-sm);border-end-start-radius:var(--r-sm);margin:0}
.btn-group .btn:last-child{border-start-end-radius:var(--r-sm);border-end-end-radius:var(--r-sm)}

/* ---------- ฟอร์ม ---------- */
.field{margin-bottom:14px}
.field>label,.lbl{display:block;font-weight:600;font-size:.88rem;color:var(--ink-2);margin-bottom:5px}
.req::after{content:" *";color:var(--bad-600)}
/* input ที่ไม่ได้ใส่ type= ก็คือช่องข้อความ — ต้องรวมไว้ด้วย
   (เดิมไม่รวม ทำให้ช่องกรอก 86 ช่องใน 28 หน้าเป็นกล่องเล็กหน้าตาดิบของเบราว์เซอร์) */
.inp,input:not([type]),input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input[type=time],input[type=url],
input[type=tel],input[type=month],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.95rem;transition:.15s var(--ease)
}
textarea{min-height:92px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-inline-end:30px}
.inp:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-400);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--ink-4);opacity:1}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}

/* ช่องเลือกไฟล์ — ปุ่มในตัวให้หน้าตาเหมือนปุ่มของระบบ */
input[type=file]{width:100%;font:inherit;font-size:.9rem;color:var(--ink-3);padding:8px;
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer}
input[type=file]:hover{border-color:var(--brand-400);background:var(--brand-50)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.88rem;margin-inline-end:12px;
  padding:7px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink);cursor:pointer}
input[type=color]{width:42px;height:36px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer}
input[type=range]{accent-color:var(--brand-600)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-600)}
.inp.err,input.err{border-color:var(--bad-500)}
.hint{font-size:.82rem;color:var(--ink-3);margin-top:4px}
.err-msg{font-size:.82rem;color:var(--bad-600);margin-top:4px;font-weight:600}
.row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.row-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.row-3{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.row-2,.row-3{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 16px}
legend{padding:0 7px;font-weight:700;font-size:.9rem;color:var(--ink-2)}

.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:5px 0}
.check input{width:17px;height:17px;margin:3px 0 0;accent-color:var(--brand-600);flex:none}
.check span{font-size:.93rem}
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:40px;height:23px;border-radius:999px;background:var(--line-2);position:relative;transition:.18s;flex:none}
.switch i::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:.18s var(--ease);box-shadow:var(--shadow-1)}
.switch input:checked+i{background:var(--brand-600)}
.switch input:checked+i::after{transform:translateX(17px)}
.switch input:focus-visible+i{box-shadow:var(--ring)}

/* ---------- ตาราง ---------- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-3);color:var(--ink-2);text-align:start;
  font-weight:700;font-size:.82rem;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap
}
tbody td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.t-c{text-align:center} .t-e{text-align:end} .t-nowrap{white-space:nowrap}
.t-num{text-align:center;font-variant-numeric:tabular-nums}
.t-zebra tbody tr:nth-child(odd){background:color-mix(in srgb,var(--surface-3) 45%,transparent)}
.t-compact td,.t-compact th{padding:5px 8px;font-size:.87rem}
.sticky-col{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1}
tbody tr:hover .sticky-col{background:var(--surface-2)}
thead .sticky-col{z-index:3;background:var(--surface-3)}

/* ---------- ป้าย/ชิป ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--r-full);
  font-size:.78rem;font-weight:700;background:var(--surface-3);color:var(--ink-2);white-space:nowrap
}
.badge.ok{background:var(--ok-100);color:var(--ok-700)}
.badge.warn{background:var(--warn-100);color:var(--warn-700)}
.badge.bad{background:var(--bad-100);color:var(--bad-700)}
.badge.info{background:var(--info-100);color:var(--info-600)}
.badge.violet{background:var(--violet-100);color:var(--violet-600)}
.badge.brand{background:var(--brand-100);color:var(--brand-700)}
:root[data-theme=dark] .badge.ok,:root[data-theme=auto] body.dark .badge.ok{color:#6ee7b7}
:root[data-theme=dark] .badge.warn,:root[data-theme=auto] body.dark .badge.warn{color:#fcd34d}
:root[data-theme=dark] .badge.bad,:root[data-theme=auto] body.dark .badge.bad{color:#fca5a5}
:root[data-theme=dark] .badge.info,:root[data-theme=auto] body.dark .badge.info{color:#93c5fd}
:root[data-theme=dark] .badge.violet,:root[data-theme=auto] body.dark .badge.violet{color:#c4b5fd}
:root[data-theme=dark] .badge.brand,:root[data-theme=auto] body.dark .badge.brand{color:#a5b4fc}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-full);font-size:.86rem;background:var(--surface);color:var(--ink-2)}
.chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- แจ้งเตือน ---------- */
.alert{
  display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);margin-bottom:14px;font-size:.93rem
}
.alert .ico{flex:none;font-size:1.1rem;line-height:1.4}
.alert.success{background:var(--ok-50);border-color:var(--ok-500);color:var(--ok-700)}
.alert.error{background:var(--bad-50);border-color:var(--bad-500);color:var(--bad-700)}
.alert.warn{background:var(--warn-50);border-color:var(--warn-500);color:var(--warn-700)}
.alert.info{background:var(--info-50);border-color:var(--info-500);color:var(--info-600)}
.alert b{font-weight:700}

#toasts{position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:200;display:flex;
  flex-direction:column;gap:9px;max-width:min(92vw,380px)}
.toast{
  background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--brand-500);
  border-radius:var(--r);box-shadow:var(--shadow-pop);padding:11px 14px;font-size:.92rem;
  animation:slideIn .22s var(--ease)
}
.toast.ok{border-inline-start-color:var(--ok-500)}
.toast.bad{border-inline-start-color:var(--bad-500)}
.toast.out{animation:slideOut .2s var(--ease) forwards}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}}
@keyframes slideOut{to{opacity:0;transform:translateX(24px)}}

/* ---------- หัวหน้า/เส้นทาง ---------- */
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{margin:0;font-size:1.45rem;display:flex;align-items:center;gap:9px}
.page-head .sub{color:var(--ink-3);font-size:.92rem;margin-top:2px}
.page-head .actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.page-head>.ico-box{margin-top:2px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-3);margin-bottom:8px;flex-wrap:wrap}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--brand-600)}
.crumbs span.sep{opacity:.5}

/* ---------- แท็บย่อยในห้องเรียน ---------- */
.subnav{display:flex;gap:3px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:18px;
  scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;color:var(--ink-3);font-weight:600;font-size:.92rem;white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:-1px
}
.subnav a .i{opacity:.72}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a:hover .i{opacity:1}
.subnav a.on{color:var(--brand-600);border-bottom-color:var(--brand-600)}
.subnav a.on .i{opacity:1}

/* ---------- สถิติ ---------- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden}
.stat .k{font-size:.8rem;color:var(--ink-3);font-weight:600;display:flex;align-items:center;gap:6px}
.stat .k .i{color:var(--ink-4)}
.stat .v{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.stat .m{font-size:.8rem;color:var(--ink-3)}
.stat.ok .v{color:var(--ok-600)} .stat.warn .v{color:var(--warn-600)}
.stat.bad .v{color:var(--bad-600)} .stat.brand .v{color:var(--brand-600)}
.stat.ok .k .i{color:var(--ok-500)} .stat.warn .k .i{color:var(--warn-500)}
.stat.bad .k .i{color:var(--bad-500)} .stat.brand .k .i{color:var(--brand-500)}

/* ---------- การ์ดทางลัด (ไอคอน + ชื่อ + คำอธิบาย) ---------- */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr))}
.tiles>*{min-width:0}
.tile{
  display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
  color:inherit;transition:.18s var(--ease)
}
.tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-3);
  border-color:var(--brand-200)}
.tile>*{min-width:0}
.tile .tt{font-weight:700;font-size:.99rem;line-height:1.35;display:block}
/* ต้องเป็นบล็อกและกันล้น ไม่งั้นชื่อไฟล์ยาว ๆ จะดันการ์ดจนหน้าเลื่อนออกข้าง */
.tile .td{display:block;font-size:.84rem;color:var(--ink-3);margin-top:3px;line-height:1.5;
  min-width:0;max-width:100%;overflow:hidden}
.tile.on{border-color:var(--brand-400);background:var(--brand-50)}
.tile .pick{margin-inline-start:auto;align-self:center;color:var(--ink-4)}
.tile:hover .pick{color:var(--brand-500)}

/* เลขขั้นตอนบนหัวการ์ด — บอกลำดับให้ฟอร์มยาว ๆ อ่านง่าย */
.step-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--brand-600);color:#fff;font-weight:800;font-size:.85rem;font-variant-numeric:tabular-nums}

/* ---------- การ์ดตัวเลือก (เลือกได้ 1 อย่าง) ----------
   ใช้กับ: ประเภทงาน, ชนิดกิจกรรม และทุกที่ที่ต้องเลือก 1 จากหลายแบบที่ต่างกันมาก
   โครง:  .choice-group > .choice-label + .choice-grid > label.choice > input + .ico-box + .cb
   สถานะที่เลือกใช้ :has(:checked) ล้วน ๆ ไม่ต้องพึ่ง JS
   ปุ่มวิทยุยังอยู่ในหน้า (ซ่อนด้วยสายตา) จึงกด Tab / ลูกศรเลือกได้ตามปกติ */
.choice-group+.choice-group{margin-top:16px}
.choice-label{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.02em;margin:0 0 8px}
.choice-label::after{content:"";flex:1;height:1px;background:var(--line)}
.choice-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.choice-grid>*{min-width:0}
.choice{
  position:relative;display:flex;gap:12px;align-items:flex-start;padding:13px 14px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  transition:border-color .14s var(--ease),background .14s var(--ease),box-shadow .14s var(--ease)
}
.choice:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.choice>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.choice .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-inline-end:22px}
.choice .ct{font-weight:700;font-size:.97rem;line-height:1.35;color:var(--ink)}
.choice .cd{font-size:.83rem;color:var(--ink-3);line-height:1.55}
.choice .cn{display:none;align-items:center;gap:5px;margin-top:5px;font-size:.78rem;font-weight:600;
  color:var(--brand-700)}
/* วงกลมมุมขวาบน: ว่างตอนยังไม่เลือก เป็นเครื่องหมายถูกตอนเลือก */
.choice::after{
  content:"";position:absolute;top:12px;inset-inline-end:12px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--line-2);background:var(--surface);transition:.14s var(--ease)
}
.choice:has(input:checked),.choice.on{border-color:var(--brand-500);background:var(--brand-50);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 14%,transparent)}
.choice:has(input:checked)::after,.choice.on::after{
  border-color:var(--brand-600);background:var(--brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat
}
.choice:has(input:checked) .cn,.choice.on .cn{display:flex}
/* แบบเลือกได้หลายอัน (checkbox) — มุมเป็นสี่เหลี่ยมมน ให้ต่างจากแบบเลือกอันเดียว */
.choice-check::after{border-radius:6px}
.choice:has(input:focus-visible){box-shadow:var(--ring)}
.choice:has(input:disabled){opacity:.55;cursor:not-allowed}

/* ---------- การ์ดใบงานในคลังกลาง ---------- */
/* แถบชวนไปคลังใบงาน (หน้าใบงานของห้อง) */
.lib-cta{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);text-decoration:none;
  color:var(--ink);background:linear-gradient(120deg,var(--brand-50),var(--surface) 70%);
  border:1.5px solid color-mix(in srgb,var(--brand-500) 30%,var(--line));transition:box-shadow .14s var(--ease)}
.lib-cta:hover{box-shadow:var(--shadow-2);text-decoration:none}
.lib-cta .f1{display:flex;flex-direction:column;gap:2px;min-width:0}
.lib-cta b{font-size:1rem}
@media (max-width:600px){.lib-cta{flex-wrap:wrap}.lib-cta>.btn{width:100%;justify-content:center}}
.sheet-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.sheet-grid>*{min-width:0}
.sheet-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1);transition:.16s var(--ease)}
.sheet-card:hover{box-shadow:var(--shadow-3);border-color:var(--line-2)}
.sc-top{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 10px;color:inherit}
.sc-top:hover{text-decoration:none}
.sc-top:hover .sc-title{color:var(--brand-600)}
.sc-title{display:block;font-weight:700;font-size:1rem;line-height:1.4;color:var(--ink)}
.sc-meta{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.sc-stats{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:0 14px 12px;font-size:.84rem;
  color:var(--ink-3)}
.sc-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.sc-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);
  background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);margin-top:auto}

/* แถบสถานะเวอร์ชันของต้นฉบับ */
.ver{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;padding:2px 8px;
  border-radius:var(--r-full);background:var(--surface-3);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- ตัวเลือกบทในหน้าต่างดึงข้อสอบจากคลังความรู้ ---------- */
.kp-docs{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.kp-doc{display:flex;flex-direction:column;gap:2px;text-align:start;padding:10px 12px;font:inherit;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink);
  transition:.14s var(--ease)}
.kp-doc:hover{border-color:var(--brand-400);background:var(--brand-50)}
.kp-doc b{font-size:.92rem;line-height:1.4}
.kp-doc[data-empty]{opacity:.7}
.kp-list{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 10px;
  background:var(--surface-2)}
.kp-list .check{padding:6px 0;border-bottom:1px solid var(--line)}
.kp-list .check:last-child{border-bottom:0}
.p20{padding:20px}
/* การ์ดพับได้ (เคล็ดลับในตัวสร้าง) */
details.card>summary{list-style:none;cursor:pointer}
details.card>summary::-webkit-details-marker{display:none}
details.card:not([open])>summary{border-bottom:0}
details.card[open]>summary .i:last-child{transform:rotate(180deg)}

/* ---------- ตัวเลือกแบบปุ่มติดกัน ---------- */
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-full);padding:3px;gap:2px}
.seg a,.seg button{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;
  font-size:.87rem;font-weight:600;color:var(--ink-3);padding:5px 13px;border-radius:var(--r-full);
  cursor:pointer;white-space:nowrap
}
.seg a:hover,.seg button:hover{color:var(--ink);text-decoration:none}
.seg a.on,.seg button.on{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-1)}
/* แบบปุ่มวิทยุในฟอร์ม: <label><input type=radio><span>…</span></label> */
.seg>label{position:relative;display:inline-flex;margin:0;cursor:pointer}
.seg>label>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg>label>span{display:inline-flex;align-items:center;gap:6px;font-size:.87rem;font-weight:600;color:var(--ink-3);
  padding:6px 14px;border-radius:var(--r-full);white-space:nowrap;transition:.12s var(--ease)}
.seg>label:hover>span{color:var(--ink)}
.seg>label>input:checked+span{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-1)}
.seg>label>input:focus-visible+span{outline:2px solid var(--brand-500);outline-offset:1px}
@media (max-width:520px){.seg.full-sm{display:flex}.seg.full-sm>label{flex:1}.seg.full-sm>label>span{flex:1;justify-content:center}}

/* ---------- การ์ดห้องเรียน ---------- */
.classes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.cc{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1);transition:.18s var(--ease)}
.cc:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.cc .cover{height:70px;position:relative;display:flex;align-items:flex-end;padding:10px 14px;color:#fff}
.cc .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.08),rgba(0,0,0,.3))}
.cc .cover>*{position:relative;z-index:1}
.cc .cover .t{font-weight:700;font-size:1.02rem;text-shadow:0 1px 3px rgba(0,0,0,.35);line-height:1.25}
.cc .body{padding:12px 14px;flex:1;display:flex;flex-direction:column;gap:9px}
.cc .meta{display:flex;flex-wrap:wrap;gap:6px}
.cc .foot{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2)}
/* 1.7.7: บรรทัดสถานะเช็คชื่อตามตารางเรียน */
.cc .day-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.linkish{background:none;border:0;padding:0;color:var(--brand-600);font:inherit;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px}
.linkish:hover{color:var(--brand-700)}
form.inline{display:inline}
.dow-pick{display:flex;flex-wrap:wrap;gap:6px}
.dow-pick label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 10px;
  border:1px solid var(--line-2,var(--line));border-radius:10px;cursor:pointer;font-weight:600;background:var(--surface);
  user-select:none}
.dow-pick input{position:absolute;opacity:0;pointer-events:none}
.dow-pick label:has(input:checked){background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.dow-pick label:has(input:focus-visible){outline:2px solid var(--brand-400);outline-offset:2px}
.off-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}
.off-list .row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:var(--surface-2)}
.c-indigo{background:linear-gradient(135deg,#6366f1,#4338ca)}
.c-sky{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.c-emerald{background:linear-gradient(135deg,#34d399,#047857)}
.c-amber{background:linear-gradient(135deg,#fbbf24,#b45309)}
.c-rose{background:linear-gradient(135deg,#fb7185,#be123c)}
.c-violet{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.c-teal{background:linear-gradient(135deg,#2dd4bf,#0f766e)}
.c-slate{background:linear-gradient(135deg,#94a3b8,#334155)}

/* ---------- เช็คชื่อ ---------- */
.att-list{display:flex;flex-direction:column;gap:7px}
.att-row{
  display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;
  transition:.15s var(--ease)
}
.att-row.done{border-color:color-mix(in srgb,var(--line) 70%,var(--brand-300))}
.att-row .no{
  width:34px;height:34px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center;
  font-weight:800;color:var(--ink-2);font-size:.9rem;font-variant-numeric:tabular-nums
}
.att-row .nm{min-width:0}
.att-row .nm b{display:block;font-weight:600;font-size:.97rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-row .nm small{color:var(--ink-3)}
.att-opts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.att-opt{
  border:1.5px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:5px 11px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;color:var(--ink-3);
  transition:.12s var(--ease);min-width:46px
}
.att-opt:hover{border-color:var(--ink-4)}
.att-opt[data-s=present].on{background:var(--ok-600);border-color:var(--ok-600);color:#fff}
.att-opt[data-s=late].on{background:var(--warn-500);border-color:var(--warn-500);color:#fff}
.att-opt[data-s=absent].on{background:var(--bad-600);border-color:var(--bad-600);color:#fff}
.att-opt[data-s=sick].on{background:var(--info-500);border-color:var(--info-500);color:#fff}
.att-opt[data-s=leave].on{background:var(--violet-500);border-color:var(--violet-500);color:#fff}
@media(max-width:640px){
  .att-row{grid-template-columns:34px 1fr}
  .att-opts{grid-column:1/-1;justify-content:stretch}
  .att-opt{flex:1;min-width:0}
}

/* ---------- สมุดคะแนน ---------- */
.gb{font-size:.86rem}
.gb th,.gb td{padding:5px 7px;border:1px solid var(--line);white-space:nowrap}
.gb thead th{background:var(--surface-3);font-size:.76rem;text-align:center;vertical-align:bottom}
.gb .bk-pre{background:color-mix(in srgb,var(--info-100) 55%,var(--surface-3))}
.gb .bk-mid{background:color-mix(in srgb,var(--warn-100) 55%,var(--surface-3))}
.gb .bk-post{background:color-mix(in srgb,var(--violet-100) 55%,var(--surface-3))}
.gb .bk-final{background:color-mix(in srgb,var(--ok-100) 55%,var(--surface-3))}
.gb td.sc{text-align:center;font-variant-numeric:tabular-nums;cursor:pointer;min-width:46px;position:relative}
.gb td.sc:hover{outline:2px solid var(--brand-400);outline-offset:-2px}
.gb td.c-good{background:var(--ok-100);color:var(--ok-700);font-weight:700}
.gb td.c-warn{background:var(--warn-100);color:var(--warn-700);font-weight:700}
.gb td.c-low{background:color-mix(in srgb,var(--warn-100) 60%,var(--bad-100));color:var(--warn-700);font-weight:700}
.gb td.c-bad{background:var(--bad-100);color:var(--bad-700);font-weight:700}
.gb td.c-dim{background:var(--surface-3);color:var(--ink-4)}
.gb td.sum{background:var(--surface-3);font-weight:800;text-align:center}
.gb td.total{background:var(--brand-100);color:var(--brand-800);font-weight:800;text-align:center}
.gb td.grade{font-weight:800;text-align:center}
.gb .late::after{
  content:"";position:absolute;top:1px;inset-inline-end:1px;width:0;height:0;
  border-top:7px solid var(--warn-500);border-inline-start:7px solid transparent
}
.gb input.cell{
  width:100%;border:0;background:transparent;text-align:center;font:inherit;font-weight:700;padding:2px;
  color:inherit
}
.gb input.cell:focus{background:var(--surface);box-shadow:var(--ring);border-radius:4px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.83rem;color:var(--ink-3);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:5px;vertical-align:-2px}

/* ---------- แถบความคืบหน้า ---------- */
.bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-500),var(--violet-500));
  transition:width .5s var(--ease)}
.bar.ok>i{background:linear-gradient(90deg,var(--ok-500),var(--ok-600))}
.bar.warn>i{background:linear-gradient(90deg,var(--warn-500),var(--warn-600))}
.bar.bad>i{background:linear-gradient(90deg,var(--bad-500),var(--bad-600))}
.bar.lg{height:13px}

/* ---------- โมดัล ---------- */
.modal{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal::before{content:"";position:absolute;inset:0;background:rgba(15,20,35,.55);backdrop-filter:blur(3px);
  animation:fade .18s}
.modal-box{
  position:relative;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);
  width:min(100%,620px);max-height:88vh;display:flex;flex-direction:column;animation:zoom .2s var(--ease);
  border:1px solid var(--line)
}
.modal-box.wide{width:min(100%,980px)}
/* 1.7.7: ฟอร์มที่ห่อหัว/เนื้อ/ท้ายไว้ ต้องส่งความสูงจำกัดต่อลงมา ไม่งั้นเนื้อหาล้นกล่องและเลื่อนไม่ได้ */
.modal-box{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.modal-box > form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.modal-h,.modal-f{flex:none}
.modal-h{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-h h3{margin:0;min-width:0;overflow-wrap:anywhere}
.modal-b{padding:18px;overflow:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain}
.modal-f{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;
  background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);flex-wrap:wrap}
@keyframes fade{from{opacity:0}}
@keyframes zoom{from{opacity:0;transform:scale(.96) translateY(10px)}}

/* ---------- ว่างเปล่า / โหลด ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty .ico{font-size:2.6rem;opacity:.5;margin-bottom:8px}
.empty h3{color:var(--ink-2)}
.empty .ico-box{margin:0 auto 12px;width:58px;height:58px;border-radius:18px;background:var(--grad-soft);
  color:var(--brand-600)}
.empty .ico-box .i{width:28px;height:28px}
.spin{width:17px;height:17px;border:2.5px solid var(--brand-200);border-top-color:var(--brand-600);
  border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));
  background-size:200% 100%;animation:sk 1.3s linear infinite;border-radius:6px;height:1em}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- ยูทิลิตี้ ---------- */
.flex{display:flex} .col{flex-direction:column} .wrapf{flex-wrap:wrap}
.ai-c{align-items:center} .ai-s{align-items:flex-start} .ai-e{align-items:flex-end}
.jc-b{justify-content:space-between} .jc-c{justify-content:center} .jc-e{justify-content:flex-end}
.g2{gap:2px}.g4{gap:4px} .g6{gap:6px} .g8{gap:8px} .g10{gap:10px} .g12{gap:12px} .g14{gap:14px} .g18{gap:18px}
.f1{flex:1;min-width:0} .fn{flex:none}
/* ระยะห่าง: สเกลครบชุด 0–32px (หน้าเดิมเรียก mt10/mb14 ฯลฯ ที่ไม่มีอยู่จริง เนื้อหาเลยชิดกัน) */
.mt0{margin-top:0px} .mt2{margin-top:2px} .mt4{margin-top:4px} .mt6{margin-top:6px} .mt8{margin-top:8px} .mt10{margin-top:10px} .mt12{margin-top:12px} .mt14{margin-top:14px} .mt16{margin-top:16px} .mt20{margin-top:20px} .mt24{margin-top:24px} .mt28{margin-top:28px} .mt32{margin-top:32px}
.mb0{margin-bottom:0px} .mb2{margin-bottom:2px} .mb4{margin-bottom:4px} .mb6{margin-bottom:6px} .mb8{margin-bottom:8px} .mb10{margin-bottom:10px} .mb12{margin-bottom:12px} .mb14{margin-bottom:14px} .mb16{margin-bottom:16px} .mb20{margin-bottom:20px} .mb24{margin-bottom:24px} .mb28{margin-bottom:28px} .mb32{margin-bottom:32px}
.ms-auto{margin-inline-start:auto}
.muted{color:var(--ink-3)} .dim{color:var(--ink-4)}
.sm{font-size:.86rem} .xs{font-size:.78rem} .lg{font-size:1.08rem}
.b{font-weight:700} .b6{font-weight:600} .n{font-weight:400}
.ok-t{color:var(--ok-600)} .warn-t{color:var(--warn-600)} .bad-t{color:var(--bad-600)}
.brand-t{color:var(--brand-600)}
.nums{font-variant-numeric:tabular-nums}
.center{text-align:center} .end{text-align:end}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill-sum{display:inline-flex;gap:0;border-radius:var(--r-full);overflow:hidden;border:1px solid var(--line);font-size:.78rem}
.pill-sum b{padding:2px 9px;font-weight:700}
.pill-sum b.p{background:var(--ok-100);color:var(--ok-700)}
.pill-sum b.l{background:var(--warn-100);color:var(--warn-700)}
.pill-sum b.a{background:var(--bad-100);color:var(--bad-700)}
.pill-sum b.s{background:var(--info-100);color:var(--info-600)}
.pill-sum b.k{background:var(--violet-100);color:var(--violet-600)}
.grid-2{display:grid;gap:16px;grid-template-columns:1.6fr 1fr}
@media(max-width:960px){.grid-2{grid-template-columns:1fr}}

/* ---------- โครงหน้าแบบมีแถบข้าง ----------
   .split-r = เนื้อหาหลัก + แถบเครื่องมือด้านขวา (ตัวสร้างใบงาน, หน้าเล่นกิจกรรม)
   .split-l = แถบรายการด้านซ้าย + เนื้อหาหลัก (จัดกลุ่ม, ใบประกาศ)
   .sticky-side = แถบข้างค้างอยู่ใต้หัวเว็บตอนเลื่อน */
.split-r{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.split-l{display:grid;gap:18px;grid-template-columns:360px minmax(0,1fr);align-items:start}
.split-r>*,.split-l>*{min-width:0}
.sticky-side{position:sticky;top:calc(var(--header-h) + 14px);max-height:calc(100vh - var(--header-h) - 28px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:1060px){
  .split-r,.split-l{grid-template-columns:1fr}
  .sticky-side{position:static;max-height:none;overflow:visible}
}

/* ช่องกรอกตัวเลขในตาราง (คะแนนรายคน, น้ำหนักช่วงคะแนน) */
.score-in,.w-in{width:84px;padding:6px 8px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.w-in{width:76px}
.late-min{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--warn-700)}
.late-min input{width:62px;padding:3px 6px;text-align:center}
.no-cell{font-variant-numeric:tabular-nums}
.ws-wc{font-size:.78rem;color:var(--ink-3)}
.ws-bgpage canvas{display:block;max-width:100%;height:auto}
/* ช่องตัวเลขบนหัวการ์ดข้อ: มีป้ายกำกับเล็ก ๆ ไม่ให้สับสนว่าช่องไหนคือคะแนน ช่องไหนคือหน้า */
.bd-num{display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin:0}
.bd-num>span{font-size:.68rem;font-weight:600;color:var(--ink-4);line-height:1}
.bd-num input{width:66px;padding:4px 6px;text-align:center;font-weight:700}
.bd-num .bd-page{width:54px}

/* กันกริดบานออกเพราะเนื้อหายาวตัดบรรทัดไม่ได้ (สำคัญกับจอมือถือ) */
.grid-2>*,.row>*,.row-2>*,.row-3>*,.stats>*,.classes>*{min-width:0}
.drag-handle{cursor:grab;color:var(--ink-4);user-select:none;touch-action:none}
.drag-handle:active{cursor:grabbing}
.sortable-ghost{opacity:.35}
.sortable-chosen{box-shadow:var(--shadow-3)}

@media(max-width:860px){
  body{font-size:15px}
  .nav{display:none}
  .top .burger{display:inline-flex}
  .page-head .actions{width:100%;margin-inline-start:0}
  h1{font-size:1.3rem}
  .tiles{grid-template-columns:1fr}
}
@media(max-width:600px){.hide-sm{display:none!important}}

/* ---------- ตารางคู่คีย์-ค่า (ใช้ในหน้าตรวจสอบ/สรุป) ---------- */
.kv{width:100%;border-collapse:collapse}
.kv th,.kv td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.kv th{width:36%;font-weight:600;color:var(--ink-3);font-size:.86rem;white-space:nowrap}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
@media(max-width:520px){
  .kv th,.kv td{display:block;width:auto;border-bottom:0;padding:6px 10px 0}
  .kv td{padding-bottom:8px;border-bottom:1px solid var(--line)}
}

/* ---------- พิมพ์ ---------- */
@media print{
  .top,.subnav,.no-print,#toasts,.btn,.card-f,.drawer{display:none!important}
  body{background:#fff;font-size:11.5px}
  .card{border:0;box-shadow:none}
  .table-wrap{overflow:visible;border:0}
  table{font-size:10.5px}
  thead th{position:static;background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gb td,.gb th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4 landscape;margin:10mm}
  .portrait{page-break-before:auto}
}

/* =====================================================================
   สตูดิโอความรู้ (เฟส 6) — หน้าแรกของบท + ผังความคิด คำถาม ใบสรุป บัตรคำ ไอเดียกิจกรรม
   ===================================================================== */
.print-only{display:none}

/* ---------- หัวบท ---------- */
.kn-head{overflow:hidden}
.kn-band{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;color:#fff}
.kn-band::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,.05),rgba(0,0,0,.24));pointer-events:none}
.kn-band>*{position:relative;z-index:1}
.kn-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.kn-meta{font-size:.8rem;font-weight:600;opacity:.92;letter-spacing:.01em}
.kn-title{margin:1px 0 0;font-size:1.32rem;line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.kn-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.kn-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.76rem;
  font-weight:700;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);white-space:nowrap}
.kn-tabs{margin:0;border-bottom:0;padding:0 8px}
.kn-tabs a .badge{font-size:.7rem;padding:1px 7px}
@media (max-width:640px){.kn-band{flex-wrap:wrap}.kn-chips{width:100%;justify-content:flex-start}.kn-title{font-size:1.15rem}}

/* ---------- หน้าแรกสตูดิโอ ---------- */
.studio{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 370px;align-items:start}
.studio-main{grid-column:1;grid-row:1;min-width:0}
.studio-side{grid-column:2;grid-row:1;position:sticky;top:calc(var(--header-h) + 14px);display:flex;flex-direction:column;gap:10px}
@media (max-width:980px){
  .studio{grid-template-columns:1fr}
  .studio-side{grid-column:1;grid-row:1;position:static}
  .studio-main{grid-row:2}
}
.stools{display:flex;flex-direction:column;padding:6px}
.stool{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r);color:var(--ink);text-decoration:none;
  transition:background .12s var(--ease)}
.stool:hover{background:var(--surface-3);text-decoration:none}
.stool .st-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.stool .st-b b{font-size:.95rem}
.stool .st-b small{font-size:.78rem;color:var(--ink-3);line-height:1.45}
.stool .st-n{font-size:.76rem;font-weight:700;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.stools-sep{font-size:.72rem;font-weight:700;color:var(--ink-4);letter-spacing:.04em;padding:10px 10px 2px;
  border-top:1px solid var(--line);margin-top:6px}
.studio-note{display:flex;gap:6px;align-items:flex-start;line-height:1.55;padding:0 6px}
.studio-note .i{flex:none;margin-top:2px}

.srcs{display:flex;flex-direction:column}
.src{border-top:1px solid var(--line)}
.src>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.src>summary::-webkit-details-marker{display:none}
.src>summary:hover{background:var(--surface-2)}
.src-no{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:.8rem;font-weight:800;
  background:var(--brand-50);color:var(--brand-700);font-variant-numeric:tabular-nums}
.src-t{flex:1;min-width:0;font-weight:700}
.src-c{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.src-chev{color:var(--ink-4);transition:transform .15s var(--ease);display:inline-flex}
.src[open] .src-chev{transform:rotate(180deg)}
.src-b{padding:2px 16px 16px 54px}
@media (max-width:600px){.src-b{padding-left:16px}}
.src-pts{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:5px;line-height:1.7}
.src-pts li::marker{color:var(--brand-500)}
.src-steps{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:10px}
.src-steps ol{margin:6px 0 0;padding-left:20px;line-height:1.65}
.tdl{display:grid;gap:6px;margin:0 0 10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.tdl>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:var(--surface)}
.tdl dt{font-weight:700;font-size:.92rem}
.tdl dt small{font-weight:500;color:var(--ink-3);font-size:.76rem}
.tdl dd{margin:2px 0 0;font-size:.84rem;color:var(--ink-2);line-height:1.55}
.src-go{display:flex;flex-wrap:wrap;gap:4px;margin-left:-8px}

/* ---------- แถบเครื่องมือของแต่ละหน้า ---------- */
.tool-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tool-seg{overflow-x:auto;max-width:100%;scrollbar-width:none}
.tool-seg::-webkit-scrollbar{display:none}
@media (max-width:760px){.tool-seg a span{display:none}.tool-seg a{padding:6px 11px}}
.scope{position:relative;margin-left:auto}
.scope>summary{list-style:none}
.scope>summary::-webkit-details-marker{display:none}
.scope-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(340px,86vw);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:12px}
.scope-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.scope-list .check{padding:5px 4px;border-radius:7px;align-items:flex-start}
.scope-list .check:hover{background:var(--surface-3)}
.scope-list .check span{font-size:.86rem;line-height:1.45}

/* ---------- ผังความคิด ---------- */
.mm-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.switch.sm i{width:34px;height:20px}
.switch.sm i::after{width:14px;height:14px}
.switch.sm input:checked+i::after{transform:translateX(14px)}
.mm-stage{position:relative;height:min(72vh,760px);min-height:420px;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;cursor:grab;touch-action:none;outline:none;
  background:var(--surface-2) radial-gradient(circle,var(--line) 1px,transparent 1.2px) 0 0/22px 22px}
.mm-stage:focus-visible{box-shadow:var(--ring)}
.mm-stage.dragging{cursor:grabbing}
.mm-stage:fullscreen{height:100vh;border-radius:0;border:0}
#mm-svg{width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.mm-node{cursor:pointer}
.mm-node:hover rect:first-child{filter:brightness(1.04)}
.mm-hint{position:absolute;left:12px;bottom:10px;font-size:.74rem;color:var(--ink-3);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;display:flex;gap:5px;align-items:center;pointer-events:none}
.mm-info{position:absolute;top:12px;right:12px;width:min(320px,calc(100% - 24px));background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-3);padding:12px 14px;cursor:auto}
.mm-x{position:absolute;top:6px;right:6px;border:0;background:none;color:var(--ink-3);cursor:pointer;padding:4px;border-radius:6px}
.mm-x:hover{background:var(--surface-3)}
.mm-k{font-size:.72rem;font-weight:800;letter-spacing:.03em}
.mm-t{font-weight:700;font-size:1rem;margin:1px 22px 4px 0;line-height:1.4}
.mm-t small{font-weight:500;color:var(--ink-3);font-size:.8rem}
.mm-d{font-size:.88rem;color:var(--ink-2);line-height:1.65}
.mm-src{font-size:.76rem;color:var(--ink-3);margin-top:6px;display:flex;gap:5px;align-items:center}

/* ---------- คำถามชวนคิด ---------- */
.q-head,.fc-bar,.sum-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lv-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.lv-chip{padding:5px 13px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);text-decoration:none}
.lv-chip:hover{border-color:var(--line-2);text-decoration:none}
.lv-chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.lv-chip.t-info.on{background:var(--info-600);border-color:var(--info-600)}
.lv-chip.t-ok.on{background:var(--ok-600);border-color:var(--ok-600)}
.lv-chip.t-warn.on{background:var(--warn-600);border-color:var(--warn-600)}
.lv-chip.t-bad.on{background:var(--bad-600);border-color:var(--bad-600)}
.lv-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--brand-500);flex:none}
.lv-dot.t-info{background:var(--info-500)}.lv-dot.t-ok{background:var(--ok-500)}.lv-dot.t-warn{background:var(--warn-500)}
.lv-dot.t-bad{background:var(--bad-500)}
.q-lv{margin-bottom:16px}
.q-lv-h{display:flex;align-items:center;gap:8px;font-size:1rem;margin:0 0 8px}
.q-lv-h small{font-weight:500;color:var(--ink-3);font-size:.8rem}
.q-item{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 12px 12px 10px;margin-bottom:8px;transition:opacity .15s}
.q-item.q-off{opacity:.5}
.q-pick{padding:2px 2px 0;cursor:pointer}
.q-pick input{width:18px;height:18px}
.q-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:.82rem;
  background:var(--surface-3);color:var(--ink-2)}
.q-body{flex:1;min-width:0}
.q-text{font-size:.98rem;line-height:1.7;font-weight:500}
.q-ref{font-size:.76rem;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:4px}
.q-guide{margin-top:6px}
.q-guide>summary{cursor:pointer;font-size:.78rem;font-weight:600;color:var(--brand-700);display:inline-flex;gap:4px;align-items:center}
.q-guide>div{margin-top:5px;font-size:.86rem;line-height:1.6;color:var(--ink-2);background:var(--warn-50);
  border:1px dashed var(--warn-500);border-radius:var(--r-sm);padding:8px 11px}
.q-actions{margin-top:16px}

/* ---------- ใบสรุป (กระดาษ A4) ---------- */
.paper{background:#fff;color:#111827;max-width:210mm;margin:0 auto 18px;padding:16mm 15mm 12mm;border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 12px 32px -12px rgba(0,0,0,.18);font-size:14.5px;line-height:1.7}
@media (max-width:700px){.paper{padding:18px 14px;font-size:13.5px}}
.pp-h{border-bottom:2px solid #111827;padding-bottom:8px;margin-bottom:12px}
.pp-meta{font-size:.82em;color:#4b5563}
.pp-t{font-size:1.32em;margin:2px 0 0;color:#111827;line-height:1.4}
.pp-name{margin-top:8px;font-size:.92em;display:flex;flex-wrap:wrap;gap:4px 14px}
.pp-name span{color:#4b5563;font-size:.92em}
.pp-sec{margin-bottom:12px;break-inside:avoid-page}
.pp-sec h2{font-size:1.06em;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:#111827}
.pp-no{width:22px;height:22px;border-radius:6px;background:#111827;color:#fff;display:inline-grid;place-items:center;
  font-size:.8em;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-pts{margin:0 0 6px;padding-left:22px}
.pp-pts li{margin-bottom:2px}
.pp-steps{margin:2px 0 6px 0;padding:6px 10px;border-left:3px solid #9ca3af;background:#f9fafb}
.pp-steps ol{margin:2px 0 0;padding-left:20px}
.pp-terms{width:100%;border-collapse:collapse;font-size:.92em;margin-top:4px}
.pp-terms th,.pp-terms td{border:1px solid #d1d5db;padding:5px 8px;text-align:left;vertical-align:top}
.pp-terms th{background:#f3f4f6;font-weight:700;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pp-alias{font-size:.85em;color:#6b7280}
.blank{display:inline-block;min-width:92px;border-bottom:1.5px dotted #374151;text-align:center;line-height:1.3;margin:0 2px}
.blank.wide{min-width:150px}
.blank i{font-style:normal;font-size:.7em;color:#6b7280;vertical-align:super}
.pp-bank{border:1.5px dashed #6b7280;border-radius:8px;padding:8px 12px;margin-top:12px;break-inside:avoid}
.pp-bank>div{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px}
.pp-f{margin-top:14px;padding-top:6px;border-top:1px solid #e5e7eb;font-size:.75em;color:#9ca3af;text-align:right}
.pp-key{break-before:page}
.pp-keylist{columns:3;column-gap:24px;padding-left:28px}

/* ---------- บัตรคำ ---------- */
.fc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-1)}
.fc:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:4vh 6vw;border-radius:0}
.fc-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fc-prog{flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fc-prog i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .25s var(--ease)}
.fc-stage{perspective:1600px;display:grid;place-items:center}
.fc-card{width:min(640px,100%);height:clamp(240px,46vh,380px);cursor:pointer;outline:none;border-radius:20px}
.fc:fullscreen .fc-card{width:min(1000px,100%);height:min(60vh,600px)}
.fc-card:focus-visible{box-shadow:var(--ring)}
.fc-in{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.fc-card.flip .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 30px;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow-3);overflow:auto}
.fc-front{background:linear-gradient(160deg,var(--surface),var(--surface-2))}
.fc-back{background:linear-gradient(160deg,var(--brand-50),var(--surface));transform:rotateY(180deg)}
.fc-card[data-mark=ok] .fc-face{border-color:var(--ok-500)}
.fc-card[data-mark=again] .fc-face{border-color:var(--warn-500)}
.fcx-k{font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--brand-600);text-transform:uppercase}
.fcx-main{font-size:clamp(1.5rem,4.2vw,2.5rem);font-weight:800;line-height:1.3;color:var(--ink)}
.fc:fullscreen .fcx-main{font-size:clamp(2rem,5.5vw,4rem)}
.fcx-sub{font-size:1rem;color:var(--ink-3);font-weight:600}
.fcx-def{font-size:clamp(1.02rem,2.4vw,1.35rem);line-height:1.7;color:var(--ink);max-width:36em}
.fc:fullscreen .fcx-def{font-size:clamp(1.3rem,3vw,2rem)}
.fcx-list{text-align:left;font-size:1.05rem;line-height:1.75;margin:0;padding-left:24px;color:var(--ink)}
.fcx-mod{position:absolute;bottom:12px;left:0;right:0;font-size:.76rem;color:var(--ink-4);display:flex;gap:5px;
  justify-content:center;align-items:center}
.fc-done{text-align:center;padding:30px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:240px;justify-content:center}
.fc-done h3{margin:6px 0 0}
.fc-ctrl{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.fc-ctrl .fc-ok{color:var(--ok-700);border-color:color-mix(in srgb,var(--ok-500) 45%,var(--line))}
.fc-ctrl .fc-again{color:var(--warn-700);border-color:color-mix(in srgb,var(--warn-500) 45%,var(--line))}
.fc-opts{display:flex;align-items:center;gap:4px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}

/* ---------- ไอเดียกิจกรรม ---------- */
.idea-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));align-items:start}
.idea{display:flex;flex-direction:column}
.idea-h{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 4px}
.idea-h h3{margin:0;font-size:1.04rem;line-height:1.35}
.idea-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3);margin-top:3px}
.idea-meta span{display:inline-flex;gap:4px;align-items:center}
.idea-b{padding:4px 16px 12px}
.idea-goal{margin:4px 0 8px;font-size:.88rem;color:var(--ink-2);display:flex;gap:6px;align-items:flex-start;line-height:1.55}
.idea-goal .i{flex:none;margin-top:3px;color:var(--brand-600)}
.idea-sec{font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--ink-4);margin:10px 0 4px}
.idea-steps{margin:0;padding-left:20px;font-size:.9rem;line-height:1.65;display:flex;flex-direction:column;gap:3px}
.idea-uses{margin:0;padding:8px 10px 8px 26px;font-size:.84rem;line-height:1.6;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2)}
.idea-mat{margin:0;padding-left:20px;font-size:.86rem;line-height:1.6;color:var(--ink-2)}
.idea-f{padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2);margin-top:auto;
  border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- พิมพ์ ---------- */
@media print{
  .print-only{display:block!important}
  .kn-head,.tool-bar,.mm-tools,.mm-hint,.mm-info,.crumbs{display:none!important}
  main .wrap{max-width:none!important;padding:0!important}
  /* ผังความคิด: พิมพ์จากสำเนาที่พอดีภาพ */
  .mm-stage{display:none!important}
  #mm-print{display:block!important;width:100%;height:160mm;break-before:avoid}
  .mm-wrap{break-inside:avoid}
  .mm-print-h{display:flex!important;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;font-size:12px;margin-bottom:4mm}
  /* คำถาม */
  .q-head,.lv-chips,.q-pick,.q-copy,.q-actions{display:none!important}
  .q-item{border:0;padding:4px 0;margin:0 0 6px;break-inside:avoid}
  .q-item.q-off{display:none!important}
  .q-lv-h{font-size:13px;margin:10px 0 4px}
  .q-text{font-size:12.5px}
  .q-ref{display:none}
  body.print-q .q-guide{display:none!important}
  .q-lines{display:none!important}
  body.print-q .q-lines{display:block!important;height:64px;
    background:repeating-linear-gradient(transparent,transparent 20px,#9ca3af 20px,#9ca3af 21px)}
  body.print-key .q-guide>summary{display:none}
  .q-print-h{border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:8px}
  .q-ph-t{font-size:16px;font-weight:700}
  .q-ph-s{font-size:11.5px;color:#444}
  .q-ph-n{margin-top:6px;font-size:12px}
  body.print-key .q-ph-n{display:none}
  /* ใบสรุป */
  .sum-bar{display:none!important}
  .paper{box-shadow:none;margin:0;padding:0;max-width:none;border-radius:0;font-size:12.5px}
  /* บัตรคำ */
  .fc,.fc-bar{display:none!important}
  .pc-pages{display:block!important}
  .pc-page{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:68mm;gap:0;break-after:page}
  .pc-page:last-child{break-after:auto}
  .pc{border:1px dashed #9ca3af;padding:7mm 6mm 9mm;display:flex;flex-direction:column;justify-content:center;
    align-items:center;text-align:center;position:relative;overflow:hidden}
  .pc-empty{border-color:transparent}
  .pc-main{font-size:20px;font-weight:800;line-height:1.3}
  .pc-sub{font-size:12px;color:#555;margin-top:4px}
  .pc-def{font-size:12.5px;line-height:1.6}
  .pc-list{text-align:left;font-size:11.5px;line-height:1.55;margin:0;padding-left:18px}
  .pc-mod{position:absolute;bottom:3mm;left:0;right:0;font-size:9px;color:#888}
  /* ไอเดีย */
  .idea-grid{display:block}
  .idea{border:0;box-shadow:none;break-inside:avoid;margin-bottom:10mm;border-bottom:1px solid #ccc!important;padding-bottom:4mm}
  body.print-one .idea:not(.print-this),body.print-one .fc-bar{display:none!important}
  .idea-uses{background:none}
}
/* แถบหัวเรื่องย่อยใต้หัวบท */
.kn-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kn-bar h2{margin:0;font-size:1.15rem}

/* ---------- คลังความรู้: การ์ดบท (แบบสมุดโน้ต) ---------- */
.nb-tools{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.search{position:relative;display:flex;align-items:center;max-width:420px}
.search>.i{position:absolute;left:12px;color:var(--ink-4);pointer-events:none}
.search>input{padding-left:38px!important;width:100%}
.nb-group{margin-bottom:22px}
.nb-gh{display:flex;align-items:center;gap:9px;font-size:1.05rem;margin:0 0 10px}
.nb-dot{width:12px;height:12px;border-radius:4px;flex:none}
.nb-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.nb-grid>*{min-width:0}
.nb{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);overflow:hidden;color:var(--ink);text-decoration:none;transition:.16s var(--ease)}
.nb:hover{transform:translateY(-2px);box-shadow:var(--shadow-3);text-decoration:none;border-color:var(--line-2)}
.nb-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;color:#fff;min-height:44px}
.nb-top::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.04),rgba(0,0,0,.22))}
.nb-top>*{position:relative;z-index:1}
.nb-ch{font-weight:800;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.nb-tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.22)}
.nb-b{padding:11px 13px 6px;display:flex;flex-direction:column;gap:3px;flex:1}
.nb-t{font-size:.98rem;line-height:1.4}
.nb-m{font-size:.78rem;color:var(--ink-3)}
.nb-f{display:flex;align-items:center;gap:6px;padding:8px 13px 12px;flex-wrap:wrap}
.nb-go{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--brand-600);display:inline-flex;gap:4px;align-items:center;
  opacity:.75;transition:opacity .15s}
.nb:hover .nb-go{opacity:1}
.q-head>.f1,.fc-bar>.f1,.kn-bar>.f1{flex:1 1 300px;min-width:0}
@media (max-width:600px){
  .mm-tools [data-mm=zoomin],.mm-tools [data-mm=zoomout]{display:none}
  .mm-tools .ms-auto{margin-left:0}
  .mm-stage{height:62vh;min-height:360px}
  .fc{padding:12px}
  .fc-ctrl .btn{padding-inline:12px}
}
a.badge{text-decoration:none}
a.badge:hover{filter:brightness(.96);text-decoration:none}

/* ช่องอัปโหลดไฟล์แบบลากวาง */
.up-zone{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px dashed var(--line-2);border-radius:var(--r-lg);
  background:var(--surface-2);cursor:pointer;transition:.15s var(--ease)}
.up-zone:hover,.up-zone.over{border-color:var(--brand-500);background:var(--brand-50)}
.up-zone.has{border-style:solid;border-color:var(--ok-500);background:var(--ok-50)}
.up-zone .f1{display:flex;flex-direction:column;gap:2px;min-width:0}
.up-zone b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.up-zone{flex-wrap:wrap}.up-zone>.btn{width:100%;justify-content:center}}
.wrap.wide{max-width:1760px}

/* ===== เฟส 8 ===== */
[hidden]{display:none!important}
.acc-chips{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:center}
.acc-chips .badge{font-size:.68rem;padding:1px 6px}
.acc-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.acc-grid>*{min-width:0;overflow-wrap:anywhere}
.pw-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pw-hint .f1{min-width:200px}
.toggle-list{display:flex;flex-direction:column}
.toggle-list>.switch{padding:11px 0;border-bottom:1px solid var(--line);margin:0}
.toggle-list>.switch:last-child{border-bottom:0}
.switch .sw-t{display:flex;flex-direction:column;gap:2px}
.switch .sw-t small{color:var(--ink-3);font-size:.8rem;font-weight:400;line-height:1.45}

/* ---------- ชุดกลุ่ม (เฟส 8) ---------- */
.c-orange{background:linear-gradient(135deg,#fb923c,#c2410c)}
.c-pink{background:linear-gradient(135deg,#f472b6,#be185d)}
.c-lime{background:linear-gradient(135deg,#a3e635,#4d7c0f)}
.c-cyan{background:linear-gradient(135deg,#22d3ee,#0e7490)}
.gs-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.gs-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;color:inherit;text-decoration:none;transition:.15s var(--ease)}
.gs-card:hover{text-decoration:none;box-shadow:var(--shadow-2);transform:translateY(-2px)}
.gs-card.has-left{border-color:color-mix(in srgb,var(--bad-500) 45%,var(--line))}
.gs-card.dim{opacity:.6}
.gs-top{display:flex;gap:10px;align-items:center}
.gs-bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.gs-bar i{display:block;height:100%;background:var(--ok-500);border-radius:inherit}
.gs-card.has-left .gs-bar i{background:var(--warn-500)}
.gs-title{font:inherit;font-size:1.45rem;font-weight:800;border:1px solid transparent;background:transparent;
  border-radius:8px;padding:2px 6px;margin-inline-start:-6px;width:100%;color:var(--ink)}
.gs-title:hover{border-color:var(--line)} .gs-title:focus{border-color:var(--brand-400);background:var(--surface);outline:0}
.gs-signup{border-color:var(--line)} .gs-signup.on{border-color:var(--violet-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet-500) 15%,transparent)}
.gs-left.bad{border-color:var(--bad-500)}
.gs-left.bad .card-h{background:var(--bad-50);color:var(--bad-700)}
.gs-left.bad .card-h .badge{background:var(--bad-500);color:#fff}
.gp-pool{display:flex;flex-direction:column;gap:5px;min-height:60px;border-radius:10px;padding:2px;transition:.12s}
.gp-groups{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));align-content:start}
.gp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.12s}
.gp-card>header{display:flex;align-items:center;gap:6px;padding:7px 8px;color:#fff}
.gp-card>header input{flex:1;min-width:0;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-weight:700;padding:4px 8px;border-radius:7px}
.gp-card>header input:focus{background:rgba(255,255,255,.28);outline:0}
.gp-n{font-weight:800;font-size:.85rem;background:rgba(255,255,255,.25);padding:1px 8px;border-radius:99px;white-space:nowrap}
.gp-n.over{background:#fff;color:var(--bad-700)}
.gp-x,.gp-color{border:0;background:rgba(255,255,255,.18);color:#fff;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;cursor:pointer;flex:none}
.gp-color{background:rgba(255,255,255,.9);width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.gp-x:hover{background:rgba(255,255,255,.35)}
.gp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3);padding:6px 10px;border-bottom:1px solid var(--line)}
.gp-meta label{display:inline-flex;align-items:center;gap:4px;margin:0}
.gp-meta input{width:58px;padding:2px 6px;font-size:.8rem}
.gp-members{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:64px;flex:1}
.gp-card.over,.gp-pool.over{box-shadow:0 0 0 3px var(--brand-300)}
.gp-empty{font-size:.8rem;color:var(--ink-4);text-align:center;padding:14px 4px;border:1.5px dashed var(--line-2);border-radius:8px}
.gp-done{color:var(--ok-700);font-weight:600;font-size:.9rem;display:flex;gap:6px;align-items:center;justify-content:center;padding:18px 6px}
.gp-chip{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-inline-start:4px solid var(--line-2);
  border-radius:8px;padding:5px 6px 5px 8px;font-size:.86rem;cursor:grab;user-select:none;min-width:0}
.gp-chip.g-m{border-inline-start-color:#3b82f6} .gp-chip.g-f{border-inline-start-color:#ec4899}
.gp-chip .no{font-size:.75rem;color:var(--ink-3);min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.gp-chip .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-chip .self{font-size:.66rem;background:var(--violet-100);color:var(--violet-600);padding:0 5px;border-radius:99px;white-space:nowrap}
.gp-chip button{border:0;background:none;color:var(--ink-4);width:22px;height:22px;border-radius:6px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.gp-chip button:hover{background:var(--surface-3);color:var(--ink)}
.gp-chip.lead{background:var(--warn-50);border-color:var(--warn-500)}
.gp-chip.lead .ld{color:var(--warn-600)}
.gp-chip.picked{outline:3px solid var(--brand-400);outline-offset:1px;background:var(--brand-50)}
.gp-chip.dragging{opacity:.45}
.btn.pulse{animation:kcPulse 1.6s ease-in-out infinite}
@keyframes kcPulse{0%,100%{box-shadow:var(--shadow-1)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand-500) 30%,transparent)}}
[data-countdown]{font-variant-numeric:tabular-nums}
[data-countdown].urgent{color:var(--bad-600);font-weight:700}
.gs-mine{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none;background:var(--surface-2)}
.gs-mine:hover{text-decoration:none;border-color:var(--brand-300)}
.gs-mine.need{border-color:var(--bad-500);background:var(--bad-50)}
.gs-clock{text-align:center;padding:6px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.gs-stu-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.gs-stu{overflow:hidden}
.gs-stu>header{display:flex;align-items:center;gap:8px;padding:10px 12px;color:#fff}
.gs-stu.here{box-shadow:0 0 0 3px var(--ok-500)}
.gs-stu.full{opacity:.7}
.gs-seats{display:flex;gap:4px;flex-wrap:wrap}
.gs-seats i{width:14px;height:14px;border-radius:4px;background:var(--surface-3);border:1px solid var(--line-2)}
.gs-seats i.on{background:var(--brand-500);border-color:var(--brand-500)}
.gs-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.88rem}
.gs-names li.me{font-weight:700;color:var(--brand-700)}
@media print{
  .gs-left,.gs-tools,.gs-signup,.gp-x,.gp-color,.gp-chip button,.gp-meta input{display:none!important}
  .gs-split{display:block}
  .gp-groups{grid-template-columns:repeat(3,1fr)}
  .gp-card{break-inside:avoid}
  .gp-card>header{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .gs-title{border:0;font-size:1.3rem}
}
.alert.violet{background:color-mix(in srgb,var(--violet-100) 60%,var(--surface));border-color:var(--violet-500);color:var(--violet-600)}
.tg-list{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));column-gap:12px}
.tg-list .check{padding:4px 0}
.tg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:6px;vertical-align:middle}
.tg-groups{display:flex;flex-direction:column}
.gb td.sc.na{cursor:default;background:repeating-linear-gradient(135deg,var(--surface-2) 0 5px,var(--surface-3) 5px 10px)}
.gb td.sc.na:hover{outline:0}
/* สถานะงานรายชิ้น */
.st-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--surface-3);gap:2px}
.st-bar i{display:block;min-width:4px}
.t-ok{--tc:var(--ok-500)} .t-warn{--tc:var(--warn-500)} .t-info{--tc:var(--info-500)} .t-violet{--tc:var(--violet-500)}
.t-bad{--tc:var(--bad-500)} .t-dim{--tc:var(--ink-4)}
.st-bar i{background:var(--tc)}
.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:4px 11px;font:inherit;font-size:.84rem;cursor:pointer;color:var(--ink-2)}
.st-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tc,var(--ink-4))}
.st-chip[data-st=""]::before{display:none}
.st-chip.on{border-color:var(--brand-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-500) 25%,transparent)}
.st-chip:disabled{opacity:.45;cursor:default}
.badge.st-ok{background:var(--ok-100);color:var(--ok-700)} .badge.st-warn{background:var(--warn-100);color:var(--warn-700)}
.badge.st-info{background:var(--info-100);color:var(--info-600)} .badge.st-violet{background:var(--violet-100);color:var(--violet-600)}
.badge.st-bad{background:var(--bad-100);color:var(--bad-700)} .badge.st-dim{background:var(--surface-3);color:var(--ink-3)}
.mini-bar{height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:3px;min-width:50px}
.mini-bar i{display:block;height:100%;background:var(--ok-500)}
.choice-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.choice-sub{font-size:.82rem;padding:5px 8px}
/* ---------- หน้าตรวจงาน / คุยท้ายใบงาน ---------- */
.nav-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--bad-500);
  color:#fff;font-size:.7rem;font-weight:800;margin-inline-start:4px}
.rv-tabs{display:flex;gap:6px;flex-wrap:wrap}
.rv-tabs a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:.88rem;font-weight:600}
.rv-tabs a b{background:var(--surface-3);border-radius:99px;padding:0 7px;font-size:.78rem}
.rv-tabs a.on{border-color:var(--brand-500);color:var(--brand-700);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-500) 22%,transparent)}
.rv-tabs a.t-warn.on b{background:var(--warn-100);color:var(--warn-700)} .rv-tabs a.t-info.on b{background:var(--info-100);color:var(--info-600)}
.rv-tabs a.t-violet.on b{background:var(--violet-100);color:var(--violet-600)} .rv-tabs a.t-ok.on b{background:var(--ok-100);color:var(--ok-700)}
.rv-inbox{overflow:hidden}
.rv-mail{display:grid;grid-template-columns:10px 34px minmax(0,1.4fr) minmax(0,1.6fr) auto auto;gap:10px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.rv-mail:last-child{border-bottom:0}
.rv-mail:hover{background:var(--surface-2);text-decoration:none}
.rv-mail .dot{width:9px;height:9px;border-radius:50%}
.rv-mail.unseen .dot{background:var(--info-500)}
.rv-mail.unseen .who b{font-weight:800}
.rv-mail .who{display:flex;flex-direction:column;min-width:0}
.rv-mail .chips{display:flex;gap:4px;flex-wrap:wrap}
.rv-mail .chips .badge{font-size:.7rem}
.rv-mail .sc{text-align:end;white-space:nowrap}
.rv-mail.done{opacity:.85}
.avatar.sm{width:30px;height:30px;font-size:.78rem}
@media (max-width:760px){
  .rv-mail{grid-template-columns:10px 30px minmax(0,1fr) auto;grid-template-areas:"d a w s" ". . c c" ". . t t"}
  .rv-mail .dot{grid-area:d}.rv-mail .avatar{grid-area:a}.rv-mail .who{grid-area:w}.rv-mail .sc{grid-area:s}
  .rv-mail .chips{grid-area:c}.rv-mail .when{grid-area:t}
}
.chip-btn{border:1px solid var(--line);background:var(--surface-2);border-radius:99px;padding:3px 10px;font:inherit;font-size:.8rem;
  cursor:pointer;color:var(--ink-2);margin:0 4px 4px 0}
.chip-btn:hover{border-color:var(--brand-400);color:var(--brand-700)}
.talk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.talk-msg{max-width:min(560px,86%);padding:8px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);align-self:flex-start}
.talk-msg.mine{align-self:flex-end;background:var(--brand-50);border-color:var(--brand-200)}
.talk-msg .who{color:var(--ink-3);margin-bottom:2px}
.talk-msg .body{white-space:normal;overflow-wrap:anywhere}
.talk-form{display:flex;gap:8px;align-items:flex-end}
.talk-form textarea{flex:1;min-height:44px}
/* แท็บของห้องเรียนมีหลายแท็บ — จอกว้างให้ขึ้นบรรทัดใหม่แทนการซ่อนเลื่อน */
@media (min-width:900px){.card>.subnav{flex-wrap:wrap;overflow:visible;row-gap:0}.card>.subnav a{padding:9px 11px}}
/* ---------- หน้างานของนักเรียน + ไฟล์แนบ ---------- */
.asg-ins{font-size:.95rem;line-height:1.7;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.att-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.att-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);min-width:0}
.att-list li.empty-li{justify-content:center;border-style:dashed;background:none}
.att-prog{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.att-prog i{display:block;height:100%;width:0;background:var(--brand-500);transition:width .15s}
.att-thumbs{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.att-file{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:inherit;text-decoration:none;min-width:0}
.att-file:hover{border-color:var(--brand-300);text-decoration:none}
.fm-group{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:10px;overflow:hidden}
.fm-group>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}
.fm-group>summary::-webkit-details-marker{display:none}
.fm-group[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.quota-bar{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.quota-bar i{display:block;height:100%;background:var(--ok-500)}
.quota-bar.warn i{background:var(--warn-500)} .quota-bar.bad i{background:var(--bad-500)}
/* ---------- รายงานคะแนน (เฟส 8) ---------- */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--ink);color:var(--surface);font-size:.76rem;font-weight:600;line-height:1.4;padding:5px 9px;border-radius:7px;
  white-space:nowrap;z-index:50;pointer-events:none;box-shadow:var(--shadow-2)}
.rp-top{display:grid;gap:14px;grid-template-columns:300px minmax(0,1fr);align-items:stretch}
@media (max-width:860px){.rp-top{grid-template-columns:1fr}}
.rp-stats{align-content:start}
.gauge{--w:220px;width:min(100%,var(--w));margin:0 auto;position:relative;text-align:center}
.gauge svg{width:100%;height:auto;display:block;overflow:visible}
.gauge .trk,.gauge .val{fill:none;stroke-width:16;stroke-linecap:round}
.gauge .trk{stroke:var(--surface-3)}
.gauge .val{stroke:var(--gc)}
.gauge.t-ok{--gc:var(--ok-500)} .gauge.t-brand{--gc:var(--brand-500)} .gauge.t-warn{--gc:var(--warn-500)} .gauge.t-bad{--gc:var(--bad-500)}
.gauge .g-v{margin-top:-58px;line-height:1}
.gauge .g-v b{font-size:2.9rem;font-weight:800;letter-spacing:-.02em}
.gauge .g-v span{font-size:1rem;color:var(--ink-3);font-weight:600}
.gauge .g-w{display:inline-flex;align-items:center;gap:6px;font-weight:700;margin-top:8px;font-size:.92rem}
.gauge .g-w .dot{width:10px;height:10px;border-radius:50%;background:var(--gc)}
.gauge .g-l{font-size:.82rem;color:var(--ink-3);margin-top:2px}
.rp-cols{display:flex;gap:2px;height:200px}
.rp-col{flex:1;display:flex;flex-direction:column;align-items:stretch;min-width:0;outline:0}
.rp-col .bw{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--line)}
.rp-col i{display:block;width:min(24px,70%);background:var(--brand-500);border-radius:4px 4px 0 0}
.rp-col .v{font-size:.78rem;font-weight:700;color:var(--ink-2);margin-bottom:3px}
.rp-col .k{font-size:.78rem;color:var(--ink-3);text-align:center;padding-top:5px}
.rp-asg{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.rp-hbar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:10px;align-items:center;padding:4px 2px;color:inherit;text-decoration:none;font-size:.86rem}
.rp-hbar:hover{text-decoration:none;background:var(--surface-2);border-radius:6px}
.rp-hbar.static:hover{background:none}
.rp-hbar .bar,.rp-row .bar{height:14px;background:var(--surface-3);border-radius:4px;overflow:hidden;position:relative}
.rp-hbar .bar i{display:block;height:100%;background:var(--brand-500);border-radius:0 4px 4px 0}
.rp-hbar .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rp-rank{display:flex;flex-direction:column;gap:2px;position:relative}
.rp-row{display:grid;grid-template-columns:28px minmax(0,1.3fr) minmax(0,2.2fr) 44px 56px 64px;gap:8px;align-items:center;padding:3px 4px;
  color:inherit;text-decoration:none;font-size:.86rem;border-radius:6px}
.rp-row:hover{background:var(--surface-2);text-decoration:none}
.rp-row .rk{color:var(--ink-3);font-size:.78rem;text-align:center;font-variant-numeric:tabular-nums}
.rp-row .bar{height:12px}
.rp-row .bar::after{content:"";position:absolute;top:-3px;bottom:-3px;left:var(--avg);border-left:1px dashed var(--ink-3)}
.rp-row .bar i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--tc)}
.rp-row .bar i.t-brand,.rp-legend i.t-brand{--tc:var(--brand-500)}
.rp-row .v{font-weight:700;text-align:end;font-variant-numeric:tabular-nums}
.rp-row .gr{font-size:.78rem;color:var(--ink-3)}
.rp-legend{display:flex;gap:14px;flex-wrap:wrap}
.rp-legend i{display:inline-block;width:12px;height:8px;border-radius:2px;margin-inline-end:5px;background:var(--tc)}
@media (max-width:640px){.rp-row{grid-template-columns:22px minmax(0,1fr) 40px 52px;}.rp-row .bar,.rp-row .ms{display:none}}
.rp-scale{position:relative;height:26px;margin:18px 8px 4px;background:var(--surface-3);border-radius:99px}
.rp-scale .rng{position:absolute;top:8px;height:10px;background:var(--brand-100);border-radius:99px}
.rp-scale .tk{position:absolute;top:2px;bottom:2px;border-left:2px dashed var(--ink-3)}
.rp-scale .me{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--brand-600);
  box-shadow:0 0 0 3px var(--surface),0 1px 4px rgba(0,0,0,.3)}
.rp-scale-lab{display:flex;justify-content:space-between;gap:8px;margin:0 4px}
.rp-buckets{display:flex;flex-direction:column;gap:4px}
.rp-miss{border-color:var(--bad-500)}
.rp-miss .card-h{background:var(--bad-50);color:var(--bad-700)}
.rp-missrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--bad-500) 30%,var(--line));border-radius:10px;background:var(--surface)}
.rp-tr-miss td{background:var(--bad-50)}
@media print{.rp-top{grid-template-columns:260px 1fr}.gauge .val,.rp-row .bar i,.rp-col i,.rp-hbar .bar i{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ============================================================
   แบบประเมินการสอน (เฟส 8)
   ============================================================ */
/* สีมาตร 5 ระดับแบบสองขั้ว (น้อย→มาก): แดง · เทากลาง · น้ำเงิน — ผ่านตัวตรวจตาบอดสีทั้งธีมสว่าง/มืด */
:root{--lk1:#b42d2c;--lk2:#ea8582;--lk3:#cfcdc7;--lk4:#7aaeee;--lk5:#1f66c0;--ev-bar:#2a78d6}
:root[data-theme=dark],:root[data-theme=auto] body.dark{--lk1:#f28684;--lk2:#b4504e;--lk3:#484743;--lk4:#2c62ab;--lk5:#80b5f4;--ev-bar:#3987e5}

/* ---- สร้างใหม่: เลือกแม่แบบ ---- */
.ev-tpls{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.ev-tpl{display:block;cursor:pointer;min-width:0}
.ev-tpl input{position:absolute;opacity:0;pointer-events:none}
.ev-tpl-in{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px 15px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s}
.ev-tpl:hover .ev-tpl-in{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.ev-tpl input:checked+.ev-tpl-in{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.ev-tpl input:focus-visible+.ev-tpl-in{box-shadow:var(--ring)}
.ev-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;margin-top:1px}
.ev-tpl input:checked+.ev-tpl-in .ev-radio{border:6px solid var(--brand-600)}
.ev-secs{display:flex;flex-wrap:wrap;gap:4px}
.ev-secs span{font-size:.74rem;padding:1px 8px;border-radius:99px;background:var(--surface-3);color:var(--ink-2)}
.ev-secs i{font-style:normal;color:var(--ink-3);font-weight:700}

/* ---- ภาพรวม: ความครบรายห้อง ---- */
.ev-prog{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.ev-bar{height:10px}
.ev-names{display:flex;flex-wrap:wrap;gap:4px 6px}
.ev-names span{font-size:.8rem;padding:2px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.ev-names b{color:var(--ink-3);font-weight:600;margin-inline-end:2px}

/* ---- ตัวสร้าง ---- */
.ev-cols{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 330px;align-items:start}
.ev-side{position:sticky;top:calc(var(--header-h) + 12px)}
.ev-sec{margin-bottom:14px;overflow:hidden}
.ev-sec-h{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ev-sec-n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;
  background:var(--brand-600);color:#fff;margin-top:2px}
.ev-sec-t{font-weight:700;font-size:1.02rem;border:1px solid transparent;background:transparent;padding:4px 8px;width:100%}
.ev-sec-d{font-size:.84rem;color:var(--ink-3);border:1px solid transparent;background:transparent;padding:2px 8px;width:100%}
.ev-sec-t:hover,.ev-sec-d:hover{border-color:var(--line)}
.ev-sec-t:focus,.ev-sec-d:focus{background:var(--surface);border-color:var(--brand-400)}
.ev-tools{display:flex;gap:2px;flex:none}
.ev-items{display:flex;flex-direction:column}
.ev-item{padding:12px 14px;border-bottom:1px solid var(--line)}
.ev-item:last-child{border-bottom:0}
.ev-item:focus-within{background:var(--brand-50)}
.ev-item-h{display:flex;gap:10px;align-items:flex-start}
.ev-no{flex:none;min-width:26px;height:26px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;
  font-size:.8rem;font-weight:700;background:var(--surface-3);color:var(--ink-2)}
.ev-text{flex:1;min-height:38px;resize:none;line-height:1.5;font-weight:600}
.ev-item-f{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:8px 0 0 36px}
.ev-item-f select{width:auto;min-width:180px;padding-block:5px;font-size:.86rem}
.ev-req{display:inline-flex;gap:6px;align-items:center;font-size:.84rem;color:var(--ink-2);cursor:pointer}
.ev-scale{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0 36px}
.ev-scale span{font-size:.74rem;color:var(--ink-3);padding:1px 8px;border:1px dashed var(--line-2);border-radius:99px}
.ev-scale b{color:var(--ink-2);margin-inline-end:4px}
.ev-opts{display:flex;flex-direction:column;gap:6px;margin:10px 0 0 36px}
.ev-opt{display:flex;gap:8px;align-items:center}
.ev-opt input{flex:1;padding-block:5px;font-size:.9rem}
.ev-mark{flex:none;width:16px;height:16px;border:2px solid var(--line-2);border-radius:50%}
.ev-mark.multi{border-radius:4px}
.ev-ph{margin:6px 0 0 36px}
.ev-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 14px;border-top:1px dashed var(--line);background:var(--surface-2)}
.ev-add .chip-btn{display:inline-flex;align-items:center;gap:5px}
.ev-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ev-anon{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.ev-sec-h input.ev-sec-t,.ev-sec-h input.ev-sec-d{border-color:transparent;background:transparent;box-shadow:none;min-height:0}
.ev-sec-h input.ev-sec-t:hover,.ev-sec-h input.ev-sec-d:hover{border-color:var(--line)}
.ev-sec-h input.ev-sec-t:focus,.ev-sec-h input.ev-sec-d:focus{background:var(--surface);border-color:var(--brand-400)}
.ev-cls{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow:auto}
.ev-cl{display:flex;gap:8px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.ev-cl.on{border-color:var(--brand-400);background:var(--brand-50)}
.ev-cl input{width:auto;margin:0}
@media (max-width:960px){.ev-cols{grid-template-columns:1fr}.ev-side{position:static}}
@media (max-width:560px){.ev-item-f,.ev-scale,.ev-opts,.ev-ph{margin-inline-start:0}.ev-item-f select{min-width:0;flex:1}}

/* ---- หน้าตอบของนักเรียน ---- */
.ev-form-wrap{max-width:760px;margin-inline:auto}
.ev-hero{overflow:hidden}
.ev-hero-top{display:flex;gap:14px;align-items:center;padding:18px 20px;background:var(--grad);color:#fff}
.ev-hero-top h1{margin:0;font-size:1.35rem;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.ev-hero-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex:none}
.ev-progress{position:sticky;top:calc(var(--header-h) + 6px);z-index:5;display:flex;gap:10px;align-items:center;
  padding:8px 14px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:99px;box-shadow:var(--shadow-2)}
.ev-progress .bar{flex:1}
.ev-fsec-t{font-size:1.08rem;margin:0}
.ev-q{border:0;margin:0;padding:0;min-width:0}
.ev-q legend{display:flex;gap:9px;align-items:flex-start;padding:0;margin-bottom:10px;font-weight:600;line-height:1.5}
.ev-qt{min-width:0}
.ev-star{color:var(--bad-600);margin-inline-start:3px}
.ev-q.miss legend{color:var(--bad-700)}
.ev-q.miss .ev-faces,.ev-q.miss .ev-choices,.ev-q.miss textarea{outline:2px solid var(--bad-500);outline-offset:4px;border-radius:12px}
.ev-miss{color:var(--bad-600);font-size:.82rem;font-weight:600;margin-top:6px}
.ev-faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.ev-face{cursor:pointer;min-width:0}
.ev-face input{position:absolute;opacity:0;pointer-events:none}
.ev-face-in{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--ink-3);text-align:center;transition:transform .12s,border-color .12s,background .12s}
.ev-face-in .i{width:34px;height:34px}
.ev-face-in b{font-size:.95rem;color:var(--ink);line-height:1.1}
.ev-face-in span{font-size:.72rem;line-height:1.25;font-weight:600}
.ev-face:hover .ev-face-in{border-color:var(--line-2);transform:translateY(-1px)}
.ev-face input:focus-visible+.ev-face-in{box-shadow:var(--ring)}
.ev-face input:checked+.ev-face-in{border-width:2px;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.ev-face.l5 input:checked+.ev-face-in{border-color:var(--lk5);color:var(--lk5);background:color-mix(in srgb,var(--lk5) 12%,var(--surface))}
.ev-face.l4 input:checked+.ev-face-in{border-color:var(--lk4);color:var(--lk5);background:color-mix(in srgb,var(--lk4) 16%,var(--surface))}
.ev-face.l3 input:checked+.ev-face-in{border-color:var(--ink-3);color:var(--ink-2);background:var(--surface-3)}
.ev-face.l2 input:checked+.ev-face-in{border-color:var(--lk2);color:var(--lk1);background:color-mix(in srgb,var(--lk2) 16%,var(--surface))}
.ev-face.l1 input:checked+.ev-face-in{border-color:var(--lk1);color:var(--lk1);background:color-mix(in srgb,var(--lk1) 12%,var(--surface))}
.ev-choices{display:flex;flex-direction:column;gap:6px}
.ev-choice{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface)}
.ev-choice input{position:absolute;opacity:0;pointer-events:none}
.ev-choice:hover{border-color:var(--line-2)}
.ev-choice:has(input:checked){border-color:var(--brand-500);background:var(--brand-50)}
.ev-choice:has(input:focus-visible){box-shadow:var(--ring)}
.ev-choice input:checked+.ev-mark{border:5px solid var(--brand-600)}
.ev-choice input:checked+.ev-mark.multi{border:0;background:var(--brand-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ev-submit .btn{min-width:220px}
.ev-thanks{padding:36px 20px}
.ev-thanks-ico{color:var(--lk5);margin-bottom:6px}
@media (max-width:420px){.ev-faces{gap:4px}.ev-face-in{padding:7px 0 6px;border-radius:11px}.ev-face-in .i{width:28px;height:28px}.ev-face-in span{font-size:.66rem}}

/* ---- รายงาน ---- */
.ev-chip{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--line-2);border-radius:99px;font-size:.86rem;font-weight:600;
  background:var(--surface);color:var(--ink-2);cursor:pointer;user-select:none;text-decoration:none}
.ev-chip:hover{border-color:var(--brand-400);color:var(--brand-700);text-decoration:none}
.ev-chip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.ev-secbars{display:flex;flex-direction:column;gap:6px}
.ev-secbar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) 44px 70px;gap:10px;align-items:center;font-size:.88rem;outline:0}
.ev-secbar .k{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-secbar .v{font-weight:800;text-align:end;font-variant-numeric:tabular-nums}
.ev-secbar .w{font-size:.8rem;color:var(--ink-3)}
.ev-track{position:relative;height:16px;background:var(--surface-3);border-radius:4px;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--line) calc(20% - 1px) 20%)}
.ev-track i{display:block;height:100%;background:var(--ev-bar);border-radius:0 4px 4px 0}
.ev-secbar:focus-visible .ev-track{box-shadow:var(--ring)}
.ev-axis{margin-top:-2px}
.ev-ticks{position:relative;height:16px}
.ev-ticks b{position:absolute;transform:translateX(-50%);font-size:.72rem;font-weight:600;color:var(--ink-3)}
.ev-tbl td{vertical-align:middle}
.ev-dist-h{min-width:140px}
.ev-dist-c{width:22%;min-width:120px}
.ev-lk{display:flex;gap:2px;height:14px;border-radius:4px;overflow:hidden;background:var(--surface)}
.ev-lk i{display:block;min-width:3px;height:100%}
.ev-lk i.l1,.ev-lk-key i.l1{background:var(--lk1)} .ev-lk i.l2,.ev-lk-key i.l2{background:var(--lk2)}
.ev-lk i.l3,.ev-lk-key i.l3{background:var(--lk3)} .ev-lk i.l4,.ev-lk-key i.l4{background:var(--lk4)}
.ev-lk i.l5,.ev-lk-key i.l5{background:var(--lk5)}
.ev-lk-key{display:inline-flex;align-items:center;gap:5px;margin-inline-end:14px}
.ev-lk-key i{width:12px;height:10px;border-radius:2px}
.ev-fq{width:36px;color:var(--ink-2)}
.ev-sum td{background:var(--surface-2);border-top:1px solid var(--line-2)}
.ev-w{font-weight:700;font-size:.82rem;white-space:nowrap}
.ev-w.t-ok{color:var(--ok-700)} .ev-w.t-brand{color:var(--brand-700)} .ev-w.t-warn{color:var(--warn-700)} .ev-w.t-bad{color:var(--bad-700)}
:root[data-theme=dark] .ev-w.t-ok,:root[data-theme=auto] body.dark .ev-w.t-ok{color:var(--ok-500)}
:root[data-theme=dark] .ev-w.t-brand,:root[data-theme=auto] body.dark .ev-w.t-brand{color:var(--brand-300)}
:root[data-theme=dark] .ev-w.t-warn,:root[data-theme=auto] body.dark .ev-w.t-warn{color:var(--warn-500)}
:root[data-theme=dark] .ev-w.t-bad,:root[data-theme=auto] body.dark .ev-w.t-bad{color:var(--bad-500)}
.ev-other .ev-no{min-width:22px;height:22px}
.ev-opts-r{display:flex;flex-direction:column;gap:3px;max-width:720px}
.ev-texts{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.ev-texts li{padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-inline-start:3px solid var(--lk4);border-radius:10px;font-size:.92rem;line-height:1.55}
.ev-cmp td,.ev-cmp th{white-space:nowrap}
.ev-print-head{margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #000}
@media (max-width:760px){
  .ev-fq{display:none}
  .ev-secbar{grid-template-columns:minmax(0,1fr) 44px;row-gap:2px}
  .ev-secbar .ev-track{grid-column:1/-1;grid-row:2}.ev-secbar .w{display:none}
  .ev-axis{display:none}
}
@media print{
  .ev-lk i,.ev-track i,.ev-lk-key i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .ev-keep,.ev-secbars,.ev-tbl tr,.ev-other{break-inside:avoid}
  .ev-texts{grid-template-columns:1fr 1fr}
}
/* ปุ่มชวนตอบแบบประเมินในหน้าของนักเรียน */
.ev-cta{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);color:var(--ink);text-decoration:none;
  background:var(--grad-soft);border:1px solid var(--brand-200)}
.ev-cta:hover{text-decoration:none;box-shadow:var(--shadow-2)}
.ev-cta>.i,.ev-cta-ico{color:var(--brand-600);flex:none}
.ev-cta-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface)}
@media (max-width:560px){.ev-cta{flex-wrap:wrap}.ev-cta .btn{width:100%;justify-content:center}}

/* ============================================================
   โหมดสอบ (เฟส 8)
   ============================================================ */
.ex-gate{max-width:680px;margin-inline:auto}
.ex-card{overflow:hidden}
.ex-top{display:flex;gap:14px;align-items:center;padding:18px 20px;background:var(--grad);color:#fff}
.ex-top.bad{background:linear-gradient(135deg,var(--bad-600),#9f1239)}
.ex-top h1{margin:0;font-size:1.3rem;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.ex-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex:none}
.ex-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ex-rules li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:.93rem}
.ex-rules li>.i{color:var(--brand-600);margin-top:3px}
.ex-rules li.ex-warn{border-color:var(--warn-500);background:var(--warn-50)}
.ex-rules li.ex-warn>.i{color:var(--warn-600)}
.ex-agree{display:flex;gap:9px;align-items:center;font-weight:600;cursor:pointer}
.ex-agree input{width:18px;height:18px}
.ex-wait{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);font-weight:600}
.ex-log{list-style:none;margin:0;padding:0;font-size:.88rem;display:flex;flex-direction:column;gap:3px}
.ex-log li{padding:4px 10px;border-inline-start:3px solid var(--bad-500);background:var(--bad-50);border-radius:6px}

/* แถบบนหน้าข้อสอบ */
.ex-bar{position:sticky;top:calc(var(--header-h) + 6px);z-index:6;display:flex;gap:10px;align-items:center;margin-bottom:12px;
  padding:7px 12px;border-radius:99px;background:var(--surface);border:1.5px solid var(--violet-500);box-shadow:var(--shadow-2)}
.ex-badge{display:inline-flex;gap:6px;align-items:center;font-weight:800;color:var(--violet-600)}
.ex-hint{color:var(--ink-3)}
.ex-v{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:.88rem;color:var(--ink-2);padding:2px 10px;border-radius:99px;background:var(--surface-3)}
.ex-v.bad{background:var(--bad-100);color:var(--bad-700)}
body.ex-nocopy .ws,body.ex-nocopy .ws-bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.ex-nocopy .ws input,body.ex-nocopy .ws textarea,body.ex-nocopy .ws [contenteditable]{-webkit-user-select:text;user-select:text}
body.ex-blocked .ws,body.ex-blocked .ws-bar,body.ex-blocked .wl-more{filter:blur(14px);pointer-events:none}
.ex-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(10,14,30,.72);backdrop-filter:blur(6px)}
.ex-ov[hidden]{display:none!important}
.ex-ov[data-kind=lock],.ex-ov[data-kind=fs]{background:var(--bg)}
.ex-box{width:min(100%,460px);text-align:center;padding:26px 22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-pop);border:1px solid var(--line)}
.ex-box h2{font-size:1.25rem;margin:8px 0 6px}
.ex-box p{color:var(--ink-2)}
.ex-ic{width:66px;height:66px;margin:0 auto;border-radius:20px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-600)}
.ex-box.warn .ex-ic{background:var(--warn-100);color:var(--warn-700)}
.ex-box.lock .ex-ic{background:var(--bad-100);color:var(--bad-700)}
.ex-box .btn{margin-top:6px}

/* ห้องคุมสอบของครู */
.em-code .card-b>.f1{min-width:min(100%,220px)}
.em-code-v{white-space:nowrap;font-size:2.4rem;font-weight:800;letter-spacing:.2em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--brand-700)}
.em-big{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--surface);cursor:pointer;text-align:center}
.em-big[hidden]{display:none!important}
.em-big b{display:block;font-size:min(30vw,26vh);letter-spacing:.12em;line-height:1;color:var(--brand-700)}
.em-big .xs{font-size:1.4rem;color:var(--ink-3)}
.em-stats .stat{font:inherit;text-align:start;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.em-stats .stat:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.em-stats .stat.on{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.em-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.em-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);
  border-inline-start:4px solid var(--line-2);border-radius:12px;min-width:0}
.em-card.s-online{border-inline-start-color:var(--brand-500)}
.em-card.s-away{border-inline-start-color:var(--warn-500);background:var(--warn-50)}
.em-card.s-locked{border-inline-start-color:var(--bad-500);background:var(--bad-50)}
.em-card.s-done{border-inline-start-color:var(--ok-500)}
.em-h{display:flex;gap:8px;align-items:center;min-width:0}
.em-no{flex:none;min-width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:.8rem;background:var(--surface-3)}
.em-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.em-m{display:flex;gap:8px;align-items:center;min-height:20px}
.em-v{display:inline-flex;gap:4px;align-items:center;font-weight:700;font-size:.84rem;font-variant-numeric:tabular-nums}
.em-prog{flex:1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.em-prog i{display:block;height:100%;background:var(--brand-500)}
.em-last{min-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-a{display:flex;gap:6px;flex-wrap:wrap}
.em-a:empty{display:none}
.em-events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto}
.em-events li{display:flex;gap:10px;align-items:center;padding:6px 10px;border-radius:8px;background:var(--surface-2);font-size:.9rem}
.em-events li.counted{background:var(--bad-50)}
.em-events .t-num{color:var(--ink-3);min-width:42px}

/* ---- ตัวช่วยตรวจ / AI (เฟส 8) ---- */
.ai-note{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin:8px 14px 12px;padding:7px 10px;border-radius:10px;font-size:.84rem;
  background:var(--ok-50);border:1px solid color-mix(in srgb,var(--ok-500) 35%,var(--line));color:var(--ink-2)}
.ai-note>.i{color:var(--ok-600);margin-top:3px}
.ai-note.pending{background:var(--violet-100);border-color:color-mix(in srgb,var(--violet-500) 35%,var(--line))}
.ai-note.pending>.i{color:var(--violet-600)}
.rv-row .ai-note{margin:6px 0 0;font-size:.78rem;padding:5px 8px}
.bd-ai{border:1px dashed var(--violet-500);border-radius:10px;padding:6px 10px;background:color-mix(in srgb,var(--violet-100) 45%,transparent)}
.bd-ai>summary{cursor:pointer;font-weight:600;font-size:.86rem;color:var(--violet-600);display:flex;gap:6px;align-items:center}
/* ตรวจคำผิดก่อนส่ง */
.pf-modal .modal-box{max-width:620px}
.pf-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto}
.pf-q{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.pf-q ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pf-i{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}
.pf-t{flex:none;font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--bad-100);color:var(--bad-700);margin-top:2px}
.pf-i.tidy .pf-t{background:var(--warn-100);color:var(--warn-700)}
.pf-ai{padding-top:10px;border-top:1px dashed var(--line)}

/* ===================== 1.8.0 พิจารณาคะแนน + คะแนนช่วย ===================== */
.badge.neutral{background:var(--surface-3);color:var(--ink-3)}
.cs-bar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.cs-filters{display:flex;flex-wrap:wrap;gap:6px}
/* ชิปตัวกรอง/ปุ่มด่วน (ไม่ใช้ .chip เพราะ worksheet.css มี .chip ของตัวเอง) */
.fchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--line-2);border-radius:var(--r-full);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:.86rem;cursor:pointer;line-height:1.3}
.fchip:hover{background:var(--surface-3)}
.fchip.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.fchip b{font-size:.78rem;opacity:.85}
.fchip:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px}
.cs-set{position:relative}
.cs-set>summary{list-style:none}
.cs-set>summary::-webkit-details-marker{display:none}
.cs-set-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;width:min(92vw,380px);padding:14px;
  box-shadow:var(--shadow-pop)}
.cs-list{display:flex;flex-direction:column;gap:10px}
.cs-row{display:grid;grid-template-columns:minmax(190px,1.25fr) minmax(170px,1fr) minmax(220px,1.7fr) minmax(120px,auto);
  gap:10px 16px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);border-inline-start-width:4px}
.cs-row.rec-yes{border-inline-start-color:var(--ok-500)}
.cs-row.rec-maybe{border-inline-start-color:var(--warn-500)}
.cs-row.rec-no{border-inline-start-color:var(--bad-500)}
.cs-row.rec-done{border-inline-start-color:var(--brand-500)}
.cs-row[hidden]{display:none}
.cs-who{display:flex;gap:10px;align-items:flex-start;min-width:0}
.cs-no{flex:none;min-width:30px;height:30px;border-radius:9px;background:var(--surface-3);display:grid;place-items:center;
  font-weight:700;font-size:.85rem}
.cs-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chip-s{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;padding:1px 7px;border-radius:99px;
  background:var(--warn-50);color:var(--warn-700);border:1px solid var(--warn-100)}
.cs-flow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.cs-now{font-size:1.25rem}
.cs-plus{font-size:.78rem;font-weight:700;color:var(--warn-700);background:var(--warn-50);padding:0 6px;border-radius:6px}
.cs-plus.adj{color:var(--brand-700);background:var(--brand-50)}
.cs-gap{font-size:.84rem;color:var(--ink-2);margin-top:2px}
.cs-why{display:flex;flex-wrap:wrap;gap:5px}
.cs-r{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;padding:2px 8px;border-radius:8px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-2)}
.cs-r.ok{background:var(--ok-50);border-color:var(--ok-100);color:var(--ok-700)}
.cs-r.bad{background:var(--bad-50);border-color:var(--bad-100);color:var(--bad-700)}
.cs-r.muted{color:var(--ink-3)}
.cs-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:end}
.cs-more{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:6px}
.cs-more>summary{cursor:pointer;color:var(--ink-3)}
.cs-more-b{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:8px 0 2px}
.cs-adj{padding:6px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:6px}
.cs-adj form{display:inline}
@media (max-width:980px){
  .cs-row{grid-template-columns:1fr 1fr}
  .cs-why{grid-column:1/-1}
  .cs-act{grid-column:1/-1;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap}
}
@media (max-width:560px){
  .cs-row{grid-template-columns:1fr}
  .cs-more-b{grid-template-columns:1fr}
}
.bn-item{display:flex;gap:10px;align-items:center;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2)}
.bn-item.off{opacity:.6}
.bn-mx th{font-size:.78rem;vertical-align:bottom}
.bn-cell{width:30px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;
  display:inline-grid;place-items:center;font:700 .8rem/1 inherit;color:transparent;padding:0}
.legend i.bn-cell{width:16px;height:14px;cursor:default;vertical-align:-3px}
.bn-cell.s-auto{background:var(--ok-100);border-color:var(--ok-500)}
.bn-cell.s-auto::after{content:"✓";color:var(--ok-700)}
.bn-cell.s-manual{background:var(--brand-100);border-color:var(--brand-500)}
.bn-cell.s-manual::after{content:"✓";color:var(--brand-700)}
.bn-cell.s-off{background:var(--bad-50);border-color:var(--bad-500)}
.bn-cell.s-off::after{content:"✕";color:var(--bad-700)}
.legend i.bn-cell::after{font-size:.62rem}
.bn-cell:focus-visible{outline:2px solid var(--brand-500);outline-offset:1px}
.bn-cell.busy{opacity:.5}
/* สมุดคะแนน: ช่องที่มีคะแนนช่วย/ปัด */
.gb td.sum.has-bonus,.gb td.total.has-adj{position:relative}
.gb td.sum.has-bonus::after,.gb td.total.has-adj::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
  width:6px;height:6px;border-radius:50%;background:var(--warn-500)}
.gb td.total.has-adj::after{background:var(--brand-500)}
.gb td.gb-note{font-size:.74rem;color:var(--ink-3);min-width:180px;max-width:280px;white-space:normal;text-align:start;line-height:1.35}
.cs-row.flash{animation:csflash 1.6s var(--ease)}
@keyframes csflash{0%,30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 45%,transparent)}100%{box-shadow:none}}

/* ===================== 1.8.1 มุมมองนักเรียน ===================== */
.sv-bar{color:#fff;padding:8px 0;background:repeating-linear-gradient(135deg,#6d28d9 0 16px,#5b21b6 16px 32px)}
.sv-bar.view{background:repeating-linear-gradient(135deg,#b45309 0 16px,#92400e 16px 32px)}
.sv-in{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.sv-ico{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.sv-sub{opacity:.92;display:block}
.sv-bar form{display:inline}
.sv-bar .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.sv-bar .btn:hover{background:rgba(255,255,255,.26)}
.sv-bar .btn-primary{background:#fff;border-color:#fff;color:#4c1d95}
.sv-bar.view .btn-primary{color:#7c2d12}
.sv-bar .btn-primary:hover{background:#f5f3ff}
.sv-pill{position:fixed;inset-block-end:14px;inset-inline-start:14px;z-index:95}
.sv-pill button{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:inherit;font-size:.82rem;
  padding:7px 12px 7px 10px;border-radius:999px;background:#4c1d95;color:#fff;box-shadow:0 6px 20px rgba(76,29,149,.35)}
.sv-pill button b{background:#fff;color:#4c1d95;border-radius:999px;padding:1px 9px}
.sv-pill button:focus-visible{outline:3px solid #c4b5fd;outline-offset:2px}
@media (max-width:560px){.sv-pill span{display:none}}
@media print{.sv-pill,.sv-bar{display:none}}
.sv-menu{position:relative}
.sv-menu>summary{list-style:none;cursor:pointer}
.sv-menu>summary::-webkit-details-marker{display:none}
.sv-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:40;width:min(92vw,340px);padding:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);text-shadow:none}
.sv-pop .sv-opt{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px dashed var(--line)}
.sv-pop .sv-opt:last-child{border-bottom:0;padding-bottom:0}
.sv-pop .sv-opt:first-child{padding-top:0}
/* หัวการ์ดห้องเรียน: ไม่ตัดเมนูที่เด้งออกมา (เดิม overflow:hidden) แต่ยังโค้งมุมเหมือนเดิม */
.cn-card{overflow:visible;position:relative;z-index:20}
.cn-head{border-radius:var(--r-lg) var(--r-lg) 0 0}
@media (max-width:640px){
  .sv-menu{position:static}
  .sv-pop{inset-inline:12px;width:auto;top:auto;margin-top:8px}
}

/* ===================== 1.8.2 สิ่งแวดล้อมการเรียนรู้ของนักเรียน ===================== */
.le-head{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.le-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;color:#fff;position:relative}
.le-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 100% 0,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.le-hero>*{position:relative;z-index:1}
.le-hero h1{margin:0;font-size:1.35rem;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.le-sub{opacity:.94;font-size:.9rem}
.le-me{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  padding:5px 12px 5px 5px;border-radius:999px;backdrop-filter:blur(2px)}
a.le-me{color:inherit;text-decoration:none;transition:background .15s}
a.le-me:hover{background:rgba(255,255,255,.28);text-decoration:none}
.le-me-av{box-shadow:0 0 0 2px #fff;background:#fff}
.le-me-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.le-me-no{font-size:.74rem;opacity:.9}
.le-me-n{font-weight:600;font-size:.9rem}
.le-tabs{display:flex;gap:2px;overflow-x:auto;padding:6px 8px;scrollbar-width:none}
.le-tabs::-webkit-scrollbar{display:none}
.le-tabs a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;color:var(--ink-2);font-weight:600;
  white-space:nowrap;font-size:.93rem}
.le-tabs a:hover{background:var(--surface-3);text-decoration:none;color:var(--ink)}
.le-tabs a.on{background:var(--brand-50);color:var(--brand-700);box-shadow:inset 0 -2px 0 var(--brand-500)}
.le-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--bad-500);color:#fff;font-size:.72rem;display:inline-grid;place-items:center}
@media (max-width:560px){.le-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}.le-tabs a{padding:8px 10px;font-size:.86rem;justify-content:center}
  .le-tabs a:last-child:nth-child(odd){grid-column:1/-1}}

.le-task{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.le-task.sent{background:var(--ok-50);border-color:var(--ok-100)}
.le-task.soon{border-color:var(--warn-500);box-shadow:inset 3px 0 0 var(--warn-500)}
.le-task-ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-600)}
.le-task.sent .le-task-ico{background:var(--ok-100);color:var(--ok-700)}
.le-task-t{color:var(--ink)}
.le-task-act{flex:none;min-width:112px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
@media (max-width:560px){.le-task{flex-wrap:wrap}.le-task-act{flex-direction:row;flex-wrap:wrap;min-width:0;width:100%;justify-content:flex-start}}
.le-allclear{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r);background:var(--ok-50);color:var(--ok-700);font-weight:600}
.le-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);border:1px solid var(--line);color:inherit;background:var(--surface)}
.le-row:hover{text-decoration:none;border-color:var(--brand-300);background:var(--brand-50)}
.le-row-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--info-50);color:var(--info-600)}
.le-row .f1 b{display:block;font-size:.92rem}
.le-chap-mini{padding:10px;border-radius:var(--r);background:var(--violet-100);color:var(--ink)}
:root[data-theme="dark"] .le-chap-mini{background:color-mix(in srgb,var(--violet-600) 18%,var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .le-chap-mini{background:color-mix(in srgb,var(--violet-600) 18%,var(--surface))}}

.le-intro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.le-intro-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--info-50);color:var(--info-600)}
.le-intro-ico.violet{background:var(--violet-100);color:var(--violet-600)}
.le-intro-ico.rose{background:var(--bad-50);color:var(--bad-600)}
.le-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.le-res{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  color:inherit;box-shadow:var(--shadow-1);transition:.15s var(--ease)}
.le-res:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--brand-300)}
.le-res-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--info-50);color:var(--info-600)}
.le-res.t-pdf .le-res-ico{background:var(--bad-50);color:var(--bad-600)}
.le-res.t-youtube .le-res-ico,.le-res.t-video .le-res-ico{background:var(--warn-50);color:var(--warn-700)}
.le-res.t-embed .le-res-ico{background:var(--ok-50);color:var(--ok-700)}
.le-res.t-text .le-res-ico{background:var(--violet-100);color:var(--violet-600)}
.le-res-k{display:block;font-size:.74rem;color:var(--ink-3);font-weight:600}
.le-res-t{display:block;line-height:1.35}
.le-res-s{flex:none}
.le-res.seen{opacity:.86}
.le-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.le-clip3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.le-viewer-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.le-viewer-t{margin:0;font-size:1.25rem;line-height:1.3}
.le-viewer{overflow:hidden}
.le-pad{padding:18px}
.le-text{font-size:1.02rem;line-height:1.75;white-space:normal}
.le-embed{aspect-ratio:16/9;background:#000}
.le-embed.doc{aspect-ratio:auto;height:min(78vh,820px);background:var(--surface-2)}
.le-embed iframe{width:100%;height:100%;border:0;display:block}
.le-video{width:100%;max-height:78vh;background:#000;display:block}
.le-pdf{display:flex;flex-direction:column;background:var(--surface-3)}
.le-pdf:fullscreen{height:100vh}
.le-pdf-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.le-pdf-pages{height:min(80vh,900px);overflow:auto;padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.le-pdf:fullscreen .le-pdf-pages{height:auto;flex:1}
.le-pdf-page{position:relative;min-height:240px;width:100%;display:flex;justify-content:center}
.le-pdf-page canvas{box-shadow:0 2px 10px rgba(0,0,0,.18);background:#fff;max-width:100%;height:auto}
.le-pdf-n{position:absolute;inset-block-start:6px;inset-inline-start:6px;font-size:.72rem;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:1px 7px;z-index:1}
.le-pdf-load{padding:40px 10px;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.le-pn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.le-pn-a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:inherit;min-width:0}
.le-pn-a:hover{text-decoration:none;border-color:var(--brand-300)}
.le-pn-a>span{display:flex;flex-direction:column;min-width:0}
.le-pn-a.next{justify-content:flex-end;text-align:end;grid-column:2}

.le-chap{overflow:hidden}
.le-chap-h{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff}
.le-chap-h h3{margin:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.le-tools{display:grid;gap:10px;padding:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.le-tool{--tc:var(--brand-600);--tb:var(--brand-50);display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--surface);color:inherit;transition:.15s var(--ease);position:relative}
.le-tool:hover{text-decoration:none;border-color:var(--tc);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.le-tool.tone-info{--tc:var(--info-600);--tb:var(--info-50)}
.le-tool.tone-ok{--tc:var(--ok-600);--tb:var(--ok-50)}
.le-tool.tone-warn{--tc:var(--warn-600);--tb:var(--warn-50)}
.le-tool.tone-violet{--tc:var(--violet-600);--tb:var(--violet-100)}
.le-tool.tone-rose{--tc:var(--bad-600);--tb:var(--bad-50)}
.le-tool-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tb);color:var(--tc);margin-bottom:4px}
.le-tool-role{font-size:.72rem;color:var(--tc);font-weight:700;margin-top:auto}
.le-tool.used::after{content:"";position:absolute;inset-block-start:10px;inset-inline-end:10px;width:8px;height:8px;border-radius:50%;background:var(--ok-500)}
.le-tool.off{opacity:.45;pointer-events:none}
.le-tip{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);padding:10px 12px;border-radius:var(--r);background:var(--surface-2);border:1px dashed var(--line-2)}

.le-sum{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.le-sum-sec .card-h h3{display:flex;align-items:center;gap:8px}
.le-sum-no{width:26px;height:26px;border-radius:8px;background:var(--brand-600);color:#fff;display:inline-grid;place-items:center;font-size:.85rem;flex:none}
.le-pts{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;line-height:1.6}
.le-steps{margin:4px 0 0;padding-inline-start:22px;line-height:1.6}
.le-terms th{width:34%;text-align:start;vertical-align:top;font-weight:700}
@media print{.le-head,.le-viewer-h .btn,.tool-seg,.crumbs{display:none!important}.le-sum{display:block}.le-sum-sec{break-inside:avoid;margin-bottom:10px;box-shadow:none}}

.le-drill{max-width:760px}
.le-dr-q{font-size:1.45rem;font-weight:800;line-height:1.35}
.le-dr-q small{font-size:.9rem;color:var(--ink-3);font-weight:600}
.le-dr-mod{margin:2px 0 12px}
.le-dr-ch{display:flex;flex-direction:column;gap:8px}
.le-dr-c{display:flex;gap:10px;align-items:flex-start;text-align:start;padding:11px 12px;border-radius:var(--r);border:1.5px solid var(--line-2);
  background:var(--surface);font:inherit;cursor:pointer;color:var(--ink);line-height:1.5}
.le-dr-c:hover:not(:disabled){border-color:var(--brand-500);background:var(--brand-50)}
.le-dr-c:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}
.le-dr-k{flex:none;width:26px;height:26px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;font-weight:700}
.le-dr-c.right{border-color:var(--ok-500);background:var(--ok-50)}
.le-dr-c.right .le-dr-k{background:var(--ok-500);color:#fff}
.le-dr-c.wrong{border-color:var(--bad-500);background:var(--bad-50)}
.le-dr-c.wrong .le-dr-k{background:var(--bad-500);color:#fff}
.le-dr-c:disabled{cursor:default}
.le-dr-fb{margin-top:10px;min-height:22px;font-weight:600;display:flex;gap:6px;align-items:center}
.le-dr-fb.ok{color:var(--ok-700)}
.le-dr-fb.bad{color:var(--bad-700)}
.le-dr-end{padding:20px 0}
.le-dr-score{font-size:3rem;font-weight:800;color:var(--brand-600);line-height:1.1}
.le-q textarea{width:100%}

.le-ask{max-width:900px}
.le-ask-intro{display:flex;gap:12px;align-items:flex-start}
.le-ask-log{display:flex;flex-direction:column;gap:10px;margin:14px 0;max-height:min(60vh,620px);overflow:auto}
.le-ask-log:empty{display:none}
.le-msg{max-width:88%;padding:10px 13px;border-radius:16px;line-height:1.6}
.le-msg.me{align-self:flex-end;background:var(--brand-600);color:#fff;border-end-end-radius:5px}
.le-msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-end-start-radius:5px}
.le-msg.err{background:var(--bad-50);color:var(--bad-700);border-color:var(--bad-100)}
.le-msg-h{margin-bottom:4px}
.le-src{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.le-src li{padding:7px 9px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:.9rem}
.le-ask-f{display:flex;gap:8px}
.le-ask-f input{flex:1;min-width:0}
.le-dots{display:inline-flex;gap:3px;vertical-align:middle}
.le-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:ledot 1s infinite}
.le-dots i:nth-child(2){animation-delay:.15s}.le-dots i:nth-child(3){animation-delay:.3s}
@keyframes ledot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.le-dots i{animation:none}.le-res,.le-tool{transition:none}}

/* ฝั่งครู */
.le-theory>summary{list-style:none;cursor:pointer}
.le-theory>summary::-webkit-details-marker{display:none}
.le-theory-b{padding-top:0}
.le-hidden{opacity:.62}
.le-edit{position:relative}
.le-edit>summary{list-style:none}
.le-edit>summary::-webkit-details-marker{display:none}
.le-edit-pop{position:absolute;inset-inline-end:0;bottom:calc(100% + 6px);z-index:30;width:min(88vw,360px);padding:14px;box-shadow:var(--shadow-pop)}
.le-pick{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.le-pick-i{display:flex;cursor:pointer}
.le-pick-i input{position:absolute;opacity:0;pointer-events:none}
.le-pick-i>span{flex:1;display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:9px 11px;border-radius:var(--r);
  border:1.5px solid var(--line-2);background:var(--surface)}
.le-pick-i>span small{grid-column:2;color:var(--ink-3);font-size:.75rem}
.le-pick-i input:checked+span{border-color:var(--brand-500);background:var(--brand-50)}
.le-pick-i input:focus-visible+span{outline:2px solid var(--brand-400);outline-offset:2px}

/* ============================================================
   1.8.3 ตัวละครของฉัน — อวตาร (av-*) + จอเกมสัตว์เลี้ยง 8 บิต (arc-*)
   ============================================================ */
.avatar.av-b{background:transparent}
.avatar .av-svg{border-radius:50%}
.av-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:920px){.av-grid{grid-template-columns:minmax(0,1fr)}}
.av-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border-radius:var(--r-lg);
  background:radial-gradient(circle at 50% 40%,var(--brand-50),transparent 70%),var(--surface-2)}
.av-big{width:176px;height:176px;border-radius:32px;overflow:hidden;box-shadow:0 10px 26px rgba(30,27,75,.18),0 0 0 4px var(--surface)}
.av-big .av-svg{border-radius:0}
.av-stage-t{color:var(--ink-4);text-align:center}
.av-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.av-tab{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 13px;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.av-tab:hover{background:var(--surface-3)}
.av-tab.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.av-pane{display:none;margin-top:12px}
.av-pane.on{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.av-opt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 5px 6px;border:2px solid var(--line);
  border-radius:14px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink-2)}
.av-opt svg{width:100%;aspect-ratio:1;height:auto;border-radius:10px}
.av-opt span{font-size:.74rem;font-weight:600;line-height:1.2;text-align:center}
.av-opt:hover{border-color:var(--brand-300)}
.av-opt.on{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100);color:var(--brand-700)}
.av-sw{justify-self:center;width:42px;height:42px;border-radius:50%;border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.av-sw:hover{box-shadow:0 0 0 2px var(--brand-300)}
.av-sw.on{box-shadow:0 0 0 3px var(--brand-500)}
.av-opt:focus-visible,.av-sw:focus-visible,.av-tab:focus-visible{outline:3px solid var(--brand-300);outline-offset:2px}
.av-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.av-mode,.av-pet{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;
  border:2px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface);text-align:center;min-width:0}
.av-mode input,.av-pet input{position:absolute;top:7px;inset-inline-start:7px;margin:0;accent-color:var(--brand-600)}
.av-mode:has(input:checked),.av-pet:has(input:checked){border-color:var(--brand-500);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-100)}
.av-mode:has(input:focus-visible),.av-pet:has(input:focus-visible){outline:3px solid var(--brand-300);outline-offset:2px}
.av-mode.off{opacity:.55;cursor:not-allowed}
.av-mode-pic{width:58px;height:58px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-3);
  color:var(--ink-3);font-size:1.3rem}
.av-mode-pic>span,.av-mode-pic img{width:100%;height:100%;object-fit:cover;display:block}
.av-mode-t,.av-pet-t{font-size:.8rem;font-weight:700;color:var(--ink-2);line-height:1.25}
.av-pets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.av-pet{padding-top:14px}
.av-pet-pic{display:block;width:62px;height:62px}
.av-pet-pic .pp-svg{width:62px}
.av-pethud{max-width:300px;margin-inline:auto}
.av-save{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop)}
@media (max-width:560px){.av-save .sm{display:none}.av-save .btn{flex:1;justify-content:center}.av-big{width:150px;height:150px}}
.me-av{position:relative;display:inline-block;flex:none;text-decoration:none}
.me-av .avatar{box-shadow:0 0 0 3px var(--surface),0 4px 12px rgba(30,27,75,.18);font-size:1.3rem}
.me-av-e{position:absolute;inset-inline-end:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--brand-600);
  color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.me-av:hover{text-decoration:none}

/* จอเกม 8 บิต — 1.9.4: ธีมสว่าง = จอกลางวัน (โทนเดียวกับหน้าเว็บ) · ธีมมืด = จออาร์เคดกลางคืน */
.arc{--rc:#b45309;
  --arc-shell:#e9edf6;--arc-ring:#c3cbdc;--arc-inner:#ffffff;--arc-fg:var(--ink);
  --arc-scr:#f7f9fd;--arc-glow:15%;--arc-scan:rgba(15,23,42,.025);--arc-dot1:rgba(100,116,139,.45);--arc-dot2:rgba(217,119,6,.45);
  --arc-floor1:#dfe6f1;--arc-floor2:#eef2f8;--arc-name:var(--ink);--arc-muted:var(--ink-3);--arc-lv:#b45309;--arc-lvbg:rgba(255,255,255,.85);
  --arc-xpbg:#e2e8f0;--arc-xpbd:#94a3b8;--arc-xp:#16a34a;
  --arc-nextfg:#92400e;--arc-nextb:#78350f;--arc-nextbg:#fffbeb;--arc-nextbd:rgba(217,119,6,.45);
  border-radius:14px;background:var(--arc-shell);color:var(--arc-fg);padding:6px;
  box-shadow:0 0 0 1px var(--arc-ring),inset 0 0 0 2px var(--arc-inner),0 6px 16px rgba(15,23,42,.08)}
:root[data-theme=dark] .arc,:root[data-theme=auto] body.dark .arc{
  --arc-shell:#0f172a;--arc-ring:#020617;--arc-inner:#334155;--arc-fg:#e2e8f0;
  --arc-scr:#0b1020;--arc-glow:38%;--arc-scan:rgba(255,255,255,.05);--arc-dot1:#fff;--arc-dot2:#fde68a;
  --arc-floor1:#1e293b;--arc-floor2:#273449;--arc-name:#fff;--arc-muted:#94a3b8;--arc-lv:#fde047;--arc-lvbg:transparent;
  --arc-xpbg:#020617;--arc-xpbd:#475569;--arc-xp:#4ade80;
  --arc-nextfg:#fde68a;--arc-nextb:#fef08a;--arc-nextbg:rgba(253,224,71,.08);--arc-nextbd:rgba(253,224,71,.35);
  box-shadow:0 0 0 2px var(--arc-ring),inset 0 0 0 2px var(--arc-inner),0 8px 20px rgba(2,6,23,.22)}
.arc-scr{position:relative;border-radius:9px;overflow:hidden;padding:8px 8px 0;background:var(--arc-scr);
  background:radial-gradient(120% 95% at 50% 0,color-mix(in srgb,var(--rc) var(--arc-glow),var(--arc-scr)) 0,var(--arc-scr) 72%)}
.arc-scr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,var(--arc-scan) 0 1px,transparent 1px 3px)}
.arc-scr::after{content:"";position:absolute;inset:0 0 18px;pointer-events:none;opacity:.45;
  background:radial-gradient(circle,var(--arc-dot1) 0 1px,transparent 1.6px) 6px 9px/41px 31px,
             radial-gradient(circle,var(--arc-dot2) 0 1px,transparent 1.6px) 23px 21px/57px 43px}
.arc-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:6px}
.arc-lv{display:inline-flex;align-items:center;height:17px;padding:2px 4px;border-radius:3px;background:var(--arc-lvbg);
  color:var(--arc-lv);font-weight:800;font-size:.7rem;letter-spacing:.08em}
.arc-lv .pp-txt{height:13px}
.arc-rank{font-size:.66rem;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:3px;background:var(--rc);color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap}
.arc-pet{position:relative;z-index:1;width:62%;max-width:150px;margin:2px auto -2px}
.arc-floor{position:relative;z-index:1;height:14px;margin:0 -8px;border-top:2px solid var(--rc);
  background:repeating-conic-gradient(var(--arc-floor1) 0 25%,var(--arc-floor2) 0 50%) 0 0/8px 8px}
.arc-bot{padding:10px 6px 4px}
.arc-nm{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.arc-nm b{color:var(--arc-name);font-size:1rem}
.arc .muted{color:var(--arc-muted)}
.arc-xp{margin-top:8px;height:14px;background:var(--arc-xpbg);border:2px solid var(--arc-xpbd);border-radius:3px;padding:2px}
.arc-xp>i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--arc-xp) 0 7px,transparent 7px 9px);
  transition:width 1.2s steps(24)}
.arc-meta{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:.72rem;color:var(--arc-muted);font-variant-numeric:tabular-nums}
.arc-next{margin-top:8px;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;font-size:.76rem;color:var(--arc-nextfg);
  background:var(--arc-nextbg);border:1px dashed var(--arc-nextbd)}
.arc-next b{color:var(--arc-nextb)}
.arc-mini{padding:4px;border-radius:12px}
.arc-mini .arc-pet{width:80%;max-width:180px}
@media (prefers-reduced-motion:reduce){.arc-xp>i{transition:none}}
@media print{.arc{display:none}}

/* ============================================================
   1.8.4 บทเรียนออนไลน์ (sp-* · ตัวแก้คำถาม qz-*)
   ============================================================ */
.sp-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:10px}
.sp-how>div{display:flex;flex-direction:column;gap:6px}
.sp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.sp-grid>*{min-width:0}
.sp-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-1, none);transition:box-shadow .15s,transform .15s}
.sp-card:hover{box-shadow:var(--shadow-3)}
a.sp-card-a{color:inherit;text-decoration:none}
a.sp-card-a:hover{text-decoration:none;transform:translateY(-1px)}
.sp-cover{position:relative;display:flex;flex-direction:column;gap:3px;padding:16px 16px 14px;min-height:118px;color:#fff;
  text-decoration:none;overflow:hidden}
.sp-cover::after{content:"";position:absolute;right:-30px;bottom:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14)}
.sp-cover:hover{text-decoration:none}
.sp-cover-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.2);margin-bottom:4px}
.sp-cover-t{font-weight:800;font-size:1.05rem;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.2);position:relative;z-index:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:58px}
.sp-cover-m{font-size:.8rem;opacity:.92;position:relative;z-index:1}
.sp-stats{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:12px 14px;font-size:.84rem;color:var(--ink-3)}
.sp-stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.sp-card-b{padding:12px 14px 4px;flex:1;min-width:0}
.sp-board-mini{display:block;padding:12px 14px}
.sp-colors{display:flex;flex-wrap:wrap;gap:8px}
.sp-colors label{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.sp-colors input{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;margin:0;background:transparent;cursor:pointer}
.sp-colors input:checked{background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.18)}
.sp-colors label:has(input:focus-visible){outline:3px solid var(--brand-300);outline-offset:2px}
/* วงแหวนความก้าวหน้า */
.sp-ring{--p:0;position:absolute;top:14px;right:14px;z-index:2;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0)}
.sp-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(15,23,42,.35)}
.sp-ring b{position:relative;font-size:.78rem;color:#fff}
.sp-ring.lg{position:relative;top:auto;right:auto;width:74px;height:74px}
.sp-ring.lg b{font-size:1rem}
/* หัวบทเรียน */
.sp-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--r-lg);color:#fff;position:relative;overflow:hidden}
.sp-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 100% 0,rgba(255,255,255,.2),transparent 55%);pointer-events:none}
.sp-hero>*{position:relative;z-index:1}
.sp-hero>.f1{flex:1 1 260px}
.sp-hero h1{margin:4px 0 6px;font-size:1.45rem;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.25)}
.sp-hero-k{font-size:.84rem;opacity:.92;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sp-hero-d{font-size:.92rem;opacity:.95;max-width:70ch;margin-bottom:6px}
.sp-hero-s{display:flex;flex-wrap:wrap;gap:6px}
.sp-hero-s span{font-size:.78rem;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3)}
.sp-hero-p{display:flex;flex-direction:column;align-items:center;gap:10px}
.sp-hero .btn:not(.btn-primary){background:rgba(255,255,255,.92);color:#1e1b4b;border-color:transparent}
/* ตัวสร้าง */
.sp-build,.sp-edit,.sp-course{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:980px){.sp-build,.sp-edit,.sp-course{grid-template-columns:minmax(0,1fr)}}
.sp-unit .card-h{gap:10px}
.sp-unit-no{flex:none;width:30px;height:30px;border-radius:10px;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;
  font-weight:800;font-size:.9rem}
.sp-unit-no.ok{background:var(--ok-500, #22c55e);color:#fff}
.sp-more{position:relative}
.sp-more>summary{list-style:none}
.sp-more>summary::-webkit-details-marker{display:none}
.sp-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(320px,80vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:12px}
.sp-steps{display:flex;flex-direction:column}
.sp-step{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line)}
.sp-step:hover{background:var(--surface-2)}
.sp-step-t{display:flex;flex-direction:column;min-width:0;color:inherit}
.sp-step-t:hover{text-decoration:none}
.sp-step-t:hover b{color:var(--brand-600)}
.sp-empty{padding:12px 14px;border-top:1px solid var(--line)}
.sp-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;border-top:1px dashed var(--line);background:var(--surface-2)}
.sp-linkrow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r);color:inherit;font-size:.9rem}
.sp-linkrow:hover{background:var(--surface-2);text-decoration:none}
.sp-linkrow .dot{width:10px;height:10px;border-radius:50%;flex:none}
.sp-meta>summary{list-style:none;cursor:pointer}
.sp-meta>summary::-webkit-details-marker{display:none}
.sp-text{font-family:inherit;line-height:1.7}
.sp-media{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0}
.sp-media legend{font-size:.85rem;font-weight:700;padding:0 4px}
.sp-cur{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);background:var(--surface-2)}
.sp-radio{display:grid;gap:8px}
.sp-radio label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer}
.sp-radio label>span{display:flex;flex-direction:column;gap:2px}
.sp-radio label>span>.i{color:var(--brand-600)}
.sp-radio input{margin-top:3px;accent-color:var(--brand-600)}
.sp-radio label:has(input:checked){border-color:var(--brand-500);background:var(--brand-50)}
/* ตัวแก้คำถาม */
.qz-list{display:flex;flex-direction:column;gap:12px}
.qz-card{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:12px;background:var(--surface-2)}
.qz-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qz-no{flex:none;font-size:.9rem}
.qz-type{width:auto;max-width:200px;padding:5px 8px;font-size:.85rem}
.qz-prompt{width:100%}
.qz-b{margin-top:10px}
.qz-choices{display:flex;flex-direction:column;gap:6px}
.qz-ch{display:flex;align-items:center;gap:8px;padding:4px 6px 4px 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.qz-ch input[type=text]{flex:1;border:0;background:transparent;padding:6px 4px;min-width:0}
.qz-ch input[type=radio],.qz-ch input[type=checkbox]{width:18px;height:18px;accent-color:var(--ok-600, #16a34a);flex:none}
.qz-ch:has(input:checked){border-color:var(--ok-500, #22c55e);background:color-mix(in srgb,var(--ok-500, #22c55e) 8%,var(--surface))}
.qz-more{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;margin-top:10px}
.qz-lab{color:var(--ink-3)}
.qz-empty{padding:14px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
@media (max-width:560px){.qz-more{grid-template-columns:1fr}.qz-type{max-width:150px}}
/* ภาพรวมห้อง */
.sp-board td{white-space:nowrap}
.sp-board .badge.xs{font-size:.68rem;margin-inline-start:4px}
.sp-cell{position:relative;display:inline-block;width:64px;height:22px;border-radius:6px;background:var(--surface-3);overflow:hidden;vertical-align:middle}
.sp-cell i{position:absolute;inset:0 auto 0 0;background:var(--brand-200, #c7d2fe)}
.sp-cell.full i{background:var(--ok-500, #22c55e)}
.sp-cell b{position:relative;font-size:.74rem;line-height:22px;color:var(--ink-2)}
.sp-cell.full b{color:#fff}
.sp-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.sp-opens{display:flex;flex-direction:column;gap:6px}
.sp-opens label{display:flex;align-items:center;gap:8px;min-width:0}
.sp-opens input{width:auto;flex:none}
/* หน้าบทเรียนของนักเรียน */
.sp-syl>summary{list-style:none;cursor:pointer;gap:10px}
.sp-syl>summary::-webkit-details-marker{display:none}
.sp-syl[open]>summary>.i:last-child{transform:rotate(180deg)}
details.card[open]>summary .sp-unit-no .i{transform:none}
.sp-syl-d{padding:0 16px 8px 56px}
.sp-syl-l{list-style:none;margin:0;padding:0 8px 8px}
.sp-syl-i{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:var(--r)}
.sp-syl-i:hover{background:var(--surface-2)}
.sp-syl-t{display:flex;flex-direction:column;min-width:0;color:inherit}
a.sp-syl-t:hover{text-decoration:none}
a.sp-syl-t:hover b{color:var(--brand-600)}
.sp-st{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-3)}
.sp-syl-i.done .sp-st{background:var(--ok-500, #22c55e);color:#fff}
.sp-syl-i.open .sp-st{background:var(--brand-600);color:#fff}
.sp-syl-i.locked,.sp-syl-i.soon{opacity:.6}
.sp-goals{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}
.sp-goals li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}
.sp-goals .i{color:var(--ok-600, #16a34a);flex:none;margin-top:3px}
.sp-certok{display:flex;align-items:center;gap:12px;color:var(--warn-600, #d97706)}
.sp-certok b{color:var(--ink)}
/* เล่นขั้น */
.sp-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-width:0}
.sp-bar-p{width:120px;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;flex:none}
.sp-bar-p i{display:block;height:100%;background:var(--brand-500);border-radius:99px}
.sp-play{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;align-items:start}
@media (max-width:980px){.sp-play{grid-template-columns:minmax(0,1fr)}.sp-side{display:none}}
.sp-stage{padding:0;overflow:hidden}
.sp-stage-h{display:flex;align-items:center;gap:12px;padding:18px 20px 12px}
.sp-stage-h h1{margin:2px 0 0;font-size:1.35rem;line-height:1.35}
.sp-stage>*:not(.sp-stage-h):not(.sp-stage-f){margin-inline:20px}
.sp-stage-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;margin-top:18px;border-top:1px solid var(--line);background:var(--surface-2)}
.sp-prose{font-size:1.02rem;line-height:1.85;max-width:72ch;margin-bottom:12px}
.sp-prose h2,.sp-prose h3,.sp-prose h4{margin:1.1em 0 .4em;line-height:1.4}
.sp-prose h2{font-size:1.2rem}.sp-prose h3{font-size:1.08rem}.sp-prose h4{font-size:1rem}
.sp-prose p{margin:0 0 .8em}
.sp-prose ul{margin:0 0 .8em;padding-left:1.4em}
.sp-prose blockquote{margin:0 0 .8em;padding:10px 14px;border-left:4px solid var(--brand-400, #818cf8);background:var(--brand-50);border-radius:0 var(--r) var(--r) 0}
.sp-prose code{background:var(--surface-3);padding:1px 6px;border-radius:5px;font-size:.92em}
.sp-mbox{margin-bottom:14px}
.sp-mbox .le-pdf,.sp-mbox .le-embed{border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.sp-link{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);color:inherit;min-width:0}
.sp-link:hover{text-decoration:none;border-color:var(--brand-300)}
.sp-link .f1{display:flex;flex-direction:column;min-width:0}
.sp-qmeta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--ink-3);margin-bottom:12px}
.sp-result{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r-lg);margin-bottom:14px;border:1.5px solid}
.sp-result.ok{background:color-mix(in srgb,var(--ok-500, #22c55e) 10%,var(--surface));border-color:var(--ok-500, #22c55e)}
.sp-result.bad{background:color-mix(in srgb,var(--warn-500, #f59e0b) 10%,var(--surface));border-color:var(--warn-500, #f59e0b)}
.sp-result-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.sp-result.ok .sp-result-ico{background:var(--ok-500, #22c55e)}
.sp-result.bad .sp-result-ico{background:var(--warn-500, #f59e0b)}
.sp-quiz{display:flex;flex-direction:column;gap:12px}
.sp-q{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:12px 14px 14px;margin:0;min-width:0}
.sp-q.ok{border-color:var(--ok-500, #22c55e)}
.sp-q.bad{border-color:var(--warn-500, #f59e0b);background:color-mix(in srgb,var(--warn-500, #f59e0b) 5%,var(--surface))}
.sp-q legend{display:flex;align-items:flex-start;gap:8px;padding:0 4px;font-weight:600;max-width:100%}
.sp-q-no{flex:none;width:24px;height:24px;border-radius:7px;background:var(--brand-600);color:#fff;display:grid;place-items:center;font-size:.8rem;margin-top:1px}
.sp-q-p{flex:1;min-width:0;line-height:1.6}
.sp-ch{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.sp-ch.row{flex-direction:row;flex-wrap:wrap}
.sp-ch label{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;background:var(--surface)}
.sp-ch.row label{min-width:120px}
.sp-ch input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand-600);flex:none}
.sp-ch label:has(input:checked){border-color:var(--brand-500);background:var(--brand-50)}
.sp-ch label:has(input:focus-visible){outline:3px solid var(--brand-300);outline-offset:1px}
.sp-q input[type=text]{margin-top:6px;max-width:420px}
.sp-hint,.sp-explain{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 10px;border-radius:var(--r);font-size:.88rem}
.sp-hint{background:color-mix(in srgb,var(--warn-500, #f59e0b) 12%,var(--surface))}
.sp-explain{background:var(--brand-50)}
.sp-hint .i,.sp-explain .i{flex:none;margin-top:3px}
.sp-tool{margin-bottom:6px}
.sp-task{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-lg);color:inherit;margin-bottom:6px}
.sp-task:hover{text-decoration:none;border-color:var(--brand-300)}
.sp-task .f1{display:flex;flex-direction:column;min-width:0}
.sp-task.ok{border-color:var(--ok-500, #22c55e)}
.le-pn-a.off{opacity:.55;cursor:not-allowed}
.sp-side{position:sticky;top:calc(var(--header-h, 60px) + 12px);max-height:calc(100vh - var(--header-h, 60px) - 24px);display:flex;flex-direction:column}
.sp-side-l{overflow:auto;padding:4px 8px 10px}
.sp-side-u{font-size:.76rem;font-weight:700;color:var(--ink-3);padding:10px 6px 4px}
.sp-side-i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:.85rem;color:var(--ink-2);min-width:0}
a.sp-side-i:hover{background:var(--surface-2);text-decoration:none}
.sp-side-i.cur{background:var(--brand-50);color:var(--brand-700);font-weight:700}
.sp-side-i.done .i{color:var(--ok-600, #16a34a)}
.sp-side-i.locked,.sp-side-i.soon{opacity:.55}
@media (max-width:560px){.sp-stage>*:not(.sp-stage-h):not(.sp-stage-f){margin-inline:14px}.sp-stage-h{padding:14px}.sp-stage-f{padding:12px 14px}
  .sp-hero{padding:16px}.sp-hero h1{font-size:1.2rem}.sp-bar-p{width:70px}}
@media print{.sp-side,.sp-bar,.sp-stage-f,.le-pn{display:none}}

/* ============================================================
   1.8.5 ใบประกาศที่ออกแบบเอง (cd-*)
   ============================================================ */
.cert-page.cd-port{width:210mm;height:296mm}
@media print{.cert-page.cd-port{width:210mm;height:296mm}}
.cd-paper{position:absolute;inset:0;container-type:inline-size;background:#fff;color:#1e293b;font-family:Sarabun,'Noto Sans Thai',sans-serif;
  overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cd-bg{position:absolute;inset:0}
.cd-bg img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.cd-nobg{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#94a3b8;
  font-size:.9rem;background:repeating-linear-gradient(45deg,#f8fafc 0 12px,#f1f5f9 12px 24px)}
.cd-f{position:absolute;display:flex;align-items:center;line-height:1.3;white-space:nowrap;
  font-size:calc(var(--fs, 16) * var(--fit, 1) * 100cqw / var(--pw, 842))}
.cd-f>span{display:block;max-width:100%}
.cd-f.cd-wrap{white-space:normal}
.cd-f.cd-wrap>span{max-height:100%}
.cd-qr{justify-content:center}
.cd-qr svg{width:100%;height:100%;display:block}
/* รายการแบบ: ภาพย่อ */
.cd-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cd-thumb{position:relative;display:block;aspect-ratio:297/210;background:#f1f5f9;border-bottom:1px solid var(--line);overflow:hidden}
.cd-thumb.port{aspect-ratio:auto;height:240px}
.cd-thumb.port .cd-paper{inset:6px auto 6px 50%;aspect-ratio:210/297;height:calc(100% - 12px);transform:translateX(-50%);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.cd-thumb .cd-f>span{pointer-events:none}
/* ตัวออกแบบ */
.cd-top{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px 14px}
.cd-ed{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media (max-width:1000px){.cd-ed{grid-template-columns:minmax(0,1fr)}}
.cd-stage{position:relative;width:100%;aspect-ratio:297/210;box-shadow:0 8px 28px rgba(15,23,42,.16);border-radius:4px;overflow:hidden;background:#fff}
.cd-stage.port{aspect-ratio:210/297;max-width:min(100%,620px);margin-inline:auto}
.cd-layer{position:absolute;inset:0;cursor:crosshair;touch-action:none;outline:none}
.cd-box{cursor:move;outline:1.5px dashed rgba(79,70,229,.55);outline-offset:-1px;background:rgba(79,70,229,.05)}
.cd-box:hover{background:rgba(79,70,229,.1)}
.cd-box.on{outline:2px solid #4f46e5;background:rgba(79,70,229,.12);z-index:3}
.cd-tag{position:absolute;left:-1px;top:0;transform:translateY(-100%);font-style:normal;font:600 10px/1.4 Sarabun,sans-serif;color:#fff;
  background:#4f46e5;padding:1px 6px;border-radius:4px 4px 0 0;white-space:nowrap;opacity:0;pointer-events:none}
.cd-box:hover .cd-tag,.cd-box.on .cd-tag{opacity:1}
.cd-rs{position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border-radius:3px;background:#fff;border:2px solid #4f46e5;cursor:nwse-resize}
.cd-guide{position:absolute;top:0;bottom:0;left:50%;border-left:1.5px dashed #ec4899;pointer-events:none;z-index:4}
.cd-list{display:flex;flex-direction:column;max-height:300px;overflow:auto;padding:4px}
.cd-li{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:start;padding:6px 10px;border:0;border-radius:8px;
  background:transparent;font:inherit;cursor:pointer;color:var(--ink-2);min-width:0}
.cd-li b{font-size:.78rem}
.cd-li span{font-size:.74rem;color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-li:hover{background:var(--surface-2)}
.cd-li.on{background:var(--brand-50);color:var(--brand-700)}
.cd-props-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cd-props-row input[type=color]{height:38px;padding:2px;width:100%}
.cd-orient{display:flex}
a[aria-disabled="true"]{opacity:.55;pointer-events:auto}

/* ============ 1.9.0 ปฏิทินการเรียน (kal-) ============ */
.kal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
@media (max-width:1100px){.kal-wrap{grid-template-columns:minmax(0,1fr)}}
.kal-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.kal-bar{position:sticky;top:calc(var(--header-h) + 8px);z-index:6;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  padding:8px 10px;margin-bottom:10px;box-shadow:var(--shadow-2,var(--shadow-1))}
.kal-brush{display:flex;gap:4px;flex-wrap:wrap}
.kal-brush label{position:relative;margin:0;cursor:pointer}
.kal-brush input{position:absolute;opacity:0;pointer-events:none}
.kal-brush span{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--surface);font-weight:600;font-size:.86rem;color:var(--ink-2);user-select:none}
.kal-brush label:hover span{border-color:var(--brand-300)}
.kal-brush input:checked+span{border-color:var(--brand-600);background:var(--brand-50);color:var(--brand-700);box-shadow:0 0 0 2px var(--brand-100)}
.kal-brush input:focus-visible+span{outline:2px solid var(--brand-400);outline-offset:2px}
.kal-opts{display:flex;gap:6px;flex:1 1 280px;min-width:0;align-items:center}
.kal-opts select,.kal-opts input{height:36px;padding:4px 10px;font-size:.86rem;width:auto}
.kal-opts input{min-width:120px}
.kal-sum{display:flex;flex-direction:column;gap:8px;padding:10px 14px}
.kal-stats{display:flex;flex-wrap:wrap;gap:6px 22px}
.kal-st{display:flex;align-items:baseline;gap:5px}
.kal-st b{font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.kal-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.76rem;color:var(--ink-3)}
.kal-legend span{display:inline-flex;align-items:center;gap:6px}
.kal-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kal-m{padding:10px 10px 12px}
.kal-mh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px 6px}
.kal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.kal-dh{font:600 .7rem/1 inherit;color:var(--ink-3);text-align:center;padding:5px 0;border:0;background:transparent;border-radius:6px}
button.kal-dh{cursor:pointer}
button.kal-dh:hover{background:var(--brand-50);color:var(--brand-700)}
.kal-d{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:38px;
  aspect-ratio:1/0.92;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:.84rem;line-height:1;cursor:default;user-select:none;-webkit-user-select:none;transition:transform .06s}
.kal-d b{font-weight:600}
.can-edit .kal-d{cursor:pointer}
.can-edit .kal-d:hover{box-shadow:0 0 0 2px var(--brand-300);z-index:1}
.can-edit .kal-d:active{transform:scale(.94)}
.kal-d:focus-visible{outline:2px solid var(--brand-500);outline-offset:1px}
.kal-d.is-we.k-none{background:var(--surface-2);color:var(--ink-4)}
.kal-d.is-out{opacity:.38}
.kal-d.is-today{box-shadow:inset 0 0 0 2px var(--ink)}
.kal-t{font-size:.58rem;font-weight:600;opacity:.92}
.kal-pad{min-height:38px}
.kal-sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);flex:none;background:var(--surface)}
.kal-d.k-class,.kal-sw.k-class{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.kal-d.k-class.src-pattern,.kal-sw.k-class.src-pattern{background:var(--brand-100);border-color:var(--brand-200);color:var(--brand-800)}
.kal-d.k-activity,.kal-sw.k-activity{background:var(--violet-600);border-color:var(--violet-600);color:#fff}
.kal-d.k-activity.src-school{background:var(--violet-500);border-color:var(--violet-500)}
.kal-d.k-off,.kal-sw.k-off{background:repeating-linear-gradient(135deg,var(--surface-3) 0 4px,var(--surface) 4px 8px);color:var(--ink-3);border-color:var(--line)}
.kal-d.k-off b{text-decoration:line-through;text-decoration-thickness:1.5px}
.kal-d.k-holiday,.kal-sw.k-holiday{background:var(--warn-100);border-color:var(--warn-100);color:var(--warn-700)}
.kal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.kal-d .kal-dot{position:absolute;top:3px;inset-inline-end:3px;box-shadow:0 0 0 1.5px var(--surface)}
.kal-dot.ok,.kal-dot.act{background:var(--ok-500)}
.kal-dot.bad{background:var(--bad-500)}
.kal-switch{display:flex;align-items:flex-start;gap:8px;font-weight:600;font-size:.88rem;cursor:pointer;margin:0}
.kal-switch input{margin-top:3px}
#kal-days.dim{opacity:.5}
.kal-info .btn{width:100%}
#kal-missed .row{color:inherit;text-decoration:none}
#kal-missed .row:hover{background:var(--brand-50)}
:root[data-theme=dark] .kal-d.k-class.src-pattern,:root[data-theme=auto] body.dark .kal-d.k-class.src-pattern,
:root[data-theme=dark] .kal-sw.k-class.src-pattern,:root[data-theme=auto] body.dark .kal-sw.k-class.src-pattern{color:var(--brand-300);border-color:var(--brand-200)}
:root[data-theme=dark] .kal-d.k-holiday,:root[data-theme=auto] body.dark .kal-d.k-holiday{color:var(--warn-500)}
@media (max-width:560px){
  .kal-months{grid-template-columns:minmax(0,1fr)}
  .kal-brush{width:100%}
  .kal-brush label{flex:1}
  .kal-brush span{justify-content:center;padding:0 6px;width:100%}
  .kal-d{min-height:42px}
}
/* การ์ดสรุปในหน้าเช็คชื่อ: 14 วันข้างหน้า */
.kal-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.kal-strip .kal-d{min-height:34px;font-size:.78rem}
.kal-strip .kal-d small{font-size:.56rem;font-weight:600;opacity:.85}
.kal-strip a.kal-d{cursor:pointer;text-decoration:none}
.kal-strip a.kal-d:hover{box-shadow:0 0 0 2px var(--brand-300)}
.kal-alert{border-color:var(--violet-500);background:var(--violet-100);color:var(--violet-600)}
@media (max-width:560px){#kal-hint{display:none}.kal-legend{font-size:.7rem;gap:3px 10px}.kal-stats{gap:4px 14px}}

/* ============ 1.9.1 สมุดคะแนน: ไม่นับคะแนน · รอตรวจ · สอบแก้ตัว · ฉบับแก้ ============ */
.gb .bk-none{background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,var(--surface-2) 6px 12px);color:var(--ink-3)}
.gb td.sc[data-bucket="none"]{opacity:.92}
.gb td.c-wait{background:var(--info-100);color:var(--info-600);font-size:.68rem;font-weight:700}
.gb td.sc.rt{box-shadow:inset 0 -3px 0 var(--violet-500)}
.gb td.sc.rt-below{box-shadow:inset 0 -2px 0 0 transparent;background-image:linear-gradient(90deg,var(--violet-500) 50%,transparent 0);
  background-size:6px 2px;background-repeat:repeat-x;background-position:bottom}
.gb td.sc.rev{box-shadow:inset 3px 0 0 var(--info-500)}
.gb td.sc.rt.rev{box-shadow:inset 3px 0 0 var(--info-500),inset 0 -3px 0 var(--violet-500)}

/* ============ 1.9.2 ประวัติการส่ง (vh-) · แก้/ส่งใหม่ (rs-) ============ */
.vh-list{display:flex;flex-direction:column;gap:12px}
.vh-v.live{border-color:var(--brand-300);box-shadow:0 0 0 2px var(--brand-100)}
.vh-v.gone{opacity:.65}
.vh-h{flex-wrap:wrap;gap:6px 10px}
.vh-n{font-weight:800}
.vh-score b{font-size:1.15rem}
.vh-note{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--violet-100);color:var(--violet-600);font-size:.88rem;margin-bottom:8px}
.vh-diff{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.vh-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vh-file{display:flex;flex-direction:column;align-items:center;gap:4px;width:118px;padding:6px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:inherit;font-size:.74rem;text-align:center;text-decoration:none}
.vh-file img{width:100%;height:76px;object-fit:cover;border-radius:6px;background:#fff}
.vh-file span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-file:hover{border-color:var(--brand-300)}
.vh-ans summary{cursor:pointer;padding:4px 0}
.vh-items{margin:6px 0 0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px}
.vh-items li{padding:6px 8px;border-radius:8px;background:var(--surface-2)}
.vh-items li.chg{background:var(--violet-100);box-shadow:inset 3px 0 0 var(--violet-500)}
.vh-q{font-size:.84rem;font-weight:600;min-width:0}
.vh-a{margin-top:4px}
.vh-a img{max-width:220px;max-height:160px;border:1px solid var(--line);border-radius:6px;background:#fff;margin:2px 4px 2px 0}
.vh-a pre{margin:0;max-height:220px;overflow:auto;font-size:.78rem;background:var(--surface);padding:6px 8px;border-radius:6px;border:1px solid var(--line)}
.vh-text{font-size:.86rem;max-height:200px;overflow:auto;white-space:normal}
.rs-box{padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2)}
.rs-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rs-hist{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rs-hist a{text-decoration:none}
.rs-revise{border-color:var(--violet-500)}

/* ============ 1.9.3 นำเข้าคะแนน (gi-) ============ */
.gi-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 18px;border:2px dashed var(--line-2,var(--line));
  border-radius:var(--r-lg);background:var(--surface-2);text-align:center;cursor:pointer;transition:.15s}
.gi-drop:hover,.gi-drop.over,.gi-drop:focus-visible{border-color:var(--brand-500);background:var(--brand-50);outline:0}
.gi-steps{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.gi-cols td,.gi-rows td{vertical-align:top}
.gi-cols input,.gi-cols select{font-size:.84rem;padding:5px 8px}
.gi-cols input[type=number]{width:84px}
.gi-cols tr.gi-off td:not(:first-child),.gi-rows tr.gi-off td{opacity:.45}
.gi-rows select{font-size:.84rem;padding:4px 6px;max-width:230px}
.gi-rows thead th{position:sticky;top:0;z-index:2;background:var(--surface-3)}
.gi-go{position:sticky;bottom:10px;z-index:5;box-shadow:var(--shadow-2,var(--shadow-1))}
@media (max-width:700px){.gi-go{position:static}.gi-go .xs.muted{display:none}}

/* ============ 1.9.4 หน้าห้องเรียนของนักเรียน: แถบขวาแคบลง · ประกาศขึ้นก่อน ============ */
.cr-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto 1fr;
  grid-template-areas:"main news" "main side";align-items:start}
.cr-main{grid-area:main;min-width:0}
.cr-news{grid-area:news;min-width:0}
.cr-side{grid-area:side;min-width:0}
.cr-post{padding:9px 11px;background:var(--surface-2);border-radius:var(--r);border:1px solid var(--line)}
.cr-post.pin{border-color:var(--brand-300);background:var(--brand-50)}
.cr-news.empty .card-b{padding-top:8px;padding-bottom:10px}
@media (max-width:1100px){.cr-grid{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:860px){
  .cr-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"news" "main" "side"}
  .cr-news.empty{display:none}
  .cr-side .arc{max-width:420px;margin-inline:auto}
}

/* 2.0.0 ส่วนที่ไม่ใช่คำถามในใบงาน (หัวข้อ/คำชี้แจง/รูป/วิดีโอ) */
.ws-block{border-left:4px solid var(--brand-500)}
.ws-block.ws-k-media{border-left-color:var(--info-600,#0284c7)}
.ws-block-t{margin:0 0 6px;font-size:1.12rem}
.ws-block-d{color:var(--ink-2);white-space:normal}
.ws-block .ws-media{margin-top:10px}
.ws-video{margin-top:10px;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;max-width:720px}
.ws-video iframe{width:100%;height:100%;border:0}

/* 2.0.0 ความคิดเห็นใต้ประกาศ */
.ac{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.ac-n{display:flex;align-items:center;gap:4px}
.ac-row{display:flex;gap:8px;align-items:flex-start}
.ac-row .avatar.sm{width:26px;height:26px;font-size:.72rem;flex:none}
.ac-row.t .avatar{background:var(--brand-600);color:#fff}
.ac-body{white-space:normal;overflow-wrap:anywhere}
.ac-more>summary{cursor:pointer;color:var(--brand-600);margin-bottom:6px}
.ac-more>.ac-row{margin-bottom:6px}
.ac-form{display:flex;gap:6px;align-items:flex-end}
.ac-form textarea{flex:1;min-height:34px;resize:vertical;font-size:.88rem;padding:6px 9px}

/* 2.0.3 ตรวจรูปแบบคำตอบ */
.ws-verr{margin-top:6px;font-size:.84rem;color:var(--bad-600,#dc2626);font-weight:600}
:root[data-theme=dark] .ws-verr,:root[data-theme=auto] body.dark .ws-verr{color:#fca5a5}
input.v-bad{border-color:var(--bad-600,#dc2626)!important;box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 18%,transparent)!important}
.bd-valid{padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--surface-2)}