#lex-login-demo { --otp-bg:#e8edf3; --otp-surface:#e3e9f0; --otp-text:#26364b; --otp-muted:#536478; --otp-edge:#acb9c9; --otp-accent:#16819c; --otp-electric:#54e3e6; --otp-shadow:#b6c1d0; --otp-light:#fff; --otp-error:#a42842; --otp-success:#147559; --otp-speed:6s; color-scheme:light; font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans Thai",Tahoma,sans-serif; color:var(--otp-text); line-height:1.6; font-size:16px; }
#lex-login-demo * { box-sizing:border-box; }
#lex-login-demo button, #lex-login-demo input { font:inherit; }
#lex-login-demo button { touch-action:manipulation; }
#lex-login-demo .otp-scene { background:var(--otp-bg); padding:48px 22px 28px; min-height:100vh; }
#lex-login-demo .otp-chrome { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 16px; max-width:460px; margin:0 auto 20px; }
#lex-login-demo .otp-brand { font-size:17px; font-weight:650; letter-spacing:-.4px; }
#lex-login-demo .otp-brand span { color:var(--otp-accent); }
#lex-login-demo .otp-demo { font-size:12px; color:var(--otp-muted); }
#lex-login-demo .otp-electric-frame { position:relative; isolation:isolate; overflow:clip; max-width:460px; margin:auto; padding:2px; border-radius:28px; background:var(--otp-surface); box-shadow:12px 12px 28px color-mix(in srgb,var(--otp-shadow) 70%,transparent),-10px -10px 24px color-mix(in srgb,var(--otp-light) 70%,transparent); }
#lex-login-demo .otp-electric-frame::before { content:""; position:absolute; z-index:0; left:-65%; top:-65%; width:230%; height:230%; background:conic-gradient(from 0deg,transparent 0deg,transparent 220deg,color-mix(in srgb,var(--otp-electric) 20%,transparent) 270deg,var(--otp-electric) 313deg,transparent 323deg); animation:login-electric var(--otp-speed) linear infinite; pointer-events:none; }
#lex-login-demo .otp-electric-frame[data-status="checking"] { --otp-electric:#f0c330; --otp-accent:#88620c; }
#lex-login-demo .otp-electric-frame[data-status="checking"]::before { animation-duration:2.2s; }
#lex-login-demo .otp-electric-frame[data-status="success"] { --otp-electric:#36dc70; --otp-accent:#177443; }
#lex-login-demo .otp-electric-frame[data-status="success"]::before { animation-duration:3.5s; }
#lex-login-demo .otp-electric-frame[data-status="error"] { --otp-electric:#ed6b88; }
#lex-login-demo .otp-panel { position:relative; z-index:1; margin:0; padding:34px 30px 22px; background:var(--otp-surface); border:0; border-radius:26px; }
#lex-login-demo .otp-heading { text-align:center; }
#lex-login-demo .otp-step { color:var(--otp-accent); font-size:13px; font-weight:600; letter-spacing:.02em; margin:0 0 8px; }
#lex-login-demo h2 { color:var(--otp-text); font-size:28px; line-height:1.4; font-weight:650; letter-spacing:-.7px; margin:0 0 8px; }
#lex-login-demo .otp-intro { margin:0; color:var(--otp-muted); font-size:15px; overflow-wrap:anywhere; }
#lex-login-demo .otp-intro strong { color:var(--otp-text); font-weight:500; }
#lex-login-demo .otp-stage { position:relative; min-height:138px; display:grid; align-items:center; }
#lex-login-demo .otp-inputs { min-width:0; border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
#lex-login-demo .otp-inputs input { width:100%; min-width:0; height:62px; appearance:none; border:0; outline:none; border-radius:13px; background:var(--otp-surface); color:var(--otp-text); box-shadow:inset 6px 6px 10px #adb7c7,inset -6px -6px 10px #fbfdff; text-align:center; padding:0; font-size:25px; font-weight:600; caret-color:var(--otp-text); transition:box-shadow .22s ease; }
/* The active digit is lit by a soft halo; its inset relief stays visible, without an outline. */
#lex-login-demo .otp-inputs input:focus { outline:none; box-shadow:inset 6px 6px 10px #adb7c7,inset -6px -6px 10px #fbfdff,0 0 11px 3px color-mix(in srgb,var(--otp-electric) 58%,transparent),0 0 23px 5px color-mix(in srgb,var(--otp-electric) 18%,transparent); }
#lex-login-demo .otp-inputs input[aria-invalid="true"] { box-shadow:inset 6px 6px 10px #adb7c7,inset -6px -6px 10px #fbfdff,0 0 12px 2px color-mix(in srgb,var(--otp-error) 38%,transparent); }
#lex-login-demo .otp-inputs input[aria-invalid="true"]:focus { box-shadow:inset 6px 6px 10px #adb7c7,inset -6px -6px 10px #fbfdff,0 0 13px 4px color-mix(in srgb,var(--otp-error) 52%,transparent); }
#lex-login-demo :is(.login-email,button):focus-visible { outline:2px solid var(--otp-accent); outline-offset:3px; }
#lex-login-demo .otp-inputs input:disabled { opacity:.7; }
#lex-login-demo .otp-state-stack { display:grid; }
#lex-login-demo .otp-entry, #lex-login-demo .otp-complete { grid-area:1 / 1; min-width:0; }
#lex-login-demo .otp-entry[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
#lex-login-demo .otp-complete { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:24px; }
#lex-login-demo .otp-result { display:flex; flex-direction:column; align-items:center; gap:20px; }
#lex-login-demo .otp-check-float { animation:otp-success-float 3s ease-in-out .55s infinite; }
#lex-login-demo .otp-check { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:#199e4b; color:#fff; font-size:42px; font-weight:600; box-shadow:0 0 20px 4px #36dc7040; animation:otp-success-pop .55s cubic-bezier(.2,.7,.25,1) both; }
#lex-login-demo .otp-result h2 { margin:0; color:#177443; animation:otp-success-arrive .45s ease-out both; }
#lex-login-demo .otp-result p { margin:0; color:var(--otp-muted); font-size:15px; max-width:280px; animation:otp-success-arrive .45s ease-out .1s both; }
#lex-login-demo .otp-return { margin:0; }
#lex-login-demo .otp-electric-frame[data-status="checking"] .otp-spin { color:#88620c; }
#lex-login-demo .otp-status { min-height:46px; text-align:center; color:var(--otp-muted); margin:0 0 10px; font-size:14px; }
#lex-login-demo .otp-status[data-error="true"] { color:var(--otp-error); }
#lex-login-demo .otp-main { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:11px 16px; border:1px solid color-mix(in srgb,var(--otp-light) 80%,transparent); border-radius:14px; background:var(--otp-surface); color:var(--otp-text); font-weight:650; box-shadow:5px 5px 12px var(--otp-shadow),-5px -5px 12px var(--otp-light); transition:box-shadow .15s ease,transform .15s ease; }
#lex-login-demo .otp-main:active:not(:disabled) { transform:translateY(1px); box-shadow:inset 3px 3px 7px var(--otp-shadow),inset -3px -3px 7px var(--otp-light); }
#lex-login-demo .otp-main:disabled { opacity:.65; }
#lex-login-demo .otp-link { display:block; margin:12px auto 0; min-height:44px; padding:8px 12px; border:0; background:transparent; color:var(--otp-text); text-decoration:underline; text-underline-offset:4px; font-size:14px; }
#lex-login-demo .otp-link:disabled { opacity:.55; }
#lex-login-demo .otp-footer { max-width:460px; margin:18px auto 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; color:var(--otp-muted); font-size:12px; }
#lex-login-demo .otp-spin { width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:login-electric .8s linear infinite; }
#lex-login-demo .otp-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes login-electric { to { transform:rotate(360deg); } }
@keyframes otp-success-pop { 0% { opacity:0; transform:scale(.78); } 70% { opacity:1; transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
@keyframes otp-success-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes otp-success-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #lex-login-demo *,#lex-login-demo *::before,#lex-login-demo *::after { animation:none!important; transition:none!important; } }
@media(max-width:410px) { #lex-login-demo .otp-scene { padding:18px 12px 16px; border-radius:18px; } #lex-login-demo .otp-panel { padding:26px 16px 18px; } #lex-login-demo .otp-inputs { gap:6px; } #lex-login-demo .otp-inputs input { height:48px; font-size:22px; border-radius:10px; } #lex-login-demo h2 { font-size:25px; } #lex-login-demo .otp-chrome { justify-content:center; } #lex-login-demo .otp-footer { justify-content:center; } }

#lex-login-demo .login-form { margin-top:28px; }
#lex-login-demo .login-label { display:block; font-size:15px; font-weight:600; margin-bottom:8px; }
#lex-login-demo .login-email { width:100%; min-height:54px; border:1px solid var(--otp-edge); border-radius:14px; background:var(--otp-surface); color:var(--otp-text); padding:12px 15px; box-shadow:inset 4px 4px 8px var(--otp-shadow),inset -4px -4px 8px var(--otp-light); }
#lex-login-demo .login-email[aria-invalid="true"] { border-color:var(--otp-error); }
#lex-login-demo .login-helper { color:var(--otp-muted); font-size:13px; margin:10px 0 20px; }
#lex-login-demo .login-divider { display:flex; align-items:center; gap:16px; color:var(--otp-muted); font-size:13px; margin:22px 0; }
#lex-login-demo .login-divider::before,#lex-login-demo .login-divider::after { content:""; height:1px; background:var(--otp-edge); flex:1; opacity:.65; }
#lex-login-demo .login-google { font-weight:500; box-shadow:3px 3px 8px var(--otp-shadow),-3px -3px 8px var(--otp-light); }
#lex-login-demo .login-g { color:#326aba; font-weight:750; font-size:21px; }
#lex-login-demo .login-status { min-height:26px; margin:12px 0 0; font-size:14px; text-align:center; color:var(--otp-muted); }
#lex-login-demo .login-status[data-error="true"] { color:var(--otp-error); }
#lex-login-demo .demo-code { letter-spacing:3px; color:var(--otp-text); font-size:17px; }
#lex-login-demo .otp-demo { border-radius:20px; background:#dbe5eb; padding:4px 10px; font-size:13px; }
#lex-login-demo .otp-footer { justify-content:center; font-size:13px; text-align:center; }
#lex-login-demo button { cursor:pointer; }
#lex-login-demo button:disabled { cursor:default; }

body{margin:0}