/* ══ ดีไซน์การ์ดเข้าสู่ระบบ — ต้นฉบับเดียว ใช้ร่วมกัน 2 ที่ ═══════════════════
   1) หน้า `/member/` (เต็มหน้าจอ)
   2) กล่องเด้ง (popup) ที่ shell.js สร้างในโหมดผู้เยี่ยมชม

   🔴 ทำไมต้องแยกเป็นไฟล์: เดิม popup เขียน CSS ของตัวเองแยก ⇒ หน้าตาไม่ตรงกับหน้า login
      และเวลาแก้ดีไซน์ต้องไล่แก้สองที่ (แก้ที่เดียวลืมอีกที่ = ได้ของสองหน้าตา)
      ตอนนี้แก้ที่นี่ที่เดียว ได้ทั้งสองที่ */

/* ══ หน้าเข้าสู่ระบบผู้เล่น — กระจกฝ้าบนพื้นแดงเลือดหมู (2026-08-26) ══════════
   อ้างอิงจากภาพที่เจ้าของส่ง (glassmorphism) แต่เปลี่ยนเป็นสีหลักของแบรนด์
   🔴 ของเดิมฮาร์ดโค้ด #191919 + การ์ดดำอมน้ำเงิน = คนละแบรนด์กับทั้งเว็บ
      และมีกฎผูกกับ data-theme แค่จุดเดียว ⇒ สลับธีมแล้วหน้ายังดำอยู่ดี
   🔴 backdrop-filter ใช้ได้ที่นี่เพราะการ์ดอยู่กลางจอ หน้าไม่เลื่อน
      (กติกา: blur เฉพาะของที่ fixed/ไม่เลื่อน — ถ้าไปใส่บนของที่เลื่อน GPU จะวาดใหม่ทุกเฟรม)
   🔴 กระจกทับพื้นแดงทำให้ "สีจาง" (เคยเจอตอนทำหัวเว็บ วัดได้ว่าความอิ่มสีหาย 35%)
      ⇒ ต้องมี saturate() ชดเชย ไม่ใช่แค่ blur */
:root {
  --lg-ink:#FFF3EC;        /* ตัวหนังสือหลักบนกระจก */
  --lg-mute:#F2C9BE;       /* ตัวหนังสือรอง */
  --lg-gold:#E8BE55;
  --lg-gold-lite:#F7D774;

  /* 🔴 วัดจากคลิปอ้างอิงแล้วพบว่า "ความซิลกี้" ไม่ได้มาจากความสว่าง:
       ความสว่างของเขา 214-238 (ต่างกันแค่ 1.1 เท่า) · อิ่มสี 0.05-0.17 (ต่ำมาก)
       แต่ **เฉดสีไล่ข้ามจอจาก 19° (พีช) ไป 196-207° (ฟ้า)** = คนละตระกูลสีมาเจอกัน
     ⇒ กุญแจคือ "ไล่เฉดสีทแยงจอ" ไม่ใช่ไล่ความสว่าง
     ของเราใช้สีแบรนด์: แดงชาด ~355° → ทองอำพัน ~40° (เดินทาง 45°)
     ไม่ไปถึง 180° แบบเขาเพราะฝั่งตรงข้ามแดงคือฟ้าเขียว = หลุดแบรนด์ */
  --lg-bg:
    /* ฝั่งซ้ายบน — แดงชาด */
    radial-gradient(1200px 900px at 8% 2%,   rgba(148,42,52,.62), transparent 62%),
    /* ฝั่งขวาล่าง — ทองอำพัน (ปลายทางของการไล่เฉด) */
    radial-gradient(1150px 880px at 96% 98%, rgba(190,124,64,.58), transparent 64%),
    /* จุดเชื่อมกลาง — โรสอมน้ำตาล ให้สองฝั่งกลืนกันไม่เห็นรอยต่อ */
    radial-gradient(980px 820px at 54% 56%,  rgba(150,72,66,.42), transparent 66%),
    /* มุมตรงข้ามเข้มลง ให้มีน้ำหนัก ไม่แบน */
    radial-gradient(820px 820px at 96% 4%,   rgba(48,20,26,.50), transparent 70%),
    radial-gradient(760px 760px at 4% 96%,   rgba(44,18,24,.46), transparent 72%),
    linear-gradient(152deg,#3C1A20 0%,#4A2226 46%,#3A1E1C 100%);
}

/* พื้นหลังไล่เฉด — ใช้ได้ทั้ง body ของหน้า login และฉากหลังของกล่องเด้ง
   🔴 กล่องเด้ง **ต้อง** มีชั้นนี้ด้วย: การ์ดเป็นกระจก (backdrop-filter) มันดูดสีของ
      สิ่งที่อยู่ข้างหลังมาเบลอ — ถ้าข้างหลังเป็นหน้าล็อบบี้โทนสว่าง กระจกจะออกมา
      "ชมพูซีด" ไม่ใช่แดงเลือดหมูแบบหน้า login (อาการที่เจ้าของเห็นแล้วบอกว่าไม่สวย) */
.lg-bg { background:var(--lg-bg); background-attachment:fixed; }

/* ── หัวแบรนด์ (แทนอีโมจิ 💛 เดิม ที่หน้าตาต่างกันทุกระบบปฏิบัติการ) ── */
/* กลุ่มแบรนด์ที่ย้ายเข้ามาในการ์ด — ย่อลงจากตอนลอยอยู่ข้างนอก
   เพราะในกรอบมีที่จำกัด ถ้าใหญ่เท่าเดิมจะเบียดจนอึดอัด */
/* เหลือแค่ตรา (ชื่อแบรนด์ถูกเอาออกแล้ว) ⇒ ลดระยะห่างลง ไม่งั้นจะโหว่ */
.lc-brand {text-align:center; margin:0 0 14px}

.lc-brand .mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:20px; margin-bottom:12px;
  background:linear-gradient(160deg,#F7D774,#C39428 62%,#8A5F14);
  box-shadow:0 10px 26px -10px rgba(12,0,2,.9), inset 0 1px 0 rgba(255,253,244,.6);
  font:800 27px/1 var(--num,ui-monospace,Menlo,monospace); color:#4A0206;
}

/* ย่อขนาดลงจากตอนที่ลอยอยู่นอกการ์ด — ในกรอบมีที่จำกัด ถ้าใหญ่เท่าเดิมจะเบียดจนอึดอัด
   🔴 ต้องเขียน "หลัง" กฎขนาดเดิม ไม่งั้นโดนทับ (specificity เท่ากัน ตัวหลังชนะ) */
.lc-brand .mark {width:52px;height:52px;border-radius:17px;margin-bottom:0;font-size:25px}
/* ── การ์ดกระจก ── */
/* ══ กรอบซ้อนกรอบ (double-bezel) ══════════════════════════════════════════
   ทำตามที่วัดจากคลิปอ้างอิง — สแกนความสว่างตัดขวางขอบการ์ดได้โครงนี้:
     พื้นหลัง 99 → มืดลงเหลือ 82 ตลอด ~21px  = เงาทอดกว้างนุ่ม (ไม่ใช่เงาคม)
     กระโดดเป็น ~127                          = เปลือกนอก (สว่างกว่าพื้น ~+24)
     เปลือกนอกกว้าง ~39px ในภาพ 1080px         = padding ราว 14px จริง
     กระโดดอีกเป็น ~147                        = แผ่นใน (สว่างกว่าเปลือก ~+20)
   ⇒ กติกา: แต่ละชั้นสว่างขึ้นราว +20 · เงาเป็นวงกว้าง · ขอบแต่ละชั้นเป็นเส้นบางรับแสง
   🔴 รัศมีต้องร่วมศูนย์: รัศมีนอก = รัศมีใน + padding (34 = 20 + 14)
      ถ้าไม่ทำ มุมในกับมุมนอกจะโค้งคนละจังหวะ เห็นเป็นขอบบิดทันที */
.login-card {
  width:100%; padding:13px; border-radius:32px;
  /* 🔴 ไม่มีขอบแล้ว — ตัวที่บอกขอบเขตการ์ดคือ "เงาดำ" อย่างเดียว
     ⇒ เงาต้องแรงพอที่จะทำหน้าที่แทนเส้นขอบ ไม่งั้นการ์ดจะหายไปกับพื้น
     ใช้ 4 ชั้น: ชิดตัว → ใกล้ → กลาง → ไกล ให้ไล่ความเข้มต่อเนื่อง ไม่เห็นรอยตัด */
  background:linear-gradient(152deg, rgba(255,246,240,.045) 0%, rgba(255,228,204,.018) 46%, rgba(255,244,236,.036) 100%);
  backdrop-filter:blur(44px) saturate(145%);
  -webkit-backdrop-filter:blur(44px) saturate(145%);
  border:0;
  box-shadow:
    0 1px 3px rgba(6,0,1,.42),
    0 8px 18px -6px rgba(6,0,1,.46),
    0 26px 52px -18px rgba(6,0,1,.60),
    0 62px 120px -36px rgba(4,0,1,.78);
  color:var(--lg-ink);
  position:relative; overflow:hidden;
}

/* แสงวูบมุมบนซ้าย — ตัวบอกว่าเป็นแผ่นกระจกรับแสง */
.login-card::before {
  content:''; position:absolute; left:-30%; top:-70%; width:90%; height:150%;
  background:linear-gradient(112deg, rgba(255,248,238,.14) 0%, rgba(255,248,238,.04) 42%, transparent 70%);
  transform:rotate(-14deg); pointer-events:none;
}

.login-card > * {position:relative}

/* แผ่นใน — ชั้นที่สองของกรอบ สว่างขึ้นอีกขั้น มีขอบและไฮไลต์ของตัวเอง */
.lc-in {
  border-radius:19px;                              /* = 32 - 13 (padding) */
  padding:26px 24px 22px;
  /* โปร่งใสตามที่เจ้าของสั่ง — ไม่มีทั้งพื้น ขอบ และเงา
     เหลือหน้าที่เดียวคือคุมระยะขอบใน (padding) */
  background:transparent;
  border:0;
  box-shadow:none;
}

.login-card .sub {
  margin:0 0 22px; text-align:center; font-size:22px; font-weight:700;
  letter-spacing:.02em; color:var(--lg-ink)}

/* ══ ช่องกรอกแบบแคปซูล + ชิปไอคอนกลมข้างใน ═══════════════════════════════
   ลายเซ็นของงานอ้างอิง: ช่องเป็นแคปซูลกลมทั้งช่อง และมีไอคอนอยู่ใน "วงกลมเล็ก"
   ชิดซ้ายในช่อง ไม่ใช่ไอคอนลอยเปล่าๆ
   🔴 วาด SVG ในไฟล์ ไม่ดึงจาก CDN — เว็บนี้ไม่ควรพึ่งโดเมนนอก
      (เน็ตผู้เล่นตัด = ไอคอนหายทั้งหน้า) */
.login-card .field {margin-bottom:16px; position:relative}

.login-card .field .fi {
  position:absolute; left:7px; top:50%; transform:translateY(-50%);
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  /* 🔴 เอาพื้น (และวงแหวน) ออกตามที่เจ้าของสั่ง — เหลือแค่ตัวไอคอนลอยอยู่
     ⇒ ตอนโฟกัสจึงเปลี่ยนเป็น "สีไอคอน" แทนการเติมสีวงกลม (ไม่มีวงกลมให้เติมแล้ว) */
  background:none; box-shadow:none;
  /* 🔴 สีไอคอน = สีเดียวกับ placeholder เป๊ะ (ตามที่เจ้าของสั่ง)
     ผูกไว้ที่ตัวแปรเดียวกัน จะได้ไม่หลุดกันเวลาแก้ทีหลัง */
  color:rgba(242,201,190,.5); pointer-events:none; z-index:2;
  transition:color .18s, background .18s, box-shadow .18s;
}

.login-card .field:focus-within .fi { color:#F7D774; }

.login-card input {
  /* 🔴 ข้อความในช่องอยู่กึ่งกลางตามที่เจ้าของสั่ง
     ต้องทำ padding ซ้าย-ขวาให้ "เท่ากัน" ด้วย ไม่งั้น text-align:center
     จะเอากึ่งกลางของ "กล่องข้อความ" ซึ่งเบี้ยวไปทางขวา เพราะซ้ายเว้นที่ให้ชิปไอคอน 45px
     ⇒ เว้นขวาเท่ากัน 45px แล้วชิป/ปุ่มตาวางทับด้วย position:absolute (ไม่กินที่) */
  width:100%; padding:13px 45px; border-radius:999px; text-align:center;
  /* โปร่งใสตามที่เจ้าของสั่ง — ตัวที่บอกว่า "ตรงนี้คือช่องกรอก" เหลือแค่ขอบ
     🔴 ขอบจึงต้องชัดขึ้นกว่าเดิม ไม่งั้นผู้เล่นจะไม่รู้ว่าต้องพิมพ์ตรงไหน */
  background:transparent;
  border:1px solid rgba(255,232,206,.42);
  color:var(--lg-ink); font-size:17.5px; font-family:inherit;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.34), inset 0 -1px 0 rgba(255,240,220,.07);
  transition:border-color .18s, box-shadow .18s, background .18s;
}

.login-card input::placeholder {color:rgba(242,201,190,.5)}

.login-card input:focus {
  outline:none; background:rgba(26,0,3,.44);
  border-color:var(--lg-gold);
  box-shadow:0 0 0 3px rgba(232,190,85,.24), inset 0 1px 3px rgba(0,0,0,.4)}

.login-card .pw-wrap {position:relative; display:block}

.login-card .pw-eye {position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:var(--lg-mute); opacity:.8;
  padding:7px; display:flex; align-items:center; border-radius:9px}

.login-card .pw-eye:hover {opacity:1; color:var(--lg-gold-lite)}

.login-card .pw-eye:focus-visible {outline:2px solid var(--lg-gold); outline-offset:2px}

.login-card .pw-eye svg {display:block}

/* ── แถวจำฉันไว้ / ลืมรหัสผ่าน ── */
/* เหลือรายการเดียวหลังเอา "ลืมรหัสผ่าน?" ออก ⇒ จัดกึ่งกลางแทน space-between
   (ไม่งั้นจะค้างชิดซ้ายดูเหมือนลืมจัด) */
.login-card .row-aux {display:flex; align-items:center; justify-content:center;
  gap:12px; margin:-2px 0 20px; font-size:15px}

.login-card .rm {display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--lg-mute)}

.login-card .rm input {width:16px; height:16px; margin:0; accent-color:var(--lg-gold); cursor:pointer}

/* ── ปุ่มเข้าสู่ระบบ — กระจกเคลือบทอง (ตามภาพอ้างอิงที่ปุ่มก็เป็นกระจก) ── */
.login-card .btn {
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; padding:15px 16px; border-radius:16px; cursor:pointer;
  /* 🔴 เดิมเขียน `font:800 16px/1.4 inherit` — **CSS ไม่ยอมรับ**
     ใน shorthand `font:` ช่องท้ายคือ "ชื่อฟอนต์" จะใส่คีย์เวิร์ด inherit ไม่ได้
     ⇒ เบราว์เซอร์ทิ้งทั้งบรรทัดเงียบๆ ⇒ ปุ่มตกไปใช้ฟอนต์ปริยาย (วัดได้ = Arial)
        ทั้งที่ทั้งเว็บใช้ LottoNum/Anuphan ⇒ ปุ่มเดียวที่ฟอนต์ผิดทั้งหน้า
     ⇒ ต้องเขียนแยกทีละ property (longhand) เท่านั้น */
  font-family:inherit; font-weight:800; font-size:16px; line-height:1.4;
  letter-spacing:.04em;
  color:#FFFFFF;
  /* 🔴 2026-09-16 เจ้าสั่ง: ยกลุคปุ่ม .out.is-login (หัวเว็บ) = ริง conic เขียววิ่ง + หน้าเขียวเงา
     ใช้ --brc-a/brc-spin เดิมของไฟล์นี้ (inherits:false ⇒ แต่ละปุ่ม animate มุมของตัวเอง ไม่ชนกับ btn-reg-cta) */
  background:conic-gradient(from var(--brc-a),
    #062E29 0deg,#0C5A4F 46deg,#3FBFA8 82deg,#DCF1EC 100deg,#CDEFE6 116deg,
    #4FCBB4 140deg,#0C5A4F 196deg,#062E29 300deg,#062E29 360deg);
  animation:brc-spin 2.8s linear infinite;
  border:0;
  box-shadow:0 6px 16px -8px rgba(6,46,41,.35), 0 16px 34px -18px rgba(4,30,26,.4);
  transition:transform .14s cubic-bezier(.32,.72,0,1), box-shadow .2s, filter .2s;
}
/* 🔴 2026-09-16 หน้าปุ่มเขียวเงา (double-bezel) — inset 3px ให้ร่องริง conic วิ่งกว้างเท่า .btn-reg-cta · z-index:-1 กันทับตัวหนังสือ */
.login-card .btn::before{  /* 🔴 2026-09-16 สลับ v2: พื้นกลางปุ่ม = เทียลเข้ม (ริงวิ่งขอบยังมิ้นจาง) */
  content:''; position:absolute; inset:3px; border-radius:13px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg,#127C6E 0%,#0F6E60 16%,#0C5A4F 46%,#0A4A41 78%,#083C35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 0 rgba(4,42,38,.45),
    inset 0 0 18px rgba(63,191,168,.22);
}
/* แสงวาดผ่านตอนเอาเมาส์ไปวาง — ตัวที่ทำให้ดู "มีชีวิต" (คงไว้ เสริมความมีชีวิตบนพื้นเขียว) */
.login-card .btn::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 28%, rgba(255,255,255,.42) 46%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .62s cubic-bezier(.32,.72,0,1);
}

.login-card .btn:hover::after {transform:translateX(120%)}
/* 🔴 2026-09-16 hover/active ให้ตรงกับ .btn-reg-cta (กด translateY 1px) — ปุ่มเข้มนี้ hover สว่างขึ้น+saturate
      🧹 ลบกฎ :hover/:active ซ้ำ + เศษเงาน้ำตาลทองยุคเก่า (rgba(96,56,4)) ที่ค้างและโดน override */
.login-card .btn:hover {filter:brightness(1.06) saturate(1.05)}
.login-card .btn:active {transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  .login-card .btn, .login-card .btn::after {transition:none}
  .login-card .btn {animation:none; background:linear-gradient(135deg,#0A4A41,#0C5A4F 45%,#127C6E)}
  .login-card .btn:hover::after {transform:translateX(-120%)}
}

.login-card .btn:focus-visible {outline:2px solid #5FD6C0; outline-offset:3px}

.login-card .btn[disabled] {opacity:.7; cursor:progress}

.login-card .err-box {display:none; margin:0 0 16px; padding:11px 13px; border-radius:12px;
  font-size:15.5px; line-height:1.6; color:#FFE7E0;
  background:rgba(120,10,14,.5); border:1px solid rgba(255,140,120,.34)}

/* ── ปุ่มรอง (secondary/ghost) — "สมัครสมาชิก" / "เข้าสู่ระบบ" สลับหน้า ──────────
   🔴 โปร่ง+ขอบบาง ตั้งใจให้ "น้ำหนักน้อยกว่า" ปุ่มหลัก (ทอง/มิ้นเต็มใบ) — เป็นทางเลือกรอง ไม่ใช่ปุ่มที่อยากให้กดสุด
   ใช้ได้ทั้งหน้า login (ปุ่มหลัก=ทอง) และกล่องเด้ง (ปุ่มหลัก=มิ้น) เพราะ ghost เข้ากับทั้งคู่
   เป็นได้ทั้ง <a> และ <button> ⇒ ต้องรีเซ็ต text-decoration + จัดกึ่งกลางเอง */
.login-card .btn-2 {
  display:block; width:100%; margin-top:12px; padding:13px 16px;
  border-radius:16px; text-align:center; text-decoration:none; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:15.5px; letter-spacing:.02em; line-height:1.4;
  color:var(--lg-gold-lite);
  background:transparent;
  border:1px solid rgba(232,190,85,.42);
  box-shadow:inset 0 1px 0 rgba(255,247,214,.12);
  transition:background .18s, border-color .18s, color .18s, transform .14s;
}
.login-card .btn-2:hover {background:rgba(232,190,85,.12); border-color:var(--lg-gold); color:#FFF0BE}
.login-card .btn-2:active {transform:translateY(1px)}
.login-card .btn-2:focus-visible {outline:2px solid var(--lg-gold); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.login-card .btn-2 {transition:none}}

/* ══ ธีมสว่าง — ของเดิมมีกฎผูกกับธีมแค่จุดเดียว สลับแล้วหน้ายังดำ ══════════ */
/* 🔴 วัดแล้ว: ของเดิมพื้นหลังธีมสว่าง "ความอิ่มสี 0.06" = แทบไม่มีสีเลย
   ต้นแบบอยู่ที่ ~0.50 ⇒ ต่อให้การ์ดโปร่งแค่ไหนก็ไม่มีสีให้มองทะลุ
   ⇒ ใส่สีจริงเข้าไป (กุหลาบ/พีช/ทอง) ให้อิ่มสีขึ้นมาราว 0.25-0.35
      ไม่ดันไปถึง 0.50 เพราะธีมสว่างที่อิ่มสีขนาดนั้นจะกลายเป็นฉูดฉาด
      และพื้นสว่างจัดจะกินคอนทราสต์ตัวหนังสือ */
/* ธีมสว่าง — ใช้ตัวเลขของคลิปอ้างอิงตรงๆ (ความสว่าง 214-238 · อิ่มสี .10-.17)
   ต่างแค่ปลายทางของการไล่เฉด: ของเขาไปฟ้า 196° · ของเราไปทอง 42° (สีแบรนด์) */
:root[data-theme="light"] {
  --lg-bg:
    radial-gradient(1200px 900px at 6% 2%,   rgba(246,206,192,.92), transparent 64%),
    radial-gradient(1150px 880px at 97% 97%, rgba(247,219,168,.88), transparent 66%),
    radial-gradient(980px 820px at 52% 58%,  rgba(248,214,196,.62), transparent 68%),
    radial-gradient(760px 700px at 96% 6%,   rgba(240,196,186,.55), transparent 70%),
    linear-gradient(152deg,#FBEAE2 0%,#F8E2D2 48%,#FAEDDD 100%);
}
/* 🔴 ลบ `:root[data-theme="light"] body::before{...}` ทิ้ง — โค้ดตาย:
   ไม่มีใครนิยาม body::before ไว้เลยทั้งโปรเจกต์ (ไม่มี content: ⇒ ไม่เคยวาด)
   มันไปตั้ง opacity/filter ให้ของที่ไม่มีอยู่จริง */
/* 🔴 เดิม rgba(255,255,255,.72) = ขาวทึบ 72% ⇒ ฟอกสีข้างในเหลืออิ่มสี 0.01
   ต้นแบบ "สีข้างในการ์ดเกือบเท่าข้างนอก" (0.44 vs 0.53) = โปร่งจริง
   ⇒ ลดเหลือ ~1/3 แล้วให้ขอบสว่าง + เงา เป็นตัวบอกขอบเขตการ์ดแทน */
:root[data-theme="light"] .login-card {
  background:linear-gradient(152deg, rgba(255,255,255,.14) 0%, rgba(255,250,246,.07) 48%, rgba(255,255,255,.12) 100%);
  border:0;
  box-shadow:
    0 1px 3px rgba(110,26,22,.16),
    0 8px 18px -6px rgba(110,26,22,.20),
    0 26px 52px -18px rgba(110,26,22,.26),
    0 62px 120px -36px rgba(110,26,22,.34);
  color:#33090C;
}

:root[data-theme="light"] .lc-in {
  background:transparent; border:0; box-shadow:none;
}

:root[data-theme="light"] .login-card .sub {color:#33090C}

:root[data-theme="light"] .login-card input {
  background:transparent; border-color:rgba(150,20,26,.34); color:#33090C;
  box-shadow:inset 0 1px 3px rgba(122,8,16,.1)}

:root[data-theme="light"] .login-card input::placeholder {color:#9A6560}
/* 🔴 กฎธีมสว่างของชิปไอคอน — รอบก่อนใส่ไม่ติด (replace ไม่ match แล้วไม่มี assert
   เลยล้มเหลวเงียบ) ผลคือธีมสว่างใช้สีของธีมมืดมาตลอด ตรวจเจอตอนวัดสีเทียบ placeholder */
:root[data-theme="light"] .login-card .field .fi {
  color:#9A6560;                                   /* = สี placeholder ธีมสว่างเป๊ะ */
  background:none; box-shadow:none;
}

:root[data-theme="light"] .login-card .field:focus-within .fi { color:#8A5F14; }

:root[data-theme="light"] .login-card input:focus {
  border-color:#B8891F; box-shadow:0 0 0 3px rgba(184,137,31,.2), inset 0 1px 3px rgba(122,8,16,.1)}

:root[data-theme="light"] .login-card .rm {color:#7E4A45}

:root[data-theme="light"] .login-card .pw-eye {color:#7E4A45}

:root[data-theme="light"] .login-card .err-box {background:rgba(255,235,232,.92); border-color:rgba(150,20,26,.3); color:#7A0810}

/* ปุ่มรองธีมสว่าง — ทองน้ำตาลเข้มให้คอนทราสต์พอบนกระจกพีชอ่อน (วัด ≥4.5:1) */
:root[data-theme="light"] .login-card .btn-2 {color:#6B4A10; border-color:rgba(150,20,26,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
:root[data-theme="light"] .login-card .btn-2:hover {background:rgba(184,137,31,.12); border-color:#B8891F; color:#4A3308}

@media (prefers-reduced-motion:reduce){.login-card .btn {transition:none} }
@media (max-width:520px){
  /* ย่อทั้งคู่ให้ยังร่วมศูนย์: 26 = 16 + 10 */
.login-card {padding:9px; border-radius:25px}

.lc-in {padding:22px 18px 20px; border-radius:16px}

.lc-brand .mark {width:54px;height:54px;border-radius:17px;font-size:26px}
}

/* ══ สลับ เข้าสู่ระบบ ↔ สมัครสมาชิก บนการ์ดเดียว (สไลด์) ═══════════════════════
   ที่มา: ไอเดียจากคลิป "responsive login/signup with sliding animation"
   (Code With Nazia) — ต้นฉบับใช้ checkbox :checked สไลด์แนวตั้ง ไม่มี JS เลย
   ปรับให้เข้าการ์ดกระจกทรงแคบ mobile-first: **สไลด์แนวนอน + แถบสลับ (segmented)
   พิลทองเลื่อน** ตามพิลของแบรนด์
   🔴 radio 2 ตัว = "แหล่งสถานะเดียว" (กด <label> สลับได้) → CSS ขับ "ภาพ" ล้วน
      (พิลเลื่อน + รางสไลด์) ⇒ ยังเห็นสไลด์แม้ JS ช้า/พัง
      JS เติมแค่ 3 อย่าง: ความสูงลื่น · inert แผงที่ซ่อน (กัน Tab หลุดเข้าไป) · โฟกัส
   ทั้งหน้า /member/ และกล่องเด้งใน shell.js ใช้บล็อกนี้ร่วมกัน (ไฟล์ดีไซน์เดียว) */
.login-card .mode-in {position:absolute; width:1px; height:1px; opacity:0; margin:0}

/* แถบสลับ 2 แท็บ + พิลทองที่เลื่อนตามโหมด */
.login-card .seg {position:relative; display:grid; grid-template-columns:1fr 1fr;
  margin:2px 0 20px; padding:5px; border-radius:999px;
  background:rgba(6,30,26,.18); border:1px solid rgba(12,90,79,.30);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
/* 🔴 2026-09-16 พิลเลื่อน = "พื้นหลัง" ของแท็บ active → ยกให้เท่าหน้าปุ่ม .btn (หน้าเขียวเงา)
      ค่าเริ่มต้น = โหมด login (พิลซ้าย เขียว) · เลื่อนไปโหมดสมัคร ทับด้วยมิ้น (rule .mode-reg ข้างล่าง) */
.login-card .seg-pill {position:absolute; z-index:0; top:5px; left:5px;
  width:calc(50% - 5px); height:calc(100% - 10px); border-radius:999px;
  background:linear-gradient(180deg,#127C6E 0%,#0F6E60 16%,#0C5A4F 46%,#0A4A41 78%,#083C35 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(4,42,38,.45), 0 4px 12px -4px rgba(6,46,41,.5);
  transition:transform .5s cubic-bezier(.32,.72,0,1)}
.login-card .seg-tab {position:relative; z-index:1; text-align:center; cursor:pointer; -webkit-user-select:none; user-select:none;
  padding:11px 8px; border-radius:999px;
  font-family:inherit; font-weight:700; font-size:15.5px; letter-spacing:.02em;
  color:var(--lg-mute); transition:color .3s}
/* 🔴 2026-09-16 เจ้าสั่ง: ฟอนต์แท็บ "สมัครสมาชิก" (ตอน "ไม่ active" = ที่เห็นบนหน้า login) = #DCF1EC มิ้นอ่อน
      เจตนา = ให้ "จางๆ" เป็นตัวเลือกรอง (login เด่นกว่าด้วยพิลเขียวทึบ)
      ⚠️ ตอน active (บนพิลมิ้น หน้า register) ใช้ #0C5A4F แทน (กฎ .mode-reg ข้างล่าง specificity สูงกว่า) — มิ้นบนมิ้นจะมองไม่เห็น */
.login-card .seg-tab.tab-reg {color:#0C5A4F}

/* หน้าต่างสไลด์ + รางสองแผง (login | สมัคร) */
.login-card .slide-viewport {overflow:hidden; transition:height .5s cubic-bezier(.32,.72,0,1)}
/* 🔴 align-items:flex-start = ห้าม flex ยืดแผงเตี้ยให้สูงเท่าแผงสูง ไม่งั้น offsetHeight
      ของแผง login (เตี้ยกว่า) จะเท่าแผงสมัคร → JS วัดความสูงผิด เกิดช่องว่างใต้ปุ่ม */
.login-card .slide-track {display:flex; align-items:flex-start; width:200%; transition:transform .5s cubic-bezier(.32,.72,0,1)}
/* 🔴 padding ข้าง 5px = กันวงแหวนโฟกัส (box-shadow 3px) ของช่องกรอกริมสุดถูก
      overflow:hidden ของ viewport ตัดหาย */
.login-card .slide-panel {flex:0 0 50%; width:50%; padding:0 5px}

/* สถานะ: login (ค่าเริ่มต้น) = พิลซ้าย · สมัคร = พิลขวา + รางเลื่อนไปแผงสอง
   🔴 ผูกด้วย "คลาส" (.mode-login/.mode-reg/.tab-login/.tab-reg) ไม่ใช่ id — เพราะ
      กล่องเด้งใน shell.js เป็นอีก instance บนหน้าเดียวกันได้ (id ซ้ำ = พัง) */
.login-card .mode-login:checked ~ .seg .tab-login {color:#FFFFFF}
/* 🔴 โหมดสมัคร: พิลเลื่อนขวา + เปลี่ยนเป็นหน้ามิ้น เข้ากับปุ่ม .btn-reg-cta (พื้นมิ้น) */
.login-card .mode-reg:checked ~ .seg .seg-pill {transform:translateX(100%);
  background:linear-gradient(180deg,#EAF7F3 0%,#DCF1EC 40%,#CBE8E0 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(12,90,79,.18), 0 4px 12px -4px rgba(6,46,41,.35)}
.login-card .mode-reg:checked ~ .seg .tab-reg {color:#0C5A4F}
.login-card .mode-reg:checked ~ .slide-viewport .slide-track {transform:translateX(-50%)}
/* คีย์บอร์ด: radio ซ่อนอยู่แต่ยังโฟกัส/ลูกศรสลับได้ → โชว์วงแหวนที่แท็บ */
.login-card .mode-login:focus-visible ~ .seg .tab-login,
.login-card .mode-reg:focus-visible ~ .seg .tab-reg {outline:2px solid #5FD6C0; outline-offset:2px}

/* ปุ่มสลับโหมดด้านล่างเป็น <label> → ต้องเต็มบล็อกเหมือนปุ่มรองเดิม */
.login-card label.btn-2 {display:block}

.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ธีมสว่าง — แถบสลับ (แท็บที่ถูกเลือกเป็นดำอยู่แล้วเพราะพิลทอง ไม่ต้อง override) */
:root[data-theme="light"] .login-card .seg {background:rgba(150,20,26,.06); border-color:rgba(150,20,26,.18)}
:root[data-theme="light"] .login-card .seg-tab {color:#7E4A45}
/* 🔴 2026-09-16 fix: light-theme .seg-tab (0,4,0) ทับ .tab-reg (0,3,0) → tab-reg เป็นน้ำตาลแดงแทน #DCF1EC
   กฎนี้ (0,5,0) เจาะจง tab-reg ชนะกลับ ในธีมสว่าง */
:root[data-theme="light"] .login-card .seg-tab.tab-reg {color:#0C5A4F}

@media (prefers-reduced-motion:reduce){
  .login-card .seg-pill, .login-card .slide-track, .login-card .slide-viewport {transition:none}
}

/* ══ ปุ่ม "สมัครสมาชิก" (btn-2.btn-reg-cta) — เจ้าของสั่ง 2026-09-11 (รูปที่ 1 + 2) · v2 double-bezel ═══
   ⚠️ ทับ "มิ้นแบน" 2026-09-10 · โจทย์: กระจกทองเงา (รูป 2) + กรอบไฟวิ่งเรืองแสง (รูป 1) สีเดิมของเว็บ
   🔴 v1 (ทอง-บน-ทอง) แสงวิ่งจม เพราะกรอบทองกับพื้นทองคอนทราสต์ต่ำ ⇒ ไม่เด้งเหมือนต้นฉบับ
   ⇒ v2 ใช้เทคนิค "double-bezel" (ถาดขอบซ้อนแกน · จาก skill high-end-visual-design):
      • ตัว <a> = "ถาดขอบมืด" พื้น conic หมุน (ดำ→ทองสว่างจัด→ดำ) = ร่องไฟวิ่งคอนทราสต์สูง → แสงเด้ง (รูป 1)
      • ::before = "แกนทองเงา" inset 3px (มุมมนกว่า = concentric) ไล่ 5 สต็อป + แถบ specular บน = ความเงา (รูป 2)
      • ตัวหนังสือลอยบนแกนทอง (::before วาดก่อน content จึงไม่บัง)
   🔴 ทุกชั้น inset ไม่ยื่นออกนอกปุ่ม + overflow:hidden → ไม่โดน .slide-viewport{overflow:hidden} ตัด
   🔴 @property --brc-a ให้ animate มุม conic ได้ · ไม่รองรับ → พื้นตกไปใช้ทองนิ่ง (ไม่พัง)
   🔴 คง specificity (0,4,0) ชนะกฎ btn-2 ธีมสว่าง (สีแบรนด์ตายตัวทั้ง 2 ธีม) */
@property --brc-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes brc-spin{ to{ --brc-a:360deg } }
:root .login-card .btn-2.btn-reg-cta{
  position:relative; border:0; overflow:hidden;
  isolation:isolate;                 /* 🔴 สร้าง stacking context → ให้ ::before(z-index:-1) มุดใต้ "ตัวหนังสือ" ได้ */
  color:#0C5A4F; -webkit-text-fill-color:#0C5A4F; /* 🔴 2026-09-16 สลับ v2: ตัวอักษรเขียวเข้ม บนพื้นมิ้นอ่อน (ริงวิ่งยังเทียลเข้มเดิม) */
  /* 🔴 2026-09-16 สลับ v2: btn-reg-cta คงริงวิ่ง "เทียลเข้ม" ไว้ที่เดิม — เปลี่ยนแค่พื้นกลางเป็นมิ้น + ตัวอักษรเขียว */
  background:conic-gradient(from var(--brc-a),
    #062E29 0deg,#0C5A4F 46deg,#3FBFA8 82deg,#DCF1EC 100deg,#CDEFE6 116deg,
    #4FCBB4 140deg,#0C5A4F 196deg,#062E29 300deg,#062E29 360deg);
  animation:brc-spin 2.8s linear infinite;
  box-shadow:0 6px 16px -8px rgba(6,46,41,.35), 0 16px 34px -18px rgba(4,30,26,.4);
}
/* แกนทองเงา (inset 3px = ร่องไฟกว้าง 3px) — ความเงารูปที่ 2
   🔴 ::before เป็น position:absolute = "positioned" → ตามกฎ paint order มันวาด "ทับ" inline text (ตัวหนังสือ)
      แก้ด้วย z-index:-1 + isolation:isolate ที่ตัวปุ่ม ⇒ แกนไปอยู่ใต้ตัวหนังสือ (แต่ยังทับพื้น conic = โชว์แกนทอง) */
:root .login-card .btn-2.btn-reg-cta::before{  /* 🔴 2026-09-16 สลับ v2: พื้นกลางปุ่ม = มิ้นอ่อน (ริงวิ่งขอบยังเทียลเข้ม) */
  content:''; position:absolute; inset:3px; border-radius:13px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 52%),  /* specular บน */
    linear-gradient(180deg,#EAF7F3 0%,#DCF1EC 40%,#CBE8E0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(12,90,79,.18),
    inset 0 0 18px rgba(63,191,168,.14);
}
:root .login-card .btn-2.btn-reg-cta:hover{ filter:brightness(1.06) saturate(1.05); }
:root .login-card .btn-2.btn-reg-cta:active{ transform:translateY(1px); }
@media(prefers-reduced-motion:reduce){
  :root .login-card .btn-2.btn-reg-cta{
    animation:none;
    background:linear-gradient(135deg,#0A4A41,#0C5A4F 45%,#127C6E);   /* กรอบนิ่ง = เทียลเข้ม */
  }
}

/* ══ ปุ่ม "ย้อนกลับ/ก่อนหน้า" (btn-2.btn-back) — เจ้าของสั่ง 2026-09-10 (รูปที่ 1) ══
   "โทนอ่อนของสีเว็บ" คู่กับปุ่ม "ถัดไป" (โทนเข้ม = .login-card .btn เทียลเข้ม ใน gold-front.css)
   ⇒ พื้นมิ้นอ่อน #EAF6F3 + กรอบเทียล #147A73 (สีแบรนด์ชุดเดียวกับ btn-reg-cta) · แบน ไม่มีเงาลอย
   🔴 specificity (0,4,0) + วางท้ายไฟล์ = ชนะกฎ btn-2 ธีมสว่าง (color น้ำตาลทอง/ขอบแดง) ทั้งสองธีม
      (ขนาด 50/50 เท่า "ถัดไป" คุมด้วย flex ใน register.html — .wz-actions) */
:root .login-card .btn-2.btn-back{
  background:#EAF6F3;
  border:1px solid #147A73;
  color:#0E5A54;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
:root .login-card .btn-2.btn-back:hover{
  background:#DCEFEA; border-color:#0F655F; color:#0A4540;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
:root .login-card .btn-2.btn-back:active{transform:translateY(1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}