/* ============================================================
   หน้า Login / Signup แบบการ์ดเลื่อนสลับ (สไตล์ Neumorphism สีครีม)
   ใช้กับ login.html (มีทั้งเข้าสู่ระบบ+สมัครสมาชิกในการ์ดเดียว)
   และ forgot-password.html / reset-password.html (การ์ดเดี่ยว)
   ============================================================ */

:root{
    --bg:#f1efe8;
    --card:#f4f2eb;
    --field:#ebe9e1;
    --ink:#1c2438;
    --ink-soft:#6b7280;
    --navy:#4a5fc9;          /* blue-600 ของโปรเจค (ชื่อตัวแปรเดิมคงไว้) */
    --navy-hover:#3a4bb0;    /* blue-700 */
    --accent:#4a5fc9;
    --gold:#e8cf7c;
    --red:#d64545;
    --green:#1f9d63;
    --sh-dark:rgba(183,178,160,.55);
    --sh-light:rgba(255,255,255,.95);
    --ease:cubic-bezier(.65,.05,.25,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:22px; padding:28px 16px;
    background:var(--bg);
    font-family:"Kanit","Noto Sans Thai","Sarabun","Segoe UI",system-ui,sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------------- การ์ดหลัก ---------------- */
.auth-card{
    position:relative; overflow:hidden;
    width:min(960px,100%); height:700px;
    background:var(--card);
    border-radius:26px;
    box-shadow:22px 22px 50px var(--sh-dark), -16px -16px 40px var(--sh-light);
}

.form-pane{
    position:absolute; top:0; bottom:0; width:50%;
    display:flex; flex-direction:column; justify-content:center;
    padding:0 56px;
    opacity:0; visibility:hidden; transform:translate3d(0,10px,0);
    transition:opacity .22s ease, transform .3s ease, visibility 0s linear .22s;
    will-change:opacity, transform;
}
.form-pane.pane-login{ left:0; }
.form-pane.pane-signup{ right:0; }

.mode-login  .pane-login,
.mode-signup .pane-signup{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .45s ease .3s, transform .55s cubic-bezier(.2,.8,.2,1) .3s, visibility 0s;
}
.no-anim .form-pane, .no-anim .overlay, .no-anim .ov-content{ transition:none !important; animation:none !important; }

.pane-title{
    margin:0 0 6px; text-align:center;
    font-size:27px; font-weight:700; letter-spacing:.2px; color:#2f3a8f;
}
.pane-sub{
    margin:0 0 20px; text-align:center;
    font-size:13px; color:var(--ink-soft);
}

/* ---------------- ช่องกรอก (กดเว้าเข้า) ---------------- */
.field{ position:relative; margin-bottom:6px; }
.field input{
    width:100%; height:48px; padding:0 46px 0 18px;
    border:none; outline:none; border-radius:12px;
    background:var(--field);
    font:inherit; font-size:14.5px; color:var(--ink);
    box-shadow:inset 4px 4px 9px rgba(183,178,160,.55), inset -4px -4px 9px rgba(255,255,255,.95);
    transition:box-shadow .25s ease, transform .2s ease;
}
.field input::placeholder{ color:#9aa0ab; }
.field input:focus{
    box-shadow:inset 4px 4px 9px rgba(183,178,160,.55), inset -4px -4px 9px rgba(255,255,255,.95),
               0 0 0 2px rgba(74,95,201,.55);
}
.field input:-webkit-autofill{
    -webkit-text-fill-color:var(--ink);
    transition:background-color 99999s ease 0s;
}
.field.invalid input{ box-shadow:inset 4px 4px 9px rgba(183,178,160,.55), inset -4px -4px 9px rgba(255,255,255,.95), 0 0 0 2px rgba(214,69,69,.6); animation:shake .38s ease; }
@keyframes shake{
    0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); }
    60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); }
}
.field-error{ display:none; color:var(--red); font-size:12px; margin:2px 4px 8px; }
.field.invalid + .field-error{ display:block; }
.field:not(.invalid) + .field-error + .field{ margin-top:10px; }
.field + .field-error{ margin-bottom:0; }

.eye{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    border:none; background:none; cursor:pointer; color:#8b92a0; border-radius:50%;
    transition:color .2s, transform .2s;
}
.eye:hover{ color:var(--accent); transform:translateY(-50%) scale(1.12); }
.eye svg{ width:18px; height:18px; }

.forgot{ text-align:center; margin:12px 0 16px; }
.forgot a{ font-size:12.5px; color:var(--ink-soft); border-bottom:1px solid transparent; transition:.2s; }
.forgot a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------------- ปุ่ม ---------------- */
.btn-dark{
    display:block; width:max-content; min-width:190px; margin:12px auto 0;
    padding:0 38px; height:46px; border:none; border-radius:999px; cursor:pointer;
    background:var(--navy); color:#fff;
    font-size:13.5px; font-weight:600; letter-spacing:.8px;
    box-shadow:0 12px 24px rgba(74,95,201,.38), 0 3px 6px rgba(74,95,201,.25);
    transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-dark:hover{ background:var(--navy-hover); transform:translateY(-2px); box-shadow:0 18px 32px rgba(74,95,201,.45), 0 4px 8px rgba(74,95,201,.28); }
.btn-dark:active{ transform:translateY(0) scale(.97); }
.btn-dark:disabled{ opacity:.7; cursor:not-allowed; transform:none; }

.btn-ghost{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:170px; height:44px; padding:0 34px; border:none; border-radius:999px; cursor:pointer;
    background:var(--card); color:var(--ink);
    font-size:13.5px; font-weight:600; letter-spacing:.8px;
    box-shadow:7px 7px 16px var(--sh-dark), -6px -6px 14px var(--sh-light);
    transition:transform .18s ease, box-shadow .25s ease;
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:10px 10px 22px var(--sh-dark), -8px -8px 18px var(--sh-light); }
.btn-ghost:active{ transform:scale(.96); box-shadow:inset 4px 4px 9px var(--sh-dark), inset -4px -4px 9px var(--sh-light); }

.spinner{
    width:14px; height:14px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
    border-radius:50%; display:inline-block; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- ข้อความแจ้งเตือน ---------------- */
.alert{
    display:none; margin:0 0 12px; padding:10px 14px; border-radius:12px;
    font-size:13px; text-align:center;
}
.alert.show{ display:block; animation:rise .3s ease; }
.alert.danger{ background:#fbe9e9; color:#b13a3a; }
.alert.success{ background:#e4f5ec; color:#177a4d; }
@keyframes rise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---------------- แผงเลื่อน (overlay) ---------------- */
.overlay{
    position:absolute; top:0; bottom:0; width:50%; z-index:5; overflow:hidden;
    background:linear-gradient(180deg,#4552b0 0%,#5568c9 55%,#7186d4 100%);
    color:#fff;
    box-shadow:0 0 44px rgba(69,82,176,.38);
    left:0;
    transform:translate3d(100%,0,0);
    transition:transform .8s cubic-bezier(.76,0,.24,1);
    will-change:transform; backface-visibility:hidden;
}
.mode-login  .overlay{ transform:translate3d(100%,0,0); }   /* แผงอยู่ขวา */
.mode-signup .overlay{ transform:translate3d(0,0,0); }       /* แผงอยู่ซ้าย */

/* วงกลมตกแต่ง */
.arc{
    position:absolute; border-radius:50%; pointer-events:none;
    background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.02));
    box-shadow:inset 10px 10px 24px rgba(255,255,255,.14), inset -12px -12px 26px rgba(30,40,120,.25);
}
.arc.a1{ width:360px; height:360px; left:-170px; bottom:-130px; }
.arc.a2{ width:280px; height:280px; right:-110px; top:-120px; }
.ov-tint{
    position:absolute; right:-40px; top:-40px; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle,rgba(232,207,124,.28),transparent 70%); pointer-events:none;
}

.ov-content{
    position:absolute; inset:0; padding:0 46px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility 0s linear .2s; will-change:opacity;
}
.mode-login  .ov-to-signup,
.mode-signup .ov-to-login{
    opacity:1; visibility:visible; transition:opacity .45s ease .3s, visibility 0s;
}
.ov-logo{
    width:92px; height:92px; margin-bottom:12px; border-radius:50%;
    animation:float 5s ease-in-out infinite;
    filter:drop-shadow(0 12px 22px rgba(15,20,80,.45));
    box-shadow:0 0 0 4px rgba(255,255,255,.35);
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.ov-brand{ font-size:12px; letter-spacing:5px; color:var(--gold); margin-bottom:18px; font-weight:500; }
.ov-title{ margin:0 0 10px; font-size:27px; font-weight:700; color:#fff; text-shadow:0 3px 14px rgba(20,25,90,.3); }
.ov-text{ margin:0 0 24px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.86); max-width:270px; }

/* ปุ่มบนแผงสีน้ำเงิน: ขาวนวล ตัวอักษรน้ำเงินโปรเจค */
.overlay .btn-ghost{
    background:#fff; color:#3a4bb0;
    box-shadow:0 12px 24px rgba(15,20,80,.32), 0 3px 6px rgba(15,20,80,.18);
}
.overlay .btn-ghost:hover{ box-shadow:0 18px 32px rgba(15,20,80,.4), 0 4px 8px rgba(15,20,80,.2); }
.overlay .btn-ghost:active{ box-shadow:0 4px 10px rgba(15,20,80,.3); transform:scale(.96); }

.back-link{ font-size:13px; color:var(--ink-soft); transition:.2s; }
.back-link:hover{ color:var(--accent); transform:translateX(-3px); }

/* สวิตช์ในมือถือ (ซ่อนบนจอใหญ่) */
.m-brand, .m-switch{ display:none; }

/* ---------------- การ์ดเดี่ยว (ลืม/ตั้งรหัสผ่านใหม่) ---------------- */
.auth-card.solo{ width:min(440px,100%); height:auto; padding:40px 40px 34px; }
.auth-card.solo .solo-logo{ display:block; width:78px; height:78px; margin:0 auto 10px; animation:float 5s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(60,60,110,.25)); }
.auth-card.solo .pane-sub{ margin-bottom:18px; }
.auth-card.solo .solo-links{ text-align:center; margin-top:16px; font-size:13px; color:var(--ink-soft); }
.auth-card.solo .solo-links a{ font-weight:600; color:var(--accent); border-bottom:1px solid transparent; transition:.2s; }
.auth-card.solo .solo-links a:hover{ border-color:var(--accent); }
.auth-card.solo > *{ animation:rise .6s ease both; }

/* ---------------- จอแคบ/มือถือ ---------------- */
@media(max-width:760px){
    body{ justify-content:flex-start; padding-top:24px; }
    .auth-card{ height:auto; padding:30px 22px 26px; border-radius:22px; box-shadow:12px 12px 28px var(--sh-dark), -8px -8px 22px var(--sh-light); }
    .overlay{ display:none; }
    .form-pane{ position:static; width:100%; padding:0; display:none; opacity:1; visibility:visible; transform:none; }
    .mode-login .pane-login, .mode-signup .pane-signup{ display:flex; animation:rise .45s ease; }
    .m-brand{ display:flex; flex-direction:column; align-items:center; margin-bottom:12px; }
    .m-brand img{ width:72px; height:72px; border-radius:50%; animation:float 5s ease-in-out infinite; }
    .m-brand span{ font-size:11px; letter-spacing:4px; color:var(--ink-soft); margin-top:6px; }
    .m-switch{ display:block; text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft); }
    .m-switch a{ color:var(--accent); font-weight:700; border-bottom:1px solid var(--accent); cursor:pointer; }
    .auth-card.solo{ padding:30px 22px 26px; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01s !important; transition-duration:.01s !important; }
}


/* ============================================================
   ธีมละมุน: พื้นหลังขาว กรอบการ์ดลอยเด่น โทนฟ้า-ม่วงอ่อน
   (ซ้อนทับสไตล์ด้านบน)
   ============================================================ */
:root{
    --bg:#ffffff;
    --card:#ffffff;
    --field:#f4f6fe;
    --sh-dark:rgba(74,95,201,.16);
    --sh-light:#ffffff;
    --navy:#5b70d6;
    --navy-hover:#4a5fc9;
    --accent:#4a5fc9;
    --gold:#fff1c4;
}
body{ background:#fff; position:relative; isolation:isolate; }
body::before, body::after{
    content:""; position:fixed; z-index:-1; border-radius:50%; pointer-events:none; filter:blur(10px);
}
body::before{ width:640px; height:640px; left:-200px; top:-220px; background:radial-gradient(circle,rgba(135,150,240,.22),transparent 68%); }
body::after{ width:620px; height:620px; right:-190px; bottom:-230px; background:radial-gradient(circle,rgba(190,170,250,.26),transparent 68%); }

.auth-card{
    background:linear-gradient(180deg,#ffffff,#fafbff);
    border:1px solid rgba(99,115,214,.16);
    box-shadow:0 48px 100px -24px rgba(74,95,201,.42), 0 22px 44px -16px rgba(74,95,201,.20), 0 3px 8px rgba(74,95,201,.06);
    transition:transform .4s ease, opacity .4s ease;
}
.auth-card.leaving{ transform:scale(.97) translate3d(0,6px,0); opacity:0; }

/* ช่องกรอก: พื้นฟ้าจางๆ ขอบบาง โฟกัสแล้วสว่างขึ้น */
.field input{
    background:#f4f6fe;
    box-shadow:inset 0 0 0 1.5px #e3e8fb;
    transition:box-shadow .25s ease, background .25s ease, transform .2s ease;
}
.field input:hover{ box-shadow:inset 0 0 0 1.5px #c9d1f6; }
.field input:focus{
    background:#fff;
    box-shadow:inset 0 0 0 1.5px #5b70d6, 0 0 0 5px rgba(91,112,214,.15);
}
.field.invalid input{ background:#fff8f8; box-shadow:inset 0 0 0 1.5px #e57373, 0 0 0 5px rgba(229,115,115,.13); }
.field input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); }

.pane-title{ color:#3b4aa8; }
.pane-sub{ color:#7a819a; }

.btn-dark{
    background:linear-gradient(135deg,#5b70d6 0%,#7d86ea 55%,#9a8ff0 100%);
    box-shadow:0 16px 30px -6px rgba(105,120,225,.55), 0 3px 8px rgba(105,120,225,.25);
}
.btn-dark:hover{ background:linear-gradient(135deg,#4f65cf 0%,#7078e4 55%,#8f82ec 100%); box-shadow:0 22px 38px -8px rgba(105,120,225,.6), 0 4px 10px rgba(105,120,225,.28); }

/* แผงเลื่อน: ไล่สีพาสเทลฟ้า-ม่วง ละมุนขึ้น */
.overlay{
    background:linear-gradient(155deg,#6377dc 0%,#7f8aee 52%,#a99cf3 100%);
    box-shadow:0 0 60px rgba(120,130,235,.38);
}
.ov-tint{ width:360px; height:360px; background:radial-gradient(circle,rgba(255,226,170,.42),transparent 70%); }
.arc{
    background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
    box-shadow:inset 8px 8px 22px rgba(255,255,255,.22), inset -10px -10px 24px rgba(70,70,190,.18);
}
.ov-brand{ color:var(--gold); }
.ov-text{ color:rgba(255,255,255,.93); }
.overlay .btn-ghost{ color:#4a5fc9; }

/* โลโก้ใหม่ (สติกเกอร์โปร่งใส) ไม่ตัดเป็นวงกลม */
.ov-logo{ width:128px; height:128px; border-radius:0; box-shadow:none; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(35,45,140,.38)); }
.auth-card.solo .solo-logo{ width:92px; height:92px; filter:drop-shadow(0 10px 18px rgba(74,95,201,.30)); }
.m-brand img{ border-radius:0; width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(74,95,201,.30)); }
.m-brand span{ color:#7a819a; }
.eye:hover{ color:var(--accent); }
.back-link{ color:#7a819a; }
.alert.danger{ background:#fdecec; } .alert.success{ background:#e8f6ef; }

@media(max-width:760px){
    .auth-card{ box-shadow:0 30px 60px -20px rgba(74,95,201,.38), 0 10px 22px -10px rgba(74,95,201,.18); }
}

/* ---------- ม่านต้อนรับหลังล็อกอิน (ใช้ร่วมกันระหว่างหน้า login กับหน้าแดชบอร์ด) ---------- */
.sf-veil{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg,#6377dc 0%,#7f8aee 52%,#a99cf3 100%);
    color:#fff; text-align:center;
    clip-path:circle(150% at var(--ox,50%) var(--oy,50%));
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
    will-change:clip-path, opacity;
}
.sf-veil.grow{ clip-path:circle(0 at var(--ox,50%) var(--oy,50%)); }
.sf-veil.grow.show{ clip-path:circle(150% at var(--ox,50%) var(--oy,50%)); transition:clip-path .6s cubic-bezier(.65,.05,.25,1); }
.sf-veil.hide{ opacity:0; transform:scale(1.04); visibility:hidden; pointer-events:none; }
.sf-veil::before, .sf-veil::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.sf-veil::before{ width:520px; height:520px; left:-160px; top:-190px; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%); }
.sf-veil::after{ width:460px; height:460px; right:-140px; bottom:-170px; background:radial-gradient(circle,rgba(255,226,170,.38),transparent 70%); }
.sf-veil-box{ position:relative; display:flex; flex-direction:column; align-items:center; padding:0 24px; }
.sf-veil-box img{
    width:132px; height:132px; object-fit:contain; margin-bottom:12px;
    filter:drop-shadow(0 16px 28px rgba(35,45,140,.40));
    animation:sf-veil-pop .8s cubic-bezier(.3,1.5,.5,1) .15s both, sf-veil-float 3.6s ease-in-out .95s infinite;
}
.sf-veil-title{ font-size:26px; font-weight:700; letter-spacing:.3px; text-shadow:0 3px 14px rgba(25,35,120,.3); animation:sf-veil-rise .6s ease .4s both; }
.sf-veil-sub{ margin-top:6px; font-size:14px; color:rgba(255,255,255,.88); animation:sf-veil-rise .6s ease .55s both; }
.sf-veil-bar{ width:170px; height:4px; border-radius:99px; background:rgba(255,255,255,.28); margin-top:22px; overflow:hidden; animation:sf-veil-rise .6s ease .65s both; }
.sf-veil-bar i{ display:block; height:100%; width:45%; border-radius:99px; background:#fff; animation:sf-veil-load 1.1s ease-in-out infinite; }
@keyframes sf-veil-pop{ from{ opacity:0; transform:scale(.5) rotate(-8deg); } to{ opacity:1; transform:none; } }
@keyframes sf-veil-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes sf-veil-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes sf-veil-load{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }


/* กลับมาหน้า login หลังออกจากระบบ: การ์ดเลื่อนขึ้นมาหลังม่านจางออก */
.auth-card.arrive{ animation:card-arrive .85s cubic-bezier(.2,.8,.2,1) .35s backwards; }
@keyframes card-arrive{ from{ opacity:0; transform:translateY(28px) scale(.95); } to{ opacity:1; transform:none; } }

/* ม่านที่ "รับช่วงต่อ" จากหน้าก่อนหน้า: แสดงเนื้อหาครบทันที ไม่เล่นอนิเมชันเข้าซ้ำ (กันภาพกะพริบ) */
.sf-veil.static .sf-veil-box img,
.sf-veil.static .sf-veil-title,
.sf-veil.static .sf-veil-sub,
.sf-veil.static .sf-veil-bar{ animation:none !important; opacity:1; transform:none; }


/* ---------- มือถือ: จัดการ์ดให้อยู่กลางจอ ใหญ่ อ่านง่าย ---------- */
@media(max-width:760px){
    body{ justify-content:center; padding:20px 14px; min-height:100vh; min-height:100svh; gap:16px; }
    .auth-card{ width:min(420px,100%); padding:34px 24px 28px; border-radius:28px; }
    .m-brand{ margin-bottom:14px; }
    .m-brand img{ width:104px; height:104px; }
    .m-brand span{ margin-top:8px; }
    .auth-card input{ min-height:48px; font-size:16px; }
    .auth-card .pane-title, .auth-card h1, .auth-card h2{ font-size:26px; }
    .auth-card button[type=submit], .auth-card .btn-main{ min-height:50px; font-size:16px; }
}
@media(max-width:340px){
    body{ padding:14px 10px; }
    .auth-card{ padding:26px 16px 22px; border-radius:24px; }
    .m-brand img{ width:88px; height:88px; }
}


/* ===== ปุ่ม Google ===== */
.g-block[hidden]{ display:none; }
.g-or{ display:flex; align-items:center; gap:12px; margin:16px 0 12px; color:#8a90a8; font-size:13px; }
.g-or::before, .g-or::after{ content:""; flex:1; height:1px; background:#e3e6f2; }
.g-slot{ display:flex; justify-content:center; min-height:44px; }


/* ---------- เปลี่ยนหน้าแบบเฟดต่อเนื่อง (Chrome/Edge: cross-document view transition) ---------- */
@media (prefers-reduced-motion:no-preference){
    @view-transition{ navigation:auto; }
    ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.28s; animation-timing-function:ease; }
}


/* ===== แถวช่องกรอก 2 คอลัมน์ + ช่องเลือก (สมัครสมาชิก / ยืนยันข้อมูล) ===== */
.field-row{ display:grid; gap:10px; margin-bottom:8px; }
.field-row.r-prefix{ grid-template-columns:116px 1fr; }
.field-row.r-half{ grid-template-columns:1fr 1fr; }
.field-row .field{ margin:0; min-width:0; }
.field-row .field input{ padding-right:14px; }
.row-error{ display:none; color:var(--red); font-size:12px; margin:-2px 4px 8px; }
.row-error.show{ display:block; }
.field select{
    width:100%; height:48px; padding:0 34px 0 16px; border:none; outline:none; border-radius:12px;
    background:#f4f6fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a819a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance:none; appearance:none; cursor:pointer;
    font:inherit; font-size:14.5px; color:var(--ink);
    box-shadow:inset 0 0 0 1.5px #e3e8fb;
    transition:box-shadow .25s ease, background-color .25s ease;
}
.field select:invalid{ color:#9aa0ab; }
.field select option{ color:#2a2f45; }
.field select:hover{ box-shadow:inset 0 0 0 1.5px #c9d1f6; }
.field select:focus{ background-color:#fff; box-shadow:inset 0 0 0 1.5px #5b70d6, 0 0 0 5px rgba(91,112,214,.15); }
.field.invalid select{ background-color:#fff8f8; box-shadow:inset 0 0 0 1.5px #e57373, 0 0 0 5px rgba(229,115,115,.13); }
.pane-signup .pane-title{ margin-bottom:2px; }
.pane-signup .pane-sub{ margin-bottom:12px; }
.pane-signup .field input, .pane-signup .field select{ height:44px; }
.pane-signup .btn-dark{ margin-top:8px; }
.pane-signup .g-or{ margin:12px 0 10px; }
@media(max-width:760px){ .field-row.r-prefix{ grid-template-columns:104px 1fr; } }
@media(max-width:380px){ .field-row.r-half{ grid-template-columns:1fr; } }

/* ===== ปุ่ม Google (ทำหน้าตาเองให้เข้ากับปุ่มอื่น แล้ววางปุ่มจริงของ Google โปร่งใสทับด้านบนให้กดได้) ===== */
.g-slot{ position:relative; width:100%; height:44px; min-height:0; display:block; }
.g-fake{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
    border-radius:999px; background:#fff; color:#3b4aa8; font-size:14px; font-weight:500; letter-spacing:.2px;
    box-shadow:inset 0 0 0 1.5px #d4daf6, 0 6px 14px -8px rgba(91,112,214,.35);
    transition:background .2s ease, box-shadow .25s ease, transform .18s ease;
    pointer-events:none;
}
.g-fake svg{ width:18px; height:18px; flex:none; }
.g-slot:hover .g-fake{ background:#f7f8ff; box-shadow:inset 0 0 0 1.5px #5b70d6, 0 12px 22px -10px rgba(91,112,214,.5); transform:translateY(-1px); }
.g-slot:active .g-fake{ transform:translateY(0) scale(.985); }
.g-real{ position:absolute; inset:0; z-index:2; overflow:hidden; opacity:.01; border-radius:999px; display:flex; justify-content:center; align-items:flex-start; transform-origin:top center; transform:scaleY(1.12); cursor:pointer; }
.g-note{ margin:0 0 8px; font-size:12.5px; color:#7a819a; text-align:center; line-height:1.55; }