/* assets/css/auth.css — shared style for login/register, matches Skilmetric landing page theme */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8fafc; --bg2:#f1f5f9; --surface:#ffffff; --border:#e2e8f0; --border-bright:#cbd5e1;
  --text:#0f172a; --text2:#334155; --muted:#64748b; --muted2:#94a3b8;
  --accent-indigo:#4f46e5; --accent-purple:#7c3aed; --accent-cyan:#0891b2;
  --neon-red:#ef4444; --neon-green:#10b981;
}
body{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background-image:radial-gradient(circle at 50% -20%, rgba(79,70,229,0.08), transparent 60%);
  padding:24px;
}
.auth-card{
  width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--border); border-radius:20px;
  padding:40px 36px; box-shadow:0 20px 50px -20px rgba(15,23,42,0.15);
}
.auth-logo{display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.auth-logo img{height:48px;}
.auth-title{font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:6px;}
.auth-sub{font-size:0.9rem; color:var(--muted); text-align:center; margin-bottom:28px;}
.form-group{margin-bottom:18px;}
.form-label{display:block; font-size:0.8rem; font-weight:700; color:var(--text2); margin-bottom:6px;}
.form-input{
  width:100%; padding:12px 14px; font-size:0.95rem; font-family:inherit;
  border:1px solid var(--border-bright); border-radius:10px; background:var(--bg2);
  color:var(--text); transition:all .2s;
}
.form-input:focus{outline:none; border-color:var(--accent-indigo); background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,0.12);}
.pw-field{position:relative;}
.pw-field .form-input{padding-right:44px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; padding:8px; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.pw-toggle:hover{color:var(--text2);}
.pw-toggle svg{width:19px; height:19px;}
.captcha-box{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--border-bright); border-radius:10px; background:var(--bg2);
  margin-bottom:18px;
}
.captcha-question{font-size:0.9rem; font-weight:700; color:var(--text); white-space:nowrap;}
.captcha-box .form-input{margin:0; width:90px; text-align:center; padding:10px;}
/* Honeypot — invisible to real users, real bots often fill every field they see in the DOM */
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
.auth-btn{
  width:100%; padding:13px 20px; border:none; border-radius:10px; cursor:pointer;
  font-size:0.95rem; font-weight:700; color:#fff; margin-top:6px;
  background:linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));
  transition:transform .15s, box-shadow .15s;
}
.auth-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(79,70,229,0.45);}
.auth-foot{text-align:center; font-size:0.85rem; color:var(--muted); margin-top:22px;}
.auth-foot a{color:var(--accent-indigo); font-weight:700; text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}
.alert{
  padding:11px 14px; border-radius:10px; font-size:0.85rem; margin-bottom:18px; font-weight:600;
}
.alert-error{background:rgba(239,68,68,0.1); color:var(--neon-red); border:1px solid rgba(239,68,68,0.25);}
.alert-success{background:rgba(16,185,129,0.1); color:var(--neon-green); border:1px solid rgba(16,185,129,0.25);}
.back-home{display:block; text-align:center; font-size:0.8rem; color:var(--muted2); margin-top:16px; text-decoration:none;}
.back-home:hover{color:var(--accent-indigo);}