:root{
  /* ค่าสำรองเผื่อ theme_style_tag ไม่ถูกฝัง (ปกติจะถูก override จาก settings) */
  --theme:#2f7da6; --theme-2:#245f80; --theme-soft:#e8f1f6; --theme-rgb:47,125,166; --theme-ink:#fff;

  --ink:#1f2630; --muted:#6b7585; --line:#e3e8ef;
  --field-bg:#f6f8fb; --field-line:#d7dee8;
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Sarabun',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -8%, var(--theme-soft) 0, transparent 60%),
    radial-gradient(900px 600px at 108% 118%, var(--theme-soft) 0, transparent 55%),
    linear-gradient(160deg,#eef2f6,#e4ebf1 72%);
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}

/* ---------- viewport ---------- */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px}

/* ---------- การ์ด ---------- */
.login-card{
  width:100%; max-width:920px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 30px 70px rgba(25,45,70,.18), 0 2px 6px rgba(25,45,70,.06);
  display:flex; flex-direction:column;               /* มือถือ/แนวตั้ง = ซ้อนบนล่าง */
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
.login-card.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* ---------- ซ้าย: แบรนด์ ---------- */
.brand-side{
  position:relative; overflow:hidden; color:var(--theme-ink);
  background:linear-gradient(150deg, var(--theme), var(--theme-2));
  padding:34px 30px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.brand-side .mist{
  position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(260px 160px at 20% 15%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(320px 200px at 90% 90%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(200px 140px at 70% 20%, rgba(255,255,255,.12), transparent 70%);
}
.brand-inner{position:relative; z-index:1}
.brand-logo{
  width:96px; height:96px; object-fit:cover; border-radius:22px; background:#fff;
  padding:8px; box-shadow:0 12px 30px rgba(0,0,0,.22); margin-bottom:14px;
}
.brand-name{font-size:28px; font-weight:700; margin:0; letter-spacing:.3px; text-shadow:0 2px 10px rgba(0,0,0,.18)}
.brand-tag{margin:8px 0 0; font-size:14px; opacity:.92}
.brand-copy{position:relative; z-index:1; margin:18px 0 0; font-size:12px; opacity:.75}

/* ---------- ขวา: ฟอร์ม ---------- */
.form-side{padding:34px 30px; display:flex; align-items:center}
.form-inner{width:100%; max-width:380px; margin:0 auto}
.form-title{font-size:23px; font-weight:700; margin:0; color:var(--ink)}
.form-sub{margin:6px 0 20px; color:var(--muted); font-size:14px}

/* decoy กัน autofill */
.nofill-decoy{position:absolute!important; opacity:0!important; height:0!important; width:0!important;
  padding:0!important; border:0!important; pointer-events:none!important; left:-9999px!important}

.alert-error{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  background:#fdecec; color:#c0392b; border:1px solid #f5c6c6;
  padding:11px 14px; border-radius:12px; font-size:14px;
}
.field{margin-bottom:15px}
.field label{display:block; font-size:13.5px; font-weight:600; color:#49515f; margin-bottom:7px}
.input-wrap{position:relative}
.input-wrap .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa3b2; font-size:15px; pointer-events:none}
.input-wrap input{
  width:100%; height:50px; padding:0 44px 0 42px;
  background:var(--field-bg); color:var(--ink);
  border:1.5px solid var(--field-line); border-radius:13px;
  font-family:inherit; font-size:15.5px; transition:.16s;
}
.input-wrap input::placeholder{color:#9aa3b2}
.input-wrap input:focus{
  outline:none; background:#fff; border-color:var(--theme);
  box-shadow:0 0 0 4px rgba(var(--theme-rgb),.15);
}
.input-wrap input:focus ~ .ico{color:var(--theme)}
.toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:transparent; color:#9aa3b2;
  cursor:pointer; border-radius:9px; font-size:15px;
}
.toggle:hover{color:var(--theme); background:rgba(var(--theme-rgb),.08)}

.remember{display:flex; align-items:center; gap:9px; cursor:pointer; margin:4px 0 20px; font-size:14px; color:#49515f; user-select:none}
.remember input{position:absolute; opacity:0; width:0; height:0}
.remember .box{
  width:20px; height:20px; border-radius:6px; border:1.6px solid var(--field-line);
  display:grid; place-items:center; color:#fff; font-size:11px; background:#fff; transition:.15s;
}
.remember input:checked + .box{background:var(--theme); border-color:var(--theme)}
.remember .box i{opacity:0; transform:scale(.6); transition:.15s}
.remember input:checked + .box i{opacity:1; transform:scale(1)}

.btn-login{
  width:100%; height:52px; border:none; border-radius:13px; cursor:pointer;
  color:var(--theme-ink); font-family:inherit; font-size:16px; font-weight:600;
  background:linear-gradient(135deg, var(--theme), var(--theme-2));
  box-shadow:0 10px 24px rgba(var(--theme-rgb),.35); transition:.16s;
}
.btn-login:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 14px 30px rgba(var(--theme-rgb),.45)}
.btn-login:active:not(:disabled){transform:translateY(0)}
.btn-login:disabled{opacity:.7; cursor:default}

.fade-enter-active,.fade-leave-active{transition:opacity .2s}
.fade-enter,.fade-leave-to{opacity:0}

/* ---------- 2 คอลัมน์: จอกว้าง + แท็บเล็ตแนวนอน (≥820px) ---------- */
@media (min-width:820px){
  .login-card{flex-direction:row; min-height:520px}
  .brand-side{flex:1 1 50%; padding:48px 40px}
  .form-side{flex:1 1 50%; padding:48px 44px}
  .brand-logo{width:120px; height:120px}
  .brand-name{font-size:32px}
}