/* ===========================================================================
 * mes789-system / assets/css/auth.css
 * ---------------------------------------------------------------------------
 * [เพิ่ม 21 ก.ย. 2569 — LANE-EMAIL-VERIFY-FIX]
 *
 * auth-login.php / auth-register.php / auth-verify.php ใช้คลาส .auth-wrap /
 * .auth-card / .auth-sub / .auth-links / .gate-* มาตั้งแต่แรก แต่ตรวจทั้งเว็บ
 * แล้วไม่มีไฟล์ CSS ไหนนิยามคลาสพวกนี้ไว้เลยสักคลาส — ปุ่ม/ช่องกรอกยังได้สีธีม
 * เพราะมาจาก selector กว้างใน app.css (input, button, .alert ฯลฯ) แต่หน้า
 * เข้าสู่ระบบ/สมัคร/ยืนยันอีเมลไม่เคยมีกรอบการ์ดกึ่งกลางจอเลยบนเว็บจริง
 *
 * ไฟล์นี้เป็น CSS ล้วน ไม่แตะ logic ใด ๆ — โหลดหลัง brand.css (ดู layout-head.php)
 * ========================================================================= */

.auth-wrap {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem;
  min-height: 60vh;
  align-items: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.auth-card h1 {
  margin: 0 0 .25rem;
  font-size: 1.3rem;
}

.auth-sub {
  color: var(--text-dim);
  margin: 0 0 1.25rem;
}

.auth-card form {
  text-align: left;
}

.auth-card .alert {
  text-align: left;
}

.auth-links {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .875rem;
}

/* ประตูหลังบ้าน (admin/super_admin) — เส้นขอบบนสีแดงแทนทอง แยกความรู้สึกจากประตูสมาชิก
   ตั้งใจไม่เปลี่ยนอะไรมากกว่านี้ กันสับสนกับธีมหลักของทั้งเว็บ */
.auth-wrap.gate-admin .auth-card,
.auth-wrap.gate-super_admin .auth-card {
  border-top-color: var(--red);
}