/* ─────────────────────────────────────────────────────────────
   OPSFORÊT — Style sombre professionnel
───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#0b0f14;
  --bg-soft:#111820;

  --card:#151d27;
  --card-soft:#1b2531;

  --border:#263241;
  --border-light:#334155;

  --primary:#d93636;
  --primary-dark:#b82828;
  --primary-soft:rgba(217,54,54,.14);

  --text:#f1f5f9;
  --muted:#94a3b8;
  --muted-2:#64748b;

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --radius:20px;
  --radius-sm:12px;
  --radius-lg:28px;

  --shadow:0 24px 70px rgba(0,0,0,.38);

  --transition:.2s ease;

  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* BASE */
html,body{
  min-height:100%;
  scrollbar-width:thin;
  scrollbar-color:var(--primary) var(--bg);
}

::-webkit-scrollbar{
  width:6px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:999px;
}

body{
  background:
    radial-gradient(circle at top left, rgba(217,54,54,.10), transparent 35%),
    radial-gradient(circle at bottom right, rgba(217,54,54,.05), transparent 30%),
    linear-gradient(135deg,#0b0f14,#101720);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
}

/* AUTH LAYOUT */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
  position:relative;
}

/* CARD */
.auth-card{
  width:100%;
  max-width:470px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      transparent 55%
    ),
    var(--card);

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:42px 38px;

  box-shadow:var(--shadow);

  backdrop-filter:blur(10px);
}

/* LOGO */
.auth-logo{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:34px;
}

.logo-hex{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:#fff;

  font-size:22px;

  box-shadow:
    0 12px 30px rgba(217,54,54,.25);
}

.logo-top{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-.02em;
}

.logo-sub{
  margin-top:3px;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}

/* TITRES */
.auth-title{
  display:inline-flex;
  align-items:center;

  padding:6px 12px;

  border-radius:999px;

  background:var(--primary-soft);

  color:#ff7b7b;

  font-size:12px;
  font-weight:700;

  margin-bottom:14px;
}

.auth-heading{
  font-size:30px;
  font-weight:800;
  line-height:1.1;

  color:var(--text);

  margin-bottom:30px;

  letter-spacing:-.03em;
}

/* FORM */
.form-group{
  margin-bottom:18px;
}

.form-label{
  display:block;

  margin-bottom:8px;

  color:#dbe4ee;

  font-size:13px;
  font-weight:700;
}

.form-group:focus-within .form-label{
  color:#fff;
}

/* INPUT */
.form-input{
  width:100%;
  height:50px;

  padding:0 15px;

  background:#0f1620;

  border:1px solid #2b3a4c;

  border-radius:var(--radius-sm);

  color:var(--text);

  font-family:var(--font);
  font-size:14px;

  outline:none;

  transition:var(--transition);
}

.form-input::placeholder{
  color:#64748b;
}

.form-input:hover{
  border-color:#3d5068;
}

.form-input:focus{
  border-color:var(--primary);

  background:#121b26;

  box-shadow:
    0 0 0 4px rgba(217,54,54,.14);
}

.form-input.error{
  border-color:var(--danger);
  background:rgba(239,68,68,.06);
}

/* PASSWORD */
.pw-wrap{
  position:relative;
}

.pw-wrap .form-input{
  padding-right:50px;
}

.pw-toggle{
  position:absolute;

  right:12px;
  top:50%;

  transform:translateY(-50%);

  border:0;

  background:transparent;

  color:var(--muted);

  font-size:15px;

  cursor:pointer;

  width:34px;
  height:34px;

  border-radius:10px;

  transition:var(--transition);
}

.pw-toggle:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}

/* PASSWORD STRENGTH */
.pw-strength{
  display:flex;
  gap:6px;
  margin-top:10px;
}

.pw-bar{
  flex:1;
  height:4px;

  border-radius:999px;

  background:#243140;
}

.pw-bar.weak{
  background:var(--danger);
}

.pw-bar.fair{
  background:var(--warning);
}

.pw-bar.strong{
  background:var(--success);
}

.pw-label{
  margin-top:7px;

  color:var(--muted);

  font-size:12px;
  font-weight:500;
}

/* CHECKBOX */
.form-check{
  display:flex;
  align-items:center;
  gap:10px;

  cursor:pointer;
}

.form-check input[type=checkbox]{
  width:16px;
  height:16px;

  accent-color:var(--primary);
}

.form-check span{
  color:var(--muted);
  font-size:13px;
}

/* BUTTON */
.btn-primary{
  width:100%;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:26px;

  border:0;

  border-radius:var(--radius-sm);

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-dark)
    );

  color:#fff;

  font-family:var(--font);
  font-size:14px;
  font-weight:800;

  cursor:pointer;

  transition:var(--transition);

  box-shadow:
    0 14px 32px rgba(217,54,54,.24);
}

.btn-primary:hover{
  transform:translateY(-1px);

  box-shadow:
    0 18px 42px rgba(217,54,54,.32);
}

.btn-primary:active{
  transform:translateY(0);
}

.btn-primary:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* LINKS */
.auth-link{
  display:block;

  text-align:center;

  margin-top:22px;

  color:var(--muted);

  font-size:13px;
}

.auth-link a{
  color:#ff7b7b;

  font-weight:700;

  text-decoration:none;
}

.auth-link a:hover{
  text-decoration:underline;
}

/* ALERTES */
.alert{
  padding:14px 15px;

  margin-bottom:22px;

  border-radius:var(--radius-sm);

  border:1px solid transparent;

  font-size:13px;
  font-weight:600;
}

.alert-error{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.18);
  color:#fecaca;
}

.alert-success{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.18);
  color:#bbf7d0;
}

.alert-warning{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.18);
  color:#fde68a;
}

/* FIELD ERROR */
.field-error{
  margin-top:7px;

  color:#fca5a5;

  font-size:12px;
  font-weight:600;
}

/* DIVIDER */
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;

  margin:24px 0;

  color:var(--muted);

  font-size:12px;
}

.auth-divider::before,
.auth-divider::after{
  content:'';

  flex:1;
  height:1px;

  background:var(--border);
}

/* LOCKOUT */
.lockout-box{
  padding:18px;

  background:rgba(239,68,68,.08);

  border:1px solid rgba(239,68,68,.18);

  border-radius:var(--radius-sm);

  text-align:center;
}

.lockout-time{
  font-size:34px;
  font-weight:800;

  color:#ff7b7b;
}

.lockout-label{
  margin-top:6px;

  color:var(--muted);

  font-size:12px;
  font-weight:600;
}

/* FOOTER */
.auth-footer{
  margin-top:32px;
  padding-top:20px;

  border-top:1px solid var(--border);

  text-align:center;

  color:var(--muted-2);

  font-size:12px;
}

/* RESPONSIVE */
@media(max-width:480px){

  .auth-wrap{
    padding:20px;
  }

  .auth-card{
    padding:34px 24px;
    border-radius:18px;
  }

  .auth-heading{
    font-size:24px;
  }

  .logo-top{
    font-size:16px;
  }

}