static/css/auth.css

/* ═══════════════════════════════════════════════════
   ICH Screening — Auth Pages CSS
   Split-layout, glassmorphism, micro-animations
   ═══════════════════════════════════════════════════ */

/* ── Auth root ──────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  background: #070d1a;
  overflow: hidden;
}

/* ── Left brand panel ───────────────────────────── */
.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 52px;
  width: 44%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 700px 500px at 15% 25%, rgba(110,168,254,.14) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 80%, rgba(99,102,241,.12) 0%, transparent 65%),
    linear-gradient(145deg, #0a1628 0%, #0d1f3c 50%, #0c1427 100%);
  border-right: 1px solid rgba(36,51,86,.6);
}
.auth-brand::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,168,254,.07) 0%, transparent 70%);
  top: -80px; left: -80px;
  animation: orb 7s ease-in-out infinite;
}
.auth-brand::after {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 70%);
  bottom: -60px; right: -60px;
  animation: orb 9s ease-in-out infinite reverse;
}
@keyframes orb {
  0%,100%{ transform:scale(1); opacity:.8; }
  50%    { transform:scale(1.18); opacity:1; }
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
  position: relative; z-index: 1;
}
.auth-brand-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6ea8fe 0%, #6366f1 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 22px rgba(110,168,254,.4);
}
.auth-brand-icon svg { color: #fff; }
.auth-brand-name {
  font-size: 1.05rem; font-weight: 800;
  color: #e8ecf6; letter-spacing: -.02em;
}

.auth-headline {
  position: relative; z-index: 1; margin-bottom: 20px;
}
.auth-headline h2 {
  font-size: 2rem; font-weight: 800;
  line-height: 1.2; letter-spacing: -.03em;
  color: #e8ecf6; margin-bottom: 12px;
}
.auth-headline h2 .grad {
  background: linear-gradient(135deg, #6ea8fe 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.auth-headline p {
  font-size: .95rem; color: #8ba0c4;
  line-height: 1.65; max-width: 320px;
}

.auth-features {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
}
.auth-features li {
  display: flex; align-items: center; gap: 12px;
  font-size: .9rem; color: #8ba0c4;
}
.feat-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(110,168,254,.1);
  border: 1px solid rgba(110,168,254,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #6ea8fe;
}

.auth-illustration {
  position: relative; z-index: 1;
  margin-top: 44px; display: flex; justify-content: center;
}
.auth-illustration svg {
  filter: drop-shadow(0 0 28px rgba(110,168,254,.25));
  animation: float-scan 4s ease-in-out infinite;
}
@keyframes float-scan {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* ── Right form panel ───────────────────────────── */
.auth-form-panel {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 48px 40px;
  overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 420px;
  animation: slide-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes slide-in {
  from{ opacity:0; transform:translateX(22px); }
  to  { opacity:1; transform:translateX(0); }
}
.auth-card-header { margin-bottom: 28px; }
.auth-card-header h2 {
  font-size: 1.7rem; font-weight: 800;
  color: #e8ecf6; letter-spacing: -.03em; margin-bottom: 5px;
}
.auth-card-header p { color: #8ba0c4; font-size: .9rem; }

/* ── Alerts ──────────────────────────────────────── */
.auth-alerts { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 15px; border-radius:10px;
  font-size:.87rem; line-height:1.5;
  animation:alert-in .3s ease;
}
@keyframes alert-in { from{opacity:0;transform:translateY(-7px);} to{opacity:1;transform:translateY(0);} }
.alert-error   { background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fb7185; }
.alert-success { background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.3);  color:#34d399; }
.alert-info    { background:rgba(110,168,254,.1); border:1px solid rgba(110,168,254,.3); color:#6ea8fe; }

/* ── Form ────────────────────────────────────────── */
.auth-form { display:flex; flex-direction:column; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
  font-size:.78rem; font-weight:700;
  color:#8ba0c4; text-transform:uppercase; letter-spacing:.06em;
}
.form-hint { font-size:.76rem; color:#3d5482; margin-top:2px; }

.input-wrap { position:relative; }
.input-icon {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:#3d5482; pointer-events:none; transition:color .2s;
}
.input-wrap input {
  width:100%;
  background:rgba(11,18,36,.8);
  color:#e8ecf6;
  border:1px solid #243356;
  border-radius:11px;
  padding:12px 13px 12px 40px;
  font-size:.92rem; font-family:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;
}
.input-wrap input::placeholder { color:#3d5482; }
.input-wrap input:focus {
  outline:none;
  border-color:#6ea8fe;
  background:rgba(15,24,50,.9);
  box-shadow:0 0 0 3px rgba(110,168,254,.12);
}
.input-wrap:focus-within .input-icon { color:#6ea8fe; }
.input-wrap input.has-toggle { padding-right:40px; }

/* OTP Inputs */
.otp-digit {
  width: 100%;
  aspect-ratio: 1; /* Make it square */
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  background: rgba(11, 18, 36, 0.8);
  color: #e8ecf6;
  border: 1px solid #243356;
  border-radius: 12px;
  transition: all 0.2s;
  -webkit-appearance: none;
}
.otp-digit:focus {
  outline: none;
  border-color: #6ea8fe;
  background: rgba(15, 24, 50, 0.9);
  box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.15);
  transform: translateY(-2px);
}
.otp-digit:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-pw-toggle {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:#3d5482;
  cursor:pointer; padding:4px; border-radius:6px;
  display:flex; align-items:center; transition:color .2s;
}
.btn-pw-toggle:hover { color:#6ea8fe; background:transparent; border:none; box-shadow:none; }

/* password strength */
.pw-strength-bar {
  height:3px; border-radius:3px; background:#162244; overflow:hidden; margin-top:6px;
}
.pw-strength-fill {
  height:100%; border-radius:3px; transition:width .35s ease,background .35s ease; width:0%;
}
.pw-strength-text { font-size:.73rem; margin-top:3px; font-weight:700; }
.pw-strength-fill.weak   { width:25%; background:#fb7185; }
.pw-strength-fill.fair   { width:55%; background:#fbbf24; }
.pw-strength-fill.good   { width:78%; background:#34d399; }
.pw-strength-fill.strong { width:100%; background:#6ea8fe; }
.pw-strength-text.weak   { color:#fb7185; }
.pw-strength-text.fair   { color:#fbbf24; }
.pw-strength-text.good   { color:#34d399; }
.pw-strength-text.strong { color:#6ea8fe; }

/* remember / forgot row */
.auth-row {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.form-check { display:flex; align-items:center; gap:7px; cursor:pointer; }
.form-check-input { width:15px; height:15px; accent-color:#6ea8fe; cursor:pointer; }
.form-check-label { font-size:.86rem; color:#8ba0c4; cursor:pointer; }
.auth-link-sm {
  font-size:.83rem; color:#6ea8fe; text-decoration:none; transition:color .2s;
}
.auth-link-sm:hover { color:#a8c9ff; text-decoration:underline; }

/* submit button */
.btn-auth-submit {
  width:100%; padding:13px;
  background:linear-gradient(135deg,#6ea8fe 0%,#6366f1 100%);
  color:#fff; border:none; border-radius:12px;
  font-size:.93rem; font-weight:700; font-family:inherit;
  cursor:pointer; letter-spacing:.01em; margin-top:4px;
  box-shadow:0 4px 20px rgba(110,168,254,.3);
  transition:opacity .2s,transform .15s,box-shadow .2s;
}
.btn-auth-submit:hover {
  opacity:.9; transform:translateY(-1px);
  box-shadow:0 6px 26px rgba(110,168,254,.4);
  border:none; background:linear-gradient(135deg,#6ea8fe 0%,#6366f1 100%);
}
.btn-auth-submit:active { transform:translateY(0); }

/* footer */
.auth-footer {
  margin-top:24px; text-align:center;
  font-size:.87rem; color:#8ba0c4;
}
.auth-footer a { color:#6ea8fe; font-weight:600; text-decoration:none; transition:color .2s; }
.auth-footer a:hover { color:#a8c9ff; }

/* ── Profile ─────────────────────────────────────── */
.profile-page { max-width:660px; margin:0 auto; padding-top:16px; }
.profile-hero {
  display:flex; align-items:center; gap:22px;
  margin-bottom:24px; padding:26px 28px;
  background:linear-gradient(135deg,#111c33 0%,#162244 100%);
  border:1px solid #243356; border-radius:20px; position:relative; overflow:hidden;
}
.profile-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 400px 250px at 0% 0%,rgba(110,168,254,.07),transparent);
  pointer-events:none;
}
.profile-avatar {
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg,#6ea8fe,#6366f1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 0 0 4px rgba(110,168,254,.15),0 0 22px rgba(110,168,254,.28);
}
.profile-identity h2 {
  font-size:1.35rem; font-weight:800; color:#e8ecf6; letter-spacing:-.02em;
}
.profile-identity .profile-email { color:#8ba0c4; font-size:.88rem; margin-top:2px; }
.profile-badge {
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:.75rem; color:#6ea8fe; font-weight:700;
  background:rgba(110,168,254,.1); border:1px solid rgba(110,168,254,.2);
  border-radius:999px; padding:3px 11px;
}

.profile-section {
  background:linear-gradient(180deg,#162244 0%,#111c33 100%);
  border:1px solid #243356; border-radius:16px;
  padding:22px 26px; margin-bottom:14px;
}
.profile-section h3 {
  font-size:.78rem; font-weight:700; color:#8ba0c4;
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.profile-section h3 svg { color:#6ea8fe; }
.profile-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(36,51,86,.5);
  font-size:.9rem; gap:12px;
}
.profile-row:last-child { border-bottom:none; }
.pr-label { color:#8ba0c4; font-weight:500; }
.pr-value  { color:#e8ecf6; font-weight:600; text-align:right; }

/* inline pw form */
.pw-change-section { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.pw-toggle-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid #243356; color:#6ea8fe;
  font-size:.86rem; padding:8px 16px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-weight:600; transition:all .2s; width:fit-content;
}
.pw-toggle-btn:hover { background:rgba(110,168,254,.08); border-color:#6ea8fe; }
.pw-change-fields { display:none; flex-direction:column; gap:12px; }
.pw-change-fields.active { display:flex; }
.pw-action-row { display:flex; gap:9px; flex-wrap:wrap; }
.btn-save-pw {
  padding:9px 20px; background:linear-gradient(135deg,#6ea8fe,#6366f1);
  color:#fff; border:none; border-radius:9px;
  font-weight:700; font-family:inherit; cursor:pointer; font-size:.86rem;
  transition:opacity .2s,transform .15s;
}
.btn-save-pw:hover { opacity:.88; transform:translateY(-1px); border:none; }
.btn-cancel-pw {
  padding:9px 20px; background:transparent; border:1px solid #243356;
  color:#8ba0c4; border-radius:9px; font-weight:600;
  font-family:inherit; cursor:pointer; font-size:.86rem; transition:all .2s;
}
.btn-cancel-pw:hover { border-color:#6ea8fe; color:#6ea8fe; background:transparent; }
#pwMessage { font-size:.83rem; padding:9px 13px; border-radius:9px; display:none; }
#pwMessage.success { display:block; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color:#34d399; }
#pwMessage.error   { display:block; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fb7185; }

/* danger zone */
.profile-danger { border-color:rgba(251,113,133,.22); background:linear-gradient(180deg,rgba(251,113,133,.05) 0%,#111c33 100%); }
.profile-danger h3 { color:#fb7185; }
.profile-danger h3 svg { color:#fb7185; }
.btn-logout-danger {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; background:rgba(251,113,133,.1);
  border:1px solid rgba(251,113,133,.28); color:#fb7185;
  border-radius:10px; font-weight:700; font-family:inherit;
  font-size:.88rem; cursor:pointer; transition:all .2s;
}
.btn-logout-danger:hover { background:rgba(251,113,133,.18); border-color:#fb7185; transform:none; }

/* ── Responsive ─────────────────────────────────── */
@media(max-width:860px){
  .auth-brand { display:none; }
  .auth-form-panel { padding:40px 28px; background:#070d1a; }
}
@media(max-width:480px){
  .auth-form-panel { padding:32px 18px; }
  .auth-card-header h2 { font-size:1.45rem; }
}