@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Taviraj:wght@500;600;700&display=swap');

  :root {
    --brand-50:#EEF3FA; --brand-100:#DCE6F3; --brand-500:#3A6BA8; --brand-600:#2A5490;
    --brand-700:#1F4E8C; --brand-900:#122C50;
  }
  html, body { font-family: 'Sarabun', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  #root { min-height: 100vh; }
  * { -webkit-tap-highlight-color: transparent; }
  button, a { touch-action: manipulation; }

  /* ใช้ฟอนต์ Taviraj (เซอริฟไทยทางการ) สำหรับหัวข้อสำคัญบางจุด เช่น หน้าล็อกอิน/หน้าเริ่มสอบ */
  .font-display { font-family: 'Taviraj', 'Sarabun', serif; letter-spacing: -0.01em; }

  h1, h2, h3 { text-wrap: balance; letter-spacing: -0.01em; }

  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

  /* โหมดสอบ: ป้องกันการเลือกข้อความ / คลิกขวา / การพิมพ์ */
  .exam-lock { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .exam-lock input, .exam-lock textarea { -webkit-user-select: text; user-select: text; }

  @media print {
    .exam-lock::after {
      content: "เอกสารนี้ถูกป้องกันการพิมพ์โดยระบบสอบออนไลน์";
      position: fixed; inset: 0; background: white; z-index: 99999;
      display: flex; align-items: center; justify-content: center; font-size: 24px;
    }
  }

  .watermark-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 9998;
    opacity: 0.08; background-repeat: repeat; mix-blend-mode: multiply;
  }

  .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
  .rich-text img { display: inline-block; max-width: 100%; border-radius: 8px; margin-top: 8px; }

  @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  .pulse-dot { animation: pulse-dot 1.4s ease-in-out infinite; }

  .fade-in { animation: fadeIn .18s ease-out; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .drag-handle { cursor: grab; }
  .drag-handle:active { cursor: grabbing; }
  .drop-target { outline: 2px dashed var(--brand-500); outline-offset: 2px; }

  .spinner {
    border: 3px solid #e2e8f0; border-top-color: var(--brand-600); border-radius: 50%;
    width: 22px; height: 22px; animation: spin .7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:600; border-radius:.65rem; transition:background .15s, box-shadow .15s, transform .1s; white-space:nowrap; }
  .btn:disabled { opacity:.5; cursor:not-allowed; }
  .btn:active:not(:disabled) { transform: scale(0.98); }
  .btn-primary { background:var(--brand-600); color:white; box-shadow: 0 1px 2px rgba(18,44,80,.15); } .btn-primary:hover:not(:disabled){ background:var(--brand-700); }
  .btn-secondary { background:#fff; color:#334155; border:1px solid #e2e8f0; } .btn-secondary:hover:not(:disabled){ background:#f8fafc; border-color:#cbd5e1; }
  .btn-danger { background:#fee2e2; color:#b91c1c; } .btn-danger:hover:not(:disabled){ background:#fecaca; }
  .btn-ghost { background:transparent; color:#475569; } .btn-ghost:hover:not(:disabled){ background:#f1f5f9; }

  .card { background:white; border-radius:1rem; border:1px solid #eef1f6; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -14px rgba(15,23,42,.10); }
  .input { width:100%; border:1px solid #e2e8f0; border-radius:.6rem; padding:.55rem .8rem; font-size:.95rem; transition: border-color .12s, box-shadow .12s; background: #fff; }
  .input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(58,107,168,.15); }
  .input:disabled, .input[readonly] { background:#f8fafc; color:#94a3b8; }

  /* พื้นหลังหน้าเข้าสู่ระบบ: สว่างใช้ขาวทึบ, มืดใช้ Midnight Navy ทึบ */
  .login-backdrop { background: #ffffff; }
  .login-backdrop-pattern { opacity: .045; background-image: radial-gradient(rgba(18,44,80,.8) 1.5px, transparent 1.5px); background-size: 26px 26px; }
  .login-backdrop-glow { background: rgba(37,99,235,.05); }
  .login-backdrop-glow--bottom { background: rgba(14,165,233,.06); }

  /* โฟกัสด้วยคีย์บอร์ดให้เห็นชัดเจนทุกที่ (accessibility) */
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand-500); outline-offset: 2px;
  }

  /* =====================================================================
     โหมดกลางคืน (Dark mode) — เปิด/ปิดด้วย class="dark" บน <html>
     (ดู Theme helper ใน JsApiClient.html + ปุ่ม ThemeToggle ใน JsShared.html)
     แบ่งเป็น 2 ส่วน:
     1) คลาสของเราเอง (.card/.input/.btn-* ฯลฯ) — คุม dark override ตรงนี้ได้เต็มที่ ไม่ชนกับ Tailwind
     2) "ตาข่ายนิรภัย" ครอบคลุม class สี ขาว/เทา ของ Tailwind ที่ใช้ซ้ำทั่วทุกหน้าทั้งระบบ (bg-white,
        text-slate-500 ฯลฯ) เพื่อให้ทุกหน้าได้โหมดมืดแบบสมเหตุสมผลทันที โดยไม่ต้องไล่แก้ทีละไฟล์ครบ 30+ ไฟล์
        ใช้ selector แบบ ".dark .bg-white" (2 คลาส) ซึ่ง specificity สูงกว่า ".bg-white" (1 คลาส) ของ Tailwind
        เสมอไม่ว่าลำดับการโหลดไฟล์ CSS จะเป็นอย่างไร จึงชนะ cascade ได้แน่นอน ไม่ต้องพึ่ง !important
     ===================================================================== */
  .dark body { background-color: #0f172a; color: #e2e8f0; }
  .dark .login-backdrop { background: #0b1b32; }
  .dark .login-backdrop-pattern { opacity: .04; background-image: radial-gradient(rgba(255,255,255,.8) 1.5px, transparent 1.5px); }
  .dark .login-backdrop-glow { background: rgba(71,125,190,.10); }
  .dark .login-backdrop-glow--bottom { background: rgba(109,76,176,.10); }

  .dark .card { background: #1e293b; border-color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -14px rgba(0,0,0,.5); }
  .dark .input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
  .dark .input::placeholder { color: #64748b; }
  .dark .input:disabled, .dark .input[readonly] { background: #1e293b; color: #64748b; }
  .dark .btn-secondary { background: #1e293b; color: #cbd5e1; border-color: #334155; }
  .dark .btn-secondary:hover:not(:disabled) { background: #334155; border-color: #475569; }
  .dark .btn-ghost { color: #cbd5e1; }
  .dark .btn-ghost:hover:not(:disabled) { background: #334155; }
  .dark .btn-danger { background: rgba(239,68,68,.18); color: #fca5a5; }
  .dark .btn-danger:hover:not(:disabled) { background: rgba(239,68,68,.28); }
  .dark .spinner { border-color: #334155; border-top-color: var(--brand-500); }
  .dark ::-webkit-scrollbar-thumb { background: #334155; }
  .dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

  /* ตาข่ายนิรภัย: class สี ขาว/เทา ของ Tailwind ที่ใช้ทั่วทั้งระบบ */
  .dark .bg-white { background-color: #1e293b; }
  .dark .bg-slate-50 { background-color: #0f172a; }
  .dark .bg-slate-100 { background-color: #1e293b; }
  .dark .bg-slate-200 { background-color: #334155; }
  .dark .bg-slate-900\/40 { background-color: rgba(0,0,0,.55); }
  .dark .bg-slate-900\/50 { background-color: rgba(0,0,0,.6); }
  .dark .text-slate-800 { color: #e2e8f0; }
  .dark .text-slate-700 { color: #cbd5e1; }
  .dark .text-slate-600 { color: #cbd5e1; }
  .dark .text-slate-500 { color: #94a3b8; }
  .dark .text-slate-400 { color: #64748b; }
  .dark .text-slate-300 { color: #475569; }
  .dark .border-slate-100 { border-color: #334155; }
  .dark .border-slate-200 { border-color: #334155; }
  .dark .divide-slate-100 > * + * { border-color: #334155; }
  .dark .hover\:bg-slate-50:hover { background-color: #334155; }
  .dark .hover\:bg-slate-100:hover { background-color: #334155; }
  .dark .hover\:text-slate-600:hover { color: #f1f5f9; }
  .dark .hover\:text-slate-800:hover { color: #f8fafc; }
  .dark .bg-blue-50 { background-color: rgba(58,107,168,.2); }
  .dark .text-blue-700 { color: #8fb0d8; }
  .dark .text-blue-600 { color: #8fb0d8; }

  /* Login card: สว่างใช้ Midnight Navy, มืดใช้สีขาว เพื่อให้คอนทราสต์ชัดเจน
     ปรับให้ดูหรูหรา/เป็นทางการขึ้น: พื้นไล่เฉดมีมิติแทนสีทึบเรียบ, เงานุ่มโทนน้ำเงินแทนเงาเทาทั่วไป,
     เส้นขอบบนสุดสีทอง/บรอนซ์บางๆ แบบใบประกาศนียบัตร */
  .login-card {
    background: linear-gradient(165deg, #12294d 0%, #0b1b32 55%, #081527 100%);
    border: 1px solid rgba(191,219,254,.16);
    box-shadow: 0 1px 0 rgba(212,175,110,.35) inset, 0 24px 60px -20px rgba(4,12,26,.65), 0 8px 24px -10px rgba(31,78,140,.35);
  }
  .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(212,175,110,.75) 20%, rgba(233,201,140,.9) 50%, rgba(212,175,110,.75) 80%, transparent);
  }
  .login-card .text-slate-800 { color: #f8fafc; }
  .login-card .text-slate-400 { color: #b7cbe5; }
  .login-card .text-slate-500 { color: #cbd8e8; }
  .login-card .border-slate-100 { border-color: rgba(191,219,254,.18); }
  .login-card .bg-slate-100 { background-color: rgba(255,255,255,.12); }
  .login-card .bg-white { background-color: #f8fafc; }
  .login-card .login-illustration-panel { background: #0b1b32; border-right: 1px solid rgba(191,219,254,.14); }
  .login-brand-ring { box-shadow: 0 0 0 1px rgba(212,175,110,.55), 0 0 0 5px rgba(212,175,110,.12), 0 10px 24px -10px rgba(4,12,26,.55); }
  .login-divider { background: linear-gradient(90deg, transparent, rgba(212,175,110,.7) 50%, transparent); }
  .login-divider-dot { background: #d4af6e; box-shadow: 0 0 0 3px rgba(212,175,110,.18); }
  .login-btn-primary { background: linear-gradient(165deg, #2a5490 0%, #1f4e8c 60%, #17396a 100%); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -8px rgba(23,57,106,.55); }
  .login-btn-primary:hover:not(:disabled) { background: linear-gradient(165deg, #2f5c9c 0%, #245695 60%, #1c4278 100%); }

  .dark .login-card {
    background: linear-gradient(165deg, #ffffff 0%, #fbfcfe 60%, #f5f8fc 100%);
    border-color: rgba(148,163,184,.22);
    box-shadow: 0 1px 0 rgba(212,175,110,.5) inset, 0 24px 60px -20px rgba(15,23,42,.28), 0 8px 24px -10px rgba(58,107,168,.16);
  }
  .dark .login-card::before { background: linear-gradient(90deg, transparent, rgba(180,142,74,.7) 20%, rgba(212,175,110,.9) 50%, rgba(180,142,74,.7) 80%, transparent); }
  .dark .login-card .text-slate-800 { color: #1e293b; }
  .dark .login-card .text-slate-400 { color: #94a3b8; }
  .dark .login-card .text-slate-500 { color: #64748b; }
  .dark .login-card .border-slate-100 { border-color: #e2e8f0; }
  .dark .login-card .bg-slate-100 { background-color: #f1f5f9; }
  .dark .login-card .bg-white { background-color: #ffffff; }
  .dark .login-card .input { background: #ffffff; border-color: #e2e8f0; color: #334155; }
  .dark .login-card .input::placeholder { color: #94a3b8; }
  .dark .login-card .text-blue-700, .dark .login-card .dark\:text-white { color: #1f4e8c; }
  .dark .login-card .login-illustration-panel { background: #ffffff; border-right-color: #e2e8f0; }

  /* ปุ่มสลับโหมด (มุมบนขวาของการ์ดล็อกอิน): ทรงนูนมีมิติแบบ soft-UI แทนกรอบเส้นทึบแข็งๆ
     ไล่เฉดสีเบาๆ + เงาคู่ (สว่าง/มืด) จำลองแสงตกกระทบให้ดูเป็นปุ่มยกนูนจากพื้นผิวการ์ด ไม่ใช้ ring/border เลย */
  .login-card .theme-toggle-raised {
    background: linear-gradient(145deg, #17396a, #0c1f3a);
    box-shadow: 3px 3px 7px rgba(2,8,20,.55), -2px -2px 6px rgba(95,140,192,.14), inset 0 1px 0 rgba(180,210,245,.10);
    transition: box-shadow .12s, transform .08s, filter .12s;
  }
  .login-card .theme-toggle-raised:hover { filter: brightness(1.12); }
  .login-card .theme-toggle-raised:active { box-shadow: inset 2px 2px 5px rgba(2,8,20,.6), inset -2px -2px 4px rgba(95,140,192,.10); transform: scale(.97); }

  .dark .login-card .theme-toggle-raised {
    background: linear-gradient(145deg, #ffffff, #e8eef6);
    box-shadow: 3px 3px 7px rgba(148,163,184,.45), -2px -2px 6px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .dark .login-card .theme-toggle-raised:hover { filter: brightness(1.03); }
  .dark .login-card .theme-toggle-raised:active { box-shadow: inset 2px 2px 5px rgba(148,163,184,.4), inset -2px -2px 4px rgba(255,255,255,.7); transform: scale(.97); }
  .dark .login-brand-ring { box-shadow: 0 0 0 1px rgba(180,142,74,.6), 0 0 0 5px rgba(212,175,110,.14), 0 10px 24px -10px rgba(15,23,42,.18); }
  .dark .login-divider { background: linear-gradient(90deg, transparent, rgba(180,142,74,.6) 50%, transparent); }
  .dark .login-divider-dot { background: #b48e4a; box-shadow: 0 0 0 3px rgba(180,142,74,.16); }
  .dark .login-btn-primary { background: linear-gradient(165deg, #2a5490 0%, #1f4e8c 60%, #17396a 100%); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -8px rgba(23,57,106,.35); }
  .dark .login-btn-primary:hover:not(:disabled) { background: linear-gradient(165deg, #2f5c9c 0%, #245695 60%, #1c4278 100%); }

  /* =====================================================================
     Sidebar ฝั่งครู (จอใหญ่) — ยืมภาษาดีไซน์เดียวกับหน้าล็อกอิน (เส้นทองบาง/เงานุ่ม/ไล่เฉด)
     แต่ลดทอนความจัดจ้านลงมาก เพราะเป็นแดชบอร์ดที่เปิดใช้งานทุกวัน ไม่ใช่หน้า landing ครั้งเดียว
     ===================================================================== */
  .teacher-sidebar { background: #ffffff; }
  .teacher-sidebar-header { border-bottom: 1px solid #eef1f6; position: relative; }
  .teacher-sidebar-header::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, rgba(212,175,110,.55), rgba(212,175,110,.12) 55%, transparent);
  }
  /* พื้นหลังไล่เฉดของ BrandMark (Shared.js) ตอนไม่มีโลโก้จริงให้โชว์ — ใช้ตอนแสดงไอคอนหมวกครุยแทน */
  .brand-mark-fallback { background: linear-gradient(155deg, #2a5490, #17396a); box-shadow: 0 4px 10px -4px rgba(23,57,106,.45); }
  /* พื้นหลังการ์ดโลโก้จริง — ตั้งใจให้ "ขาวเสมอ" ไม่ตามธีมเว็บ (เหมือน login-card .bg-white) เพราะโลโก้
     ส่วนใหญ่ออกแบบมาให้วางบนพื้นสว่าง สลับเป็นมืดจะกลืนกับพื้นหลัง — ใช้ class เฉพาะแทน bg-white ธรรมดา
     เพื่อไม่ให้ "ตาข่ายนิรภัย" โหมดมืด (.dark .bg-white) ที่ทำไว้ครอบคลุมทั้งระบบมาบังคับให้กลายเป็นสีเข้ม */
  .brand-mark-logo-bg { background: #ffffff; }
  .teacher-sidebar-title { color: #1e293b; }
  .teacher-sidebar-user { border-bottom: 1px solid #eef1f6; }
  .teacher-sidebar-avatar { background: linear-gradient(155deg, #eef3fa, #dce6f3); color: #1f4e8c; box-shadow: inset 0 0 0 1px rgba(31,78,140,.12); }
  .teacher-sidebar-username { color: #1e293b; }
  .teacher-sidebar-role { color: #94a3b8; }

  .teacher-nav-item { color: #64748b; }
  .teacher-nav-item:hover { background: #f8fafc; color: #1e293b; }
  .teacher-nav-icon { background: #f1f5f9; transition: background .15s, box-shadow .15s; }
  .teacher-nav-item--active { background: linear-gradient(155deg, #eef3fa, rgba(238,243,250,.4)); color: #1f4e8c; font-weight: 600; box-shadow: inset 3px 0 0 #2a5490; }
  .teacher-nav-item--active .teacher-nav-icon { background: linear-gradient(155deg, #2a5490, #1f4e8c); box-shadow: 0 3px 8px -3px rgba(31,78,140,.45); color: #ffffff; }

  .teacher-sidebar-footer { border-top: 1px solid #eef1f6; }
  .teacher-logout-btn { color: #94a3b8; }
  .teacher-logout-btn:hover { background: #fef2f2; color: #dc2626; }

  .dark .teacher-sidebar { background: linear-gradient(180deg, #0f1d33, #0b1626); }
  .dark .teacher-sidebar-header { border-bottom-color: rgba(191,219,254,.12); }
  .dark .teacher-sidebar-title { color: #f1f5f9; }
  .dark .teacher-sidebar-user { border-bottom-color: rgba(191,219,254,.12); }
  .dark .teacher-sidebar-avatar { background: linear-gradient(155deg, rgba(58,107,168,.35), rgba(31,78,140,.35)); color: #bcd3ee; box-shadow: inset 0 0 0 1px rgba(191,219,254,.18); }
  .dark .teacher-sidebar-username { color: #f1f5f9; }
  .dark .teacher-sidebar-role { color: #7d93b3; }
  .dark .teacher-nav-item { color: #93a8c9; }
  .dark .teacher-nav-item:hover { background: rgba(191,219,254,.06); color: #f1f5f9; }
  .dark .teacher-nav-icon { background: rgba(191,219,254,.08); }
  .dark .teacher-nav-item--active { background: linear-gradient(155deg, rgba(58,107,168,.24), rgba(31,78,140,.10)); color: #cfe0f5; box-shadow: inset 3px 0 0 #5f8cc0; }
  .dark .teacher-nav-item--active .teacher-nav-icon { background: linear-gradient(155deg, #3a6ba8, #2a5490); box-shadow: 0 3px 8px -3px rgba(0,0,0,.4); color: #ffffff; }
  .dark .teacher-sidebar-footer { border-top-color: rgba(191,219,254,.12); }
  .dark .teacher-logout-btn { color: #7d93b3; }
  .dark .teacher-logout-btn:hover { background: rgba(239,68,68,.14); color: #fca5a5; }