/* ============================================================
   หน้าเข้าสู่ระบบ (login.php) — เลเอ้าต์ใหม่ โทนสีเดียวกับหน้าแรก (ทอง #D6B172 / ครีม / ขาว)
   ทุกคลาสอยู่ใต้ .auth จึงไม่กระทบหน้าอื่นที่ใช้ report.css
   ============================================================ */

.auth {
    --gold: #D6B172;
    --gold-dark: #a8844a;
    --gold-soft: rgba(214, 177, 114, 0.14);
    --cream: #faf4eb;
    --ink: #1f1f1f;
    --muted: #8d8d8d;
    --line: #eee4d3;
    --red: #e05b5b;
    --green: #3f9a64;
    --radius: 22px;

    min-height: 100vh;
    color: var(--ink);
    text-align: left;
    background:
        radial-gradient(circle at 0% 0%, rgba(214, 177, 114, 0.22), transparent 42%),
        linear-gradient(180deg, var(--cream) 0, #fff 620px);
}

.auth * {
    box-sizing: border-box;
}

/* ซ้าย = แนะนำระบบ (พื้นเข้ม)  ขวา = การ์ดฟอร์ม (ขาว)
   กล่องแนะนำระบบอยู่ตำแหน่งเดียวกัน ขนาดเท่ากันทุกหน้า (login.php · register.php · re_password.php) :
   คอลัมน์ / ความกว้างเท่ากันทุกหน้า · สูง --brand-h (เท่าการ์ดหน้าเข้าสู่ระบบ) · ชิดบนที่ --brand-top
   --brand-top = กล่องแนะนำอยู่กลางจอ (ตำแหน่งเดิมของหน้าเข้าสู่ระบบ) ไม่ใช้การ์ดฟอร์มที่สูงไม่เท่ากันมากำหนดตำแหน่ง */
.auth .auth-wrap {
    --brand-h: 586px;
    --brand-top: clamp(48px, calc((100vh - var(--brand-h)) / 2), 200px);   /* จอสูงมาก (แนวตั้ง) ไม่เว้นบนเกิน 200px */
    display: grid;
    /* minmax(0, …) : ให้คอลัมน์หดได้แคบกว่าความกว้างตั้งต้นของช่องกรอก (จอ 320px) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    width: min(1040px, 100% - 32px);
    margin: 0 auto;
    padding: var(--brand-top) 0 48px;
}

/* ---------- แนะนำระบบ ---------- */

.auth .brand {
    display: flex;
    flex-direction: column;
    min-height: var(--brand-h);   /* เนื้อหาสูงกว่านี้ (จอแคบ) = สูงตามเนื้อหา ยังเท่ากันทุกหน้า */
    padding: 36px;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 8% 0%, rgba(214, 177, 114, 0.32), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(214, 177, 114, 0.16), transparent 40%),
        linear-gradient(135deg, #2c231a, #1b1712);
    color: #fff;
    box-shadow: 0 16px 36px rgba(60, 42, 16, 0.25);
    overflow: hidden;
}

.auth .brand-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth .brand-logo {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    border: 2px solid var(--gold);
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(214, 177, 114, 0.35);
}

/* ตัวอักษรไล่สีทอง แบบเดียวกับตัวเลขนับถอยหลังหน้าแรก */
.auth .brand-name,
.auth .brand-total .num {
    background: linear-gradient(180deg, #f8e6bd, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth .brand-name {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 4px;
}

.auth .brand-by {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.72);
}

.auth .brand h2 {
    margin: 32px 0 6px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.35;
    color: #f6e7c8;
}

.auth .brand p {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
}

/* margin-bottom = ระยะห่างขั้นต่ำกับรายการด้านล่าง (รายการชิดล่างด้วย margin-top: auto) */
.auth .brand-total {
    margin: 28px 0;
}

.auth .brand-total .t,
.auth .brand-total .s {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.72);
}

.auth .brand-total .n {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.auth .brand-total .num {
    font-size: 64px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1px;
}

.auth .brand-total .unit {
    font-size: 22px;
    font-weight: 300;
}

/* จุดเด่นของระบบ : ชิดล่างของกล่อง */
.auth .brand-list {
    display: grid;
    gap: 12px;
    margin: auto 0 0;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid rgba(214, 177, 114, 0.25);
}

.auth .brand-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.auth .brand-list i {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(214, 177, 114, 0.2);
    color: var(--gold);
    font-size: 11px;
}

/* ---------- ฟอร์มเข้าสู่ระบบ ---------- */

.auth .card {
    padding: 40px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.auth .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    font-size: 15px;
    font-weight: 500;
}

.auth .card h1 {
    margin: 16px 0 4px;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.25;
}

.auth .card-sub {
    margin: 0 0 28px;
    font-size: 15px;
    font-weight: 300;
    color: var(--muted);
}

.auth .field + .field {
    margin-top: 18px;
}

.auth .field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.auth .field-head label {
    font-size: 15px;
    font-weight: 500;
}

.auth .field-head a {
    font-size: 14px;
    color: var(--gold-dark);
}

.auth .field-head a:hover {
    text-decoration: underline;
}

/* ช่องกรอกทรงแคปซูล : ไอคอน + ช่องพิมพ์ (+ ปุ่มรูปตา) */
.auth .input-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 20px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.auth .input-pill.has-eye {
    padding-right: 6px;
}

.auth .input-pill:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
}

.auth .input-pill > i {
    flex: none;
    width: 18px;
    text-align: center;
    color: var(--gold-dark);
    font-size: 16px;
}

.auth .input-pill input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
}

/* เบราว์เซอร์กรอกให้อัตโนมัติ : ไม่ให้พื้นสีฟ้าโผล่เป็นสี่เหลี่ยมในแคปซูล */
.auth .input-pill input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    -webkit-text-fill-color: var(--ink);
}

.auth .eye {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.auth .eye:hover {
    background: var(--gold-soft);
    color: var(--gold-dark);
}

.auth .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 28px;
    border: 0;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(214, 177, 114, 0.45);
    transition: background .2s;
}

.auth .btn:hover {
    background: var(--gold-dark);
}

.auth .btn i {
    transition: transform .2s;
}

.auth .btn:hover i {
    transform: translateX(3px);
}

/* เส้นคั่น "ยังไม่เป็นสมาชิก?" */
.auth .sep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 16px;
    font-size: 14px;
    font-weight: 300;
    color: var(--muted);
}

.auth .sep::before,
.auth .sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth .btn-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border: 2px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-dark);
    font-size: 16px;
    transition: all .2s;
}

.auth .btn-line:hover {
    background: var(--gold);
    color: #fff;
}

/* ฟอร์มยาว (สมัครสมาชิก) เลื่อนหน้าแล้ว กล่องแนะนำระบบค้างอยู่ที่เดิม · เฉพาะจอสูงพอให้เห็นทั้งกล่อง (48 + 586 + เผื่อ ≤ 650px) */
@media screen and (min-width: 861px) and (min-height: 650px) {
    .auth .brand {
        position: sticky;
        top: var(--brand-top);
    }
}

/* ---------- สมัครสมาชิก (register.php) ---------- */

/* ช่องกรอกคอลัมน์เดียว (การ์ดกว้างเท่าหน้าเข้าสู่ระบบ : 2 คอลัมน์แคบเกินสำหรับช่องกรอก)  .full = เต็มแถว (คงไว้) */
.auth .fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 16px;
}

.auth .fields .full {
    grid-column: 1 / -1;
}

.auth .fields .field + .field {
    margin-top: 0;
}

/* ฟอร์มยาว : ระยะห่างกระชับกว่าหน้าเข้าสู่ระบบ (เจ้าของเว็บให้ลด) — ช่องเตี้ยลง ป้ายชิดช่อง
   ตัวอักษรในช่อง 16px : iPhone ไม่ซูมหน้าจอตอนแตะช่องกรอก */
.auth .fields .field-head {
    margin-bottom: 5px;
}

.auth .fields .input-pill {
    height: 46px;
}

.auth .fields .input-pill input,
.auth .fields .input-pill select {
    font-size: 16px;
}

.auth .fields .field-hint {
    margin-top: 3px;
}

.auth .fields .field-msg {
    margin-top: 4px;
}

.auth .fields + .note {
    margin-top: 16px;
}

.auth .field-hint {
    margin: 6px 0 0 20px;
    font-size: 13px;
    font-weight: 300;
    color: var(--muted);
}

/* กรอกผิดรูปแบบ : ขอบแดง
   ฟอร์มที่ตรวจเองด้วยสคริปต์ (novalidate เช่น register.php) ใช้ .field.is-error แทน :user-invalid ของเบราว์เซอร์ */
.auth form:not([novalidate]) .input-pill:has(:user-invalid),
.auth .field.is-error .input-pill {
    border-color: var(--red);
}

.auth form:not([novalidate]) .input-pill:has(:user-invalid):focus-within,
.auth .field.is-error .input-pill:focus-within {
    box-shadow: 0 0 0 4px rgba(224, 91, 91, 0.14);
}

.auth .field.is-ok .input-pill {
    border-color: rgba(63, 154, 100, 0.55);
}

/* ข้อความใต้ช่อง : แดง = ผิด (แทนที่คำแนะนำ .field-hint)  เขียว = ถูกต้อง */
.auth .field-msg {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0 20px;
    font-size: 13px;
    line-height: 1.45;
}

.auth .field-msg::before {
    flex: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.auth .field.is-error .field-msg,
.auth .field.is-ok .field-msg {
    display: flex;
}

.auth .field.is-error .field-msg {
    color: var(--red);
}

.auth .field.is-error .field-msg::before {
    content: "\f06a";
}

.auth .field.is-ok .field-msg {
    color: var(--green);
}

.auth .field.is-ok .field-msg::before {
    content: "\f058";
}

.auth .field.is-error .field-hint {
    display: none;
}

/* แถวบนสุดของการ์ด : ปุ่มย้อนกลับ (ซ้าย) + ป้าย (ขวา) */
.auth .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth .back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #555;
    font-size: 15px;
    transition: border-color .2s, color .2s, background .2s;
}

.auth .back i {
    transition: transform .2s;
}

.auth .back:hover {
    border-color: var(--gold);
    background: var(--cream);
    color: var(--gold-dark);
}

.auth .back:hover i {
    transform: translateX(-3px);
}

/* ช่องเลือก : ซ่อนลูกศรเดิม ใช้ไอคอนแทน (ไอคอนทับบน select แต่กดทะลุได้) */
.auth .input-pill.is-select {
    position: relative;
    padding-right: 0;
}

.auth .input-pill select {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 44px 0 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}

.auth .input-pill select.is-empty {
    color: #bbbbbb;
    font-weight: 300;
}

.auth .input-pill option {
    color: var(--ink);
    font-weight: 400;
}

.auth .input-pill .caret {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

/* คำเตือนก่อนกดสมัคร */
.auth .note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--gold-soft);
    color: #6f5630;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
}

.auth .note i {
    flex: none;
    margin-top: 3px;
    color: var(--gold-dark);
}

.auth .note + .btn {
    margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .auth .btn i,
    .auth .back i {
        transition: none;
    }
}

/* ---------- Responsive ---------- */

/* จอแคบ : ฟอร์มอยู่ใต้ แนะนำระบบย่อเหลือโลโก้ + ชื่อระบบ จะได้เห็นช่องกรอกทันที */
@media screen and (max-width: 860px) {
    .auth .auth-wrap {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 16px;
        width: min(480px, 100% - 32px);
        padding: 24px 0 40px;
    }
    .auth .brand {
        min-height: 0;   /* จอแคบ : กล่องแนะนำย่อเหลือโลโก้ + ชื่อระบบ สูงตามเนื้อหา (เท่ากันทุกหน้า) */
        padding: 20px 22px;
    }
    .auth .brand h2 {
        margin: 14px 0 0;
        font-size: 17px;
    }
    .auth .brand p,
    .auth .brand-total,
    .auth .brand-list {
        display: none;
    }
    .auth .card {
        padding: 28px 22px;
    }
    .auth .card h1 {
        font-size: 28px;
    }
}

@media screen and (max-width: 480px) {
    .auth .brand-logo {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }
    .auth .brand-name {
        font-size: 28px;
    }
    .auth .card h1 {
        font-size: 26px;
    }
    .auth .card-sub {
        margin-bottom: 22px;
        font-size: 14px;
    }
    /* 16px : iPhone จะไม่ซูมหน้าจอตอนแตะช่องกรอก */
    .auth .input-pill input,
    .auth .input-pill select {
        font-size: 16px;
    }
}

/* ข้อความในวงเล็บไม่ให้ตัดกลางคำ (เช่น "จุด / อ่อน") */
.auth .nw {
    white-space: nowrap;
}

/* ---------- สมัครสมาชิก : ยอมรับเงื่อนไขการใช้งาน (register.php · terms_text.php) ----------
   ช่องติ๊กแบบกล่องทั้งแถว (แตะตรงไหนก็ติ๊ก) · ยังไม่ติ๊ก = ปุ่มสมัครสีเทากดไม่ได้
   แตะปุ่มเทา : กรอบรอบปุ่ม (.submit-wrap) รับคลิกแทน แล้วช่องติ๊กสั่น + ข้อความแดง (.nudge / .is-error) */
.auth .terms {
    margin-top: 12px;
}

.auth .check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.auth .check:hover {
    border-color: rgba(214, 177, 114, 0.7);
}

.auth .check:has(input:checked) {
    border-color: var(--gold);
    background: #fffaf1;
}

/* ซ่อนช่องติ๊กจริงแต่ยังโฟกัส / อ่านด้วยโปรแกรมอ่านหน้าจอได้ */
.auth .check input {
    position: absolute;
    top: 16px;
    left: 18px;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0;
}

.auth .check .box {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 2px solid #cdbf9f;
    border-radius: 7px;
    background: #fff;
    color: transparent;
    font-size: 13px;
    transition: background .15s, border-color .15s, color .15s;
}

.auth .check input:checked + .box {
    border-color: var(--gold);
    background: var(--gold);
    color: #fff;
}

.auth .check input:focus-visible + .box {
    box-shadow: 0 0 0 4px rgba(214, 177, 114, 0.35);
}

.auth .check .txt {
    font-size: 14.5px;
    line-height: 1.55;
    color: #444;
}

.auth .check .link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold-dark);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.auth .check .link:hover {
    color: #8a6a36;
}

.auth .terms.is-error .check {
    border-color: var(--red);
    background: #fff7f7;
}

.auth .terms.is-error .check .box {
    border-color: var(--red);
}

.auth .terms.nudge .check {
    animation: auth-nudge .45s ease-in-out;
}

.auth .terms .field-msg {
    margin-left: 16px;
}

@keyframes auth-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.auth .submit-wrap .btn {
    margin-top: 14px;
}

/* ยังไม่ติ๊กยอมรับ : ปุ่มเทา ไม่รับคลิก (กรอบรอบปุ่มรับแทน) */
.auth .btn:disabled {
    background: #d8d0c1;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.auth .submit-wrap:has(.btn:disabled) {
    cursor: not-allowed;
}

/* ---------- กล่องอ่านเงื่อนไขการใช้งาน (<dialog> · it_terms_dialog) ---------- */
.auth .terms-pop {
    width: min(640px, 100% - 32px);
    max-height: min(86vh, 760px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(44, 35, 26, 0.35);
    overflow: hidden;
}

.auth .terms-pop[open] {
    display: flex;
    flex-direction: column;
}

.auth .terms-pop::backdrop {
    background: rgba(31, 24, 16, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.auth .terms-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 16px 22px;
    border-bottom: 1px solid var(--line);
}

.auth .terms-head .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 17px;
}

.auth .terms-head h2 {
    flex: 1;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

.auth .terms-head .x {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f5f1ea;
    color: #555;
    font-size: 16px;
    cursor: pointer;
}

.auth .terms-head .x:hover {
    background: #ece4d6;
}

.auth .terms-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 24px 18px;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.7;
    color: #444;
    overscroll-behavior: contain;
}

.auth .terms-body > p:first-child {
    margin: 12px 0 4px;
}

.auth .terms-body h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 6px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
}

.auth .terms-body h3 .n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 12.5px;
}

.auth .terms-body ul {
    margin: 0;
    padding-left: 54px;
}

.auth .terms-body li + li {
    margin-top: 4px;
}

.auth .terms-body .upd {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.auth .terms-foot {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: #fcfaf6;
}

.auth .terms-foot .btn,
.auth .terms-foot .btn-line {
    height: 46px;
    margin: 0;
    font-family: inherit;
    cursor: pointer;
}

.auth .terms-foot .btn {
    flex: 1.5;
    font-size: 16px;
}

.auth .terms-foot .btn-line {
    flex: 1;
    background: #fff;
}

.auth .terms-foot .btn-line:hover {
    background: var(--gold-soft);
}

@media screen and (max-width: 480px) {
    .auth .check {
        padding: 12px 14px;
    }
    .auth .check .txt {
        font-size: 14px;
    }
    .auth .terms-pop {
        width: calc(100% - 20px);
        max-height: 90vh;
        border-radius: 18px;
    }
    .auth .terms-body {
        padding: 4px 18px 16px;
        font-size: 14px;
    }
    .auth .terms-body ul {
        padding-left: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth .terms.nudge .check {
        animation: none;
    }
    .auth .check,
    .auth .check .box {
        transition: none;
    }
}

.auth .terms-body:focus {
    outline: none;
}

.auth .terms-head .x:focus-visible,
.auth .terms-foot button:focus-visible {
    outline: 3px solid rgba(214, 177, 114, 0.6);
    outline-offset: 2px;
}

/* ---------- ลืมรหัสผ่าน (re_password.php) : ขั้นตอน 1 ยืนยันตัวตน → 2 ตั้งรหัสผ่านใหม่ + กล่องบัญชีในขั้นที่ 2 ---------- */
.auth .steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.auth .steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
    white-space: nowrap;
}

/* เส้นเชื่อมระหว่างขั้น */
.auth .steps li + li::before {
    content: "";
    flex: none;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
}

.auth .steps .n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.auth .steps li.on {
    color: var(--ink);
    font-weight: 500;
}

.auth .steps li.on .n {
    border-color: var(--gold);
    background: var(--gold);
    color: #fff;
    box-shadow: 0 4px 12px rgba(214, 177, 114, 0.45);
}

.auth .steps li.done {
    color: var(--gold-dark);
}

.auth .steps li.done .n {
    border-color: var(--gold);
    color: var(--gold-dark);
    font-size: 12px;
}

.auth .steps li.done + li::before {
    background: var(--gold);
}

.auth .steps + form h1 {
    margin-top: 14px;
}

.auth .acct {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--gold-soft);
}

.auth .acct .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    color: var(--gold-dark);
    font-size: 18px;
}

.auth .acct small {
    display: block;
    font-size: 12.5px;
    color: #8a7350;
}

.auth .acct b {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 360px) {
    .auth .steps {
        gap: 6px;
    }
    .auth .steps li + li::before {
        width: 18px;
    }
    .auth .steps li {
        font-size: 13px;
    }
}

/* ---------- เข้าสู่ระบบไม่สำเร็จ (login.php?e=… · เจ้าของเว็บขอ 2026-10-04 ให้ป๊อปอัปสวยงาม แทน alert() ของเบราว์เซอร์) ----------
   ป๊อปอัปคือ pro/popup.css (ต่อท้าย <body class='auth'>) : ชิ้นส่วนเพิ่ม = เบอร์ที่กรอก + ลิงก์ลืมรหัสผ่าน / สมัครสมาชิก
   ไม่มีสคริปต์ : ข้อความแดงเหนือฟอร์ม .lg-err */
.auth .lg-pop-ph {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 14px;
    padding: 7px 18px;
    border-radius: 999px;
    background: #faf4eb;
    box-shadow: inset 0 0 0 1px var(--line);
}

.auth .lg-pop-ph small {
    font-size: 12.5px;
    color: var(--muted);
}

.auth .lg-pop-ph i {
    color: var(--gold-dark);
    font-size: 13px;
}

.auth .lg-pop-ph b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.auth .lg-pop-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.auth .lg-pop-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.auth .lg-pop-links a:hover,
.auth .lg-pop-links a:focus-visible {
    border-color: var(--gold);
    background: #fff8ec;
}

.auth .lg-err {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid rgba(224, 91, 91, 0.3);
    border-radius: 16px;
    background: #fdf1f0;
    color: #b54040;
    font-size: 14px;
    line-height: 1.55;
}

.auth .lg-err i {
    margin-top: 3px;
}

/* ใต้ปุ่มเข้าสู่ระบบ : บอกว่าระบบจำการเข้าสู่ระบบไว้ (remember_lib.php · 2026-10-04) */
.auth .lg-keep {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--muted);
    text-align: center;
}

.auth .lg-keep i {
    margin-top: 3px;
    color: var(--gold);
    font-size: 11.5px;
}

/* ---------- ติดต่อเมื่อพบปัญหา (.auth-help · ใต้การ์ดฟอร์ม · เจ้าของเว็บขอ 2026-10-04) ----------
   จอใหญ่ (2 คอลัมน์) : คอลัมน์ขวาใต้การ์ด · จอแคบ (คอลัมน์เดียว) : ต่อใต้การ์ด · ไอคอน Facebook สีฟ้าของ Facebook */
.auth .auth-help {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #8b8378;
    text-align: center;
}

.auth .auth-help b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--gold-dark);
}

.auth .auth-help i {
    color: #1877f2;
    font-size: 15px;
}

@media screen and (max-width: 860px) {
    .auth .auth-help {
        grid-column: auto;
    }
}

/* ---------- มือถือ (≤ 600px) : เข้าสู่ระบบ · สมัครสมาชิก · ลืมรหัสผ่าน (เจ้าของเว็บขอ 2026-10-04 : ดีไซน์ / เลเอ้าใหม่ สีเดิม ประหยัดพื้นที่) ----------
   login.php (body.auth-login) · register.php (auth-reg) · re_password.php (auth-rp) · logout.php ไม่มีหน้าของตัวเอง (ส่งไป login.php)
   การ์ดเดียว : แถบแนะนำระบบพื้นเข้มเป็นหัวการ์ด (โลโก้ + I-TEST BY KRUPHUCHUAY + คำอธิบายระบบชิดกัน ข้างโลโก้) ต่อด้วยฟอร์มพื้นขาว
   หัวข้อ : ป้ายไอคอนสีทอง (ไอคอนตามหน้า) + ชื่อหน้า + คำอธิบาย · ซ่อนป้ายชื่อหน้า (.chip) ที่ซ้ำกับหัวข้อ · ปุ่มย้อนกลับเป็นวงกลมลอยขวาบน
   ช่องกรอก / ปุ่ม / ระยะห่างเล็กลง (ปุ่มสูง ≥ 44px · ตัวอักษรในช่อง 16px : iPhone ไม่ซูม) · หน้าเข้าสู่ระบบไม่แสดงข้อความ "ระบบจำการเข้าสู่ระบบ…"
   จอใหญ่กว่า 600px (คอมพิวเตอร์ / แท็บเล็ต) เหมือนเดิม */
@media screen and (max-width: 600px) {
    /* เนื้อหาทั้งหมด (หัวการ์ด + การ์ด + ข้อความติดต่อ) อยู่กึ่งกลางระหว่างขอบบนและขอบล่างของจอ (เจ้าของเว็บขอ 2026-10-04)
       100svh = ความสูงจอที่เห็นจริงตอนแถบเบราว์เซอร์แสดงอยู่ (เบราว์เซอร์เก่าใช้ 100vh) · เนื้อหายาวกว่าจอ (สมัครสมาชิก) = เริ่มจากด้านบนตามเดิม */
    .auth .auth-wrap {
        gap: 0;
        align-content: center;
        width: min(480px, 100% - 24px);
        min-height: 100vh;
        min-height: 100svh;
        padding: 16px 0;
    }

    /* หัวการ์ด : โลโก้ซ้าย (2 แถว) · ขวา = ชื่อระบบ / คำอธิบาย (ระยะห่างบรรทัดแคบ) */
    .auth .brand {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0 12px;
        padding: 13px 18px;
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: none;
    }
    .auth .brand-top {
        display: contents;
    }
    .auth .brand-logo {
        grid-row: 1 / span 2;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        box-shadow: 0 6px 14px rgba(214, 177, 114, 0.3);
    }
    .auth .brand-top > div {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 8px;
        min-width: 0;
        align-self: end;
    }
    .auth .brand-name {
        font-size: 21px;
        line-height: 1;
        letter-spacing: 3px;
    }
    .auth .brand-by {
        margin: 0;
        font-size: 10px;
        letter-spacing: 2px;
        white-space: nowrap;
    }
    .auth .brand h2 {
        align-self: start;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.25;
    }

    /* ฟอร์ม : ต่อใต้หัวการ์ด */
    .auth .card {
        padding: 18px;
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .auth .chip {
        display: none;
    }

    /* ปุ่มย้อนกลับ (สมัครสมาชิก / ลืมรหัสผ่าน) : วงกลมลอยขวาบน ข้อความ "ย้อนกลับ" ซ่อนด้วยขนาด 0 (โปรแกรมอ่านหน้าจอยังอ่านได้) */
    /* สูง 36px กึ่งกลางตรงกับบรรทัดชื่อหน้า · ขอบล่างติดลบ : ไม่ดันบรรทัดคำอธิบายให้สั้นลง (ลืมรหัสผ่าน : ตรงกับแถบขั้นตอน) */
    .auth .card-top {
        float: right;
        margin: -4px 0 -10px 10px;
    }
    .auth-rp .card-top {
        margin: 0 0 -14px 10px;
    }
    .auth .back {
        justify-content: center;
        gap: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 0;
    }
    .auth .back i {
        font-size: 15px;
    }

    /* หัวข้อ : ป้ายไอคอนสีทองซ้าย + ชื่อหน้า + คำอธิบาย */
    .auth .card h1 {
        position: relative;
        margin: 0;
        padding-left: 56px;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;
    }
    .auth .card h1::before {
        content: "\f2f6";
        position: absolute;
        top: 1px;
        left: 0;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, #f1d9a6, var(--gold) 55%, var(--gold-dark));
        box-shadow: 0 6px 14px rgba(214, 177, 114, 0.38);
        color: #fff;
        font-family: "Font Awesome 6 Free";
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
    }
    .auth-reg .card h1::before {
        content: "\f234";
    }
    .auth-rp .card h1::before {
        content: "\f084";
    }
    .auth-rp form[data-step='2'] h1::before {
        content: "\f023";
    }
    .auth .card-sub {
        min-height: 18px;
        margin: 1px 0 16px;
        padding-left: 56px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.45;
        color: #8b8378;
        text-wrap: balance;   /* ขึ้น 2 บรรทัด = ยาวพอกัน ไม่เหลือคำเดียวในบรรทัดล่าง */
    }

    /* ช่องกรอก */
    .auth .field + .field {
        margin-top: 12px;
    }
    .auth .fields {
        gap: 10px;
    }
    .auth .field-head {
        margin-bottom: 5px;
    }
    .auth .field-head label {
        font-size: 14px;
    }
    .auth .field-head a {
        font-size: 13px;
    }
    .auth .input-pill {
        gap: 10px;
        height: 46px;
        padding: 0 16px;
    }
    .auth .input-pill.has-eye {
        padding-right: 4px;
    }
    .auth .input-pill select {
        padding-right: 40px;
    }
    .auth .input-pill .caret {
        right: 16px;
    }
    .auth .eye {
        width: 38px;
        height: 38px;
    }
    .auth .field-hint,
    .auth .field-msg {
        margin-left: 16px;
        font-size: 12.5px;
    }

    /* ปุ่ม */
    .auth .btn {
        height: 48px;
        margin-top: 18px;
        font-size: 16px;
        box-shadow: 0 8px 20px rgba(214, 177, 114, 0.4);
    }
    .auth .note + .btn,
    .auth .submit-wrap .btn {
        margin-top: 12px;
    }
    .auth .sep {
        margin: 14px 0 10px;
        font-size: 13px;
    }
    .auth .btn-line {
        height: 44px;
        font-size: 15px;
    }

    /* เข้าสู่ระบบ : ไม่แสดงข้อความจำการเข้าสู่ระบบ (เจ้าของเว็บขอ) · ข้อความแดงกรณีไม่มีสคริปต์เล็กลง */
    .auth-login .lg-keep {
        display: none;
    }
    .auth .lg-err {
        margin-bottom: 12px;
        padding: 10px 14px;
        font-size: 13px;
    }
    .auth .auth-help {
        margin-top: 18px;
        font-size: 13px;
    }

    /* สมัครสมาชิก : คำเตือน · ช่องติ๊กยอมรับเงื่อนไข */
    .auth .note,
    .auth .fields + .note {
        gap: 8px;
        margin-top: 14px;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 13px;
    }
    .auth .terms {
        margin-top: 10px;
    }
    .auth .check {
        gap: 10px;
        padding: 11px 14px;
        border-radius: 14px;
    }
    .auth .check .box {
        width: 22px;
        height: 22px;
    }
    .auth .check input {
        top: 13px;
        left: 15px;
    }
    .auth .check .txt {
        font-size: 13.5px;
        line-height: 1.5;
    }

    /* ลืมรหัสผ่าน : แถบขั้นตอน (ข้างปุ่มย้อนกลับ) · กล่องบัญชี */
    .auth .steps {
        gap: 8px;
        margin: 6px 0 0;
    }
    .auth .steps li {
        gap: 6px;
        font-size: 13px;
    }
    .auth .steps li + li::before {
        width: 22px;
    }
    .auth .steps .n {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .auth .steps + form h1 {
        margin-top: 16px;
    }
    .auth .acct {
        gap: 10px;
        margin: 0 0 14px;
        padding: 10px 14px;
        border-radius: 14px;
    }
    .auth .acct .ic {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .auth .acct b {
        font-size: 17px;
    }
}

/* มือถือจอแคบมาก (≤ 359px เช่น iPhone SE รุ่นแรก) : ขอบ / ช่องว่างแคบลง + ข้อความตัวอย่างในช่องกรอก 14px ให้เห็นครบ (ตัวอักษรที่พิมพ์ยัง 16px : iPhone ไม่ซูม) */
@media screen and (max-width: 359px) {
    .auth .auth-wrap {
        width: calc(100% - 16px);
    }
    .auth .brand {
        padding: 12px 14px;
    }
    .auth .card {
        padding: 16px 14px;
    }
    .auth .input-pill {
        padding: 0 14px;
    }
    .auth .input-pill input::placeholder {
        font-size: 14px;
    }
    .auth .steps {
        gap: 5px;
    }
    .auth .steps li {
        font-size: 12px;
    }
    .auth .steps li + li::before {
        width: 12px;
    }
}