:root { --indigo:#4f46e5; --indigo-dark:#312e81; --ink:#172033; --muted:#64748b; --border:#dbe3ef; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; font-family:"Noto Sans Thai",system-ui,sans-serif; color:var(--ink); background:#f8fafc; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.05fr) minmax(440px,.95fr); }
.login-showcase { position:relative; min-height:100vh; color:#fff; overflow:hidden; background:#1e1b4b url("../../../img/5.jpg") center/cover no-repeat; }
.showcase-overlay { position:absolute; inset:0; background:linear-gradient(145deg,rgba(30,27,75,.94),rgba(67,56,202,.72) 55%,rgba(6,182,212,.55)); }
.showcase-overlay::after { content:""; position:absolute; width:440px; height:440px; right:-130px; bottom:-120px; border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.03); }
.showcase-content { position:relative; z-index:1; min-height:100%; max-width:640px; padding:clamp(48px,8vw,110px); display:flex; flex-direction:column; justify-content:center; }
.brand-mark { width:64px; height:64px; display:grid; place-items:center; border-radius:18px; font-size:28px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(12px); margin-bottom:34px; }
.eyebrow { margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:.16em; color:#818cf8; }
.showcase-content .eyebrow { color:#a5f3fc; }
.showcase-content h1 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.17; letter-spacing:-.04em; margin:0 0 22px; }
.showcase-copy { max-width:490px; margin:0; color:rgba(255,255,255,.8); font-size:1.08rem; line-height:1.8; }
.feature-row { display:flex; flex-wrap:wrap; gap:18px 28px; margin-top:42px; color:rgba(255,255,255,.9); font-size:.9rem; }
.feature-row i { color:#67e8f9; margin-right:7px; }
.login-panel { min-height:100vh; padding:48px clamp(28px,7vw,100px) 24px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 100% 0,#eef2ff 0,transparent 35%),#fff; }
.login-card { width:100%; max-width:440px; margin:auto; }
.mobile-brand { display:none; align-items:center; gap:10px; font-weight:700; color:var(--indigo); margin-bottom:32px; }
.mobile-brand i { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--indigo),#7c3aed); }
.login-card h2 { margin:0; font-size:2.15rem; letter-spacing:-.035em; }
.login-subtitle { color:var(--muted); margin:8px 0 30px; }
.field-group { margin-bottom:20px; }
.field-group label { display:block; margin-bottom:8px; font-size:.9rem; font-weight:600; }
.input-wrap { position:relative; }
.input-wrap > i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#94a3b8; pointer-events:none; }
.input-wrap input { width:100%; height:52px; padding:0 48px; border:1px solid var(--border); border-radius:13px; outline:none; color:var(--ink); background:#fff; font:inherit; transition:.2s; }
.input-wrap input::placeholder { color:#a8b3c2; }
.input-wrap input:focus { border-color:#818cf8; box-shadow:0 0 0 4px rgba(99,102,241,.12); }
.password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; border-radius:9px; color:#64748b; background:transparent; cursor:pointer; }
.password-toggle:hover { background:#f1f5f9; color:var(--indigo); }
.login-button { width:100%; height:54px; margin-top:8px; border:0; border-radius:13px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; background:linear-gradient(135deg,var(--indigo),#7c3aed); box-shadow:0 12px 24px rgba(79,70,229,.24); font:600 1rem inherit; cursor:pointer; transition:.2s; }
.login-button:hover { transform:translateY(-2px); box-shadow:0 16px 28px rgba(79,70,229,.3); }
.login-alert { display:flex; gap:10px; align-items:center; padding:12px 14px; margin-bottom:22px; border:1px solid #fecdd3; border-radius:11px; color:#be123c; background:#fff1f2; font-size:.9rem; }
.support-note { margin:28px 0 0; text-align:center; color:#94a3b8; font-size:.82rem; }
.support-note i { margin-right:5px; }
.login-panel footer { text-align:center; color:#94a3b8; font-size:.78rem; }
@media (max-width:850px) {
  .login-shell { display:block; }
  .login-showcase { display:none; }
  .login-panel { padding:36px 24px 20px; }
  .login-card { max-width:460px; }
  .mobile-brand { display:flex; }
}
@media (max-width:420px) {
  .login-panel { padding:26px 18px 18px; }
  .login-card h2 { font-size:1.8rem; }
}