body.auth { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-700) 60%, var(--blue-700) 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-5); }
.auth-card .brand { text-align: center; margin-bottom: var(--space-5); }
.auth-card .brand h1 { margin: 0 0 var(--space-1); color: var(--navy); font-size: 1.4rem; }
.auth-card .brand p { margin: 0; color: var(--muted); font-size: .9rem; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: .85rem; margin: var(--space-4) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-links { text-align: center; margin-top: var(--space-4); font-size: .9rem; }
/* ปุ่มออกจากระบบใต้การ์ด — เป็นทางออก ไม่ใช่ปุ่มหลักของหน้า จึงเบากว่าเนื้อหาข้างบน */
.auth-signout { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.auth-signout p { margin: 0 0 var(--space-2); font-size: .85rem; }

/* โลโก้บนการ์ดเข้าสู่ระบบ — หน้าแรกที่ทุกคนเห็น */
.auth-card .brand-mark { display: block; margin: 0 auto var(--space-2); width: 72px; height: 72px; object-fit: contain; }