:root{
  --bg:#000; --fg:#fff; --muted:#b3b3b3;
  --card:#121212; --card2:#181818;
  --primary:#ff0000; --primary-2:#cc0000; --ring:rgba(255,0,0,.25);
  --control-h:48px;
}

/* ฟอนต์ Prompt ทั้งหน้า */
*{ box-sizing:border-box; font-family:'Prompt',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important; }
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg)}

/* BG */
.auth-bg{position:fixed; inset:0; background:url('images/Infestation.jpg') center/cover no-repeat; filter:saturate(105%)}
.auth-overlay{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.8))}

/* WRAP & CARD */
.auth-wrap{position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px}
.auth-card{
  width:100%; max-width:520px;
  background:linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:28px 26px;
  box-shadow:0 25px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:saturate(120%) blur(2px);
}
.auth-title{margin:0 0 14px; font-size:28px; font-weight:800; letter-spacing:.3px; text-align:center}

/* FORM */
.auth-form{display:grid; gap:14px}
.form-group{display:grid; gap:8px}
label{font-size:13px;color:var(--muted)}
.status-help{margin:0; font-size:12px; color:#aaa; min-height:18px}

/* ข้อความสถานะหลังคำว่า อีเมล */
.status-text{ margin-left:8px; font-size:12px; vertical-align:middle; }
.status-text.warn{ color:#ffcd4f; }   /* เหลือง: รูปแบบไม่ถูกต้อง */
.status-text.err{  color:#FF0000; }   /* แดง: ใช้ไปแล้ว/ซ้ำ */
.status-text.ok{   color:#00FF00; }   /* เขียว: ใช้งานได้ */

/* ช่องกรอก */
input[type="email"], input[type="password"], input[type="text"]{
  width:100%; height:var(--control-h);
  padding:12px 14px; background:#1a1a1a; color:var(--fg);
  border:1px solid #333; border-radius:12px; outline:0; transition:.2s;
}
input:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}

.input-with-toggle{position:relative}
.input-with-toggle input{padding-right:44px}
.input-with-toggle .toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#999; cursor:pointer; font-size:18px;
  padding:4px 6px; border-radius:8px;
}
.input-with-toggle .toggle:hover{color:#fff; background:rgba(255,255,255,.06)}

/* OTP row */
.otp-row{ display:flex; gap:10px; align-items:stretch; }
.otp-row input{ flex:1; height:var(--control-h); }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--control-h); padding:0 16px;
  border-radius:12px; background:#232323; color:#fff; border:1px solid #3a3a3a;
  cursor:pointer; transition:.2s; white-space:nowrap;
}
.btn-secondary:hover{background:#2c2c2c}
.btn-secondary:disabled{opacity:.6; cursor:not-allowed}

/* BUTTON */
.btn-primary{
  background:linear-gradient(180deg, #ff2b2b, #e40000);
  color:#fff; border:0; border-radius:12px; padding:13px 16px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 10px 18px rgba(255,0,0,.18); transition:.18s;
}
.btn-primary[disabled]{opacity:.6; cursor:not-allowed; box-shadow:none}
.btn-primary:hover:not([disabled]){transform:translateY(-1px)}
.btn-primary:active:not([disabled]){transform:translateY(0)}

.auth-footer{text-align:center;margin-top:4px;color:var(--muted);font-size:13px}
.link{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.25)}
.link:hover{color:#ff6b6b;border-color:#ff6b6b}

/* Anim */
@keyframes pop{from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1}}
.animate-pop{animation:pop .35s ease-out both}