/* หน้าเข้าสู่ระบบ v2 (M19) · 4-design/login-v2 แบบ B3 "กลุ่มดาวข้อมูล" (SPEC.md §1 · §8 · §8.1) — ใช้กับ /login · /login/mfa · /login/password
   โครง: ฉาก (.lx-scene · components/login_scene.html) → การ์ดแก้วกลางจอ · ข้อความแบรนด์ซ้าย · จุดเด่น 3 ข้อขวา · เครดิตล่างซ้าย
   สี: โทเคนของชุดสี/โหมดจาก themes.css (ui-themes.yaml: --bg --surf --ink --brand --ring --p1 …) · ฉากและการ์ดแก้วใช้ --login-* (themes.css · สองโหมด)
     สว่าง = หมอกศิลาดล + เส้นเขียวเข้ม (brand / brand_hover ของชุด mint) · มืด = พื้นเกือบดำ + เขียวเรืองแสง (mint โหมดมืด) · ค่าอยู่ใน ui-themes.yaml login_scene
   โหมด: [data-mode=light|dark] หรือ system → prefers-color-scheme (เหมือน themes.css · ไม่ต้องมี JS)
   CSP: ไม่มี style ในบรรทัด · ไม่มี CDN · พารัลแลกซ์ใช้คุณสมบัติ translate (แยกจาก transform ของแอนิเมชัน) จาก --px/--py ที่ login.js ตั้ง
   ข้อความไม่พึ่งแอนิเมชันเปิดหน้า: ไม่มี JS = สถานะสุดท้ายทันที · มี JS = .lx-settled ที่ 2.6 วิ ตัดแอนิเมชันข้อความทิ้ง
   ลดการเคลื่อนไหว (ระบบ หรือ data-motion=reduce): ทุกอย่างนิ่งทันที ไม่มีประกายแสง ไม่มีพารัลแลกซ์ ไม่มีส่วนที่วน */

/* ───────── 1 · โทเคน ─────────
   สีทั้งหมดมาจาก themes.css: ชุดสี/โหมด (--bg --surf --ink --brand --ring --p1 …) + --login-* (ui-themes.yaml login_scene · สองโหมด) · ไฟล์นี้ไม่มีค่าสีตรง */
.lx {
  --lx-ease-out: cubic-bezier(.2, 0, 0, 1);
  --lx-ease-glide: cubic-bezier(.33, 0, .12, 1);
  --lx-ease-line: cubic-bezier(.65, 0, .35, 1);
  --lx-t-press: 120ms; --lx-t-ui: 200ms; --lx-t-msg: 320ms; --lx-t-enter: 640ms; --lx-stagger: 90ms;
  --lx-par: 1;
  --px: 0; --py: 0;
  --lx-field: var(--surf);
  --lx-glow: 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent);
  --lx-rim: inset 0 1px 0 var(--login-rim);
  --lx-btn-shadow: inset 0 1px 0 var(--login-btn-top), 0 1px 2px color-mix(in srgb, var(--login-shadow) 18%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--brand-hover) 55%, transparent);
  --lx-sky: radial-gradient(95% 85% at 50% 38%, var(--login-sky-1) 0%, var(--login-sky-2) 55%, var(--login-sky-3) 100%);
}
[data-mode="dark"] .lx {
  --lx-field: var(--bg);
  --lx-glow: 0 0 0 4px color-mix(in srgb, var(--ring) 18%, transparent);
  --lx-btn-shadow: inset 0 1px 0 var(--login-btn-top), 0 1px 2px color-mix(in srgb, var(--login-shadow) 40%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--brand) 45%, transparent);
}
@media (prefers-color-scheme: dark) {
  [data-mode="system"] .lx {
    --lx-field: var(--bg);
    --lx-glow: 0 0 0 4px color-mix(in srgb, var(--ring) 18%, transparent);
    --lx-btn-shadow: inset 0 1px 0 var(--login-btn-top), 0 1px 2px color-mix(in srgb, var(--login-shadow) 40%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--brand) 45%, transparent);
  }
}

/* ───────── 2 · โครงกลางจอ [ข้อความแบรนด์ | การ์ดแก้ว | จุดเด่น] ───────── */
body.pub-auth { background: var(--login-scene-bg, var(--bg)); }
.lx { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100dvh; background: var(--login-scene-bg); color: var(--ink); }
.demo-banner ~ main .lx { min-height: calc(100dvh - 38px); }
.lx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lx-top { position: absolute; z-index: 4; top: 24px; left: 40px; right: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; pointer-events: none; }
.lx-top > * { pointer-events: auto; }
.lx-grid { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); column-gap: 56px; align-items: center; padding: 76px 40px; }
.lx-intro { justify-self: end; width: min(390px, 100%); position: relative; }
.lx-fcol { justify-self: start; width: min(370px, 100%); position: relative; }
.lx-tag { text-wrap: balance; margin: 0; font-size: 26px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.lx-for { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink2); }
.lx-foot { position: absolute; z-index: 3; left: 40px; bottom: 22px; }
.lx-credit { margin: 0; font-size: 12px; color: var(--muted); }
/* ม่านนุ่มหลังข้อความ ให้เส้นของฉากไม่ลดความต่างสี (B3: ทึบ 94% เพราะเส้นผ่านบริเวณจุดเด่น) */
.lx-foot::before { content: ""; position: absolute; inset: -24px -40px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--login-scene-bg) 90%, transparent), transparent); }
.lx-intro::before, .lx-fcol::before { content: ""; position: absolute; inset: -72px -84px; z-index: -1; background: radial-gradient(closest-side, var(--login-scrim), var(--login-scrim-soft) 70%, transparent); }

/* lockup (brand/lockup-inner) ขนาดของหน้าเข้าสู่ระบบ */
.lx-lockup { gap: 14px; }
.lx-lockup .mk { width: 26px; height: 40px; }
.lx-lockup .tx { gap: 4px; }
.lx-lockup .wm { font-size: 20px; letter-spacing: .32em; margin-right: -.32em; }
.lx-lockup .by { font-size: 11px; gap: 6px; }
.lx-lockup .by .am { width: 15px; height: 11px; }
.lx-lockup .by b { font-size: 10.5px; letter-spacing: .08em; }

/* สลับภาษา · ออกจากระบบ */
.lx-tools { display: flex; align-items: center; gap: 8px; }
.lx-tools .logout { margin: 0; }
.lx-lang { display: inline-flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--surf2) 80%, transparent); border: 1px solid var(--line); }
.lx-lang a { min-width: 48px; min-height: 36px; padding: 0 12px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background-color var(--lx-t-ui) var(--lx-ease-out), color var(--lx-t-ui) var(--lx-ease-out), box-shadow var(--lx-t-ui) var(--lx-ease-out); }
.lx-lang a:hover { color: var(--ink); }
.lx-lang a[aria-current="true"] { background: var(--surf); color: var(--ink); box-shadow: 0 1px 1px color-mix(in srgb, var(--login-shadow) 5%, transparent), 0 2px 4px color-mix(in srgb, var(--login-shadow) 5%, transparent); }
.lx-lang a:lang(en) { letter-spacing: .04em; }

/* จุดเด่น 3 ข้อ: แผ่นไอคอนนูน (ขอบรับแสงด้านบน + เงาสองชั้น) */
.lx-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lx-feats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.lx-fi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--fg); background: linear-gradient(180deg, var(--surf), var(--surf2)); border: 1px solid var(--line); box-shadow: var(--lx-rim), 0 1px 1px color-mix(in srgb, var(--login-shadow) 6%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--login-shadow) 22%, transparent); }
.lx-fi .ico { width: 20px; height: 20px; }
.lx-feats b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lx-feats small { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ───────── 3 · การ์ดแก้ว ─────────
   ฝ้า blur 26px + saturate 1.4 · พื้นโปร่ง 84% → ข้อความรองบนแก้ว ≥ 4.5:1 แม้ฉากรกที่สุด (SPEC §1.3) · ไม่รองรับ backdrop-filter = พื้นทึบ */
.lx-cardwrap { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.lx-card { position: relative; z-index: 2; isolation: isolate; padding: 30px 36px 24px; border-radius: 26px;
  background: var(--login-glass); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid var(--login-glass-line);
  box-shadow: inset 0 1px 0 var(--login-glass-edge), inset 1px 0 0 color-mix(in srgb, var(--login-glass-edge) 60%, transparent), inset 0 -1px 0 var(--login-glass-low),
    0 1px 1px color-mix(in srgb, var(--login-shadow) 6%, transparent), 0 8px 16px -6px color-mix(in srgb, var(--login-shadow) 10%, transparent), 0 28px 56px -18px color-mix(in srgb, var(--login-shadow) 22%, transparent), 0 72px 110px -50px color-mix(in srgb, var(--login-shadow) 34%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lx-card { background: var(--surf); } }
.lx-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: -1; }
.lx-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; background: linear-gradient(100deg, transparent 0%, var(--login-sheen) 50%, transparent 100%); transform: translateX(-130%) skewX(-12deg); opacity: 0; }
.lx-glint { --d: -28; position: absolute; left: -30%; top: -60%; width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, var(--login-glint), transparent); }
.lx-auth { position: relative; }

/* หน่วยงาน · หัวเรื่อง */
.lx-tenant { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; margin: 0 0 18px; border-bottom: 1px solid color-mix(in srgb, var(--login-glass-line) 60%, transparent); }
.lx-ti { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--soft); color: var(--fg); }
.lx-tenant b { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; }
.lx-tenant small { display: block; font: 400 12px/1.4 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.lx-auth h1 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 600; }
.lx-lede { margin: 4px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.lx-lede b { color: var(--ink); font-weight: 600; }

/* ───────── 4 · ฟอร์ม ───────── */
.lx-form { display: flex; flex-direction: column; gap: 14px; }
.lx-f { display: flex; flex-direction: column; gap: 6px; }
.lx-f > label { font-size: 13.5px; font-weight: 500; color: var(--ink2); }
.lx-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.lx-hint[hidden], .lx-forgot-body [hidden] { display: none; }
.lx-box { position: relative; display: flex; align-items: center; border-radius: 12px; background: color-mix(in srgb, var(--lx-field) 92%, transparent); border: 1px solid var(--input); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--login-shadow) 6%, transparent);
  transition: border-color var(--lx-t-ui) var(--lx-ease-out), box-shadow var(--lx-t-ui) var(--lx-ease-out), translate var(--lx-t-ui) var(--lx-ease-out); }
.lx-box:hover { border-color: color-mix(in srgb, var(--input) 60%, var(--ink)); }
.lx-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), var(--lx-glow), 0 4px 8px -2px color-mix(in srgb, var(--login-shadow) 7%, transparent), 0 16px 32px -12px color-mix(in srgb, var(--login-shadow) 12%, transparent); translate: 0 -1px; }
.lx-box input { flex: 1; min-width: 0; width: auto; height: 50px; margin: 0; border: 0; background: transparent; color: var(--ink); font: 400 16px/1.4 var(--font-sans); padding: 0 16px; border-radius: inherit; box-shadow: none; }
.lx-box input:focus, .lx-box input:focus-visible { outline: none; box-shadow: none; }
.lx-box input[type="password"] { letter-spacing: .12em; }
.lx-f[data-invalid] .lx-box { border-color: var(--p1); box-shadow: 0 0 0 1px var(--p1); }
.lx-ferr { display: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--p1-fg); }
.lx-f[data-invalid] .lx-ferr { display: flex; gap: 6px; align-items: flex-start; }
.lx-ferr svg, .lx-caps svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.lx-eye { flex: none; display: grid; width: 44px; height: 44px; margin: 0 3px 0 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; place-items: center; min-height: 0;
  transition: color var(--lx-t-ui) var(--lx-ease-out), background-color var(--lx-t-ui) var(--lx-ease-out); }
.lx-eye[hidden] { display: none; }
.lx-eye:hover { color: var(--ink); background: var(--surf2); }
.lx-eye svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity 240ms var(--lx-ease-out), transform 240ms var(--lx-ease-out), filter 240ms var(--lx-ease-out); }
.lx-eye .lx-i-hide { opacity: 0; transform: scale(.25); filter: blur(4px); }
.lx-eye[aria-pressed="true"] .lx-i-show { opacity: 0; transform: scale(.25); filter: blur(4px); }
.lx-eye[aria-pressed="true"] .lx-i-hide { opacity: 1; transform: none; filter: none; }
.lx-caps { display: flex; gap: 6px; align-items: flex-start; margin: -6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--p2-fg); background: var(--p2-bg); border-radius: 8px; padding: 0 10px;
  opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--lx-t-ui) var(--lx-ease-out), max-height var(--lx-t-ui) var(--lx-ease-out), padding var(--lx-t-ui) var(--lx-ease-out), margin var(--lx-t-ui) var(--lx-ease-out); }
.lx-caps[data-on] { opacity: 1; max-height: 64px; padding-block: 6px; margin-top: 0; }

/* วิธีเข้าสู่ระบบ (radio ล้วน แสดงเป็นปุ่มแบ่งส่วน) */
.lx-methods { border: 0; margin: 0; padding: 0; min-width: 0; }
.lx-methods legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.lx-seg { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 2px; padding: 4px; border-radius: 12px; background: var(--surf2); border: 1px solid var(--line); }
.lx-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.lx-seg label { position: relative; z-index: 1; min-height: 40px; display: grid; place-items: center; padding: 4px 8px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; text-align: center; line-height: 1.35;
  transition: color var(--lx-t-ui) var(--lx-ease-out), background-color var(--lx-t-ui) var(--lx-ease-out), box-shadow var(--lx-t-ui) var(--lx-ease-out); }
.lx-seg input:checked + label { background: var(--surf); color: var(--ink); font-weight: 600; box-shadow: 0 1px 1px color-mix(in srgb, var(--login-shadow) 5%, transparent), 0 2px 4px color-mix(in srgb, var(--login-shadow) 5%, transparent), 0 0 0 1px var(--input); }
.lx-seg input:focus-visible + label { outline: 2px solid var(--ring); outline-offset: 1px; }

/* จำชื่อผู้ใช้ */
.lx-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: -4px; font-size: 13.5px; color: var(--ink2); cursor: pointer; align-self: flex-start; }
.lx-check input { appearance: none; -webkit-appearance: none; margin: 0; width: 24px; height: 24px; flex: none; border-radius: 6px; border: 1px solid var(--input); background: var(--lx-field); display: grid; place-items: center; cursor: pointer;
  transition: background-color var(--lx-t-ui) var(--lx-ease-out), border-color var(--lx-t-ui) var(--lx-ease-out); }
.lx-check input::after { content: ""; width: 12px; height: 7px; border: solid var(--on-brand); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(.4); opacity: 0; transition: transform var(--lx-t-ui) var(--lx-ease-out), opacity var(--lx-t-ui) var(--lx-ease-out); }
.lx-check input:checked { background: var(--brand); border-color: var(--brand); }
.lx-check input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.lx-check input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ปุ่ม */
.lx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 600 16px/1.3 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background-color var(--lx-t-ui) var(--lx-ease-out), box-shadow var(--lx-t-ui) var(--lx-ease-out), translate var(--lx-t-ui) var(--lx-ease-out), scale var(--lx-t-press) var(--lx-ease-out), border-color var(--lx-t-ui) var(--lx-ease-out); }
.lx-btn-primary { width: 100%; background: var(--brand); color: var(--on-brand); box-shadow: var(--lx-btn-shadow); }
.lx-btn-primary:hover { background: var(--brand-hover); translate: 0 -1px; }
.lx-btn:active { scale: .98; translate: 0 1px; }
.lx-btn-primary:active { box-shadow: inset 0 1px 2px var(--login-press); }
.lx-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.lx-btn .lx-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
[data-busy] .lx-btn-primary .lx-spin { display: block; animation: lx-spin 800ms linear infinite; }
[data-busy] .lx-btn-primary { cursor: progress; }
.lx-btn-ghost { width: 100%; font-weight: 500; font-size: 15px; background: var(--surf); color: var(--ink); border-color: var(--input); box-shadow: 0 1px 1px color-mix(in srgb, var(--login-shadow) 5%, transparent), 0 2px 4px color-mix(in srgb, var(--login-shadow) 5%, transparent); }
.lx-btn-ghost:hover { border-color: var(--ink2); translate: 0 -1px; }
.lx-btn-ghost .ico { width: 20px; height: 20px; }
.lx-btn.lx-sm { width: auto; min-height: 36px; padding: 0 12px; font-size: 13px; }
.lx-sso { display: grid; gap: 8px; margin-top: 18px; }
.lx-or { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; color: var(--muted); font-size: 12.5px; }
.lx-or::before, .lx-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ลืมรหัสผ่าน (details · ไม่มี JS ใช้ได้) */
.lx-forgot { align-self: center; margin-top: -6px; font-size: 13.5px; max-width: 100%; }
.lx-forgot summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; justify-content: center; align-items: center; color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: 4px; }
.lx-forgot summary::-webkit-details-marker { display: none; }
.lx-forgot summary:hover { text-decoration-color: currentColor; }
.lx-forgot summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.lx-forgot-body { margin: 0 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--surf2); border: 1px solid var(--line); color: var(--ink2); font-size: 13.5px; line-height: 1.6; }
.lx-forgot-body p { margin: 0; overflow-wrap: anywhere; }
.lx-forgot[open] .lx-forgot-body { animation: lx-msg var(--lx-t-msg) var(--lx-ease-out) both; }
.lx-contact { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px !important; color: var(--ink); }
.lx-contact .ico { flex: none; margin-top: 3px; color: var(--fg); }
.lx-secret { margin: 0 0 14px; }
.lx-secret .secret { margin: 6px 0 4px; font: 500 15px/1.5 var(--font-mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.lx-secret .secret-uri { font: 12px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.lx-help { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--login-glass-line) 60%, transparent); font-size: 13px; }
.lx-help a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--fg); text-decoration: none; }
.lx-help a:hover { text-decoration: underline; }

/* ข้อความแจ้งระดับฟอร์ม · ต่างกันที่รูปทรงไอคอน + สี */
.lx-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; border: 1px solid transparent; animation: lx-msg var(--lx-t-msg) var(--lx-ease-out) both; }
.lx-alert > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.lx-alert p { margin: 0; }
.lx-alert .lx-sub { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12.5px; }
.lx-alert-err { background: var(--p1-bg); color: var(--p1-fg); border-color: color-mix(in srgb, var(--p1) 30%, transparent); }
.lx-alert-warn { background: var(--p2-bg); color: var(--p2-fg); border-color: color-mix(in srgb, var(--p2-fg) 25%, transparent); }
.lx-alert-ok, .lx-alert-info { background: var(--soft); color: var(--fg); border-color: color-mix(in srgb, var(--fg) 22%, transparent); }

/* ───────── 5 · ฉาก B3 (กลุ่มดาวข้อมูล) ───────── */
.lx-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--lx-sky); }
.lx-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(38% 50% at 50% 50%, var(--login-center), transparent 80%); }
.lx-cl { position: absolute; inset: -6%; }
.lx-cl svg { width: 100%; height: 100%; display: block; }
.lx-ln path { fill: none; stroke-width: 1; }
.lx-l1 { --d: -6; opacity: .55; } .lx-l1 path { stroke: var(--login-line-1); } .lx-l1 circle { fill: var(--login-point-1); } .lx-l1 svg { filter: blur(.4px); }
.lx-l2 { --d: -14; opacity: .8; } .lx-l2 path { stroke: var(--login-line-2); } .lx-l2 circle { fill: var(--login-point-2); }
.lx-l3 { --d: -26; } .lx-l3 path { stroke: var(--login-line-3); stroke-width: 1.2; } .lx-l3 circle { fill: var(--login-point-3); }
.lx circle.lx-hot { fill: var(--login-hot); filter: drop-shadow(0 0 4px var(--login-hot-glow)); }

/* พารัลแลกซ์: login.js ตั้ง --px --py (−1…1) บน .lx เฉพาะตอนเมาส์ขยับ · ชั้นที่มี data-depth เลื่อนด้วย translate */
.lx [data-depth] { translate: calc(var(--px, 0) * var(--d, 8) * var(--lx-par) * 1px) calc(var(--py, 0) * var(--d, 8) * var(--lx-par) * 1px); }

/* ───────── 6 · การเคลื่อนไหว (เฉพาะเมื่อมี JS และไม่ได้ขอลดการเคลื่อนไหว) ─────────
   เปิดหน้า: เส้นวาด 1.6s → จุดติด · ข้อความแบรนด์ 260/360ms · การ์ด 380ms · ชิ้นในการ์ดห่าง 90ms · จุดเด่น 700–920ms · ประกายแสง 1050ms
   วน: แต่ละชั้นลอยไป-กลับ 50–80s (transform) · จุด hot เรืองแสงสลับกัน (opacity) · หยุดเมื่อ .lx-paused (แท็บซ่อน) / .lx-idle (ไม่ใช้งาน 60 วิ) */
@media (prefers-reduced-motion: no-preference) {
  .lx-js:not([data-motion="reduce"]) .lx-ln path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lx-draw 1600ms var(--lx-ease-line) both; }
  .lx-js:not([data-motion="reduce"]) .lx-l2 path { animation-delay: 200ms; }
  .lx-js:not([data-motion="reduce"]) .lx-l3 path { animation-delay: 400ms; }
  .lx-js:not([data-motion="reduce"]) .lx-pt circle { animation: lx-fade 800ms var(--lx-ease-out) 900ms both; }
  .lx-js:not([data-motion="reduce"]) .lx-l1 { animation: lx-float1 80s ease-in-out 2000ms infinite alternate; will-change: transform; }
  .lx-js:not([data-motion="reduce"]) .lx-l2 { animation: lx-float2 64s ease-in-out 2000ms infinite alternate; will-change: transform; }
  .lx-js:not([data-motion="reduce"]) .lx-l3 { animation: lx-float3 50s ease-in-out 2000ms infinite alternate; will-change: transform; }
  .lx-js:not([data-motion="reduce"]) .lx circle.lx-hot { animation: lx-fade 800ms var(--lx-ease-out) 900ms both, lx-twinkle 6s ease-in-out 2400ms infinite; }
  .lx-js:not([data-motion="reduce"]) .lx circle.lx-h1 { animation-delay: 900ms, 3900ms; }
  .lx-js:not([data-motion="reduce"]) .lx circle.lx-h2 { animation-delay: 900ms, 5400ms; }
  .lx-js:not([data-motion="reduce"]) .lx circle.lx-h3 { animation-delay: 900ms, 6900ms; }
  .lx-js:not([data-motion="reduce"]) .lx-intro > * { animation: lx-rise var(--lx-t-enter) var(--lx-ease-out) both; }
  .lx-js:not([data-motion="reduce"]) .lx-intro > .lx-tag { animation-delay: 260ms; }
  .lx-js:not([data-motion="reduce"]) .lx-intro > .lx-for { animation-delay: 360ms; }
  .lx-js:not([data-motion="reduce"]) .lx-feats li { animation: lx-rise var(--lx-t-enter) var(--lx-ease-out) both; }
  .lx-js:not([data-motion="reduce"]) .lx-feats li:nth-child(1) { animation-delay: 700ms; }
  .lx-js:not([data-motion="reduce"]) .lx-feats li:nth-child(2) { animation-delay: 810ms; }
  .lx-js:not([data-motion="reduce"]) .lx-feats li:nth-child(3) { animation-delay: 920ms; }
  .lx-js:not([data-motion="reduce"]) .lx-card { animation: lx-glass-in 760ms var(--lx-ease-out) 380ms both; }
  .lx-js:not([data-motion="reduce"]) .lx-enter > * { animation: lx-rise var(--lx-t-enter) var(--lx-ease-out) both; animation-delay: calc(var(--lx-stagger) * 1 + 520ms); }
  .lx-js:not([data-motion="reduce"]) .lx-enter > :nth-child(2) { animation-delay: calc(var(--lx-stagger) * 2 + 520ms); }
  .lx-js:not([data-motion="reduce"]) .lx-enter > :nth-child(3) { animation-delay: calc(var(--lx-stagger) * 3 + 520ms); }
  .lx-js:not([data-motion="reduce"]) .lx-enter > :nth-child(n+4) { animation-delay: calc(var(--lx-stagger) * 4 + 520ms); }
  .lx-js:not([data-motion="reduce"]) .lx-sheen::before { animation: lx-sweep 1600ms var(--lx-ease-glide) 1050ms both; }
  /* ข้อความต้องไม่พึ่งแอนิเมชัน: หลัง 2.6 วิ ตัดแอนิเมชันเปิดหน้าทิ้ง (ถ้าค้างกลางทาง ข้อความก็ยังแสดงครบ) */
  .lx-settled .lx-intro > *, .lx-settled .lx-feats li, .lx-settled .lx-enter > *, .lx-settled .lx-card { animation: none !important; opacity: 1; transform: none; filter: none; }
  .lx-paused .lx-scene, .lx-paused .lx-scene *, .lx-idle .lx-scene, .lx-idle .lx-scene * { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) { .lx { --lx-par: 0; } .lx-alert, .lx-forgot[open] .lx-forgot-body { animation: none; } .lx *, .lx *::before, .lx *::after { transition-duration: 1ms !important; } }
[data-motion="reduce"] .lx { --lx-par: 0; }
[data-motion="reduce"] .lx-alert, [data-motion="reduce"] .lx-forgot[open] .lx-forgot-body { animation: none; }
@media (prefers-reduced-motion: reduce) { [data-busy] .lx-btn-primary .lx-spin { animation: lx-spin 1600ms linear infinite; } }

@keyframes lx-msg { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lx-spin { to { rotate: 360deg; } }
@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-glass-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lx-sweep { from { transform: translateX(-130%) skewX(-12deg); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(260%) skewX(-12deg); opacity: 0; } }
@keyframes lx-draw { to { stroke-dashoffset: 0; } }
@keyframes lx-float1 { to { transform: translate(1.5%, -1%); } }
@keyframes lx-float2 { to { transform: translate(-2%, 1.5%); } }
@keyframes lx-float3 { to { transform: translate(2.5%, 2%); } }
@keyframes lx-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ───────── 7 · จอแคบ (SPEC §8.1) ─────────
   ≤1180: คอลัมน์เดียวกลางจอ ข้อความแบรนด์ (จัดกลาง) → การ์ด → จุดเด่น → เครดิต · ≤700: ข้อความชิดซ้าย · ฉากเฉพาะช่วงบนแล้วจางออก */
@media (max-width: 1180px) {
  .lx-grid { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 108px 24px 72px; }
  .lx-intro { width: min(560px, 100%); text-align: center; }
  .lx-cardwrap { width: 100%; max-width: 440px; }
  .lx-fcol { width: min(440px, 100%); }
  .lx-foot { position: relative; z-index: 3; left: auto; bottom: auto; text-align: center; padding: 0 24px 28px; }
}
@media (max-width: 700px) {
  .lx-top { position: relative; z-index: 4; top: auto; left: auto; right: auto; padding: 16px 16px 0; flex-wrap: wrap; }
  .lx-lockup .mk { width: 24px; height: 37px; }
  .lx-lockup .wm { font-size: 18px; }
  .lx-grid { align-items: stretch; gap: 28px; padding: 16px 12px 28px; }
  .lx-intro { text-align: left; }
  .lx-scene { bottom: auto; height: 900px; -webkit-mask-image: linear-gradient(black 70%, transparent); mask-image: linear-gradient(black 70%, transparent); }
  .lx-intro, .lx-fcol { width: auto; padding: 0 8px; }
  .lx-cardwrap { max-width: none; }
  .lx-tag { font-size: 20px; }
  .lx-for { font-size: 14px; }
  .lx-card { padding: 22px 20px 18px; border-radius: 22px; }
  .lx-foot { text-align: left; padding: 0 20px 24px; }
}
@media (max-width: 400px) {
  .lx-auth h1 { font-size: 24px; }
  .lx-lede { font-size: 13.5px; }
  .lx-tenant { padding-bottom: 14px; margin-bottom: 16px; }
}
@media (forced-colors: active) { .lx-card { border: 1px solid CanvasText; } .lx-scene { display: none; } }