:root{color-scheme:light;--auth-bg:#f8f9fb;--auth-card:#fff;--auth-text:#202b2a;--auth-muted:#73807c;--auth-line:#dfe5e2;--auth-field:#fff;--auth-accent:#dcb951;--auth-error:#a93830;--auth-error-bg:#fff1ef;--auth-ok:#277251;--auth-ok-bg:#edf8f1}
*{box-sizing:border-box}body{margin:0;background:var(--auth-bg);color:var(--auth-text);font:18px/1.7 'Noto Sans Thai',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button{cursor:pointer}.auth-shell{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(460px,1.08fr);min-height:100svh}.auth-story{background:#18382e;color:#edf3ed;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.auth-story:before,.auth-story:after{content:'';position:absolute;pointer-events:none;width:540px;height:540px;border:1px solid #ffffff08;border-radius:50%;right:-330px;top:15%}.auth-story:after{width:690px;height:690px;right:-400px;top:5%}.auth-brand{display:inline-flex;align-items:center;gap:11px;position:relative;z-index:1;width:fit-content}.auth-brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#e4c46a;color:#18382e}.auth-brand-mark svg{width:24px;height:24px}.auth-brand strong{font-size:16px;letter-spacing:-.3px;font-weight:600}.auth-brand small{display:block;color:#a7bdb1;font-size:16px;letter-spacing:2px;line-height:1.4}.auth-story-content{position:relative;z-index:1;max-width:400px;margin:65px 0}.auth-eyebrow{font-size:16px;letter-spacing:2px;color:#b9c8b9}.auth-story h2{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.5;letter-spacing:-1.5px;margin:15px 0}.auth-story-content>p{font-size:16px;color:#b3c5b9;max-width:330px;line-height:1.9}.auth-route{display:flex;align-items:center;gap:9px;margin:32px 0;padding:17px 18px;border:1px solid #54705c80;border-radius:14px;background:#ffffff04;max-width:330px}.auth-route span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e4c46a;color:#18382e;font-size:18px;font-weight:600}.auth-route div{flex:1}.auth-route small{display:block;color:#9db7a5;font-size:16px}.auth-route strong{font-size:16px;font-weight:500}.auth-route i{font-style:normal;font-size:17px;color:#a8bca9;margin:0 7px}.auth-story-list{display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none;color:#c0d0c3;font-size:16px}.auth-story-list li{display:flex;gap:9px;align-items:center}.auth-story-list li:before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border:1px solid #56755e;border-radius:50%;color:#d2c785;font-size:16px}.auth-story-footer{font-size:16px;color:#91ab9a;display:flex;justify-content:space-between;gap:14px;position:relative;z-index:1}.auth-main{display:flex;flex-direction:column;min-width:0;padding:28px 48px}.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;color:var(--auth-muted)}.auth-area{width:100%;max-width:410px;margin:auto;padding:55px 0}.auth-card{background:transparent;border:0;padding:0;margin:0;max-width:none}.auth-card h1{font-size:29px;font-weight:600;line-height:1.5;letter-spacing:-.8px;margin:8px 0}.auth-card>p{color:var(--auth-muted);font-size:16px;margin:0 0 30px}.auth-form-label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--auth-line);padding:4px 10px;border-radius:30px;color:var(--auth-muted);font-size:16px;letter-spacing:1px;margin-bottom:8px}.auth-form-label:before{content:'';width:5px;height:5px;background:#3b8060;border-radius:50%}label{display:block;margin:17px 0 7px;font-size:16px;font-weight:500}input,select{width:100%;padding:12px 14px;color:var(--auth-text);background:var(--auth-field);border:1px solid var(--auth-line);border-radius:9px;outline:none;min-width:0;transition:border-color .15s,box-shadow .15s}input::placeholder{color:#98a29d}input:focus,select:focus{border-color:#779988;box-shadow:0 0 0 3px #729e8215}input[type=checkbox]{width:auto;accent-color:#355d45}input[type=password],input[type=email]{font-family:'Noto Sans Thai',sans-serif}.auth-password{position:relative}.auth-password input{padding-right:76px}.auth-password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:auto!important;margin:0!important;padding:5px 8px!important;border:0;background:transparent!important;color:var(--auth-muted)!important;font-size:16px!important;box-shadow:none!important;font-weight:400!important}.auth-card form>button,.auth-card .primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid #d1ad46;border-radius:9px;background:#e6c565;color:#26362b;padding:12px 14px;font-weight:600;margin-top:25px;box-shadow:0 3px 6px #202b2a06;transition:background .15s,transform .15s}.auth-card form>button:hover{background:#edcf7c;transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:2px solid #799783;outline-offset:3px}.auth-card .muted{font-size:16px;color:var(--auth-muted);line-height:1.8}.auth-card .auth-switch{border-top:1px solid var(--auth-line);padding-top:22px;margin:26px 0 0;text-align:center;font-size:16px;color:var(--auth-muted)}.auth-switch a{color:var(--auth-text);font-weight:500;margin-left:4px}.auth-alert,.alert{padding:10px 13px;border-radius:8px;margin:12px 0 18px;font-size:16px;background:var(--auth-error-bg);color:var(--auth-error);border:1px solid #e0a39840}.alert.ok,.auth-alert.ok{background:var(--auth-ok-bg);color:var(--auth-ok);border-color:#7cab8c40}.auth-bottom{text-align:center;font-size:16px;color:var(--auth-muted);padding:10px 0}.auth-bottom a{margin:0 7px}.auth-card .qr{display:flex;justify-content:center;margin:20px 0}.auth-card .qr canvas,.auth-card .qr img{background:white;padding:8px;border-radius:8px}.auth-card code{word-break:break-all;font-size:16px}.auth-card input[autocomplete=one-time-code]{text-align:center;letter-spacing:8px;font-size:24px;padding:12px}.auth-register .auth-area{padding:30px 0}.auth-register .auth-story{position:sticky;top:0;height:100svh}.auth-wallet-note{border-radius:8px;background:var(--auth-bg);padding:10px 12px}.auth-wallet-confirm{display:flex;align-items:flex-start;gap:9px;font-size:16px;font-weight:400;color:var(--auth-muted)}.auth-wallet-confirm input{margin-top:5px}.auth-mobile-brand{display:none}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--auth-bg:#141a19;--auth-card:#1a211e;--auth-text:#e3eae5;--auth-muted:#93a39a;--auth-line:#303e36;--auth-field:#1b2420;--auth-error:#f3a39a;--auth-error-bg:#34221e;--auth-ok:#8ac69d;--auth-ok-bg:#1d3023}.auth-story{background:#102a21}.auth-wallet-note{background:#1b2420}}@media(max-width:900px){.auth-story{padding:32px}.auth-main{padding:26px 32px}.auth-shell{grid-template-columns:minmax(300px,.85fr) minmax(380px,1.15fr)}.auth-story h2{font-size:30px}.auth-route{padding:13px}}@media(max-width:720px){.auth-shell{display:block;min-height:100svh}.auth-story{display:none}.auth-main{min-height:100svh;padding:22px}.auth-mobile-brand{display:inline-flex;align-items:center;gap:8px;color:var(--auth-text);font-weight:600;font-size:16px}.auth-mobile-brand .auth-brand-mark{width:29px;height:29px;border-radius:8px}.auth-mobile-brand svg{width:20px;height:20px}.auth-topbar{font-size:16px}.auth-area{padding:38px 0;max-width:400px}.auth-card h1{font-size:27px}.auth-register .auth-area{padding:28px 0}.auth-story-footer{display:none}}@media(prefers-reduced-motion:reduce){input,select,button{transition:none!important}.auth-card form>button:hover{transform:none}}

/* Decorative payment flow: scoped to the left authentication panel. */
.auth-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auth-ambient span{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#b8d79d16,transparent 68%);top:8%;left:-130px;animation:auth-drift 16s ease-in-out infinite alternate}
.auth-ambient span+span{width:440px;height:440px;top:auto;left:auto;right:-180px;bottom:3%;background:radial-gradient(circle,#e4c46a12,transparent 68%);animation-delay:-8s}
.auth-route .auth-coin{flex-shrink:0;animation:auth-coin-float 4s ease-in-out infinite}
.auth-route .auth-transfer{display:block;flex:0 0 48px;height:20px;position:relative;margin:0 2px;overflow:hidden}
.auth-transfer:before{content:'';position:absolute;left:0;right:0;top:9px;height:1px;background:#78928065}
.auth-transfer:after{content:'';position:absolute;right:1px;top:6px;width:6px;height:6px;border-top:1px solid #a8bca9;border-right:1px solid #a8bca9;transform:rotate(45deg)}
.auth-transfer b{position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:#e4c46a;opacity:0;animation:auth-send 3s linear infinite}
.auth-transfer b:nth-child(2){animation-delay:1s}.auth-transfer b:nth-child(3){animation-delay:2s}
.auth-destination strong{animation:auth-credit-glow 3s ease-in-out infinite}
.auth-motion-toggle{font:inherit;color:#b9ccbf;background:transparent;border:0;border-bottom:1px dotted #789280;padding:0;white-space:nowrap}
.auth-motion-toggle:hover{color:#e4c46a}
.auth-motion-paused *{animation-play-state:paused!important}
@keyframes auth-drift{to{transform:translate(50px,35px) scale(1.12)}}
@keyframes auth-coin-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes auth-send{0%{transform:translateX(0);opacity:0}15%,75%{opacity:1}100%{transform:translateX(42px);opacity:0}}
@keyframes auth-credit-glow{0%,100%{color:#edf3ed}50%{color:#e4c46a}}
@media(prefers-reduced-motion:reduce){.auth-story *{animation:none!important}.auth-transfer b{display:none}.auth-motion-toggle{display:none}}
@media(max-width:720px){.auth-story *{animation:none!important}}

/* Login composition: large animated illustration and focused form. */
.auth-shell{grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
.auth-story{padding:34px clamp(32px,4vw,76px);background:radial-gradient(ellipse at 35% 45%,#244f40 0%,#163a2e 45%,#10291f 100%)}
.auth-story:before{width:680px;height:680px;right:-290px;top:10%;border-color:#b9d19c0b}.auth-story:after{width:850px;height:850px;right:-375px;top:0;border-color:#b9d19c09}
.auth-story-content{max-width:570px;width:100%;margin:38px auto 30px}
.auth-eyebrow{font-size:16px;letter-spacing:2.5px;color:#c3cea9}
.auth-story h2{font-size:clamp(32px,3.2vw,51px);line-height:1.4;letter-spacing:-1.5px;font-weight:500;margin:17px 0 14px}
.auth-story h2 em{font-style:normal;color:#e8cf8a}
.auth-story-content>p{max-width:370px;font-size:16px;line-height:1.9;color:#afc5b6;margin:0}
.auth-visual{width:100%;margin:12px 0 19px;position:relative}
.auth-flow-art{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 22px #061b1925)}
.auth-large-coin{animation:auth-hero-coin 5s ease-in-out infinite;transform-origin:140px 147px}
.auth-game-card{animation:auth-hero-card 6s ease-in-out infinite;transform-origin:400px 160px}
.auth-flow-stream{animation:auth-flow-dash 2s linear infinite}
.auth-floating-label{animation:auth-label-float 5s ease-in-out -2s infinite}
.auth-sparkle{animation:auth-sparkle-glow 4s ease-in-out infinite;transform-origin:center}
.auth-received-dot{animation:auth-dot-glow 3s ease-in-out infinite}
.auth-visual-caption{display:block;text-align:center;color:#91b09a;font-size:16px;letter-spacing:2.4px;margin-top:-8px}
.auth-visual-caption span{padding:0 12px;color:#e8cf8a}
.auth-feature-row{display:flex;align-items:center;justify-content:center;gap:16px;color:#c2d0bd;font-size:16px}
.auth-feature-row i{font-style:normal;color:#78977e}
.auth-story-footer{font-size:16px;align-items:center}
.auth-main{padding:30px clamp(28px,4vw,68px);background:var(--auth-bg)}
.auth-area{max-width:375px;padding:44px 0}
.auth-card h1{font-size:30px;letter-spacing:-.9px;margin:10px 0}
.auth-card>p{font-size:16px;line-height:1.8;margin-bottom:28px}
.auth-card label{font-size:16px;margin-top:20px;margin-bottom:8px}
.auth-card input,.auth-card select{padding:13px 14px;border-radius:10px}
.auth-password input{padding-right:76px}
.auth-card form>button,.auth-card .primary{padding:13px 16px;margin-top:27px;border-radius:10px;background:#e6c565;box-shadow:0 5px 15px #8c743515}
.auth-form-label{border:0;padding:0;font-size:16px;letter-spacing:2px;margin-bottom:3px}
.auth-form-label:before{width:6px;height:6px;margin-right:3px}
.auth-topbar{font-size:16px}.auth-bottom{font-size:16px}
@keyframes auth-hero-coin{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes auth-hero-card{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(8px) rotate(-1deg)}}
@keyframes auth-flow-dash{to{stroke-dashoffset:-64}}
@keyframes auth-label-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes auth-sparkle-glow{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes auth-dot-glow{0%,100%{opacity:.45}50%{opacity:1}}
@media(min-width:1500px){.auth-story-content{max-width:620px}.auth-visual{margin:18px 0 25px}.auth-area{max-width:400px}}
@media(max-width:1000px) and (min-width:721px){.auth-story{padding:30px}.auth-shell{grid-template-columns:minmax(0,1fr) minmax(360px,1fr)}.auth-main{padding:26px 30px}.auth-story h2{font-size:34px}.auth-feature-row{gap:10px;font-size:16px}}
@media(max-height:780px) and (min-width:721px){.auth-story{padding-top:24px;padding-bottom:24px}.auth-story-content{margin:22px auto}.auth-story h2{font-size:35px;margin:12px 0 10px}.auth-visual{max-width:460px;margin:4px auto 12px}.auth-feature-row{font-size:16px}.auth-story-content>p{font-size:16px}}
@media(max-width:720px){.auth-shell{display:block}.auth-main{padding:22px;min-height:100svh}.auth-area{padding:40px 0;max-width:400px}.auth-mobile-brand{margin-bottom:22px}.auth-card h1{font-size:28px}.auth-register .auth-area{padding:25px 0}}
@media(prefers-reduced-motion:reduce){.auth-story *{animation:none!important}}
.auth-motion-paused *{animation-play-state:paused!important}

/* Keep the illustration inside the viewport instead of sizing the page from SVG width. */
html,body{max-width:100%;overflow-x:clip}
.auth-shell{min-height:100dvh}
.auth-main,.auth-story,.auth-story-content{min-width:0}
@media(min-width:721px){
    .auth-story{height:100dvh;min-height:0;padding-top:24px;padding-bottom:24px}
    .auth-brand,.auth-story-footer{flex-shrink:0}
    .auth-story-content{display:flex;flex-direction:column;flex:1;min-height:0;margin:22px auto}
    .auth-story-content>.auth-eyebrow,.auth-story-content>h2,.auth-story-content>p,.auth-feature-row{flex-shrink:0}
    .auth-visual{flex:1;min-height:0;max-height:370px;max-width:620px;margin:8px auto 14px;padding-bottom:20px}
    .auth-flow-art{width:100%;height:100%;overflow:hidden}
    .auth-visual-caption{position:absolute;bottom:0;left:0;right:0;margin:0}
    .auth-main{min-height:100dvh;padding-top:24px;padding-bottom:18px}
    .auth-area{padding-top:24px;padding-bottom:24px}
    .auth-register .auth-story{height:100dvh}
}
@media(min-width:721px) and (max-height:700px){
    .auth-story-content{margin:14px auto}
    .auth-story h2{font-size:30px;line-height:1.35;margin:9px 0}
    .auth-story-content>p{font-size:16px;line-height:1.7}
    .auth-feature-row{font-size:16px}
    .auth-area{padding-top:16px;padding-bottom:16px}
    .auth-main{padding-top:18px;padding-bottom:12px}
    .auth-card h1{font-size:26px;margin:6px 0}
    .auth-card>p{margin-bottom:18px}
    .auth-card label{margin-top:13px}
    .auth-card .auth-switch{margin-top:18px;padding-top:16px}
}
@media(max-width:720px){
    .auth-main{min-height:100dvh}
    .auth-area{padding-top:24px;padding-bottom:24px}
}
@media(max-width:720px) and (max-height:700px){
    .auth-main{padding-top:16px;padding-bottom:12px}
    .auth-area{padding-top:20px;padding-bottom:20px}
    .auth-mobile-brand{margin-bottom:12px}
    .auth-card h1{font-size:25px}
    .auth-card>p{margin-bottom:18px}
    .auth-card label{margin-top:12px}
    .auth-card .auth-switch{margin-top:18px;padding-top:16px}
}

/* Tablet and narrow landscape: give the form the available width. */
@media(min-width:721px) and (max-width:900px){
    .auth-shell{display:block;min-height:100dvh}
    .auth-story{display:none}
    .auth-main{min-height:100dvh;padding:24px 32px}
    .auth-area{max-width:420px;padding:28px 0}
    .auth-mobile-brand{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;font-size:16px;font-weight:600}
}
@media(max-width:900px){
    .auth-card input,.auth-card select{font-size:16px;min-height:46px}
    .auth-topbar a{display:inline-flex;align-items:center;min-height:44px}
    .auth-card form>button{min-height:48px}
    .auth-card .auth-switch a{display:inline-flex;align-items:center;min-height:44px}
    .auth-main{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
}