/* หน้าเข้าสู่ระบบ/ตั้งบัญชี: ธีมสว่างแบ่งสองฝั่ง + มาสคอต + ช่อง OTP — ใช้คู่กับ login.js */
#login.auth{position:fixed;inset:0;z-index:40;overflow:auto;margin:0;max-width:none;padding:28px 16px;display:flex;color:#15171c;
 font-family:"Sarabun","Leelawadee UI","Segoe UI",system-ui,sans-serif;
 background:radial-gradient(900px 520px at 12% 0%,#fff1e9,transparent 60%),radial-gradient(760px 520px at 100% 100%,#eceeff,transparent 60%),#f1f2f6}
#login.auth.hide{display:none}
#toast{z-index:60}
.lg{position:relative;margin:auto;width:min(1060px,100%);min-height:640px;display:grid;grid-template-columns:1.08fr 1fr;gap:0;background:#fff;
 border-radius:30px;padding:12px;box-shadow:0 40px 90px rgba(28,32,52,.13),0 2px 6px rgba(28,32,52,.05)}

/* ---------- ฝั่งภาพ ---------- */
.lg-art{position:relative;border-radius:22px;overflow:hidden;min-height:600px;
 background:radial-gradient(120% 80% at 22% 108%,#ff6f3c 0%,#ff9466 26%,#ffbf9f 52%,#ffe2d3 76%,#fff3ec 100%)}
.lg-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 38% at 82% 16%,rgba(255,255,255,.6),transparent 70%)}
.lg-mark{position:absolute;left:20px;top:18px;z-index:3;display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:#3a2318}
.lg-mark svg{width:28px;height:28px}
.gc{position:absolute;z-index:2;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);
 border-radius:18px;box-shadow:0 18px 40px rgba(190,90,50,.17),0 2px 6px rgba(190,90,50,.08);animation:gcfloat 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes gcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.gc-main{left:13%;top:25%;width:60%;padding:14px 16px 8px}
.gc-h{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b4a42}.gc-h b{font-weight:600}
.gc-h em{margin-left:auto;font-style:normal;color:#a08f86;font-size:11px}
.gc-ic{width:22px;height:22px;border-radius:7px;background:#15171c;color:#fff;display:grid;place-items:center}.gc-ic svg{width:13px;height:13px}
.gc-big{font-size:27px;font-weight:800;color:#15171c;margin:8px 0 0;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.gc-up{font-size:11px;font-weight:700;color:#15803d;background:#dcfce7;border-radius:999px;padding:2px 9px}
.gc-chart{width:100%;height:78px;display:block;overflow:visible}
.gc-chart .cd{transform-box:fill-box;transform-origin:center}
.gc-chart .cl{fill:none;stroke:#ff6a3d;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.75}
.gc-note{right:6%;top:12%;width:46%;padding:9px 12px;display:flex;align-items:center;gap:9px;--d:-2s}
.gc-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#5b54e8;flex:none;transition:background .3s}.gc-av svg{width:15px;height:15px}
.gc-nt{min-width:0}.gc-nt b{display:block;font-size:12.5px;color:#15171c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-nt small{display:block;font-size:10.5px;color:#8a7a72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-note em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:#15171c;padding-left:6px}
.gc-ring{left:8%;top:60%;padding:10px 14px 10px 10px;display:flex;align-items:center;gap:10px;--d:-4s}
.gc-ring svg{width:44px;height:44px}.r-bg{fill:none;stroke:#f1e4dd;stroke-width:4}
.r-fg{fill:none;stroke:#16a34a;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:22px 22px}
.gc-ring b{display:block;font-size:14px}.gc-ring small{display:block;font-size:10.5px;color:#8a7a72}
.gc-pill{right:10%;top:64%;padding:8px 13px;border-radius:999px;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:8px;--d:-1s}
.gc-pill i{width:14px;height:14px;border-radius:50%;background:#ff6a3d;box-shadow:0 0 0 4px rgba(255,106,61,.2);animation:gcping 2s ease-out infinite}
@keyframes gcping{0%{box-shadow:0 0 0 0 rgba(255,106,61,.45)}100%{box-shadow:0 0 0 10px rgba(255,106,61,0)}}
.lg-tag{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#3a2016}
.lg-tag small{font-size:10px;letter-spacing:.22em;opacity:.7}
.lg-tag p{margin:6px 0 0;font-size:21px;font-weight:700;line-height:1.35}

/* ---------- ฝั่งฟอร์ม ---------- */
.lg-main{position:relative;display:flex;flex-direction:column;padding:26px 9% 26px}
.lg-spot{height:104px;flex:none}
.lg-view{position:relative;flex:1}
.lg-stage{max-width:400px}
.lg-ast{width:28px;height:28px;color:#ff6a3d;margin-bottom:12px}.lg-ast svg{width:100%;height:100%}
.lg-h{margin:0;font-size:28px;font-weight:700;letter-spacing:-.01em;color:#15171c;line-height:1.25;transition:color .3s}
.lg-h.lg-okt{color:#15803d}.lg-h.lg-badt{color:#dc2626}
.lg-s{margin:7px 0 0;color:#6b7280;font-size:14px;line-height:1.6}.lg-s b{color:#15171c;font-weight:600}
.lg-form{margin-top:20px}
.lg-l{display:block;font-size:13px;font-weight:600;color:#15171c;margin:14px 0 7px}
.lg-lrow{display:flex;justify-content:space-between;align-items:baseline}
.lg-f{position:relative;display:flex;align-items:center;border:1.5px solid #e3e5ea;border-radius:12px;background:#fff;transition:border-color .18s,box-shadow .18s}
.lg-f>svg{width:17px;height:17px;color:#9aa0ab;margin-left:13px;flex:none;transition:color .18s}
.lg-f input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px;font:inherit;font-size:16px;color:#15171c}
.lg-f:focus-within{border-color:#15171c;box-shadow:0 0 0 4px rgba(21,23,28,.06)}.lg-f:focus-within>svg{color:#15171c}
.lg-eye{border:0;background:none;color:#9aa0ab;cursor:pointer;padding:0 12px;height:44px;display:grid;place-items:center}.lg-eye:hover{color:#15171c}.lg-eye svg{width:18px;height:18px}
.lg-link{border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:#6b7280;cursor:pointer}
.lg-link:hover{color:#15171c;text-decoration:underline}.lg-link:disabled{opacity:.6;cursor:default;text-decoration:none}
.lg-err{min-height:20px;margin-top:10px;font-size:13px;color:#dc2626;line-height:1.5}.lg-err.lg-info{color:#4b5563}.lg-err.lg-good{color:#15803d}
.lg-btn{position:relative;width:100%;height:48px;margin-top:6px;border:0;border-radius:12px;background:#15171c;color:#fff;font:inherit;font-size:15px;font-weight:700;
 cursor:pointer;overflow:hidden;box-shadow:0 10px 22px rgba(21,23,28,.18);transition:background .25s,color .25s,transform .12s,box-shadow .25s}
.lg-btn:hover{background:#2a2d35}.lg-btn:active{transform:scale(.985)}
.lg-btn:focus{outline:none}.lg-btn:focus-visible{outline:3px solid rgba(91,84,232,.35);outline-offset:2px}
.lg-btn:disabled{background:#e8e9ed;color:#9aa0ab;box-shadow:none;cursor:default}
.lg-btn.lg-go{background:#16a34a;box-shadow:0 12px 26px rgba(22,163,74,.32)}.lg-btn.lg-go:hover{background:#15803d}
.lg-btn.lg-alt{background:#fff;color:#15171c;border:1.5px solid #e3e5ea;box-shadow:none}
.lg-btn.lg-load{background:#2a2d35;pointer-events:none}
.lg-dots{display:inline-flex;gap:5px;vertical-align:middle;margin-right:9px}
.lg-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:lgdot 1s infinite}
.lg-dots i:nth-child(2){animation-delay:.15s}.lg-dots i:nth-child(3){animation-delay:.3s}
@keyframes lgdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.lg-trust,.lg-chips{display:flex;flex-wrap:wrap;gap:8px}
.lg-trust{margin-top:22px;padding-top:18px;border-top:1px dashed #e5e7eb}
.lg-chips{margin-top:14px}
.lg-trust span,.lg-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#4b5563;background:#f6f7f9;border:1px solid #eceef2;border-radius:999px;padding:5px 11px}
.lg-trust svg,.lg-chips svg{width:13px;height:13px}
.lg-meter{display:flex;gap:5px;margin-top:8px}.lg-meter i{flex:1;height:4px;border-radius:4px;background:#eceef2;transition:background .25s}
.lg-meter.s1 i:nth-child(-n+1){background:#ef4444}.lg-meter.s2 i:nth-child(-n+2){background:#f59e0b}
.lg-meter.s3 i:nth-child(-n+3){background:#84cc16}.lg-meter.s4 i:nth-child(-n+4){background:#16a34a}
.lg-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:12.5px;color:#6b7280;min-height:20px}
.lg-meta b{color:#15171c}.lg-meta .lg-late{color:#dc2626}
.lg-hint{text-align:center;color:#9aa0ab;font-size:12px;margin:12px 0 0}
.lg-foot{margin:18px 0 0;text-align:center;color:#a3a8b2;font-size:11.5px}
.lg-qr{display:flex;gap:14px;align-items:center;margin-top:16px;padding:12px;border:1px solid #eceef2;border-radius:16px;background:#fafbfc}
.lg-qr-img{flex:none;background:#fff;border-radius:12px;padding:6px;line-height:0;border:1px solid #eceef2}.lg-qr-img svg{width:132px;height:132px}
.lg-qr-t{font-size:12px;color:#6b7280;display:flex;flex-direction:column;gap:6px;min-width:0;line-height:1.5}.lg-qr-t a{color:#5b54e8;font-weight:700}
.lg-qr-t code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#15171c;background:#fff;border:1px solid #eceef2;border-radius:8px;padding:6px 8px;word-break:break-all;user-select:all}
.lg-warn{font-size:12px;color:#b45309;margin:8px 0 0}

/* ---------- ช่อง OTP ---------- */
.ob-wrap{position:relative;margin-top:24px}
.ob-row{position:relative;display:inline-flex;gap:10px}
.ob{--w:clamp(40px,10.5vw,52px);width:var(--w);height:58px;border:1.5px solid #e3e5ea;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;
 position:relative;transition:border-color .18s,box-shadow .18s,background .2s;will-change:transform}
.ob.fill{border-color:#cdd1d8}
.ob.on{border-color:#15171c;box-shadow:0 0 0 4px rgba(21,23,28,.07)}
.ob.bad{border-color:#ef4444;background:#fff5f5}
.ob-d{font-size:23px;font-weight:700;color:#15171c;font-variant-numeric:tabular-nums}
.ob-caret{position:absolute;width:2px;height:24px;border-radius:2px;background:#15171c;opacity:0}
.ob.on .ob-caret{animation:obblink 1s steps(1) infinite}@keyframes obblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ob-in{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;cursor:text;z-index:2}
.ob-seal{position:absolute;top:0;width:58px;height:58px;opacity:0;pointer-events:none}
.ob-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ob-seal-r{fill:#15171c;stroke:#15171c;stroke-width:1.5;transition:fill .35s,stroke .35s}
.ob-seal.ob-ok .ob-seal-r{fill:#16a34a;stroke:#16a34a}.ob-seal.ob-bad .ob-seal-r{fill:#ef4444;stroke:#ef4444}
.ob-spin{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.28 .72;transform-origin:29px 29px;opacity:0}
.ob-check,.ob-x{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.ob-ripple{position:absolute;inset:-2px;border-radius:17px;border:2px solid #22c55e;opacity:0}
.ob-sparks{position:absolute;left:50%;top:50%;width:0;height:0}
.ob-sparks i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#22c55e;opacity:0}
.ob-sparks i:nth-child(3n){background:#ff6a3d}.ob-sparks i:nth-child(3n+1){background:#7c74f5}

/* ---------- มาสคอต ---------- */
.mo{position:absolute;left:0;top:0;width:64px;height:64px;z-index:6;pointer-events:none;will-change:transform}
.mo-bob{animation:mobob 2.6s ease-in-out infinite}
@keyframes mobob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mo-ball{position:relative;width:64px;height:64px;border-radius:50%;
 background:radial-gradient(circle at 34% 28%,#dcdaff 0%,#a19cff 22%,#6d65f1 55%,#4b42d6 85%,#3d34c4 100%);
 box-shadow:inset -7px -9px 16px rgba(34,18,140,.35),inset 5px 6px 12px rgba(255,255,255,.35),0 16px 28px rgba(91,84,232,.32)}
.mo-ball::before{content:"";position:absolute;left:13px;top:9px;width:18px;height:10px;border-radius:50%;background:rgba(255,255,255,.6);filter:blur(1px);transform:rotate(-25deg)}
.mo-face{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mo-look{transition:transform .25s ease}
.mo-blink{transform-box:fill-box;transform-origin:center}
.e-open{fill:#fff}
.e-happy,.e-sad,.m-grin,.m-flat,.m-o{display:none}
.e-happy{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.e-sad{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.m-smile,.m-flat{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.m-grin,.m-o{fill:#fff}
.cheek{fill:#ff8fb1;opacity:.35;transition:opacity .3s}
.mo[data-mood=happy] .e-open,.mo[data-mood=happy] .m-smile{display:none}
.mo[data-mood=happy] .e-happy,.mo[data-mood=happy] .m-grin{display:inline}.mo[data-mood=happy] .cheek{opacity:.75}
.mo[data-mood=sad] .e-sad,.mo[data-mood=sad] .m-flat{display:inline}.mo[data-mood=sad] .m-smile{display:none}
.mo[data-mood=think] .m-smile{display:none}.mo[data-mood=think] .m-o{display:inline}
.mo-paw{position:absolute;bottom:-6px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#b8b4ff,#6c64f0 70%);
 box-shadow:0 4px 8px rgba(60,50,200,.25);transition:transform .38s cubic-bezier(.3,1.5,.5,1)}
.mo-paw.l{left:8px}.mo-paw.r{right:8px}
.mo[data-mood=shy] .mo-paw.l,.mo[data-mood=peek] .mo-paw.l{transform:translate(9px,-31px)}
.mo[data-mood=shy] .mo-paw.r{transform:translate(-9px,-31px)}
.mo[data-mood=peek] .mo-paw.r{transform:translate(-3px,-15px) rotate(-12deg)}
.mo-shadow{position:absolute;left:12px;right:12px;bottom:-14px;height:8px;border-radius:50%;background:rgba(40,30,120,.18);filter:blur(3px);animation:moshadow 2.6s ease-in-out infinite}
@keyframes moshadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.8);opacity:.55}}
.mo-bub{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);white-space:nowrap;background:#5b54e8;color:#fff;font-size:11.5px;font-weight:700;
 padding:5px 12px;border-radius:999px;box-shadow:0 8px 18px rgba(91,84,232,.3);opacity:0}
.mo-bub::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#5b54e8}

@media (prefers-reduced-motion:reduce){.gc,.mo-bob,.mo-shadow,.gc-pill i{animation:none}}
@media (max-width:860px){
 #login.auth{padding:14px 12px}
 .lg{grid-template-columns:1fr;min-height:0;padding:0;border-radius:24px}
 .lg-art{display:none}
 .lg-main{padding:14px 20px 22px}
 .lg-h{font-size:24px}
}