body:has(>.login-v2){margin:0}.login-v2{--bg:#f5f6f9;--surface:#fff;--surface-2:#f0f2f6;--text:#1f2a44;--muted:#6b7489;--line:#1f2a441a;--ok:#0a8a5b;--ok-bg:#e3f5ec;--danger:#a02b32;--danger-bg:#fdecec;color:var(--text);font-family:var(--font-thai),system-ui,sans-serif;line-height:1.6}:root[data-theme=dark] .login-v2{--bg:#0f1420;--surface:#171d2b;--surface-2:#1e2536;--text:#e3e7ef;--muted:#aab5c9;--line:#ffffff1f;--ok:#4fd6a0;--ok-bg:#12322a;--danger:#ff9c9c;--danger-bg:#3a1a1d}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .login-v2{--bg:#0f1420;--surface:#171d2b;--surface-2:#1e2536;--text:#e3e7ef;--muted:#aab5c9;--line:#ffffff1f;--ok:#4fd6a0;--ok-bg:#12322a;--danger:#ff9c9c;--danger-bg:#3a1a1d}}.login-v2 *{box-sizing:border-box;margin:0}.login-v2 button,.login-v2 input{font:inherit}.login-v2{--login-mint:#b8efd7;--login-ink:#183e38;background:radial-gradient(ellipse at 20% 45%,color-mix(in srgb,var(--ok-bg) 35%,transparent),transparent 60%),var(--bg);flex-direction:column;min-height:100svh;display:flex}.login-frame{background:var(--surface);isolation:isolate;flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;display:grid}.login-story{--story-gold:#f9d99c;isolation:isolate;color:#fff8eb;background:#061a38;flex-direction:column;gap:12px;min-height:max(600px,41vw);padding:clamp(24px,2.8vw,46px);display:flex;position:relative;overflow:hidden}.login-story-scene{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden;container-type:size}.login-story-art{object-fit:contain}@container (min-aspect-ratio:4/5){.login-story-art{object-fit:cover}}.login-story-scene:after{content:"";background:linear-gradient(#04132bcc,#0000 28% 67%,#04132bb8 86%,#04132bf2),radial-gradient(at 0 0,#04132b99,#0000 55%);position:absolute;inset:0}.login-story-copy{text-shadow:0 2px 12px #04132b;max-width:75%;margin-bottom:auto;animation:.6s ease-out both login-rise}.login-kicker{color:var(--story-gold);letter-spacing:.12em;align-items:center;gap:9px;font-size:10px;font-weight:600;display:flex}.login-kicker>span{background:var(--story-gold);border-radius:50%;width:6px;height:6px;box-shadow:0 0 12px #ffd08b99}.login-form-eyebrow>span{background:#b8efd7;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 4px #b8efd70c}.login-story h2{letter-spacing:-.035em;margin:9px 0 6px;font-size:clamp(24px,2.45vw,42px);font-weight:600;line-height:1.3}.login-story h2>span{color:var(--story-gold);white-space:nowrap}.login-story-copy>p{color:#edf2fa;font-size:12px;line-height:1.65}.login-story-footer{gap:12px;animation:.65s ease-out .2s both login-rise;display:grid}.login-mascot-greeting{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.login-v2 .login-mascot-button{background:linear-gradient(135deg,#ffebc5,var(--story-gold));color:#19243b;cursor:pointer;border:1px solid #fff0cc;border-radius:999px;align-items:center;gap:8px;min-height:40px;padding:8px 15px;font-size:12px;font-weight:600;transition:transform .2s,box-shadow .2s;display:inline-flex;position:relative;box-shadow:0 4px 18px #ffc86c38}.login-v2 .login-mascot-button:hover{background:#ffe9bd;transform:translateY(-2px);box-shadow:0 6px 24px #ffc86c65}.login-v2 .login-mascot-button:active{transform:scale(.97)}.login-buddy-message{color:#fff4df;text-shadow:0 2px 8px #04132b;font-size:12px}.login-buddy-message span{display:block}.login-greeting-reply{animation:.38s ease-out both login-rise}.login-greeting-spark{animation:.55s ease-out login-spark}.login-greeting-burst{pointer-events:none;position:absolute;top:38%;left:50%}.login-greeting-burst>span{color:#ffe4a0;text-shadow:0 0 9px #ffbd68;font-size:16px;animation:.8s ease-out both login-star-burst;position:absolute}.login-greeting-burst>span:first-child{--dx:-58px;--dy:-32px}.login-greeting-burst>span:nth-child(2){--dx:-22px;--dy:-52px}.login-greeting-burst>span:nth-child(3){--dx:27px;--dy:-46px}.login-greeting-burst>span:nth-child(4){--dx:57px;--dy:-25px}.login-story-lights{--scene-width:min(100cqw,80.0285cqh);z-index:1;width:var(--scene-width);aspect-ratio:1122/1402;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@container (min-aspect-ratio:4/5){.login-story-lights{--scene-width:100cqw}}.login-story-lights:before,.login-story-lights:after{content:"";pointer-events:none;opacity:0;position:absolute}.login-story-lights:before{mix-blend-mode:screen;background:radial-gradient(at 87% 20%,#ffbe6d77,#0000 17%),radial-gradient(at 10% 67%,#ffbe6d66,#0000 18%),radial-gradient(at 49% 73%,#ffbe6d55,#0000 16%);animation:3.2s ease-in-out infinite login-lantern-glow;inset:1% 0 56%}.login-story-lights:after{mix-blend-mode:screen;background:repeating-linear-gradient(176deg,#0000 0 15px,#ffd59833 17px,#0000 20px 29px);animation:2.8s ease-in-out infinite login-water-shimmer;inset:76% 0 3%;-webkit-mask-image:radial-gradient(#000 10%,#0000 68%);mask-image:radial-gradient(#000 10%,#0000 68%)}.login-story-lights>span{left:var(--x);top:var(--y);opacity:0;width:4px;height:4px;animation:login-festival-light 2.6s var(--delay) ease-out infinite;background:#fff3cc;border-radius:50%;position:absolute;box-shadow:0 0 11px 3px #ffca70}.login-story-lights>span:first-child{--x:15%;--y:64%;--delay:.2s}.login-story-lights>span:nth-child(2){--x:83%;--y:58%;--delay:.75s}.login-story-lights>span:nth-child(3){--x:22%;--y:38%;--delay:.5s}.login-story-lights>span:nth-child(4){--x:91%;--y:69%;--delay:.45s}.login-story-lights>span:nth-child(5){--x:69%;--y:52%;--delay:.9s}.login-story-lights>span:nth-child(6){--x:31%;--y:71%;--delay:.1s}.login-story-lights>span:nth-child(7){--x:78%;--y:43%;--delay:.6s}.login-story-lights>span:nth-child(8){--x:7%;--y:50%;--delay:.85s}.login-krathong-ripple{aspect-ratio:5;pointer-events:none;width:27%;position:absolute;top:75.5%;left:56%}.login-krathong-ripple:before,.login-krathong-ripple:after{content:"";opacity:0;border:1px solid #ffe3a2;border-radius:50%;animation:2.2s ease-out .4s infinite login-ripple;position:absolute;inset:0;box-shadow:0 0 6px #ffc36e}.login-krathong-ripple:after{animation-delay:1.05s}.login-camera-spark{aspect-ratio:1;opacity:0;background:radial-gradient(circle,#fffbea 0%,#ffdca6 22%,#0000 66%);width:24px;animation:7s ease-out 1.75s infinite login-camera-glint;position:absolute;top:54%;left:85%}.login-firework{left:var(--x);top:var(--y);width:5px;height:5px;color:var(--spark);opacity:0;filter:drop-shadow(0 0 6px);animation:login-firework-burst 5.8s var(--delay) ease-out infinite;background:currentColor;border-radius:50%;position:absolute;box-shadow:0 -46px,32px -32px,46px 0,32px 32px,0 46px,-32px 32px,-46px 0,-32px -32px,16px -23px,23px 16px,-16px 23px,-23px -16px}.login-firework-gold{--x:77%;--y:16%;--spark:#ffe0a1;--delay:.3s}.login-firework-pink{--x:63%;--y:25%;--spark:#ffb4e6;--delay:2s}.login-firework-cyan{--x:91%;--y:29%;--spark:#a5efff;--delay:3.7s}.login-shooting-star{opacity:0;filter:drop-shadow(0 0 4px #9bdfff);background:linear-gradient(90deg,#0000,#c5edff 75%,#fff);border-radius:999px;width:92px;height:2px;animation:7s ease-in-out 1s infinite login-shooting-star;position:absolute;top:10%;left:64%}.login-story:has(.login-effects-control input:checked) .login-story-lights{visibility:hidden}.login-story:has(.login-effects-control input:checked) .login-story-lights *{animation-play-state:paused}.login-story:has(.login-effects-control input:checked) .login-story-lights:before{animation-play-state:paused}.login-story:has(.login-effects-control input:checked) .login-story-lights:after{animation-play-state:paused}.login-story:has(.login-effects-control input:checked) .login-krathong-ripple:before{animation-play-state:paused}.login-story:has(.login-effects-control input:checked) .login-krathong-ripple:after{animation-play-state:paused}@keyframes login-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes login-festival-light{0%{opacity:0;transform:scale(.6)}45%{opacity:.9}to{opacity:0;transform:translate(10px,-38px)scale(1.25)}}@keyframes login-spark{45%{transform:scale(1.45)rotate(-16deg)}}@keyframes login-star-burst{0%{opacity:0;transform:scale(.5)}20%{opacity:1}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(32deg) scale(.7)}}@keyframes login-lantern-glow{0%,to{opacity:0}50%{opacity:.85}}@keyframes login-water-shimmer{0%,to{opacity:0}50%{opacity:.9;transform:translate(3%)}}@keyframes login-ripple{0%{opacity:0;transform:translate(-50%,-50%)scale(.55)}25%{opacity:.8}to{opacity:0;transform:translate(-50%,-50%)scale(1.35)}}@keyframes login-camera-glint{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}4%{opacity:.75;transform:translate(-50%,-50%)scale(1.4)}10%,to{opacity:0;transform:translate(-50%,-50%)scale(1.8)}}@keyframes login-firework-burst{0%{opacity:0;transform:translateY(34px)scale(.03)}7%{opacity:.8;transform:translateY(0)scale(.18)}22%{opacity:.9;transform:scale(1)}40%,to{opacity:0;transform:translateY(12px)scale(1.35)}}@keyframes login-shooting-star{0%{opacity:0;transform:translate(-105px,-42px)rotate(22deg)scaleX(.5)}8%{opacity:.9}19%,to{opacity:0;transform:translate(98px,40px)rotate(22deg)scaleX(1.15)}}.login-form-side{justify-content:center;align-items:center;padding:40px clamp(24px,4vw,65px);display:flex}.login-form-card{width:100%;max-width:380px}.login-form-intro{position:relative}.login-form-eyebrow{color:var(--muted);font:600 9px/1.5 var(--font-num),sans-serif;letter-spacing:.16em;align-items:center;gap:8px;margin-bottom:16px;display:flex}.login-form-eyebrow>span{box-shadow:none;background:#4a9f81;width:5px;height:5px}.login-form-intro h1{letter-spacing:-.035em;font-size:clamp(23px,2.3vw,31px);font-weight:600;line-height:1.4}.login-greeting-dot{color:#54a88b}.login-form-intro p{color:var(--muted);margin-top:9px;font-size:12.5px}.login-mobile-buddy{display:none}.login-form-divider{color:var(--muted);align-items:center;gap:15px;margin:30px 0 24px;font-size:10px;display:flex}.login-form-divider:after{content:"";background:var(--line);flex:1;height:1px}.login-v2 form{gap:20px;display:grid}.login-access-note{color:var(--muted);justify-content:center;align-items:center;gap:8px;margin-top:17px;font-size:10px;display:flex}.login-access-note>svg{color:var(--ok);flex:none}.login-help{border-top:1px solid var(--line);text-align:center;margin-top:28px;padding-top:20px;font-size:11px}.login-help>span{color:var(--text);font-weight:500}.login-help>p{color:var(--muted);margin-top:4px;line-height:1.7}.login-v2 :is(a,button):focus-visible{outline-offset:4px;outline:3px solid #63aa92}.login-v2 .login-mascot-button:focus-visible{outline-color:var(--story-gold)}@media (max-width:1100px){.login-form-side{padding-inline:28px}}@media (max-width:760px){.login-frame{display:flex}.login-story{display:none}.login-form-side{width:100%;padding:32px 28px}.login-form-card{max-width:none}.login-form-intro{grid-template-columns:1fr auto;align-items:center;display:grid}.login-form-intro .login-form-eyebrow{margin-bottom:0}.login-form-intro h1,.login-form-intro p{grid-column:1/-1}.login-form-intro h1{font-size:27px}.login-form-intro p{font-size:12px}.login-mobile-buddy{border-radius:14px;width:96px;height:auto;margin-bottom:8px;animation:.6s ease-out both login-rise;display:block}.login-form-divider{margin-top:25px}.login-v2 form{gap:18px}.login-help{margin-top:24px}}@media (max-width:370px){.login-form-side{padding:28px 20px}.login-form-intro h1{font-size:24px}.login-access-note{font-size:9px}}@media (min-width:761px) and (max-height:820px){.login-form-side{padding-block:24px}.login-form-divider{margin-block:19px 15px}.login-v2 form{gap:13px}.login-access-note{margin-top:12px}.login-help{margin-top:16px;padding-top:12px}}@media (max-width:760px) and (max-height:780px){.login-form-side{padding-block:24px}.login-form-divider{margin-block:19px 15px}.login-v2 form{gap:14px}.login-help{margin-top:16px;padding-top:14px}}.login-work-cards{border-top:1px solid #f9d99c4d;flex-wrap:wrap;gap:8px 18px;margin:0;padding:12px 0 0;list-style:none;display:flex}.login-work-cards li{text-shadow:0 2px 8px #04132b;align-items:center;gap:6px;font-size:11px;display:flex}.login-work-cards svg{color:var(--story-gold)}.login-effects-control{margin-inline-start:auto}.login-effects-control label{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.login-effects-control input{accent-color:var(--story-gold)}.login-effects-control input:focus-visible{outline:2px solid var(--story-gold);outline-offset:3px}.login-field label{margin-bottom:8px;font-size:12.5px;font-weight:500;display:block}.login-input{position:relative}.login-input input{border:1px solid var(--line);background:var(--surface);width:100%;height:50px;color:var(--text);border-radius:12px;padding:0 12px 0 44px;font-size:16px;display:block}.login-input input::placeholder{color:var(--muted);font-size:13px}.login-input input:focus{outline-offset:1px;outline:2px solid #63aa92}.login-input-icon{color:var(--muted);pointer-events:none;position:absolute;top:50%;left:15px;transform:translateY(-50%)}.login-password input{padding-right:54px}.login-password button{width:44px;height:44px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;display:grid;position:absolute;top:3px;right:3px}.login-password button:hover{background:var(--surface-2)}.login-v2 .login-submit{background:var(--login-mint);min-height:50px;color:var(--login-ink);cursor:pointer;border:1px solid #9ed4bb;border-radius:12px;justify-content:center;align-items:center;gap:10px;margin-top:3px;font-size:13px;font-weight:600;display:flex}.login-submit:hover{background:#a9e7cb}.login-v2 .login-submit:disabled{cursor:wait;background:#a9e7cb}.login-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;flex:none;width:17px;height:17px;animation:.7s linear infinite login-spin}@keyframes login-spin{to{transform:rotate(360deg)}}.login-error{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:10px 12px;font-size:12px}.login-field .login-caps{color:var(--muted);margin-top:4px;font-size:11px}@media (prefers-reduced-motion:reduce){.login-v2 *,.login-v2 :before,.login-v2 :after{transition:none!important;animation:none!important}.login-greeting-burst,.login-effects-control{display:none}.login-v2 .login-mascot-button:is(:hover,:active){transform:none}}