/* ชุดสีระบบ — อิงจากสื่อประชาสัมพันธ์ของกรมบังคับคดี
   สีที่ดูดมาจากแบนเนอร์จริง: ครีม #F2ECE6 · ม่วงหม่น #847589
   พลัม #895E71 · ไวน์ #783058

   ปรับให้เข้มขึ้นจากต้นฉบับ เพราะหน้าจอนี้เป็นงานอ่านตัวหนังสือหนาแน่น
   ไม่ใช่โปสเตอร์ ทุกคู่สีผ่าน WCAG AA ตัวหนังสือหลักผ่าน AAA
   (ตัวเลขอัตราส่วนอยู่ในคอมเมนต์ท้ายแต่ละบรรทัด)

   เปลี่ยนสีทั้งระบบได้ที่บล็อกนี้ที่เดียว ไม่มีสีฝังอยู่ในกฎอื่น */
:root{
  /* พื้นหลังและพื้นผิว */
  --bg:#F4EFE9;            /* ครีม — พื้นหลังทั้งหน้า */
  --bg-2:#FFFFFF;
  --surface:#FFFFFF;       /* การ์ด */
  --surface-2:#F7F1ED;     /* ช่องกรอก */
  --surface-3:#EDE2E6;

  /* ตัวหนังสือ */
  --ink:#2A1E28;           /* 15.97:1 บนการ์ด — AAA */
  --ink-2:#5C4A57;         /*  8.16:1 — AAA */
  --ink-3:#796272;         /*  5.52:1 บนการ์ด, 4.93:1 บนช่องกรอก — AA */

  /* เส้น */
  --rule:rgba(42,30,40,.11);
  --rule-strong:rgba(42,30,40,.22);

  /* สีหลัก — ไวน์ของกรม */
  --accent:#7A2E55;        /* ขาวบนปุ่มนี้ 8.94:1 */
  --accent-2:#8E3A66;      /* ลิงก์ 7.13:1 บนการ์ด */
  --accent-soft:rgba(122,46,85,.09);
  --accent-line:rgba(122,46,85,.28);

  /* สีสถานะ — ลดความฉูดฉาดให้เข้าโทนอุ่น แต่ยังแยกออกจากกันชัด */
  --ok:#1E7A52;   --ok-soft:rgba(30,122,82,.10);   --ok-line:rgba(30,122,82,.28);
  --warn:#8A5A12; --warn-soft:rgba(138,90,18,.10); --warn-line:rgba(138,90,18,.28);
  --bad:#A52A3A;  --bad-soft:rgba(165,42,58,.09);  --bad-line:rgba(165,42,58,.28);
  --info:#6B4A7A; --info-soft:rgba(107,74,122,.10); --info-line:rgba(107,74,122,.28);

  /* แถบหัวเรื่อง — ม่วงหม่นไปพลัมไปไวน์เข้ม ขาวบนปลายเข้มสุด 13.56:1 */
  --hero:linear-gradient(112deg,#8A6E80 0%,#7A4A63 42%,#5E2A47 76%,#4A1F3A 100%);
  --glow:0 6px 16px rgba(122,46,85,.22);
  --shadow:0 10px 26px rgba(42,30,40,.09);
  --radius:14px; --radius-sm:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Sarabun","IBM Plex Sans Thai","Helvetica Neue",system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;margin:0;line-height:1.3;text-wrap:balance;}
a{color:var(--accent-2);text-decoration:none;}
a:hover{text-decoration:underline;}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;font-size:.88em;font-variant-numeric:tabular-nums;}

/* ---------- โครงหน้า: แถบข้าง + เนื้อหา ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;}
/* พื้นแถบข้างต้องยาวเท่าหน้า ไม่ใช่เท่าจอ
   เดิมใส่ height:100vh ไว้ที่ตัวแถบเอง หน้าไหนยาวกว่าจอจะเห็นแถบขาดกลางคัน
   แล้วเหลือพื้นครีมโล่ง ๆ ข้างล่าง (วัดได้ว่าขาด 153 ถึง 682px แล้วแต่หน้า)
   จึงแยกเป็นสองชั้น: ตัวนอกยืดเต็มความสูงของ grid ส่วนตัวในติดหนึบที่ 100vh */
.side{background:var(--bg-2);border-right:1px solid var(--rule);}
.sideinner{
  position:sticky;top:0;height:100vh;padding:20px 14px;
  display:flex;flex-direction:column;gap:22px;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;}
.brand .mark{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--hero);box-shadow:var(--glow);overflow:hidden;
}
/* ตราเป็นภาพขาวบนพื้นโปร่ง จึงต้องวางบนกรอบสีเข้มเสมอ ไม่งั้นหายไปกับพื้นครีม */
.brand .mark img{width:26px;height:26px;display:block;}
.brand .txt{font-family:"IBM Plex Sans Thai",sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.25;}
.brand .txt small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}

.navgroup{display:flex;flex-direction:column;gap:2px;}
.navgroup .cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 6px;font-weight:600;}
.navgroup a,.navgroup span{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  font-size:13.5px;color:var(--ink-2);border:1px solid transparent;
}
.navgroup a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.navgroup .on{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line);font-weight:600;}
.navgroup .off{opacity:.4;}
.navgroup .num{
  font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:20px;text-align:center;
  width:20px;height:20px;flex:none;border-radius:6px;
  background:var(--surface-2);color:var(--ink-3);
}
.navgroup .on .num{background:var(--accent);color:#fff;}

.sidefoot{margin-top:auto;}
.casecard{
  border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:10px 12px;
  background:var(--surface);display:flex;align-items:center;gap:10px;
}
.casecard .av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
}
.casecard .nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.casecard .sb{font-size:11px;color:var(--ink-3);}

.main{padding:22px 26px 64px;max-width:1240px;}
/* ---------- แถบหัวเรื่องแบบไล่สี ---------- */
.page-head{
  background:var(--hero);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:20px 24px;margin-bottom:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 160% at 88% -30%,rgba(255,255,255,.22),transparent 60%);
}
.page-head > div{position:relative;}
.page-head h1{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.page-head p{margin:3px 0 0;color:rgba(255,255,255,.76);font-size:13.5px;max-width:70ch;}

/* ---------- การ์ด ---------- */
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);
}
/* การ์ดที่วางซ้อนกันในคอลัมน์เดียวต้องมีระยะห่าง
   แต่การ์ดที่อยู่คนละคอลัมน์ของ grid เป็น sibling กันในโค้ดเหมือนกัน
   ถ้าไม่ยกเว้น ใบขวาจะถูกดันลงจนขอบบนไม่ตรงกับใบซ้าย */
.card + .card{margin-top:16px;}
.split > .card + .card,
.grid-2 > .card + .card{margin-top:0;}
.card h2{font-size:16px;font-weight:600;margin-bottom:12px;}
.card h3{font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 0 8px;letter-spacing:.02em;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
/* คอลัมน์สูงเท่ากัน หน้าจะได้จบเป็นเส้นตรงเส้นเดียว ไม่ใช่ขั้นบันได
   ยกเว้นหน้าที่คอลัมน์ขวาเป็นภาพต้นฉบับซึ่งต้องติดหนึบตามการเลื่อน (.split.pin) */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:18px;
  align-items:stretch;}
.split.pin{align-items:start;}
.split > *{min-width:0;}
.split > .card{height:100%;}

/* .even = การ์ดในแถวเดียวกันสูงเท่ากัน
   หน้าแรกวางการ์ดเป็นลูกตรงของ grid ไม่ห่อคอลัมน์ ความสูงจึงเสมอกันเอง
   การ์ด "สำนวนที่เปิดอยู่" ถูกตรึงไว้คอลัมน์ซ้ายแถวสอง ไม่ให้ไหลขึ้นไปข้างขวา */
.split.even{align-items:stretch;}
.split.even > .card:nth-child(3){grid-column:1;}
/* กล่องลากไฟล์ยืดเต็มการ์ด จะได้ไม่เหลือที่ว่างเป็นก้อนตอนการ์ดถูกยืด */
.split.even > .card:first-child{display:flex;flex-direction:column;}
.split.even > .card:first-child form{display:flex;flex-direction:column;flex:1;}
.split.even > .card:first-child .drop{flex:1;}
@media (max-width:1020px){.grid-2,.split{grid-template-columns:1fr;}}
@media (max-width:820px){
  .shell{grid-template-columns:1fr;}
  .side{position:static;height:auto;flex-direction:column;}
  .main{padding:16px;}
}

/* ---------- ป้าย ---------- */
.pill{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;
  padding:3px 9px;border-radius:999px;letter-spacing:.03em;white-space:nowrap;
  border:1px solid transparent;
}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line);}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line);}
.pill.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line);}
.pill.mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--rule);}

/* ---------- ไทล์ตัวเลข ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;}
.stat{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius-sm);
  padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.stat .n{font-family:"IBM Plex Sans Thai",sans-serif;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;order:2;}
.stat .l{font-size:12.5px;color:var(--ink-3);order:1;}
.stat.good .n{color:var(--ok);} .stat.warn .n{color:var(--warn);} .stat.bad .n{color:var(--bad);}

/* ---------- รายการหน้าในสำนวน ---------- */
.pagelist{display:flex;flex-direction:column;gap:2px;max-height:560px;overflow-y:auto;}
.prow{
  display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:8px 10px;border-radius:8px;font-size:13.5px;
}
.prow:hover{background:var(--surface-2);}
.prow.blank{opacity:.4;}
.prow .pn{font-family:"IBM Plex Mono",monospace;color:var(--ink-3);font-size:12px;}
.prow button{background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0;}
.prow button:hover{color:var(--accent-2);}

.viewer{position:sticky;top:20px;}
.viewer img{width:100%;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:#fff;display:block;}
.viewer .cap{font-size:12.5px;color:var(--ink-3);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- ฟอร์ม ---------- */
label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-weight:500;}
input[type=text],input[type=date],input[type=number],input[type=password],select{
  width:100%;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);font:inherit;font-size:14px;
}
input::placeholder{color:var(--ink-3);opacity:.55;font-style:italic;}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
input.num{font-family:"IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums;}
.field{margin-bottom:14px;}

/* ช่องว่างในฟอร์มขั้นที่ 4
   แดง = ว่างแล้วเอกสารจะมีจุดไข่ปลาจริง ต้องกรอก
   จาง = ว่างแต่เทมเพลตที่เลือกไว้ไม่ได้ใช้ช่องนี้ ปล่อยว่างได้
   แยกสองแบบเพราะถ้าทาแดงทุกช่องที่ว่าง จะแดงครึ่งฟอร์มจนดูไม่ออกว่าอันไหนสำคัญ */
.field.missing > label{color:var(--bad);font-weight:600;}
/* ป้ายต้องอยู่ติดกันเสมอ ไม่งั้นช่องแคบ ๆ จะตัดคำเป็น "ต้อง / กรอก" */
.field.missing > label::after{
  content:"ต้องกรอก";white-space:nowrap;display:inline-block;
  margin-left:6px;padding:0 6px;border-radius:999px;
  font-size:10.5px;font-weight:500;line-height:1.7;
  color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line);
}
.field.missing input,
.field.missing select{border-color:var(--bad);background:var(--bad-soft);}
.field.missing input:focus{outline:2px solid var(--bad);outline-offset:-2px;}
.field.blank input{border-style:dashed;}

.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--ink-2);margin:0 0 14px;}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:6px;vertical-align:-1px;}
.legend .k-missing i{background:var(--bad-soft);border:1px solid var(--bad);}
.legend .k-blank i{background:var(--bg-2);border:1px dashed var(--ink-3);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin-bottom:12px;}
.check input{width:auto;accent-color:var(--accent);}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--accent);color:#fff;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--glow);
}
.btn:hover{background:var(--accent-2);text-decoration:none;}
.btn.ghost{background:transparent;color:var(--accent-2);border-color:var(--accent-line);box-shadow:none;}
.btn.ghost:hover{background:var(--accent-soft);}
.btn.mute{background:var(--surface-2);color:var(--ink-2);border-color:var(--rule-strong);box-shadow:none;}
.btn.mute:hover{background:var(--surface-3);color:var(--ink);}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;}

/* ---------- รายงาน ล.55 ---------- */
.l55{font-family:"IBM Plex Mono",monospace;font-size:13px;}
.l55 .ln{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--rule);}
.l55 .ln.i1{padding-left:28px;}
.l55 .ln .lbl{color:var(--ink-2);}
.l55 .ln .amt{font-variant-numeric:tabular-nums;white-space:nowrap;}
.l55 .ln.total{
  border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--radius-sm);padding:9px 12px;font-weight:600;margin-top:8px;
}
.l55 .ln.total .lbl,.l55 .ln.total .amt{color:var(--accent-2);}
.l55 .ln.variance{
  background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--radius-sm);
  margin-top:8px;padding:9px 12px;font-weight:600;
}
.l55 .ln.variance .lbl,.l55 .ln.variance .amt{color:var(--warn);}
.l55 .det{font-size:11.5px;color:var(--ink-3);padding:2px 0 5px 28px;}

/* ---------- กล่องแจ้งเตือน ---------- */
.notice{
  border:1px solid var(--warn-line);border-left-width:3px;background:var(--warn-soft);
  padding:13px 16px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--warn);
}
.notice.info{border-color:var(--info-line);background:var(--info-soft);color:var(--info);}
.notice.bad{border-color:var(--bad-line);background:var(--bad-soft);color:var(--bad);}
.notice.ok{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok);}
.notice + .notice{margin-top:10px;}
.notice b{font-weight:600;}
.notice a{color:inherit;text-decoration:underline;}
details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}
details > summary::before{content:"▸ ";opacity:.6;}
details[open] > summary::before{content:"▾ ";}

/* ---------- สถานะว่าง ---------- */
.empty{
  text-align:center;padding:52px 20px;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--radius);
}
.empty .ic{
  width:56px;height:56px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--rule-strong);font-size:22px;
}
.empty .ttl{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px;}

.samples{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.samples form{display:inline;}
.samples button{
  background:var(--surface-2);border:1px solid var(--rule-strong);color:var(--ink-2);
  font:inherit;font-size:13px;padding:7px 13px;border-radius:999px;cursor:pointer;
}
.samples button:hover{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft);}
.muted{color:var(--ink-3);font-size:13px;}

/* ---------- ช่องลากไฟล์ ---------- */
.drop{
  border:1.5px dashed var(--rule-strong); border-radius:var(--radius);
  background:var(--surface-2); padding:38px 24px; text-align:center;
  cursor:pointer; transition:border-color .12s, background .12s;
}
.drop:hover{border-color:var(--accent);}
.drop.over{border-color:var(--accent);background:var(--accent-soft);}
.drop.has{border-style:solid;border-color:var(--ok);background:var(--ok-soft);}
.drop input[type=file]{display:none;}
.drop .icon{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.drop .main{font-size:15px;font-weight:600;color:var(--ink);padding:0;max-width:none;}
.drop .sub{font-size:13px;color:var(--ink-3);margin-top:4px;}
.drop.has .main,.drop.has .icon{color:var(--ok);}
.drop-actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap;}

table{border-collapse:collapse;}
th{font-weight:600;color:var(--ink-3);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}

/* ยืนยันเลขคดี — ช่องที่ "มีคำตอบแล้วแต่ยังเชื่อไม่ได้" */
.confirm{display:flex;align-items:center;gap:8px;margin:7px 0 0;
  font-size:12.5px;font-weight:500;color:var(--warn);cursor:pointer;}
.confirm input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--warn);}
.confirm .muted{font-weight:400;}
.field:has(.confirm) input[type="text"],
.field:has(.confirm) input[type="password"]{
  border-color:var(--warn);background:var(--warn-soft);}
.confirmed{display:inline-block;margin-top:7px;font-size:11.5px;
  color:var(--ok);border:1px solid var(--ok-line);
  border-radius:999px;padding:0 8px;line-height:1.8;}

/* ---------- ซ่อนช่องที่เทมเพลตชุดที่เลือกไม่ได้ใช้ ----------
   ซ่อนด้วย CSS ล้วน ช่องยังอยู่ในฟอร์มและยังถูกส่งกลับตอนบันทึก
   ถ้าเอาออกจากหน้าจริง ๆ ค่าที่โมเดลอ่านมาในช่องนั้นจะถูกล้างทิ้งทันทีที่กดบันทึก
   (ทดสอบแล้ว: ไม่ส่ง collateral_type กลับมา ค่าที่มีอยู่กลายเป็นค่าว่าง)

   ซ่อนเฉพาะช่อง "ว่างและไม่ได้ใช้" เท่านั้น
   ช่องที่ไม่ได้ใช้แต่มีค่าอยู่ยังโชว์ เพราะเป็นสัญญาณว่าอาจเลือกแบบผิด */
.showall{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;user-select:none;}
.showall input{width:auto;margin:0;flex:0 0 auto;}
.card:has(#showall:not(:checked)) .field.blank{display:none;}
/* แถวคู่ และหัวข้อกลุ่ม ที่ช่องข้างในถูกซ่อนหมดแล้ว ไม่ต้องค้างไว้ */
.card:has(#showall:not(:checked)) .row2:not(:has(.field:not(.blank))){display:none;}
.card:has(#showall:not(:checked)) .grp:not(:has(.field:not(.blank))){display:none;}

/* ---------- ปุ่มหมุนหน้าเอกสาร ---------- */
.turnbar{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap;}
.turn{padding:6px 12px;border-radius:999px;border:1px solid var(--rule-strong);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;}
.turn:hover{border-color:var(--accent);color:var(--accent-2);}
.btn.ghost{background:transparent;color:var(--accent-2);border:1px solid var(--accent);}
.btn.ghost:hover{background:var(--accent-soft);}

/* ---------- ม่านตอน AI อ่านสำนวน ---------- */
.veil{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;background:rgba(42,30,40,.5);backdrop-filter:blur(3px);}
/* display:flex ข้างบนทับ [hidden] ที่เบราว์เซอร์ตั้งให้เป็น display:none
   ถ้าไม่เขียนบรรทัดนี้ ม่านจะค้างอยู่บนหน้าจอตลอดเวลา */
.veil[hidden]{display:none;}
.veilbox{background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:var(--radius);padding:28px 34px;text-align:center;
  box-shadow:var(--shadow);max-width:360px;}
.veilbox b{display:block;margin-bottom:6px;font-size:15px;}
.veilbox p{margin:4px 0 0;font-size:13px;}
.spin{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--rule-strong);border-top-color:var(--accent);
  animation:spin 900ms linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:2.4s;}}
.readgate .btn{font-size:14.5px;}

/* ---------- ตารางแสดงวิธีทำ ---------- */
.work{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0 0;}
.work caption{text-align:left;font-weight:600;font-size:12.5px;
  color:var(--ink-3);padding:6px 0;}
.work td{padding:6px 10px;vertical-align:top;border-top:1px solid var(--rule);}
.work td.k{color:var(--ink-3);width:22%;white-space:nowrap;}
.work td.v{font-family:var(--mono, ui-monospace, monospace);}
.work td.n{color:var(--ink-3);font-size:12px;text-align:right;}
.work tr.last td{border-top:1px solid var(--rule-strong);font-weight:600;}
.work tr.last td.v{color:var(--accent-2);}

/* ---------- หน้าเข้าสู่ระบบ ----------
   สองฝั่ง: ซ้ายบอกว่ากำลังจะเข้าระบบอะไรและระบบทำอะไรให้ ขวาคือฟอร์ม
   ฝั่งซ้ายไม่ใช่การตกแต่ง — หน้านี้เป็นหน้าแรกที่คนในกรมเห็น
   ควรตอบได้ว่านี่คือระบบอะไรก่อนที่จะพิมพ์รหัสผ่านลงไป
   จอแคบกว่า 900px พับเหลือแถบหัวเตี้ย ๆ แล้วดันฟอร์มขึ้นมา */
.loginsplit{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:100vh;}

.loginside{
  background:var(--hero);color:#fff;padding:52px 56px;
  display:flex;flex-direction:column;gap:38px;position:relative;overflow:hidden;
}
/* วงแสงจาง ๆ กันไม่ให้พื้นที่ทึบเป็นแผ่นเรียบ */
.loginside::after{
  content:"";position:absolute;width:520px;height:520px;right:-190px;bottom:-230px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
  pointer-events:none;
}
.loginside > *{position:relative;z-index:1;}
.loginside .brandrow{display:flex;align-items:center;gap:13px;}
.loginside .seal{width:52px;height:52px;flex:none;display:block;}
.loginside .brandrow b{display:block;font-size:15px;line-height:1.3;}
.loginside .brandrow span{font-size:12px;color:rgba(255,255,255,.72);}
.loginside h1{font-size:30px;line-height:1.35;font-weight:700;max-width:13em;}
.loginside .lead{font-size:14px;color:rgba(255,255,255,.82);max-width:30em;margin:12px 0 0;}
.loginsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.loginsteps li{display:flex;align-items:center;gap:13px;font-size:13.5px;
  color:rgba(255,255,255,.9);}
.loginsteps i{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
}
.loginfoot{margin-top:auto;font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.7;}

.loginmain{display:flex;align-items:center;justify-content:center;padding:52px 32px;
  background:var(--bg-2);}
.loginwrap{width:100%;max-width:352px;}
.loginwrap h2{font-size:21px;margin-bottom:5px;}
.loginwrap .sub{color:var(--ink-2);font-size:13.5px;margin:0 0 26px;}
.loginwrap .btn{width:100%;justify-content:center;margin-top:4px;}
.loginnote{
  margin:24px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:11.5px;line-height:1.7;color:var(--ink-3);
}

@media (max-width:900px){
  .loginsplit{grid-template-columns:1fr;min-height:0;}
  .loginside{padding:26px 24px;gap:0;}
  .loginside h1,.loginside .lead,.loginsteps,.loginfoot{display:none;}
  .loginmain{padding:36px 24px 56px;}
}

/* ---------- ใครล็อกอินอยู่ ---------- */
.whoami{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);}
.whoami .row{display:flex;align-items:center;gap:10px;padding:0 4px 10px;}
.whoami .av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-2);
  font-family:"IBM Plex Sans Thai",sans-serif;font-weight:700;font-size:13px;
}
.whoami .who{min-width:0;}
.whoami .who b{
  display:block;font-size:12.5px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.whoami .who span{display:block;font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.whoami form{margin:0;}
.whoami button{
  width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 10px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:none;font:inherit;font-size:12px;
  color:var(--ink-3);cursor:pointer;
}
.whoami button:hover{color:var(--bad);background:var(--bad-soft);
  border-color:var(--bad-line);}