/* หน้าเข้าสู่ระบบ — Cinematic Modern (ตาม mockup 05) · สีจาก :root ใน app.css */
body.lg{margin:0;background:var(--white);color:var(--char);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased}
.lg-page{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh;min-height:100dvh}

/* ซ้าย: ภาพ */
.lg-hero{position:relative;overflow:hidden;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:34px 44px 52px}
.lg-slides{position:absolute;inset:0;z-index:0}
.lg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1.8s ease-in-out,transform 9s ease-out}
.lg-hero-img.on{opacity:1;transform:scale(1)}
@media(prefers-reduced-motion:reduce){.lg-hero-img{transform:none!important;transition:opacity 1s}}
.lg-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12) 55%,rgba(0,0,0,.4))}
.lg-hero>*:not(.lg-slides){position:relative;z-index:2}
.lg-hero-top{display:flex;align-items:center;gap:12px}
.lg-mark{height:34px}
.lg-word{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:.42em;font-size:14px}
.lg-word span{font-weight:200}
.lg-hero h1{font-family:'Jost',sans-serif;font-weight:200;font-size:clamp(46px,6.4vw,104px);line-height:.95;letter-spacing:-.02em;margin:14px 0 18px}
.lg-hero h1 b{font-weight:500}
.lg-hero p{font-size:16.5px;opacity:.85;max-width:460px;margin:0;line-height:1.7}
.lg-clock{color:rgba(255,255,255,.8)!important}

/* ขวา: ฟอร์ม */
.lg-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 28px 28px;position:relative}
.lg-logo-m{display:none}
.lg-form{width:100%;max-width:380px;animation:lgUp .7s cubic-bezier(.2,.7,.2,1) both}
.lg-form h2{font-family:'Jost','Noto Sans Thai',sans-serif;font-weight:200;font-size:46px;line-height:1.05;margin:10px 0 6px;letter-spacing:-.01em}
.lg-form h2 b{font-weight:500}
.lg-sub{color:var(--muted);font-size:14px;margin:0 0 28px}
.lg-err{background:#fbeceb;color:#a33a32;border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:16px}
.lg-field{display:block;position:relative;margin-bottom:16px}
.lg-field span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe);margin-bottom:6px;font-weight:400}
.lg-field input{width:100%;box-sizing:border-box;font:inherit;font-weight:400;font-size:16px;color:var(--char);background:#fff;border:1px solid var(--stone2);border-radius:14px;padding:13px 16px;outline:none;transition:.2s}
.lg-field input:focus{border-color:var(--bronze);box-shadow:0 0 0 4px rgba(166,124,82,.14)}
.lg-eye{position:absolute;right:6px;bottom:6px;border:0;background:none;color:var(--taupe);padding:8px 10px;cursor:pointer;font-size:17px}
.lg-remember{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin:4px 0 22px;cursor:pointer}
.lg-remember input{accent-color:var(--bronze);width:16px;height:16px}
.lg-submit{width:100%;padding:15px;font-size:14px}
.lg-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:lgSpin .8s linear infinite;vertical-align:-2px}
.lg-or{display:flex;align-items:center;gap:12px;color:var(--taupe);font-size:12px;letter-spacing:.2em;margin:20px 0 14px}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--stone2)}
.lg-alt{width:100%;font:inherit;font-size:15px;padding:13px;border-radius:999px;border:1px solid var(--char);background:transparent;color:var(--char);cursor:pointer;transition:.25s}
.lg-alt:hover{background:var(--char);color:#fff}
.lg-alt i{font-size:19px;vertical-align:-3px;margin-right:4px}
.lg-foot{position:absolute;bottom:18px}

/* แบบแตะนิ้ว */
.lg-fp{text-align:center}
.lg-user{display:flex;align-items:center;gap:14px;justify-content:center;margin:18px 0 34px;text-align:left}
.lg-user b{display:block;font-weight:500;font-size:19px}
.lg-user small{color:var(--muted);font-size:13px}
.lg-avatar{width:54px;height:54px;border-radius:50%;background:var(--char);color:var(--bronze);display:grid;place-items:center;font-size:22px;font-weight:500}
.lg-tap{width:132px;height:132px;border-radius:50%;border:1px solid var(--stone2);background:#fff;color:var(--bronze);font-size:64px;cursor:pointer;position:relative;box-shadow:0 18px 50px rgba(35,34,32,.12);transition:.25s}
.lg-tap::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(166,124,82,.35);animation:lgPulse 2.2s ease-out infinite}
.lg-tap:hover{transform:scale(1.03)}
.lg-tap.busy{color:var(--taupe)}
.lg-tap.busy::after{border-top-color:var(--bronze);animation:lgSpin 1s linear infinite;border-width:2px}
.lg-tap-label{margin-top:24px;font-size:17px;font-weight:400}
.lg-tap-sub{color:var(--muted);font-size:13.5px}
.lg-links{display:flex;justify-content:center;gap:26px;margin-top:30px}
.lg-links button{border:0;background:none;font:inherit;font-size:14px;color:var(--char);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--stone2);cursor:pointer}
.lg-links button:hover{color:var(--bronze)}

/* การ์ดติดตั้งแอป */
.lg-install{display:flex;align-items:center;gap:12px;width:100%;margin-top:26px;padding:12px 14px;border-radius:16px;border:1px dashed var(--stone2);background:var(--stone-l);font:inherit;text-align:left;cursor:pointer;color:var(--char)}
.lg-install img{width:38px;height:38px;border-radius:10px}
.lg-install span{flex:1;font-size:14px;font-weight:400}
.lg-install small{display:block;color:var(--muted);font-size:12px;font-weight:300}
.lg-install i{font-size:18px;color:var(--bronze)}
.lg-install.ready{border-style:solid;border-color:var(--bronze)}

.lg-sheet-icon{width:70px;height:70px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:var(--char);color:var(--bronze);font-size:34px}

/* หน้าจอรอโหลด */
.lg-load{position:fixed;inset:0;z-index:2000;background:var(--char);color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity .4s}
.lg-load.show{opacity:1}
.lg-load-ring{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;position:relative;margin-bottom:12px}
.lg-load-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-top-color:var(--bronze);animation:lgSpin 1s linear infinite}
.lg-load-ring img{height:52px}
.lg-load-hello{font-family:'Jost','Noto Sans Thai',sans-serif;font-weight:200;font-size:30px}
.lg-load-bar{width:180px;height:1px;background:rgba(255,255,255,.15);margin-top:14px;overflow:hidden}
.lg-load-bar span{display:block;height:100%;background:var(--bronze);animation:lgBar 1.5s ease-out forwards;transform-origin:left;transform:scaleX(0)}

@keyframes lgUp{from{opacity:0;transform:translateY(16px)}}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgPulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.18);opacity:0}}
@keyframes lgBar{to{transform:scaleX(1)}}

/* มือถือ: ภาพเป็นแถบบน ฟอร์มขึ้นมาทับแบบการ์ด */
@media(max-width:860px){
  .lg-page{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-hero{min-height:34vh;padding:calc(18px + env(safe-area-inset-top)) 22px 46px}
  .lg-hero h1{font-size:44px;margin:8px 0 0}
  .lg-hero p{display:none}
  .lg-main{background:var(--white);border-radius:26px 26px 0 0;margin-top:-26px;position:relative;z-index:3;justify-content:flex-start;padding:30px 22px calc(60px + env(safe-area-inset-bottom))}
  .lg-form h2{font-size:38px}
  .lg-foot{bottom:calc(14px + env(safe-area-inset-bottom))}
}