/* PromptShield Auth — Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --white:#ffffff; --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0;
  --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569;
  --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a;
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-500:#3b82f6; --blue-600:#2563eb;
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-500:#6366f1; --indigo-600:#4f46e5;
  --red-50:#fef2f2; --red-200:#fecaca; --red-500:#ef4444; --red-600:#dc2626;
  --green-50:#f0fdf4; --green-500:#22c55e; --green-600:#16a34a;
  --yellow-50:#fefce8; --yellow-500:#eab308;
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --mono:'DM Mono','Fira Code',monospace;
  --border:var(--gray-200);
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 20px 48px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--gray-50);color:var(--gray-900);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased}

.auth-layout{display:flex;min-height:100vh}

/* Left panel */
.auth-left{
  width:440px;flex-shrink:0;
  background:linear-gradient(160deg,var(--indigo-600) 0%,var(--blue-600) 100%);
  padding:44px 40px;display:flex;flex-direction:column;color:white;position:relative;overflow:hidden;
}
.auth-left::before{
  content:'';position:absolute;top:-80px;right:-80px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none;
}
.auth-left::after{
  content:'';position:absolute;bottom:-100px;left:-60px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none;
}
.auth-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;font-weight:500;margin-bottom:44px;transition:color .2s;position:relative;z-index:1}
.auth-back:hover{color:white}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:48px;position:relative;z-index:1}
.auth-brand-icon{width:44px;height:44px;background:rgba(255,255,255,.18);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;backdrop-filter:blur(10px)}
.auth-brand-text{font-size:22px;font-weight:800;letter-spacing:-.5px}
.auth-left-content{flex:1;position:relative;z-index:1}
.auth-left-title{font-size:clamp(28px,3vw,38px);font-weight:800;line-height:1.15;letter-spacing:-1px;margin-bottom:14px}
.auth-left-sub{font-size:15px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:32px}
.auth-features{display:flex;flex-direction:column;gap:10px}
.af-item{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.85)}
.af-item .bi{font-size:15px;opacity:.9}

/* Test account hint */
.demo-hint{
  margin-top:32px;position:relative;z-index:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:14px 16px;
}
.demo-hint-title{font-size:11px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);text-transform:uppercase;margin-bottom:8px}
.demo-hint-email{font-family:var(--mono);font-size:13px;color:white;margin-bottom:2px}
.demo-hint-note{font-size:11px;color:rgba(255,255,255,.55)}

/* Right panel */
.auth-right{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px;background:var(--gray-50)}
.auth-card{width:100%;max-width:400px}

.auth-card-title{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0 0 6px}
.auth-card-sub{font-size:14px;color:var(--gray-500);margin:0 0 28px}

.auth-error{display:flex;align-items:center;gap:10px;background:var(--red-50);border:1px solid var(--red-200);border-radius:8px;padding:11px 14px;font-size:13px;color:var(--red-600);margin-bottom:16px;animation:slideIn .2s ease}
.auth-success{display:flex;align-items:center;gap:10px;background:var(--green-50);border:1px solid #bbf7d0;border-radius:8px;padding:11px 14px;font-size:13px;color:var(--green-600);margin-bottom:16px;animation:slideIn .2s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

.auth-form{display:flex;flex-direction:column;gap:20px}
.auth-label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin-bottom:6px}
.auth-input-wrap{position:relative}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:16px;pointer-events:none}
.auth-input{
  width:100%;background:white;border:1.5px solid var(--border);border-radius:10px;
  padding:13px 13px 13px 42px;color:var(--gray-900);font-family:var(--font);font-size:15px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.auth-input:focus{border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.auth-input::placeholder{color:var(--gray-400)}

.auth-submit-btn{
  width:100%;
  background:linear-gradient(135deg,var(--blue-600),var(--indigo-600));
  border:none;border-radius:10px;padding:14px;color:white;
  font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 14px rgba(99,102,241,.3);
}
.auth-submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.4)}
.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-content,.btn-spinner{display:flex;align-items:center;justify-content:center;gap:8px}
.btn-spinner.d-none{display:none!important}

.auth-divider{text-align:center;position:relative;margin:20px 0 16px}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-200)}
.auth-divider span{position:relative;background:var(--gray-50);padding:0 12px;font-size:11px;color:var(--gray-400);font-weight:500;letter-spacing:.04em}
.auth-disclaimer{font-size:12px;color:var(--gray-400);text-align:center;display:flex;align-items:center;justify-content:center;gap:5px;margin:0}
.auth-disclaimer .bi{color:var(--green-500)}

/* OTP input */
.otp-sent-indicator{display:inline-flex;align-items:center;gap:8px;background:var(--green-50);border:1px solid #bbf7d0;border-radius:20px;padding:6px 14px;font-size:12px;color:var(--green-600);margin-bottom:20px}
.otp-digits-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px}
.otp-digit{
  width:52px;height:62px;background:white;
  border:1.5px solid var(--border);border-radius:10px;
  text-align:center;font-family:var(--mono);font-size:26px;font-weight:700;
  color:var(--indigo-600);outline:none;
  transition:border-color .2s,box-shadow .2s;
  -moz-appearance:textfield;
}
.otp-digit::-webkit-outer-spin-button,.otp-digit::-webkit-inner-spin-button{-webkit-appearance:none}
.otp-digit:focus{border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.otp-digit.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.otp-sep{font-size:20px;color:var(--gray-300);font-family:var(--mono);flex-shrink:0}

.resend-section{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.resend-text{font-size:13px;color:var(--gray-500)}
.resend-btn{background:none;border:none;color:var(--indigo-600);font-size:13px;font-weight:600;cursor:pointer;padding:0;transition:opacity .2s}
.resend-btn:disabled{opacity:.4;cursor:not-allowed}
.auth-change-email{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:13px;color:var(--gray-400);text-decoration:none;transition:color .2s}
.auth-change-email:hover{color:var(--indigo-600)}

@media(max-width:768px){
  .auth-layout{flex-direction:column}
  .auth-left{width:100%;padding:28px 24px}
  .auth-right{padding:32px 20px}
}

/* ── Demo OTP Banner ── */
.demo-otp-banner{
  background:linear-gradient(135deg,#fefce8,#fef9c3);
  border:1.5px solid #fde047;border-radius:12px;
  padding:18px 20px;margin-bottom:22px;text-align:center;
}
.demo-otp-title{font-size:12px;font-weight:800;color:#854d0e;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:6px}
.demo-otp-subtitle{font-size:12px;color:#92400e;margin-bottom:10px}
.demo-otp-code{
  font-family:var(--mono);font-size:36px;font-weight:700;
  color:#78350f;letter-spacing:10px;margin-bottom:10px;
  background:rgba(0,0,0,.04);border-radius:8px;padding:8px 16px;
  display:inline-block;
}
.demo-otp-note{font-size:11px;color:#a16207;line-height:1.5;margin-bottom:12px}
.demo-otp-autofill{
  background:linear-gradient(135deg,#ca8a04,#b45309);
  border:none;color:white;border-radius:7px;padding:8px 18px;
  font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;
  transition:all .2s;display:inline-flex;align-items:center;gap:5px;
}
.demo-otp-autofill:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(180,83,9,.3)}