:root{--navy:#222e59;--navy-line:#4a5780;--yellow:#ffd20a;--ink:#26345b;--muted:#63708a;--line:#dce1ec;--white:#fff;--ok-live:#5fd39b;--err:#bd4141;--err-ink:#7d2323;--err-wash:#fdeaea;--warn:#a87700;--warn-ink:#6e4f00;--warn-wash:#fff3cc}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(600px 300px at 15% 110%,#ffd20a22,transparent 70%),radial-gradient(500px 260px at 90% -10%,#5f74b833,transparent 70%),var(--navy);color:var(--ink);font:14px/1.5 'Noto Sans Thai',Tahoma,sans-serif}
.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--white);border-radius:16px;padding:36px 32px 28px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;box-shadow:0 30px 80px #0b123066}
.login-snow{position:fixed;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.login-snow-flake{position:absolute;top:-80px;opacity:var(--snow-opacity);animation:login-snow-fall var(--snow-duration) linear infinite;animation-delay:var(--snow-delay)}
.login-snow-flake img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;animation:login-snow-sway var(--sway-duration) ease-in-out infinite alternate;animation-delay:var(--sway-delay)}
.login-snow.is-paused .login-snow-flake,.login-snow.is-paused img{animation-play-state:paused}
@keyframes login-snow-fall{from{transform:translate3d(0,-40px,0)}to{transform:translate3d(0,calc(100dvh + 160px),0)}}
@keyframes login-snow-sway{from{transform:translateX(-14px) rotate(-18deg)}to{transform:translateX(16px) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.login-snow-flake,.login-snow-flake img{animation-play-state:paused}}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy)}
.brand img{width:28px;height:28px;object-fit:contain}
.brand strong{font-size:20px;letter-spacing:-.6px}
h1{width:100%;text-align:left;margin:0;font-size:15px;font-weight:500;color:var(--muted)}
hr{width:100%;margin:2px 0;border:0;border-top:1px solid var(--line)}
.google-button{min-height:44px;display:flex;justify-content:center}
.google-button.busy{opacity:.5;pointer-events:none}
.progress{margin:0;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--navy);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.message{width:100%;display:flex;gap:10px;padding:10px 12px;border-radius:10px;text-align:left;font-size:12.5px;line-height:1.6;background:var(--err-wash);color:var(--err-ink)}
.message strong{display:block;font-size:13px}
.message-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--white);background:var(--err)}
.message[data-tone=warn]{background:var(--warn-wash);color:var(--warn-ink)}
.message[data-tone=warn] .message-icon{background:var(--warn)}
.rule{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.rule::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px var(--navy) inset}
.foot{margin:0;font-size:11px;color:var(--muted)}
.password-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.password-toggle{border:0;background:none;padding:2px 4px;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.password-toggle:hover{color:var(--navy)}
.password-form{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
.password-form label{font-size:12px;color:var(--muted)}
.password-form input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:var(--white)}
.password-form input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px #222e5922}
.password-form button[type=submit]{margin-top:8px;padding:10px 12px;border:0;border-radius:999px;background:var(--navy);color:var(--white);font:inherit;font-weight:600;cursor:pointer}
.password-form button[type=submit]:hover{background:#35446f}
.password-form button[type=submit]:disabled{opacity:.5;cursor:progress}
button:focus-visible{outline:3px solid #c49a00;outline-offset:2px}

.login-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.environment-menu{position:relative;flex-shrink:0;text-align:left}
.environment-menu summary{display:flex;align-items:center;gap:7px;list-style:none;padding:6px 8px;border:1px solid var(--line);border-radius:6px;color:var(--navy);font-size:12px;cursor:pointer}
.environment-menu summary::-webkit-details-marker{display:none}
.environment-menu summary:hover{background:#f4f6fa}
.environment-menu summary:focus-visible{outline:3px solid #c49a00;outline-offset:2px}
.environment-menu summary[aria-disabled=true]{opacity:.5;cursor:progress}
.environment-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1px #a58600}
.environment-chevron{font-size:14px;line-height:1}
.environment-popup{position:absolute;right:0;top:calc(100% + 8px);z-index:2;width:228px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--white);box-shadow:0 10px 32px #10182c26}
.environment-popup button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:0;border-radius:5px;background:var(--white);color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.environment-popup button:hover,.environment-popup button[aria-pressed=true]{background:#f4f6fa}
.environment-popup small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.environment-check{color:var(--navy)}
@media(max-width:400px){.login-card{padding:28px 20px 24px}.login-header{gap:8px}.brand{gap:6px}.brand img{width:24px;height:24px}.brand strong{font-size:18px}.environment-menu summary{gap:5px;padding:6px}}
@media(max-height:600px){.login-card{padding-top:24px;padding-bottom:24px}}