/* ============================================
   LC Data Auth Pages — Shared Styles
   Matches Celly Health design system exactly
   ============================================ */

:root {
  --bg:#FAFAF8; --white:#FFFFFF;
  --orange:#E8713A; --orange-hover:#D4632F; --orange-light:#FDF0E9;
  --navy:#0B1838; --navy-mid:#162850;
  --teal:#2A8B84; --teal-light:#E8F5F4;
  --green:#1D7C3F; --green-light:#E7F5EC;
  --g50:#F9FAFB; --g100:#F3F4F6; --g200:#E5E7EB; --g300:#D1D5DB;
  --g400:#9CA3AF; --g500:#6B7280; --g600:#4B5563; --g800:#1F2937;
}

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

body {
  font-family:'DM Sans',sans-serif; color:var(--g800);
  background:var(--navy); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(42,139,132,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(232,113,58,0.12) 0%, transparent 60%),
    var(--navy);
  z-index:0;
}

.login-wrap {
  position:relative; z-index:1;
  width:100%; max-width:440px;
  animation: fadeUp 0.5s ease-out;
}

/* Logo */
.login-logo { text-align:center; margin-bottom:32px; }
.login-logo-mark {
  width:52px; height:52px; border-radius:14px;
  background:var(--orange);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:22px; color:#fff;
  margin-bottom:12px;
}
.login-logo-name {
  font-family:'Outfit',sans-serif; font-weight:800; font-size:22px;
  color:#fff; letter-spacing:-0.02em; display:block;
}
.login-logo-sub {
  font-size:13px; color:rgba(255,255,255,0.45); margin-top:3px; display:block;
}

/* Card */
.login-card {
  background:#fff; border-radius:20px; padding:36px 36px 32px;
  box-shadow:0 24px 64px rgba(0,0,0,0.3);
}
.login-card-title {
  font-family:'Outfit',sans-serif; font-weight:800; font-size:22px;
  color:var(--navy); letter-spacing:-0.02em; margin-bottom:4px;
}
.login-card-sub { font-size:14px; color:var(--g500); margin-bottom:28px; }

/* Fields */
.field { margin-bottom:16px; }
.field label {
  display:block; font-size:12px; font-weight:600; color:var(--g600);
  margin-bottom:5px; text-transform:uppercase; letter-spacing:0.04em;
}
.field input {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--g200); border-radius:10px;
  font-family:'DM Sans',sans-serif; font-size:15px; color:var(--g800);
  background:#fff; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(232,113,58,0.12);
}

/* Code input */
.code-input {
  font-family:'Outfit',sans-serif !important;
  font-size:28px !important; font-weight:700 !important;
  letter-spacing:0.2em !important; text-align:center !important;
  padding:16px 14px !important;
}

/* Submit button */
.btn-submit {
  width:100%; padding:14px;
  background:var(--orange); color:#fff; border:none; border-radius:12px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; transition:all 0.2s; margin-top:8px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-submit:hover {
  background:var(--orange-hover); transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(232,113,58,0.35);
}
.btn-submit:active { transform:translateY(0); }

/* Alerts */
.alert {
  padding:12px 14px; border-radius:10px;
  font-size:13px; font-weight:500; margin-bottom:18px;
  display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.alert svg { flex-shrink:0; margin-top:1px; }
.alert-error  { background:#FEF2F2; border:1px solid #FECACA; color:#DC2626; }
.alert-success{ background:var(--green-light); border:1px solid #BBF7D0; color:var(--green); }

/* Links */
.login-link { color:var(--orange); font-weight:600; text-decoration:none; font-size:13px; }
.login-link:hover { text-decoration:underline; }
.login-row { display:flex; align-items:center; justify-content:space-between; margin-top:16px; }

/* MFA badge */
.mfa-method-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--orange-light); color:var(--orange);
  padding:6px 12px; border-radius:20px;
  font-size:12px; font-weight:600; font-family:'Outfit',sans-serif;
  margin-bottom:20px;
}

/* Password strength */
.pw-strength { height:4px; border-radius:2px; margin-top:6px; background:var(--g200); overflow:hidden; }
.pw-strength-bar { height:100%; border-radius:2px; width:0; transition:width 0.3s, background 0.3s; }
.pw-hint { font-size:11px; color:var(--g400); margin-top:4px; }

/* Divider */
.divider { height:1px; background:var(--g100); margin:20px 0; }

/* Back link */
.back-link {
  display:inline-flex; align-items:center; gap:6px;
  color:rgba(255,255,255,0.5); font-size:13px; text-decoration:none;
  margin-top:20px; transition:color 0.2s;
}
.back-link:hover { color:rgba(255,255,255,0.8); }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}