/* ══════════════════════════════════════════════════════════════════
   ตัวแปรสี + รีเซ็ตพื้นฐาน — ใช้ร่วมกันทั้งไฟล์นี้ (หน้า login แบบเดิม/ผู้ใช้งาน/LINE OA)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg:#f0f2f5;
  --surface:#fff;
  --text:#111b21;
  --muted:#667781;
  --line:#e9edef;
  --primary:#00a884;
  --primary-soft:#e4f6f1;
  --red:#b42318;
  --red-soft:#fff1f0;
  --green:#067647;
  --green-soft:#ecfdf3;
  font-family:"Sarabun","Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100dvh;
  background:radial-gradient(circle at top left,#d9f2ec 0,transparent 34%),radial-gradient(circle at bottom right,#f4e7ff 0,transparent 35%),var(--bg);
  color:var(--text);
}
button,input,select { font:inherit; }

/* ── การ์ดฟอร์มแบบเรียบ (login/register ทั่วไป) ──────────────────────────
   ⚠ login.php ไม่ได้ใช้ชุดนี้แล้ว (เปลี่ยนไปใช้ .login-* ด้านล่างสุดของไฟล์แทน)
   ชุดนี้ยังมีไว้ให้หน้าฟอร์มเรียบ ๆ อื่นเรียกใช้ได้ถ้าต้องการ ── */
.auth-shell {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}
.auth-card {
  width:min(460px,100%);
  border:1px solid rgba(222,225,237,.95);
  border-radius:28px;
  background:rgba(255,255,255,.96);
  box-shadow:0 26px 70px rgba(43,48,82,.14);
  padding:28px;
}
.auth-brand {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:24px;
}
.auth-brand img {
  width:54px;
  height:54px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 9px 21px rgba(71,120,255,.22);
}
.auth-brand strong {
  display:block;
  font-size:20.7px;
}
.auth-brand small {
  display:block;
  color:var(--muted);
  font-size:13.8px;
  margin-top:3px;
}
.auth-card h1 {
  font-size:32.2px;
  line-height:1.2;
  margin:0;
}
.auth-lead {
  font-size:14.9px;
  line-height:1.65;
  color:var(--muted);
  margin:8px 0 20px;
}
.auth-form {
  display:grid;
  gap:14px;
}

.field label {
  display:block;
  font-size:14.9px;
  font-weight:800;
  margin-bottom:7px;
}
.field input,.field select {
  width:100%;
  min-height:48px;
  border:1px solid #d5dbdf;
  border-radius:14px;
  background:#fff;
  padding:0 14px;
  outline:0;
  color:var(--text);
}
.field input:focus,.field select:focus {
  border-color:#6fd0ba;
  box-shadow:0 0 0 4px #e9f7f3;
}

.button {
  min-height:48px;
  border:0;
  border-radius:14px;
  padding:0 16px;
  font-weight:850;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
}
.button.primary {
  background:linear-gradient(145deg,#00a884,#009170);
  color:#fff;
  box-shadow:0 10px 22px rgba(71,120,255,.27);
}
.button.secondary {
  background:#fff;
  color:#39415c;
  border:1px solid var(--line);
}
.button.danger {
  background:#fff1f0;
  color:#b42318;
  border:1px solid #fecdca;
}
.button.full { width:100%; }

.alert {
  border-radius:14px;
  padding:11px 13px;
  font-size:13.8px;
  line-height:1.55;
  margin-bottom:14px;
}
.alert.error {
  background:var(--red-soft);
  color:var(--red);
  border:1px solid #fecdca;
}
.alert.success {
  background:var(--green-soft);
  color:var(--green);
  border:1px solid #abefc6;
}

.auth-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
  font-size:13.8px;
  color:var(--muted);
}
.auth-footer a {
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
}
.password-note {
  font-size:12.6px;
  color:var(--muted);
  line-height:1.55;
  margin:6px 0 0;
}

/* ══════════════════════════════════════════════════════════════════
   โครงหน้าแอดมิน (users.php) — หัว, การ์ดเนื้อหา, ฟอร์มสองคอลัมน์
   ══════════════════════════════════════════════════════════════════ */
.user-page {
  width:min(1100px,100%);
  margin:0 auto;
  padding:24px;
}
.page-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}
.page-top h1 {
  font-size:31px;
  margin:0;
}
.page-top p {
  font-size:14.9px;
  color:var(--muted);
  margin:5px 0 0;
}
.page-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.panel {
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  padding:18px;
  box-shadow:0 12px 32px rgba(47,48,73,.07);
  margin-bottom:16px;
}
.panel h2 {
  font-size:20.7px;
  margin:0 0 14px;
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.span-2 { grid-column:span 2; }

/* ── ตารางผู้ใช้งาน + ป้ายสถานะ ───────────────────────────────────── */
.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
}
.user-table {
  width:100%;
  border-collapse:collapse;
  min-width:780px;
}
.user-table th,.user-table td {
  padding:12px 13px;
  border-bottom:1px solid #e9edef;
  text-align:left;
  font-size:13.8px;
  vertical-align:middle;
}
.user-table th {
  background:#f7f8fa;
  color:#62677b;
  font-size:12.6px;
}
.user-table tr:last-child td { border-bottom:0; }

.badge {
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:850;
}
.badge.active {
  background:var(--green-soft);
  color:var(--green);
}
.badge.inactive {
  background:#f0f2f5;
  color:#667781;
}
.inline-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.mini {
  min-height:34px;
  border-radius:10px;
  padding:0 10px;
  font-size:12.6px;
}

.account-summary {
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#fafbfa;
}
.account-summary strong {
  display:block;
  font-size:18.4px;
}
.account-summary small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13.8px;
}

/* ── จอแคบ ─────────────────────────────────────────────────────── */
@media(max-width:700px) {
  .auth-shell { padding:14px; }
  .auth-card {
    padding:21px;
    border-radius:22px;
  }
  .auth-card h1 { font-size:27.6px; }
  .user-page { padding:14px; }
  .page-top { display:block; }
  .page-actions { margin-top:12px; }
  .form-grid { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
}

/* แถวติ๊กเปิด/ปิดบัญชี — ช่องติ๊กต้องไม่กินกฎ .field input ที่บังคับเต็มความกว้างสูง 48px */
.field-check{display:flex;align-items:center;gap:10px}
.field-check input[type=checkbox]{width:18px;min-height:18px;height:18px;flex:none;padding:0;border-radius:5px}
.field-check span{font-size:16.1px;font-weight:700}

/* ══════════════════════════════════════════════════════════════════
   หน้าผู้ใช้งาน (users.php) — หัวแผง ตัวตนของคนที่กำลังแก้ และโซนลบถาวร
   ══════════════════════════════════════════════════════════════════ */
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-head h2{margin:0}
.panel-head p{margin:5px 0 0;font-size:13.8px;color:var(--muted);line-height:1.7}
.panel-head .who{display:flex;align-items:center;gap:12px}
.who-avatar{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#2b7ae4,#1552b0);color:#fff;font-size:16.1px;font-weight:850}
.badge.role{background:#eef2fb;color:#3a4a72}

/* ลบถาวร = ทางเดียว กู้ไม่ได้ จึงต้องอยู่คนละกรอบกับปุ่มบันทึกเสมอ */
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:14px 16px;border:1px solid #fecdca;border-radius:16px;background:#fffaf9}
.danger-zone strong{display:block;font-size:14.9px;color:#b42318}
.danger-zone p{margin:5px 0 0;font-size:13.8px;line-height:1.7;color:#7a4a45;max-width:62ch}
.danger-zone form{flex:none}

.user-table tr.is-editing td{background:#eff5ff}
.user-table tr.is-editing td:first-child{box-shadow:inset 3px 0 0 #1f6fd8}

/* ⚠ .source-tag-php ไม่ได้อยู่ที่นี่ — อยู่ใน admin.css ซึ่ง users.php กับ line_settings.php
   โหลดอยู่แล้วทั้งคู่ ห้ามประกาศซ้ำที่นี่ กฎซ้ำสองไฟล์คือที่มาของบั๊กที่หาไม่เจอ */

/* ══════════════════════════════════════════════════════════════════
   หน้าเข้าสู่ระบบ
   ══════════════════════════════════════════════════════════════════
   พื้นหลังเต็มจอ + การ์ดกระจกลอยกลาง

   ⚠ ไม่ใช้ไฟล์รูปเป็นพื้นหลัง — วาดด้วย CSS ล้วน
      หนึ่ง: หน้า login ต้องขึ้นเร็วที่สุดในระบบ รูปพื้นหลังหลักร้อย KB คือสิ่งแรกที่คนเจอ
      สอง: รูปถ่ายสำเร็จรูปจากเน็ตใช้กับงานลูกค้าไม่ได้ และไฟล์ในเครื่องเป็นสกรีนช็อตงาน ไม่ใช่ภาพพื้นหลัง
      ลายทแยงซ้อนกันคือลายทอผ้า — เข้ากับโรงงานตัดเย็บโดยไม่ต้องใช้รูปจริง
   ══════════════════════════════════════════════════════════════════ */
.login-page{
  --lg-deep:#0a1f4d; --lg-mid:#1b4699; --lg-brand:#2f6fed; --lg-sky:#4d9cf0;
  --lg-line:rgba(255,255,255,.2);
  min-height:100dvh;margin:0;color:#fff;
  font-family:"Sarabun","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  background:var(--lg-deep);
}
/* พื้นหลังวาดด้วย CSS ล้วน ไม่ใช้ไฟล์รูป
   หนึ่ง: หน้า login ต้องขึ้นเร็วที่สุดในระบบ รูปพื้นหลังหลักร้อย KB คือสิ่งแรกที่คนเจอทุกเช้า
   สอง: ไฟล์รูปในเครื่องเป็นสกรีนช็อตงานกับใบสั่งซื้อ ไม่ใช่ภาพพื้นหลัง
   ลายทแยงคือลายทอผ้า เข้ากับโรงงานตัดเย็บโดยไม่ต้องใช้รูปจริง */
.login-page::before{
  content:"";position:fixed;inset:0;z-index:0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.030) 0 2px,transparent 2px 8px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.045) 0 2px,transparent 2px 8px),
    radial-gradient(920px 600px at 76% 10%,rgba(77,156,240,.32),transparent 60%),
    radial-gradient(720px 520px at 14% 86%,rgba(27,70,153,.62),transparent 64%),
    linear-gradient(158deg,#0d2a63,#0a1f4d 58%,#050f28);
}
/* แสงกวาดเฉียงบาง ๆ ให้พื้นไม่แบนเหมือนสีเทตัน */
.login-page::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.055) 47%,transparent 62%);
}
/* ── โหมดมีรูปพื้นหลัง ─────────────────────────────────────────
   ใส่ไฟล์ v2/assets/img/login-bg.(webp|jpg|png) แล้ว login.php จะเติมคลาสนี้ให้เอง
   ::before = ตัวรูปที่เบลอ · ::after = ฝ้ามืดทับให้ตัวหนังสือขาวอ่านออกทุกรูป
   ⚠ ฝ้ามืดห้ามถอด รูปสว่าง ๆ จะทำให้ฟอร์มขาวบนขาวอ่านไม่ออกทันที */
/* ── รูปพื้นหลังเป็นแท็ก <img> ที่ปูเต็มจอ ──────────────────────────────
   ⚠ ห้ามเปลี่ยนกลับไปใช้ background:url(var(--lg-photo)) — พาธจะเพี้ยน
      (เบราว์เซอร์คิดพาธใน url() ของตัวแปร CSS เทียบกับไฟล์ CSS ไม่ใช่เทียบกับหน้าเว็บ
       เหตุผลเต็มอยู่ที่ login.php ตรงที่วางแท็ก img)
   z-index:0 และอยู่เป็นลูกตัวแรกของ body — ::after (ฝ้ามืด) เกิดทีหลังจึงทับอยู่ข้างบน
   ส่วน .login-shell มี z-index:1 จึงลอยเหนือทั้งคู่ */
.login-photo{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none;
}
/* ปิดลายพื้นหลังที่วาดด้วย CSS ทิ้งเมื่อมีรูปจริง ไม่งั้นมันทับรูปอยู่ชั้นบน */
.login-page.has-photo::before{content:none}
/* ── ฝ้ามืด: เข้มเฉพาะตรงกลางที่การ์ดล็อกอินวางอยู่ ────────────────
   ⚠ ห้ามใช้ฝ้าทึบเท่ากันทั้งจอ (เดิมเป็นแบบนั้นที่ .72-.78 ทั้งแผ่น)
      วัดแล้วรูปถูกกลบจนเหลือความสว่างเฉลี่ย 11% จากของจริง 38% = มองไม่เห็นว่ามีรูป
   ตรงกลางยังต้องมืดพอให้ตัวหนังสือขาวอ่านออก จึงไล่เป็นวงจากกลางออกขอบ
   ขอบจอโปร่งกว่า รูปเลยเห็นชัด ส่วนหลังการ์ดยังเข้มเท่าเดิม */
.login-page.has-photo::after{
  background:
    radial-gradient(760px 560px at 50% 46%,rgba(5,15,40,.80),rgba(5,15,40,.42) 58%,rgba(5,15,40,.12) 78%),
    linear-gradient(180deg,rgba(5,15,40,.34),rgba(5,15,40,.16) 42%,rgba(5,15,40,.46));
}
@media (prefers-reduced-transparency:reduce){
  /* เครื่องที่ตั้งค่าลดความโปร่ง ให้ฝ้าทึบขึ้นแทนการพึ่งเบลอ — ยังต้องเห็นรูปอยู่ */
  .login-page.has-photo::after{background:rgba(7,20,52,.66)}
}

/* ⚠ มือถือ (จอ <860px) ไม่แตะโครงเดิมเลย — การ์ดกระจกลอยกลางจอพร้อมรูปเต็มจอด้านหลัง
   ทำงานดีอยู่แล้วบนจอแคบ (ดูภาพตรวจ 2026-08-24) ปัญหา "ไม่สมส่วน" ที่ผู้ใช้ชี้มา
   เกิดเฉพาะจอกว้าง — การ์ดเล็ก ๆ ลอยอยู่กลางพื้นที่ว่างมหาศาล จึงแก้เฉพาะช่วง ≥860px
   ด้วยการแบ่งครึ่งจอแทน (ดู .login-visual/.login-formside ด้านล่าง) */
.login-shell{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-columns:1fr}
.login-visual{position:relative}
/* กว้างขึ้นจาก 412 เป็น 448 — ข้อความไทยหนึ่งวลีต้องจบในบรรทัดเดียวได้
   แคบกว่านี้แล้ววลี "ตั้งแต่ลูกค้าทักมาจนส่งของถึงมือ" จะถูกตัดกลางคำ */
.login-formside{display:flex;align-items:center;justify-content:center;padding:28px 18px}
.login-card{width:100%;max-width:448px}

/* การ์ดกระจก — โปร่งพอให้เห็นลายพื้นหลังผ่าน แต่ตัวหนังสือยังอ่านชัด (มือถือ) */
.login-panel{
  background:rgba(255,255,255,.075);
  border:1px solid var(--lg-line);
  border-radius:22px;padding:34px 30px 26px;
  box-shadow:0 26px 74px rgba(0,0,0,.46);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;
}

/* ── จอกว้าง: แบ่งครึ่งซ้าย-ขวา ────────────────────────────────────
   ซ้าย (.login-visual) = รูป/ลายทอผ้าเต็มความสูง ไม่มีตัวหนังสือทับแล้ว
   ขวา (.login-formside) = แผงทึบสีเดียวกับธีม ฟอร์มวางตรงกลางแบบไม่มีการ์ดลอยซ้อนอีกชั้น
   (การ์ดในการ์ดดูรกเกินไปเมื่อพื้นหลังเป็นสีเรียบอยู่แล้ว ไม่ใช่รูปที่ต้องมีอะไรมาคั่นให้อ่านออก) */
@media (min-width:860px){
  .login-shell{grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr)}
  .login-visual{overflow:hidden}
  .login-photo{position:absolute}
  /* รูปคมชัดเต็มซีกซ้าย ไม่ต้องมีฝ้าดำกลางจอแบบตอนที่การ์ดยังลอยทับอยู่ (ดูกฎ .has-photo::after เดิม
     ที่ปิดไว้ด้านล่าง) เหลือแค่ไล่สีจางที่ขอบขวาให้กลืนเข้าแผงฟอร์มทึบข้าง ๆ ไม่ตัดเป็นเส้นตรง */
  .login-visual::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent 55%,var(--lg-deep) 100%);
  }
  .login-page.has-photo::after{content:none}
  .login-formside{background:var(--lg-deep)}
  /* ฟอร์มลอยอยู่บนแผงทึบตรง ๆ ไม่ต้องมีกรอบการ์ด/เงา/เบลอซ้อนอีกชั้นเหมือนตอนอยู่บนรูป */
  .login-panel{
    background:none;border:0;border-radius:0;padding:0;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}
/* ⚠ ห้ามใส่ filter:brightness(0) invert(1) กับโลโก้
   โลโก้เป็นวงกลมพื้นขาวมีตัวอักษรน้ำเงินอยู่ข้างใน กลับสีแล้วได้สี่เหลี่ยมขาวตันทั้งก้อน
   (เคยพลาดมาแล้ว หน้า login ขึ้นเป็นกล่องขาวเปล่า ๆ แทนโลโก้)
   วางบนวงกลมขาวแทน — โลโก้เห็นเต็มและตัดกับพื้นเข้มพอดี */
.login-logo{
  display:block;width:86px;height:86px;margin:0 auto 18px;border-radius:50%;
  background:#fff;object-fit:contain;padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 0 5px rgba(255,255,255,.09);
}
/* ── ลำดับการอ่าน: ป้ายเล็ก → หัวเรื่อง → คำอธิบาย ────────────────
   ของเดิมเอาชื่อเต็มภาษาอังกฤษไปไว้ "ใต้" หัวเรื่อง ปนอยู่ก้อนเดียวกับคำอธิบาย
   สามอย่างเลยแย่งความสำคัญกันเอง ตาไม่รู้จะเริ่มอ่านตรงไหน
   ย้ายขึ้นมาเป็นป้ายกำกับเหนือหัวเรื่อง (ตัวเล็ก ห่างตัวอักษร) = อ่านผ่านได้ ไม่แย่งซีน */
.login-eyebrow{
  margin:0 0 6px;text-align:center;
  font-size:12.1px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.login-panel h1{margin:0;font-size:32.2px;font-weight:700;text-align:center;letter-spacing:-.015em}
/* คำอธิบายว่า CRM คืออะไร — คนที่เปิดหน้านี้ครั้งแรกยังไม่รู้ว่าระบบนี้ทำอะไร */
.login-sub{
  margin:10px auto 26px;max-width:34ch;text-align:center;
  font-size:14.9px;line-height:1.75;color:rgba(255,255,255,.62);
  text-wrap:balance;   /* เบราว์เซอร์ที่รองรับจะเกลี่ยความยาวสองบรรทัดให้เท่ากัน */
}
/* ⚠ แต่ละวลีเป็น inline-block = ตัดบรรทัดได้เฉพาะระหว่างวลี ไม่มีทางตัดกลางคำไทย
   (ดูหมายเหตุที่ login.php) เว้นวรรคระหว่างสอง span มาจากช่องว่างใน HTML */
.login-sub span{display:inline-block}

.login-form{display:grid;gap:13px}
/* ช่องกรอกทรงแคปซูล ไอคอนอยู่ขวา */
.lg-field{position:relative}
.lg-field input{
  width:100%;height:52px;padding:0 48px 0 22px;
  border:1px solid var(--lg-line);border-radius:99px;
  background:rgba(255,255,255,.07);color:#fff;
  font:inherit;font-size:17.2px;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.lg-field input::placeholder{color:rgba(255,255,255,.5)}
.lg-field input:hover{border-color:rgba(255,255,255,.34)}
.lg-field input:focus{
  outline:0;border-color:var(--lg-sky);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(77,156,240,.26);
}
.lg-field .lg-icon{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:rgba(255,255,255,.55);pointer-events:none;
}
.lg-field input:focus ~ .lg-icon{color:var(--lg-sky)}
/* Chrome ทาพื้นฟ้าทับช่องที่จำรหัสไว้ ทำให้แคปซูลกลายเป็นกล่องทึบ
   ยิงเงาในกล่องทับแทนการตั้ง background (ซึ่ง Chrome ไม่ยอมให้เปลี่ยน) */
.lg-field input:-webkit-autofill,
.lg-field input:-webkit-autofill:hover,
.lg-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 60px #12306e inset;
  caret-color:#fff;transition:background-color 9999s ease-in-out 0s;
}

.lg-btn{
  width:100%;height:52px;margin-top:8px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(135deg,var(--lg-brand),var(--lg-sky));color:#fff;
  font:inherit;font-size:17.2px;font-weight:700;letter-spacing:.02em;
  transition:filter .16s ease,transform .1s ease;
  box-shadow:0 12px 28px rgba(47,111,237,.42);
}
.lg-btn:hover{filter:brightness(1.07)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn:focus-visible{outline:3px solid rgba(255,255,255,.65);outline-offset:3px}

/* กล่องแจ้งเตือน — ต้องดูเป็นข้อความแจ้ง ไม่ใช่ช่องกรอกอีกช่อง
   ⚠ อย่าใช้ทรงแคปซูลเหมือนช่องกรอก คนอ่านแล้วนึกว่าเป็นช่องให้พิมพ์ (เคยเป็นมาแล้ว) */
.login-panel .alert{
  margin:0 0 16px;padding:11px 15px;border-radius:12px;font-size:15.5px;line-height:1.65;
  border:1px solid transparent;border-left-width:3px;display:flex;gap:8px;align-items:flex-start;
}
.login-panel .alert.error{background:rgba(224,87,93,.16);border-color:rgba(224,87,93,.5);color:#ffdcdd}
.login-panel .alert.success{background:rgba(77,156,240,.16);border-color:rgba(77,156,240,.5);color:#d7e9ff}
.login-panel .alert code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:6px;font-size:14.4px}

.login-foot{
  margin-top:22px;padding-top:15px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:13.2px;color:rgba(255,255,255,.45);
}

@media (max-width:420px){
  .login-panel{padding:28px 20px 22px;border-radius:18px}
  .login-panel h1{font-size:26.4px}
  .login-logo{width:78px;height:78px;margin-bottom:14px}
  /* ⚠ จอแคบต้องลดขนาดคำอธิบายลงด้วย ไม่งั้นวลีเดียวยาวเกินกรอบแล้วโดนตัดกลางคำอยู่ดี
     (inline-block กันการตัด "ระหว่างวลี" ได้ แต่ถ้าวลีเดียวกว้างเกินกรอบก็ยังตัดข้างในอยู่)
     12px + กรอบเต็มความกว้าง = วลีที่ยาวที่สุดยังจบในบรรทัดเดียวบนจอ 320px */
  .login-sub{font-size:13.8px;max-width:none;margin-bottom:22px}
  .login-eyebrow{font-size:10.9px;letter-spacing:.13em}
}
@media (prefers-reduced-motion:reduce){
  .lg-btn,.lg-field input{transition:none}
}