/* ระบบออกแบบของ ERP โรงเรียนกวดวิชาบ้านครูแพร — รุ่นที่สอง (v0.8.28)
 * ============================================================================
 *
 * ไฟล์นี้โหลด **ทับ** style ของแต่ละหน้า จึงชนะด้วย specificity เท่ากัน · นั่นคือเหตุผล
 * ที่รื้อหน้าตาทั้งระบบได้จากไฟล์เดียว โดยไม่แตะ markup ของสามหน้าจอเลยแม้แต่บรรทัดเดียว
 * — ทุก id ทุกตัวจัดการเหตุการณ์ และด่านทดสอบ 3,163 ข้อที่เดินหน้าจอจริง ยังทำงานเหมือนเดิม
 *
 * กติกาที่ใช้ตัดสินใจในไฟล์นี้
 * ---------------------------
 * ``1`` **สีแบรนด์มาจากโลโก้จริง ไม่ได้เลือกเอง** — #1b1464 คือสีที่วัดได้จากไฟล์โลโก้
 *       ที่โรงเรียนส่งมา (สีที่ใช้มากที่สุดรองจากขาว) · แบรนด์ที่เขียนขึ้นใหม่ให้ "ดูดี"
 *       จะเพี้ยนจากป้ายหน้าโรงเรียนและจากเอกสารที่พิมพ์ออกไปแล้ว
 *
 * ``2`` **สีแบรนด์กับสีกราฟเป็นคนละเรื่อง** — น้ำเงินเข้มของแบรนด์อยู่บนเมนู หัวเรื่อง
 *       และปุ่มหลัก · ส่วนสีของเส้นและแท่งในกราฟใช้ชุดที่ผ่านเครื่องตรวจตาบอดสีแล้ว
 *       ทั้งโหมดสว่างและมืด (ΔE ของคู่ที่ติดกันแย่ที่สุด 9.1 สว่าง / 8.4 มืด)
 *       เอาสีแบรนด์ไปเป็นเส้นที่สองในกราฟ = แบรนด์กลายเป็นข้อมูล แล้วข้อมูลกลายเป็นแบรนด์
 *
 * ``3`` **สีสถานะถูกจองไว้** ดี/เตือน/เสีย/ข้อมูล ไม่ถูกหยิบไปใช้เป็น "เส้นที่สี่" เด็ดขาด
 *       และไม่เคยสื่อความหมายด้วยสีอย่างเดียว — มีคำกำกับเสมอ
 *
 * ``4`` **เงาสร้างความลึก เส้นขอบเป็นเส้นผม** · เงาผสมสีน้ำเงินของแบรนด์แทนสีดำล้วน
 *       ซึ่งเป็นสิ่งที่ทำให้หน้าจออ่านเหมือนระบบเดียวกัน ไม่ใช่กล่องที่วางต่อ ๆ กัน
 *
 * ``5`` **ตัวเลขทุกตัวเป็น tabular** · คอลัมน์เงินที่ตัวเลขขยับไปมาคือคอลัมน์ที่อ่านยอดรวม
 *       ด้วยสายตาไม่ได้
 *
 * ``6`` **โหมดมืดถูกเลือกค่าเอง ไม่ใช่กลับสีอัตโนมัติ** — สีกราฟชุดมืดเป็นคนละ step
 *       ของ ramp เดียวกัน และตรวจ contrast ใหม่บนพื้นมืดแล้ว
 */

/* ============================================================== โทเคนหลัก */
:root {
  color-scheme: light;

  /* --- แบรนด์ · ไล่จากสีโลโก้ #1b1464 ------------------------------------ */
  --e-brand-50:  #f4f3fe;
  --e-brand-100: #e9e7fb;
  --e-brand-200: #cbc6f4;
  --e-brand-300: #a49ce9;
  --e-brand-400: #7a6fdb;
  --e-brand-500: #5546c4;
  --e-brand-600: #3a2ba2;
  --e-brand-700: #1b1464;   /* สีจริงจากโลโก้ */
  --e-brand-800: #150f4b;
  --e-brand-900: #0d0933;
  --e-brand:     var(--e-brand-700);

  /* --- พื้นผิวและหมึก ----------------------------------------------------
     v0.8.32 · ครูแพรขอ "น่ารัก สดใส สไตล์เด็ก ๆ วัยรุ่น" · พื้นผิวจึงย้ายจากเทาอมฟ้า
     (โทนสำนักงาน) มาเป็นม่วงอ่อนอมชมพู ซึ่งเป็นสีเดียวกับแบรนด์ที่เจือจางลงมามาก ๆ
     — สดขึ้นโดยไม่หลุดจากสีโรงเรียน

     **หมึกไม่ได้อ่อนลงเลย** · ตัวอักษรยังเป็น ``#101736`` บนพื้นขาวเหมือนเดิม เพราะ
     คนที่นั่งอ่านตารางตัวเลขทั้งวันคือฝ่ายบัญชีและธุรการ · หน้าจอที่สดใสจนอ่านตัวเลข
     ไม่ออก ไม่ได้ตอบคำขอ "User Friendly" แต่ขัดกับมันตรง ๆ                      */
  --e-bg:        #f6f4ff;
  --e-surface:   #ffffff;
  --e-surface-2: #faf8ff;
  --e-surface-3: #f0ecfd;
  --e-line:      #e6e0fa;
  --e-line-soft: #f1edfd;
  --e-ink:       #101736;
  --e-ink-2:     #454e6d;
  --e-ink-muted: #6f7a99;
  --e-on-brand:  #ffffff;

  /* --- สีสนุก · ใช้กับของประดับเท่านั้น ไม่ใช่กับข้อมูล ---------------------
     สี่สีนี้อยู่บนแถบหัว การ์ดว่าง ป้ายหมวด และลูกเล่นเล็ก ๆ · **ห้ามใช้เป็นสีของตัวเลข
     หรือเส้นในกราฟ** เพราะชุดสีกราฟถูกตรวจตาบอดสีมาแล้วทั้งชุด และการยืมสีประดับ
     ไปใช้กับข้อมูลคือการทำให้ชุดที่ตรวจแล้วไม่จริงอีกต่อไป                        */
  --e-fun-1: #ff6b9d;   /* ชมพูลูกกวาด */
  --e-fun-2: #ffb703;   /* เหลืองแดด   */
  --e-fun-3: #2ec4b6;   /* เขียวมิ้นต์  */
  --e-fun-4: #4cc9f0;   /* ฟ้าใส       */
  --e-fun-1-bg: #ffeaf2;
  --e-fun-2-bg: #fff4d6;
  --e-fun-3-bg: #e2f8f5;
  --e-fun-4-bg: #e6f7fe;

  /* --- สีเน้น (อำพัน) · ใช้เน้นสิ่งที่ต้องลงมือ ไม่ใช่สถานะ ---------------- */
  --e-accent:    #b06f00;
  --e-accent-bg: #fff6e4;

  /* --- สถานะ · จองไว้ ห้ามใช้เป็นสีเส้นในกราฟ ---------------------------- */
  --e-good:      #0a7350;
  --e-good-bg:   #e8f8f1;
  --e-warn:      #9a5b00;
  --e-warn-bg:   #fff4e3;
  --e-bad:       #b3261e;
  --e-bad-bg:    #fdeceb;
  --e-info:      #1b4fd8;
  --e-info-bg:   #ebf1ff;

  /* --- ช่องสีของกราฟ ตามลำดับที่ตรวจแล้ว ---------------------------------
     ลำดับคือกลไกกันตาบอดสี ไม่ใช่ความสวย · สลับที่เมื่อไรต้องรันเครื่องตรวจใหม่
     เส้นที่ 9 ไม่มี — ยุบเป็น "อื่น ๆ" หรือแยกกราฟ                        */
  --e-s1: #2a78d6;   /* น้ำเงิน */
  --e-s2: #eb6834;   /* ส้ม     */
  --e-s3: #1baf7a;   /* เขียวอมฟ้า — contrast ต่ำกว่า 3:1 ต้องมีป้ายกำกับเสมอ */
  --e-s4: #eda100;   /* เหลือง  — เช่นกัน */
  --e-s5: #e87ba4;   /* ชมพู    — เช่นกัน */
  --e-s6: #008300;   /* เขียว   */
  --e-s7: #4a3aa7;   /* ม่วง    */
  --e-s8: #e34948;   /* แดง     */
  /* "อื่น ๆ" ไม่ใช่หมวดหนึ่ง แต่คือ *ที่เหลือทั้งหมด* · ให้สีกลางที่ไม่มีเฉด ไม่ใช่ช่องสีที่ 8
     — ก้อนสีแดงที่แปลว่า "อื่น ๆ" อ่านได้ว่ามีอะไรผิดปกติ ทั้งที่ไม่มี (สีสถานะถูกจองไว้แล้ว) */
  --e-sother: #97a2b8;

  /* ไล่เฉดสีเดียวสำหรับ "มากน้อย" (ความร้อนของตาราง แผนที่ความหนาแน่น) */
  --e-seq-1: #cde2fb; --e-seq-2: #9ec5f4; --e-seq-3: #6da7ec; --e-seq-4: #3987e5;
  --e-seq-5: #256abf; --e-seq-6: #184f95; --e-seq-7: #0d366b;

  /* --- ตัวอักษร ---------------------------------------------------------- */
  --e-font: 'Prompt', 'Noto Sans Thai', 'Sarabun', 'Segoe UI', Tahoma, sans-serif;

  /* --- รูปทรงและเงา ------------------------------------------------------ */
  /* v0.8.32 — มุมมนขึ้นอีกขั้นและเงาเจือม่วง · มุมมนคือสิ่งที่ทำให้หน้าจอ "ดูเป็นมิตร"
     ได้มากที่สุดต่อการเปลี่ยนหนึ่งค่า และไม่แลกกับความอ่านออกเลยแม้แต่นิดเดียว */
  --e-radius:    20px;
  --e-radius-sm: 14px;
  --e-radius-xs: 10px;
  --e-shadow-xs: 0 1px 2px rgba(60,40,140,.06);
  --e-shadow:    0 1px 2px rgba(60,40,140,.05), 0 5px 16px rgba(60,40,140,.07);
  --e-shadow-md: 0 2px 4px rgba(60,40,140,.06), 0 12px 28px rgba(60,40,140,.09);
  --e-shadow-lg: 0 4px 8px rgba(60,40,140,.07), 0 24px 54px rgba(60,40,140,.15);
  --e-ring:      0 0 0 3px rgba(122,111,219,.32);

  --e-nav: var(--e-brand-800);
}

/* ============================================================== โหมดมืด
   ค่าของโหมดมืดถูกเลือกทีละค่าจาก ramp เดียวกัน ไม่ใช่การกลับสี · สีกราฟเป็นคนละ step
   ที่ตรวจ contrast บนพื้นมืดแล้วผ่านครบทั้งแปดช่อง

   มีชุดเดียว เพราะ ``erp.js`` แปลง "ตามเครื่อง" เป็น light หรือ dark แล้วประทับลงบน
   ``html[data-theme]`` ตั้งแต่ก่อนวาดเฟรมแรก · ถ้าเขียนสองชุด (ชุดหนึ่งตาม media query
   อีกชุดตามสวิตช์) ก็คือกติกาเดียวที่ถูกเขียนไว้สองที่ ซึ่งจะเพี้ยนจากกันวันใดวันหนึ่ง
   · ไม่มี JavaScript = ไม่มี data-theme = โหมดสว่าง ซึ่งเป็นค่าที่ปลอดภัยที่สุด       */
:root[data-theme="dark"] {
  color-scheme: dark;
  --e-bg:        #100e22;
  --e-surface:   #191634;
  --e-surface-2: #201d3e;
  --e-surface-3: #2a2650;
  --e-line:      #352f5c;
  --e-line-soft: #2b2750;

  /* สีสนุกของโหมดมืด — สว่างขึ้นเพื่อให้ยังเห็นบนพื้นเข้ม พื้นรองเข้มลงให้ตัวอักษรอ่านออก */
  --e-fun-1: #ff8ab4; --e-fun-1-bg: #3c1b2b;
  --e-fun-2: #ffc94d; --e-fun-2-bg: #3a2c0e;
  --e-fun-3: #4bd9cb; --e-fun-3-bg: #0f3330;
  --e-fun-4: #6fd8f5; --e-fun-4-bg: #10303c;
  --e-ink:       #f1f2fb;
  --e-ink-2:     #b9bcd8;
  --e-ink-muted: #8e93b5;

  --e-accent:    #f0ad3c;
  --e-accent-bg: #322610;
  --e-good:      #34d399; --e-good-bg: #0c2f24;
  --e-warn:      #f0ad3c; --e-warn-bg: #322610;
  --e-bad:       #f87171; --e-bad-bg:  #3a1614;
  --e-info:      #7aa7f5; --e-info-bg: #15224a;

  --e-s1: #3987e5; --e-s2: #d95926; --e-s3: #199e70; --e-s4: #c98500;
  --e-s5: #d55181; --e-s6: #008300; --e-s7: #9085e9; --e-s8: #e66767;
  --e-sother: #7d87a1;

  --e-seq-1: #0d366b; --e-seq-2: #184f95; --e-seq-3: #256abf; --e-seq-4: #3987e5;
  --e-seq-5: #6da7ec; --e-seq-6: #9ec5f4; --e-seq-7: #cde2fb;

  --e-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --e-shadow:    0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35);
  --e-shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.42);
  --e-shadow-lg: 0 4px 8px rgba(0,0,0,.4),  0 22px 50px rgba(0,0,0,.5);
  --e-nav: #0b0a18;
}

body { background: var(--e-bg); color: var(--e-ink) }

/* ========================================================== แถบแบรนด์ (hero)
   ประกอบโดย erp.js แล้ววางไว้บนสุดของเนื้อหาทุกหน้า — เขียนที่เดียว ขึ้นทั้งสามหน้าจอ
   โทนสว่าง ไม่ใช่แถบเข้ม เพราะคนทำงานกับหน้านี้ทั้งวัน และเพราะภาพถ่ายที่ตัดพื้นหลังแล้ว
   วางบนพื้นสว่างได้เนียนกว่าพื้นเข้มมาก                                        */
.e-band {
  position: relative; overflow: hidden;
  border-radius: var(--e-radius); margin: 0 0 20px;
  background:
    radial-gradient(120% 140% at 88% 8%, var(--e-brand-100) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(104deg, var(--e-surface) 0%, #f3f6ff 46%, #e8edfd 100%);
  border: 1px solid var(--e-line);
  box-shadow: var(--e-shadow-md);
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  min-height: 132px;
}
:root[data-theme="dark"] .e-band {
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(90,75,200,.30) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(104deg, var(--e-surface) 0%, #1d1a3c 52%, #262151 100%);
}

/* ลายห้องเรียนวิทย์–คณิต · จาง ๆ ใต้ทุกอย่าง ไม่แย่งสายตากับตัวเลข */
.e-band::before {
  content: ""; position: absolute; inset: 0;
  background: url("/ui/brand/lab-pattern.svg") 0 0 / 260px 260px repeat;
  color: var(--e-brand-700); opacity: .10; pointer-events: none;
}
:root[data-theme="dark"] .e-band::before { opacity: .17; color: var(--e-brand-300) }

.e-band-text { position: relative; z-index: 2; padding: 22px 8px 22px 26px; min-width: 0 }
.e-band-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--e-brand-600);
}
:root[data-theme="dark"] .e-band-eyebrow { color: var(--e-brand-300) }
.e-band-title {
  margin: 7px 0 0; font-size: 25px; font-weight: 850; line-height: 1.25;
  letter-spacing: -.4px; color: var(--e-brand-700);
}
:root[data-theme="dark"] .e-band-title { color: #e7e5fb }
.e-band-sub  { margin-top: 7px; font-size: 12.5px; color: var(--e-ink-2); line-height: 1.65 }
.e-band-motto {
  margin-top: 11px; display: inline-block; font-size: 12px; font-weight: 700;
  color: var(--e-brand-600); border-left: 3px solid var(--e-brand-300);
  padding: 2px 0 2px 11px; line-height: 1.55;
}
:root[data-theme="dark"] .e-band-motto { color: var(--e-brand-200) }

/* ภาพถ่ายจริงของโรงเรียน · ชิดขอบล่างให้เหมือนยืนอยู่บนแถบ ไม่ใช่รูปที่ลอยอยู่ */
.e-band-photo {
  position: relative; z-index: 2; align-self: end; display: block;
  height: 168px; width: auto; margin: 0 26px -1px 12px;
  filter: drop-shadow(0 12px 22px rgba(16,23,54,.20));
}
@media (max-width: 900px) { .e-band-photo { display: none } }
@media (max-width: 700px) { .e-band-title { font-size: 20px } .e-band-text { padding: 18px } }

/* ============================================================== โครงหน้า */
.e-section { margin: 0 0 26px }
.e-section > h2 {
  font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
  color: var(--e-ink-muted); margin: 0 0 13px;
}
.e-grid   { display: grid; gap: 15px }
.e-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)) }
.e-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)) }
.e-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)) }
@media (max-width: 1180px) { .e-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 900px)  { .e-grid-4, .e-grid-3, .e-grid-2 { grid-template-columns: 1fr } }

.e-card {
  background: var(--e-surface); border: 1px solid var(--e-line);
  border-radius: var(--e-radius); box-shadow: var(--e-shadow); padding: 19px;
}
.e-card h3 { margin: 0; font-size: 15px; font-weight: 850; color: var(--e-ink); letter-spacing: -.2px }
.e-card .e-sub { font-size: 11.5px; color: var(--e-ink-muted); margin-top: 4px; line-height: 1.6 }

/* ------------------------------------------------------------- ตัวเลขนำ */
.e-hero {
  position: relative; overflow: hidden;
  background: var(--e-surface); border: 1px solid var(--e-line);
  border-radius: var(--e-radius); box-shadow: var(--e-shadow-md);
  padding: 24px 26px; display: grid; gap: 22px;
  grid-template-columns: minmax(240px, 1.1fr) 2fr; align-items: center;
}
.e-hero::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, var(--e-brand-50) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
:root[data-theme="dark"] .e-hero::after { background: radial-gradient(circle, rgba(90,75,200,.18) 0%, rgba(0,0,0,0) 70%) }
@media (max-width: 980px) { .e-hero { grid-template-columns: 1fr } }
.e-hero .e-hero-label {
  font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase;
  color: var(--e-ink-muted);
}
.e-hero .e-hero-value {
  font-size: 44px; font-weight: 860; line-height: 1.05; margin: 8px 0 3px; letter-spacing: -1.2px;
  color: var(--e-ink);
}
.e-hero .e-hero-value.pos { color: var(--e-good) }
.e-hero .e-hero-value.neg { color: var(--e-bad) }
.e-hero .e-hero-note { font-size: 12.5px; color: var(--e-ink-2); line-height: 1.7; position: relative; z-index: 1 }

/* ส่วนต่างเทียบงวดก่อน · ทิศทางบอกเป็นคำด้วย ไม่ใช่สีอย่างเดียว */
.e-delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
           border-radius: 999px; padding: 4px 11px; }
.e-delta.up   { background: var(--e-good-bg); color: var(--e-good) }
.e-delta.down { background: var(--e-bad-bg);  color: var(--e-bad) }
.e-delta.flat { background: var(--e-surface-3); color: var(--e-ink-2) }

/* ------------------------------------------------------------ การ์ดตัวเลข */
.e-stat {
  position: relative; overflow: hidden;
  background: var(--e-surface); border: 1px solid var(--e-line);
  border-radius: var(--e-radius); box-shadow: var(--e-shadow);
  padding: 16px 17px;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.e-stat .e-stat-label { font-size: 11px; font-weight: 800; color: var(--e-ink-muted);
                        letter-spacing: .05em; text-transform: uppercase }
.e-stat .e-stat-value { font-size: 27px; font-weight: 860; margin: 8px 0 3px; color: var(--e-ink);
                        letter-spacing: -.7px; line-height: 1.12 }
.e-stat .e-stat-foot  { font-size: 11.5px; color: var(--e-ink-muted); line-height: 1.55 }
.e-stat.linked { cursor: pointer }
.e-stat.linked:hover { box-shadow: var(--e-shadow-md); transform: translateY(-2px);
                       border-color: var(--e-brand-200) }
.e-stat .e-stat-go { margin-top: 10px; font-size: 11px; font-weight: 850; color: var(--e-info) }
.e-stat.tone-good .e-stat-value { color: var(--e-good) }
.e-stat.tone-warn .e-stat-value { color: var(--e-warn) }
.e-stat.tone-bad  .e-stat-value { color: var(--e-bad) }

/* แถบสีบาง ๆ ริมซ้ายของการ์ดที่มีสถานะ · สีไม่ได้อยู่ลำพัง ตัวเลขข้างในก็เปลี่ยนสีด้วย */
.e-stat.tone-good::before, .e-stat.tone-warn::before, .e-stat.tone-bad::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.e-stat.tone-good::before { background: var(--e-good) }
.e-stat.tone-warn::before { background: var(--e-warn) }
.e-stat.tone-bad::before  { background: var(--e-bad) }

/* กระเบื้องไอคอนมุมขวาบน · ประกอบโดย erp.js จากอิโมจิที่หน้าส่งมา */
.e-stat-icon {
  position: absolute; right: 13px; top: 13px;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: var(--e-brand-50); color: var(--e-brand-600);
}
:root[data-theme="dark"] .e-stat-icon { background: var(--e-surface-3) }
.e-stat.tone-good .e-stat-icon { background: var(--e-good-bg) }
.e-stat.tone-warn .e-stat-icon { background: var(--e-warn-bg) }
.e-stat.tone-bad  .e-stat-icon { background: var(--e-bad-bg) }
.e-stat:has(.e-stat-icon) .e-stat-label { padding-right: 42px }

/* เส้นแนวโน้มจิ๋วใต้ตัวเลข · ไม่มีแกน ไม่มีตัวเลข เพราะมันตอบแค่ "ขึ้นหรือลง" */
.e-spark { display: block; width: 100%; height: 30px; margin: 6px 0 2px; overflow: visible }
.e-spark .sline { fill: none; stroke: var(--e-s1); stroke-width: 2;
                  stroke-linecap: round; stroke-linejoin: round }
.e-spark .sarea { fill: var(--e-s1); opacity: .12 }
.e-spark .sdot  { fill: var(--e-s1); stroke: var(--e-surface); stroke-width: 2 }
.e-stat.tone-good .e-spark .sline, .e-stat.tone-good .e-spark .sdot { stroke: var(--e-good) }
.e-stat.tone-good .e-spark .sdot { fill: var(--e-good) }
.e-stat.tone-bad  .e-spark .sline, .e-stat.tone-bad  .e-spark .sdot { stroke: var(--e-bad) }
.e-stat.tone-bad  .e-spark .sdot { fill: var(--e-bad) }

/* ------------------------------------------------------------------ ป้าย */
.e-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
           padding: 3px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
           background: var(--e-surface-3); color: var(--e-ink-2) }
.e-badge.good { background: var(--e-good-bg); color: var(--e-good) }
.e-badge.warn { background: var(--e-warn-bg); color: var(--e-warn) }
.e-badge.bad  { background: var(--e-bad-bg);  color: var(--e-bad) }
.e-badge.info { background: var(--e-info-bg); color: var(--e-info) }

/* ---------------------------------------------------------------- ตาราง */
.e-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.e-table th { background: var(--e-surface-2); text-align: left; color: var(--e-ink-2);
              font-weight: 800; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
              padding: 11px 13px; border-bottom: 1px solid var(--e-line); white-space: nowrap }
.e-table td { padding: 12px 13px; border-bottom: 1px solid var(--e-line-soft); color: var(--e-ink) }
.e-table tbody tr:last-child td { border-bottom: 0 }
.e-table tbody tr:hover { background: var(--e-surface-2) }
.e-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }

/* ---------------------------------------------------------------- กราฟ */
.e-chart { width: 100%; display: block; overflow: visible }
.e-chart .grid    { stroke: var(--e-line); stroke-width: 1 }
.e-chart .axis    { stroke: var(--e-line); stroke-width: 1 }
.e-chart .tick    { font-size: 10.5px; fill: var(--e-ink-muted) }
.e-chart .line    { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.e-chart .dot     { r: 4.5; stroke: var(--e-surface); stroke-width: 2 }
.e-chart .bar     { rx: 4; stroke: var(--e-surface); stroke-width: 2 }   /* ช่องว่าง 2px ระหว่างแท่ง */
.e-chart .lbl     { font-size: 11px; font-weight: 800; fill: var(--e-ink-2) }
.e-chart .zero    { stroke: var(--e-ink-muted); stroke-width: 1; stroke-dasharray: 3 3 }

/* ตัวตนของเส้นไม่เคยอยู่ที่สีอย่างเดียว — ทุกเส้นมีชื่อกำกับข้างจุดสี */
.e-legend { display: flex; gap: 17px; flex-wrap: wrap; margin: 2px 0 11px }
.e-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
                 font-weight: 750; color: var(--e-ink-2) }
.e-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block }

.e-chartwrap { position: relative }
.e-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
         background: var(--e-brand-900); color: #fff; border-radius: 9px; padding: 8px 11px;
         font-size: 11.5px; line-height: 1.55; white-space: nowrap; z-index: 5;
         box-shadow: 0 10px 28px rgba(13,9,51,.36) }
.e-tip b { font-weight: 850 }
.e-tip .k { color: var(--e-brand-200) }

/* วงแหวนสัดส่วน · ตอบ "ก้อนไหนใหญ่กว่ากัน" ที่มีไม่เกินห้าก้อน
   ตัวเลขรวมอยู่กลางวง เพราะคำถามถัดไปเสมอคือ "จากทั้งหมดเท่าไร" */
.e-donut { display: block; overflow: visible }
.e-donut .seg  { fill: none; stroke-width: 15; stroke-linecap: butt }
.e-donut .hole { fill: var(--e-surface) }
.e-donut .mid  { font-weight: 860; fill: var(--e-ink); text-anchor: middle }
.e-donut .cap  { font-size: 10.5px; font-weight: 750; fill: var(--e-ink-muted); text-anchor: middle }
.e-donutwrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap }
.e-donutkey { display: grid; gap: 9px; min-width: 150px; flex: 1 }
.e-donutkey .kr { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--e-ink-2) }
.e-donutkey .kr i { width: 10px; height: 10px; border-radius: 3px; flex: none }
.e-donutkey .kr b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--e-ink);
                    font-weight: 800 }

/* มิเตอร์ — ปริมาณเดียวเทียบเพดานของตัวเอง จึงเป็นสีเดียว */
.e-meter { display: grid; grid-template-columns: 150px 1fr 92px; gap: 13px; align-items: center;
           padding: 9px 0; font-size: 12px }
.e-meter + .e-meter { border-top: 1px solid var(--e-line-soft) }
.e-meter .track { height: 9px; border-radius: 99px; background: var(--e-surface-3); overflow: hidden }
.e-meter .fill  { height: 100%; border-radius: 99px; background: var(--e-s1) }
.e-meter .fill.over { background: var(--e-warn) }
.e-meter .num   { text-align: right; font-variant-numeric: tabular-nums; color: var(--e-ink-2) }

/* กล่องที่ยังไม่มีข้อมูล · มีลายห้องเรียนจาง ๆ แทนที่จะเป็นที่ว่างเปล่า */
/* กล่องที่ยังไม่มีข้อมูล · มีลายห้องเรียนจาง ๆ แทนที่จะเป็นที่ว่างเปล่า
   ลายอยู่ใน ::before ที่ z-index:-1 และกล่องตั้ง isolation ไว้ — ไม่ใช่แผ่นทึบทับข้างบน
   เพราะข้อความในกล่องมักเป็น text node เปล่า ๆ ไม่ใช่อีลิเมนต์ จึงยกขึ้นเหนือแผ่นทับไม่ได้
   แล้วข้อความจะจมหายไปทั้งที่โค้ดดูเหมือนถูกต้อง (เจอตอนวาดหน้าหลักรุ่นนี้) */
.e-empty {
  padding: 30px 26px; text-align: center; color: var(--e-ink-muted); font-size: 12.5px;
  position: relative; isolation: isolate; border-radius: var(--e-radius-sm);
  background: var(--e-surface); line-height: 1.7;
}
.e-empty::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: url("/ui/brand/lab-pattern.svg") center / 220px 220px repeat;
  color: var(--e-brand-700); opacity: .07;
}
:root[data-theme="dark"] .e-empty::before { opacity: .12; color: var(--e-brand-300) }

/* ----------------------------------------------------------------- แท็บ */
.e-tabs { display: flex; gap: 5px; flex-wrap: wrap; border-bottom: 1px solid var(--e-line);
          margin: 0 0 18px; padding: 0 }
.e-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: 11px 15px;
  font: inherit; font-size: 13px; font-weight: 750; color: var(--e-ink-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; border-radius: 9px 9px 0 0;
  transition: color .14s, background .14s;
}
.e-tabs button:hover { color: var(--e-ink-2); background: var(--e-surface-2) }
.e-tabs button.on { color: var(--e-brand-600); border-bottom-color: var(--e-brand-600) }
:root[data-theme="dark"] .e-tabs button.on { color: var(--e-brand-300); border-bottom-color: var(--e-brand-300) }
.e-tabs button .n {
  margin-left: 7px; background: var(--e-bad-bg); color: var(--e-bad);
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 850;
}
.e-tabpane { display: none }
.e-tabpane.on { display: block }

/* ====================================================== ชั้นเชื่อมกับหน้าเดิม
 * สามหน้าจอถูกเขียนคนละเวลา แต่ละหน้ามีชุดตัวแปรของตัวเอง · แทนที่จะไล่แก้ทีละแผง
 * เราชี้ตัวแปรเดิมของแต่ละหน้ามาที่โทเคนข้างบน แล้วดึงส่วนประกอบที่ทั้งสามหน้าใช้ร่วมกัน
 * — แผง การ์ด ตาราง ป้าย — มาอยู่บนสเปกเดียว · markup ไม่ถูกแตะ
 */
:root {
  --bg:     var(--e-bg);
  --line:   var(--e-line);
  --ink:    var(--e-ink);
  --muted:  var(--e-ink-2);
  --panel:  var(--e-surface);
  --shadow: var(--e-shadow);
  --nav:    var(--e-nav);
  --blue:   var(--e-info);
  --green:  var(--e-good);
  --amber:  var(--e-warn);
  --red:    var(--e-bad);
  --brand:  var(--e-brand-700);
  --brand2: var(--e-brand-800);
}

.panel, .card {
  background: var(--e-surface); border: 1px solid var(--e-line);
  border-radius: var(--e-radius); box-shadow: var(--e-shadow);
}
.card .label { color: var(--e-ink-muted); font-weight: 800; letter-spacing: .04em }
.card .value { font-size: 26px; letter-spacing: -.6px; font-weight: 860 }
.panel h3 { color: var(--e-ink); font-weight: 850; letter-spacing: -.2px }
.desc { line-height: 1.7; color: var(--e-ink-2) }

table th {
  background: var(--e-surface-2); color: var(--e-ink-2);
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
table th, table td { padding: 10px 12px; border-bottom: 1px solid var(--e-line-soft) }
table td { font-size: 12px; color: var(--e-ink) }
table tbody tr:hover td { background: var(--e-surface-2) }

.badge { font-size: 10px; padding: 3px 9px; letter-spacing: .02em; border-radius: 999px }

.session { border-radius: var(--e-radius-sm); border-color: var(--e-line) }
.notice  { border-radius: var(--e-radius-sm); line-height: 1.7 }

/* เมนูซ้ายเดียวกันทั้งสามหน้าจอ · ไล่เฉดจากสีแบรนด์ ไม่ใช่เทาดำกลาง ๆ */
aside, .side {
  background: var(--e-nav);
  background-image: linear-gradient(168deg, var(--e-brand-700) 0%, var(--e-brand-800) 46%, var(--e-brand-900) 100%);
}
:root[data-theme="dark"] aside, :root[data-theme="dark"] .side {
  background-image: linear-gradient(168deg, #1a1540 0%, #120e30 52%, #0b0a18 100%);
}

button.btn { border-radius: var(--e-radius-sm); font-weight: 750; letter-spacing: .01em }

/* มิเตอร์คือปริมาณเดียวเทียบเพดานของตัวเอง จึงเป็นสีเดียว · ไล่เฉดอ่านเป็นมิติที่สอง
   ที่ไม่มีอยู่จริง — ปลายแถบดูเหมือนเรื่องที่หนักกว่าต้นแถบ ทั้งที่เป็นของอันเดียวกัน */
.fill      { background: var(--e-s1) }
.fill.warn { background: var(--e-warn) }

/* กราฟที่วาดด้วย preserveAspectRatio="none" จะยืด **ตัวหนังสือ** ไปกับรูปทรงด้วย
   จำกัดความสูงไว้ เพื่อให้ทุกกราฟอยู่ใกล้สัดส่วนที่มันถูกวาดมา ไม่ว่าจะไปตกในกล่องไหน */
.e-chart { max-height: 250px }

.nav .navlink {
  display: flex; align-items: center; gap: 10px; width: 100%;
  color: #cdc9ee; padding: 10px 12px; border-radius: 11px; margin: 2px 0;
  text-decoration: none; font-weight: 650;
  transition: background .14s, color .14s;
}
.nav .navlink:hover { background: rgba(255,255,255,.10); color: #fff }

/* ตารางข้อมูลต้องเลื่อนก่อนที่จะฉีก
   ทะเบียนทรัพย์สินมีเจ็ดคอลัมน์ · พอไปอยู่ในแผงครึ่งความกว้าง ตารางเชื่อฟัง width:100%
   แล้วบีบจนทุกช่องตัดบรรทัดเหลือตัวอักษรละบรรทัด — ยี่สิบห้าแถวกลายเป็นหน้าสูงสามพันกว่า
   พิกเซลที่อ่านไม่ได้ · กล่องมี overflow:auto อยู่แล้ว สิ่งที่ขาดคือพื้นให้ตารางยืนปฏิเสธ */
.tablewrap { overflow-x: auto }
.tablewrap > table { min-width: 640px }

/* ========================================================= ตารางข้อมูล (dt) */
.dt { margin: 0 }
.dt-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px }
.dt-search {
  padding: 8px 12px; border: 1px solid var(--e-line); border-radius: var(--e-radius-sm);
  font: inherit; font-size: 12px; min-width: 210px; background: var(--e-surface);
  color: var(--e-ink);
}
.dt-search:focus { outline: 0; border-color: var(--e-s1); box-shadow: var(--e-ring) }
.dt-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750;
  background: var(--e-info-bg); color: var(--e-info); border-radius: 999px; padding: 4px 7px 4px 11px;
}
.dt-chip button { border: 0; background: transparent; color: inherit; cursor: pointer;
                  font-weight: 900; padding: 0 3px; line-height: 1 }
.dt-clear { border: 0; background: transparent; color: var(--e-info); font: inherit;
            font-size: 11px; font-weight: 850; cursor: pointer; text-decoration: underline }
.dt-count { margin-left: auto; font-size: 11.5px; color: var(--e-ink-muted); white-space: nowrap }

.dt th.dt-th { padding: 0; white-space: nowrap }
.dt th.dt-th .dt-sort {
  display: inline-block; padding: 11px 4px 11px 12px; cursor: pointer; user-select: none;
}
.dt th.dt-th .dt-sort:hover { color: var(--e-info) }
.dt th.dt-on { background: var(--e-info-bg); color: var(--e-info) }
.dt-funnel {
  border: 0; background: transparent; cursor: pointer; color: var(--e-ink-muted);
  font-size: 11px; padding: 11px 9px 11px 2px; line-height: 1;
}
.dt-funnel:hover { color: var(--e-info) }
.dt-funnel.on { color: var(--e-info) }

.dt-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            flex-wrap: wrap; margin-top: 11px; font-size: 12px }
.dt-pager button {
  border: 1px solid var(--e-line); background: var(--e-surface); color: var(--e-ink-2);
  border-radius: var(--e-radius-xs); padding: 5px 10px; font: inherit; font-weight: 800; cursor: pointer;
}
.dt-pager button:hover:not(:disabled) { border-color: var(--e-brand-200); color: var(--e-brand-600) }
.dt-pager button:disabled { opacity: .35; cursor: default }
.dt-pager b { padding: 0 8px }

.dt-menu {
  position: absolute; z-index: 90; width: 280px; background: var(--e-surface);
  border: 1px solid var(--e-line); border-radius: var(--e-radius-sm);
  box-shadow: var(--e-shadow-lg); padding: 11px;
}
.dt-menu .dt-find { width: 100%; padding: 8px 10px; border: 1px solid var(--e-line);
                    border-radius: var(--e-radius-xs); font: inherit; font-size: 12px;
                    margin-bottom: 8px; background: var(--e-surface); color: var(--e-ink) }
.dt-menu .dt-all { display: flex; align-items: center; gap: 7px; font-size: 12px;
                   padding: 5px 4px; border-bottom: 1px solid var(--e-line-soft) }
.dt-menu .dt-values { max-height: 240px; overflow: auto; margin: 5px 0 8px }
.dt-menu .dt-values label {
  display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 5px;
  border-radius: 7px; cursor: pointer;
}
.dt-menu .dt-values label:hover { background: var(--e-surface-2) }
.dt-menu .dt-values label span { flex: 1; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap }
.dt-menu .dt-values label i { font-style: normal; font-size: 10.5px; color: var(--e-ink-muted) }
.dt-menu input[type=checkbox] { width: auto; margin: 0 }
.dt-menu .dt-actions { display: flex; gap: 7px }

/* ตัวอักษรชุดที่เลือก ใช้กับทุกอย่างรวมถึงตัวควบคุมฟอร์ม — select ที่ยังเป็นฟอนต์ระบบ
   คือชิ้นเดียวที่แฉว่าหน้านี้มีฟอนต์ของตัวเองอยู่ */
body, button, input, select, textarea, table { font-family: var(--e-font) }

/* เงินกับจำนวนต้องเรียงตรงเป็นคอลัมน์ไม่ว่าจะฟอนต์ไหน */
.num, .money, .e-stat-value, .e-hero-value, .dt-pager b,
.e-donutkey .kr b, .e-donut .mid { font-variant-numeric: tabular-nums }

/* สวิตช์ของผู้อ่าน (ฟอนต์ · ภาษา · โหมดมืด) อยู่หลัง ⚙ ข้างชื่อคน และเก็บไว้ที่บัญชี
   จึงตามคนไปทุกเครื่อง */
.toast, #toast { bottom: 18px !important; z-index: 90 !important }
.e-gear {
  border: 1px solid var(--e-line); background: var(--e-surface); color: var(--e-ink-2);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; margin-left: 6px; vertical-align: middle;
}
.e-gear:hover { border-color: var(--e-brand-300) }
aside .e-gear, .side .e-gear { background: rgba(255,255,255,.08); color: #e6e3fa;
                               border-color: rgba(255,255,255,.28) }
.e-prefs-form label { display: block; font-size: 12px; font-weight: 750; margin: 11px 0 5px }
.e-prefs-form select { padding: 8px 11px; border: 1px solid var(--e-line);
  border-radius: var(--e-radius-xs); font: inherit; min-width: 220px;
  background: var(--e-surface); color: var(--e-ink) }
.e-prefs-form .opt { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px;
  font-weight: 650; font-size: 13px }

/* ================================================ โหมดมืด · ส่วนที่หน้าฝังสีขาวไว้เอง
 * สามหน้าจอถูกเขียนก่อนจะมีโหมดมืด จึงมีที่ที่พิมพ์ #fff · #f8fafc · #eef2ff ไว้ตรง ๆ
 * — ถูกต้องตอนที่เขียน และกลายเป็นแผ่นขาวกลางจอมืดในรุ่นนี้
 *
 * รายการข้างล่างนี้ **ไม่ได้มาจากการไล่อ่านโค้ด** แต่มาจากการเปิดทั้งสามหน้าจอในโหมดมืด
 * ด้วยเบราว์เซอร์จริง แล้วให้สคริปต์ไล่ถาม getComputedStyle ของทุกอีลิเมนต์ที่มองเห็น
 * ว่าพื้นสว่างเกิน 0.72 หรือตัวหนังสือกับพื้นห่างกันน้อยกว่า 0.22 หรือเปล่า
 * · การไล่หาคำว่า "#fff" ในโค้ดจะได้ทั้งที่ใช้จริงและที่ถูกทับไปแล้ว — วิธีนี้ได้เฉพาะที่พังจริง
 *
 * ไม่ใช้ CSS nesting (&) โดยตั้งใจ — เบราว์เซอร์ที่โรงเรียนใช้อาจเก่ากว่าที่เราทดสอบ
 * และกฎที่เบราว์เซอร์อ่านไม่ออกคือกฎที่หายไปทั้งบล็อก ไม่ใช่แค่บรรทัดเดียว
 *
 * โลโก้ไม่อยู่ในรายการโดยตั้งใจ: พื้นขาวหลังโลโก้เป็นแผ่นรองที่ต้องมี เพราะตัวโลโก้เป็น
 * น้ำเงินเข้มบนแถบข้างที่ก็น้ำเงินเข้ม
 */
:root[data-theme="dark"] header.top { background: var(--e-surface); border-bottom-color: var(--e-line) }
:root[data-theme="dark"] .jumpbar   { background: var(--e-surface); border-color: var(--e-line) }
:root[data-theme="dark"] .jumpbar a { background: var(--e-surface-3); color: var(--e-brand-200) }
:root[data-theme="dark"] .jumpbar a:hover { background: var(--e-line) }
:root[data-theme="dark"] .jumpbar .lb { color: var(--e-ink-muted) }

:root[data-theme="dark"] .pill,
:root[data-theme="dark"] .pill.ok { background: var(--e-surface-3); color: var(--e-brand-200) }

:root[data-theme="dark"] table { background: var(--e-surface) }
:root[data-theme="dark"] th { background: var(--e-surface-2); color: var(--e-ink-2) }
:root[data-theme="dark"] th,
:root[data-theme="dark"] td { border-bottom-color: var(--e-line-soft) }
:root[data-theme="dark"] tr:hover td,
:root[data-theme="dark"] .sorow:hover td { background: var(--e-surface-2) }
:root[data-theme="dark"] .tablewrap { border-color: var(--e-line) }

:root[data-theme="dark"] .badge        { background: var(--e-surface-3); color: var(--e-ink-2) }
:root[data-theme="dark"] .badge.green  { background: var(--e-good-bg); color: var(--e-good) }
:root[data-theme="dark"] .badge.red    { background: var(--e-bad-bg);  color: var(--e-bad) }
:root[data-theme="dark"] .badge.amber  { background: var(--e-warn-bg); color: var(--e-warn) }
:root[data-theme="dark"] .badge.blue   { background: var(--e-info-bg); color: var(--e-info) }
:root[data-theme="dark"] .badge.violet { background: var(--e-surface-3); color: var(--e-brand-200) }

:root[data-theme="dark"] .btn.soft  { background: var(--e-surface-3); color: var(--e-brand-200) }
:root[data-theme="dark"] .btn.red   { background: var(--e-bad-bg);  color: var(--e-bad) }
:root[data-theme="dark"] .btn.green { background: var(--e-good-bg); color: var(--e-good) }
:root[data-theme="dark"] .btn.warn  { background: var(--e-warn-bg); color: var(--e-warn) }

:root[data-theme="dark"] .notice      { background: var(--e-info-bg); border-color: #2b3d78; color: #cbd9fb }
:root[data-theme="dark"] .notice.warn { background: var(--e-warn-bg); border-color: #5c4318; color: #f3ce93 }

:root[data-theme="dark"] .roomcard { background: var(--e-surface); color: var(--e-ink);
                                     border-color: var(--e-line) }
:root[data-theme="dark"] .roomcard:hover { border-color: var(--e-brand-400) }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .toolbar input,
:root[data-theme="dark"] .toolbar select,
:root[data-theme="dark"] .movegrid input,
:root[data-theme="dark"] .movegrid select {
  background: var(--e-surface); color: var(--e-ink); border-color: var(--e-line);
}

/* กล่องย่อยของหน้าปฏิทิน · ห้องว่าง · ลิ้นชักเอกสาร ที่วาดพื้นขาวไว้เอง */
:root[data-theme="dark"] .mcell,
:root[data-theme="dark"] .day,
:root[data-theme="dark"] .slot,
:root[data-theme="dark"] .mchip,
:root[data-theme="dark"] .cell,
:root[data-theme="dark"] .fact,
:root[data-theme="dark"] .movebox,
:root[data-theme="dark"] .approvalrow,
:root[data-theme="dark"] .estep.sub,
:root[data-theme="dark"] .daylist .row,
:root[data-theme="dark"] .roomgrid td.rname {
  background: var(--e-surface-2); border-color: var(--e-line); color: var(--e-ink);
}
:root[data-theme="dark"] .mcell.out  { background: var(--e-bg) }
:root[data-theme="dark"] .cell.busy  { background: #1d3566; border-color: #2f4f8f; color: #cfe0ff }
:root[data-theme="dark"] .drawer .sheet { background: var(--e-surface) }
:root[data-theme="dark"] .drawer .close { background: var(--e-surface-3); color: var(--e-ink-2) }
:root[data-theme="dark"] .subhead    { color: var(--e-ink-2) }
:root[data-theme="dark"] .e-stat-icon { background: var(--e-surface-3) }

/* ปุ่มส่งออก Excel · ติดอยู่กับทุกตารางโดย export.js */
.e-export-btn { background: var(--e-info-bg); color: var(--e-info) }
.e-export-btn:hover { background: var(--e-surface-3) }

/* แถวที่ตารางระบายสีเพื่อบอกสถานะ · สีต้องเป็นของโหมด ไม่ใช่ของโหมดสว่างอย่างเดียว */
:root[data-theme="dark"] tr.loss td,
:root[data-theme="dark"] .alertrow.loss { background: var(--e-bad-bg) }
:root[data-theme="dark"] tr.thin td,
:root[data-theme="dark"] .shortrow     { background: var(--e-warn-bg) }
:root[data-theme="dark"] .roomalert      { background: var(--e-bad-bg);  color: #f4b8b4;
                                           border-color: #5d201c }
:root[data-theme="dark"] .roomalert.warn { background: var(--e-warn-bg); color: #f3ce93;
                                           border-color: #5c4318 }
:root[data-theme="dark"] .mchip.cancelled,
:root[data-theme="dark"] .slot.cancelled { background: var(--e-bad-bg) }

/* แถบเลือกชั้นวางในห้อง (หน้าทำรายการ) */
:root[data-theme="dark"] .secnav button { background: var(--e-surface); color: var(--e-ink-2);
                                          border-color: var(--e-line) }
:root[data-theme="dark"] .secnav button .n { color: var(--e-ink-muted) }

/* ช่องกรอกทุกชนิด รวมวันที่และตัวเลข ที่เบราว์เซอร์ระบายพื้นเอง */
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="month"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="file"] { background: var(--e-surface); color: var(--e-ink) }
:root[data-theme="dark"] .e-stat-icon { color: var(--e-brand-200) }

/* แถวตัวเลขสรุปสั้น ๆ · v0.8.28
   ``.smallstats`` ถูกนิยามไว้ที่หน้าแดชบอร์ดหน้าเดียว แต่หน้าทะเบียนข้อมูลก็เรียกใช้ —
   บรรทัดสรุปบนสุดจึงออกมาเป็น "1 สาขา20 ห้อง8 โรงเรียนต้นสังกัด273 นักเรียน" ติดกันหมด
   · คลาสที่หน้าหนึ่งนิยาม แล้วอีกหน้าหยิบไปใช้ คือคลาสที่ต้องอยู่ในไฟล์ที่ทั้งสามหน้าโหลด */
.smallstats { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 10px 0 2px }
.smallstats span { font-size: 11.5px; color: var(--e-ink-muted); white-space: nowrap }
.smallstats b { color: var(--e-ink); font-weight: 850; margin-right: 4px }

/* ปุ่มลบ · หน้าทะเบียนข้อมูลเขียนไว้เป็นแดงทึบ ส่วนอีกสองหน้าจอเป็นแดงอ่อน
   หน้าทะเบียนมีปุ่มลบหนึ่งปุ่มต่อหนึ่งแถว — สองร้อยเจ็ดสิบสามปุ่มแดงทึบเรียงกันลงไป
   ทำให้ทั้งหน้าอ่านเหมือนหน้าเตือนภัย ทั้งที่มันคือทะเบียนนักเรียนธรรมดา
   · สีแดงยังอยู่ครบ แต่เป็นน้ำหนักเดียวกับอีกสองหน้าจอ */
/* เขียนเป็น ``button.btn.red`` ไม่ใช่ ``.btn.red`` เพราะหน้าทะเบียนเขียนไว้แบบมี
   ชื่อแท็กนำหน้าเหมือนกัน — specificity ต้องเท่ากันอย่างน้อย ไฟล์นี้จึงจะชนะด้วยลำดับการโหลด */
button.btn.red, .btn.red { background: var(--e-bad-bg); color: var(--e-bad) }
button.btn.red:hover, .btn.red:hover { background: #fbdcda }
:root[data-theme="dark"] button.btn.red:hover,
:root[data-theme="dark"] .btn.red:hover { background: #4a1c19 }

/* ==================================================== หน้าหลัก (v0.8.29)
 * แถบ hero · การ์ดหกใบ · สามคอลัมน์ · ปุ่มไปที่งาน
 *
 * ภาพประกอบทั้งหมดวาดเองเป็น SVG ไม่ได้ใช้ภาพจากอินเทอร์เน็ต — ระบบนี้โรงเรียนใช้ทำธุรกิจจริง
 * ภาพที่มีลิขสิทธิ์จะเป็นความเสี่ยงของโรงเรียน ไม่ใช่ของคนเขียนโปรแกรม
 * · และเส้นเวกเตอร์คมทุกความละเอียด ไฟล์เล็กกว่าภาพถ่ายหลายสิบเท่า และเปลี่ยนสีตามโหมดได้เอง
 */
.e-band {
  position: relative; overflow: hidden; height: 340px;
  border-radius: var(--e-radius); margin: 0 0 18px;
  border: 1px solid var(--e-line); box-shadow: var(--e-shadow-md);
  display: block;
  background:
    radial-gradient(70% 120% at 18% 0%, #ffffff 0%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 140% at 96% 100%, #cfe0ff 0%, rgba(207,224,255,0) 62%),
    linear-gradient(104deg, #eaf1ff 0%, #dce8ff 44%, #c9dcff 100%);
}
:root[data-theme="dark"] .e-band {
  background:
    radial-gradient(70% 120% at 18% 0%, #221f47 0%, rgba(34,31,71,0) 58%),
    linear-gradient(104deg, #171532 0%, #1d1a3f 44%, #241f52 100%);
}

/* แผงกระดานฝั่งขวา · ที่ยืนของหุ่นยนต์กับกองหนังสือ */
.e-band-board {
  position: absolute; right: 0; top: 0; bottom: 0; width: 60%;
  background: linear-gradient(104deg, rgba(23,58,140,0) 0%, #17418f 26%, #1355bd 62%, #2a7ae0 100%);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0% 100%);
}
:root[data-theme="dark"] .e-band-board {
  background: linear-gradient(104deg, rgba(12,26,72,0) 0%, #12306e 26%, #113f8c 62%, #1c56a8 100%);
}
.e-band-art   { position: absolute; right: 148px; bottom: -8px; height: 312px; z-index: 3 }
.e-band-photo { position: absolute; left: 452px; bottom: 0; height: 322px; z-index: 4; width: auto;
                margin: 0; filter: drop-shadow(-10px 14px 26px rgba(10,28,77,.30)) }

.e-band-text { position: absolute; left: 34px; top: 30px; z-index: 4; width: 420px; padding: 0 }
.e-band-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .15em;
                  text-transform: uppercase; color: var(--e-brand-600) }
.e-band-title {
  margin: 10px 0 0; font-size: 38px; line-height: 1.2; font-weight: 800;
  color: var(--e-brand-700); letter-spacing: -.6px;
}
:root[data-theme="dark"] .e-band-title { color: #ece9ff }
/* ขีดเน้นสีทองใต้บรรทัดที่สอง · วาดด้วย ::after จึงไม่กินที่ในบรรทัด */
.e-band-title .u { position: relative; display: inline-block }
.e-band-title .u::after {
  content: ""; position: absolute; left: -2px; right: -6px; bottom: 2px; height: 9px;
  background: linear-gradient(90deg, #ffd75e, #ffb020); border-radius: 6px; z-index: -1;
}
.e-band-sub { margin-top: 13px; font-size: 15px; font-weight: 600; color: var(--e-ink-2) }
.e-band-pills { margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap }
.e-band-pills span {
  background: rgba(255,255,255,.88); border: 1px solid #d6e0f5; border-radius: 999px;
  padding: 7px 13px; font-size: 12px; font-weight: 700; color: var(--e-brand-600);
  box-shadow: var(--e-shadow-xs);
}
:root[data-theme="dark"] .e-band-pills span {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); color: var(--e-brand-200);
}
/* วันที่ของตัวเลขบนหน้านี้ · อยู่ในสายของข้อความ ไม่ใช่ตำแหน่งลอย
   ตอนแรกวางไว้ที่มุมล่างซ้ายด้วย position:absolute แล้วมันไปทับปุ่มสองปุ่มข้างบน
   ทันทีที่ชื่อโรงเรียนยาวกว่าที่เผื่อไว้ — ตำแหน่งลอยในกล่องที่เนื้อหายืดได้ คือที่ที่จะชนกันวันหนึ่ง */
.e-band-asof { margin-top: 14px; font-size: 11.5px; font-weight: 600; color: var(--e-ink-muted);
               border-left: 3px solid var(--e-brand-300); padding-left: 10px; line-height: 1.5 }

.e-band-ai {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%); z-index: 5;
  background: rgba(255,255,255,.96); border-radius: 15px; padding: 13px 17px 14px;
  box-shadow: 0 12px 34px rgba(8,24,70,.28); min-width: 138px;
}
:root[data-theme="dark"] .e-band-ai { background: rgba(28,26,52,.96) }
.e-band-ai b { display: block; font-size: 20px; font-weight: 900; color: var(--e-brand-700);
               letter-spacing: .06em; margin-bottom: 8px }
:root[data-theme="dark"] .e-band-ai b { color: var(--e-brand-200) }
.e-band-ai i { display: block; font-style: normal; font-size: 12.5px; font-weight: 650;
               color: var(--e-ink-2); margin: 5px 0; padding-left: 20px; position: relative }
.e-band-ai i::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 6px;
  border-left: 2.4px solid var(--e-good); border-bottom: 2.4px solid var(--e-good);
  transform: rotate(-45deg);
}

/* จอแคบ: ภาพถ่ายไปก่อน แล้วภาพวาด แล้วการ์ด AI — ข้อความต้องอยู่รอดเสมอ */
@media (max-width: 1500px) { .e-band-ai { display: none } }
@media (max-width: 1280px) { .e-band-art { right: 10px; height: 250px } }
@media (max-width: 1080px) {
  .e-band { height: auto; min-height: 210px }
  .e-band-photo, .e-band-art, .e-band-board { display: none }
  .e-band-text { position: static; width: auto; padding: 24px 24px 8px }
  .e-band-motto { position: static; margin: 16px 24px 22px }
  .e-band-title { font-size: 28px }
}

/* ------------------------------------------------- การ์ดหกใบและสามคอลัมน์ */
.e-grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)) }
@media (max-width: 1500px) { .e-grid-6 { grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width: 880px)  { .e-grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)) } }

/* ไอคอนอยู่ซ้าย ไม่ใช่มุมขวาบน — ตามแบบที่โรงเรียนเลือก */
.e-stat.home-stat { display: flex; align-items: flex-start; gap: 12px; padding: 15px 15px 13px }
.e-stat.home-stat .e-stat-icon { position: static; width: 40px; height: 40px; border-radius: 12px;
                                 font-size: 19px; flex: none }
.e-stat.home-stat .home-stat-body { min-width: 0; flex: 1 }
.e-stat.home-stat .e-stat-label { padding-right: 0; font-size: 10.5px }
.e-stat.home-stat .e-stat-value { font-size: 23px; margin: 5px 0 3px }
.e-stat.home-stat .e-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
                             margin: 0; opacity: .85 }
.e-stat.home-stat:has(.e-spark) { padding-bottom: 26px }

.homegrid { display: grid; grid-template-columns: 1fr 1.15fr .95fr; gap: 15px; margin-bottom: 18px }
@media (max-width: 1300px) { .homegrid { grid-template-columns: 1fr 1fr } }
@media (max-width: 900px)  { .homegrid { grid-template-columns: 1fr } }
.homegrid > .panel { padding: 17px; min-width: 0 }

/* ตารางเรียนวันนี้ */
.todaylist { display: grid; gap: 2px }
.todayrow {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--e-radius-xs); cursor: pointer; font-size: 12px;
}
.todayrow:hover { background: var(--e-surface-2) }
.todayrow + .todayrow { border-top: 1px solid var(--e-line-soft) }
.todayrow .t { font-weight: 800; color: var(--e-brand-600); font-variant-numeric: tabular-nums }
:root[data-theme="dark"] .todayrow .t { color: var(--e-brand-200) }
.todayrow .c { min-width: 0 }
.todayrow .c b { display: block; font-weight: 700; color: var(--e-ink); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap }
.todayrow .c small { color: var(--e-ink-muted); font-size: 11px }

/* งานที่ต้องดำเนินการ */
.todolist { display: grid; gap: 2px }
.todorow {
  display: grid; grid-template-columns: 32px 1fr 14px; align-items: center; gap: 11px;
  padding: 10px 8px; border-radius: var(--e-radius-xs); cursor: pointer; font-size: 12.5px;
}
.todorow:hover { background: var(--e-surface-2) }
.todorow + .todorow { border-top: 1px solid var(--e-line-soft) }
.todorow .n {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 9px; font-weight: 850; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: var(--e-info-bg); color: var(--e-info);
}
.todorow .n.warn { background: var(--e-warn-bg); color: var(--e-warn) }
.todorow .n.bad  { background: var(--e-bad-bg);  color: var(--e-bad) }
.todorow .l { color: var(--e-ink); font-weight: 600 }
.todorow .go { color: var(--e-ink-muted); font-weight: 800; font-size: 16px; line-height: 1 }

/* ไปที่งานของคุณ */
.homelink {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-radius);
  box-shadow: var(--e-shadow); padding: 14px 15px; cursor: pointer; font: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.homelink:hover { box-shadow: var(--e-shadow-md); transform: translateY(-2px);
                  border-color: var(--e-brand-200) }
.homelink .ic {
  width: 42px; height: 42px; border-radius: 13px; flex: none; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--e-brand-50); color: var(--e-brand-600);
}
:root[data-theme="dark"] .homelink .ic { background: var(--e-surface-3) }
.homelink b     { display: block; font-size: 13.5px; font-weight: 800; color: var(--e-ink) }
.homelink small { display: block; font-size: 11.5px; color: var(--e-ink-muted); margin-top: 2px }
/* ป้ายส่วนต่างบนการ์ดหน้าหลัก · หกใบเรียงกันจึงแคบกว่าที่อื่น */
.e-stat.home-stat .e-delta { font-size: 11px; padding: 3px 8px; white-space: nowrap;
                             max-width: 100%; overflow: hidden; text-overflow: ellipsis }
.e-stat.home-stat .e-stat-foot { overflow: hidden }

/* ================================================ แถบคำสั่ง ⌘K (v0.8.30)
 * กล่องเดียวที่พาไปได้ทุกที่ในระบบด้วยคีย์บอร์ด · ประกอบโดย erp.js จึงใช้ได้ทั้งสามหน้าจอ
 * พื้นหลังเบลอเพื่อให้สายตาอยู่ที่กล่อง ไม่ใช่ที่หน้าที่ค้างอยู่ข้างหลัง
 */
.pal { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center;
       align-items: flex-start; padding-top: 12vh }
/* ``display:flex`` ชนะ attribute ``hidden`` — กล่องจึงยังโผล่อยู่ทั้งที่โค้ดสั่งซ่อนไปแล้ว
   เจอตอนเขียนด่าน: กด Esc แล้ว ``host.hidden=true`` ทำงานถูกต้อง แต่กล่องไม่หาย
   · ทุกครั้งที่ตั้ง display ให้อีลิเมนต์ที่จะถูกซ่อนด้วย hidden ต้องเขียนกฎนี้คู่กันเสมอ */
.pal[hidden] { display: none }
.pal-scrim { position: absolute; inset: 0; background: rgba(10,14,40,.52);
             backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
.pal-box {
  position: relative; width: min(620px, 92vw); background: var(--e-surface);
  border: 1px solid var(--e-line); border-radius: 18px; box-shadow: var(--e-shadow-lg);
  overflow: hidden;
}
.pal-head { display: flex; align-items: center; gap: 11px; padding: 15px 16px;
            border-bottom: 1px solid var(--e-line-soft) }
.pal-mag { font-size: 19px; color: var(--e-ink-muted); line-height: 1 }
.pal-input {
  flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px;
  color: var(--e-ink); padding: 0; min-width: 0;
}
.pal-input::placeholder { color: var(--e-ink-muted) }
.pal-esc, .pal-foot kbd {
  font: inherit; font-size: 10.5px; font-weight: 800; color: var(--e-ink-muted);
  background: var(--e-surface-3); border-radius: 6px; padding: 3px 7px; line-height: 1.4;
}
.pal-list { max-height: 46vh; overflow: auto; padding: 7px }
.pal-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px;
  cursor: pointer; font-size: 13.5px;
}
.pal-row.on { background: var(--e-brand-50) }
:root[data-theme="dark"] .pal-row.on { background: var(--e-surface-3) }
.pal-kind {
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--e-brand-600);
  background: var(--e-brand-50); border-radius: 999px; padding: 3px 9px; flex: none;
  min-width: 64px; text-align: center;
}
:root[data-theme="dark"] .pal-kind { background: var(--e-surface-3); color: var(--e-brand-200) }
.pal-label { color: var(--e-ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap }
.pal-go { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--e-ink-muted);
          background: var(--e-surface-3); border-radius: 6px; padding: 3px 7px; flex: none }
.pal-none { padding: 26px; text-align: center; color: var(--e-ink-muted); font-size: 12.5px }
.pal-foot { display: flex; align-items: center; gap: 6px; padding: 10px 16px;
            border-top: 1px solid var(--e-line-soft); font-size: 11.5px;
            color: var(--e-ink-muted); flex-wrap: wrap }

/* ปุ่มเปิดแถบคำสั่งบนหัวหน้าจอ · เป็นช่องค้นหาในสายตาคน แต่เป็นปุ่มจริง ๆ
   ช่องกรอกปลอมที่พิมพ์ไม่ได้ คือช่องที่คนพิมพ์ใส่แล้วงงว่าทำไมไม่มีอะไรเกิดขึ้น */
.e-omni {
  display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit;
  background: var(--e-surface-2); border: 1px solid var(--e-line); border-radius: 999px;
  padding: 8px 10px 8px 15px; color: var(--e-ink-muted); font-size: 12.5px;
  min-width: 260px; transition: border-color .14s, box-shadow .14s;
}
.e-omni:hover { border-color: var(--e-brand-300); box-shadow: var(--e-shadow-xs) }
.e-omni .lbl { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap }
.e-omni kbd { font: inherit; font-size: 10.5px; font-weight: 800; background: var(--e-surface);
              border: 1px solid var(--e-line); border-radius: 6px; padding: 2px 7px; flex: none }
@media (max-width: 900px) { .e-omni { min-width: 0 } .e-omni .lbl, .e-omni kbd { display: none } }

/* กระดิ่งแจ้งเตือน · ตัวเลขมาจากรายการงานค้างจริงบนหน้าหลัก ไม่ใช่ตัวนับแยกอีกชุด */
.e-bell { position: relative; border: 1px solid var(--e-line); background: var(--e-surface);
          border-radius: 999px; width: 38px; height: 38px; cursor: pointer; font-size: 17px;
          line-height: 1; color: var(--e-ink-2) }
.e-bell:hover { border-color: var(--e-brand-300) }
.e-bell .n {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; border-radius: 999px;
  background: var(--e-bad); color: #fff; font-size: 10.5px; font-weight: 850; line-height: 19px;
  padding: 0 5px; border: 2px solid var(--e-surface);
}
.e-bell .n:empty, .e-bell .n[hidden] { display: none }

/* ชิปผู้ใช้มุมขวาบน */
.e-who { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px }
.e-who .nm { text-align: right; line-height: 1.3 }
.e-who .nm b { display: block; font-size: 12.5px; font-weight: 800; color: var(--e-ink) }
.e-who .nm small { font-size: 11px; color: var(--e-ink-muted) }
.e-who .av {
  width: 38px; height: 38px; border-radius: 999px; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 850;
  background: linear-gradient(140deg, var(--e-brand-500), var(--e-brand-700)); color: #fff;
}
.topbar-right { display: flex; align-items: center; gap: 12px }
@media (max-width: 760px) { .e-who .nm { display: none } }

/* ไอคอนเส้น (v0.8.31) · ใช้ currentColor จึงรับสีจากที่ที่มันถูกวาง
   ไม่ต้องมีชุดสีของตัวเอง และเปลี่ยนตามโหมดสว่าง/มืดเองทั้งหมด */
.e-ic {
  width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em;
  fill: none; stroke: currentColor; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.e-stat-icon .e-ic { width: 19px; height: 19px }
.e-stat.home-stat .e-stat-icon .e-ic { width: 21px; height: 21px }
.homelink .ic .e-ic { width: 21px; height: 21px }
.nav button .e-ic, .nav .navlink .e-ic { width: 17px; height: 17px; opacity: .92 }
.e-omni .e-ic, .e-bell .e-ic { width: 17px; height: 17px }
.pal-mag .e-ic { width: 18px; height: 18px }

/* แถวที่เป็นที่ที่ยืนอยู่แล้ว · ยังเห็นได้ ยังค้นเจอ แต่บอกชัดว่าไปแล้วจะไม่มีอะไรเปลี่ยน */
.pal-row.here { opacity: .62 }
.pal-here { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--e-ink-muted);
            background: var(--e-surface-3); border-radius: 6px; padding: 3px 8px; flex: none }

.homegrid2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 15px; margin-bottom: 18px }
@media (max-width: 1000px) { .homegrid2 { grid-template-columns: 1fr } }
.homegrid2 > .panel { padding: 17px; min-width: 0 }
.homegrid2 .e-meter { grid-template-columns: minmax(0,1.3fr) 1fr 74px }
.homegrid2 .e-meter > span:first-child { overflow: hidden; text-overflow: ellipsis;
                                          white-space: nowrap }

/* มิเตอร์ต้องเป็น block ไม่ว่าจะถูกวาดด้วยแท็กอะไร
   ตอนแรกวาดด้วย <span> ซึ่งเป็น inline — ``height`` กับ ``overflow`` ไม่มีผล
   แถบจึงขึ้นเป็นรางเปล่า ๆ ทุกอัน ทั้งที่ความกว้างถูกคำนวณมาถูกต้องแล้ว
   · ส่วนประกอบที่ใช้ร่วมกันหลายหน้า ต้องไม่ฝากความถูกต้องไว้กับแท็กที่ผู้เรียกเลือกใช้ */
.e-meter .track, .e-meter .fill { display: block }

/* ===========================================================================
   เอกสารที่เกี่ยวข้อง · ในลิ้นชักเอกสาร (v0.8.32)
   ---------------------------------------------------------------------------
   สามหน้าตาเพราะมันคือสามสถานะที่ต่างกันจริง ๆ: ใบที่เปิดได้ · กองที่ยุบเป็นบรรทัดเดียว ·
   ใบที่มีอยู่แต่บัญชีนี้เปิดไม่ได้ · แถวที่หน้าตาเหมือนกันหมดจะทำให้คนอ่านคิดว่ากดได้ทุกแถว
   =========================================================================== */
.lk-box { border: 1px solid var(--e-line); border-radius: 14px; padding: 12px 14px;
          background: var(--e-surface-2) }
.lk-head { font-weight: 800; font-size: 13px; margin-bottom: 8px }
.lk-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
          border-bottom: 1px solid var(--e-line-soft); font-size: 13px; flex-wrap: wrap }
.lk-row:last-child { border-bottom: 0 }
.lk-dir { font-size: 10px; font-weight: 800; letter-spacing: .02em; flex: none;
          color: var(--e-brand); background: var(--e-brand-100); border-radius: 999px;
          padding: 3px 9px }
.lk-dir.down { color: var(--e-ink-2); background: var(--e-surface-3) }
.lk-what { min-width: 0 }
.lk-note { color: var(--e-ink-muted); font-size: 12px; min-width: 0 }
.lk-row .btn { margin-left: auto }
.lk-row.locked { opacity: .78 }
.lk-row.locked .lk-note { margin-left: auto }

/* ===========================================================================
   ผู้ช่วยแนะนำ · หน้าหลัก (v0.8.32)
   =========================================================================== */
.panel.guide { margin-bottom: 18px }
.panel.guide h3 { display: flex; align-items: center; gap: 8px }
.panel.guide h3 .e-ic { width: 19px; height: 19px; color: var(--e-accent) }
.guidelist { display: grid; gap: 8px; margin-top: 10px }
.guiderow { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px;
            border: 1px solid var(--e-line); border-radius: 13px;
            background: var(--e-surface); cursor: pointer;
            transition: border-color .12s, transform .12s, box-shadow .12s }
.guiderow:hover { border-color: var(--e-brand-300); transform: translateY(-1px);
                  box-shadow: var(--e-shadow-xs) }
.guiderow .gw { flex: none; margin-top: 1px }
.guiderow .gt { display: grid; gap: 3px; min-width: 0 }
.guiderow .gt b { font-size: 13.5px }
.guiderow .gd { font-size: 12px; color: var(--e-ink-muted); line-height: 1.6 }
.guiderow .go { margin-left: auto; align-self: center; color: var(--e-ink-muted);
                font-size: 18px; flex: none }
.guiderow.learn { background: var(--e-surface-2) }

/* ===========================================================================
   ชั้นสดใส (v0.8.32) — "น่ารัก สดใส ฟรุ้งฟริ้ง สไตล์เด็ก ๆ วัยรุ่น"
   ---------------------------------------------------------------------------
   ครูแพรตรวจงานแล้วขอหน้าตาที่สดใสและเป็นมิตรขึ้น · คำขอนั้นตรงกับตัวโรงเรียน และ
   ตรงกับคนที่เดินเข้ามาเห็นหน้าจอนี้บนเคาน์เตอร์ ซึ่งคือนักเรียนและผู้ปกครอง

   🔴 **แต่คนที่ใช้หน้าจอนี้ทั้งวันไม่ใช่นักเรียน** — คือธุรการ บัญชีการเงิน และผู้จัดการ
   ที่นั่งอ่านตารางตัวเลขวันละหลายชั่วโมง · หน้าจอที่สดใสจนตัวเลขอ่านยาก ไม่ได้ตอบคำขอ
   "User Friendly" แต่ขัดกับมันตรง ๆ และจะกลายเป็นคำขอให้เปลี่ยนกลับในอีกสองสัปดาห์

   เส้นแบ่งที่ใช้จึงชัดเจน:

   ``ของประดับสดใสได้เต็มที่``  แถบหัว · การ์ด · ปุ่ม · ป้าย · เมนู · กล่องว่าง · มุมโค้ง
   ``ของที่เป็นข้อมูล ไม่แตะ``  ตัวเลขในตาราง · สีของกราฟ · สีสถานะ · ความคมของตัวอักษร

   สีกราฟทั้งแปดช่องและสีสถานะยัง**เป็นค่าเดิมทุกตัว** เพราะมันผ่านเครื่องตรวจตาบอดสี
   มาแล้ว และ "สดใสขึ้น" ไม่ใช่เหตุผลที่ดีพอจะทำให้ชุดที่ตรวจแล้วไม่จริงอีกต่อไป
   =========================================================================== */

/* --- แผงและการ์ด: มนขึ้น ลอยขึ้นเมื่อชี้ ---------------------------------- */
.panel, .card {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.panel:hover, .card:hover { box-shadow: var(--e-shadow-md); border-color: var(--e-brand-200) }

/* หัวข้อของแผง มีจุดสีนำหน้าเล็ก ๆ · เป็นของประดับล้วน จึงไม่มีความหมายผูกกับข้อมูล */
.panel > h3::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 9px; vertical-align: middle;
  background: linear-gradient(135deg, var(--e-fun-1), var(--e-fun-2));
}
.panel.guide > h3::before { display: none }

/* --- ปุ่ม: ทรงแคปซูล ---------------------------------------------------- */
.btn, button.btn, .e-tabs button, .secnav button {
  border-radius: 999px;
}
.btn { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease }
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) }

/* --- ป้าย: สติกเกอร์นุ่ม ------------------------------------------------- */
.badge { font-weight: 800; padding: 4px 11px; border-radius: 999px }

/* --- ช่องกรอก: มนขึ้น และวงแหวนโฟกัสเป็นสีแบรนด์ ------------------------- */
input, select, textarea { border-radius: var(--e-radius-xs) }
input:focus, select:focus, textarea:focus { outline: 0; box-shadow: var(--e-ring) }

/* --- กล่องว่าง: พูดกับคนอ่าน ไม่ใช่ที่ว่างเปล่า ---------------------------- */
.e-empty { border: 1px dashed var(--e-line); font-weight: 600 }

/* --- พื้นหลังหน้า: ไล่เฉดอ่อน ๆ แทนสีเรียบ ------------------------------- */
body {
  background-image:
    radial-gradient(760px 420px at 100% -4%, var(--e-fun-1-bg) 0%, transparent 62%),
    radial-gradient(680px 380px at -6% 0%,  var(--e-fun-4-bg) 0%, transparent 58%);
  background-attachment: fixed;
}

/* --- เมนูซ้าย: ปุ่มที่เลือกอยู่เป็นแคปซูลสว่าง --------------------------- */
.nav button, .nav .navlink { border-radius: 999px }
.nav button.active, .nav .navlink.active {
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* --- ตาราง: ไม่แตะความคม แตะแค่มุมของหัวตาราง --------------------------- */
table th:first-child { border-top-left-radius: var(--e-radius-xs) }
table th:last-child  { border-top-right-radius: var(--e-radius-xs) }

/* --- การ์ดตัวเลขบนหน้าหลัก: ไอคอนสลับสีสนุกไปตามตำแหน่ง -------------------
   สีเวียนตาม *ลำดับการ์ด* ไม่ใช่ตามความหมายของตัวเลข — นี่คือของประดับ และการให้สี
   ที่ดูเหมือนมีความหมายกับของที่ไม่มีความหมาย คือวิธีทำให้คนอ่านผิดที่แนบเนียนที่สุด
   · การ์ดที่มีโทนจริง (ดี/เตือน/แย่) ยังใช้สีสถานะของมันเหมือนเดิม เพราะอันนั้นมีความหมาย */
/* 🔴 สีที่ใช้ตรงนี้ต้องมีค่าของโหมดมืดด้วยทุกตัว
   รอบแรกใบที่ห้าใช้ ``--e-brand-100`` ซึ่งมีค่าเฉพาะโหมดสว่าง · ในโหมดมืดมันจึงค้างเป็น
   แผ่นม่วงอ่อนสว่างจ้าอยู่กลางจอมืด · ด่านกวาดโหมดมืดจับได้ ส่วนการอ่านโค้ดไม่เห็น เพราะ
   บรรทัดนั้นดูถูกต้องทุกประการ — มันเรียกโทเคนของระบบตามกติกา แค่โทเคนนั้นไม่มีอีกค่าหนึ่ง
   · เวียนแค่สี่สีที่มีทั้งสองโหมดครบ แทนที่จะหาสีที่ห้ามาเติม */
#homeCards > .e-stat:not([class*="tone-"]) .e-stat-icon {
  background: var(--e-fun-4-bg); color: #0b6f8c;
}
#homeCards > .e-stat:nth-child(4n+2):not([class*="tone-"]) .e-stat-icon {
  background: var(--e-fun-1-bg); color: #b3266a;
}
#homeCards > .e-stat:nth-child(4n+3):not([class*="tone-"]) .e-stat-icon {
  background: var(--e-fun-3-bg); color: #0b6b62;
}
#homeCards > .e-stat:nth-child(4n):not([class*="tone-"]) .e-stat-icon {
  background: var(--e-fun-2-bg); color: #8a5a00;
}
:root[data-theme="dark"] #homeCards > .e-stat:not([class*="tone-"]) .e-stat-icon {
  color: var(--e-ink);
}

/* --- ป้ายชนิดคำแนะนำ: กว้างเท่ากันทั้งสามคำ จึงอ่านเป็นคอลัมน์เดียวกัน -----
   ``line-height`` ต้องกว้างพอสำหรับวรรณยุกต์ไทย · ป้ายที่บีบความสูงจะตัดหัว ไม้เอก
   ไม้โท ออกไปเงียบ ๆ แล้วคำว่า "ทำ" กับ "ท" ก็อ่านเหมือนกัน                    */
.guiderow .gw { min-width: 36px; text-align: center; line-height: 1.75; padding: 3px 10px }