@font-face { font-family: 'Noto Sans Thai'; src: url('assets/fonts/noto-sans-thai.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; src: url('assets/fonts/noto-sans-latin.woff2') format('woff2'); font-style: normal; font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }
:root { color-scheme: dark; font-family: 'Noto Sans Thai', sans-serif; background: #101b22; color: #f6f0de; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #101b22; font-size: 16px; overflow: auto; }
#welcomeVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.welcome { position: relative; min-height: 100dvh; max-width: 460px; margin: auto; padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.welcome-pending { visibility: hidden; }
.session-loader { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #101b22; color: #f2ff82; transition: opacity .18s ease, visibility .18s ease; }
.session-loader::before { content: ''; position: absolute; inset: 0; background: url('assets/webLogo.webp') center 38% / min(230px, 62vw) auto no-repeat; opacity: .95; }
.session-loader-spinner { position: relative; width: 46px; height: 46px; margin-top: 170px; border: 4px solid rgba(242, 255, 130, .25); border-top-color: #f2ff82; border-radius: 50%; animation: session-spin .8s linear infinite; }
.session-loader-text { position: relative; font-size: 14px; font-weight: 600; }
.session-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes session-spin { to { transform: rotate(360deg); } }
.environment { font-size: 11px; letter-spacing: 3px; color: #cfb676; margin-bottom: 28px; }
.logo { width: min(280px, 75vw); height: auto; max-height: 230px; object-fit: contain; }
h1 { font-size: 25px; margin: 28px 0 8px; }
.subtitle, .hint { color: #aab9bf; font-size: 14px; line-height: 1.8; }
.subtitle { margin: 0 0 28px; }
.actions { width: 100%; display: grid; gap: 12px; }
.btn-theme { width: 100%; min-height: 54px; background: #ba8321; padding: 5px 30px; border: 1px solid #f2ff82; border-radius: 20px; color: #f2ff82; font: 700 16px 'Noto Sans Thai', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; }
.login-icon { width: 23px; height: 23px; flex: 0 0 23px; padding: 2px; background: #fff; border-radius: 50%; }
.btn-theme:hover { background: #d39325; color: #f2ff82; border-color: #f9ffc8; }
.btn-theme:focus-visible { outline: 3px solid #e8c477; outline-offset: 4px; }
.btn-theme:disabled { cursor: wait; opacity: .65; }
.hint { margin: 24px 0 12px; }
#loginStatus { min-height: 48px; color: #d6bd85; font-size: 13px; line-height: 1.8; }
@media (max-height: 650px) { .logo { max-height: 120px; } .environment { margin-bottom: 12px; } h1 { margin-top: 16px; } }