/* xBudget Login Premium White — 2026-05-08
   Self-contained CSS only, no external resources. */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBMPlexSansThai-Regular.woff2') format('woff2'), url('../fonts/IBMPlexSansThai-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBMPlexSansThai-SemiBold.woff2') format('woff2'), url('../fonts/IBMPlexSansThai-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  src: url('../fonts/IBMPlexSansThai-Bold.woff2') format('woff2'), url('../fonts/IBMPlexSansThai-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --ink:#101827;
  --muted:#667085;
  --line:#e6eaf0;
  --soft:#f3f5f9;
  --brand:#1f4fd7;
  --brand2:#0f172a;
  --gold:#b88a2c;
  --danger:#c81e1e;
  --shadow:0 28px 80px rgba(15,23,42,.12);
  --shadow-soft:0 16px 45px rgba(15,23,42,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body.xb-login-page, body{
  min-height:100vh;
  font-family:'IBM Plex Sans Thai',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(184,138,44,.12) 0 18%, transparent 38%),
    radial-gradient(circle at 82% 82%, rgba(31,79,215,.10) 0 20%, transparent 42%),
    linear-gradient(135deg,#ffffff 0%,#f7f8fb 48%,#eef2f8 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:52px 52px;
  pointer-events:none;
}

.login-shell{
  width:min(1080px,100%);
  min-height:640px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.86);
  border-radius:34px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.login-shell::after{
  content:''; position:absolute; inset:12px; border-radius:26px;
  border:1px solid rgba(15,23,42,.05); pointer-events:none;
}

.login-hero{
  padding:54px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,247,252,.92)),
    radial-gradient(circle at top left,rgba(184,138,44,.18),transparent 36%);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
}
.login-brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-brand-mark{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  color:#fff;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(145deg,#0f172a,#3154d4 65%,#b88a2c);
  box-shadow:0 16px 32px rgba(31,79,215,.22);
}
.login-brand-text strong{display:block;font-size:21px;letter-spacing:-.03em;color:#0f172a}
.login-brand-text span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a6a22;margin-top:2px}
.login-hero h1{font-size:clamp(36px,4vw,58px);line-height:1.08;letter-spacing:-.06em;color:#0f172a;max-width:560px}
.login-hero p{font-size:17px;line-height:1.75;color:#667085;max-width:520px}
.login-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.login-metrics span{
  padding:12px 10px;border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(15,23,42,.045);font-weight:700;font-size:13px;text-align:center;color:#344054;
}

.login-card{padding:54px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1;background:rgba(255,255,255,.86)}
.login-card-head{margin-bottom:24px}
.login-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#b88a2c;margin-bottom:8px}
.login-card h2{font-size:30px;line-height:1.25;letter-spacing:-.04em;color:#0f172a;margin-bottom:10px}
.login-subtitle{font-size:15px;line-height:1.65;color:#667085}
.login-error{
  padding:13px 15px;border-radius:16px;background:#fff3f3;border:1px solid #ffd7d7;color:#9b1c1c;
  font-weight:600;margin-bottom:16px;white-space:pre-line;
}

form{width:100%;max-width:430px;margin:0 auto}
#bot_trap{display:none!important}
.form-group{margin-bottom:16px}
.form-group span[id$='Label']{display:block;font-size:14px;font-weight:800;color:#182230;margin-bottom:7px}
.form-group span[id$='Hint']{display:block;font-size:12px;color:#98a2b3;margin-bottom:8px}
input[type='email'],input[type='password'],input[type='text']{
  width:100%;height:52px;border-radius:16px;border:1px solid var(--line);background:#fff;color:#101827;
  padding:0 16px;font:600 15px 'IBM Plex Sans Thai',system-ui,sans-serif;outline:none;
  box-shadow:0 1px 0 rgba(15,23,42,.02),0 10px 22px rgba(15,23,42,.035);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input::placeholder{color:#a0a9b8;font-weight:500}
input[type='email']:focus,input[type='password']:focus,input[type='text']:focus{
  border-color:rgba(31,79,215,.55);box-shadow:0 0 0 4px rgba(31,79,215,.10),0 14px 28px rgba(15,23,42,.06);
}

.captcha-container{margin:18px 0 16px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.captcha-container.captcha-active{
  padding:14px;border-radius:20px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
#showCaptchaButton{
  width:100%;min-height:52px;border:1px solid #d8dee8;border-radius:16px;background:linear-gradient(180deg,#ffffff,#f5f7fb);
  color:#182230;font:800 15px 'IBM Plex Sans Thai',system-ui,sans-serif;cursor:pointer;
  box-shadow:0 12px 28px rgba(15,23,42,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#showCaptchaButton:hover{transform:translateY(-1px);border-color:rgba(31,79,215,.35);box-shadow:0 16px 34px rgba(15,23,42,.09)}
#showCaptchaButton:disabled{cursor:wait;opacity:.72;transform:none}
.captcha-trigger-hidden{margin:0!important;padding:0!important;min-height:0!important}
.captcha-image{
  display:block;width:100%;max-width:350px;min-height:40px;align-self:center;border-radius:14px;border:1px solid #d7dde7;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 10px 24px rgba(15,23,42,.055);object-fit:contain;
}
input#captcha{text-align:center;letter-spacing:8px;font-size:22px;font-weight:800}
.captcha-load-error{border-color:#ffd7d7!important;background:#fff7f7!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.submit-wrap{margin-top:18px}
input[type='submit']{
  width:100%;height:54px;border:0;border-radius:17px;background:linear-gradient(135deg,#101827,#1f4fd7 72%,#b88a2c);
  color:#fff;font:800 16px 'IBM Plex Sans Thai',system-ui,sans-serif;cursor:pointer;
  box-shadow:0 18px 38px rgba(31,79,215,.22);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
input[type='submit']:hover{transform:translateY(-1px);box-shadow:0 22px 46px rgba(31,79,215,.27);filter:saturate(1.08)}
input[type='submit']:active{transform:translateY(0) scale(.99)}

@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.shake{animation:shake .45s both}

@media(max-width:860px){
  body{padding:16px;align-items:flex-start}
  .login-shell{grid-template-columns:1fr;min-height:auto;border-radius:26px}
  .login-hero{padding:30px;border-right:0;border-bottom:1px solid var(--line)}
  .login-hero h1{font-size:34px}.login-hero p{font-size:15px}.login-metrics{grid-template-columns:repeat(2,1fr)}
  .login-card{padding:30px}form{max-width:none}.login-card h2{font-size:25px}
}
@media(max-width:480px){
  body{padding:10px}.login-shell{border-radius:22px}.login-hero{padding:22px}.login-card{padding:22px}
  .login-brand-mark{width:46px;height:46px;border-radius:15px}.login-brand-text strong{font-size:18px}
  .login-hero h1{font-size:28px}.login-metrics{gap:8px}.login-metrics span{font-size:12px;padding:10px 8px}
  input[type='email'],input[type='password'],input[type='text'],#showCaptchaButton,input[type='submit']{height:50px;border-radius:15px}
  input#captcha{letter-spacing:5px;font-size:20px}
}