:root{--auth-navy:#071a38;--auth-navy2:#0d2c55;--auth-gold:#c99a43;--auth-gold2:#f2d38a;--auth-ink:#102446;--auth-muted:#70809a;--auth-line:#dfe6ef;--auth-bg:#f5f7fa;--auth-danger:#b4232f;--auth-success:#0b7b4c}
body.auth-pending{overflow:hidden;background:var(--auth-bg)}body.auth-pending #app{visibility:hidden}
.auth-gate{position:fixed;inset:0;z-index:9999;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);background:#fff;color:var(--auth-ink);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,Arial,sans-serif}
.auth-visual{position:relative;overflow:hidden;background:radial-gradient(circle at 16% 16%,rgba(201,153,67,.13),transparent 28%),radial-gradient(circle at 84% 78%,rgba(18,61,104,.24),transparent 30%),linear-gradient(145deg,#06172f 0%,#0b294d 56%,#102f53 100%);color:#fff;padding:clamp(32px,5vw,76px);display:flex;flex-direction:column;justify-content:space-between;min-height:100dvh}
.auth-visual:before{content:"";position:absolute;width:460px;height:460px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-160px;top:-120px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.auth-visual:after{content:"";position:absolute;left:8%;right:8%;bottom:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(243,211,138,.55),transparent)}
.auth-brand{position:relative;z-index:1;display:flex;align-items:center;gap:16px}.auth-mark{width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 16px 40px rgba(0,0,0,.16)}
.auth-mark span{font-weight:900;letter-spacing:-1px;color:var(--auth-gold2);font-size:18px}.auth-brand-copy b{display:block;font-size:19px;letter-spacing:.4px}.auth-brand-copy small{display:block;margin-top:2px;font-size:11px;opacity:.68;letter-spacing:.9px}
.auth-visual-copy{position:relative;z-index:1;max-width:600px;margin:12vh 0 18vh}.auth-kicker{font-size:11px;letter-spacing:2.7px;color:var(--auth-gold2);font-weight:800}.auth-visual h1{font-size:clamp(35px,5vw,64px);line-height:1.08;margin:12px 0 18px;letter-spacing:-1.8px}.auth-visual p{max-width:520px;margin:0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.8}.auth-system-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}.auth-system-row span{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.04);font-size:10px;color:rgba(255,255,255,.73);backdrop-filter:blur(10px)}.auth-system-row i{width:6px;height:6px;border-radius:50%;background:var(--auth-gold2);box-shadow:0 0 0 4px rgba(243,211,138,.1)}
.auth-panel{background:#fff;display:flex;align-items:center;justify-content:center;padding:36px;min-height:100dvh}.auth-card{width:min(100%,460px)}.auth-mobile-brand{display:none}.auth-eyebrow{font-size:11px;letter-spacing:2.2px;color:#8c6a2b;font-weight:900}.auth-card h2{font-size:32px;line-height:1.15;margin:10px 0 8px;letter-spacing:-.8px}.auth-intro{font-size:13px;line-height:1.7;color:var(--auth-muted);margin:0 0 28px}.auth-status{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--auth-line);background:#f8fafc;border-radius:16px;padding:12px 13px;margin-bottom:18px}.auth-status-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;background:#aab5c4;box-shadow:0 0 0 4px rgba(120,135,155,.09);flex:0 0 auto}.auth-status.ready .auth-status-dot{background:var(--auth-success);box-shadow:0 0 0 4px rgba(11,123,76,.09)}.auth-status.warn .auth-status-dot{background:#c88716;box-shadow:0 0 0 4px rgba(200,135,22,.09)}.auth-status b{font-size:12px;display:block}.auth-status small{display:block;margin-top:2px;color:var(--auth-muted);font-size:10px;line-height:1.5}
.auth-form{display:grid;gap:14px}.auth-field label{display:block;font-size:11px;color:#53647c;font-weight:800;margin:0 0 6px}.auth-input-wrap{position:relative}.auth-field input{width:100%;height:48px;border:1px solid #d7e0ea;background:#fff;border-radius:14px;padding:0 14px;color:var(--auth-ink);outline:none;transition:.17s}.auth-field input:focus{border-color:#819ab7;box-shadow:0 0 0 4px rgba(51,93,141,.08)}.auth-field input:disabled{background:#f5f7f9;color:#9aa6b5}.auth-pass-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:32px;border:0;background:transparent;color:#687991;font-size:10px;font-weight:800;padding:0 8px;border-radius:9px}.auth-pass-toggle:hover{background:#f3f6f9}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.auth-check{display:flex;align-items:center;gap:7px;font-size:11px;color:#65758b}.auth-check input{accent-color:var(--auth-navy)}.auth-link{border:0;background:transparent;padding:0;color:#8b611c;font-weight:800;font-size:11px}.auth-link:disabled{opacity:.4;cursor:not-allowed}.auth-submit{height:49px;border:0;border-radius:14px;background:linear-gradient(135deg,#071a38,#123d69);color:#fff;font-weight:900;letter-spacing:.1px;box-shadow:0 10px 24px rgba(7,26,56,.19);transition:.18s}.auth-submit:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(7,26,56,.23)}.auth-submit:disabled{opacity:.48;box-shadow:none;transform:none;cursor:not-allowed}.auth-preview{height:44px;border:1px solid #d8e0e9;border-radius:14px;background:#fff;color:var(--auth-ink);font-weight:850}.auth-preview:hover{background:#f8fafc}.auth-message{min-height:19px;font-size:11px;line-height:1.55;color:var(--auth-danger)}.auth-message.ok{color:var(--auth-success)}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#98a5b5;font-size:9px;text-transform:uppercase;letter-spacing:1.7px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#e5eaf0;flex:1}.auth-security{margin-top:22px;padding-top:18px;border-top:1px solid #edf1f5;display:grid;gap:8px}.auth-security div{display:flex;align-items:center;gap:8px;color:#78879a;font-size:10px}.auth-security i{width:5px;height:5px;border-radius:50%;background:var(--auth-gold)}
.auth-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:linear-gradient(145deg,#06172f,#0c2a4e);color:#fff}.auth-loader-card{text-align:center}.auth-loader-mark{width:64px;height:64px;margin:auto;border-radius:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:var(--auth-gold2);font-weight:900;box-shadow:0 16px 50px rgba(0,0,0,.22)}.auth-loader-line{width:160px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;margin:18px auto 8px;border-radius:9px}.auth-loader-line i{display:block;width:55px;height:100%;background:linear-gradient(90deg,transparent,var(--auth-gold2),transparent);animation:authMove 1.1s linear infinite}.auth-loader small{font-size:10px;letter-spacing:1.7px;opacity:.55}@keyframes authMove{from{transform:translateX(-60px)}to{transform:translateX(170px)}}
.auth-user-chip{display:flex;align-items:center;gap:8px;margin-left:4px;padding-left:8px;border-left:1px solid rgba(255,255,255,.12)}.auth-user-meta{display:grid;line-height:1.1;text-align:right}.auth-user-meta b{font-size:10px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.auth-user-meta small{font-size:8px;opacity:.6;margin-top:3px}.auth-logout{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;height:36px;padding:0 10px;font-size:9px;font-weight:850}.auth-logout:hover{background:rgba(255,255,255,.11)}
@media(max-width:900px){.auth-gate{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:24px;align-items:flex-start;padding-top:max(54px,calc(38px + env(safe-area-inset-top)))}.auth-mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:44px}.auth-mobile-brand .auth-mark{background:linear-gradient(145deg,#071a38,#123d69);width:46px;height:46px;border-radius:14px}.auth-mobile-brand b{display:block;font-size:15px}.auth-mobile-brand small{display:block;color:var(--auth-muted);font-size:9px;margin-top:2px}.auth-card{width:100%;max-width:500px;margin:auto}.auth-card h2{font-size:28px}.auth-user-meta{display:none}}
@media(max-width:480px){.auth-panel{padding-left:18px;padding-right:18px}.auth-card h2{font-size:25px}.auth-row{align-items:flex-start}.auth-check{max-width:180px}}