/* =========================================================================
   M-Class LMS — ระบบดีไซน์
   สีของโรงเรียน (--primary, --secondary, --accent และค่าที่คำนวณต่อ)
   มาจาก theme_css() ใน app/helpers.php ซึ่งโหลดก่อนไฟล์นี้
   ========================================================================= */
:root{
  --font:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --canvas:#f3f6fb; --surface:#fff; --surface-2:#f8fafd; --surface-3:#f0f3f8;
  --line:#e2e7ef; --line-2:#edf1f6;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --success:#16a34a; --success-50:#f0fdf4; --success-100:#dcfce7; --success-ink:#15803d;
  --warning:#d97706; --warning-50:#fffbeb; --warning-100:#fef3c7; --warning-ink:#b45309;
  --danger:#dc2626; --danger-50:#fef2f2; --danger-100:#fee2e2; --danger-ink:#b91c1c;
  --info:#0891b2; --info-50:#ecfeff; --info-100:#cffafe; --info-ink:#0e7490;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 2px 8px -2px rgba(16,24,40,.07);
  --shadow-md:0 2px 4px -2px rgba(16,24,40,.06),0 12px 28px -8px rgba(16,24,40,.14);
  --shadow-lg:0 28px 56px -16px rgba(16,24,40,.28);
  --ring:0 0 0 4px rgba(var(--primary-rgb),.15);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sidebar-w:264px; --header-h:64px; --bnav-h:62px;
  --bs-body-font-family:var(--font); --bs-body-bg:var(--canvas); --bs-body-color:var(--ink-2); --bs-body-line-height:1.6;
  --bs-border-color:var(--line); --bs-border-color-translucent:var(--line);
  --bs-border-radius:10px; --bs-border-radius-sm:8px; --bs-border-radius-lg:14px; --bs-border-radius-xl:18px; --bs-border-radius-pill:999px;
  --bs-secondary-color:var(--muted); --bs-emphasis-color:var(--ink); --bs-heading-color:var(--ink); --bs-tertiary-bg:var(--surface-2);
  --bs-box-shadow-sm:var(--shadow-sm); --bs-box-shadow:var(--shadow-md); --bs-box-shadow-lg:var(--shadow-lg);
  --bs-focus-ring-color:rgba(var(--primary-rgb),.18);
}

/* ---------- พื้นฐาน ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--canvas);color:var(--ink-2);font-size:.9375rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--ink);font-weight:600;line-height:1.35}
a{color:var(--primary-ink);text-decoration:none}
a:hover{color:var(--primary-700)}
::selection{background:var(--primary-100);color:var(--ink)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.text-muted,.text-body-secondary{color:var(--muted)!important}
.text-primary{color:var(--primary-ink)!important}
.bg-primary{background-color:var(--primary)!important}
.border-primary{border-color:var(--primary)!important}
.min-w-0{min-width:0}
.cursor-pointer{cursor:pointer}
.w-fit{width:fit-content}
.req::after{content:" *";color:var(--danger)}
pre.wrap{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:inherit;background:var(--surface-2);border:1px solid var(--line-2);padding:12px 14px;border-radius:var(--r);color:var(--ink-2)}
.tabular,.table td,.table th{font-variant-numeric:tabular-nums}

/* ---------- โครงหน้า: แถบเมนูด้านข้าง ---------- */
/* พื้นขาวเรียบ (ไม่มีการ์ดผู้ใช้ด้านล่าง — โปรไฟล์/ออกจากระบบอยู่ที่รูปมุมขวาบน) */
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);display:flex;flex-direction:column;z-index:1045;transition:transform .25s ease,width .22s ease;background:var(--surface);background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 55%,color-mix(in srgb,var(--surface) 95%,var(--primary)) 100%);border-right:1px solid rgba(15,23,42,.07);box-shadow:10px 0 30px -28px rgba(16,24,40,.35)}
/* แบรนด์: แถวกะทัดรัดสูงเท่าแถบหัว (ไม่มีกรอบการ์ด) — โลโก้เปล่าไม่มีเส้นขอบ/วงแหวน/พื้นขาว ชื่อระบบตัวไล่สี ชื่อโรงเรียนตัวเล็ก ; ไม่มีโลโก้ = ไอคอนหมวกบนพื้นสีหลัก */
.sidebar-brand{flex:none;display:flex;align-items:center;gap:11px;min-height:var(--header-h);margin:0 10px;padding:9px 8px;text-decoration:none;color:var(--ink)}
.sidebar-brand:hover{color:var(--ink)}
.sidebar-brand{position:relative}
.sidebar-brand::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.brand-medal{flex:none;width:44px;height:44px;display:grid;place-items:center;transition:transform .35s var(--ease)}
.sidebar-brand:hover .brand-medal{transform:scale(1.06)}
.brand-medal .brand-logo{width:100%;height:100%;padding:0;border-radius:0;background:none;object-fit:contain}
.brand-medal .brand-mark{width:100%;height:100%}
.brand-mark{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.25rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 6px 14px -4px rgba(var(--primary-rgb),.55)}
.brand-logo{width:40px;height:40px;flex:none;object-fit:contain;border-radius:10px;background:#fff}
.brand-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--primary);color:var(--on-primary)}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.brand-name{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand .brand-text{gap:1px}
.sidebar-brand .brand-name{font-size:1.02rem;line-height:1.3;letter-spacing:.005em;color:var(--ink)}
@supports (-webkit-background-clip:text) or (background-clip:text){.sidebar-brand .brand-name{background:linear-gradient(120deg,var(--primary-700),var(--primary-ink) 60%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}}
.sidebar-brand .brand-sub{font-size:.74rem;color:var(--muted)}
.sidebar-scroll{flex:1;overflow-y:auto;padding:2px 12px calc(12px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar-scroll::-webkit-scrollbar{width:6px}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* หัวกลุ่มเมนู: ตัวเล็ก + เส้นจางต่อท้าย */
.nav-section{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;letter-spacing:.12em;color:var(--muted-2);padding:16px 12px 6px}
.nav-section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
/* เมนู (เรียบหรู): ไอคอนเส้นโปร่งสีหลักสีเดียว "คุมโทน" ไม่มีกล่องสี ; ชี้ = พื้นจาง ; เปิดอยู่ = แถบสีอ่อน + กล่องไอคอนไล่สี + เส้นนำบาง ๆ ชิดขอบซ้าย (ในแผงวิชาใช้สีวิชาเมื่อเข้มพอ = --sc) */
.side-link{position:relative;display:flex;align-items:center;gap:10px;padding:4px 10px 4px 6px;margin:1px 0;border-radius:12px;color:var(--ink-2);font-weight:500;font-size:.9rem;letter-spacing:.005em;text-decoration:none;transition:background .18s,color .18s,box-shadow .2s}
.side-link>i{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:1.04rem;color:var(--primary-ink);background:transparent;transition:background .18s,color .18s,box-shadow .2s}
.side-link:hover{background:rgba(var(--primary-rgb),.05);color:var(--ink)}
.side-link:hover>i{background:rgba(var(--primary-rgb),.09)}
/* เมนูที่เปิดอยู่: แถบสีหลักไล่เฉด เห็นชัดว่าอยู่หน้าไหน */
.side-link.active{background:linear-gradient(90deg,rgba(var(--primary-rgb),.13),rgba(var(--primary-rgb),.04) 85%);color:var(--primary-ink);font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.09)}
.side-link.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--primary),var(--primary-700))}
.side-link.active>i{color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 6px 14px -6px rgba(var(--primary-rgb),.85),inset 0 1px 0 rgba(255,255,255,.18)}
.side-link.active:hover{color:var(--primary-ink);background:linear-gradient(90deg,rgba(var(--primary-rgb),.16),rgba(var(--primary-rgb),.05) 85%)}
.side-link.side-back{color:var(--muted);font-size:.86rem;margin-bottom:4px}
.side-panel[style*="--sc"] .side-link.active{background:linear-gradient(90deg,rgba(var(--sc-rgb),.14),rgba(var(--sc-rgb),.04) 85%);color:var(--sc-2);box-shadow:inset 0 0 0 1px rgba(var(--sc-rgb),.1)}
.side-panel[style*="--sc"] .side-link.active::before{background:linear-gradient(180deg,var(--sc),var(--sc-2))}
.side-panel[style*="--sc"] .side-link.active>i{color:#fff;background:linear-gradient(135deg,var(--sc),var(--sc-2));box-shadow:0 6px 14px -6px var(--sc),inset 0 1px 0 rgba(255,255,255,.18)}
.side-panel[style*="--sc"] .side-link:not(.active):not(.side-back)>i{color:var(--sc);background:transparent}
.side-panel[style*="--sc"] .side-link:not(.active):not(.side-back):hover{background:rgba(var(--sc-rgb),.06)}
.side-panel[style*="--sc"] .side-link:not(.active):not(.side-back):hover>i{background:rgba(var(--sc-rgb),.1)}
.side-panel .side-link.side-back>i{color:var(--muted);background:var(--surface-3)}
/* แผงเมนูของวิชา: บอกว่ากำลังอยู่ในวิชา/ห้องไหน */
.side-subj{display:flex;align-items:center;gap:10px;margin:2px 0 6px;padding:8px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);background:color-mix(in srgb,var(--c) 9%,var(--surface));border-color:color-mix(in srgb,var(--c) 22%,transparent)}
.side-subj .ss-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:1rem;box-shadow:0 6px 14px -8px var(--c)}
.side-subj .ss-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.side-subj .ss-name{font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-subj .ss-meta{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-link .side-count{margin-left:auto;min-width:22px;text-align:center;font-size:.68rem;font-weight:700;line-height:1.55;letter-spacing:.01em;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;border-radius:999px;padding:0 7px;box-shadow:0 3px 8px -3px rgba(225,29,72,.6)}
.side-link .class-dot{width:10px;height:10px;border-radius:4px;flex:none;margin:0 5px}
/* แบบเข้ม (ใช้สีรองของโรงเรียน ไล่เฉด) — กล่องไอคอนยังคุมโทนสีหลัก (สีหลักอ่อนบนพื้นโปร่ง) */
.sidebar-dark .sidebar{background:linear-gradient(180deg,var(--secondary),var(--secondary-600));border-right-color:transparent;box-shadow:none}
.sidebar-dark .nav-section{color:rgba(var(--on-secondary-rgb),.55)}
.sidebar-dark .nav-section::after{background:linear-gradient(90deg,rgba(var(--on-secondary-rgb),.16),transparent)}
.sidebar-dark .side-link{color:rgba(var(--on-secondary-rgb),.84)}
.sidebar-dark .side-link>i{background:transparent;color:var(--primary-200)}
.sidebar-dark .side-panel[style*="--sc"] .side-link:not(.active):not(.side-back)>i{background:transparent;color:rgba(255,255,255,.9)}
.sidebar-dark .side-panel .side-link.side-back>i{background:rgba(var(--on-secondary-rgb),.08);color:rgba(var(--on-secondary-rgb),.7)}
.sidebar-dark .side-link:hover{background:rgba(var(--on-secondary-rgb),.07);color:var(--on-secondary)}
.sidebar-dark .side-link:hover>i{background:rgba(var(--on-secondary-rgb),.08)}
.sidebar-dark .side-panel[style*="--sc"] .side-link:not(.active):not(.side-back):hover{background:rgba(var(--on-secondary-rgb),.07)}
.sidebar-dark .side-link.active,.sidebar-dark .side-link.active:hover,.sidebar-dark .side-panel[style*="--sc"] .side-link.active{color:var(--on-secondary);background:rgba(var(--on-secondary-rgb),.11);box-shadow:inset 0 0 0 1px rgba(var(--on-secondary-rgb),.08)}
.sidebar-dark .side-link.active::before{background:var(--primary-200)}
.sidebar-dark .side-link.active>i{color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700))}
.sidebar-dark .side-link.side-back{color:rgba(var(--on-secondary-rgb),.7)}
.sidebar-dark .side-subj{background:rgba(var(--on-secondary-rgb),.08);border-color:rgba(var(--on-secondary-rgb),.12)}
.sidebar-dark .side-subj .ss-name{color:var(--on-secondary)}
.sidebar-dark .side-subj .ss-meta{color:rgba(var(--on-secondary-rgb),.65)}
.sidebar-dark .sidebar-brand,.sidebar-dark .sidebar-brand:hover{color:var(--on-secondary)}
.sidebar-dark .sidebar-brand .brand-name{background:none;color:var(--on-secondary)}
.sidebar-dark .sidebar-brand .brand-sub{color:rgba(var(--on-secondary-rgb),.7)}
.sidebar-dark .sidebar-scroll{scrollbar-color:rgba(var(--on-secondary-rgb),.2) transparent}
@media (prefers-reduced-motion:reduce){.side-link>i,.brand-medal{transition:none}.side-link:hover>i,.sidebar-brand:hover .brand-medal{transform:none}}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:1040}

/* ---------- โครงหน้า: แถบหัว + เนื้อหา ---------- */
.app-main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .22s ease}
/* แสงสีหลักจางๆ ด้านบนของหน้า (ครู/ผู้ดูแลระบบ/ผู้ปกครอง) */
body.has-bnav::before{content:"";position:absolute;top:0;left:0;right:0;height:440px;pointer-events:none;z-index:-1;background:radial-gradient(900px 320px at 18% -80px,rgba(var(--primary-rgb),.11),transparent 70%),radial-gradient(760px 280px at 92% -120px,rgba(var(--primary-rgb),.08),transparent 70%)}
.app-header{position:sticky;top:0;z-index:1030;height:var(--header-h);display:flex;align-items:center;gap:10px;padding:0 28px;background:rgba(243,246,251,.7);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s,box-shadow .2s}
.app-header.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.86);box-shadow:0 8px 20px -18px rgba(16,24,40,.35)}
.header-context{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);min-width:0;margin-right:6px;white-space:nowrap}
.header-context>.bi{color:var(--muted-2)}
.header-context .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:500;white-space:nowrap}
.header-context .chip i{color:var(--primary-ink)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--ink-2);font-size:1.15rem;transition:background .15s,border-color .15s,color .15s}
.icon-btn:hover,.icon-btn[aria-expanded=true]:not(#sidebarToggle){background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-xs)}
.icon-btn .dot{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--danger);color:#fff;font-size:.62rem;font-weight:700;line-height:1;display:grid;place-items:center;border:2px solid var(--canvas)}
.user-btn{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--ink);text-align:left;transition:background .15s,border-color .15s}
.user-btn:hover,.user-btn[aria-expanded=true]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-xs)}
.user-btn .avatar-sm{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.user-btn .u-name{font-weight:600;font-size:.88rem;line-height:1.2}
.user-btn .u-role{font-size:.72rem;color:var(--muted);line-height:1.2}
.user-menu{min-width:250px}
.user-menu .um-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line-2)}
.user-menu .um-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.user-menu .um-name{font-weight:600;color:var(--ink);font-size:.9rem}
.user-menu .um-role{font-size:.75rem;color:var(--muted)}
.mobile-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;min-width:0}
.mobile-brand .brand-mark,.mobile-brand .brand-logo{width:34px;height:34px;border-radius:10px;font-size:1.05rem}
/* ปุ่มค้นหาด่วนบนแถบหัว (เปิดหน้าต่างค้นหา: Ctrl+K หรือ /) */
.hdr-search{display:inline-flex;align-items:center;gap:10px;flex:0 1 340px;min-width:0;height:40px;padding:0 7px 0 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:.88rem;text-align:left;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s,color .15s}
.hdr-search:hover{border-color:var(--primary-200);color:var(--ink-2);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.08)}
.hdr-search>.bi{font-size:1rem;color:var(--muted-2)}
.hdr-search:hover>.bi{color:var(--primary-ink)}
.hsr-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsr-kbd{flex:none;font-family:inherit;font-size:.7rem;font-weight:600;line-height:1.5;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;white-space:nowrap}
.content{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:12px 28px 24px}
.app-footer{text-align:center;color:var(--muted-2);font-size:.8rem;padding:8px 28px 24px}
@media (max-width:1199.98px) and (min-width:992px){.hdr-search{flex-basis:240px}}
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .sidebar.show{transform:none}
  .sidebar-backdrop.show{display:block}
  .app-main{margin-left:0}
  .app-header{height:58px;padding:0 10px 0 14px;background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
  .content{padding:16px 14px 20px}
  .app-footer{padding:8px 14px 20px}
  /* มือถือ/แท็บเล็ต: ปุ่มเมนู วิชา สร้าง แจ้งเตือน ย้ายไปแถบเมนูล่าง ; แถบหัวเหลือแบรนด์ + ค้นหา + ผู้ใช้ */
  body.has-bnav .hdr-toggle,body.has-bnav .hdr-subj,body.has-bnav .hdr-create,body.has-bnav .hdr-notif{display:none!important}
  body.has-bnav .mobile-brand{margin-right:auto}
  .hdr-search{flex:none;width:40px;height:40px;padding:0;justify-content:center;border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)}
  .hdr-search>.bi{font-size:1.15rem;color:var(--ink-2)}
  .hsr-text,.hsr-kbd{display:none}
  .header-actions{margin-left:0;gap:2px}
}

/* ---------- ย่อเมนูด้านข้างเหลือไอคอน (เดสก์ท็อป · ปุ่ม ☰ ที่แถบหัว · จำค่าไว้ในเบราว์เซอร์) ---------- */
.subj-ico{display:none;width:30px;height:30px;flex:none;border-radius:9px;place-items:center;background:var(--c);color:#fff;font-size:.95rem}
.sidebar .side-link .subj-ico>i,.sidebar .side-link.active .subj-ico>i{color:#fff;width:auto;font-size:1rem}
@media (min-width:992px){
  html.sb-mini{--sidebar-w:76px}
  .sb-mini .sidebar-brand{justify-content:center;gap:0;margin:0 8px;padding:9px 0}
  .sb-mini .brand-text{display:none}
  .sb-mini .sidebar-scroll{scrollbar-width:none}
  .sb-mini .sidebar-scroll::-webkit-scrollbar{display:none}
  .sb-mini .nav-section{height:1px;padding:0;margin:12px 8px;background:var(--line-2);font-size:0;overflow:hidden}
  .sb-mini .nav-section::after{display:none}
  .sb-mini .nav-section:first-child{margin:4px 0;background:transparent}
  .sb-mini .side-link{justify-content:center;gap:0;padding:5px 0}
  .sb-mini .side-link.active{background:none;box-shadow:none}
  .sb-mini .side-link>.text-truncate{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .sb-mini .side-link .side-count{position:absolute;top:0;right:4px;margin:0;min-width:19px;padding:0 5px;line-height:15px;font-size:.6rem;text-align:center;border:2px solid var(--surface)}
  .sb-mini .side-link.subj{padding:5px 0}
  .sb-mini .side-link .class-dot{display:none}
  .sb-mini .side-link .subj-ico{display:grid}
  .sb-mini .side-link.subj.active .subj-ico{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
  .sb-mini .side-subj{justify-content:center;padding:6px 0;background:none;border-color:transparent}
  .sb-mini .side-subj .ss-txt{display:none}
  .sb-mini .sidebar-dark .nav-section{background:rgba(var(--on-secondary-rgb),.14)}
  .sb-mini .sidebar-dark .nav-section:first-child{background:transparent}
  .sb-mini .sidebar-dark .side-link .side-count{border-color:var(--secondary)}
  .sb-mini .sidebar-dark .side-link.subj.active .subj-ico{box-shadow:0 0 0 2px var(--secondary),0 0 0 4px var(--c)}
}
@media (prefers-reduced-motion:reduce){.sidebar,.app-main{transition:none}}

/* ---------- แจ้งเตือนในแถบหัว ---------- */
.notif-menu{width:360px;max-width:calc(100vw - 24px);padding:0;overflow:hidden}
.notif-menu .nm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.notif-menu .nm-item{display:flex;gap:12px;padding:12px 16px;color:var(--ink-2);border-bottom:1px solid var(--line-2);text-decoration:none}
.notif-menu .nm-item:hover{background:var(--surface-2)}
.notif-menu .nm-item.unread{background:var(--primary-50)}
.notif-menu .nm-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--primary-100);color:var(--primary-ink)}
.notif-menu .nm-title{font-size:.85rem;font-weight:500;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-menu .nm-time{font-size:.75rem;color:var(--muted)}
.notif-menu .nm-foot{display:block;text-align:center;padding:10px;font-weight:500;font-size:.85rem}

/* ---------- หัวเรื่องของหน้า ---------- */
.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin:8px 0 22px}
.page-header h1{font-size:1.6rem;font-weight:700;margin:0;color:var(--ink);display:flex;align-items:center;gap:12px;text-wrap:balance;letter-spacing:-.005em}
.page-header h1 > i{width:44px;height:44px;border-radius:13px;display:inline-grid;place-items:center;font-size:1.2rem;background:linear-gradient(135deg,var(--primary),var(--primary-700));color:var(--on-primary);box-shadow:0 10px 20px -12px rgba(var(--primary-rgb),.9),inset 0 1px 0 rgba(255,255,255,.18);margin-right:2px!important}
.page-sub{color:var(--muted);font-size:.9rem;margin-top:4px}
.page-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- การ์ด ---------- */
.card{--bs-card-border-color:var(--line);--bs-card-border-radius:var(--r-lg);--bs-card-inner-border-radius:calc(var(--r-lg) - 1px);--bs-card-cap-bg:transparent;--bs-card-spacer-y:1.1rem;--bs-card-spacer-x:1.25rem;--bs-card-cap-padding-y:1rem;--bs-card-cap-padding-x:1.25rem;border:1px solid var(--line);box-shadow:var(--shadow-sm);border-radius:var(--r-lg);background:var(--surface)}
.card-header{background:transparent;border-bottom:1px solid var(--line-2);font-weight:600;color:var(--ink);font-size:.97rem}
.card-header .small,.card-header small{font-weight:400}
.card-footer{background:transparent;border-top:1px solid var(--line-2)}
.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.card-title-row h2,.card-title-row h3,.card-title-row .h6{font-size:1rem;font-weight:600;margin:0}
.section-title{font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:8px}

/* ---------- ตัวเลขสรุป (KPI) ---------- */
.kpi{--kc:var(--primary-rgb);position:relative;overflow:hidden;isolation:isolate;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;height:100%;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .2s,transform .2s var(--ease)}
/* แสงสีจางๆ มุมขวาบน ตามสีไอคอนของการ์ด */
.kpi::after{content:"";position:absolute;z-index:-1;right:-46px;top:-56px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--kc),.13),rgba(var(--kc),0));pointer-events:none}
.kpi:has(.chip-blue){--kc:59,130,246}.kpi:has(.chip-violet){--kc:139,92,246}.kpi:has(.chip-emerald){--kc:16,185,129}.kpi:has(.chip-amber){--kc:245,158,11}
.kpi:has(.chip-rose){--kc:244,63,94}.kpi:has(.chip-cyan){--kc:6,182,212}.kpi:has(.chip-slate){--kc:100,116,139}
a.kpi:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);color:inherit;transform:translateY(-2px)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi-label{font-size:.85rem;color:var(--muted);font-weight:500}
.kpi-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.12rem;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.kpi-value{font-size:2.05rem;font-weight:700;color:var(--ink);line-height:1.15;margin-top:6px;letter-spacing:-.015em}
.kpi-value small{font-size:.95rem;font-weight:500;color:var(--muted)}
.kpi-foot{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.kpi-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 12px}
.kpi-value{white-space:nowrap}
.kpi-spark{display:block;width:112px;height:32px;flex:none;margin-bottom:6px;overflow:visible}
.kpi-spark rect{transition:opacity .15s}
.kpi-spark rect:hover{opacity:.75}
.chip-primary{background:var(--primary-100);color:var(--primary-ink)}
.chip-blue{background:#e0ecff;color:#1d4ed8}.chip-violet{background:#ede9fe;color:#6d28d9}.chip-emerald{background:#d1fae5;color:#047857}
.chip-amber{background:#fef3c7;color:#b45309}.chip-rose{background:#ffe4e6;color:#be123c}.chip-cyan{background:#cffafe;color:#0e7490}.chip-slate{background:#e2e8f0;color:#334155}
.trend-up{color:var(--success-ink)}.trend-down{color:var(--danger-ink)}
/* สถิติแบบเดิม (ใช้ในหลายหน้า) */
.stat-card{border-radius:var(--r-lg);padding:16px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;height:100%;color:inherit;transition:border-color .15s,box-shadow .15s}
a.stat-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);color:inherit}
.stat-card .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;background:var(--primary-100);color:var(--primary-ink);flex:none}
.stat-card .val{font-size:1.5rem;font-weight:700;line-height:1.15;color:var(--ink)}
.stat-card .lbl{font-size:.82rem;color:var(--muted)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-sm);height:100%;color:inherit}
a.tile:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);color:inherit}
.tile .t-label{font-size:.8rem;color:var(--muted);font-weight:500}
.tile .t-value{font-size:1.6rem;font-weight:700;line-height:1.2;color:var(--ink);margin-top:2px}
.tile .t-sub{font-size:.78rem;color:var(--muted)}

/* ---------- สิ่งที่ต้องดูแล / รายการ ---------- */
.attn-list{display:flex;flex-direction:column}
.attn-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line-2);color:var(--ink-2);text-decoration:none}
.attn-item:last-child{border-bottom:0}
a.attn-item:hover{color:var(--ink)}
a.attn-item:hover .bi-chevron-right{transform:translateX(2px);color:var(--ink)}
.attn-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:1rem}
.attn-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.attn-title{font-weight:500;color:var(--ink);font-size:.9rem}
.attn-sub{font-size:.78rem;color:var(--muted)}
.attn-count{font-weight:700;color:var(--ink);font-size:1.05rem}
.attn-item .bi-chevron-right{color:var(--muted-2);transition:transform .15s}
.empty-state{text-align:center;padding:28px 16px;color:var(--muted)}
.empty-state .es-icon{width:56px;height:56px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;font-size:1.5rem;background:var(--success-100);color:var(--success-ink);box-shadow:0 0 0 6px var(--success-50)}
.empty-state.neutral .es-icon{background:var(--surface-3);color:var(--muted);box-shadow:0 0 0 6px var(--surface-2)}
.empty-state .es-title{font-weight:600;color:var(--ink);margin-bottom:2px}

/* ---------- ไทม์ไลน์กิจกรรม ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.tl-item{display:flex;gap:12px;padding:0 0 16px;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--line-2);border-radius:1px}
.tl-dot{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:.9rem}
.tl-primary{background:var(--primary-100);color:var(--primary-ink)}.tl-success{background:var(--success-100);color:var(--success-ink)}
.tl-danger{background:var(--danger-100);color:var(--danger-ink)}.tl-warning{background:var(--warning-100);color:var(--warning-ink)}
.tl-info{background:var(--info-100);color:var(--info-ink)}.tl-secondary{background:var(--surface-3);color:var(--muted)}
.tl-body{min-width:0;flex:1;font-size:.875rem;line-height:1.45;padding-top:5px}
.tl-body strong{color:var(--ink);font-weight:600}
.tl-meta{font-size:.76rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- แถบสถานะการส่งงาน ---------- */
.dist-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--surface)}
.dist-bar span{display:block;height:100%;min-width:3px}
.dist-bar .s-good{background:var(--success)}.dist-bar .s-warn{background:#f59e0b}.dist-bar .s-bad{background:var(--danger)}
.dist-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.dist-legend .dl{border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;background:var(--surface-2)}
.dist-legend .dl-label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.dist-legend .dl-value{font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.3}
.dist-legend .dl-value small{font-size:.8rem;font-weight:500;color:var(--muted)}
@media (max-width:575.98px){.dist-legend .dl{padding:8px 10px}.dist-legend .dl-label{font-size:.72rem}.dist-legend .dl-value{font-size:1.05rem}.kpi{padding:14px}.kpi-value{font-size:1.6rem}.kpi-spark{width:100%;margin-bottom:0}.page-header h1{font-size:1.35rem}}

/* ---------- รูปโปรไฟล์ ---------- */
.avatar-sm{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.avatar-md{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.avatar-lg{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
/* จัดตำแหน่งรูปโปรไฟล์ (avatar-crop.js) */
.avc-dialog{max-width:420px}
.avc-stage{position:relative;width:min(320px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:16px;background:#0f172a;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.avc-stage:active{cursor:grabbing}
.avc-stage:focus-visible{outline:3px solid var(--primary-200);outline-offset:2px}
.avc-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.avc-mask{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(15,23,42,.55);outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;pointer-events:none}
.avc-zoom{display:flex;align-items:center;gap:10px;width:min(320px,100%);margin:14px auto 0;color:var(--muted)}
.avc-zoom .form-range{flex:1}
.avc-note{margin-top:6px;font-size:.8rem;color:var(--success-ink,#15803d)}
.avatar-xs{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.teacher-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 8px 3px 3px;margin:2px 4px 2px 0;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);font-size:.85rem;color:var(--ink-2)}
.teacher-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.teacher-chip .btn-close{width:.55em;height:.55em;padding:.2em;margin-left:2px;background-size:.55em}
.avatar-stack{display:inline-flex;align-items:center}
.avatar-stack img{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px;object-fit:cover}
.avatar-stack img:first-child{margin-left:0}
.avatar-more{width:28px;height:28px;border-radius:50%;margin-left:-8px;background:var(--surface-3);border:2px solid var(--surface);font-size:.7rem;font-weight:600;color:var(--muted);display:grid;place-items:center}

/* ---------- ปุ่ม ---------- */
.btn{white-space:nowrap;--bs-btn-font-weight:500;--bs-btn-padding-y:.45rem;--bs-btn-padding-x:.95rem;--bs-btn-border-radius:10px;--bs-btn-font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;gap:2px;transition:background .15s,border-color .15s,color .15s,box-shadow .2s,transform .12s}
.btn:not(:disabled):not(.disabled):active{transform:translateY(1px)}
.btn-sm{--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.7rem;--bs-btn-font-size:.82rem;--bs-btn-border-radius:8px}
.btn-lg{--bs-btn-padding-y:.65rem;--bs-btn-padding-x:1.2rem;--bs-btn-font-size:1rem;--bs-btn-border-radius:12px}
.btn-link{display:inline;--bs-btn-padding-x:.25rem}
.btn-primary{--bs-btn-color:var(--on-primary);--bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);--bs-btn-hover-color:var(--on-primary);--bs-btn-hover-bg:var(--primary-600);--bs-btn-hover-border-color:var(--primary-600);--bs-btn-active-color:var(--on-primary);--bs-btn-active-bg:var(--primary-700);--bs-btn-active-border-color:var(--primary-700);--bs-btn-disabled-color:var(--on-primary);--bs-btn-disabled-bg:var(--primary);--bs-btn-disabled-border-color:var(--primary);--bs-btn-focus-shadow-rgb:var(--primary-rgb);background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));box-shadow:0 1px 2px rgba(16,24,40,.10),0 6px 14px -8px rgba(var(--primary-rgb),.75),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:hover{box-shadow:0 1px 2px rgba(16,24,40,.10),0 10px 20px -10px rgba(var(--primary-rgb),.85),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:disabled,.btn-primary.disabled,fieldset:disabled .btn-primary{box-shadow:none}
.btn-outline-primary{--bs-btn-color:var(--primary-ink);--bs-btn-bg:var(--primary-50);--bs-btn-border-color:var(--primary-100);--bs-btn-hover-color:var(--primary-ink);--bs-btn-hover-bg:var(--primary-100);--bs-btn-hover-border-color:var(--primary-200);--bs-btn-active-color:var(--primary-ink);--bs-btn-active-bg:var(--primary-200);--bs-btn-active-border-color:var(--primary-200);--bs-btn-focus-shadow-rgb:var(--primary-rgb)}
.btn-light,.btn-outline-secondary{--bs-btn-color:var(--ink-2);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--line);--bs-btn-hover-color:var(--ink);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-border-color:#d5dae4;--bs-btn-active-color:var(--ink);--bs-btn-active-bg:var(--surface-3);--bs-btn-active-border-color:#d5dae4;box-shadow:var(--shadow-xs)}
.btn-success{--bs-btn-bg:var(--success);--bs-btn-border-color:var(--success);--bs-btn-hover-bg:#15803d;--bs-btn-hover-border-color:#15803d}
.btn-outline-success{--bs-btn-color:var(--success-ink);--bs-btn-bg:var(--success-50);--bs-btn-border-color:#bbf7d0;--bs-btn-hover-color:var(--success-ink);--bs-btn-hover-bg:var(--success-100);--bs-btn-hover-border-color:#86efac}
.btn-outline-danger{--bs-btn-color:var(--danger-ink);--bs-btn-bg:var(--surface);--bs-btn-border-color:#fecaca;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--danger);--bs-btn-hover-border-color:var(--danger)}
.btn-outline-warning{--bs-btn-color:var(--warning-ink);--bs-btn-bg:var(--warning-50);--bs-btn-border-color:#fde68a;--bs-btn-hover-color:var(--warning-ink);--bs-btn-hover-bg:var(--warning-100);--bs-btn-hover-border-color:#fcd34d}
.btn-warning{--bs-btn-bg:#f59e0b;--bs-btn-border-color:#f59e0b;--bs-btn-hover-bg:#d97706;--bs-btn-hover-border-color:#d97706;--bs-btn-color:#111827;--bs-btn-hover-color:#111827}
.btn-group>.btn,.btn-group-sm>.btn{display:inline-flex}

/* ---------- ฟอร์ม ---------- */
.form-label{font-weight:500;color:var(--ink-2);font-size:.875rem;margin-bottom:.35rem}
.form-text{color:var(--muted);font-size:.78rem}
.form-control,.form-select{border-color:var(--line);border-radius:10px;padding:.5rem .8rem;font-size:.9rem;color:var(--ink);background-color:var(--surface);box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s}
.form-control-sm,.form-select-sm{padding:.3rem .6rem;font-size:.82rem;border-radius:8px}
.form-select{padding-right:2.25rem;background-position:right .75rem center}
.form-select-sm{padding-right:2rem;background-position:right .55rem center}
.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.8rem;background-image:none}
.form-control-lg{padding:.7rem 1rem;font-size:1rem;border-radius:12px}
.form-control::placeholder{color:var(--muted-2)}
.form-control:hover:not(:disabled):not([readonly]):not(:focus),.form-select:hover:not(:disabled):not(:focus){border-color:#cdd5e1}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:var(--ring)}
.form-check-input{border-color:#cbd2de}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14)}
.form-control-color{padding:.3rem;height:42px}
.input-group-text{background:var(--surface-2);border-color:var(--line);color:var(--muted);font-size:.85rem}
.input-icon{position:relative}
.input-icon>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-2);font-size:1.05rem;pointer-events:none}
.input-icon>.form-control{padding-left:42px}
.input-icon>.toggle-pass{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);width:36px;height:36px;border-radius:8px}
.input-icon>.toggle-pass:hover{background:var(--surface-3);color:var(--ink)}

/* ---------- ตาราง ---------- */
.table{--bs-table-bg:transparent;--bs-table-hover-bg:var(--surface-2);--bs-table-border-color:var(--line-2);--bs-table-color:var(--ink-2);margin-bottom:0;font-size:.9rem}
.table>:not(caption)>*>*{padding:.75rem .9rem;border-bottom-color:var(--line-2)}
.table-sm>:not(caption)>*>*{padding:.5rem .75rem}
.table thead th{font-weight:600;font-size:.78rem;color:var(--muted);background:var(--surface-2);white-space:nowrap;border-bottom:1px solid var(--line);letter-spacing:.01em}
.table-hover>tbody>tr:hover>*{--bs-table-bg-state:var(--primary-50)}
.card>.table-responsive:first-child .table thead th:first-child,.card>.table-responsive:first-child>.table{border-top-left-radius:var(--r-lg)}
.card .table tbody tr:last-child>*{border-bottom:0}
.table-hover>tbody>tr{transition:background .1s}
.table-bordered>:not(caption)>*>*{border-color:var(--line-2)}
.table-gradebook{font-size:.84rem}
.table-gradebook th,.table-gradebook td{white-space:nowrap}
.table-gradebook .sticky{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line-2)}
/* สมุดคะแนนรายวิชา (อ่านง่าย) */
.gb{font-size:.9rem}
.gb th{padding:10px 12px;font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--line);text-align:center;vertical-align:bottom}
.gb th small{display:block;margin-top:2px;font-size:.72rem;font-weight:500;color:var(--muted)}
.gb td{padding:10px 12px;text-align:center;border-bottom:1px solid var(--line-2)}
.gb tbody tr:last-child td{border-bottom:0}
.gb .gb-name{text-align:left;min-width:200px}
.gb th.gb-name{background:var(--surface-2)}
.gb td.gb-name a{color:var(--ink);font-weight:500;text-decoration:none}
.gb td.gb-name a:hover{color:var(--primary-ink);text-decoration:underline}
.gb .gb-wt{display:block;max-width:150px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;color:var(--ink);text-decoration:none}
.gb a.gb-wt:hover{color:var(--primary-ink)}
.gb .gb-cell a{text-decoration:none;color:inherit;display:block}
.gb .gb-sc{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gb .gb-none{color:var(--line)}
.gb .gb-wait{color:var(--info-ink)}
.gb td.is-wait{background:var(--info-50)}
.gb td.is-miss{background:var(--danger-50)}
.gb td.is-miss .gb-none{color:var(--danger-ink)}
.gb .gb-cat{background:var(--surface-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gb th.gb-cat,.gb th.gb-sum{background:var(--surface-3)}
.gb .gb-total{font-weight:700;font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.gb-grade{display:inline-grid;place-items:center;min-width:2.4em;height:2em;padding:0 .5em;border-radius:999px;font-weight:700;font-size:.95rem}
.gb-grade.is-a{background:#dcfce7;color:#15803d}
.gb-grade.is-b{background:#dbeafe;color:#1d4ed8}
.gb-grade.is-c{background:#fef9c3;color:#a16207}
.gb-grade.is-d{background:#ffedd5;color:#c2410c}
.gb-grade.is-f{background:#fee2e2;color:#b91c1c}
.gb-grade.is-r{background:#fef3c7;color:#92400e;cursor:help}
.gb-grade.is-none{color:var(--muted)}
/* หัวตาราง 2 ชั้น: 4 ช่วงคะแนน */
.gb-grouped .g1{--gt:#eef4ff;--gk:#1d4ed8}
.gb-grouped .g2{--gt:#f3efff;--gk:#6d28d9}
.gb-grouped .g3{--gt:#e9faf6;--gk:#0f766e}
.gb-grouped .g4{--gt:#fff4e8;--gk:#c2410c}
.gb-grouped th.gb-group{background:var(--gt);color:var(--gk);font-size:.88rem;font-weight:700;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.gb-grouped th.gb-group small{color:var(--gk);opacity:.75}
.gb-grouped th.gb-name,.gb-grouped th.gb-sum{vertical-align:middle}
.gb-grouped th.gb-work{background:var(--surface-2);width:58px;min-width:58px;padding:8px 4px;cursor:help}
.gb-grouped th.gb-work .gb-wt{max-width:none;font-size:.95rem;font-weight:700}
.gb-grouped th.gb-work small{font-size:.68rem}
.gb-grouped td.gb-cell{padding:10px 4px;min-width:58px}
.gb-grouped .gb-sub{min-width:64px;padding-left:6px;padding-right:6px}
.gb-grouped .gb-sub{background:var(--gt);color:var(--gk);font-weight:700;font-variant-numeric:tabular-nums}
.gb-grouped th.gb-sub small{color:var(--gk);opacity:.75}
.gb-grouped .gs{border-left:2px solid var(--line)}
.gb-legend{display:flex;flex-wrap:wrap;gap:4px 16px}
.gb-legend span{display:inline-flex;align-items:center;gap:6px}
.gb-key{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line)}
.gb-key.is-wait{background:var(--info-50)}
.gb-key.is-miss{background:var(--danger-50)}
.table-danger{--bs-table-bg:var(--danger-50);--bs-table-color:var(--ink-2)}
.table-info{--bs-table-bg:var(--info-50);--bs-table-color:var(--ink-2)}
.table-light{--bs-table-bg:var(--surface-2)}

/* ---------- ป้ายสถานะ (soft) ---------- */
.badge{font-weight:600;font-size:.72rem;padding:.32em .65em;border-radius:999px;letter-spacing:.01em}
.badge.text-bg-primary{background:var(--primary-100)!important;color:var(--primary-ink)!important}
.badge.text-bg-success,.badge.bg-success{background:var(--success-100)!important;color:var(--success-ink)!important}
.badge.text-bg-danger{background:var(--danger-100)!important;color:var(--danger-ink)!important}
.badge.text-bg-warning{background:var(--warning-100)!important;color:var(--warning-ink)!important}
.badge.text-bg-info{background:var(--info-100)!important;color:var(--info-ink)!important}
.badge.text-bg-secondary{background:var(--surface-3)!important;color:var(--ink-2)!important}
.badge.text-bg-dark,.badge.bg-dark{background:#e2e8f0!important;color:#1e293b!important}
.badge.text-bg-light,.badge.bg-light{background:var(--surface-3)!important;color:var(--ink-2)!important;border:0}
.badge.bg-danger{background:var(--danger)!important;color:#fff!important}

/* ---------- ส่วนประกอบ Bootstrap อื่น ---------- */
/* เมนู/หน้าต่าง/ป๊อปโอเวอร์ เป็นพื้นขาว (ไม่ใช้สีพื้นหลังของหน้า) */
.dropdown-menu{--bs-dropdown-bg:var(--surface)}
.modal{--bs-modal-bg:var(--surface)}
.popover{--bs-popover-bg:var(--surface)}
.offcanvas{--bs-offcanvas-bg:var(--surface)}
.pagination{--bs-pagination-bg:var(--surface)}
.nav-tabs{--bs-nav-tabs-link-active-bg:var(--surface)}
.alert{--bs-alert-border-radius:var(--r);border-width:1px;font-size:.9rem;padding:.8rem 1rem}
.alert-warning{--bs-alert-bg:var(--warning-50);--bs-alert-border-color:#fde68a;--bs-alert-color:#78350f}
.alert-info{--bs-alert-bg:var(--info-50);--bs-alert-border-color:#a5f3fc;--bs-alert-color:#164e63}
.alert-success{--bs-alert-bg:var(--success-50);--bs-alert-border-color:#bbf7d0;--bs-alert-color:#14532d}
.alert-danger{--bs-alert-bg:var(--danger-50);--bs-alert-border-color:#fecaca;--bs-alert-color:#7f1d1d}
.alert-light{--bs-alert-bg:var(--surface-2);--bs-alert-border-color:var(--line);--bs-alert-color:var(--ink-2)}
.alert-primary{--bs-alert-bg:var(--primary-50);--bs-alert-border-color:var(--primary-100);--bs-alert-color:var(--ink)}
/* ข้อความแจ้งผลด้านบนของหน้า (บันทึกแล้ว / ผิดพลาด): มีไอคอนตามชนิด */
.alert.flash{display:flex;align-items:flex-start;gap:10px;box-shadow:var(--shadow-sm);animation:dd-in .25s var(--ease)}
.alert.flash::before{font-family:bootstrap-icons;font-size:1.05rem;line-height:1.45;flex:none}
.alert.flash.alert-success::before{content:"\f26a";color:var(--success)}
.alert.flash.alert-danger::before{content:"\f622";color:var(--danger)}
.alert.flash.alert-warning::before{content:"\f33a";color:#f59e0b}
.alert.flash.alert-info::before,.alert.flash.alert-primary::before{content:"\f430";color:var(--info)}
.callout{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid #fde68a;background:linear-gradient(90deg,var(--warning-50),#fff);margin-bottom:20px}
.callout .c-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--warning-100);color:var(--warning-ink);font-size:1.15rem;flex:none}
.callout .c-text{flex:1 1 220px;font-size:.9rem;color:#78350f}
.callout .c-text strong{color:#451a03}
.dropdown-menu{--bs-dropdown-border-radius:14px;--bs-dropdown-border-color:var(--line);--bs-dropdown-link-active-bg:var(--primary-50);--bs-dropdown-link-active-color:var(--primary-ink);--bs-dropdown-link-hover-bg:var(--surface-3);--bs-dropdown-font-size:.9rem;--bs-dropdown-padding-x:6px;--bs-dropdown-padding-y:6px;box-shadow:var(--shadow-lg);border-color:var(--line)}
.dropdown-menu.show{animation:dd-in .16s var(--ease)}
@keyframes dd-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.dropdown-item{border-radius:9px;padding:.48rem .75rem;display:flex;align-items:center;gap:8px;transition:background .12s,color .12s}
.dropdown-item>.bi{color:var(--muted);transition:color .12s}
.dropdown-item:hover>.bi,.dropdown-item:focus>.bi{color:var(--primary-ink)}
.dropdown-item.text-danger>.bi,.dropdown-item.text-danger:hover>.bi{color:inherit}
.dropdown-header{font-size:.75rem;color:var(--muted)}
.modal-content{border:0;border-radius:var(--r-xl);box-shadow:0 32px 72px -20px rgba(16,24,40,.45)}
.modal-header{border-bottom:1px solid var(--line-2);padding:1rem 1.25rem}
.modal-backdrop{--bs-backdrop-bg:#0b1324}
.modal-footer{border-top:1px solid var(--line-2)}
.modal-title{font-weight:600;font-size:1.05rem}
.modal-backdrop.show{opacity:.5}
.nav-pills{gap:6px;flex-wrap:wrap}
.nav-pills .nav-link{border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:.86rem;font-weight:500;padding:.4rem 1rem;box-shadow:var(--shadow-xs);transition:background .15s,border-color .15s,color .15s,box-shadow .2s}
.nav-pills .nav-link:hover{border-color:var(--primary-200);color:var(--ink);background:var(--primary-50)}
.nav-pills .nav-link.active{background:linear-gradient(135deg,var(--primary),var(--primary-600));border-color:var(--primary);color:var(--on-primary);box-shadow:0 6px 14px -8px rgba(var(--primary-rgb),.8)}
.nav-tabs .nav-link.active{color:var(--primary-ink);font-weight:600}
.pagination{--bs-pagination-border-radius:8px;--bs-pagination-color:var(--ink-2);--bs-pagination-border-color:var(--line);--bs-pagination-active-bg:var(--primary);--bs-pagination-active-border-color:var(--primary);--bs-pagination-active-color:var(--on-primary);--bs-pagination-hover-bg:var(--surface-2);gap:4px}
.page-link{border-radius:8px!important}
.progress{--bs-progress-height:8px;--bs-progress-border-radius:999px;--bs-progress-bg:var(--primary-50);--bs-progress-bar-bg:var(--primary)}
.progress-bar{background-color:var(--primary)}
.list-group{--bs-list-group-border-color:var(--line-2);--bs-list-group-item-padding-y:.75rem;--bs-list-group-item-padding-x:1.25rem}
.list-group-flush>.list-group-item{background:transparent}
.btn-close:focus{box-shadow:0 0 0 4px rgba(var(--primary-rgb),.14)}

/* ---------- การ์ดชั้นเรียน ---------- */
.class-card{border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);height:100%;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s}
.class-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d5dae4}
.class-card .head{position:relative;padding:18px 18px 16px;min-height:104px;color:var(--cc-text,#fff);background:linear-gradient(135deg,var(--cc,var(--primary)),var(--cc-2,var(--primary-700)));overflow:hidden}
.class-card .head::before,.class-card .head::after{content:"";position:absolute;border-radius:50%;background:rgba(var(--cc-text-rgb,255,255,255),.12)}
.class-card .head::before{width:140px;height:140px;right:-40px;top:-60px}
.class-card .head::after{width:70px;height:70px;right:60px;bottom:-40px;background:rgba(var(--cc-text-rgb,255,255,255),.08)}
.class-card .head h5{margin:0;font-weight:700;font-size:1.15rem;position:relative;z-index:1;color:inherit}
.class-card .head a{color:inherit;text-decoration:none}
.class-card .head .cc-meta{position:relative;z-index:1;font-size:.8rem;opacity:.85;margin-top:2px}
.class-card .body{padding:14px 18px;flex:1;display:flex;flex-direction:column;gap:10px;font-size:.85rem}
.class-card .subj-chips{display:flex;flex-wrap:wrap;gap:6px}
.class-card .subj-chips span{background:var(--surface-3);color:var(--ink-2);border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:500}
.class-card .subj-chips span.is-add{background:var(--info-50);color:var(--info-ink);box-shadow:inset 0 0 0 1px var(--info-100)}
.class-card .subj-chips span.is-add::after{content:" · เพิ่มเติม";opacity:.8}
.class-card .subj-chips span.is-act{background:var(--success-50);color:var(--success-ink);box-shadow:inset 0 0 0 1px var(--success-100)}
.class-card .subj-chips span.is-act::after{content:" · กิจกรรม";opacity:.8}
.class-card .cc-people{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.8rem;margin-top:auto}
.class-card .foot{padding:8px 12px;border-top:1px solid var(--line-2);display:flex;gap:4px;justify-content:flex-end}
.class-card .foot .btn{--bs-btn-padding-x:.55rem;box-shadow:none;border-color:transparent;background:transparent;color:var(--muted)}
.class-card .foot .btn:hover{background:var(--surface-3);color:var(--ink)}

/* ---------- แบนเนอร์และแท็บของห้องเรียน ---------- */
.class-banner{position:relative;border-radius:var(--r-xl);color:var(--cc-text,#fff);padding:16px 24px;margin-bottom:14px;overflow:hidden;background:linear-gradient(120deg,var(--cc,var(--primary)),var(--cc-2,var(--primary-700)));box-shadow:var(--shadow-sm)}
.class-banner::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-80px;top:-160px;background:rgba(var(--cc-text-rgb,255,255,255),.12)}
.class-banner::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:180px;bottom:-120px;background:rgba(var(--cc-text-rgb,255,255,255),.08)}
.class-banner>*{position:relative;z-index:1}
.class-banner h1{font-weight:700;font-size:1.45rem;line-height:1.3;margin:0;color:inherit}
.class-banner .cb-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.class-banner .cb-line .cb-meta{margin-right:4px;font-size:.85rem}
.class-banner .cb-row{display:flex;align-items:center;gap:20px}
.class-banner .cb-main{flex:1;min-width:0}
.class-banner .cb-roomno{flex:none;max-width:40%;align-self:stretch;display:flex;align-items:center;padding-left:20px;border-left:1px solid rgba(var(--cc-text-rgb,255,255,255),.22);font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(0,0,0,.16)}
@media (max-width:575.98px){.class-banner .cb-row{gap:12px}.class-banner .cb-roomno{font-size:1.9rem;padding-left:12px}}
.class-banner .cb-meta{opacity:.85;font-size:.9rem}
.class-banner .cb-subjects{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.class-banner .cb-subjects span{background:rgba(var(--cc-text-rgb,255,255,255),.16);border-radius:999px;padding:2px 10px;font-size:.78rem}
.class-banner .cb-add{font-style:normal;font-size:.68rem;font-weight:600;background:rgba(var(--cc-text-rgb,255,255,255),.22);border-radius:999px;padding:0 6px;margin-left:2px}
.join-code{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--cc-text-rgb,255,255,255),.16);border:1px solid rgba(var(--cc-text-rgb,255,255,255),.25);border-radius:12px;padding:6px 8px 6px 12px;font-size:.8rem}
.join-code code{color:inherit;font-size:1.05rem;font-weight:700;letter-spacing:.08em;background:transparent;padding:0}
.join-code button{border:0;background:rgba(var(--cc-text-rgb,255,255,255),.18);color:inherit;border-radius:8px;width:30px;height:30px;display:grid;place-items:center}
.join-code button:hover{background:rgba(var(--cc-text-rgb,255,255,255),.3)}
/* ครูเปิดหน้าวิชา: เมนูด้านข้างเป็นเมนูของวิชานั้น (สลับกับเมนูหลักด้วยปุ่ม "เมนูหลัก") ; จอใหญ่ซ่อนแท็บด้านบน จอเล็กยังมีแท็บ */
.sidebar.is-subject [data-side-panel="main"],.sidebar:not(.is-subject) [data-side-panel="subject"]{display:none}
.side-panel.side-in-left{animation:side-in-left .22s ease-out}
.side-panel.side-in-right{animation:side-in-right .22s ease-out}
@keyframes side-in-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes side-in-right{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.side-back{margin:10px 0 8px;color:var(--muted);font-weight:600}
.side-back i{color:inherit}
.side-subject-head{display:flex;align-items:center;gap:12px;margin:8px 0 12px;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.side-subject-head .subj-tile{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:1.25rem}
.side-subject-text{min-width:0}
.side-subject-text b{display:block;font-size:.95rem;line-height:1.35;color:var(--ink)}
.side-subject-text small{display:block;margin-top:3px;font-size:.75rem;line-height:1.35;color:var(--muted)}
.side-link .side-room{flex:none;margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:.72rem;font-weight:600}
.side-link.active .side-room{background:var(--primary-100);color:var(--primary-ink)}
.sidebar-dark .side-subject-head{background:rgba(var(--on-secondary-rgb),.08);border-color:rgba(var(--on-secondary-rgb),.14)}
.sidebar-dark .side-subject-text b{color:var(--on-secondary)}
.sidebar-dark .side-subject-text small{color:rgba(var(--on-secondary-rgb),.65)}
.sidebar-dark .side-link .side-room{background:rgba(var(--on-secondary-rgb),.12);color:rgba(var(--on-secondary-rgb),.85)}
@media (min-width:992px){
  body.has-side-nav .class-nav{display:none}
  body.has-side-nav .class-banner{margin-bottom:22px}
  .sb-mini .side-subject-head{justify-content:center;margin:4px 0 8px;padding:4px 0;background:transparent;border:0}
  .sb-mini .side-subject-text,.sb-mini .side-link .side-room{display:none}
}
@media (prefers-reduced-motion:reduce){.side-panel.side-in-left,.side-panel.side-in-right{animation:none}}
.class-nav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.class-nav::-webkit-scrollbar{display:none}
@media (min-width:768px){.class-nav{flex-wrap:wrap;overflow:visible;row-gap:0}}
.class-nav a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:var(--muted);font-weight:500;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;transition:color .15s,border-color .15s}
.class-nav a:hover{color:var(--ink)}
.class-nav a.active,.class-nav .dropdown-toggle.active{color:var(--primary-ink);border-bottom-color:var(--primary);font-weight:600}
.class-nav .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:var(--muted);font-weight:500;font-size:.9rem;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent}
.class-nav .dropdown-toggle:hover{color:var(--ink)}
.class-nav .dropdown-menu a{border-bottom:0;margin:0;padding:.45rem .75rem;color:var(--ink-2);font-weight:400}
.class-nav .dropdown-menu a.active{background:var(--primary-50);color:var(--primary-ink);font-weight:600}

/* ---------- สตรีม / ความคิดเห็น / รายการงาน ---------- */
.comment{display:flex;gap:10px;padding:10px 0 0}
.comment .bubble{background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:8px 12px;flex:1;min-width:0}
.work-item{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;text-decoration:none;color:inherit;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s,transform .15s}
.work-item:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);color:inherit}
.work-item .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:1.15rem;background:var(--primary-100);color:var(--primary-ink)}
.work-item .ico.quiz{background:#ede9fe;color:#6d28d9}
.work-item .ico.video{background:#ffe4e6;color:#be123c}
.work-item .ico.material{background:var(--surface-3);color:var(--ink-2)}
.work-item.locked{background:var(--surface-2);box-shadow:none}
.work-item.locked .ico{background:var(--surface-3);color:var(--muted)}
.topic-title{display:flex;align-items:center;font-weight:700;font-size:1.05rem;color:var(--ink);padding-bottom:8px;margin:26px 0 12px;border-bottom:1px solid var(--line)}
/* งานในชั้นเรียน: สรุปคะแนน */
.cw-sum{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:6px;box-shadow:var(--shadow-xs)}
.cw-sum-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cw-sum-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;color:var(--primary-ink);background:var(--primary-100)}
.cw-sum-head b{display:block;font-size:1.02rem;color:var(--ink)}
.cw-sum-head small{display:block;font-size:.8rem;color:var(--muted)}
.cw-sum-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cw-sum-tile{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.cw-sum-tile span{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.cw-sum-tile b{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--ink)}
.cw-sum-tile b small{font-size:.75rem;font-weight:500;color:var(--muted)}
.cw-sum-tile em{font-style:normal;font-size:.75rem;color:var(--muted)}
.cw-sum-tile.is-empty b{color:var(--muted)}
.cw-sum-tile.is-total{background:var(--primary-50);border-color:var(--primary-100)}
.cw-sum-tile.is-total span,.cw-sum-tile.is-total b{color:var(--primary-ink)}
@media (max-width:991.98px){.cw-sum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cw-sum-tile.is-total{grid-column:1/-1}}
.w-field{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.w-field span{flex:1;min-width:0;font-weight:600;color:var(--ink-2)}
.w-field .form-control{flex:none;width:96px;text-align:center;font-weight:700}
.cut-wrap{max-width:620px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cut-table{width:100%;border-collapse:collapse}
.cut-table th{padding:8px 10px;font-size:.78rem;font-weight:600;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line);text-align:center}
.cut-table th:last-child{text-align:left}
.cut-table td{padding:5px 10px;border-bottom:1px solid var(--line-2)}
.cut-table tr:last-child td{border-bottom:0}
.cut-table td:not(.cut-level){width:22%}
.cut-in{max-width:110px;margin:0 auto;text-align:center;font-weight:600}
.cut-in.is-grade{font-weight:700;color:var(--primary-ink)}
.cut-in[type=number]{-moz-appearance:textfield;appearance:textfield}
.cut-in[type=number]::-webkit-inner-spin-button,.cut-in[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cut-row.is-blank .cut-in{border-color:var(--primary-200)}
.cut-row.is-bad td{background:var(--danger-50)}
.cut-level{font-size:.85rem;color:var(--ink-2)}
.cut-warn{display:block;font-size:.74rem;color:var(--danger-ink);line-height:1.2}
.cut-warn:empty{display:none}
.r-box{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow:hidden}
.r-switch{padding:12px 14px 12px 3.4em;margin:0}
.r-works{padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--surface)}
.r-works-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.85rem}
.r-works-head b span{font-weight:500;color:var(--muted)}
.r-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.r-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;margin:0}
.r-item:hover{background:var(--surface-2)}
.r-item .form-check-input{grid-row:span 2;margin:0}
.r-title{font-weight:600;font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-item small{font-size:.74rem;color:var(--muted)}
@media (max-width:767.98px){.r-list{grid-template-columns:1fr}}
.r-switch .form-check-label b{display:block;color:var(--ink)}
.r-switch .form-check-label span{display:block;font-size:.8rem;color:var(--muted)}
@media (max-width:575.98px){.cut-table td,.cut-table th{padding-left:6px;padding-right:6px}.cut-level{font-size:.78rem}}
/* งานในชั้นเรียน: หัวข้อ + รายการพร้อมไอคอนสีตามชนิด (เรียบง่าย) */
.cw-topic{border-bottom:0;padding-bottom:0;margin:28px 0 12px;gap:12px}
.cw-topic-main{display:flex;align-items:center;gap:12px;min-width:0}
.cw-topic-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;color:var(--primary-ink);background:var(--primary-100)}
.cw-topic-text{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.cw-topic-text b{font-size:1.08rem;font-weight:700;color:var(--ink)}
.cw-topic-text small{font-size:.8rem;font-weight:500;color:var(--muted)}
.cw-list .work-item{--tb:#f1f5f9;--tc:#475569;gap:14px;padding:12px 16px 12px 14px;border-radius:14px;margin-bottom:10px}
.cw-list .work-item:hover{box-shadow:var(--shadow-sm)}
.cw-list .work-row .work-item{margin-bottom:0}
.cw-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;color:var(--tc);background:var(--tb)}
.cw-title{font-weight:600;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.cw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-top:3px;font-size:.8rem;color:var(--muted)}
.cw-meta>span+span::before{content:"·";margin:0 7px;color:var(--muted)}
.cw-meta .cw-type{font-weight:600;color:var(--tc)}
.cw-meta .is-overdue{color:var(--danger-ink)}
.cw-side{flex:none;display:flex;align-items:center;gap:6px}
.cw-stat{min-width:76px;text-align:center;line-height:1.15}
.cw-stat b{display:block;font-size:1.05rem;font-weight:700;color:var(--ink)}
.cw-stat b span{font-size:.8rem;font-weight:500;color:var(--muted)}
.cw-stat small{display:block;font-size:.72rem;color:var(--muted)}
.cw-stat.is-done b{color:#047857}
.cw-side .badge{margin-right:4px}
.work-item.t-blue{--tb:#e0edff;--tc:#1d4ed8}
.work-item.t-rose{--tb:#ffe4e9;--tc:#be123c}
.work-item.t-red{--tb:#fee2e2;--tc:#dc2626}
.work-item.t-violet{--tb:#ede9fe;--tc:#6d28d9}
.work-item.t-indigo{--tb:#e0e7ff;--tc:#4338ca}
.work-item.t-amber{--tb:#fef3c7;--tc:#b45309}
.work-item.t-teal{--tb:#ccfbf1;--tc:#0f766e}
.work-item.t-green{--tb:#dcfce7;--tc:#15803d}
.work-item.t-emerald{--tb:#d1fae5;--tc:#047857}
.work-item.t-cyan{--tb:#cffafe;--tc:#0e7490}
.work-item.t-slate{--tb:#f1f5f9;--tc:#475569}
.cw-list .work-item.locked{--tb:var(--surface-3);--tc:var(--muted)}
@media (max-width:575.98px){
  .cw-list .work-item{gap:12px;padding:11px 12px;flex-wrap:wrap}
  .cw-list .work-item>.flex-grow-1{flex:1 1 0}
  .cw-ico{width:40px;height:40px;border-radius:11px;font-size:1.1rem}
  .cw-side{order:3;width:100%;padding-left:52px;justify-content:flex-end}
  .cw-stat{min-width:64px}
}
/* ตัวดู PDF ในหน้า */
.pv{display:flex;flex-direction:column;margin:10px 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#e9ecf2}
.pv-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--surface);border-bottom:1px solid var(--line);font-size:.85rem}
.pv-name{flex:1;min-width:60px;color:var(--ink-2)}
.pv-pages-ind{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.pv-grp{display:inline-flex;align-items:center;gap:2px;flex:none}
.pv-btn{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font-size:1rem;text-decoration:none}
.pv-btn:hover{background:var(--surface-3);color:var(--ink)}
.pv-pct{font-size:.8rem;min-width:52px;font-variant-numeric:tabular-nums}
.pv-stage{position:relative;height:min(72vh,820px);overflow:auto;padding:12px;outline:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pv-pages{display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;min-width:100%}
.pv-page{background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.22)}
.pv-page canvas{display:block}
.pv-msg{padding:28px 12px;text-align:center;color:var(--muted)}
.pv-msg[hidden]{display:none}
.pv.is-full{position:fixed;inset:0;z-index:1090;margin:0;border:0;border-radius:0}
.pv.is-full .pv-stage,.pv:fullscreen .pv-stage{height:auto;flex:1}
.pv:fullscreen{background:#e9ecf2}
html.pv-lock,html.pv-lock body{overflow:hidden}
@media (max-width:575.98px){.pv-stage{height:68vh;padding:8px}.pv-name{display:none}.pv-bar{justify-content:space-between}}
/* งานแบบทดสอบ: ตั้งค่าเมื่อเลือกแบบทดสอบจากคลังข้อสอบ */
.set-opts{padding:12px 14px;border:1px solid var(--primary-100);border-radius:12px;background:var(--primary-50)}
.set-opts-h{font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--ink)}
/* บทเรียนวิดีโอ: ที่มาของวิดีโอ (วางลิงก์ YouTube / วิดีโอที่มีอยู่) */
.vsrc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.vsrc-tabs{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-3)}
.vsrc-tabs .btn{border:0;border-radius:999px;padding:4px 12px;font-size:.82rem;color:var(--muted)}
.vsrc-tabs .btn:hover{color:var(--ink)}
.vsrc-tabs .btn-check:checked+.btn{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow-sm)}
.vsrc-tabs .btn-check:focus-visible+.btn{outline:2px solid var(--primary);outline-offset:1px}
.yt-ico{color:#ff0033;background:var(--surface-2)}
.yt-preview{display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.yt-preview img{flex:none;width:128px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#0f172a}
.yt-meta{min-width:0}
.yt-title{font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-sub{font-size:.8rem;color:var(--muted)}
.yt-sub:empty{display:none}
.yt-rules{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px;font-size:.875rem}
@media (max-width:575.98px){.yt-preview img{width:96px}}
/* ครู: การเข้าทำงานของนักเรียน (บทเรียนวิดีโอ / แบบทดสอบ) — เขียว ผ่าน · เหลือง รอตรวจ · ส้ม ทำใหม่ · แดง ยังไม่เข้า/ไม่ผ่าน · ฟ้า เข้าแล้วยังไม่จบ */
.eng-pass{--c:#16a34a;--bg:#dcfce7;--fg:#15803d}
.eng-wait{--c:#eab308;--bg:#fef9c3;--fg:#a16207}
.eng-retry{--c:#f97316;--bg:#ffedd5;--fg:#c2410c}
.eng-fail,.eng-never{--c:#dc2626;--bg:#fee2e2;--fg:#b91c1c}
.eng-doing{--c:#0891b2;--bg:#cffafe;--fg:#0e7490}
.eng-locked,.eng-other{--c:#94a3b8;--bg:var(--surface-3);--fg:var(--muted)}
.eng-chips{display:flex;flex-wrap:wrap;gap:6px}
.eng-chips button{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.82rem;color:var(--ink-2);line-height:1.5}
.eng-chips button:hover{border-color:var(--primary-200)}
.eng-chips button b{font-weight:600}
.eng-chips button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.eng-dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.eng-chips button[aria-pressed="true"] .eng-dot{background:#fff}
.eng-table th{font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.eng-table td{padding-top:10px;padding-bottom:10px}
.eng-table .eng-name{min-width:200px}
.eng-table .eng-video{min-width:210px}
.eng-table .eng-quiz{min-width:210px}
.eng-st{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;background:var(--bg);color:var(--fg)}
.eng-live{width:8px;height:8px;border-radius:50%;background:currentColor;animation:eng-pulse 1.4s ease-in-out infinite}
@keyframes eng-pulse{50%{opacity:.25}}
.eng-bar{display:block;width:96px;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;flex:none}
.eng-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.eng-bar.is-done i{background:var(--success)}
.eng-reset{white-space:nowrap;color:var(--muted)}
.eng-reset:hover{color:var(--danger-ink)}
.eng-reset-opts{display:grid;gap:8px}
.eng-reset-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.eng-reset-opt:has(input:checked){border-color:var(--primary);background:var(--primary-50)}
.eng-reset-opt .form-check-input{margin-top:.25rem;flex:none}
.eng-reset-opt b{display:block;color:var(--ink)}
.eng-reset-opt small{display:block;color:var(--muted);line-height:1.45}
@media (prefers-reduced-motion:reduce){.eng-live{animation:none}}
/* คลังข้อสอบ: การ์ดแบบทดสอบ */
.set-card{color:inherit;transition:border-color .15s,box-shadow .15s}
.set-card:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md);color:inherit}
.set-card .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:var(--primary-100);color:var(--primary-ink)}
/* โหมดแก้ไขงานในชั้นเรียน: ปุ่มจับลาก ปุ่มขึ้น/ลง/ลบ และพื้นที่วาง */
.work-row{position:relative;display:flex;align-items:stretch;gap:6px;margin-bottom:8px}
.work-row .work-item{flex:1;min-width:0;margin-bottom:0}
.work-drag,.work-edit,.topic-edit,.cw-edit-only{display:none}
.is-edit .topic-edit{display:inline-flex}
.is-edit .cw-edit-only{display:inline}
.is-edit .work-drag{display:grid;place-items:center;flex:none;width:30px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--muted);cursor:grab;touch-action:none;padding:0}
.is-edit .work-drag:hover{background:var(--primary-50);color:var(--primary-ink);border-color:var(--primary-200)}
.is-edit .work-edit{display:flex;flex:none;flex-direction:column;justify-content:center;gap:2px}
.is-edit .work-edit .btn{padding:2px 7px;line-height:1.2}
.is-edit .work-item{pointer-events:none;border-style:dashed}
.is-edit [data-topic]{min-height:46px;padding:6px;margin:0 -6px 8px;border-radius:var(--r-lg);border:2px dashed transparent;transition:border-color .15s,background .15s}
.is-edit.is-dragging [data-topic]{border-color:var(--primary-200);background:rgba(var(--primary-rgb),.04)}
.work-row.is-dragging{opacity:.45}
.work-row.is-dragging .work-item{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2)}
.is-dragging,.is-dragging *{cursor:grabbing!important;user-select:none}
[data-topic].is-saving{opacity:.7}
.is-edit .work-empty{padding:10px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
@media (max-width:575.98px){.is-edit .work-edit{flex-direction:row;align-items:center}.is-edit .work-row{flex-wrap:wrap}.is-edit .work-edit{width:100%;justify-content:flex-end}}
.todo-group{font-size:.78rem;font-weight:600;color:var(--muted);margin:16px 0 8px}
.note-item{border-left:3px solid var(--line);padding:6px 0 6px 12px;margin-bottom:12px}
.notif-item{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);margin-bottom:8px;text-decoration:none;color:inherit;transition:border-color .15s}
.notif-item:hover{border-color:var(--primary-200);color:inherit}
.notif-item.unread{background:var(--primary-50);border-color:var(--primary-100)}
.notif-item>.fs-4{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--primary-100);font-size:1.1rem!important;flex:none}
.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:12px 16px;border-top:1px solid var(--line);z-index:5;border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ---------- ปฏิทิน ---------- */
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-grid .dow{text-align:center;font-weight:600;color:var(--muted);font-size:.8rem;padding:4px}
.calendar-grid .day{background:var(--surface);min-height:104px;border-radius:12px;padding:6px 8px;border:1px solid var(--line-2);font-size:.8rem;min-width:0}
.calendar-grid .day.muted{background:transparent;border-color:transparent}
.calendar-grid .day.today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.cal-ev{display:block;padding:2px 7px;border-radius:6px;background:var(--primary);color:var(--on-primary);margin-top:4px;font-size:.72rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev:hover{color:var(--on-primary);filter:brightness(.95)}
.cal-ev.ev{background:var(--accent);color:var(--on-accent)}.cal-ev.quiz{background:#7c3aed;color:#fff}.cal-ev.video{background:#e11d48;color:#fff}
@media (max-width:767.98px){.calendar-grid{gap:3px}.calendar-grid .day{min-height:66px;font-size:.7rem;padding:4px;border-radius:8px}.cal-ev{font-size:.6rem;padding:1px 4px}}

/* ---------- แบบทดสอบ / วิดีโอ ---------- */
.quiz-question{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow-xs)}
.quiz-timer{position:sticky;top:calc(var(--header-h) + 8px);z-index:10}
/* ข้อสอบมีรูป: รูปโจทย์ (กดดูภาพใหญ่) · ตัวเลือกปรนัย (กดรูป = เลือกข้อนี้ · แว่นขยาย = ดูภาพใหญ่) */
.q-stem-img{display:block;width:max-content;max-width:100%;margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.q-stem-img img{display:block;max-width:100%;max-height:340px;width:auto;height:auto;object-fit:contain}
.qo-img{position:relative;display:inline-block;vertical-align:middle;margin:2px 8px 2px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.qo-img img{display:block;max-width:240px;max-height:160px;width:auto;height:auto;object-fit:contain}
.qo-zoom{position:absolute;right:4px;bottom:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.62);color:#fff;font-size:.9rem;text-decoration:none}
.qo-zoom:hover,.qo-zoom:focus-visible{background:rgba(15,23,42,.88);color:#fff}
.qo-text{vertical-align:middle}
.form-check-input:checked + .form-check-label .qo-img{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.25)}
.form-check:has(.qo-img){display:flex;align-items:center;gap:10px;padding-left:0;margin-bottom:8px!important}
.form-check:has(.qo-img) > .form-check-input{float:none;flex:none;margin:0}
.form-check:has(.qo-img) > .form-check-label{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;cursor:pointer}
.form-check:has(.qo-img) .qo-img{margin:0}
@media (max-width:575.98px){.qo-img img{max-width:min(200px,62vw);max-height:130px}.q-stem-img img{max-height:260px}}
/* ฟอร์มข้อสอบ: เพิ่ม/เปลี่ยน/ลบรูปของโจทย์และตัวเลือก */
.qimg{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.qimg-thumb[hidden]{display:none!important}
.qimg-stem{position:relative;display:inline-block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.qimg-stem img{display:block;max-width:240px;max-height:160px;width:auto;height:auto;object-fit:contain}
.qimg-del{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.62);color:#fff;font-size:1.05rem;line-height:1;display:grid;place-items:center}
.qimg-del:hover,.qimg-del:focus-visible{background:var(--danger);color:#fff}
.qopt .qimg-thumb{position:relative;background:var(--surface)}
.qopt .mq-thumb{max-width:60px;object-fit:cover}
.qopt .qimg-del{top:-7px;right:-7px;width:20px;height:20px;font-size:.9rem;z-index:6}
.video-wrap{position:relative;background:#000;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9}
.video-wrap video,.video-wrap iframe,.video-wrap #ytplayer{width:100%;height:100%;display:block;border:0}
.attention-overlay{position:absolute;inset:0;background:rgba(15,23,42,.88);display:flex;align-items:center;justify-content:center;color:#fff;z-index:5;text-align:center;padding:16px}
.rubric-table input{width:84px}
.color-swatch{width:36px;height:36px;border-radius:8px;border:1px solid var(--line)}

/* ---------- หน้าทำแบบทดสอบเต็มหน้าต่าง (layouts/exam) ---------- */
.exam-body{background:var(--canvas);min-height:100vh;min-height:100dvh;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
.exam-body button,.exam-body label,.exam-body a,.exam-body select{touch-action:manipulation}
.exam-flash{max-width:960px;margin:10px auto 0;padding:0 16px}
.exam-bar{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 2px 10px -6px rgba(15,23,42,.25)}
.exam-bar-in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.exam-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.exam-title .t{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-title .s{font-size:.8rem;color:var(--muted)}
.exam-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;background:#ede9fe;color:#6d28d9}
.exam-actions{display:flex;align-items:center;gap:8px;flex:none}
.exam-timer{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface-3);color:var(--ink);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.exam-timer.is-warn{background:var(--warning-50);color:var(--warning-ink)}
.exam-timer.is-danger{background:var(--danger-50);color:var(--danger);animation:examPulse 1s ease-in-out infinite}
@keyframes examPulse{50%{opacity:.6}}
.exam-icon{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2)}
.exam-icon:hover{background:var(--surface-3)}
.exam-progress{height:4px;background:var(--line-2)}
.exam-progress span{display:block;height:100%;width:0;background:var(--primary);transition:width .25s}
.exam-nav{max-width:960px;margin:0 auto;padding:12px 16px 0;display:flex;flex-wrap:wrap;gap:6px}
.exam-nav button{min-width:36px;height:36px;padding:0 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);font-size:.85rem;font-weight:600}
.exam-nav button:hover{border-color:var(--primary-200);color:var(--primary-ink)}
.exam-nav button.is-done{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.exam-main{max-width:960px;margin:0 auto;padding:12px 16px 48px}
.exam-rules{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin-bottom:12px;border-radius:12px;background:var(--warning-50);color:var(--warning-ink);font-size:.88rem;border:1px solid var(--warning-100)}
.exam-rules>i{font-size:1.15rem;line-height:1.3}
.exam-rules-short{display:none}
.exam-main .quiz-question{scroll-margin-top:84px}
/* ตัวเลือกปรนัยเป็นแถวกดได้ทั้งแถว (นิ้วแตะง่าย) */
.exam-main .form-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:9px 12px;margin:0 0 8px!important;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);cursor:pointer}
.exam-main .form-check:has(.qo-img){align-items:center}
.exam-main .form-check .form-check-input{float:none;flex:none;width:1.2em;height:1.2em;margin:.15em 0 0}
.exam-main .form-check .form-check-label{flex:1;min-width:0;cursor:pointer}
.exam-main .form-check:has(.form-check-input:checked){border-color:var(--primary);background:var(--primary-50)}
.tf-pick .btn{min-height:44px}
.modal .exam-nav{flex-wrap:wrap;overflow:visible}
.exam-end{text-align:center;padding:20px 0 calc(8px + env(safe-area-inset-bottom))}
.exam-leave-ico{width:64px;height:64px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:var(--danger-50);color:var(--danger)}
@media (max-width:575.98px){.exam-bar-in{gap:8px;padding:8px 10px}.exam-ico{display:none}.exam-timer{padding:5px 9px;font-size:.95rem}.exam-nav{flex-wrap:nowrap;overflow-x:auto;padding:10px 10px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:10px}.exam-nav::-webkit-scrollbar{display:none}.exam-nav button{flex:none;scroll-snap-align:start}.exam-main{padding:10px 10px 40px}.exam-main .quiz-question{padding:14px;scroll-margin-top:72px}.exam-rules{padding:8px 10px;font-size:.82rem}.exam-rules-long{display:none}.exam-rules-short{display:inline}.tf-pick .btn{flex:1;min-width:0}.exam-end .btn{width:100%}.exam-modal .modal-footer,.qs-modal .modal-footer{flex-wrap:nowrap}.exam-modal .modal-footer .btn,.qs-modal .modal-footer .btn{flex:1;padding-left:8px;padding-right:8px;white-space:nowrap}.qs-rules li{font-size:.88rem;padding:7px 0}}
@media (max-width:767.98px){.exam-main .form-control,.exam-main .form-select{font-size:1rem}} /* iOS ซูมเข้าเองเมื่อช่องกรอกเล็กกว่า 16px */
@media (pointer:coarse){.exam-nav button{min-width:40px;height:40px}.exam-icon{width:42px;height:42px}.match-left select{min-height:44px}}
/* การ์ดแบบทดสอบในหน้างาน + กติกาก่อนเริ่ม */
.qz-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qz-ico{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:#ede9fe;color:#6d28d9}
.qz-title{font-weight:700;font-size:1.12rem;color:var(--ink);line-height:1.35}
.qz-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.qz-stat{padding:10px 6px;text-align:center;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2)}
.qz-stat b{display:block;font-size:1.3rem;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.qz-stat span{font-size:.76rem;color:var(--muted)}
.qz-state{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:12px;border-radius:12px;font-size:.9rem}
.qz-state.is-progress{background:var(--warning-50);color:var(--warning-ink)}
.qz-state.is-pass{background:var(--success-50);color:var(--success-ink)}
.qz-state.is-fail{background:var(--danger-50);color:var(--danger-ink)}
.qz-state.is-wait{background:var(--info-50);color:var(--info-ink)}
.qz-state.is-closed{background:var(--surface-3);color:var(--muted);margin-bottom:0}
.qz-go{display:block;width:100%;padding:12px;font-size:1.05rem;font-weight:600;border-radius:12px}
.qz-note{margin-top:8px;text-align:center;font-size:.8rem;color:var(--muted)}
@media (max-width:575.98px){.qz-stats{grid-template-columns:repeat(2,1fr)}}
.qs-sum{padding:10px 12px;margin-bottom:10px;border-radius:12px;background:var(--surface-2)}
.qs-rules{list-style:none;padding:0;margin:0 0 12px}
.qs-rules li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:.92rem}
.qs-rules li i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--danger-50);color:var(--danger)}
.qs-rules li.ok i{background:var(--success-50);color:var(--success-ink)}
.qs-agree{padding:10px 12px 10px 36px;border-radius:10px;background:var(--primary-50)}
.vt-next-rule{font-size:.8rem;opacity:.9;margin:4px 0 8px}

/* ---------- กราฟแนวโน้ม ---------- */
.trend-chart{position:relative}
.trend-chart svg{width:100%;height:auto;display:block;overflow:visible}
.tc-grid{stroke:var(--line-2);stroke-width:1}
.tc-tick{font-size:11px;fill:var(--muted)}
.tc-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tc-area{fill:var(--primary);opacity:.1}
.tc-dot{fill:var(--primary);stroke:#fff;stroke-width:2}
.tc-dot.on{r:6}
.tc-end{font-size:12px;font-weight:600;fill:var(--ink)}
.tc-hit{fill:transparent;cursor:pointer;outline:none}
.tc-tip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-md);padding:8px 12px;font-size:.8rem;pointer-events:none;max-width:240px;z-index:3}

/* ---------- meter / แถบเข้าเรียน ---------- */
.meter-wrap{display:flex;align-items:center;gap:8px;min-width:110px}
.meter{flex:1;height:8px;border-radius:4px;background:var(--primary-50);overflow:hidden}
.meter span{display:block;height:100%;border-radius:4px;background:var(--primary)}
.meter.warn{background:var(--warning-100)}.meter.warn span{background:#f59e0b}
.meter.bad{background:var(--danger-100)}.meter.bad span{background:var(--danger)}
.meter-val{font-size:.8rem;font-variant-numeric:tabular-nums;min-width:38px;text-align:right;color:var(--ink-2);font-weight:500}
.att-strip{display:flex;flex-wrap:wrap;gap:4px}
.att-strip .att{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:.7rem;font-weight:600;color:#fff}
.att.present{background:var(--success)}.att.late{background:#f59e0b;color:#111827}.att.absent{background:var(--danger)}.att.leave{background:var(--primary)}.att.skip{background:#334155}.att.sick{background:var(--info)}.att.activity{background:#64748b}
.att-strip .att.activity{font-size:.6rem}
/* เช็กชื่อ 7 สถานะ: ปุ่มเลือกขึ้นบรรทัดใหม่ได้บนจอแคบ */
.att-pick{display:flex;flex-wrap:wrap;gap:4px;min-width:260px}
.att-pick .btn{padding:2px 10px;border-radius:999px;font-size:.8rem;white-space:nowrap}
.att-th{white-space:nowrap;font-size:.82rem}
.risk-row-critical td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.risk-row-watch td:first-child{box-shadow:inset 3px 0 0 #f59e0b}

/* ---------- หน้าของนักเรียน ---------- */
.student-hero,.hero-banner{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:24px;color:var(--hero-text);background:linear-gradient(120deg,var(--secondary),var(--primary));margin-bottom:20px;box-shadow:var(--shadow-sm)}
.student-hero::before,.hero-banner::before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-100px;top:-190px;background:rgba(var(--hero-text-rgb),.10)}
.student-hero::after,.hero-banner::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:220px;bottom:-140px;background:rgba(var(--hero-text-rgb),.07)}
.student-hero>*,.hero-banner>*{position:relative;z-index:1}
.student-hero h3,.hero-banner h1,.hero-banner h2{color:inherit}
.student-hero .avatar-lg{border:3px solid rgba(var(--hero-text-rgb),.45);width:76px;height:76px}
.student-hero .hero-stat{display:block;background:rgba(var(--hero-text-rgb),.12);border:1px solid rgba(var(--hero-text-rgb),.16);border-radius:14px;padding:12px 14px;height:100%;color:inherit;transition:background .15s}
.student-hero a.hero-stat:hover{background:rgba(var(--hero-text-rgb),.2);color:inherit}
.student-hero .hero-stat .v{font-size:1.6rem;font-weight:700;line-height:1.1}
.student-hero .hero-stat .l{font-size:.78rem;opacity:.85}
.class-progress{background:var(--surface);border-radius:var(--r-lg);padding:16px;border:1px solid var(--line);height:100%;position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
.class-progress::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--cc,var(--primary))}
/* ---------- แถบเมนูล่าง (ครู/ผู้ดูแลระบบ/ผู้ปกครอง บนมือถือ/แท็บเล็ต) ---------- */
.bnav{display:none}
@media (max-width:991.98px){
  body.has-bnav .app-footer{padding-bottom:calc(var(--bnav-h) + 22px + env(safe-area-inset-bottom))}
  body.has-bnav .sticky-actions{bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom))} /* แถบปุ่มบันทึกที่ติดขอบล่าง: ลอยเหนือแถบเมนูล่าง */
  .bnav{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:1036;height:calc(var(--bnav-h) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom)}
  .bnav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--line);box-shadow:0 -10px 28px -20px rgba(16,24,40,.35)}
  .bn-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px 4px;border:0;background:none;color:var(--muted);font-size:.68rem;font-weight:500;line-height:1.2;text-decoration:none;position:relative;-webkit-tap-highlight-color:transparent}
  .bn-item>i{font-size:1.32rem;line-height:1;transition:transform .2s var(--ease)}
  .bn-item>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bn-item:hover{color:var(--ink-2)}
  .bn-item:active>i{transform:scale(.88)}
  .bn-item:focus-visible{outline:2px solid var(--primary);outline-offset:-5px;border-radius:14px}
  .bn-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
  .bn-item.is-on,.bn-item[aria-expanded=true]{color:var(--primary-ink);font-weight:600}
  .bn-item.is-on::before{content:"";position:absolute;top:0;left:50%;width:30px;height:3px;margin-left:-15px;border-radius:0 0 4px 4px;background:var(--primary)}
  .bn-badge{position:absolute;top:5px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
  .bn-drop{flex:1 1 0;min-width:0;display:flex;position:static}
  .bn-drop>.bn-item{width:100%}
  .bn-mid{flex:0 0 68px;align-items:center;justify-content:center}
  .bn-fab{width:52px;height:52px;margin-top:-24px;border:0;border-radius:18px;display:grid;place-items:center;color:var(--on-primary);font-size:1.45rem;background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 12px 24px -10px rgba(var(--primary-rgb),.8),0 0 0 5px var(--surface);transition:transform .25s var(--ease),box-shadow .2s;-webkit-tap-highlight-color:transparent}
  .bn-fab>i{transition:transform .25s var(--ease)}
  .bn-fab[aria-expanded=true]>i{transform:rotate(45deg)}
  .bn-fab:active{transform:scale(.94)}
  /* แผ่นเลือก (วิชา / สร้าง) เลื่อนขึ้นจากแถบล่าง */
  .bnav .bn-sheet{position:fixed!important;top:auto!important;right:auto!important;left:50%!important;bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom) + 10px)!important;transform:translateX(-50%)!important;width:min(520px,calc(100vw - 20px))!important;max-width:none;margin:0!important;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .bnav .bn-sheet.hs-menu .hs-list{max-height:min(52vh,440px)}
  .bnav .bn-sheet.bn-create{max-height:min(68vh,560px);overflow-y:auto;padding:0 8px 8px}
  .bn-create .hs-head{padding:12px 8px 6px}
  .bn-create .dropdown-item{padding:.6rem .75rem;gap:12px}
  .bn-create .dropdown-item>.bi{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary-ink);font-size:1rem}
  html.bn-sheet-open body::after{content:"";position:fixed;inset:0;z-index:1035;background:rgba(15,23,42,.38);animation:fade-in .16s ease-out}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ---------- หน้าเข้าสู่ระบบ (layout auth: เข้าสู่ระบบ · ตั้งรหัสผ่านใหม่ · /app/) — เรียบ หรู ทันสมัย ---------- */
/* ซ้าย: แบรนด์โรงเรียนบนพื้นไล่สีเข้มลึก แสงนุ่มหลังโลโก้ วงแหวนบาง เส้นคั่นสีทอง ; ขวา: ฟอร์มบนพื้นขาวโปร่ง (ไม่มีกรอบการ์ด)
   .is-deep = ตัวอักษรบนพื้นสีเป็นสีขาว → ทำพื้นให้เข้มขึ้นได้โดยยังอ่านชัด (ธีมสีอ่อนใช้พื้นไล่สีเดิม) */
.auth-body{min-height:100vh;background:var(--surface)}
.auth-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.auth-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 56px 26px;color:var(--hero-text);background:linear-gradient(160deg,var(--secondary) 0%,var(--primary) 100%)}
.auth-body.is-deep .auth-brand{background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 78%,#000) 0%,color-mix(in srgb,var(--primary) 80%,#000) 100%)}
.ab-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ab-glow{position:absolute;left:50%;top:42%;width:min(130%,1100px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--primary-rgb),.55) 0%,rgba(var(--primary-rgb),.16) 34%,transparent 64%)}
.ab-sheen{position:absolute;top:-30%;right:-25%;width:75%;height:95%;transform:rotate(14deg);background:linear-gradient(200deg,rgba(var(--hero-text-rgb),.11),rgba(var(--hero-text-rgb),0) 58%)}
.ab-grain{position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.auth-brand .ab-main{margin:auto 0;padding:24px 0;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center}
/* โลโก้: ใหญ่ วงขาวสะอาด แสงนุ่มหายใจช้า ๆ ด้านหลัง วงแหวนบาง 2 ชั้น */
.ab-logo{--ls:212px;position:relative;width:var(--ls);height:var(--ls);margin:34px 0 44px}
.ab-logo::before,.ab-logo::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.ab-logo::before{inset:-16px;border:1px solid rgba(var(--hero-text-rgb),.22)}
.ab-logo::after{inset:-34px;border:1px solid rgba(var(--hero-text-rgb),.09)}
.ab-aura{position:absolute;inset:-48%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(var(--hero-text-rgb),.24),rgba(var(--hero-text-rgb),.06) 44%,rgba(var(--hero-text-rgb),0) 68%)}
.ab-emblem,.amb-emblem{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;padding:4%;display:grid;place-items:center;overflow:hidden;box-shadow:0 40px 70px -30px rgba(0,0,0,.65)}
.ab-emblem img,.amb-emblem img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.ab-emblem>i{font-size:5.4rem;line-height:1;color:var(--primary)}
/* ชื่อระบบตัวใหญ่ไล่แสงจากบนลงล่าง · เส้นคั่นสีทองมีเพชรตรงกลาง · ชื่อโรงเรียน · คำโปรยจาง */
.ab-name{max-width:100%;margin:0;font-size:clamp(2.6rem,3.7vw,3.6rem);font-weight:700;line-height:1.1;letter-spacing:-.025em;color:inherit;text-wrap:balance}
.ab-name-t{color:rgb(var(--hero-text-rgb))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ab-name-t{background:linear-gradient(180deg,rgb(var(--hero-text-rgb)) 35%,rgba(var(--hero-text-rgb),.74));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.ab-orn{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--ab-hl)}
.ab-orn span{width:64px;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ab-orn span:last-child{background:linear-gradient(90deg,currentColor,transparent)}
.ab-orn i{width:7px;height:7px;transform:rotate(45deg);background:currentColor;box-shadow:0 0 14px currentColor}
.ab-school{font-size:1.22rem;font-weight:600;line-height:1.45;letter-spacing:.01em;text-wrap:balance}
.ab-tag{margin:8px 0 0;font-size:1rem;line-height:1.55;opacity:.7;text-wrap:balance;word-break:keep-all}
.ab-lead{margin:6px 0 0;max-width:440px;font-size:.92rem;line-height:1.55;opacity:.58;text-wrap:balance}
.auth-brand .ab-foot{font-size:.78rem;letter-spacing:.02em;opacity:.5}

/* ขวา: ฟอร์ม — หัวข้อมีป้ายเล็กนำ · ช่องกรอกสูงโปร่ง · ปุ่มไล่สีมีประกายเมื่อชี้ */
.auth-panel{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 40px;background:radial-gradient(60% 45% at 100% 0,rgba(var(--primary-rgb),.06),transparent 70%),radial-gradient(40% 30% at 0 100%,rgba(var(--primary-rgb),.04),transparent 70%),var(--surface)}
.auth-wrap{width:100%;max-width:392px}
.auth-card{width:100%}
.auth-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--primary-ink)}
.auth-eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--ab-hl,var(--primary)))}
.auth-card h2{margin:0 0 8px;font-size:2.2rem;font-weight:700;line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
.auth-card .auth-sub{margin-bottom:34px;font-size:.95rem;color:var(--muted)}
.auth-card .form-label{margin-bottom:8px;font-size:.84rem;font-weight:600;color:var(--ink-2);transition:color .15s}
.auth-card :focus-within>.form-label{color:var(--primary-ink)}
.auth-card .form-control-lg{height:56px;border-radius:14px;font-size:1rem;color:var(--ink);background-color:var(--surface-2);border:1.5px solid transparent;box-shadow:inset 0 0 0 1px var(--line-2);transition:background-color .15s,border-color .15s,box-shadow .15s}
.auth-card .form-control-lg:hover{box-shadow:inset 0 0 0 1px var(--line)}
.auth-card .form-control-lg:focus{background-color:var(--surface);border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12)}
.auth-card .input-icon>i{left:17px;font-size:1.08rem;transition:color .15s}
.auth-card .input-icon:focus-within>i{color:var(--primary-ink)}
.auth-card .input-icon>.form-control{padding-left:48px}
.auth-card .input-icon>.toggle-pass{right:9px;border-radius:10px}
.auth-card .form-control:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--surface-2) inset;-webkit-text-fill-color:var(--ink)}
.auth-card .form-control:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px var(--surface) inset,0 0 0 4px rgba(var(--primary-rgb),.12)}
.auth-card .btn-lg{min-height:56px;border-radius:14px;font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.auth-card .alert{border-radius:14px}
.auth-remember.form-switch{display:flex;align-items:flex-start;gap:12px;min-height:0;margin:2px 0 26px;padding-left:0}
.auth-remember .form-check-input{flex:none;float:none;width:2.4em;height:1.35em;margin:1px 0 0;cursor:pointer}
.auth-remember .form-check-label{display:flex;flex-direction:column;gap:1px;font-size:.92rem;font-weight:500;color:var(--ink-2);cursor:pointer}
.auth-remember .form-check-label small{font-size:.76rem;font-weight:400;color:var(--muted)}
.auth-submit{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background-image:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 30px -14px rgba(var(--primary-rgb),.8);transition:filter .15s,transform .15s,box-shadow .2s}
.auth-submit::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}
.auth-submit:hover,.auth-submit:focus-visible{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 36px -14px rgba(var(--primary-rgb),.85)}
.auth-submit:hover::after,.auth-submit:focus-visible::after{transform:translateX(120%)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit i{display:inline-block;transition:transform .2s}
.auth-submit:hover i{transform:translateX(4px)}
.auth-submit.is-loading{pointer-events:none;filter:saturate(.9) brightness(.97)}
.caps-warn{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;font-weight:500;color:var(--warning-ink)}
.caps-warn[hidden]{display:none}
.auth-note{margin:24px 0 0;font-size:.84rem;line-height:1.6;text-align:center;color:var(--muted);text-wrap:balance}
.auth-app{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;margin:14px auto 0;padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--primary-ink);text-decoration:none;background:rgba(var(--primary-rgb),.06);transition:background .15s}
.auth-app:hover{color:var(--primary-ink);background:rgba(var(--primary-rgb),.12)}
.auth-panel .auth-foot{margin-top:28px;font-size:.78rem;text-align:center;color:var(--muted-2)}
.auth-mobile-brand{display:none}
/* ลำดับการปรากฏ (นุ่ม ไม่เด้ง) + ข้อความผิดพลาดสั่นเบา ๆ */
@media (prefers-reduced-motion:no-preference){
  .ab-aura{animation:ab-breathe 7s ease-in-out infinite}
  .ab-logo{animation:auth-rise .9s cubic-bezier(.2,.7,.2,1) .05s both}
  .auth-brand .ab-name{animation:auth-in .7s cubic-bezier(.2,.7,.2,1) .25s both}
  .ab-orn{animation:auth-grow .8s cubic-bezier(.2,.7,.2,1) .4s both}
  .ab-school{animation:auth-in .7s cubic-bezier(.2,.7,.2,1) .45s both}
  .ab-tag,.ab-lead{animation:auth-in .7s cubic-bezier(.2,.7,.2,1) .55s both}
  .auth-sheet{animation:auth-in .6s cubic-bezier(.2,.7,.2,1) .1s both}
  .auth-card .alert-danger{animation:auth-shake .5s cubic-bezier(.36,.07,.19,.97) .2s both}
}
@media (prefers-reduced-motion:reduce){
  .auth-brand *,.auth-brand *::before,.auth-brand *::after,.auth-mobile-brand *,.auth-submit::after{animation:none!important;transition:none!important}
}
@keyframes auth-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes auth-rise{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes auth-grow{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes ab-breathe{0%,100%{transform:scale(.94);opacity:.8}50%{transform:scale(1.04);opacity:1}}
@keyframes auth-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@media (max-width:1279.98px){
  .auth-brand{padding:32px 36px 22px}
}
@media (min-width:992px) and (max-height:900px){
  .ab-logo{--ls:186px;margin:28px 0 38px}
  .ab-name{font-size:clamp(2.4rem,3.4vw,3.1rem)}
  .ab-orn{margin:18px 0 14px}
}
@media (min-width:992px) and (max-height:760px){
  .ab-logo{--ls:154px;margin:22px 0 32px}
  .ab-logo::after{inset:-28px}
  .ab-name{font-size:2.35rem}
  .ab-school{font-size:1.1rem}
  .ab-orn{margin:14px 0 11px}
  .ab-tag{font-size:.95rem}
}
@media (min-width:992px) and (max-height:620px){
  .ab-logo{--ls:118px;margin:14px 0 24px}
  .ab-logo::after{display:none}
  .ab-name{font-size:2rem}
  .ab-lead{display:none}
}
/* มือถือ: หัวไล่สีมีโลโก้ + แผ่นฟอร์มสีขาวมุมบนโค้ง */
@media (max-width:991.98px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-panel{justify-content:flex-start;padding:0;background:var(--surface)}
  .auth-wrap{max-width:none}
  .auth-mobile-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--hero-text);padding:calc(34px + env(safe-area-inset-top)) 20px 64px;background:radial-gradient(90% 70% at 50% 30%,rgba(var(--primary-rgb),.5),transparent 70%),linear-gradient(160deg,var(--secondary),var(--primary))}
  .auth-body.is-deep .auth-mobile-brand{background:radial-gradient(90% 70% at 50% 30%,rgba(var(--primary-rgb),.55),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--secondary) 78%,#000),color-mix(in srgb,var(--primary) 80%,#000))}
  .auth-mobile-brand::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .amb-logo{position:relative;width:96px;height:96px;margin:6px 0 18px}
  .amb-logo::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(var(--hero-text-rgb),.24);pointer-events:none}
  .amb-logo .ab-aura{inset:-45%}
  .amb-emblem{box-shadow:0 18px 38px -16px rgba(0,0,0,.6)}
  .amb-emblem>i{font-size:2.7rem;line-height:1;color:var(--primary)}
  .amb-name{font-size:1.85rem;font-weight:700;line-height:1.15;letter-spacing:-.02em}
  .amb-school{margin-top:6px;font-size:.98rem;font-weight:500;opacity:.88}
  .auth-sheet{position:relative;max-width:520px;margin:-32px auto 0;padding:30px 22px calc(26px + env(safe-area-inset-bottom));background:var(--surface);border-radius:28px 28px 0 0}
  .auth-card h2{font-size:1.8rem}
  .auth-card .auth-sub{margin-bottom:26px}
}
/* แท็บเล็ต: พื้นไล่สีเต็มจอ โลโก้ด้านบน แผ่นฟอร์มสีขาวมุมโค้งอยู่กลางจอ */
@media (min-width:576px) and (max-width:991.98px){
  .auth-panel{justify-content:center;padding:44px 24px calc(44px + env(safe-area-inset-bottom));background:radial-gradient(70% 50% at 50% 12%,rgba(var(--primary-rgb),.6),transparent 70%),linear-gradient(160deg,var(--secondary),var(--primary))}
  .auth-body.is-deep .auth-panel{background:radial-gradient(70% 50% at 50% 12%,rgba(var(--primary-rgb),.6),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--secondary) 78%,#000),color-mix(in srgb,var(--primary) 80%,#000))}
  .auth-wrap{max-width:500px}
  .auth-mobile-brand,.auth-body.is-deep .auth-mobile-brand{overflow:visible;padding:0 0 30px;background:none}
  .auth-mobile-brand::after{display:none}
  .auth-sheet{margin:0;padding:38px 36px 30px;border-radius:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
}
@media (max-width:991.98px) and (prefers-reduced-motion:no-preference){
  .amb-logo .ab-aura{animation:ab-breathe 7s ease-in-out infinite}
}
/* หน้า /app/ (is-compact): หัวสีบนมือถือแบบเตี้ย — โลโก้ซ้าย ชื่อระบบ/โรงเรียนขวา ให้ขั้นตอนติดตั้งขึ้นมาในจอแรก */
@media (max-width:991.98px){
  .auth-body.is-compact .auth-mobile-brand{display:grid;grid-template-columns:auto auto;grid-template-areas:"logo name" "logo school";justify-content:center;align-items:center;column-gap:16px;text-align:left;padding:calc(18px + env(safe-area-inset-top)) 20px 48px}
  .auth-body.is-compact .amb-logo{grid-area:logo;width:60px;height:60px;margin:0}
  .auth-body.is-compact .amb-logo::before{inset:-6px}
  .auth-body.is-compact .amb-logo .ab-aura{inset:-30%}
  .auth-body.is-compact .amb-emblem{box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
  .auth-body.is-compact .amb-emblem>i{font-size:1.7rem}
  .auth-body.is-compact .amb-name{grid-area:name;align-self:end;font-size:1.4rem}
  .auth-body.is-compact .amb-school{grid-area:school;align-self:start;margin-top:2px;font-size:.86rem}
  .auth-body.is-compact .auth-mobile-brand:not(:has(.amb-school)) .amb-name{grid-row:1/span 2;align-self:center}
}
@media (min-width:576px) and (max-width:991.98px){
  .auth-body.is-compact .auth-mobile-brand{padding:0 0 22px}
}

/* ---------- หน้า error ---------- */
.error-box{text-align:center;padding:64px 16px;max-width:460px;margin:0 auto}
.error-box .err-code{font-size:4.5rem;font-weight:700;line-height:1;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- พิมพ์ ---------- */
@media print{
  .sidebar,.app-header,.class-nav,.btn,.app-footer,.bottom-nav,.sidebar-backdrop{display:none!important}
  .app-main{margin:0}.content{padding:0;max-width:none}
  .card,.kpi,.tile,.stat-card{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}
.flex-none{flex:none}
a.class-progress{transition:border-color .15s,box-shadow .15s}
a.class-progress:hover{border-color:var(--primary-200);box-shadow:var(--shadow-md)}
/* ---------- การ์ดรายวิชา ---------- */
.subject-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs);height:100%;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s,border-color .15s}
.subject-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d5dae4}
.subject-card .sc-head{position:relative;display:flex;align-items:stretch;gap:14px;padding:14px 18px;color:var(--cc-text);background:radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(135deg,var(--cc),var(--cc-2));overflow:hidden;text-decoration:none;isolation:isolate}
.subject-card .sc-head::before{content:"";position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;right:-56px;top:-70px;background:rgba(var(--cc-text-rgb),.10)}
.subject-card .sc-head::after{content:"";position:absolute;z-index:-1;width:120px;height:120px;border-radius:50%;right:70px;bottom:-84px;background:rgba(var(--cc-text-rgb),.07)}
.subject-card .sc-head:hover{color:var(--cc-text)}
.subject-card .sc-head:hover .sc-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.subject-card .sc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.subject-card .sc-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px}
.subject-card .sc-ico{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.8rem;background:rgba(var(--cc-text-rgb),.18);box-shadow:inset 0 0 0 1px rgba(var(--cc-text-rgb),.16)}
.subject-card .sc-code{font-size:.78rem;font-weight:600;letter-spacing:.05em;opacity:.92}
.subject-card .sc-tag{display:inline-block;font-size:.66rem;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(var(--cc-text-rgb),.2)}
.subject-card .sc-title{font-size:1.12rem;font-weight:700;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.08)}
.subject-card .sc-room{flex:none;max-width:42%;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-left:14px;border-left:1px solid rgba(var(--cc-text-rgb),.22);text-align:right}
.subject-card .sc-room b{max-width:100%;font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 12px rgba(0,0,0,.16)}
.subject-card .sc-body{padding:12px 18px 14px;flex:1;display:flex;flex-direction:column;gap:8px;font-size:.85rem;min-width:0}
.subject-card .sc-alert{display:inline-flex;align-items:center;width:fit-content;font-size:.78rem;font-weight:600;color:var(--danger-ink);background:var(--danger-50);border:1px solid var(--danger-100);border-radius:999px;padding:2px 10px;text-decoration:none}
.subject-card .sc-note{font-size:.75rem;color:var(--warning-ink);background:var(--warning-50);border-radius:8px;padding:4px 8px}
.subject-card .sc-foot{border-top:1px solid var(--line-2);padding:6px 10px;display:flex;justify-content:flex-end;gap:2px}
.subject-card .sc-foot .btn{--bs-btn-padding-x:.55rem;box-shadow:none;border-color:transparent;background:transparent;color:var(--muted)}
.subject-card .sc-foot .btn:hover{background:var(--surface-3);color:var(--ink)}
/* การ์ดวิชาของครู: นักเรียน · รอตรวจ · ค้างส่ง · เข้าเรียน (กดแต่ละช่องไปหน้าที่เกี่ยวข้อง) */
.subject-card .sc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 2px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.subject-card .sc-stats>a{min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 4px;border-left:1px solid var(--line);color:inherit;text-decoration:none}
.subject-card .sc-stats>a:first-child{border-left:0}
.subject-card .sc-stats span{font-size:.7rem;color:var(--muted);white-space:nowrap}
.subject-card .sc-stats b{font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .15s}
.subject-card .sc-stats b small{margin-left:2px;font-size:.58em;font-weight:600;color:var(--muted)}
.subject-card .sc-stats>a:hover b{color:var(--primary-ink)}
.subject-card .sc-stats .is-act b{color:var(--primary-ink)}
.subject-card .sc-stats .is-bad b{color:#ef4444}
.subject-card .sc-next{min-width:0;flex:1;display:flex;align-items:center;gap:7px;margin-right:auto;padding:0 6px 0 8px;font-size:.78rem;color:var(--muted);text-decoration:none}
.subject-card .sc-next>i{flex:none}
.subject-card .sc-next-t{min-width:0;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subject-card .sc-next:hover .sc-next-t{color:var(--primary-ink)}
.subject-card .sc-next-d{flex:none;padding:0 8px;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.7;white-space:nowrap;color:var(--muted);background:var(--surface-3)}
.subject-card .sc-next-d.is-info{color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.subject-card .sc-next-d.is-warning{color:var(--warning-ink);background:var(--warning-100)}
.subject-card .sc-foot{align-items:center}
.room-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);font-size:.88rem}
.room-strip .rs-dot{width:12px;height:12px;border-radius:4px;flex:none}
.group-title{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--muted);margin:18px 0 10px}
.group-title.subj-group{flex-wrap:wrap;margin-top:22px}
.group-title .sg-name{color:var(--ink);font-size:1rem;font-weight:700}
.class-banner .cb-room{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;background:rgba(var(--cc-text-rgb,255,255,255),.16);border:1px solid rgba(var(--cc-text-rgb,255,255,255),.25);border-radius:999px;padding:2px 10px;color:inherit;text-decoration:none}
.class-banner .cb-room:hover{background:rgba(var(--cc-text-rgb,255,255,255),.26);color:inherit}
@media (max-width:575.98px){.class-banner{padding:14px 16px}.class-banner h1{font-size:1.25rem}}
.class-banner .cb-icon{position:absolute;right:24px;bottom:-22px;font-size:5.5rem;opacity:.14;line-height:1;z-index:0}

/* =========================================================
   หน้าของนักเรียน: เรียบง่าย เน้นสิ่งที่ต้องทำ ใช้งานบนมือถือเป็นหลัก
   ========================================================= */
.st-wrap{max-width:1100px;margin:0 auto}
.st-wrap.narrow{max-width:860px}
.st-hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin:4px 0 20px}
.st-hello h1{font-size:1.6rem;font-weight:700;margin:0;color:var(--ink);line-height:1.3;text-wrap:balance}
.st-hello-sub{font-size:.88rem;color:var(--muted);margin-top:2px}
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-xs)}
.st-card + .st-card{margin-top:16px}
.st-empty{text-align:center;padding:28px 16px;color:var(--muted)}
.st-empty .es-icon{width:52px;height:52px;border-radius:16px;margin:0 auto 10px;display:grid;place-items:center;font-size:1.5rem;background:var(--success-100);color:var(--success-ink)}
.st-empty.neutral .es-icon{background:var(--surface-3);color:var(--muted)}
.st-empty .es-title{font-weight:600;color:var(--ink);margin-bottom:2px}
.st-back{display:inline-flex;align-items:center;gap:4px;margin:0 0 12px;font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none}
.st-back:hover{color:var(--primary-ink)}

/* แถวงาน/เนื้อหา */
.todo-list{display:flex;flex-direction:column;gap:8px}
.todo-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto 14px;grid-template-areas:"ico body due go";align-items:center;column-gap:12px;row-gap:2px;padding:12px 14px 12px 12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c,var(--primary));border-radius:var(--r);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-xs);transition:box-shadow .15s,transform .15s}
.todo-item:hover{color:var(--ink);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.ti-ico{grid-area:ico;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;color:var(--c,var(--primary));background:var(--surface-2)}
@supports (background:color-mix(in srgb,red 10%,white)){.ti-ico{background:color-mix(in srgb,var(--c,var(--primary)) 12%,var(--surface))}}
.ti-body{grid-area:body;min-width:0;display:flex;flex-direction:column}
.ti-title{font-weight:600;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ti-meta{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-note{font-size:.8rem;color:var(--warning-ink);margin-top:2px;line-height:1.4}
.ti-due{grid-area:due;justify-self:end;font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.ti-due.is-danger{background:var(--danger-100);color:var(--danger-ink)}
.ti-due.is-warning{background:var(--warning-100);color:var(--warning-ink)}
.ti-due.is-info{background:var(--primary-50);color:var(--primary-ink)}
.ti-due.is-success{background:var(--success-100);color:var(--success-ink)}
.ti-go{grid-area:go;color:var(--muted-2);font-size:.85rem}
.todo-item.is-locked{background:var(--surface-2);box-shadow:none;border-left-color:var(--line)}
.todo-item.is-locked .ti-ico{color:var(--muted);background:var(--surface-3)}
.todo-item.is-locked .ti-title{color:var(--ink-2)}
.todo-item.is-done{border-left-color:var(--line);box-shadow:none}
.todo-item.is-done .ti-ico{color:var(--muted);background:var(--surface-2)}
@media (max-width:575.98px){
  .todo-item{grid-template-columns:40px minmax(0,1fr) 12px;grid-template-areas:"ico body go" "ico due go";padding:11px 12px 11px 10px}
  .ti-ico{width:40px;height:40px;font-size:1.1rem}
  .ti-due{justify-self:start;margin-top:5px;font-size:.74rem;padding:2px 9px}
}

/* โพสต์ประกาศในหน้าวิชา */
.st-post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-xs)}
.st-post + .st-post{margin-top:10px}
.st-post .sp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.st-post .sp-body{line-height:1.6;overflow-wrap:anywhere}
.st-post details{margin-top:8px}
.st-post summary{font-size:.82rem;color:var(--muted);cursor:pointer;list-style:none}
.st-post summary::-webkit-details-marker{display:none}
.st-post summary:hover{color:var(--primary-ink)}

/* หัวข้องาน (มุมมองนักเรียน) */
.as-head .as-sub{font-size:.85rem;color:var(--muted)}
.as-head h1{font-size:1.4rem;font-weight:700;margin:2px 0 10px;line-height:1.35}
.as-chips{display:flex;flex-wrap:wrap;gap:8px}
.as-chips .ti-due{justify-self:auto}
.as-chip{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface-3);color:var(--ink-2)}

/* =========================================================
   หน้าหลักนักเรียนแบบหน้าเดียว (แบนเนอร์ · การ์ดสรุปรายวิชา · สถานะการส่งงาน · การเข้าเรียน)
   ========================================================= */
body.student-portal{--canvas:#fff;background:#fff}
.student-portal .app-main{margin-left:0}
.student-portal .content{max-width:1180px;padding-top:0}
.student-portal .app-footer{padding-bottom:28px}
.sp{--sp-card:#f1f2f6;--sp-line:#c7cbd7;--sp-grad:linear-gradient(110deg,var(--secondary) 0%,var(--primary) 100%);padding-bottom:12px}
/* แบนเนอร์เต็มความกว้างจอ (เนื้อหาด้านในตรงแนวการ์ดรายวิชา) */
.student-portal .app-main{overflow-x:hidden;overflow-x:clip}
.sp-hero{position:relative;isolation:isolate;margin:0 calc(50% - 50vw) 34px;padding:0 0 48px;background:var(--sp-grad);color:var(--hero-text,#fff);overflow:hidden;border-radius:0 0 50% 50% / 0 0 26px 26px;box-shadow:0 14px 28px -24px rgba(15,23,42,.4)}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 90% at 88% 0%,rgba(255,255,255,.22),transparent 62%),radial-gradient(40% 75% at 0% 100%,rgba(255,255,255,.12),transparent 62%),radial-gradient(50% 60% at 50% 125%,rgba(0,0,0,.22),transparent 70%)}
.sp-hero-inner{position:relative;z-index:0;max-width:1180px;margin:0 auto;padding:0 28px}
/* ลวดลายประกอบ: วงแหวนโปร่ง + ลายจุด อยู่ด้านขวาของเนื้อหา */
.sp-hero-inner::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:520px;right:-170px;top:-250px;border-radius:50%;border:64px solid rgba(var(--hero-text-rgb,255,255,255),.07);box-shadow:0 0 0 78px rgba(var(--hero-text-rgb,255,255,255),.035)}
.sp-hero-inner::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-60px;bottom:-48px;width:58%;height:80%;background-image:radial-gradient(rgba(var(--hero-text-rgb,255,255,255),.3) 1.2px,transparent 1.7px);background-size:18px 18px;-webkit-mask-image:radial-gradient(ellipse at 100% 100%,#000 8%,transparent 68%);mask-image:radial-gradient(ellipse at 100% 100%,#000 8%,transparent 68%)}
.sp-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 24px}
.sp-brand{display:inline-flex;align-items:center;gap:10px;min-width:0;padding:4px 16px 4px 4px;border-radius:999px;background:rgba(var(--hero-text-rgb,255,255,255),.12);border:1px solid rgba(var(--hero-text-rgb,255,255,255),.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sp-logo{width:34px;height:34px;flex:none;border-radius:50%;object-fit:contain;background:#fff;padding:2px}
.sp-logo-mark{display:grid;place-items:center;color:var(--primary-ink);font-size:1.05rem;padding:0}
.sp-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sp-brand-text b{font-size:.9rem;font-weight:600;white-space:nowrap}
.sp-brand-text small{font-size:.72rem;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-top-actions{display:flex;align-items:center;gap:8px;flex:none}
.sp-bell,.sp-logout{position:relative;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:inherit;background:rgba(var(--hero-text-rgb,255,255,255),.14);border:1px solid rgba(var(--hero-text-rgb,255,255,255),.22);text-decoration:none;transition:background .15s}
.sp-bell{width:40px;font-size:1.1rem}
.sp-logout{gap:7px;padding:0 15px;font-size:.84rem;font-weight:600}
.sp-bell:hover,.sp-logout:hover{color:inherit;background:rgba(var(--hero-text-rgb,255,255,255),.26)}
.sp-bell span{position:absolute;top:-4px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:.64rem;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.sp-hero-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 40px}
.sp-photo{position:relative;flex:none;width:150px;height:150px;border-radius:50%;padding:5px;background:linear-gradient(145deg,#fff,rgba(255,255,255,.62));box-shadow:0 0 0 10px rgba(var(--hero-text-rgb,255,255,255),.12),0 22px 38px -12px rgba(0,0,0,.5)}
.sp-photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#e2e8f0}
.sp-hero-text{min-width:0}
.sp-greet{display:flex;align-items:center;gap:10px;font-size:.98rem;opacity:.88}
.sp-greet::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.sp-name{font-size:2.35rem;font-weight:700;line-height:1.15;margin:6px 0 0;color:inherit;text-shadow:0 2px 14px rgba(0,0,0,.15);overflow-wrap:anywhere}
.sp-facts{display:flex;flex-wrap:wrap;row-gap:12px;margin:20px 0 0}
.sp-facts>div{padding:0 26px;border-left:1px solid rgba(var(--hero-text-rgb,255,255,255),.28)}
.sp-facts>div:first-child{padding-left:0;border-left:0}
.sp-facts dt{font-size:.76rem;font-weight:500;opacity:.72;margin:0}
.sp-facts dd{font-size:1.05rem;font-weight:600;margin:3px 0 0;white-space:nowrap}
.sp-room-short{display:none}
.sp-actions{display:flex;flex-direction:column;gap:10px;min-width:220px}
.sp-actions a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:14px;font-size:.92rem;font-weight:600;text-decoration:none;color:inherit;background:rgba(var(--hero-text-rgb,255,255,255),.14);border:1px solid rgba(var(--hero-text-rgb,255,255,255),.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s,background .15s,box-shadow .15s}
.sp-actions a:hover{color:inherit;background:rgba(var(--hero-text-rgb,255,255,255),.24);transform:translateY(-1px)}
.sp-actions a.is-solid{background:#fff;border-color:#fff;color:var(--primary-ink);box-shadow:0 12px 24px -12px rgba(0,0,0,.55)}
.sp-actions a.is-solid:hover{background:#fff;color:var(--primary-ink);box-shadow:0 14px 28px -12px rgba(0,0,0,.6)}
.sp-actions a:focus-visible,.sp-bell:focus-visible,.sp-logout:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1099.98px){
  .sp-hero-main{grid-template-columns:auto minmax(0,1fr);column-gap:32px}
  .sp-actions{grid-column:2;flex-direction:row;flex-wrap:wrap;min-width:0}
}

/* การ์ดสรุปรายวิชา */
/* เนื้อหาใต้แบนเนอร์เป็นคอลัมน์เดียวกว้างเท่ากัน (การ์ดรายวิชา + รายละเอียดวิชา) */
.sp-cards,.sp-detail{max-width:900px;margin-left:auto;margin-right:auto}
.sp-cards{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:14px} /* อยู่เหนือแบนเนอร์วิชาที่ซ้อนขึ้นมาใต้การ์ดใบสุดท้าย */
.sp-card{--sc:var(--primary);--sc-rgb:var(--primary-rgb);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(300px,420px) auto;grid-template-areas:"icon name stats grade";align-items:center;gap:12px 20px;padding:16px 22px;border-radius:22px;background:radial-gradient(circle at 100% 0,rgba(var(--sc-rgb),.11),transparent 42%) var(--surface,#fff);border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -18px rgba(15,23,42,.22);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.sp-card:hover{color:var(--ink);border-color:rgba(var(--sc-rgb),.45);box-shadow:0 1px 2px rgba(15,23,42,.04),0 16px 32px -18px rgba(var(--sc-rgb),.45);transform:translateY(-2px)}
.sp-card.is-active{border-color:var(--sc);box-shadow:0 0 0 3px rgba(var(--sc-rgb),.16),0 16px 32px -18px rgba(var(--sc-rgb),.5)}
.sp-card:focus-visible{outline:3px solid rgba(var(--sc-rgb),.45);outline-offset:2px}
.sp-card-head{display:contents}
.sp-card-icon{grid-area:icon}
.sp-card-name{grid-area:name}
.sp-stats{grid-area:stats}
.sp-grade{grid-area:grade}
.sp-card-icon{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.3rem;color:var(--sc);background:rgba(var(--sc-rgb),.12)}
.sp-card-name{flex:1;min-width:0}
.sp-card-title{font-size:1.08rem;font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.sp-card-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;font-size:.8rem;color:var(--muted)}
.sp-code{padding:1px 8px;border-radius:999px;font-weight:600;font-size:.74rem;color:var(--sc);background:rgba(var(--sc-rgb),.1)}
.sp-card-teacher{display:inline-flex;align-items:center;gap:4px;min-width:0}
.sp-grade{flex:none;width:60px;height:60px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f1f5f9;color:#64748b}
.sp-grade b{font-size:1.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.sp-grade span{font-size:.66rem;font-weight:600;margin-top:3px;opacity:.85}
.sp-grade.is-a{background:#dcfce7;color:#15803d}
.sp-grade.is-b{background:#e0f2fe;color:#0369a1}
.sp-grade.is-c{background:#fef3c7;color:#b45309}
.sp-grade.is-d{background:#ffedd5;color:#c2410c}
.sp-grade.is-f{background:#fee2e2;color:#dc2626}
.sp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 4px;border-radius:14px;background:var(--surface-2,#f8f9fc);border:1px solid var(--line-2,#eef0f5)}
.sp-stats>div{text-align:center;padding:0 6px;border-left:1px solid var(--line)}
.sp-stats>div:first-child{border-left:0}
.sp-stats span{display:block;font-size:.72rem;color:var(--muted)}
.sp-stats b{display:block;font-size:1.45rem;font-weight:700;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-stats b small{font-size:.62em;font-weight:600;margin-left:1px;color:inherit;opacity:.75}
.sp-stats .is-good b{color:#059669}
.sp-stats .is-warn b{color:#d97706}
.sp-stats .is-bad b{color:#ef4444}
.sp-bar{display:block;max-width:64px;height:4px;margin:5px auto 0;border-radius:4px;background:var(--line);overflow:hidden}
.sp-bar>i{display:block;height:100%;border-radius:4px;background:#94a3b8}
.is-good .sp-bar>i{background:#10b981}
.is-warn .sp-bar>i{background:#f59e0b}
.is-bad .sp-bar>i{background:#ef4444}
@media (max-width:991.98px){.sp-card{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon name grade" "stats stats stats";gap:14px;padding:18px 20px 16px}}

/* รายละเอียดวิชาที่เลือก */
.sp-detail{margin-top:0;scroll-margin-top:12px} /* แบนเนอร์วิชาชิดการ์ดใบสุดท้าย ไม่เว้นพื้นขาว */
.sp-pill{display:block;width:fit-content;max-width:100%;margin:0 auto;padding:12px 36px;border-radius:999px;background:var(--sp-grad);color:#fff;font-size:1.4rem;font-weight:500;text-align:center;box-shadow:0 8px 22px rgba(15,23,42,.14);text-wrap:balance}
.sp-links{display:flex;justify-content:center;gap:16px;margin:12px 0 0}
.sp-links a{font-size:.88rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sp-h{text-align:center;font-size:1.9rem;font-weight:500;color:var(--ink);margin:30px 0 14px}
.sp-topic{background:var(--sp-card);border-radius:18px;padding:14px 22px 8px}
.sp-topic + .sp-topic{margin-top:14px}
/* ชื่อหน่วยการเรียน: ตัวหนา มีแถบสีโรงเรียนด้านหน้า และเส้นใต้สีอ่อนของสีหลัก */
.sp-topic-title{display:flex;align-items:center;gap:10px;font-size:1.12rem;font-weight:700;color:var(--ink);padding-bottom:9px;margin-bottom:2px;border-bottom:2px solid rgba(var(--primary-rgb),.22)}
.sp-topic-title::before{content:"";flex:none;width:5px;height:1.15em;border-radius:3px;background:var(--sp-grad)}
.sp-row{display:flex;align-items:center;gap:10px;padding:9px 2px;text-decoration:none;color:var(--ink)}
.sp-row + .sp-row{border-top:1px dashed #d6d9e2}
.sp-row:hover{color:var(--ink)}
.sp-row:hover .sp-row-title{color:var(--primary-ink)}
.sp-row-ico{flex:none;font-size:1rem;color:var(--ink-2)}
.sp-row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-row-title{font-size:.92rem;line-height:1.4;overflow-wrap:anywhere}
.sp-row-meta{font-size:.76rem;color:var(--muted)}
/* สถานะ 4 สี: เขียว ส่งแล้ว/ได้คะแนน · เหลือง รอครูตรวจ · ส้ม ให้แก้ไขแล้วส่งใหม่ · แดง ยังไม่ส่ง */
.sp-st{flex:none;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:.95rem;font-style:normal;color:#fff;background:var(--st-c,#94a3b8)}
.sp-st i{line-height:1}
.sp-st-done i,.sp-st-wait i,.sp-st-revise i,.sp-st-miss i{-webkit-text-stroke:.8px currentColor} /* เส้นไอคอนสีขาวหนาขึ้น */
.sp-st-done{--st-c:#22c55e}
.sp-st-wait{--st-c:#eab308}
.sp-st-revise{--st-c:#f97316}
.sp-st-miss{--st-c:#ef4444}
.sp-st-lock{--st-c:#64748b;font-size:.8rem}
.sp-st-exam{--st-c:#3b82f6;font-size:.82rem}
.sp-row-meta.is-done{color:#15803d}
.sp-row-meta.is-wait{color:#a16207}
.sp-row-meta.is-revise{color:#c2410c}
.sp-row-meta.is-miss{color:#dc2626}
.sp-row-meta.is-exam{color:#1d4ed8}
/* หน้าต่างป๊อปอัปของหน้าหลักนักเรียน: เปิดงาน เนื้อหา วิดีโอ แบบทดสอบ โดยไม่ออกจากหน้าหลัก */
.hub-modal .modal-content{overflow:hidden;border:0;box-shadow:0 28px 70px -24px rgba(15,23,42,.5)}
.hub-modal .modal-header{flex:none;gap:12px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line)}
.hm-ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--primary-50);color:var(--primary-ink);font-size:1.05rem}
.hm-text{flex:1;min-width:0}
.hm-sub{font-size:.75rem;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-modal .modal-title{font-size:1rem;font-weight:600;line-height:1.35;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-modal .btn-close{flex:none;margin:0;width:20px;height:20px;padding:12px;border-radius:10px}
.hub-modal .btn-close:hover{background-color:var(--surface-3)}
.hub-modal .modal-body{position:relative;flex:1;min-height:0;padding:0;background:#fff}
.hub-modal iframe{display:block;width:100%;height:100%;border:0}
.hm-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#fff;color:var(--primary)}
.hm-loading[hidden]{display:none}
@media (min-width:768px){
  .hub-modal .modal-dialog{max-width:min(1120px,calc(100vw - 48px));height:calc(100% - 48px);margin:24px auto}
  .hub-modal .modal-dialog{display:flex;align-items:center;transition:transform .3s ease-out,max-width .25s ease}
  .hub-modal .modal-content{height:100%;border-radius:18px}
}
/* หน้าที่เปิดในหน้าต่างป๊อปอัป (?embed=1): เฉพาะเนื้อหา ไม่มีเมนูและแถบด้านบน */
body.is-embed{background:#fff}
body.is-embed .app-main{min-height:0}
body.is-embed .content{max-width:none;padding:12px 22px 12px}
.hub-modal.is-immersive .modal-header{display:none}
/* แถบกติกาการดูวิดีโอ: บางบรรทัดเดียว ตัวเล็ก ; แถบแคบ (มือถือ) ใช้ข้อความสั้น */
.vt-rule{container-type:inline-size;display:flex;align-items:center;gap:6px;padding:3px 12px;border:1px solid #f5d77a;border-radius:10px;background:#fffbea;color:#7c4a03;font-size:.75rem;line-height:1.45}
.vt-rule > .bi{flex:none;font-size:.8rem;color:#b45309}
.vt-rule b{font-weight:600}
.vt-rule-short{display:none}
@container (max-width:560px){.vt-rule-long{display:none}.vt-rule-short{display:inline}}
@container (max-width:360px){.vt-rule-short{font-size:.6875rem}}
/* ดูวิดีโอในป๊อปอัป: เฉพาะวิดีโอ ให้วิดีโอ + กติกา + ความคืบหน้า พอดีความสูงหน้าต่าง */
.vt-stage{--vt-extra:125px;max-width:max(min(100%,420px),min(100%,calc((100vh - var(--vt-extra)) * 16 / 9)));margin:0 auto}
.vt-stage.is-lesson{--vt-extra:200px}
/* ปุ่มควบคุมวิดีโอของนักเรียน: เล่น/หยุด และเต็มจอ เท่านั้น (แผ่นใสคลุมวิดีโอ กดลิงก์ของ YouTube ไม่ได้) */
.vt-player{position:relative;background:#000;border-radius:var(--r-lg);overflow:hidden}
.vt-player .video-wrap{border-radius:0}
.vt-poster{position:absolute;inset:0;z-index:1;background:#000 center/cover no-repeat;pointer-events:none}
.vt-poster[hidden]{display:none}
.vt-shield{position:absolute;inset:0;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vt-toast-float{position:absolute;z-index:6;top:10px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:5px 14px;border-radius:999px;background:rgba(15,23,42,.9);color:#fff;font-size:.8rem;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none}
.vt-shield.is-holed{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,34% 30%,34% 70%,66% 70%,66% 30%,34% 30%)}
.vt-big{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;padding:0 0 0 4px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.72);color:#fff;font-size:2.3rem;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:background .15s}
.vt-big:hover,.vt-big:focus-visible{background:var(--primary)}
.vt-big[hidden]{display:none}
.vt-ctrl{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0f172a;color:#fff}
.vt-btn{display:grid;place-items:center;width:42px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;font-size:1.3rem}
.vt-btn:hover,.vt-btn:focus-visible{background:rgba(255,255,255,.16)}
.vt-time{font-size:.82rem;font-variant-numeric:tabular-nums;opacity:.9}
.vt-sp{flex:1}
.vt-player:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0}
.vt-player:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%;border-radius:0}
.vt-player.is-fs{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;border-radius:0;margin:0}
.vt-player:fullscreen .video-wrap,.vt-player.is-fs .video-wrap{flex:1;min-height:0;aspect-ratio:auto}
.vt-player:-webkit-full-screen .video-wrap{flex:1;min-height:0;aspect-ratio:auto}
html.vt-fs-on,html.vt-fs-on body{overflow:hidden}
/* แถบสถานะบทเรียนวิดีโอ (ดูวิดีโอ → ทำแบบทดสอบ): แถบไล่สีตามสถานะ ไอคอนใหญ่ ปุ่มเด่นด้านขวา */
.vt-lesson{container-type:inline-size;margin-top:12px}
.vl-bar{--vl-g:linear-gradient(110deg,#334155,#52637a);--vl-t:#fff;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:16px;background:var(--vl-g);color:var(--vl-t);box-shadow:0 14px 28px -18px rgba(15,23,42,.6)}
.vl-bar::after{content:"";position:absolute;z-index:-1;right:-50px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);pointer-events:none}
.vl-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.45rem;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.vl-text{min-width:0}
.vl-title{font-size:1.02rem;font-weight:700;line-height:1.35}
.vl-sub{margin-top:2px;font-size:.8rem;line-height:1.4;opacity:.9}
.vl-act{margin:0}
.vl-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border:0;border-radius:999px;background:#fff;color:#0f172a;font-size:.95rem;font-weight:700;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.65);transition:transform .15s ease}
.vl-go:hover{transform:translateY(-1px)}
.vl-go:disabled{background:rgba(0,0,0,.2);color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:not-allowed;transform:none}
.vt-lesson.is-ready .vl-go:not(:disabled){color:var(--primary-ink);animation:vl-pulse 1.8s ease-out infinite}
@keyframes vl-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.vt-lesson.is-retry .vl-bar{--vl-g:linear-gradient(110deg,#c2410c,#ea580c)}
.vt-lesson.is-ready .vl-bar{--vl-g:linear-gradient(110deg,var(--secondary),var(--primary));--vl-t:var(--hero-text,#fff)}
.vt-lesson.is-pending .vl-bar{--vl-g:linear-gradient(110deg,#4338ca,#6366f1)}
.vt-lesson.is-passed .vl-bar{--vl-g:linear-gradient(110deg,#15803d,#22a35a)}
.vt-lesson.is-over .vl-bar{--vl-g:linear-gradient(110deg,#475569,#64748b)}
@container (max-width:520px){.vl-bar{grid-template-columns:auto minmax(0,1fr)}.vl-act{grid-column:1/-1}.vl-go{width:100%}}
@media (prefers-reduced-motion:reduce){.vt-lesson.is-ready .vl-go{animation:none}.vl-go{transition:none}}
/* ดูวิดีโอจบ: นับถอยหลังบนวิดีโอก่อนไปทำแบบทดสอบ */
.vt-next{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:30rem;animation:vt-next-in .25s ease}
.vt-next-h{display:flex;align-items:center;gap:8px;font-size:1.15rem;font-weight:600}
.vt-next-h .bi{color:#4ade80;font-size:1.3rem}
.vt-next-text{font-size:.95rem;opacity:.92}
.vt-next-text b{font-size:1.1rem}
.vt-next-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.vt-next .btn-link{color:inherit;opacity:.85}
.vt-next.is-inline{max-width:none;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--primary-50);border:1px solid var(--primary-200);color:var(--primary-ink)}
.vt-next.is-inline .vt-next-h .bi{color:#16a34a}
@keyframes vt-next-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vt-next{animation:none}}
.sp-st-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:.72rem;color:var(--muted);margin:-4px 0 12px}
.sp-st-legend span{display:inline-flex;align-items:center;gap:5px}
.sp-st-legend .sp-st{width:9px;height:9px}
.sp-empty{text-align:center;color:var(--muted);background:var(--sp-card);border-radius:18px;padding:22px 16px}
.sp-more{margin-top:12px}
.sp-more > summary{display:block;width:fit-content;margin:0 auto;padding:6px 16px;border-radius:999px;background:var(--sp-card);font-size:.85rem;font-weight:500;color:var(--primary-ink);cursor:pointer;list-style:none}
.sp-more > summary::-webkit-details-marker{display:none}
.sp .st-post{background:var(--sp-card);border:0;box-shadow:none;border-radius:18px}
/* ประกาศจากครู (กะทัดรัด) */
.ann-box{margin-top:22px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ann-box-head{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:.92rem;font-weight:600;color:var(--ink);background:var(--surface-2,#f8f9fc);border-bottom:1px solid var(--line-2,#eef0f5)}
.ann-box-head > i{color:var(--primary-ink)}
.ann-count{margin-left:auto;min-width:22px;padding:1px 8px;border-radius:999px;background:var(--surface-3,#f1f3f8);color:var(--muted);font-size:.72rem;text-align:center}
.ann{display:flex;gap:10px;padding:10px 16px}
.ann + .ann,.ann-older .ann{border-top:1px solid var(--line-2,#eef0f5)}
.ann-av{width:30px;height:30px;flex:none;margin-top:1px;border-radius:50%;object-fit:cover}
.ann-main{flex:1;min-width:0}
.ann-meta{display:flex;align-items:center;gap:5px;min-width:0;font-size:.8rem;color:var(--muted)}
.ann-who{font-weight:600;color:var(--ink);white-space:nowrap}
.ann-pin{color:#f59e0b;font-size:.75rem}
.ann-when{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-cmt{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.78rem}
.ann-cmt:hover,.ann-cmt[aria-expanded="true"]{color:var(--primary-ink);background:var(--primary-50)}
.ann-body{margin-top:1px;font-size:.9rem;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-body.is-open{display:block}
.ann-text{position:relative}
/* "อ่านต่อ" วางทับท้ายบรรทัดสุดท้าย ไม่เพิ่มบรรทัด ; เปิดอ่านแล้ว "ย่อ" อยู่ใต้ข้อความ */
.ann-more{position:absolute;right:0;bottom:0;padding:0 0 0 40px;border:0;background:linear-gradient(90deg,transparent,var(--surface,#fff) 30px);font-size:.8rem;line-height:1.395rem;font-weight:600;color:var(--primary-ink)}
.ann-more:hover{text-decoration:underline}
.ann-body.is-open + .ann-more{position:static;padding:0;background:none}
.ann-atts{margin-top:6px}
.ann-comments{margin-top:8px}
.ann-older > summary{display:block;padding:7px 16px;border-top:1px solid var(--line-2,#eef0f5);text-align:center;font-size:.8rem;font-weight:600;color:var(--primary-ink);cursor:pointer;list-style:none}
.ann-older > summary::-webkit-details-marker{display:none}
.ann-older[open] > summary{border-bottom:1px solid var(--line-2,#eef0f5)}
.ann-older > summary + .ann{border-top:0}
.ann-older > summary:hover{background:var(--surface-2,#f8f9fc)}

/* สตรีมชั้นเรียนแบบประหยัดพื้นที่: กล่องโพสต์แบบพับ · ประกาศเป็นแถวในกล่องเดียว · แถบข้างแบบย่อ */
.composer{margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-xs)}
.composer > summary{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:16px;list-style:none;cursor:pointer;font-size:.92rem;color:var(--muted)}
.composer > summary::-webkit-details-marker{display:none}
.composer > summary:hover{background:var(--surface-2)}
.composer > summary span{flex:1;min-width:0}
.composer > summary > i{color:var(--primary-ink)}
.composer[open] > summary{display:none}
.composer-form{padding:12px 14px}
.composer-form textarea{border-radius:12px;resize:vertical}
.composer-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.composer-tools .form-select{width:auto;max-width:220px}
.composer-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;margin:0;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.82rem;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.composer-chip:hover{background:var(--surface-2)}
.composer-chip > i{color:var(--muted)}
.composer-chip .form-control{width:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;font-size:.82rem}
.composer-chip .form-check-input{margin:0}
.composer-chip .file-list{max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--primary-ink)}
.composer-chip .file-list:empty{display:none}
.composer-actions{display:flex;gap:4px;margin-left:auto}
.composer-actions [data-composer-close]{padding-left:8px;padding-right:8px;border-color:transparent;background:transparent;color:var(--muted)}
.composer-actions [data-composer-close]:hover{background:var(--surface-2);color:var(--ink)}
.ann-box.is-stream{margin-top:0}
.is-stream .ann{padding:11px 14px}
.is-stream .ann-av{width:34px;height:34px}
.is-stream .ann-body{-webkit-line-clamp:3}
.ann.is-pinned{background:linear-gradient(90deg,rgba(245,158,11,.07),transparent 45%);box-shadow:inset 3px 0 0 #f59e0b}
.ann-subj{flex:none;max-width:40%;padding:0 8px;border-radius:999px;background:var(--surface-3,#f1f3f8);color:var(--ink-2);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ann-subj.is-room{background:var(--primary-50);color:var(--primary-ink)}
.ann-sched{color:#b45309}
.ann-menu{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-right:-6px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted)}
.ann-menu:hover,.ann-menu[aria-expanded="true"]{background:var(--surface-3,#f1f3f8);color:var(--ink)}
.ann-empty{padding:28px 16px;text-align:center;color:var(--muted)}
.ann-comments .comment{gap:8px;padding-top:8px}
.ann-comments .avatar-sm{width:28px;height:28px}
.ann-comments .bubble{padding:6px 10px}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-xs)}
.side-box-head{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--surface-2,#f8f9fc);border-bottom:1px solid var(--line-2,#eef0f5)}
.side-box-head > i{color:var(--primary-ink)}
.side-box-head a{margin-left:auto;font-size:.76rem;font-weight:600;text-decoration:none;white-space:nowrap}
.due-row{display:block;padding:7px 14px;text-decoration:none;color:inherit}
.due-row + .due-row{border-top:1px solid var(--line-2,#eef0f5)}
.due-row:hover{background:var(--surface-2,#f8f9fc)}
.due-title{display:block;font-size:.86rem;font-weight:600;color:var(--primary-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.due-title > i{margin-right:6px;opacity:.75}
.due-when{display:flex;align-items:center;gap:6px;margin-top:1px;padding-left:20px;font-size:.74rem;color:var(--muted)}
.due-chip{margin-left:auto;padding:0 8px;border-radius:999px;font-size:.68rem;font-weight:600;white-space:nowrap}
.due-chip.is-warning{background:#fef3c7;color:#b45309}
.due-chip.is-info{background:#e0f2fe;color:#0369a1}
.due-chip.is-danger{background:#fee2e2;color:#dc2626}
.side-empty{padding:12px 14px;font-size:.82rem;color:var(--muted)}
.side-person{display:flex;align-items:center;gap:10px;padding:7px 14px}
.side-person + .side-person{border-top:1px solid var(--line-2,#eef0f5)}
.side-person > div{flex:1;min-width:0;line-height:1.35}
.side-person b{font-size:.86rem;font-weight:600}
.side-person small{display:block;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-tag{padding:0 7px;border-radius:999px;background:var(--surface-3,#f1f3f8);font-size:.66rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.side-count{margin-left:auto;min-width:26px;padding:1px 8px;border-radius:999px;background:var(--surface-3,#f1f3f8);color:var(--muted);font-size:.76rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.side-count.is-hot{background:#fee2e2;color:#dc2626}
/* การ์ดงานรอตรวจ */
.tg-sum{padding:8px 14px 4px;font-size:.76rem;color:var(--muted)}
.tg-sum b{font-weight:700;color:var(--ink)}
.tg-row{display:flex;align-items:center;gap:8px;padding:6px 14px;text-decoration:none;color:var(--ink)}
.tg-row:hover{background:var(--surface-2,#f8f9fc);color:var(--ink)}
.tg-row > i{flex:none;font-size:.9rem;color:var(--muted)}
.tg-title{flex:1;min-width:0;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-title small{margin-left:6px;font-size:.7rem;color:var(--muted)}
.tg-n{flex:none;min-width:28px;padding:1px 8px;border-radius:999px;background:#fef3c7;color:#b45309;font-size:.74rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.tg-more{display:block;padding:2px 14px 6px 36px;font-size:.74rem;font-weight:600;text-decoration:none}
.tg-row:last-child,.tg-more:last-child{margin-bottom:4px}
/* การ์ดคะแนนสูงสุด 5 อันดับ */
.rank-note{padding:7px 14px 3px;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row{display:flex;align-items:center;gap:9px;padding:5px 14px}
.rank-row:last-child{padding-bottom:10px}
.rank-no{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:var(--surface-3,#f1f3f8);color:var(--ink-2)}
.rank-no.is-1{background:linear-gradient(145deg,#fde68a,#f59e0b);color:#78350f}
.rank-no.is-2{background:linear-gradient(145deg,#f1f5f9,#94a3b8);color:#1e293b}
.rank-no.is-3{background:linear-gradient(145deg,#fed7aa,#ea580c);color:#7c2d12}
.rank-row .avatar-sm{width:28px;height:28px}
.rank-name{flex:1;min-width:0;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-pct{flex:none;font-size:.88rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rank-pct small{margin-left:1px;font-size:.7em;font-weight:600;opacity:.7}
.rank-grade{flex:none;min-width:36px;padding:1px 6px;border-radius:8px;font-size:.72rem;font-weight:700;text-align:center;background:#f1f5f9;color:#64748b}
.rank-grade.is-a{background:#dcfce7;color:#15803d}
.rank-grade.is-b{background:#e0f2fe;color:#0369a1}
.rank-grade.is-c{background:#fef3c7;color:#b45309}
.rank-grade.is-d{background:#ffedd5;color:#c2410c}
.rank-grade.is-f{background:#fee2e2;color:#dc2626}

/* การเข้าเรียน */
.sp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.8rem;color:var(--ink-2);margin-bottom:12px}
.sp-legend i{display:inline-block;width:26px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sp-donut{position:relative;width:min(340px,78vw);margin:0 auto}
.sp-donut svg{display:block;width:100%;height:auto}
.sp-donut circle{transition:opacity .15s}
.sp-donut circle:hover{opacity:.85}
.sp-donut .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.sp-donut .c b{display:block;font-size:2.3rem;font-weight:600;color:var(--ink);line-height:1.1}
.sp-donut .c span{font-size:.82rem;color:var(--muted)}
.sp-att-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:22px}
.sp-att{background:var(--sp-card);border-radius:16px;padding:14px 10px;text-align:center}
.sp-att b{display:block;font-size:1.1rem;font-weight:600}
.sp-att span{font-size:.8rem;color:var(--ink-2)}

/* แถบบนของนักเรียน (หน้าอื่นนอกจากหน้าหลัก) */
.st-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 10px 18px;margin:0 0 18px;border-radius:0 0 22px 22px;background:linear-gradient(110deg,var(--secondary) 0%,var(--primary) 100%);color:#fff}
.st-topbar .stb-brand{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;text-decoration:none;font-weight:600}
.st-topbar .stb-brand img,.st-topbar .stb-brand .mark{width:34px;height:34px;flex:none;border-radius:50%;background:#fff;object-fit:contain;padding:2px}
.st-topbar .stb-brand .mark{display:grid;place-items:center;color:var(--primary);padding:0}
.st-topbar .stb-actions{display:flex;align-items:center;gap:6px}
.st-topbar .stb-btn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);text-decoration:none;font-size:1.05rem}
.st-topbar .stb-btn:hover{color:#fff;background:rgba(255,255,255,.26)}
.st-topbar .stb-btn .dot{position:absolute;top:0;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center;border:2px solid rgba(255,255,255,.9)}
.st-topbar .stb-avatar{padding:0;border:0;background:transparent;border-radius:50%}
.st-topbar .stb-avatar img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.75);display:block}

@media (max-width:767.98px){
  .student-portal .content{padding-left:12px;padding-right:12px}
  body.is-embed .content{padding:12px 12px 12px}
  /* แบนเนอร์แบบกะทัดรัด: รูปเล็กซ้าย ชื่อขวา · ข้อมูล 4 ช่องในแถบเดียว · ปุ่ม 2 ปุ่มเรียงกัน */
  .sp-hero{margin-bottom:18px;padding-bottom:20px;border-radius:0 0 50% 50% / 0 0 14px 14px}
  .sp-hero-inner{padding:0 16px}
  .sp-hero-inner::before{width:240px;height:240px;right:-110px;top:-120px;border-width:38px;box-shadow:0 0 0 54px rgba(var(--hero-text-rgb,255,255,255),.035)}
  .sp-hero-inner::after{width:70%;height:75%;right:-16px;bottom:-24px}
  .sp-hero-top{padding:10px 0 14px}
  .sp-brand{gap:8px;padding:3px 12px 3px 3px}
  .sp-logo{width:30px;height:30px}
  .sp-brand-text b{font-size:.84rem}
  .sp-brand-text small{display:none}
  .sp-bell,.sp-logout{height:36px}
  .sp-bell{width:36px;font-size:1rem}
  .sp-logout{width:36px;padding:0}
  .sp-logout span{display:none}
  .sp-hero-main{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"photo greet" "photo name" "facts facts" "actions actions";align-items:center;gap:0 14px}
  .sp-hero-text{display:contents}
  .sp-photo{grid-area:photo;width:64px;height:64px;padding:3px;box-shadow:0 0 0 4px rgba(var(--hero-text-rgb,255,255,255),.14),0 10px 20px -8px rgba(0,0,0,.45)}
  .sp-greet{grid-area:greet;align-self:end;font-size:.8rem}
  .sp-greet::before{display:none}
  .sp-name{grid-area:name;align-self:start;margin-top:1px;font-size:1.3rem;line-height:1.25}
  .sp-facts{grid-area:facts;flex-wrap:nowrap;margin:14px 0 0;padding:8px 2px;border-radius:14px;background:rgba(var(--hero-text-rgb,255,255,255),.12);border:1px solid rgba(var(--hero-text-rgb,255,255,255),.2)}
  .sp-facts>div,.sp-facts>div:first-child{flex:1 1 0;padding:0 6px;text-align:center;border-left:1px solid rgba(var(--hero-text-rgb,255,255,255),.2)} /* ช่องกว้างเท่ากัน แต่ไม่แคบกว่าข้อความ */
  .sp-facts>div:first-child{border-left:0}
  .sp-facts dt{font-size:.66rem}
  .sp-facts dd{margin-top:1px;font-size:.9rem}
  .sp-facts dt,.sp-facts dd{white-space:nowrap}
  .sp-room-full{display:none}
  .sp-room-short{display:inline}
  .sp-actions{grid-area:actions;flex-direction:row;flex-wrap:nowrap;min-width:0;gap:8px;margin-top:12px}
  .sp-actions a{flex:1;min-width:0;padding:9px 6px;border-radius:12px;font-size:.82rem;white-space:nowrap}
  /* การ์ดรายวิชาแบบเตี้ย: ไอคอน/เกรดเล็กลง · แถบสถิติบาง · แถบเข้าเรียนวางที่ขอบล่าง ไม่เพิ่มความสูง */
  .sp-cards{gap:10px}
  .sp-card{padding:10px 12px;gap:8px 10px;border-radius:16px}
  .sp-card-icon{width:36px;height:36px;border-radius:11px;font-size:1rem}
  .sp-card-title{font-size:.95rem;line-height:1.3}
  .sp-card-sub{margin-top:1px;gap:2px 8px;font-size:.74rem}
  .sp-code{padding:0 7px;font-size:.68rem}
  .sp-grade{width:40px;height:40px;border-radius:12px}
  .sp-grade b{font-size:1.08rem}
  .sp-grade span{margin-top:1px;font-size:.56rem}
  .sp-stats{padding:5px 2px 6px;border-radius:11px}
  .sp-stats>div{position:relative;padding:0 4px}
  .sp-stats span{font-size:.62rem;line-height:1.4}
  .sp-stats b{font-size:1.02rem;line-height:1.2}
  .sp-bar{position:absolute;left:50%;bottom:-5px;width:52%;max-width:52px;height:3px;margin:0;transform:translateX(-50%)}
  .sp-pill{font-size:1.05rem;padding:10px 22px}
  .sp-h{font-size:1.4rem;margin:24px 0 12px}
  .sp-topic{padding:12px 14px 6px;border-radius:16px}
  .sp-topic-title{font-size:1.03rem}
  .sp-st-legend{gap:4px 9px;font-size:.68rem}
  .sp-att-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-topbar{margin:0 -12px 14px;border-radius:0 0 18px 18px}
}
@media (max-width:359.98px){
  .sp-hero-inner{padding:0 12px}
  .sp-facts>div,.sp-facts>div:first-child{padding:0 3px}
  .sp-actions a{font-size:.78rem;gap:5px}
}
@media (prefers-reduced-motion:reduce){.sp-card,.sp-actions a,.sp-bell,.sp-logout{transition:none}.sp-actions a:hover{transform:none}}

/* แนบไฟล์งาน: รายการไฟล์ที่เลือก (ย่อรูปแล้ว) */
.upload-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:.85rem}
.upload-list:empty{display:none}
.upload-list .ul-item{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.upload-list .ul-item img,.upload-list .ul-ico{width:42px;height:42px;border-radius:8px;flex:none;object-fit:cover}
.upload-list .ul-ico{display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2)}
.upload-list .ul-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-list .ul-size{color:var(--muted);white-space:nowrap;font-size:.8rem}
.upload-list .ul-err{color:var(--danger-ink)}
.upload-list .ul-note{color:var(--muted)}

/* งานที่ครูให้แก้ไขแล้วส่งใหม่ (สีส้ม) และรอครูตรวจ (สีเหลือง) */
.ti-due.is-wait{background:#fef9c3;color:#854d0e}
.ti-due.is-revise{background:#ffedd5;color:#c2410c}
.alert-revise{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.btn-outline-revise{color:#c2410c;border-color:#fb923c;background:#fff}
.btn-outline-revise:hover,.btn-outline-revise:focus-visible{color:#fff;background:#f97316;border-color:#f97316}

/* ดูรูปภาพแบบป๊อปอัป (lightbox) */
.img-zoom{position:relative;display:inline-block;max-width:100%;cursor:zoom-in;vertical-align:top}
.img-zoom img{display:block}
.img-zoom-hint{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font-size:.74rem;pointer-events:none;transition:background .15s}
.img-zoom:hover .img-zoom-hint{background:var(--primary)}
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:2000;background:rgba(9,13,24,.94);color:#fff;-webkit-tap-highlight-color:transparent}
.lb[hidden]{display:none}
.lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:6px;padding:10px 12px 10px 18px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.lb-cap{flex:1;min-width:0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92}
.lb-count{margin-right:6px;font-size:.82rem;opacity:.75;font-variant-numeric:tabular-nums}
.lb-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.05rem;text-decoration:none;cursor:pointer}
.lb-btn:hover,.lb-btn:focus-visible{background:rgba(255,255,255,.26);color:#fff}
.lb-btn:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-stage{position:absolute;inset:60px 0 0;display:flex;overflow:auto;padding:0 68px 24px;overscroll-behavior:contain}
.lb-img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#fff;box-shadow:0 24px 64px rgba(0,0,0,.55);cursor:zoom-in;user-select:none;-webkit-user-select:none}
.lb.is-zoom .lb-stage{padding:0}
.lb.is-zoom .lb-img{max-width:none;max-height:none;border-radius:0;cursor:grab}
.lb.is-drag .lb-img{cursor:grabbing}
.lb-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-nav[hidden]{display:none}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-spin{position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:lb-spin .8s linear infinite;display:none}
.lb.is-loading .lb-spin{display:block}
.lb.is-loading .lb-img{visibility:hidden}
.lb-err{display:none;margin:auto;font-size:.95rem;opacity:.85}
.lb.is-error .lb-img{display:none}
.lb.is-error .lb-err{display:block}
@keyframes lb-spin{to{transform:rotate(360deg)}}
@media (max-width:575.98px){
  .lb-bar{padding:8px 8px 8px 14px;gap:4px}
  .lb-btn{width:36px;height:36px;font-size:.95rem}
  .lb-stage{inset:54px 0 0;padding:0 6px 14px}
  .lb-nav{width:40px;height:40px;margin-top:-20px;background:rgba(0,0,0,.4)}
  .lb-prev{left:4px}
  .lb-next{right:4px}
}
@media (prefers-reduced-motion:reduce){.lb-spin{animation-duration:2s}}

/* สุ่มจัดกลุ่มย่อย */
.grp-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.grp-rand .card-header{display:flex;align-items:center;gap:8px;font-weight:600}
.grp-rand .card-header > i{color:var(--primary-ink)}
.grp-field{margin-bottom:16px}
.grp-field.is-off{opacity:.45;pointer-events:none}
.grp-label{display:block;margin-bottom:6px;font-size:.84rem;font-weight:600;color:var(--ink)}
summary.grp-label{cursor:pointer;margin-bottom:0}
.grp-hint{margin-top:5px;font-size:.76rem;color:var(--muted)}
.grp-seg{display:flex;padding:3px;border-radius:10px;background:var(--surface-3,#f1f3f8)}
.grp-seg label{flex:1;margin:0;cursor:pointer}
.grp-seg input{position:absolute;opacity:0;pointer-events:none}
.grp-seg span{display:block;padding:5px 8px;border-radius:8px;text-align:center;font-size:.8rem;color:var(--ink-2)}
.grp-seg input:checked + span{background:var(--surface,#fff);color:var(--primary-ink);font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.grp-seg input:focus-visible + span{outline:2px solid var(--primary);outline-offset:1px}
.grp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.grp-chips:empty{display:none}
.grp-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 2px 2px 10px;border-radius:999px;font-size:.78rem;background:var(--surface-3,#f1f3f8);color:var(--ink-2)}
.grp-chip.is-avoid{background:#fee2e2;color:#991b1b}
.grp-chip.is-together{background:#dcfce7;color:#166534}
.grp-chip button{padding:0 7px;border:0;background:transparent;color:inherit;font-size:1rem;line-height:1.2;opacity:.7}
.grp-chip button:hover{opacity:1}
.grp-pool{max-height:220px;overflow:auto;margin-top:6px;padding:6px 10px;border:1px solid var(--line);border-radius:10px}
.grp-empty{display:grid;place-items:center;min-height:260px;padding:20px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}
.grp-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:12px;font-size:.84rem;color:var(--ink-2)}
.grp-dot{color:var(--line)}
.grp-ok{color:#047857}
.grp-warn{color:#b45309}
.grp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.grp-card{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff)}
.grp-card-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--line-2,#eef0f5);background:var(--surface-2,#f8f9fc);font-size:.88rem}
.grp-card-head span{font-size:.74rem;color:var(--muted)}
.grp-card ul{margin:0;padding:6px 8px;list-style:none}
.grp-card li{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:.8rem}
.grp-code{color:var(--muted);font-variant-numeric:tabular-nums}
.grp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-sc{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.grp-card-foot{padding:6px 12px;border-top:1px solid var(--line-2,#eef0f5);font-size:.74rem;color:var(--muted)}
.grp-card-foot:empty{display:none}
.grp-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.g-ic{display:inline-block;width:15px;flex:none;margin-right:2px;font-size:.82rem}
.g-ic.is-m{color:#2563eb}
.g-ic.is-f{color:#db2777}

/* ให้คะแนนแบบกดปุ่ม (ทางเลือกแทนการพิมพ์) */
.score-mode{display:inline-flex;flex:none;padding:2px;border-radius:9px;background:var(--surface-3,#f1f3f8)}
.score-mode button{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:0;border-radius:7px;background:transparent;font-size:.78rem;font-weight:500;color:var(--ink-2)}
.score-mode button.is-on{background:var(--surface,#fff);color:var(--primary-ink);font-weight:600;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.score-mode button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.score-pad{display:none;flex-wrap:wrap;align-items:center;gap:6px}
html[data-score-mode="pad"] .score-pad{display:flex}
html[data-score-mode="pad"] .score-host{display:none!important}
html[data-score-mode="pad"] th.score-col{width:auto!important}
.score-btn{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface,#fff);color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s,color .12s}
.score-btn:hover{border-color:var(--primary);color:var(--primary-ink)}
.score-btn.is-on{background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.score-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.score-pad.is-lg .score-btn{min-width:48px;height:48px;font-size:1.1rem;border-radius:12px}
.score-pad.is-sm{gap:3px}
.score-pad.is-sm .score-btn{min-width:28px;height:30px;padding:0 5px;border-radius:8px;font-size:.82rem}
.score-of{margin-left:2px;font-size:.85rem;color:var(--muted)}
td .score-pad.is-sm .score-of{display:none} /* ในตาราง: หัวคอลัมน์บอกคะแนนเต็มแล้ว */
html[data-score-mode="pad"] td .score-pad.is-sm{display:grid;grid-template-columns:repeat(var(--cols,6),auto);justify-content:start}
@media (prefers-reduced-motion:reduce){.score-btn{transition:none}}
/* หัวข้อโจทย์ในหน้าผลสอบ/ตรวจข้อเขียน (quizzes/result.php): ป้าย "ข้อ N" สีหลัก · คะแนนเต็ม · สถานะ + คะแนนที่ได้ · โจทย์ตัวใหญ่หนา */
.qr-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qr-no{display:inline-flex;align-items:center;padding:3px 13px;border-radius:999px;font-size:.92rem;font-weight:700;line-height:1.5;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 4px 10px -4px rgba(var(--primary-rgb),.7)}
.qr-pts{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.6;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.qr-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.qr-score{font-size:1.05rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.qr-score small{margin-left:1px;font-size:.78rem;font-weight:600;color:var(--muted)}
.qr-text{margin:12px 0 14px;font-size:1.12rem;font-weight:600;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:575.98px){.qr-text{font-size:1.02rem;margin:10px 0 12px}}
/* ตรวจข้อเขียน (quizzes/result.php): แถบให้คะแนนเด่น — ยังไม่ให้ = สีหลัก · ให้แล้ว = เขียว · ค่าไม่ถูกต้อง = แดง */
.qg-grade{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(var(--primary-rgb),.06);border:1.5px solid rgba(var(--primary-rgb),.28);transition:background .2s,border-color .2s}
.qg-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 6px 14px -6px rgba(var(--primary-rgb),.8)}
.qg-ico .qg-i-ok{display:none}
.qg-label{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;margin:0;line-height:1.4;cursor:pointer}
.qg-label b{font-size:1rem;font-weight:700;color:var(--ink)}
.qg-label small{font-size:.78rem;color:var(--muted)}
.qg-label .qg-done,.qg-label .qg-err{display:none}
.qg-score{flex:none;width:auto;flex-wrap:nowrap;border-radius:12px;transition:box-shadow .15s}
.qg-score:focus-within{box-shadow:0 0 0 4px rgba(var(--primary-rgb),.18)}
.qg-score .form-control{flex:none;width:92px;height:52px;min-height:52px;padding:0 8px;text-align:center;font-size:1.55rem;font-weight:700;color:var(--ink);background:var(--surface);border:2px solid var(--primary);border-right:0;border-radius:12px 0 0 12px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.qg-score .form-control::-webkit-outer-spin-button,.qg-score .form-control::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qg-score .form-control::placeholder{color:var(--muted-2);font-weight:500}
.qg-score .form-control:focus{border-color:var(--primary);box-shadow:none}
.qg-score .input-group-text{padding:0 14px;font-size:1.05rem;font-weight:700;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1);border:2px solid var(--primary);border-left:0;border-radius:0 12px 12px 0}
.qg-grade:has(.form-control:not(:placeholder-shown):valid){background:var(--success-50);border-color:rgba(22,163,74,.35)}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-ico{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 6px 14px -6px rgba(22,163,74,.8)}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-i-edit,.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-hint{display:none}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-i-ok{display:inline}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-done{display:block;font-weight:600;color:var(--success-ink)}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-score .form-control,.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-score .input-group-text{border-color:#16a34a}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-score .input-group-text{color:var(--success-ink);background:var(--success-100)}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-score:focus-within{box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.qg-grade:has(.form-control:invalid){background:var(--danger-50);border-color:rgba(220,38,38,.35)}
.qg-grade:has(.form-control:invalid) .qg-ico{background:linear-gradient(135deg,#f87171,#dc2626);box-shadow:0 6px 14px -6px rgba(220,38,38,.8)}
.qg-grade:has(.form-control:invalid) .qg-hint{display:none}
.qg-grade:has(.form-control:invalid) .qg-err{display:block;font-weight:600;color:var(--danger-ink)}
.qg-grade:has(.form-control:invalid) .qg-score .form-control,.qg-grade:has(.form-control:invalid) .qg-score .input-group-text{border-color:var(--danger)}
.qg-grade:has(.form-control:invalid) .qg-score .input-group-text{color:var(--danger-ink);background:var(--danger-100)}
.qg-grade:has(.form-control:invalid) .qg-score:focus-within{box-shadow:0 0 0 4px rgba(220,38,38,.18)}
/* โหมดกดปุ่ม: ปุ่มคะแนนอยู่ในแถบเดียวกัน (ซ่อนช่องพิมพ์) */
.qg-grade .score-pad{flex:none}
.qg-grade .score-pad .score-btn:not(.is-on){background:var(--surface)}
@media (max-width:575.98px){.qg-grade{gap:10px 12px;padding:10px 12px}.qg-ico{width:38px;height:38px;border-radius:11px}}
@media (prefers-reduced-motion:reduce){.qg-grade,.qg-score{transition:none}}
/* เฉลยอัตโนมัติ (public/js/autograde.js): ปุ่มบนสุด · แนวคำตอบ · ป้ายผลใต้คำตอบ · คะแนนแนะนำในแถบให้คะแนน */
.ag-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.ag-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:0;border-radius:12px;font-size:.95rem;font-weight:700;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 8px 18px -10px rgba(var(--primary-rgb),.95);transition:filter .15s,transform .15s}
.ag-btn:hover{filter:brightness(1.07)}
.ag-btn:active{transform:translateY(1px)}
.ag-btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.28)}
.ag-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none;transform:none}
.ag-btn.is-ai{color:var(--primary-ink);background:var(--surface);border:1.5px solid rgba(var(--primary-rgb),.5);box-shadow:0 6px 16px -12px rgba(var(--primary-rgb),.9)}
.ag-btn.is-ai:hover{background:rgba(var(--primary-rgb),.07);filter:none}
.ag-btn.is-ai[data-ready="0"]{opacity:.6}
.ag-btn.is-busy:disabled{opacity:1;cursor:progress}
.ag-btn.is-busy>i{display:none}
.ag-btn .spinner-border,.ag-sum .spinner-border{flex:none;width:1rem;height:1rem;border-width:.15em}
.ag-sum{flex:1 1 200px;min-width:0;font-size:.82rem;line-height:1.45;color:var(--muted)}
.ag-sum.is-done,.ag-sum.is-busy,.ag-sum.is-err{order:3;flex:1 1 100%;display:flex;align-items:flex-start;gap:8px;padding:9px 14px;border-radius:12px;background:rgba(var(--primary-rgb),.07);border:1px solid rgba(var(--primary-rgb),.18);font-size:.86rem;font-weight:600;color:var(--primary-ink)}
.ag-sum.is-err{background:var(--danger-50);border-color:rgba(220,38,38,.28);color:var(--danger-ink)}
.ag-sum i{flex:none;font-size:1rem;line-height:1.3}
.ag-sum .spinner-border{margin-top:2px}
.ag-mode{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--muted)}
.essay-answers .ag-tag{display:flex;align-items:flex-start;gap:6px;margin-top:5px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.ag-tag i{flex:none;margin-top:1px}
.ag-tag b{font-weight:700}
.ag-tag.is-ok{color:var(--success-ink)}
.ag-tag.is-part,.ag-tag.is-dup,.ag-tag.is-miss{color:var(--warning-ink)}
.essay-ans:has(.ag-tag.is-ok) pre{border-color:rgba(22,163,74,.4);background:var(--success-50)}
.essay-ans:has(.ag-tag.is-part) pre,.essay-ans:has(.ag-tag.is-dup) pre,.essay-ans:has(.ag-tag.is-miss) pre{border-color:rgba(217,119,6,.45)}
.ag-guide{margin-top:12px;padding:10px 14px;border-radius:12px;background:rgba(var(--primary-rgb),.04);border:1px dashed rgba(var(--primary-rgb),.35)}
.ag-guide-h{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:.8rem;font-weight:700;color:var(--primary-ink)}
.ag-guide-t{font-size:.95rem;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.ag-points{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ag-pt{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:.86rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);overflow-wrap:anywhere}
.ag-pt i{font-size:.78rem}
.ag-pt.is-ok{color:var(--success-ink);background:var(--success-50);border-color:rgba(22,163,74,.35)}
.ag-pt.is-part{color:var(--warning-ink);background:var(--warning-50);border-color:rgba(217,119,6,.35)}
.ag-pt-sum{font-size:.78rem;color:var(--muted)}
.ag-points[hidden],.qg-auto[hidden]{display:none!important}
.qg-auto{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:10px;border-top:1px dashed rgba(var(--primary-rgb),.3);font-size:.86rem;line-height:1.45;color:var(--primary-ink)}
.qg-auto>span{flex:1 1 220px;min-width:0}
.qg-auto i{margin-right:6px}
.qg-auto b{font-size:.98rem}
.qg-grade:has(.form-control:not(:placeholder-shown):valid) .qg-auto{color:var(--success-ink);border-top-color:rgba(22,163,74,.3)}
.ag-use{flex:none;padding:5px 12px;border-radius:9px;border:1.5px solid var(--primary);background:var(--surface);color:var(--primary-ink);font-size:.82rem;font-weight:700}
.ag-use:hover,.ag-use:focus-visible{background:var(--primary);color:var(--on-primary)}
.qg-ico .qg-i-auto,.qg-ico .qg-i-ai,.qg-label .qg-sug{display:none}
.qg-grade.is-auto:has(.form-control:not(:placeholder-shown):valid) .qg-i-ok,.qg-grade.is-auto:has(.form-control:not(:placeholder-shown):valid) .qg-done{display:none}
.qg-grade.is-auto:not(.is-ai):has(.form-control:not(:placeholder-shown):valid) .qg-i-auto,.qg-grade.is-auto.is-ai:has(.form-control:not(:placeholder-shown):valid) .qg-i-ai{display:inline}
.qg-grade.is-auto:has(.form-control:not(:placeholder-shown):valid) .qg-sug{display:block;font-weight:600;color:var(--success-ink)}
@media (max-width:575.98px){.ag-btn{flex:1 1 auto;justify-content:center}.ag-mode{margin-left:0}}
/* ตรวจด้วย AI ทั้งห้อง (quizzes/_ai_bulk.php + public/js/ai-bulk.js): ปุ่ม + หน้าต่างวงความคืบหน้า 0–100% */
.aib-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:.55rem .9rem;border-radius:var(--bs-border-radius);font-weight:700;color:var(--primary-ink);background:var(--surface);border:1.5px solid rgba(var(--primary-rgb),.45);transition:background .15s,border-color .15s}
.aib-btn:hover,.aib-btn:focus-visible{background:rgba(var(--primary-rgb),.07);border-color:var(--primary);outline:0}
.aib-btn:focus-visible{box-shadow:0 0 0 4px rgba(var(--primary-rgb),.2)}
.aib-btn.is-compact{width:auto;margin:0;padding:.3rem .75rem;font-size:.85rem}
.aib-badge{padding:1px 8px;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.6;color:var(--on-primary);background:var(--primary)}
.aib-modal .modal-header{gap:12px}
.aib-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 6px 14px -6px rgba(var(--primary-rgb),.8)}
.aib-head{flex:1;min-width:0}
.aib-head .modal-title{font-weight:700;line-height:1.3}
.aib-sub{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aib-ring{position:relative;width:150px;height:150px;margin:4px auto 8px}
.aib-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.aib-track{fill:none;stroke:rgba(var(--primary-rgb),.12);stroke-width:11}
.aib-bar{fill:none;stroke:var(--primary);stroke-width:11;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset .6s cubic-bezier(.3,.7,.3,1),stroke .3s}
.aib-modal.is-done .aib-bar{stroke:#16a34a}
.aib-ring.is-zero .aib-bar{opacity:0}
.aib-pct{position:absolute;inset:0;display:grid;place-items:center}
.aib-pct span{display:inline-flex;align-items:baseline;gap:2px;line-height:1}
.aib-pct b{font-size:2.6rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.aib-pct small{font-size:1.05rem;font-weight:700;color:var(--muted)}
.aib-status{min-height:1.6em;text-align:center;font-weight:700;line-height:1.5;color:var(--ink)}
.aib-status>i,.aib-status>.spinner-border{margin-right:6px;vertical-align:-2px}
.aib-status.is-run{color:var(--primary-ink)}
.aib-status.is-done{color:var(--success-ink)}
.aib-status.is-warn{color:var(--warning-ink)}
.aib-status.is-err{color:var(--danger-ink)}
.aib-status .spinner-border,.aib-item .spinner-border{width:1rem;height:1rem;border-width:.15em}
.aib-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.aib-sum[hidden],.aib-note[hidden]{display:none}
.aib-pill{padding:3px 10px;border-radius:999px;font-size:.82rem;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2)}
.aib-pill.is-pass{color:var(--success-ink);background:var(--success-50);border-color:rgba(22,163,74,.25)}
.aib-pill.is-fail{color:var(--danger-ink);background:var(--danger-50);border-color:rgba(220,38,38,.2)}
.aib-pill.is-err{color:var(--warning-ink);background:var(--warning-50);border-color:rgba(217,119,6,.25)}
.aib-note{margin-top:12px;padding:10px 12px 10px 4px;border-radius:12px;background:rgba(var(--primary-rgb),.05);border:1px dashed rgba(var(--primary-rgb),.3);font-size:.85rem;line-height:1.55;color:var(--ink-2)}
.aib-note ul{margin:0;padding-left:22px}
.aib-note li+li{margin-top:3px}
.aib-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.aib-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);transition:border-color .2s,background .2s}
.aib-st{flex:none;width:20px;display:grid;place-items:center;color:var(--muted-2)}
.aib-item.is-run{border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.04)}
.aib-item.is-run .aib-st{color:var(--primary)}
.aib-item.is-ok .aib-st{color:#16a34a}
.aib-item.is-skip .aib-st{color:var(--muted)}
.aib-item.is-err{border-color:rgba(220,38,38,.3);background:var(--danger-50)}
.aib-item.is-err .aib-st{color:var(--danger)}
.aib-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none}
.aib-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aib-name:hover{color:var(--primary-ink)}
.aib-name small{font-weight:500;color:var(--muted)}
.aib-roll{flex:none;min-width:26px;height:22px;padding:0 6px;border-radius:7px;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.aib-res{flex:none;max-width:55%;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:.85rem}
.aib-score{font-size:1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.aib-score small{font-size:.75rem;font-weight:600;color:var(--muted)}
.aib-chip{padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;color:var(--muted);background:var(--surface-2)}
.aib-chip.is-pass{color:var(--success-ink);background:var(--success-100)}
.aib-chip.is-fail{color:var(--danger-ink);background:var(--danger-100)}
.aib-err{font-size:.8rem;text-align:right;color:var(--danger-ink)}
.aib-muted{font-size:.8rem;color:var(--muted)}
@media (max-width:575.98px){.aib-ring{width:128px;height:128px}.aib-pct b{font-size:2.2rem}.aib-res{max-width:62%}}
@media (prefers-reduced-motion:reduce){.aib-bar,.aib-item{transition:none}}


/* ครูเขียน/แก้ไขบนรูปงานที่นักเรียนส่ง */
.annot-item{margin-top:4px}
.annot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.annot-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:.76rem;font-weight:600}
.annot-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.annot-thumbs .img-zoom img{max-width:100%;max-height:240px;border:1px solid var(--line);border-radius:10px}
html.anx-open{overflow:hidden}
.anx{position:fixed;inset:0;z-index:2050;display:flex;flex-direction:column;background:#1f2937;color:#fff}
.anx[hidden]{display:none}
.anx-bar{display:flex;align-items:center;gap:6px 10px;padding:8px 12px;overflow-x:auto;scrollbar-width:none;background:#111827;border-bottom:1px solid rgba(255,255,255,.08)}
.anx-bar::-webkit-scrollbar{display:none}
.anx-title{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:220px;font-size:.84rem;opacity:.85;white-space:nowrap}
.anx-name{overflow:hidden;text-overflow:ellipsis}
.anx-group{display:flex;flex:none;align-items:center;gap:3px;padding:3px;border-radius:10px;background:rgba(255,255,255,.06)}
.anx-group button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:34px;height:34px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:#e5e7eb;font-size:.85rem;white-space:nowrap}
.anx-group button:hover{background:rgba(255,255,255,.12)}
.anx-group button.is-on{background:#fff;color:#111827}
.anx-group button:disabled{opacity:.35;pointer-events:none}
.anx-group button:focus-visible{outline:2px solid #93c5fd;outline-offset:1px}
.anx-group button.anx-color{width:32px;min-width:32px;padding:0}
.anx-color::after{content:"";width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.anx-group button.anx-color.is-on{background:rgba(255,255,255,.18)}
.anx-color.is-on::after{box-shadow:0 0 0 2px #fff}
.anx-dot{display:block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}
.anx-zoom{min-width:46px;text-align:center;font-size:.78rem;opacity:.8;font-variant-numeric:tabular-nums}
.anx-end{margin-left:auto}
.anx-group button.anx-primary{background:#22c55e;color:#052e16;font-weight:600}
.anx-group button.anx-primary:hover{background:#4ade80}
.anx-stage{position:relative;display:flex;flex:1;overflow:auto;padding:24px}
.anx-paper{position:relative;flex:none;margin:auto;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.anx-paper[hidden]{display:none}
.anx-paper canvas{position:absolute;inset:0;width:100%;height:100%}
.anx-live{touch-action:none;cursor:crosshair}
.anx-live[data-tool="text"]{cursor:text}
.anx-live[data-tool="pan"]{cursor:grab}
.anx-live[data-tool="erase"]{cursor:cell}
.anx-text{position:absolute;z-index:2;min-width:180px;margin:0;padding:0 4px;border:1.5px dashed currentColor;border-radius:4px;background:rgba(255,255,255,.88);font-weight:600;line-height:1.25;resize:none;overflow:hidden;outline:0}
.anx-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.65);font-size:.9rem}
.anx-msg.is-bad{background:#b91c1c}
.anx-toast{position:fixed;left:50%;bottom:24px;z-index:2100;transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:#111827;color:#fff;font-size:.88rem;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .4s}
.anx-toast.is-out{opacity:0}
@media (max-width:575.98px){.anx-group button span{display:none}.anx-title{display:none}.anx-stage{padding:10px}}

/* กิจกรรม: ทำจับคู่ / ใช่หรือไม่ */
.tf-pick{display:flex;flex-wrap:wrap;gap:8px}
.tf-pick .btn{min-width:110px}
.match-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.match-left{margin:0;padding:0;list-style:none}
.match-no{flex:none;min-width:1.6em;font-weight:600;color:var(--muted)}
.match-left li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line-2,#eef0f5)}
.match-text{flex:1;min-width:0;overflow-wrap:anywhere}
.match-left select{flex:none;width:min(260px,52%)}
.match-right{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,#f8f9fc)}
.match-opt{padding:3px 0;font-size:.92rem}
.match-opt b{display:inline-block;min-width:1.6em;color:var(--primary-ink)}
.match-result td{font-size:.9rem}
@media (max-width:767.98px){.match-box{grid-template-columns:1fr}.match-right{order:-1}.match-left li{flex-wrap:wrap}.match-left select{width:100%}}
/* หน้าสร้างกิจกรรม */
.act-total{padding:6px 14px;border-radius:999px;background:var(--primary-50);color:var(--primary-ink);font-size:.88rem}
.act-total b{font-size:1.05rem}
.act-rows{display:flex;flex-direction:column;gap:8px}
.act-row{display:flex;align-items:center;gap:8px}
.act-row-qa{align-items:flex-start}
.act-no{flex:none;width:26px;font-weight:600;color:var(--muted);text-align:right}
.act-row-qa .act-no{padding-top:8px}
.act-link{flex:none;color:var(--muted)}
.act-qa-main{flex:1;min-width:0}
.act-score{flex:none;width:88px;text-align:center}
/* ถามตอบ: ช่องคำตอบของนักเรียน (1 ข้อตอบได้หลายช่อง) */
.act-boxes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.act-boxes-l{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);margin-right:2px}
.act-boxes-list{display:contents}
.act-box-chip{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 4px 0 10px;border-radius:8px;background:var(--primary-50);color:var(--primary-ink);font-size:.8rem;font-weight:500}
.act-box-chip:not(:has(button)){padding-right:10px}
.act-box-chip button{width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:inherit;display:grid;place-items:center;padding:0;font-size:1rem;opacity:.7}
.act-box-chip button:hover{opacity:1;background:rgba(var(--primary-rgb),.14)}
.act-boxes-add{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:8px;border:1px dashed rgba(var(--primary-rgb),.45);background:transparent;color:var(--primary-ink);font-size:.8rem;font-weight:500}
.act-boxes-add:hover:not(:disabled){background:var(--primary-50);border-style:solid}
.act-boxes-add:disabled{opacity:.45}
/* หน้าทำ: ข้อเขียนหลายช่อง */
.essay-hint{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.essay-boxes{display:grid;gap:10px}
.essay-box{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.essay-box-no{min-width:30px;height:30px;padding:0 8px;margin-top:5px;border-radius:9px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary-ink);font-weight:600;font-size:.85rem}
.exam-main textarea.is-missing{border-color:var(--danger);box-shadow:0 0 0 .2rem rgba(220,38,38,.12)}
.essay-ans+.essay-ans{margin-top:8px}
/* ตารางการเข้าทำงาน: คอลัมน์แบบทดสอบแยกกัน */
/* หน้าสมาชิก: กดชื่อ/รูปนักเรียน = มุมมองนักเรียน */
.mem-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:10px;padding:2px 8px 2px 2px;margin-left:-2px}
.mem-link:hover,.mem-link:focus-visible{background:var(--primary-50);color:var(--primary-ink)}
.mem-link-ico{font-size:.9rem;color:var(--primary-ink);opacity:0;transition:opacity .15s}
.mem-link:hover .mem-link-ico,.mem-link:focus-visible .mem-link-ico{opacity:1}
@media (hover:none){.mem-link-ico{opacity:.6}}
/* มุมมองนักเรียนของครู: แถบบอกว่ากำลังดูหน้าของนักเรียน (ดูอย่างเดียว) */
.sv-bar{position:sticky;top:8px;z-index:1020;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;margin-bottom:14px;border-radius:14px;background:#1e1b2e;color:#fff;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.sv-bar>i{font-size:1.25rem;color:#fbbf24;flex:none}
.sv-t{flex:1;min-width:0;font-size:.92rem;line-height:1.45}
.sv-sub{display:block;font-size:.8rem;opacity:.75}
@media (max-width:575.98px){.sv-bar{flex-wrap:wrap}.sv-bar>.btn{margin-left:auto}}
.eng-table .eng-q{white-space:nowrap}
.eng-sub{font-size:.78rem;color:var(--muted);line-height:1.3;margin-top:2px}
.eng-wait-t{font-size:.85rem;font-weight:600;color:var(--warning-ink)}
.eng-doing-t{font-size:.85rem;font-weight:600;color:var(--info-ink)}
.eng-sw{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--warning-50);color:var(--warning-ink);font-size:.82rem;font-weight:600;white-space:nowrap}
/* แก้คำตอบกิจกรรมที่ส่งแล้ว */
.exam-revise,.revise-box{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--info-50);color:var(--info-ink);font-size:.9rem}
.exam-revise{margin-bottom:12px}
.revise-box{margin-top:14px}
.exam-revise>i,.revise-box>i{font-size:1.3rem;flex:none}
.exam-revise .small,.revise-box .small{color:var(--ink-2);margin-top:2px}
@media (max-width:575.98px){.exam-revise,.revise-box{flex-wrap:wrap}.exam-revise>.btn,.revise-box>.btn{margin-left:auto}}
/* ตัวเลือกการทำใบงาน (สวิตช์เปิด/ปิด) */
.act-opts{display:grid;gap:10px}
.act-opt{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--surface-2);cursor:pointer;margin:0;transition:background-color .2s}
.act-opt:hover{background:var(--surface-3)}
.act-opt:has(input:checked){background:var(--primary-50)}
.act-opt-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-xs);transition:color .2s}
.act-opt:has(input:checked) .act-opt-ico{color:var(--primary-ink)}
.act-opt-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.act-opt-t b{font-weight:600;color:var(--ink)}
.act-opt-t small{color:var(--muted);font-size:.82rem;line-height:1.5}
.act-opt .form-switch .form-check-input{width:2.6em;height:1.4em;margin:0;cursor:pointer}
/* หน้าทำ: แจ้งเตือนสั้น ๆ (เช่น ห้ามวางข้อความ) */
.exam-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:1090;max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;background:#1e1b2e;color:#fff;font-weight:500;font-size:.95rem;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);transform:translate(-50%,16px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.exam-toast.is-on{opacity:1;transform:translate(-50%,0)}
.exam-toast i{color:#fbbf24;font-size:1.1rem}
.exam-main.no-paste textarea.is-blocked{animation:np-shake .35s}
@keyframes np-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.essay-ans-l{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:2px}
.act-score span{display:block;font-size:.72rem;color:var(--muted)}
.act-yn{display:flex;flex:none;gap:4px}
.act-yn .btn{min-width:64px}
.act-del{flex:none}
.act-del:disabled{opacity:.35}
.act-cols{display:flex;gap:8px;margin-bottom:4px;font-size:.76rem;font-weight:600;color:var(--muted)}
.act-cols-match span:nth-child(1){width:26px}
.act-cols-match span:nth-child(2),.act-cols-match span:nth-child(4){flex:1}
.act-cols-match span:nth-child(3){width:16px}
.act-cols-match span:nth-child(5){width:34px}
@media (max-width:575.98px){.act-row-match{display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-areas:'no left del' 'link right right';gap:6px 8px;align-items:center}.act-row-match>.act-no{grid-area:no}.act-row-match>.act-cell:first-of-type{grid-area:left}.act-row-match>.act-cell:last-of-type{grid-area:right}.act-row-match>.act-link{grid-area:link;justify-self:end;transform:rotate(90deg)}.act-row-match>.act-del{grid-area:del}.act-row-yn{flex-wrap:wrap}.act-row-yn .form-control{flex:1 1 100%;order:1}.act-row-yn .act-no{order:0}.act-row-yn .act-yn,.act-row-yn .act-del{order:2}}
/* กิจกรรม: ห้องที่มอบหมาย + เวลาเผยแพร่ / หมดเวลาของแต่ละห้อง */
.ar-set{border:0;margin:0;padding:0;min-width:0}
.ar-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.ar-sub{font-size:.78rem;font-weight:400;color:var(--muted)}
.ar-room{margin-bottom:6px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s,background-color .15s}
.ar-room.is-on{border-color:var(--primary-200);background:var(--primary-50)}
.ar-room.is-single{margin-bottom:4px;padding:0;border:0;background:none}
.ar-head{display:flex;align-items:center;gap:8px}
.ar-head .form-check-input{flex:none;margin:0}
.ar-head .form-check-input:disabled{opacity:.75}
.ar-head label{flex:1;min-width:0;cursor:pointer}
.ar-tag{flex:none;padding:1px 8px;border:1px solid var(--primary-200);border-radius:999px;background:var(--surface);color:var(--primary-ink);font-size:.72rem}
.ar-tag.is-done{border-color:var(--warning-100);background:var(--warning-50);color:var(--warning-ink)}
.ar-room:not(.is-on) .ar-times{display:none}
.ar-times{display:grid;gap:6px;margin-top:8px}
.ar-room.is-single .ar-times{margin-top:0}
.ar-t{display:flex;align-items:center;gap:8px;margin:0}
.ar-t span{flex:none;width:58px;font-size:.82rem;color:var(--ink-2)}
.ar-t .form-control{flex:1;min-width:0}
.ar-std{margin-top:8px;padding:6px 10px;border-radius:10px;background:var(--success-50);color:var(--success-ink);font-size:.8rem}
.ar-list{display:flex;flex-direction:column;gap:4px;max-width:560px;font-size:.84rem}
.ar-list-h{color:var(--muted)}
.ar-li{display:grid;grid-template-columns:minmax(56px,auto) 1fr 1fr;gap:10px;align-items:center;padding:5px 10px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none}
.ar-li:hover{border-color:var(--primary-200);background:var(--primary-50);color:inherit}
.ar-li.is-self{border-color:var(--primary-200);background:var(--primary-50)}
.ar-li.ar-li-2{grid-template-columns:minmax(56px,auto) 1fr}
@media (max-width:575.98px){.ar-li{grid-template-columns:auto 1fr;row-gap:0}.ar-li:not(.ar-li-2) span:last-child{grid-column:1/-1}}

/* ปุ่ม "สร้าง" บนแถบด้านบน (หน้าในชั้นเรียนของครู) ก่อนการแจ้งเตือน ; มือถือเหลือแค่ไอคอน + */
.hdr-create{margin-right:4px}
.hdr-create>.btn{height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 14px 0 12px;border-radius:12px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm)}
.hdr-create>.btn .bi{font-size:1.05rem}
.hdr-create .dropdown-menu{max-height:calc(100vh - var(--header-h) - 16px);overflow-y:auto}
@media (max-width:575.98px){.hdr-create{margin-right:0}.hdr-create>.btn{width:40px;padding:0;justify-content:center}.hdr-create .hc-label,.hdr-create>.btn::after{display:none}}
/* งานมอบหมาย: ชนิดไฟล์ที่รับ (ใต้ "ไฟล์แนบ") */
.file-kinds{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--surface-2)}
.file-kinds .fk-label{margin-right:4px;font-size:.82rem;color:var(--muted)}
.file-kinds .btn{border-radius:999px}
.file-kinds .fk-sub{font-size:.72rem;opacity:.75}

.file-kinds .btn-check:checked+.btn{background:var(--primary);border-color:var(--primary);color:#fff}
.file-kinds .btn-check:not(:checked)+.btn{background:var(--surface);color:var(--muted);border-color:var(--line)}
/* ตัวเลือกห้อง: จัดกลุ่มตามระดับชั้น + "ทั้งหมด" ของระดับ */
.ar-level{margin-bottom:8px}
/* เพิ่มวิชาที่สอน (ครู) */
.class-card .foot .cc-del{color:var(--muted)}
.class-card .foot .cc-del:hover,.class-card .foot .cc-del:focus-visible{color:var(--danger,#dc2626);background:#fee2e2}
.tch{max-width:900px}
/* สร้างชั้นเรียน: ติ๊กห้อง 1–15 */
.ccr{max-width:900px}
.ccr-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.ccr-sec{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);line-height:1.25}
.ccr-sec small{font-size:.72rem;color:var(--muted);min-height:1.1em}
.btn-check:checked + .ccr-sec{border-color:var(--primary);background:var(--primary-50);color:var(--primary-ink);box-shadow:inset 0 0 0 1px var(--primary)}
.btn-check:checked + .ccr-sec small{color:var(--primary-ink)}
.btn-check:disabled + .ccr-sec{opacity:.55}
.ccr-sec.is-dup{background:var(--surface-2);border-style:dashed}
.ccr-preview{margin-top:8px;font-size:.84rem;color:var(--muted)}
.tch-step{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700;color:var(--ink)}
.tch-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:var(--on-primary,#fff);font-size:.8rem}
.tch-mode{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tch-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.tch-rooms .ar-sub,.tch-rooms .ar-tag{white-space:nowrap}
.tch-rooms .ar-room{margin-bottom:0}
.tch-rooms .ar-room.is-off{background:var(--surface-2)}
.tch-rooms .ar-room.is-off label{color:var(--muted)}
.ar-level-head{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:6px;border-radius:10px;background:var(--surface-3);font-size:.9rem}
.ar-level-head .form-check-input{flex:none;margin:0}
.ar-level-head label{cursor:pointer;margin:0}
.ar-level-name{color:var(--ink-2)}
.ar-level .ar-room{margin-left:10px}
.ar-single-name{font-size:.9rem;margin-bottom:4px}
/* จับคู่: ช่องที่เป็นรูปภาพ (หน้าทำ / ผล / คลังข้อสอบ) */
.mq-img{display:inline-block;vertical-align:middle;margin:2px 8px 2px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.mq-img img{display:block;max-width:180px;max-height:120px;width:auto;height:auto;object-fit:contain}
.mq-img.is-sm img{max-width:76px;max-height:56px}
.mq-text{vertical-align:middle}
.match-opt .mq-img img{max-height:96px}
.mq-thumb{height:30px;width:auto;border-radius:6px;object-fit:cover}
/* หน้าสร้างกิจกรรม: ช่องข้อความ + ปุ่มรูป · แถบนำเข้า Excel */
.act-cell{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.act-cell .form-control{flex:1;min-width:0}
.act-img-btn{flex:none;width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--line);color:var(--muted)}
.act-img-btn:hover{color:var(--primary-ink)}
.act-thumb{position:relative;flex:none;width:56px;height:42px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.act-thumb img{width:100%;height:100%;object-fit:cover}
.act-thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.6);color:#fff;font-size:.85rem;line-height:1;display:grid;place-items:center}
.act-row-extra .act-no{color:var(--muted-2)}
.act-import{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:14px;padding:8px 10px;border-radius:12px;background:var(--surface-2)}
.act-import-msg{flex:1 1 220px;font-size:.82rem;color:var(--muted)}
.act-import-msg.is-ok{color:var(--success-ink)}
.act-import-msg.is-err{color:var(--danger)}
/* หน้านำเข้ารายชื่อ: กล่องไฟล์ตัวอย่าง */
.imp-tpl{margin-bottom:14px;padding:12px 14px;border:1px solid var(--success-100);border-radius:12px;background:var(--success-50)}
.imp-cols{padding-left:0;list-style:none;counter-reset:col}
.imp-cols li{position:relative;padding:4px 0 4px 30px;border-bottom:1px dashed var(--line-2)}
.imp-cols li::before{counter-increment:col;content:counter(col);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:6px;background:var(--surface-3);color:var(--muted);font-size:.75rem;display:grid;place-items:center}
/* ตั้งรหัสผ่านใหม่ (เข้าระบบครั้งแรก) */
.pw-badge{width:52px;height:52px;margin-bottom:14px;border-radius:14px;display:grid;place-items:center;background:var(--primary-50);color:var(--primary-ink);font-size:1.5rem}
.pw-rules{list-style:none;margin:0 0 18px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.88rem;color:var(--muted)}
.pw-rules li{display:flex;align-items:center;gap:8px;padding:2px 0}
.pw-rules li.is-ok{color:var(--success-ink)}

/* เช็กชื่อด้วย QR / รหัส — ฟอร์มเลือกรูปแบบ (ครู) */
.att-mode{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.att-mode-opt{position:relative;display:block;margin:0;cursor:pointer}
.att-mode-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.att-mode-opt>span{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.att-mode-opt>span>i{grid-row:1/3;font-size:1.5rem;color:var(--primary)}
.att-mode-opt>span>b{font-weight:600}
.att-mode-opt>span>small{color:var(--muted)}
.att-mode-opt input:checked+span{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)}
.att-mode-opt input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.att-self-opts{margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:14px}
/* จอครู: QR + รหัส + รายชื่อสด */
.att-live-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.att-live-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.att-live-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.att-qr-card,.att-roll-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.att-qr-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.att-qr{width:min(100%,400px);aspect-ratio:1;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:opacity .2s}
.att-qr svg{display:block;width:100%;height:100%}
.att-code{font-size:clamp(2.4rem,7vw,4.5rem);font-weight:800;letter-spacing:.14em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.att-code.is-masked{color:var(--muted);letter-spacing:.24em}
.att-code-row{display:flex;align-items:center;justify-content:center;gap:12px}
.att-code-eye{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:1.2rem;transition:color .15s,border-color .15s,background .15s}
.att-code-eye:hover{color:var(--ink);background:var(--surface-2)}
.att-code-eye:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.att-code-sub{color:var(--muted);font-size:.95rem}
.att-timers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-weight:600}
.att-timers .is-warn{color:var(--warning-ink)}
.att-closed{padding:12px 18px;border-radius:12px;background:var(--surface-3);color:var(--muted);font-weight:600}
.att-roll-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-bottom:12px;font-size:.95rem}
.att-roll-head b{font-size:1.6rem}
/* รายชื่อที่เช็กแล้ว: --fs ตามลำดับ (ล่าสุดใหญ่สุด) · คนล่าสุด (is-top) พื้นไล่สีเด่น · คนใหม่เด้งเข้ามาพร้อมแสงวาบ */
.att-roll{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.att-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.4em;padding:.3em .8em;border-radius:999px;background:var(--success-50);color:var(--success-ink);border:1px solid var(--success-100);font-size:var(--fs,1.25rem);font-weight:600;line-height:1.3;white-space:nowrap;transition:color .6s,border-color .6s,box-shadow .6s}
.att-chip::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#15803d,#16a34a 45%,#4ade80);opacity:0;transition:opacity .6s}
.att-chip.is-late{background:var(--warning-50);color:var(--warning-ink);border-color:var(--warning-100)}
.att-chip.is-late::before{background:linear-gradient(135deg,#b45309,#d97706 45%,#fbbf24)}
.att-chip.is-top{color:#fff;border-color:transparent;box-shadow:0 16px 32px -16px rgba(22,163,74,.8)}
.att-chip.is-top.is-late{box-shadow:0 16px 32px -16px rgba(217,119,6,.8)}
.att-chip.is-top::before{opacity:1}
.att-chip>i{font-size:.8em}
.att-chip small{font-size:.62em;font-weight:500;opacity:.85}
.att-chip .dup{color:var(--danger)}
.att-chip.is-top .dup{color:#fff}
.att-chip.is-new{animation:att-pop .75s cubic-bezier(.2,.9,.3,1.25) both,att-glow 1.3s ease-out .5s 2}
.att-chip.is-new.is-late{animation-name:att-pop,att-glow-late}
@keyframes att-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes att-glow{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}100%{box-shadow:0 0 0 20px rgba(22,163,74,0)}}
@keyframes att-glow-late{0%{box-shadow:0 0 0 0 rgba(217,119,6,.5)}100%{box-shadow:0 0 0 20px rgba(217,119,6,0)}}
.att-live.is-full .att-chip{font-size:calc(var(--fs,1.25rem)*1.15)}
.att-live.is-full .att-live-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (prefers-reduced-motion:reduce){.att-chip,.att-chip::before{transition:none}.att-chip.is-new{animation:none}}
.att-wait{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.att-wait span{padding:4px 10px;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:.85rem}
.att-live:fullscreen,.att-live:-webkit-full-screen{padding:24px;overflow:auto;background:var(--canvas)}
.att-live.is-full .att-qr{width:min(100%,62vh)}
@media (max-width:767.98px){.att-live-grid{grid-template-columns:1fr}}
/* นักเรียน: หน้าเช็กชื่อ */
.ck{max-width:560px;margin:0 auto}
.ck-title{font-size:1.5rem;font-weight:600;margin:0 0 14px;text-align:center}
.ck-open{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:12px;border-radius:14px;background:var(--primary-50);border:1px solid var(--primary-100,#dbeafe)}
.ck-open.is-done{background:var(--success-50);border-color:var(--success-100)}
.ck-open>i{font-size:1.4rem;color:var(--primary)}
.ck-open.is-done>i{color:var(--success-ink)}
.ck-grid{display:grid;gap:12px}
.ck-scan,.ck-code{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.ck-scan{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;width:100%;text-align:left;cursor:pointer}
.ck-scan:hover{border-color:var(--primary-200,#bfdbfe)}
.ck-scan>i,.ck-code label>i{grid-row:1/3;font-size:2.3rem;color:var(--primary)}
.ck-scan b,.ck-code label b{display:block;font-size:1.1rem}
.ck-scan small,.ck-code label small{color:var(--muted)}
.ck-code label{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-bottom:12px;cursor:pointer}
.ck-input{margin-bottom:10px;text-align:center;font-size:2rem;font-weight:700;letter-spacing:.35em;font-variant-numeric:tabular-nums}
.ck-scanner{margin-top:12px;padding-bottom:12px;border-radius:18px;overflow:hidden;background:#0f172a;color:#fff;text-align:center}
.ck-scanner video{display:block;width:100%;max-height:60vh;object-fit:cover;background:#000}
.ck-scan-hint{padding:10px 14px;font-size:.95rem}
.ck-result{padding:28px 18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);text-align:center}
.ck-result .ico{width:76px;height:76px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:2.4rem;background:var(--success-50);color:var(--success-ink)}
.ck-result.is-late .ico{background:var(--warning-50);color:var(--warning-ink)}
.ck-result .ico.is-info{background:var(--primary-50);color:var(--primary)}
.ck-today{margin-top:18px}
.ck-today .row-i{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-2)}
.ck-tip{margin-top:14px;font-size:.85rem;color:var(--muted);text-align:center}
/* หน้าหลักนักเรียน: แถบ/ปุ่มเช็กชื่อ */
.sp-ck-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:900px;margin:-10px auto 18px;padding:12px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--primary-200,#bfdbfe);box-shadow:0 10px 26px -18px rgba(15,23,42,.22)}
.sp-ck-strip>i{font-size:1.5rem;color:var(--primary)}
.sp-ck-strip .t{flex:1;min-width:200px}
.sp-ck-strip .btn{border-radius:999px}
.sp-ck-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;max-width:720px;margin:0 auto 16px;padding:14px 18px;border-radius:18px;color:#fff;background:linear-gradient(110deg,var(--secondary),var(--primary));box-shadow:0 14px 30px -18px rgba(var(--primary-rgb),.65)}
.sp-ck-card.is-done{background:linear-gradient(110deg,#16a34a,#059669);box-shadow:0 14px 30px -18px rgba(5,150,105,.6)}
.sp-ck-live{position:relative;flex:none;width:12px;height:12px;margin:0 4px;border-radius:50%;background:#fff}
.sp-ck-live::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:spLive 1.4s ease-out infinite}
@keyframes spLive{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}}
.sp-ck-ico{flex:none;font-size:1.6rem;line-height:1}
.sp-ck-card .t{flex:1;min-width:180px}
.sp-ck-card .t b{display:block;font-size:1.05rem;font-weight:600}
.sp-ck-card .t span{display:block;font-size:.84rem;opacity:.93}
.sp-ck-card .btn{border:0;border-radius:999px;padding:9px 18px;background:#fff;color:var(--primary-ink);font-weight:600;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.sp-ck-card .btn:hover{color:var(--primary-ink);transform:translateY(-1px)}
@media (max-width:575.98px){.sp-ck-card{padding:12px 14px;border-radius:16px}.sp-ck-card .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.sp-ck-live::after{animation:none}}

/* วิชาที่เลือกในหน้าหลักนักเรียน: การ์ดเด่น (แถบสีซ้าย ป้าย "กำลังดู" ไอคอนทึบ แสงวาบ) + แบนเนอร์วิชาแทนป้ายชื่อ */
.sp-card{transition:transform .18s,box-shadow .3s,border-color .3s,background .3s}
.sp-card-icon{transition:transform .25s,background-color .25s,color .25s,box-shadow .25s}
.sp-card.is-active{border-color:var(--sc);background:linear-gradient(120deg,rgba(var(--sc-rgb),.15),rgba(var(--sc-rgb),.03) 55%,rgba(var(--sc-rgb),0)) var(--surface,#fff);transform:scale(1.012);box-shadow:inset 0 0 0 1px var(--sc),0 0 0 4px rgba(var(--sc-rgb),.14),0 22px 40px -22px rgba(var(--sc-rgb),.6)}
.sp-card.is-active::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:5px;border-radius:0 5px 5px 0;background:var(--sc)}
.sp-card.is-active::after{content:"กำลังดู";position:absolute;top:-11px;right:18px;padding:3px 11px;border-radius:999px;background:var(--sc);color:#fff;font-size:.72rem;font-weight:600;box-shadow:0 6px 14px -6px rgba(var(--sc-rgb),.7)}
.sp-card.is-active .sp-card-icon{background:var(--sc);color:#fff;transform:scale(1.08);box-shadow:0 10px 20px -10px rgba(var(--sc-rgb),.8)}
.sp-card.is-pulse{animation:spPulse 1.5s ease-out 2}
@keyframes spPulse{0%{box-shadow:inset 0 0 0 1px var(--sc),0 0 0 0 rgba(var(--sc-rgb),.5),0 22px 40px -22px rgba(var(--sc-rgb),.6)}70%{box-shadow:inset 0 0 0 1px var(--sc),0 0 0 16px rgba(var(--sc-rgb),0),0 22px 40px -22px rgba(var(--sc-rgb),.6)}100%{box-shadow:inset 0 0 0 1px var(--sc),0 0 0 4px rgba(var(--sc-rgb),.14),0 22px 40px -22px rgba(var(--sc-rgb),.6)}}
.sp-sub-hero{--sc:var(--primary);--sc-rgb:var(--primary-rgb);position:relative;isolation:isolate;overflow:hidden;margin:0 calc(50% - 50vw);padding:34px 0 26px;border-radius:0;color:#fff;background:linear-gradient(118deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%,rgba(0,0,0,.2)),var(--sc);box-shadow:0 18px 36px -22px rgba(var(--sc-rgb),.75);text-shadow:0 1px 2px rgba(0,0,0,.14)}
.sp-sub-hero::before{content:"";position:absolute;z-index:-1;right:-70px;top:-120px;width:300px;height:300px;border-radius:50%;border:46px solid rgba(255,255,255,.1);box-shadow:0 0 0 60px rgba(255,255,255,.05)}
.sp-sub-in{position:relative;max-width:1180px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 36px}
.sp-sub-in::before{content:"";position:absolute;z-index:-1;left:-120px;bottom:-150px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.sp-sub-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%) skewX(-12deg)}
.sp-sub-art{position:absolute;right:40px;bottom:-34px;z-index:-1;font-size:9.5rem;line-height:1;color:rgba(255,255,255,.13);transform:rotate(-12deg);pointer-events:none}
.sp-sub-id{display:flex;align-items:flex-start;gap:18px;min-width:0}
.sp-sub-ico{flex:none;width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font-size:2.1rem;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(6px)}
.sp-sub-text{min-width:0}
.sp-sub-kicker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;font-size:.76rem;font-weight:600;letter-spacing:.02em}
.sp-sub-kicker span{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.2)}
.sp-sub-name{margin:0;font-size:2rem;font-weight:700;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.sp-sub-teacher{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.92rem;opacity:.96}
.sp-sub-teacher img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.75)}
.sp-sub-ask{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 18px;border-radius:999px;background:#fff;color:var(--sc);font-size:.9rem;font-weight:600;text-decoration:none;text-shadow:none;box-shadow:0 10px 20px -12px rgba(0,0,0,.5);transition:transform .15s}
.sp-sub-ask:hover{color:var(--sc);transform:translateY(-1px)}
/* กล่องตัวเลขสรุปแบบกระจกใส (ขวา) */
.sp-sub-stats{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));padding:14px 10px;border-radius:22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.sp-sub-stats>div{position:relative;text-align:center;padding:6px 16px;border-left:1px solid rgba(255,255,255,.28)}
.sp-sub-stats>div:first-child{border-left:0}
.sp-sub-stats b{display:block;font-size:2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.sp-sub-stats b small{font-size:.55em;font-weight:700;margin-left:1px;opacity:.9}
.sp-sub-stats span{display:block;margin-top:3px;font-size:.8rem;opacity:.92}
.sp-sub-stats>div.is-bad{margin:-6px 0;border-radius:16px;border-left-color:transparent;background:rgba(255,255,255,.95);color:#dc2626;text-shadow:none}
.sp-sub-stats>div.is-bad+div{border-left-color:transparent}
.sp-sub-bar{display:block;width:60px;height:4px;margin:7px auto 0;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}
.sp-sub-bar>i{display:block;height:100%;border-radius:4px;background:#fff}
/* เข้าฉากตอนสลับวิชา: แบนเนอร์ลอยขึ้นพร้อมแสงวิ่งผ่าน ไอคอนเด้ง ชิปทยอยขึ้น ส่วนถัดไปไล่ขึ้นตาม */
.sp-subject.is-enter .sp-sub-hero{animation:spUp .5s cubic-bezier(.2,.8,.2,1) both}
.sp-subject.is-enter .sp-sub-hero::after{animation:spSheen 1.1s ease-out .3s both}
.sp-subject.is-enter .sp-sub-ico{animation:spPop .6s cubic-bezier(.34,1.56,.64,1) .12s both}
.sp-subject.is-enter .sp-sub-stats>div,.sp-subject.is-enter .sp-sub-ask{animation:spUp .45s ease-out both}
.sp-subject.is-enter .sp-sub-stats>div:nth-child(1){animation-delay:.18s}
.sp-subject.is-enter .sp-sub-stats>div:nth-child(2){animation-delay:.26s}
.sp-subject.is-enter .sp-sub-stats>div:nth-child(3){animation-delay:.34s}
.sp-subject.is-enter .sp-sub-ask{animation-delay:.3s}
.sp-subject.is-enter>:not(.sp-sub-hero){animation:spUp .5s ease-out both}
.sp-subject.is-enter>:nth-child(2){animation-delay:.12s}
.sp-subject.is-enter>:nth-child(3){animation-delay:.2s}
.sp-subject.is-enter>:nth-child(4){animation-delay:.28s}
.sp-subject.is-enter>:nth-child(n+5){animation-delay:.34s}
@keyframes spUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes spPop{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes spSheen{from{transform:translateX(-120%) skewX(-12deg)}to{transform:translateX(120%) skewX(-12deg)}}
@media (max-width:991.98px){.sp-sub-in{grid-template-columns:1fr;gap:16px}.sp-sub-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:575.98px){.sp-sub-hero{padding:20px 0 16px}.sp-sub-in{padding:0 16px}.sp-sub-id{gap:12px}.sp-sub-ico{width:56px;height:56px;font-size:1.6rem;border-radius:18px}.sp-sub-name{font-size:1.4rem}.sp-sub-ask{margin-top:10px;padding:8px 14px;font-size:.85rem}.sp-sub-stats{padding:12px 6px}.sp-sub-stats>div{padding:4px 6px}.sp-sub-stats b{font-size:1.5rem}.sp-sub-stats span{font-size:.72rem}.sp-sub-art{right:4px;bottom:-22px;font-size:6.5rem}.sp-card.is-active::after{right:12px}}
@media (prefers-reduced-motion:reduce){.sp-subject.is-enter *,.sp-subject.is-enter>*,.sp-card.is-pulse{animation:none!important}.sp-card,.sp-card-icon,.sp-sub-ask{transition:none}}

/* แนบไฟล์งานของนักเรียน: กล่องลากวาง + ตารางรูปตัวอย่าง (ลบทีละรูป) + ตัวนับ */
.dz-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dz-count{padding:2px 10px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}
.dz{position:relative}
.dz-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.dz-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:150px;margin:0;padding:22px 16px;border:2px dashed var(--primary-200,#bfdbfe);border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(var(--primary-rgb),.08),transparent 70%) var(--surface-2);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s,box-shadow .15s}
.dz-area:hover,.dz.is-over .dz-area{border-color:var(--primary);background:var(--primary-50)}
.dz.is-over .dz-area{transform:scale(1.01);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12)}
.dz:has(.dz-input:focus-visible) .dz-area{outline:3px solid rgba(var(--primary-rgb),.4);outline-offset:2px}
.dz-ico{width:56px;height:56px;margin-bottom:4px;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;color:var(--primary);background:#fff;box-shadow:0 8px 20px -12px rgba(var(--primary-rgb),.6)}
.dz-text{font-size:1rem;color:var(--ink)}
.dz-link{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dz-sub{font-size:.8rem;color:var(--muted)}
.dz-full{display:none;font-size:.92rem;font-weight:600;color:var(--success-ink)}
.dz.is-full .dz-area{min-height:0;padding:14px;cursor:default;border-style:solid;border-color:var(--success-100);background:var(--success-50)}
.dz.is-full .dz-ico,.dz.is-full .dz-text,.dz.is-full .dz-sub,.dz.is-full .dz-cam{display:none}
.dz.is-full .dz-full{display:inline-flex;align-items:center}
.dz.is-busy .dz-area{opacity:.6;pointer-events:none}
.dz-cam{display:none;align-items:center;margin-top:10px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-weight:500;touch-action:manipulation}
@media (pointer:coarse){.dz-cam{display:inline-flex}}
.dz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin-top:10px}
.dz-grid:empty{display:none}
.dz-item{position:relative;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);animation:dzIn .25s ease-out}
.dz-item img,.dz-thumb,.dz-file{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:var(--surface-3)}
.dz-item img{object-fit:cover}
.dz-thumb{overflow:hidden}
.dz-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-2);font-size:1.8rem;text-decoration:none}
.dz-file small{font-size:.62rem;font-weight:700;letter-spacing:.04em}
.dz-del{position:absolute;top:-8px;right:-8px;z-index:1;width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:#fff;font-size:.72rem;box-shadow:0 4px 10px -4px rgba(0,0,0,.5);touch-action:manipulation}
.dz-del:hover{background:#b91c1c;color:#fff}
.dz-cap{display:block;margin-top:6px;font-size:.72rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-size{display:block;font-size:.68rem;color:var(--muted)}
.dz-item.is-saved::after{content:"ส่งไว้แล้ว";position:absolute;left:10px;top:10px;padding:1px 7px;border-radius:999px;background:rgba(22,163,74,.92);color:#fff;font-size:.62rem;font-weight:600}
.dz-wait{grid-column:1/-1;font-size:.85rem;color:var(--muted)}
.dz-msg{margin-top:8px;font-size:.84rem;color:var(--muted)}
.dz-msg:empty{display:none}
.dz-msg.is-err{color:var(--danger-ink)}
@keyframes dzIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.sub-actions{margin-top:4px}
@media (max-width:575.98px){.dz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dz-area{min-height:130px;padding:18px 12px}.sub-actions .btn{width:100%;padding:12px}}
@media (prefers-reduced-motion:reduce){.dz-item{animation:none}.dz-area{transition:none}}

/* ตั้งค่าระบบ: ตัวอย่างโลโก้ (พื้นเข้ม / พื้นขาว / ไอคอนแท็บ / ไอคอนหน้าจอมือถือ) */
.logo-set{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:flex-start}
.logo-prev{display:grid;grid-template-columns:repeat(2,96px);gap:10px;flex:none}
.lp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:96px;border:1px solid var(--line);border-radius:14px;font-size:.68rem;color:var(--muted);text-align:center}
.lp-tile img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff}
.lp-tile .brand-mark{width:44px;height:44px;border-radius:12px;font-size:1.3rem}
.lp-tile.is-dark{background:linear-gradient(135deg,var(--secondary),var(--primary));color:rgba(255,255,255,.85)}
.lp-tile.is-light{background:#fff}
.lp-tile.is-tab{background:var(--surface-2)}
.lp-tile.is-tab img{width:24px;height:24px;border-radius:5px;background:transparent}
.lp-tile.is-touch{background:var(--surface-2)}
.lp-tile.is-touch img{width:48px;height:48px;border-radius:11px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
@media (max-width:575.98px){.logo-prev{grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.lp-tile{height:84px}}
/* ฟอร์มสร้างงาน: ขั้นที่ 1 (บังคับ) ต้องครบก่อนกรอกส่วนอื่น */
.step1{border-color:var(--primary-200)}
.step1-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.step-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:.8rem;font-weight:700;flex:none}
.step-ok{margin-left:auto;color:var(--success-ink);font-size:.85rem;font-weight:600}
.step-lock{min-width:0;margin:0;padding:0;border:0}
.step-lock.is-locked .card{opacity:.55}
.step-wait{margin-bottom:12px;padding:10px 14px;border-radius:10px;background:var(--warning-50);color:var(--warning-ink);font-size:.9rem}
.step-wait .step-miss{font-weight:600}
/* งานที่ส่งเป็นวิดีโอ */
.dz-cams{display:flex;flex-wrap:wrap;gap:0 8px}
.sub-video video{display:block;width:100%;max-height:420px;border-radius:10px;background:#000}
/* คลังข้อสอบ: วิเคราะห์ข้อสอบ (ตอบถูก/ผิด + ความยาก) */
.ia-col{width:84px}
.ia-num{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ia-num small{font-weight:400;color:var(--muted)}
.table .ia-ok{color:var(--success-ink)}
.table .ia-bad{color:var(--danger-ink)}
.ia-lv{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.ia-lv.is-e2{background:#dcfce7;color:#15803d}
.ia-lv.is-e1{background:#e0f2fe;color:#0369a1}
.ia-lv.is-m{background:#ede9fe;color:#6d28d9}
.ia-lv.is-h1{background:#ffedd5;color:#c2410c}
.ia-lv.is-h2{background:#fee2e2;color:#b91c1c}
.ia-p{font-size:.72rem;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ia-legend{display:flex;flex-direction:column;gap:6px}
.ia-legend .ia-lv{font-size:.7rem;padding:1px 8px}
/* แถบด้านบน: ปุ่ม "วิชาที่สอน" (เลือกวิชา → ห้อง) */
.hdr-subj .hs-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-weight:600;font-size:.88rem;white-space:nowrap}
.hdr-subj .hs-btn>.bi:first-child{color:var(--primary-ink)}
.hdr-subj .hs-btn:hover,.hdr-subj .hs-btn[aria-expanded=true]{border-color:var(--primary-200);background:var(--primary-50);color:var(--primary-ink)}
.hdr-subj .hs-caret{font-size:.7rem;opacity:.7}
.hdr-subj{flex:none}
@media (max-width:575.98px){.hdr-subj .hs-btn{width:38px;height:38px;padding:0;justify-content:center}.hdr-subj .hs-label,.hdr-subj .hs-caret{display:none}.hdr-subj .hs-btn>.bi:first-child{font-size:1.05rem}}
.hs-menu{width:380px;max-width:calc(100vw - 24px);padding:0;border-radius:14px;overflow:hidden}
.hs-head{padding:12px 16px 6px;font-weight:700;color:var(--ink)}
.hs-head span{font-weight:400;font-size:.8rem;color:var(--muted)}
.hs-list{max-height:min(65vh,520px);overflow-y:auto;padding:0 8px 8px}
.hs-item{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--ink);text-decoration:none}
.hs-item.is-new{margin-top:6px}
.hs-item:hover{background:var(--surface-2);color:var(--ink)}
.hs-item.is-on{background:var(--primary-50)}
.hs-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--c);color:#fff;font-size:.85rem}
.hs-name{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-room{min-width:46px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.8rem;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.hs-item:hover .hs-room{border-color:var(--primary-200);color:var(--primary-ink)}
.hs-item.is-on .hs-room{background:var(--primary);border-color:var(--primary);color:#fff}
.hs-foot{display:block;padding:10px 16px;border-top:1px solid var(--line-2);font-size:.85rem;text-align:center;text-decoration:none}
/* หน้าวิชา: ภาพรวมของวิชาในห้อง (ครูผู้สอน) */
.ov-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:2px 0 10px}
.ov-title{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.ov-title .bi{color:var(--primary-ink);margin-right:6px}
.ov-sub{font-size:.8rem;color:var(--muted)}
.ov-kpis .kpi{padding:14px 16px 12px}
.ov-kpis .kpi-value{font-size:1.65rem}
.ov-kpis .kpi-value.is-good{color:var(--success-ink)}
.ov-kpis .kpi-value.is-warn{color:var(--warning-ink)}
.ov-kpis .kpi-value.is-bad{color:var(--danger-ink)}
.ov-stu{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none}
.ov-stu:hover{background:var(--surface-2)}
.ov-stu-main{display:flex;flex-direction:column;min-width:0;flex:1}
.ov-stu-name{font-weight:600;font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-stu-main small{font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-flag{flex:none;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:600}
.ov-flag.is-crit{background:var(--danger-50);color:var(--danger-ink)}
.ov-flag.is-watch{background:var(--warning-50);color:var(--warning-ink)}
.ov-work{display:block;padding:9px 14px;border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none}
.ov-work:hover{background:var(--surface-2)}
.ov-w-top{display:flex;align-items:baseline;gap:8px}
.ov-w-title{flex:1;min-width:0;font-weight:600;font-size:.86rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-w-n{flex:none;font-size:.8rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ov-bar{display:block;height:6px;margin:5px 0 4px;border-radius:3px;background:var(--surface-3)}
.ov-bar>span{display:block;height:100%;border-radius:3px;background:var(--success)}
.ov-bar.has-miss{background:var(--danger-50)}
.ov-w-meta{display:block;font-size:.74rem;color:var(--muted)}
.ov-bands{padding:4px 14px 10px}
.ov-band{display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:8px;padding:3px 0;font-size:.8rem}
.ov-b-lbl{color:var(--ink-2);font-variant-numeric:tabular-nums}
.ov-b-bar{height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.ov-b-bar>span{display:block;height:100%;border-radius:5px}
.ov-b-bar .b1{background:#16a34a}.ov-b-bar .b2{background:#65a30d}.ov-b-bar .b3{background:#ca8a04}.ov-b-bar .b4{background:#ea580c}.ov-b-bar .b5{background:#dc2626}
.ov-b-n{text-align:right;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* หน้าตั้งค่าของครู */
.set-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8px}
.set-tabs a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;color:var(--ink-2);font-weight:600;font-size:.9rem;text-decoration:none}
.set-tabs a:hover{background:var(--surface-2);color:var(--ink)}
.set-tabs a.is-on{background:var(--primary-50);color:var(--primary-ink)}
.set-ico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:var(--c);color:#fff;font-size:1.15rem}
.set-subj-name{font-weight:700;font-size:1.02rem;color:var(--ink)}
.set-subj-meta{font-size:.82rem;color:var(--muted);margin-top:1px}
.set-rooms{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.set-room{padding:1px 10px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.set-room:hover{border-color:var(--primary-200);background:var(--primary-50);color:var(--primary-ink)}
.set-lock{margin-top:12px;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:.82rem;color:var(--muted)}
.set-edit{margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px}
.set-edit>summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--primary-ink);list-style:none}
.set-edit>summary::-webkit-details-marker{display:none}
.set-types,.set-days{display:flex;flex-wrap:wrap;gap:6px}
.set-types .btn,.set-days .btn{border-radius:999px}
/* ตั้งค่า > AI ช่วยตรวจ: สถานะ key · ทดสอบ · การใช้งาน · การ์ดเลือกโมเดล */
.ai-state{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid transparent}
.ai-state>i{font-size:1.35rem;line-height:1.2}
.ai-state b{display:block;font-weight:700}
.ai-state small{display:block;font-size:.82rem;opacity:.9;overflow-wrap:anywhere}
.ai-state.is-ok{color:var(--success-ink);background:var(--success-50);border-color:rgba(22,163,74,.25)}
.ai-state.is-warn{color:var(--warning-ink);background:var(--warning-50);border-color:rgba(217,119,6,.3)}
.ai-key .form-control{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}
.ai-key .form-control::placeholder{font-family:var(--bs-body-font-family)}
.ai-test{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px}
.ai-test-out{font-size:.84rem;color:var(--muted)}
.ai-test-out.is-run{color:var(--primary-ink)}
.ai-test-out.is-ok{font-weight:600;color:var(--success-ink)}
.ai-test-out.is-err{font-weight:600;color:var(--danger-ink)}
.ai-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-usage>div{min-width:0;padding:10px 6px;border-radius:12px;text-align:center;background:var(--surface-2);border:1px solid var(--line-2)}
.ai-usage b{display:block;font-size:1.35rem;font-weight:800;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.ai-usage span{display:block;margin-top:2px;font-size:.78rem;line-height:1.35;color:var(--muted)}
.ai-usage small{font-size:.72rem;color:var(--muted-2)}
.ai-privacy{list-style:none;display:grid;gap:6px;margin:12px 0 0;padding:0;font-size:.84rem;color:var(--ink-2)}
.ai-privacy li{display:flex;gap:8px}
.ai-privacy i{flex:none;color:var(--primary)}
.ai-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.ai-model{position:relative;display:flex;flex-direction:column;gap:4px;margin:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.ai-model:hover{border-color:rgba(var(--primary-rgb),.45)}
.ai-model-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-right:22px}
.ai-model-top b{font-weight:700;white-space:nowrap;color:var(--ink)}
.ai-model-tag{padding:1px 8px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.ai-model-ok{position:absolute;top:12px;right:12px;color:var(--primary);opacity:0;transition:opacity .15s}
.ai-model-desc{font-size:.84rem;line-height:1.45;color:var(--muted)}
.ai-model-cost{margin-top:auto;padding-top:4px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.ai-model-cost i{margin-right:5px;color:var(--primary)}
.btn-check:checked+.ai-model{border-color:var(--primary);background:rgba(var(--primary-rgb),.05);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.12)}
.btn-check:checked+.ai-model .ai-model-ok{opacity:1}
.btn-check:focus-visible+.ai-model{outline:2px solid var(--primary);outline-offset:2px}
.ai-custom{display:none;max-width:340px;margin-top:10px}
.ai-models:has(#aim-custom:checked)+.ai-custom{display:block}
.ai-school{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;font-size:.84rem;color:var(--ink-2);background:var(--surface-2)}
@media (max-width:575.98px){.ai-usage b{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.ai-model,.ai-model-ok{transition:none}}
.sch-week{display:grid;grid-template-columns:repeat(var(--days),minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.sch-day{padding:10px;border-right:1px solid var(--line-2);min-height:120px}
.sch-day:last-child{border-right:0}
.sch-day.is-today{background:var(--primary-50)}
.sch-day-h{font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:8px}
.sch-day-h span{font-size:.7rem;font-weight:600;color:#fff;background:var(--primary);border-radius:999px;padding:1px 7px;margin-left:4px}
.sch-slot{position:relative;padding:8px 10px;margin-bottom:8px;border-radius:10px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c)}
.sch-time{font-size:.76rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sch-subj{display:block;font-weight:600;font-size:.86rem;color:var(--ink);text-decoration:none;line-height:1.3;margin-top:2px}
.sch-subj:hover{color:var(--primary-ink)}
.sch-room{font-size:.76rem;color:var(--muted)}
.sch-acts{position:absolute;top:6px;right:8px;display:flex;gap:8px;opacity:.55}
.sch-slot:hover .sch-acts,.sch-acts:focus-within{opacity:1}
.sch-empty{font-size:.78rem;color:var(--muted)}
@media (max-width:767.98px){.sch-week{grid-template-columns:1fr}.sch-day{border-right:0;border-bottom:1px solid var(--line-2);min-height:0}}
/* ตั้งค่า > นักเรียน: เพิ่มนักเรียน / ย้ายห้อง */
.st-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:.82rem;line-height:1.55}
.st-note>i{margin-top:1px;color:var(--primary-ink)}
.mv-head{display:flex;align-items:center;gap:8px;margin:16px 0 6px}
.mv-all{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:.84rem;color:var(--ink-2);cursor:pointer}
.mv-all .form-check-input{margin:0}
.mv-list{max-height:340px;overflow-y:auto;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mv-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;font-size:.9rem;cursor:pointer;transition:background .12s}
.mv-row[hidden]{display:none}
.mv-row:hover{background:var(--surface-3)}
.mv-row:has(input:checked){background:var(--primary-50)}
.mv-row .form-check-input{flex:none;margin:0}
.mv-no{flex:none;width:26px;text-align:right;color:var(--muted-2);font-size:.8rem;font-variant-numeric:tabular-nums}
.mv-name{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-code{flex:none;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.mv-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:.88rem}
/* เลขที่นักเรียน: ตารางแก้เลขที่ + ปุ่มเรียงอัตโนมัติ + แถบบันทึกติดขอบล่าง */
.rl-auto{display:flex;flex-wrap:wrap;gap:6px}
.rl-meta{margin-bottom:8px;font-size:.84rem;color:var(--muted)}
.rl-warn{color:var(--warning-ink)}
.rl-wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.rl-sub{display:none}
/* มือถือ: ซ่อนคอลัมน์เลขประจำตัว แสดงใต้ชื่อแทน (เห็นเพศโดยไม่ต้องเลื่อนตาราง) */
@media (max-width:575.98px){.rl-table th,.rl-table td{padding-left:8px;padding-right:8px}.rl-c-no{width:72px}.rl-in{width:58px}.rl-c-code{display:none}.rl-c-g{width:64px}.rl-sub{display:block;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}}
.rl-table th{padding:8px 12px;background:var(--surface-2);color:var(--muted);font-size:.78rem;font-weight:600;white-space:nowrap}
.rl-table td{padding:5px 12px}
.rl-table tbody tr:last-child td{border-bottom:0}
.rl-c-no{width:92px}
.rl-c-code{width:140px;color:var(--muted);font-variant-numeric:tabular-nums}
.rl-c-g{width:84px}
.rl-name{color:var(--ink)}
.rl-in{width:72px;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.rl-in::-webkit-outer-spin-button,.rl-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rl-in.is-changed{border-color:var(--primary);background:var(--primary-50);color:var(--primary-ink);font-weight:600}
.rl-g{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.74rem;font-weight:600}
.rl-g.is-m{background:#dbeafe;color:#1d4ed8}
.rl-g.is-f{background:#fce7f3;color:#be185d}
.rl-g.is-x{background:var(--surface-3);color:var(--muted)}
.rl-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px calc(-1 * var(--bs-card-spacer-x)) calc(-1 * var(--bs-card-spacer-y))}
.rl-status{font-size:.85rem;color:var(--muted)}
.rl-status.is-dirty{color:var(--primary-ink);font-weight:600}
.rl-status.is-warn{color:var(--danger);font-weight:600}
.rl-status.is-ok{color:var(--success-ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){.rl-table tbody.is-sorted td{animation:rl-flash .9s ease-out}}
@keyframes rl-flash{from{background-color:var(--primary-50)}}
.today-slots{padding:6px 8px}
.today-slot{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.today-slot+.today-slot{border-top:1px solid var(--line-2)}
.today-slot.is-past{opacity:.55}
.today-slot.is-now{background:var(--primary-50)}
.ts-time{flex:none;width:92px;font-size:.8rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ts-main{flex:1;min-width:0;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.ts-main b{font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-main small{font-size:.75rem;color:var(--muted)}
.ts-now{flex:none;font-size:.7rem;font-weight:700;color:#fff;background:var(--primary);border-radius:999px;padding:1px 8px}
/* หลังหมดเวลาส่ง / หักคะแนนเมื่อส่งช้า */
.late-seg{display:flex;flex-wrap:wrap;gap:6px}
.late-seg .btn{border-radius:999px}
.late-pen{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.late-pen-h{font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.as-chip.is-late{background:var(--warning-50);color:var(--warning-ink)}
.late-calc{padding:8px 12px;border-radius:10px;background:var(--warning-50);color:var(--warning-ink);font-size:.84rem}
.late-calc-h{font-weight:600}
.late-calc [data-late-out]:empty{display:none}
.late-net{margin-top:3px;font-size:.74rem;font-weight:600;color:var(--warning-ink);white-space:nowrap}
.late-net.is-empty{display:none}
.gb td.is-pen{background:var(--warning-50)}
.gb td.is-pen .gb-sc{color:var(--warning-ink)}
.gb-key.is-pen{background:var(--warning-50)}
.vl-late{margin-top:8px;padding:8px 12px;border-radius:10px;font-size:.84rem;background:var(--warning-50);color:var(--warning-ink)}
.vl-late.is-closed{background:var(--surface-2);color:var(--ink-2)}
.qz-note.is-late{color:var(--warning-ink)}
.late-rate-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--ink-2)}
.late-rate-row .late-pct{width:78px;flex:none}
/* บัญชีเข้าระบบของนักเรียน (หน้าติดตามนักเรียน) */
.pw-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.pw-row+.pw-row{border-top:1px solid var(--line-2)}
.pw-k{flex:none;width:78px;font-size:.82rem;color:var(--muted)}
.pw-v{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;font-size:.9rem}
.pw-v code{font-size:.95rem;color:var(--ink);background:var(--surface-2);padding:2px 8px;border-radius:6px;word-break:break-all}
.pw-v .btn{padding:2px 8px}
.pw-secret.is-hidden{letter-spacing:.12em;color:var(--muted)}
/* หัวงานของครู (หน้างาน) — กระชับ: ข้อมูลบรรทัดเดียว · ห้องเป็นป้ายเล็ก · แบบทดสอบ/วิดีโอบรรทัดละรายการ */
.ah-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ah-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;font-size:1.15rem;background:var(--primary-50);color:var(--primary-ink)}
.ah-ico.t-quiz,.ah-ico.t-activity{background:#ede9fe;color:#6d28d9}
.ah-ico.t-video{background:#ffe4e6;color:#be123c}
.ah-main{flex:1 1 260px;min-width:0}
.ah-kicker{font-size:.78rem;font-weight:600;color:var(--muted)}
.ah-title{font-size:1.25rem;font-weight:700;line-height:1.3;margin:1px 0 4px;color:var(--ink);overflow-wrap:anywhere}
/* รายการคั่นด้วยจุด: จุดหน้าข้อแรกของทุกบรรทัดถูกซ่อน (ขึ้นบรรทัดใหม่แล้วไม่มีจุดค้างหน้าบรรทัด) */
.dots{overflow:hidden;min-width:0}
.dots>span{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;margin-left:-15px}
.dots>span>span::before{content:"·";display:inline-block;width:15px;text-align:center;font-weight:400;color:var(--muted)}
.ah-meta{font-size:.84rem;color:var(--ink-2)}
.ah-meta i{margin-right:4px;color:var(--muted)}
.ah-meta .is-score{font-weight:700;color:var(--primary-ink)}
.ah-meta .is-ended,.ah-meta .is-ended i{color:var(--danger-ink);font-weight:600}
.ah-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.ah-acts form{margin:0}
.ah-st .ah-dot{display:inline-block;margin-right:6px;vertical-align:middle}
.ah-st.is-live{color:var(--success-ink)}
.ah-st.is-later{color:var(--warning-ink)}
.ah-st.is-draft{color:var(--muted)}
.ah-rooms{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:.8rem}
.ah-rooms-h{font-weight:600;color:var(--muted);margin-right:2px}
.ah-rc{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font-weight:600;color:var(--ink);text-decoration:none}
.ah-rc:hover{border-color:var(--primary-200);background:var(--primary-50);color:var(--ink)}
.ah-rc.is-self{border-color:var(--primary-200);background:var(--primary-50);color:var(--primary-ink)}
.ah-rc small{font-size:.74rem;font-weight:500;color:var(--muted)}
.ah-rc small.is-ended{color:var(--danger-ink)}
.ah-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--success-ink)}
.ah-dot.is-later{background:var(--warning-ink)}
.ah-dot.is-draft{background:var(--line)}
.ah-sub{margin-top:12px;padding:4px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2)}
.ah-sub-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;padding:6px 0;font-size:.84rem}
.ah-sub-row+.ah-sub-row{border-top:1px dashed var(--line)}
.ah-sub-row>i{color:var(--primary-ink)}
.ah-sub-k{font-weight:600;color:var(--ink-2)}
a.ah-sub-k{color:var(--primary-ink)}
.ah-sub-t{font-weight:600;min-width:0;overflow-wrap:anywhere}
.ah-sub-m{display:block;flex:0 1 auto;color:var(--muted)}
.ah-sub-m b{color:var(--ink);font-weight:600;margin:0 2px}
.ah-sub-go{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-weight:600;white-space:nowrap;text-decoration:none}
@media (max-width:575.98px){.ah-main{flex-basis:0}.ah-acts{width:100%;margin-left:0}.ah-title{font-size:1.15rem}.ah-sub-go{margin-left:0}}
/* หน้าต่างยืนยันด้วยรหัสผ่านก่อนลบ */
.pwc-ico{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:10px;border-radius:10px;font-size:1rem;vertical-align:middle;background:var(--danger-50);color:var(--danger-ink)}
.pwc-what{font-weight:700;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.pwc-info{margin-top:8px;padding:8px 12px;border-radius:10px;font-size:.84rem;white-space:pre-line;background:var(--danger-50);color:var(--danger-ink)}
.pwc-err{margin-top:6px;font-size:.84rem;font-weight:600;color:var(--danger-ink)}
/* คลังข้อสอบ: แบบทดสอบแยกตามรายวิชา */
.bk-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.bk-jump a{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:.84rem;font-weight:600;color:var(--ink-2);background:var(--surface);text-decoration:none}
.bk-jump a:hover{border-color:var(--primary-200);background:var(--primary-50);color:var(--primary-ink)}
.bk-jump a span{min-width:20px;padding:0 6px;border-radius:999px;font-size:.74rem;text-align:center;color:var(--muted);background:var(--surface-3)}
.bk-group{margin-bottom:26px;scroll-margin-top:90px}
.bk-group-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bk-group-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--surface-3);color:var(--ink-2)}
.bk-group-h h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
.bk-group-sub{font-size:.8rem;color:var(--muted)}

/* =========================================================
   ค้นหาด่วน (Ctrl/⌘+K · ปุ่ม / · ปุ่มค้นหาบนแถบหัว)
   ========================================================= */
.cmdk{position:fixed;inset:0;z-index:2200;display:flex;justify-content:center;align-items:flex-start;padding:11vh 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-backdrop{position:absolute;inset:0;background:rgba(11,19,36,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}
.cmdk.is-in .cmdk-backdrop{opacity:1}
.cmdk-panel{position:relative;width:min(640px,100%);max-height:min(74vh,640px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 36px 80px -24px rgba(11,19,36,.5);overflow:hidden;opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .18s,transform .22s var(--ease)}
.cmdk.is-in .cmdk-panel{opacity:1;transform:none}
.cmdk-search{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.cmdk-search>.bi{font-size:1.2rem;color:var(--primary-ink)}
.cmdk-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.02rem;color:var(--ink)}
.cmdk-search input::placeholder{color:var(--muted-2)}
.cmdk-esc{flex:none;border:1px solid var(--line);border-bottom-width:2px;background:var(--surface-2);border-radius:7px;font-size:.7rem;font-weight:600;color:var(--muted);padding:1px 7px}
.cmdk-esc:hover{color:var(--ink)}
.cmdk-list{overflow-y:auto;padding:4px 8px 10px;overscroll-behavior:contain;scrollbar-width:thin}
.ck-gl{font-size:.72rem;font-weight:600;letter-spacing:.03em;color:var(--muted-2);padding:12px 10px 4px}
.ck-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:11px;color:var(--ink);text-decoration:none;scroll-margin:8px 0}
.ck-item:hover{color:var(--ink)}
.ck-item.is-active{background:var(--primary-50);box-shadow:inset 0 0 0 1px var(--primary-100)}
.ck-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-2);font-size:1rem;transition:background .12s,color .12s}
.ck-ico.is-subj{background:var(--c);color:#fff}
.ck-item.is-active .ck-ico:not(.is-subj){background:var(--primary);color:var(--on-primary)}
.ck-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ck-l{font-weight:500;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-l mark{padding:0;background:transparent;color:var(--primary-ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--primary-200);text-underline-offset:3px}
.ck-s{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-go{flex:none;color:var(--primary-ink);opacity:0;transition:opacity .12s}
.ck-item.is-active .ck-go{opacity:.8}
.ck-empty{text-align:center;padding:40px 16px;color:var(--muted)}
.ck-empty>.bi{display:block;font-size:1.7rem;margin-bottom:8px;color:var(--muted-2)}
.ck-empty>div{font-weight:600;color:var(--ink-2)}
.cmdk-foot{display:flex;gap:18px;padding:9px 16px;border-top:1px solid var(--line-2);background:var(--surface-2);font-size:.74rem;color:var(--muted)}
.cmdk-foot kbd{font-family:inherit;font-size:.68rem;font-weight:600;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;margin-right:3px;box-shadow:none}
html.cmdk-open{overflow:hidden}
@media (max-width:575.98px){.cmdk{padding:10px 10px 0;align-items:flex-start}.cmdk-panel{max-height:calc(100dvh - 20px);border-radius:16px}.cmdk-foot{display:none}.ck-item{padding:10px}}
@media (prefers-reduced-motion:reduce){.cmdk-panel,.cmdk-backdrop{transition:none}.dropdown-menu.show{animation:none}}

/* =========================================================
   แบนเนอร์ต้อนรับของแดชบอร์ด (ครู / ผู้ดูแลระบบ / ผู้ปกครอง)
   ========================================================= */
.welcome{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin:6px 0 22px;padding:24px 28px;border-radius:var(--r-xl);color:var(--on-primary);background:linear-gradient(120deg,var(--primary) 0%,var(--primary-700) 100%);box-shadow:0 22px 44px -26px rgba(var(--primary-rgb),.9)}
.welcome::before{content:"";position:absolute;z-index:-1;width:340px;height:340px;right:-90px;top:-170px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--on-primary-rgb),.20),rgba(var(--on-primary-rgb),.04) 70%,transparent);box-shadow:0 0 0 42px rgba(var(--on-primary-rgb),.05),0 0 0 84px rgba(var(--on-primary-rgb),.03)}
.welcome::after{content:"";position:absolute;z-index:-1;inset:0 0 0 45%;background-image:radial-gradient(rgba(var(--on-primary-rgb),.22) 1.2px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 55%,transparent 100%);mask-image:linear-gradient(100deg,transparent 0%,#000 55%,transparent 100%);opacity:.6}
.wl-main{min-width:0;flex:1 1 360px}
.wl-date{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:500;background:rgba(var(--on-primary-rgb),.14);border:1px solid rgba(var(--on-primary-rgb),.22)}
.welcome h1{color:inherit;font-size:1.7rem;font-weight:700;line-height:1.3;margin:10px 0 2px;letter-spacing:-.005em;text-wrap:balance}
.wl-sub{font-size:.92rem;opacity:.86}
.wl-actions{display:flex;flex-wrap:wrap;gap:8px}
.welcome .btn{--bs-btn-padding-y:.55rem;--bs-btn-padding-x:1rem;--bs-btn-border-radius:12px;font-weight:600}
.btn-glass{--bs-btn-color:var(--on-primary);--bs-btn-bg:rgba(var(--on-primary-rgb),.14);--bs-btn-border-color:rgba(var(--on-primary-rgb),.28);--bs-btn-hover-color:var(--on-primary);--bs-btn-hover-bg:rgba(var(--on-primary-rgb),.24);--bs-btn-hover-border-color:rgba(var(--on-primary-rgb),.4);--bs-btn-active-color:var(--on-primary);--bs-btn-active-bg:rgba(var(--on-primary-rgb),.3);--bs-btn-active-border-color:rgba(var(--on-primary-rgb),.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-solid{--bs-btn-color:var(--primary-ink);--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-color:var(--primary-ink);--bs-btn-hover-bg:#f2f6ff;--bs-btn-hover-border-color:#f2f6ff;--bs-btn-active-color:var(--primary-ink);--bs-btn-active-bg:#e8efff;--bs-btn-active-border-color:#e8efff;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
@media (max-width:575.98px){
  .welcome{padding:18px 18px 16px;margin-top:2px;border-radius:18px}
  .welcome h1{font-size:1.35rem;margin-top:8px}
  .wl-actions{width:100%}
  .wl-actions .btn{flex:1 1 auto}
}
.wl-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px}
.wl-sub b{font-weight:600}
.wl-live{flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.32)}
/* แดชบอร์ดครู (.is-compact): แถบหัวเตี้ยบรรทัดเดียว — วันที่ตัวหนา | สถานะคาบสอนวันนี้ · ปุ่มลัดทางขวา (ไม่มีคำทักทาย) */
.welcome.is-compact{gap:10px 20px;margin-bottom:18px;padding:13px 16px 13px 20px}
.welcome.is-compact::before{width:220px;height:220px;right:-60px;top:-120px}
.welcome.is-compact .wl-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;flex:1 1 320px}
.welcome.is-compact .wl-date{gap:10px;padding:0;border:0;border-radius:0;background:none;font-size:1.06rem;font-weight:700;letter-spacing:-.005em}
.welcome.is-compact .wl-date>i{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:10px;font-size:.92rem;background:rgba(var(--on-primary-rgb),.16)}
.welcome.is-compact .wl-sub{position:relative;padding-left:15px;font-size:.9rem}
.welcome.is-compact .wl-sub::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:rgba(var(--on-primary-rgb),.35)}
.welcome.is-compact .btn{--bs-btn-padding-y:.42rem;--bs-btn-padding-x:.9rem;font-size:.9rem}
@media (max-width:767.98px){
  .welcome.is-compact .wl-main{flex-direction:column;align-items:flex-start;gap:4px}
  .welcome.is-compact .wl-sub{padding-left:42px}
  .welcome.is-compact .wl-sub::before{display:none}
}
@media (max-width:575.98px){
  .welcome.is-compact{gap:10px;padding:12px 14px;border-radius:16px}
  .welcome.is-compact .wl-date{font-size:1rem}
  .welcome.is-compact .wl-date>i{width:28px;height:28px}
  .welcome.is-compact .wl-sub{padding-left:38px;font-size:.84rem}
  /* ปุ่มลัด 3 ปุ่มอยู่แถวเดียว: ไม่มีไอคอน ตัวเล็กลง */
  .welcome.is-compact .wl-actions{flex-wrap:nowrap;gap:6px}
  .welcome.is-compact .wl-actions .btn{flex:1 1 0;min-width:0;--bs-btn-padding-x:.4rem;--bs-btn-padding-y:.45rem;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .welcome.is-compact .wl-actions .btn>i{display:none}
}

/* =========================================================================
   แดชบอร์ดครู (ปรับใหม่ 2026-11-12): สถิติโทนสีเดียว · งานรอตรวจจัดกลุ่มตามชิ้นงาน
   · คาบสอนวันนี้ · กำหนดส่งพร้อมความคืบหน้าการส่ง · วิชาที่สอนเต็มความกว้าง
   ========================================================================= */
.dash-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.dash-kpis.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dash-col>.dk-due{flex:none} /* แดชบอร์ดครู: "ครบกำหนดใน 7 วัน" อยู่บนสุดของคอลัมน์ขวา */
.dk{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-width:0;padding:16px 18px 15px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.dk::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-600));opacity:0;transition:opacity .2s}
.dk:hover{color:inherit;transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.3);box-shadow:0 16px 32px -20px rgba(var(--primary-rgb),.55),var(--shadow-xs)}
.dk:hover::before{opacity:1}
.dk-top{display:flex;align-items:center;gap:10px;min-width:0}
.dk-ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.dk.is-alert .dk-ico{color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 6px 14px -6px rgba(var(--primary-rgb),.85)}
.dk-label{min-width:0;font-size:.84rem;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-go{flex:none;margin-left:auto;font-size:.8rem;color:var(--muted-2);transition:transform .2s var(--ease),color .2s}
.dk:hover .dk-go{color:var(--primary-ink);transform:translate(2px,-2px)}
.dk:hover .dk-go.bi-arrow-down-right{transform:translate(2px,2px)}
/* ตัวเลขเด่น: ใหญ่ หนา ไล่สีธีม (หน่วยตัวเล็กสีจาง) */
.dk-value{display:flex;align-items:baseline;gap:8px;margin-top:16px;font-size:clamp(2.5rem,2.7vw,3.1rem);font-weight:800;line-height:.95;letter-spacing:-.035em;color:var(--primary-ink);font-variant-numeric:tabular-nums}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .dk-value{background:linear-gradient(135deg,var(--primary) 10%,var(--primary-700) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.dk-value small{font-size:.86rem;font-weight:600;letter-spacing:0;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.dk-foot{margin-top:auto;padding-top:12px;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-week{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:auto;padding-top:11px}
.dw{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.dw i{display:grid;place-items:center;width:100%;max-width:24px;aspect-ratio:1;border-radius:7px;background:var(--surface-3);font-style:normal;font-size:.66rem;font-weight:700;line-height:1;color:var(--primary-ink)}
.dw i.lv-1{background:rgba(var(--primary-rgb),.18)}
.dw i.lv-2{background:rgba(var(--primary-rgb),.36)}
.dw i.lv-3{background:var(--primary);color:var(--on-primary)}
.dw b{max-width:100%;font-size:.6rem;font-weight:600;line-height:1.5;color:var(--muted-2);white-space:nowrap}
.dw.is-today i{box-shadow:inset 0 0 0 1.5px rgba(var(--primary-rgb),.6)}
.dw.is-today b{color:var(--primary-ink)}

.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:16px;align-items:start}
.dash-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-xs);scroll-margin-top:calc(var(--header-h) + 16px)}
.dc-head{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 16px 8px}
.dc-head h2{margin:0;font-size:.98rem;font-weight:700;color:var(--ink);white-space:nowrap}
.dc-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.92rem;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.dc-count{flex:none;min-width:24px;padding:0 8px;border-radius:999px;font-size:.74rem;font-weight:700;line-height:1.55;text-align:center;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1);font-variant-numeric:tabular-nums}
.dc-note{min-width:0;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-link{flex:none;margin-left:auto;font-size:.8rem;font-weight:600;white-space:nowrap}
.dc-list{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}
.dc-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 8px 8px;padding:8px 12px;border-radius:11px;font-size:.8rem;font-weight:600;text-align:center;background:var(--surface-2)}
.dc-more:hover{background:rgba(var(--primary-rgb),.08)}

/* แถวรายการในการ์ด: กดได้ทั้งแถว */
.dl-row{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border-radius:12px;color:inherit;text-decoration:none;transition:background .15s}
.dl-row:hover{color:inherit;background:var(--surface-2)}
.dl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dl-title{font-size:.9rem;font-weight:600;line-height:1.45;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row:hover .dl-title{color:var(--primary-ink)}
.dl-meta{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-tag{display:inline-block;margin-left:7px;padding:0 7px;border-radius:999px;font-size:.66rem;font-weight:600;line-height:1.6;vertical-align:1px;color:var(--ink-2);background:var(--surface-3)}
.dl-late{display:inline-block;margin-left:7px;padding:0 7px;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.6;color:var(--warning-ink);background:var(--warning-100)}
.dl-go{flex:none;font-size:.8rem;color:var(--muted-2);transition:transform .15s,color .15s}
.dl-row:hover .dl-go{color:var(--primary-ink);transform:translateX(2px)}
.dl-avatar{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover}
.sj-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot,var(--primary))}
.gq-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08);transition:background .15s,color .15s}
.gq:hover .gq-ico{color:var(--on-primary);background:var(--primary)}
.gq-people{flex:none;display:flex;align-items:center}
.gq-people img,.gq-people span{width:28px;height:28px;margin-left:-9px;border-radius:50%;border:2px solid var(--surface);object-fit:cover;transition:border-color .15s}
.gq-people>:first-child{margin-left:0}
.gq-people span{display:grid;place-items:center;font-size:.62rem;font-weight:700;color:var(--ink-2);background:var(--surface-3)}
.gq:hover .gq-people img,.gq:hover .gq-people span{border-color:var(--surface-2)}
.gq-n{flex:none;min-width:40px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.gq-n b{font-size:1.1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.gq-n small{font-size:.68rem;color:var(--muted)}

/* คาบสอนวันนี้ */
.tsr{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border-radius:12px}
.tsr-time{flex:none;width:44px;display:flex;flex-direction:column;line-height:1.25;font-variant-numeric:tabular-nums}
.tsr-time b{font-size:.86rem;font-weight:700;color:var(--ink)}
.tsr-time small{font-size:.72rem;color:var(--muted)}
.tsr-main{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:11px;border-left:3px solid var(--dot,var(--primary));color:inherit;text-decoration:none}
.tsr-main b{font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr-main:hover b{color:var(--primary-ink)}
.tsr-main small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr-bar{display:block;height:4px;margin-top:6px;border-radius:999px;overflow:hidden;background:rgba(var(--primary-rgb),.15)}
.tsr-bar>span{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.tsr.is-now{background:rgba(var(--primary-rgb),.07)}
.tsr.is-past{opacity:.5}
.tsr-chip{flex:none;padding:0 8px;border-radius:999px;font-size:.66rem;font-weight:700;line-height:1.65;color:var(--on-primary);background:var(--primary)}
.tsr-chip.is-next{color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.tsr-att{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--ink-2);background:var(--surface-3);transition:background .15s,color .15s}
.tsr-att:hover{color:var(--on-primary);background:var(--primary)}

/* กำหนดส่งที่ใกล้ถึง */
.du{align-items:flex-start}
.du-date{flex:none;width:44px;height:48px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08)}
.du-date b{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums}
.du-date small{margin-top:4px;font-size:.62rem;font-weight:600}
.du-date.is-soon{color:var(--warning-ink);background:var(--warning-100)}
.du .dl-main{padding-top:2px}
.du-prog{display:flex;align-items:center;gap:8px;margin-top:6px}
.du-bar{flex:1;max-width:150px;height:5px;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.du-bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-600))}
.du-prog small{font-size:.7rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.du-chip{flex:none;margin-top:3px;padding:0 9px;border-radius:999px;font-size:.68rem;font-weight:600;line-height:1.7;white-space:nowrap;color:var(--muted);background:var(--surface-3)}
.du-chip.is-info{color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.du-chip.is-warning{color:var(--warning-ink);background:var(--warning-100)}
.du-chip.is-danger{color:var(--danger-ink);background:var(--danger-100)}

/* สถานะว่าง */
.dc-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 26px;text-align:center}
.dc-empty-ico{flex:none;width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.3rem;color:var(--muted);background:var(--surface-3)}
.dc-empty-ico.is-ok{color:var(--success-ink);background:var(--success-100);box-shadow:0 0 0 6px var(--success-50)}
.dc-empty-txt{display:flex;flex-direction:column;min-width:0}
.dc-empty-txt b{font-size:.9rem;font-weight:600;color:var(--ink)}
.dc-empty-txt small{font-size:.78rem;color:var(--muted)}
.dc-empty.is-compact{flex-direction:row;align-items:center;gap:12px;padding:6px 16px 16px;text-align:left}
.dc-empty.is-compact .dc-empty-ico{width:40px;height:40px;border-radius:12px;font-size:1.1rem}
.dc-empty.is-compact .dc-empty-txt{flex:1}
.dc-empty.is-compact .btn{flex:none}

.dash-subjects{margin-top:24px}
.dash-sec-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.dash-sec-head h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--ink)}

@media (max-width:1199.98px){
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .dash-kpis.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* มือถือ: สถิติ 2 ช่องต่อแถว ช่องที่ 3 (กำหนดส่ง + แถบรายวัน) เต็มแถว */
@media (max-width:767.98px){
  .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-kpis>.dk:nth-child(3):last-child{grid-column:1/-1}
}
@media (min-width:768px) and (max-width:1199.98px){
  .dash-grid>.dash-col:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (max-width:575.98px){
  .dash-kpis{gap:10px;margin-bottom:14px}
  .dk{padding:13px 13px 12px;border-radius:16px}
  .dk-top{gap:8px}
  .dk-ico{width:30px;height:30px;border-radius:9px;font-size:.92rem}
  .dk-label{font-size:.78rem}
  .dk-go{display:none}
  .dk-value{margin-top:12px;font-size:2.15rem}
  .dk-value small{font-size:.76rem}
  .dk-foot{font-size:.72rem;white-space:normal}
  .dk-week{gap:2px;padding-top:9px}
  .dw i{border-radius:5px;font-size:.6rem}
  .dw b{font-size:.52rem}
  .dash-grid,.dash-col{gap:12px}
  .dc-head{padding:12px 12px 6px}
  .dc-list{padding:0 4px 6px}
  .dl-row{gap:10px;padding:9px 8px}
  .gq-ico{width:36px;height:36px;border-radius:11px}
  .gq-people{display:none}
  .dc-empty.is-compact{flex-wrap:wrap;padding:4px 12px 14px}
  .dash-subjects{margin-top:18px}
}
/* แอปบนมือถือ (PWA): แถบชวนติดตั้ง/เปิดแจ้งเตือน · หน้า แอปมือถือ & แจ้งเตือน · จดจำฉันไว้ (หน้าเข้าระบบ) */
.pwa-banner{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid rgba(var(--primary-rgb),.25);box-shadow:0 8px 20px -14px rgba(var(--primary-rgb),.6)}
.pwa-banner[hidden]{display:none}
.pwa-banner>img{flex:none;width:40px;height:40px;border-radius:10px;object-fit:contain;background:#fff}
.pwa-banner>i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.2rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700))}
.pwa-banner>div{flex:1}
.pwa-banner b{display:block;font-size:.92rem;font-weight:700;color:var(--ink)}
.pwa-banner small{display:block;font-size:.78rem;line-height:1.35;color:var(--muted)}
.pwa-banner .btn{flex:none;border-radius:10px;font-weight:700}
.pwa-banner .btn-close{flex:none;font-size:.7rem}
.pwa-head-icon{flex:none;width:52px;height:52px;border-radius:14px;background:#fff;box-shadow:var(--shadow-xs)}
.pwa-state,.push-state{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}
.pwa-state[hidden]{display:none}
.pwa-state>i,.push-state>i{font-size:1.3rem;line-height:1.2}
.pwa-state b,.push-state b{display:block;font-weight:700}
.pwa-state small,.push-state small{display:block;font-size:.82rem;opacity:.9}
.pwa-state.is-on,.push-state.is-on{color:var(--success-ink);background:var(--success-50);border-color:rgba(22,163,74,.25)}
.pwa-state.is-warn,.push-state.is-warn{color:var(--warning-ink);background:var(--warning-50);border-color:rgba(217,119,6,.3)}
.push-state.is-off{color:var(--ink-2)}
.pwa-state+.push-state{margin-top:10px}
.push-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.push-btns:not(:has(> :not([hidden]))){display:none}
.push-out{margin-top:8px;font-size:.86rem;color:var(--muted)}
.push-out:empty{display:none}
.push-out.is-ok{font-weight:600;color:var(--success-ink)}
.push-out.is-err{font-weight:600;color:var(--danger-ink)}
.pwa-install-btn{margin-bottom:12px;font-weight:700}
.pwa-install-btn:not(.is-native){display:none}
.pwa-os{padding:10px 12px;border-radius:12px;border:1px solid var(--line-2)}
.pwa-os+.pwa-os{margin-top:10px}
.pwa-os.is-mine{border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.04)}
.pwa-os-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:700;color:var(--ink)}
.pwa-os-h i{color:var(--primary)}
.pwa-steps{margin:0;padding-left:22px;font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.pwa-steps li+li{margin-top:4px}
.pwa-ico{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;vertical-align:-6px;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
[data-pwa-steps].is-flash{animation:pwa-flash 1.2s ease}
@keyframes pwa-flash{30%{box-shadow:0 0 0 4px rgba(var(--primary-rgb),.35)}}
.pwa-devs{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.pwa-devs-h{margin-bottom:6px;font-size:.8rem;font-weight:700;color:var(--muted)}
.pwa-dev{display:flex;align-items:center;gap:10px;padding:6px 0}
.pwa-dev>i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.pwa-dev>div{flex:1}
.pwa-dev b{display:block;font-size:.9rem;font-weight:600}
.pwa-dev small{display:block;font-size:.76rem;color:var(--muted)}
.pwa-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.pwa-cat.form-switch{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.pwa-cat.form-switch .form-check-input{flex:none;float:none;margin:3px 0 0;width:2.4em;height:1.3em;cursor:pointer}
.pwa-cat:has(.form-check-input:checked){border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.04)}
.pwa-cat b{display:block;font-weight:700;color:var(--ink)}
.pwa-cat small{display:block;font-size:.8rem;color:var(--muted)}
.pwa-lead{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;color:var(--ink-2)}
.pwa-lead .form-select{width:auto}
/* หน้าหลักนักเรียน: การ์ดชวนติดตั้งแอป — แสดงเฉพาะโทรศัพท์ที่ยังไม่ได้ติดตั้ง (public/js/pwa.js) */
.sp-app{position:relative;max-width:900px;margin:-10px auto 18px;padding:16px 16px 14px;border-radius:18px;background:var(--surface);border:1px solid rgba(var(--primary-rgb),.28);box-shadow:0 14px 30px -22px rgba(var(--primary-rgb),.75);overflow:hidden}
.sp-app::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sp-grad)}
.sp-ck-strip+.sp-app{margin-top:0}
.sp-app[hidden],.sp-app [hidden]{display:none!important}
.sp-app-head{display:flex;align-items:center;gap:12px}
.sp-app-icon{flex:none;width:52px;height:52px;border-radius:14px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.06),0 6px 14px -8px rgba(15,23,42,.4)}
.sp-app-title{flex:1;min-width:0}
.sp-app-title b{display:block;font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--ink)}
.sp-app-title small{display:block;margin-top:1px;font-size:.82rem;line-height:1.35;color:var(--muted)}
.sp-app-later{flex:none;align-self:flex-start;width:32px;height:32px;margin:-6px -8px 0 0;display:grid;place-items:center;border:0;border-radius:10px;font-size:.85rem;color:var(--muted);background:transparent}
.sp-app-later:hover,.sp-app-later:focus-visible{color:var(--ink);background:var(--surface-2)}
.sp-app-perks{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.sp-app-perks li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08)}
.sp-app-perks i{color:var(--primary)}
.sp-app-do{margin:12px 0 0}
.sp-app-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:11px 16px;border-radius:12px;font-weight:700;box-shadow:0 8px 18px -10px rgba(var(--primary-rgb),.8)}
.sp-app-manual{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;font-size:.86rem;line-height:1.5;color:var(--ink-2);background:rgba(var(--primary-rgb),.05);border:1px dashed rgba(var(--primary-rgb),.3)}
.sp-app-manual>i{flex:none;margin-top:2px;color:var(--primary)}
.sp-app-btn+.sp-app-manual{margin-top:10px}
.sp-app-manual+.sp-app-btn{margin-top:10px}
.sp-app-steps{display:grid;gap:6px;padding:0;list-style:none}
.sp-app-steps li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;font-size:.88rem;line-height:1.4;color:var(--ink-2);background:rgba(var(--primary-rgb),.05)}
.sp-app-steps li>span{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;font-weight:700;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700))}
.sp-app-steps b{color:var(--ink)}
.sp-app-steps i{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:2px;border-radius:7px;vertical-align:-6px;color:var(--primary-ink);background:rgba(var(--primary-rgb),.12)}
@media (min-width:768px){.sp-app{padding:18px 22px 16px}.sp-app-btn{width:auto;display:inline-flex;padding-inline:28px}}
/* หน้าสมาชิก: คอลัมน์ "แอปมือถือ" ของนักเรียน (ครู/ผู้ดูแล) */
.app-sum{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:500;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line)}
.app-sum b{font-weight:700;color:var(--ink)}
.app-st{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;line-height:1.5;white-space:nowrap}
.app-st.is-on{color:var(--success-ink);background:var(--success-50);box-shadow:inset 0 0 0 1px rgba(22,163,74,.22)}
.app-st.is-old{color:var(--warning-ink);background:var(--warning-50);box-shadow:inset 0 0 0 1px rgba(217,119,6,.28)}
.app-st.is-off{font-weight:500;color:var(--muted)} /* ยังไม่ติดตั้ง = ตัวอักษรจาง ๆ ให้คนที่ติดตั้งแล้วเด่น */
.app-st-sub{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.74rem;color:var(--muted);white-space:nowrap}
.app-st-sub.is-on{color:var(--primary-ink)}
@media (prefers-reduced-motion:reduce){[data-pwa-steps].is-flash{animation:none}.pwa-cat.form-switch{transition:none}}

/* เมนูของครู: งานรอตรวจ (grading) · เช็กชื่อ (attendance/today) · คะแนน (gradebook/overview) — ใช้การ์ด/แถวเดียวกับแดชบอร์ด */
.side-link .side-count.is-task{background:rgba(var(--primary-rgb),.12);color:var(--primary-ink);box-shadow:none}
.side-link.active .side-count.is-task{background:var(--on-primary);color:var(--primary-ink)}
.hub-bar{display:flex;flex-direction:column;gap:10px;margin:-6px 0 16px}
.hub-chips{display:flex;flex-wrap:wrap;gap:6px}
.hub-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.hub-chip:hover{color:var(--primary-ink);border-color:rgba(var(--primary-rgb),.4)}
.hub-chip b{margin-left:2px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hub-chip .sj-dot{margin-right:2px}
.hub-chip-room{color:var(--muted)}
.hub-chip.is-on{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}
.hub-chip.is-on b,.hub-chip.is-on .hub-chip-room{color:inherit}
.hub-chip.is-on .sj-dot{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.hub-tools{display:flex;flex-wrap:wrap;gap:8px}
.hub-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--surface-3)}
.hub-seg a{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:9px;font-size:.8rem;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hub-seg a b{font-weight:700;font-variant-numeric:tabular-nums}
.hub-seg a:hover{color:var(--primary-ink)}
.hub-seg a.is-on{color:var(--primary-ink);font-weight:600;background:var(--surface);box-shadow:var(--shadow-xs)}
.gq-n.is-low b{color:var(--warning-ink)}
.at-due-txt{color:var(--warning-ink)}
.at-row{flex-wrap:wrap;row-gap:8px}
.at-row .tsr-main{min-width:150px}
.at-side{display:flex;align-items:center;gap:6px;margin-left:auto}
.at-side .btn{border-radius:10px;font-weight:600;white-space:nowrap}
.at-qr{padding-inline:9px}
.at-state{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap}
.at-state.is-done{color:var(--success-ink);background:var(--success-50)}
.at-state.is-due{color:var(--warning-ink);background:var(--warning-50)}
.at-state.is-later{color:var(--muted);background:var(--surface-3)}
.at-state.is-open{color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.at-live{width:8px;height:8px;border-radius:50%;background:var(--primary);animation:at-live 1.4s ease-in-out infinite}
@keyframes at-live{50%{opacity:.25}}
.at-row.is-due{background:rgba(217,119,6,.06)}
.at-row.is-done .tsr-main,.at-row.is-done .tsr-time{opacity:.65}
.gbh{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px}
.gbh-card{display:flex;flex-direction:column;padding:6px 6px 12px}
.gbh-head{margin-bottom:2px}
.gbh-head .dl-title{font-size:.98rem}
.gbh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 10px}
.gbh-stat{display:flex;flex-direction:column;align-items:center;min-width:0;padding:8px 6px;border-radius:12px;text-align:center;color:inherit;text-decoration:none;background:var(--surface-2)}
.gbh-stat>span{max-width:100%;font-size:.68rem;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbh-stat>b{margin-top:2px;font-size:1.1rem;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.gbh-stat>small{font-size:.66rem;color:var(--muted)}
.gbh-stat.is-warn{background:var(--warning-50);transition:box-shadow .15s}
.gbh-stat.is-warn>b{color:var(--warning-ink)}
a.gbh-stat.is-warn:hover{box-shadow:inset 0 0 0 1.5px rgba(217,119,6,.45)}
.gbh-scheme{display:flex;align-items:center;gap:6px;margin:10px 12px 0;font-size:.8rem;color:var(--ink-2)}
.gbh-scheme>i{color:var(--success-ink)}
.gbh-scheme.is-off>i,.gbh-scheme.is-off b{color:var(--warning-ink)}
.gbh-actions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 10px 0}
.gbh-actions .btn{border-radius:10px;font-weight:600}
@media (max-width:575.98px){.gbh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.at-side{width:100%;justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.at-live{animation:none}}

/* ประวัติการเข้าสู่ระบบของนักเรียน (login-history) */
.lh-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:-6px 0 14px}
.lh-kpis.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lh-kpi{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border-radius:16px;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s}
a.lh-kpi:hover{color:inherit;border-color:rgba(var(--primary-rgb),.4)}
.lh-kpi.is-on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14)}
.lh-kpi-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:.95rem;color:var(--primary-ink);background:rgba(var(--primary-rgb),.1)}
.lh-kpi.is-warn .lh-kpi-ico{color:var(--warning-ink);background:var(--warning-50)}
.lh-kpi-txt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;min-width:0}
.lh-kpi-txt small{flex-basis:100%;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lh-kpi-txt b{font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.lh-kpi.is-warn .lh-kpi-txt b{color:var(--warning-ink)}
.lh-kpi-txt em{font-style:normal;font-size:.72rem;color:var(--muted)}
.lh-search{position:relative;flex:1;min-width:180px;max-width:280px;margin-left:auto}
.lh-search>i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--muted)}
.lh-search .form-control{padding-left:30px;border-radius:12px}
.lh-card{overflow:hidden}
.lh-table thead th{font-size:.76rem;font-weight:600;color:var(--muted);background:var(--surface-2);white-space:nowrap}
.lh-table thead th small{font-weight:500}
.lh-table td{padding-top:9px;padding-bottom:9px}
.lh-who{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.lh-who>span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.lh-who b{font-weight:600;color:var(--ink);white-space:nowrap}
.lh-who small{font-size:.74rem;color:var(--muted)}
.lh-who:hover b{color:var(--primary-ink)}
.lh-when{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.lh-when b{font-size:.84rem;font-weight:600;color:var(--ink)}
.lh-chip{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.7rem;font-weight:600;line-height:1.6;white-space:nowrap;color:var(--ink-2);background:var(--surface-3)}
.lh-chip.is-today{color:var(--success-ink);background:var(--success-50)}
.lh-chip.is-idle{color:var(--warning-ink);background:var(--warning-50)}
.lh-chip.is-never{color:var(--muted);background:var(--surface-3)}
.lh-n{font-size:1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lh-fail{display:inline-flex;align-items:center;gap:3px;margin-top:2px;padding:0 7px;border-radius:999px;font-size:.68rem;font-weight:600;color:var(--danger-ink);background:rgba(220,38,38,.08);white-space:nowrap}
.lh-strip{display:inline-flex;gap:3px}
.lh-strip i,.lh-cal-grid i,.lh-legend i{display:block;width:8px;height:18px;border-radius:3px;background:var(--surface-3)}
.lh-strip i.is-today{box-shadow:0 0 0 1.5px var(--surface),0 0 0 3px rgba(var(--primary-rgb),.35)}
.lh-strip .lv-1,.lh-cal-grid .lv-1,.lh-legend .lv-1{background:rgba(var(--primary-rgb),.35)}
.lh-strip .lv-2,.lh-cal-grid .lv-2,.lh-legend .lv-2{background:rgba(var(--primary-rgb),.65)}
.lh-strip .lv-3,.lh-cal-grid .lv-3,.lh-legend .lv-3{background:var(--primary)}
.lh-dev{font-size:.82rem;white-space:nowrap}
.lh-dev>span{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}
.lh-dev>span i{color:var(--muted)}
.lh-dev small{display:block;font-size:.72rem;color:var(--muted)}
tr.lh-never .lh-who b,tr.lh-never .lh-n{color:var(--muted)}
.lh-note{display:flex;align-items:flex-start;gap:6px;margin:10px 4px 0;font-size:.76rem;color:var(--muted)}
.lh-note>i{margin-top:1px}
.lh-link{color:inherit;text-decoration:underline dotted rgba(var(--primary-rgb),.5);text-underline-offset:3px}
.lh-link:hover{color:var(--primary-ink)}
.lh-log{display:flex;flex-direction:column;padding:0 8px 8px}
.lh-day{position:sticky;top:calc(var(--header-h,64px));z-index:1;margin:8px 0 2px;padding:4px 10px;font-size:.74rem;font-weight:700;color:var(--muted);background:var(--surface)}
.lh-ev{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border-radius:12px;color:inherit;text-decoration:none}
a.lh-ev:hover{color:inherit;background:var(--surface-2)}
.lh-ev-time{flex:none;width:42px;font-size:.8rem;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lh-ev-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.85rem;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08)}
.lh-ev .dl-title small{font-size:.74rem}
.lh-ev.is-fail{background:rgba(220,38,38,.05)}
.lh-ev.is-fail .lh-ev-ico{color:var(--danger-ink);background:rgba(220,38,38,.1)}
.lh-ev.is-fail .dl-meta,.lh-ev.is-fail .dl-title{color:var(--danger-ink)}
.lh-avatar{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--surface),0 6px 16px -8px rgba(15,23,42,.4)}
.lh-name{font-size:1.45rem}
.lh-cal-wrap{padding:4px 16px 14px;overflow-x:auto}
.lh-cal{display:flex;gap:6px;width:max-content}
.lh-cal-wd{display:grid;grid-template-rows:repeat(7,18px);gap:3px;margin-top:20px;font-size:.66rem;color:var(--muted)}
.lh-cal-wd span{line-height:18px}
.lh-cal-mo{display:grid;grid-template-columns:repeat(12,18px);gap:3px;height:17px;margin-bottom:3px;font-size:.66rem;color:var(--muted);white-space:nowrap}
.lh-cal-grid{display:grid;grid-template-rows:repeat(7,18px);grid-auto-flow:column;grid-auto-columns:18px;gap:3px}
.lh-cal-grid i{width:18px;height:18px;border-radius:4px}
.lh-cal-grid i.is-future{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.lh-cal-grid i.is-today{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px rgba(var(--primary-rgb),.45)}
.lh-legend{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:.7rem;color:var(--muted)}
.lh-legend i{width:12px;height:12px;border-radius:3px}
@media (max-width:991.98px){.lh-kpis,.lh-kpis.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}.lh-kpis>.lh-kpi:first-child:nth-last-child(odd){grid-column:1/-1}.lh-search{max-width:none;margin-left:0}}
@media (max-width:575.98px){
  .lh-kpis{gap:8px}
  .lh-kpi{padding:8px 12px;border-radius:14px}
  .lh-kpi-ico{display:none}
  .lh-kpi-txt b{font-size:1.15rem}
  /* ตารางเลื่อนแนวนอนบนมือถือ: ชื่อนักเรียนค้างไว้ทางซ้าย */
  .lh-table th:nth-child(2),.lh-table td:nth-child(2){position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:6px 0 8px -8px rgba(15,23,42,.35)}
  .lh-table thead th:nth-child(2){background:var(--surface-2)}
  .lh-who b{max-width:150px;overflow:hidden;text-overflow:ellipsis}
}

/* หน้าแอปบนมือถือ /app/ (ใน layout auth): วิธีติดตั้งตามเครื่อง · QR บนคอมพิวเตอร์ · ตั้งค่าการแจ้งเตือน */
.ma{display:flex;flex-direction:column;gap:14px}
.ma-head{display:flex;align-items:center;gap:14px}
.ma-icon{flex:none;width:60px;height:60px;border-radius:16px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px rgba(15,23,42,.06),0 8px 18px -10px rgba(15,23,42,.45)}
.ma-title{margin:0;font-size:1.3rem;font-weight:700;line-height:1.3;color:var(--ink)}
.ma-sub{margin:2px 0 0;font-size:.86rem;line-height:1.45;color:var(--muted)}
.ma-perks{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ma-perks li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08)}
.ma-perks i{color:var(--primary)}
.ma #install{display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
.ma #install[hidden]{display:none}
.ma-box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;border:1px solid rgba(var(--primary-rgb),.25);background:rgba(var(--primary-rgb),.03)}
.ma-box-h{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.ma-box-h i{color:var(--primary)}
.ma-btn{padding:11px 16px;border-radius:12px;font-weight:700;box-shadow:0 8px 18px -10px rgba(var(--primary-rgb),.8)}
.ma .pwa-install-btn{margin-bottom:0}
.ma-steps{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ma-steps li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;font-size:.88rem;line-height:1.45;color:var(--ink-2);background:var(--surface)}
.ma-steps li>span{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:.8rem;font-weight:700;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700))}
.ma-steps b{color:var(--ink)}
.ma-qr{align-self:center;width:220px;max-width:100%;padding:10px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px -16px rgba(15,23,42,.45)}
.ma-qr svg{display:block;width:100%;height:auto}
.ma-qr:empty{display:none}
.ma-url{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.92rem;font-weight:700;text-align:center;word-break:break-all;color:var(--primary-ink)}
.ma-hint{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.ma-share{display:flex;justify-content:center;gap:8px}
.ma-share .btn{border-radius:10px;font-weight:600}
.ma-other{padding:0 12px;border-radius:14px;background:var(--surface-2)}
.ma-other>summary{padding:10px 0;font-size:.84rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.ma-other[open]{padding-bottom:12px}
.ma-other .ma-box-h{margin-bottom:8px;font-size:.88rem}
.ma-other-os+.ma-other-os{margin-top:12px}
.ma-sec{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line-2)}
.ma-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-weight:700;color:var(--ink)}
.ma-sec-h i{color:var(--primary)}
.ma-sec-h small{font-size:.76rem;font-weight:500;color:var(--muted)}
.ma .pwa-cats{grid-template-columns:minmax(0,1fr)}
.ma .push-btns{margin-top:0}
.ma .pwa-devs{margin-top:2px}
.ma .pwa-state+.push-state{margin-top:0}

/* นักเรียนที่ใช้แอป: หน้าบังคับเปิดการแจ้งเตือน (layouts/main.php [data-push-gate] · public/js/pwa.js) */
html.is-gated,html.is-gated body{overflow:hidden}
.push-gate{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(160deg,rgba(var(--primary-rgb),.94),rgba(15,23,42,.9));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.push-gate[hidden]{display:none}
.pg-card{width:100%;max-width:400px;max-height:100%;overflow:auto;padding:26px 22px 22px;border-radius:24px;text-align:center;background:var(--surface);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.pg-ico{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 14px;border-radius:24px;font-size:2.1rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700));box-shadow:0 14px 28px -14px rgba(var(--primary-rgb),.9);animation:pg-ring 2.4s ease-in-out infinite}
.pg-ico.is-ok{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 14px 28px -14px rgba(22,163,74,.8);animation:none}
@keyframes pg-ring{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-12deg)}20%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}40%{transform:rotate(4deg)}}
.pg-title{margin:0;font-size:1.35rem;font-weight:700;color:var(--ink)}
.pg-text{margin:6px 0 14px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.pg-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.pg-perks li{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:600;color:var(--primary-ink);background:rgba(var(--primary-rgb),.08)}
.pg-perks i{color:var(--primary)}
.pg-btn{border-radius:14px;font-weight:700;box-shadow:0 10px 22px -12px rgba(var(--primary-rgb),.9)}
.pg-note{display:block;margin-top:8px;font-size:.78rem;color:var(--muted)}
.pg-denied{margin-bottom:14px;padding:12px 14px;border-radius:14px;text-align:left;font-size:.86rem;color:var(--warning-ink);background:var(--warning-50)}
.pg-denied ol{margin:8px 0 0;padding-left:20px;color:var(--ink-2)}
.pg-denied ol b{color:var(--ink)}
.pg-denied li+li{margin-top:4px}
.pg-err{margin-top:12px;padding:10px 12px;border-radius:12px;font-size:.84rem;font-weight:600;color:var(--danger-ink);background:var(--danger-50)}
.ma-lock{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;font-size:.82rem;line-height:1.45;color:var(--primary-ink);background:rgba(var(--primary-rgb),.07)}
.ma-lock>i{flex:none;margin-top:1px}
.ma .pwa-cat.form-switch:has(.form-check-input:disabled){cursor:default}
@media (prefers-reduced-motion:reduce){.pg-ico{animation:none}}

/* รายงานสรุปการเข้าเรียน (attendance/report): ตารางนักเรียน × คาบ — เลขที่/ชื่อค้างซ้าย · สถานะเป็นตัวย่อสี (มา = ตัวจาง ให้รายการผิดปกติเด่น) · พิมพ์ A4 แนวนอน */
.ar-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin:4px 0 14px}
.ar-title{display:flex;align-items:center;gap:10px;margin:0;font-size:1.45rem;font-weight:700;color:var(--ink)}
.ar-title>i{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:1.1rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-700))}
.ar-sub{margin-top:6px;font-size:.88rem;color:var(--muted)}
.ar-sub b{color:var(--ink-2)}
.ar-actions{display:flex;flex-wrap:wrap;gap:8px}
.ar-actions .btn{border-radius:10px;font-weight:600}
.ar-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.ar-range{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ar-range .form-control{width:auto;border-radius:10px}
.ar-range span{font-size:.82rem;color:var(--muted)}
.ar-range .btn{border-radius:10px;font-weight:600}
.ar-kpis{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
.ar-card{overflow:hidden}
.ar-scroll{overflow-x:auto}
.ar-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;font-variant-numeric:tabular-nums}
.ar-table th,.ar-table td{padding:6px 3px;text-align:center;white-space:nowrap;border-bottom:1px solid var(--line-2)}
.ar-table thead th{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--surface-2);vertical-align:bottom}
.ar-table .ar-c-no{position:sticky;left:0;z-index:2;width:46px;min-width:46px;color:var(--muted);background:var(--surface)}
.ar-table .ar-c-name{position:sticky;left:46px;z-index:2;min-width:200px;padding-left:10px;padding-right:12px;text-align:left;background:var(--surface);box-shadow:6px 0 8px -8px rgba(15,23,42,.25)}
.ar-table thead .ar-c-no,.ar-table thead .ar-c-name,.ar-table tfoot .ar-c-no,.ar-table tfoot .ar-c-name{background:var(--surface-2)}
.ar-name{display:block;font-weight:600;line-height:1.3;color:var(--ink)}
.ar-c-name small{font-size:.7rem;color:var(--muted)}
.ar-table .ar-c-s{min-width:32px}
.ar-table thead .ar-c-s b{display:block;font-size:.86rem;line-height:1.1;color:var(--ink-2)}
.ar-table thead .ar-c-s small{font-size:.62rem}
.ar-m{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 3px;border-radius:7px;font-size:.72rem;font-weight:700;line-height:1}
.ar-m.is-present{color:var(--success-ink);opacity:.75}
.ar-m.is-absent{color:#fff;background:#dc2626}
.ar-m.is-late{color:#92400e;background:#fde68a}
.ar-m.is-skip{color:#fff;background:#334155}
.ar-m.is-sick{color:#075985;background:#bae6fd}
.ar-m.is-leave{color:#3730a3;background:#c7d2fe}
.ar-m.is-activity{color:#475569;background:#e2e8f0}
.ar-none{color:var(--muted-2)}
.ar-table .ar-c-sum{min-width:44px;font-weight:600;color:var(--ink-2);background:var(--surface-2)}
.ar-table th.ar-c-sum{color:var(--ink-2)}
.ar-table .ar-c-sum.is-present,.ar-table th.ar-c-sum.is-present{box-shadow:inset 1px 0 0 var(--line)}
.ar-table td.ar-c-sum.is-zero{font-weight:400;color:var(--muted-2)}
.ar-table td.ar-c-sum.is-absent,.ar-table td.ar-c-sum.is-skip{color:var(--danger-ink)}
.ar-table .ar-c-pct{position:sticky;right:0;z-index:2;min-width:66px;padding-right:10px;background:var(--surface);box-shadow:-6px 0 8px -8px rgba(15,23,42,.25)} /* % มาเรียนค้างขวาเสมอ */
.ar-table thead .ar-c-pct,.ar-table tfoot .ar-c-pct{background:var(--surface-2)}
.ar-table tr.is-low .ar-c-pct{background:#fef2f2}
.ar-pct{display:inline-block;padding:1px 8px;border-radius:999px;font-weight:700;color:var(--success-ink);background:var(--success-50)}
.ar-pct.is-low{color:#fff;background:#dc2626}
.ar-table tr.is-low td{background-color:#fef6f6}
.ar-table tr.is-low .ar-c-no,.ar-table tr.is-low .ar-c-name{background:#fef2f2}
.ar-table tr.is-low .ar-name{color:var(--danger-ink)}
.ar-table tbody tr:hover td{background-color:rgba(var(--primary-rgb),.04)}
.ar-table tbody tr:hover .ar-c-no,.ar-table tbody tr:hover .ar-c-name,.ar-table tbody tr:hover .ar-c-pct{background:color-mix(in srgb,var(--surface) 92%,var(--primary))}
.ar-table tfoot td{font-size:.78rem;font-weight:700;color:var(--ink-2);background:var(--surface-2);border-bottom:0}
.ar-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 4px 0;font-size:.78rem;color:var(--muted)}
.ar-legend>span{display:inline-flex;align-items:center;gap:5px}
.ar-note{margin:8px 4px 0;font-size:.76rem;color:var(--muted)}
.ar-print-only{display:none}
@media (max-width:1199.98px){.ar-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:575.98px){.ar-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ar-table .ar-c-name{min-width:150px}.ar-title{font-size:1.2rem}}
@media print{
  body:has(.ar) .class-banner,body:has(.ar) .bnav,.ar-filter,.ar-actions{display:none!important}
  .ar-print-only{display:block}
  .ar-school{font-size:10pt;font-weight:700}
  .ar-head{margin:0 0 6px}
  .ar-title{font-size:14pt}.ar-title>i{display:none}
  .ar-sub{font-size:9pt;color:#000}
  .ar-kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-bottom:6px}
  .ar-kpis .lh-kpi{padding:4px 6px;border-radius:6px;box-shadow:none}.ar-kpis .lh-kpi-ico{display:none}.ar-kpis .lh-kpi-txt b{font-size:11pt}
  .ar-card{border:0!important;box-shadow:none!important;overflow:visible}
  .ar-scroll{overflow:visible}
  .ar-table{font-size:7pt}
  .ar-table th,.ar-table td{padding:1px;border-bottom:.5pt solid #ccc}
  .ar-table .ar-c-no,.ar-table .ar-c-name,.ar-table .ar-c-pct{position:static;box-shadow:none}
  .ar-table .ar-c-name{min-width:0;padding-left:3px}
  .ar-c-name small{display:none}
  .ar-name{font-weight:500;line-height:1.15}
  .ar-table td{line-height:1.1}
  .ar-table .ar-c-s{min-width:0}
  .ar-table .ar-c-sum{min-width:0}
  .ar-m{min-width:13px;height:13px;padding:0 1px;border-radius:3px;font-size:6pt}
  .ar-table,.ar-m,.ar-pct,.ar-table tr.is-low td,.ar-table thead th,.ar-table .ar-c-sum{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ar-table tr{break-inside:avoid}
  .ar-legend,.ar-note{font-size:7pt;color:#000}
  .ar-sign{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10mm;font-size:9pt}
  .ar-printed{font-size:7pt;color:#555}
}