:root{
  --auth-bg1: rgba(37,99,235,0.06);
  --auth-bg2: rgba(15,118,110,0.10);
  --auth-gradient-1: #0f766e;
  --auth-gradient-2: #2563eb;
  --auth-heading: var(--auth-cta);
  --auth-subtext: #475569;
  --auth-cta: #0b69e6;
  --auth-ink: #0b1320;
  --auth-muted: #64748b;
  --auth-surface: #ffffff;
  --auth-surface-2: #f8fafc;
  --auth-stroke: rgba(15,23,42,0.08);
  --auth-radius: 16px;
  --auth-shadow: 0 22px 70px rgba(2,6,23,0.10);
}

/* Shell background adjustments */
/* make widths and padding predictable */
*, *::before, *::after { box-sizing: border-box; }

body { background: radial-gradient(circle at 20% 10%, var(--auth-bg1), transparent 45%), radial-gradient(circle at 80% 90%, var(--auth-bg2), transparent 45%), linear-gradient(180deg,#f5f7fb,#eef2f7) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--auth-ink); min-height:100vh; display: grid; place-items: center; padding: 22px; }

body::before, body::after { content: ''; position: fixed; border-radius: 999px; filter: blur(28px); opacity: 0.35; z-index: 0; }
body::before { width: 580px; height: 580px; top: -240px; right: -140px; background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 70%); }
body::after { width: 560px; height: 560px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(15,118,110,0.18), transparent 70%); }

/* Layout shell */
.auth-shell { width:100%; max-width:1240px; background: var(--auth-surface); border-radius:18px; display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, 480px); align-items:stretch; overflow:hidden; position:relative; z-index:1; gap:0; box-shadow: var(--auth-shadow); padding:0; border:1px solid var(--auth-stroke); margin: 0; }
.auth-brand { padding:16px 20px; background: linear-gradient(135deg, rgba(15,118,110,1) 0%, rgba(37,99,235,0.95) 100%); display:grid; gap:8px; color: #fff; position: relative; overflow: hidden; }
.auth-brand::after{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 55%); pointer-events: none; }
.brand-row { display:flex; gap:14px; align-items:center; z-index:1; }
.brand-row img{ height:40px; width:auto; }
.hero-copy h1{ font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2.2vw, 28px); margin-bottom:6px; color: #ffffff; letter-spacing: -0.2px; text-shadow: 0 4px 8px rgba(2,6,23,0.08); }
.hero-copy p{ color: rgba(248,250,252,0.9); font-size: 14px; line-height:1.4; margin-bottom:6px; }
.value-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.value-card{ background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); border-radius:8px; padding:8px; font-size:13px; }
.trust-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.trust-pill{ padding:8px 12px; background: rgba(255,255,255,0.18); color:#f8fafc; border-radius:999px; font-size:12px; font-weight:700; }

/* Card */

.auth-card{ background: var(--auth-surface) !important; border-radius:18px !important; padding:26px 28px !important; box-shadow: 0 14px 40px rgba(2,6,23,0.08) !important; border: 1px solid rgba(2,6,23,0.06) !important; width:100%; max-width: none !important; box-sizing: border-box; margin: 22px; align-self: center; position: relative; overflow: hidden; transform: translateY(6px); opacity: 0; animation: authEnter 650ms cubic-bezier(.2,.9,.25,1) both; }
.auth-card::before{ content:""; position:absolute; inset:-2px; background: linear-gradient(120deg, rgba(37,99,235,0.70), rgba(15,118,110,0.70), rgba(245,158,11,0.55)); opacity: 0.22; filter: blur(0px); pointer-events:none; }
.auth-card::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 20% 10%, rgba(37,99,235,0.10), transparent 46%), radial-gradient(circle at 80% 90%, rgba(15,118,110,0.12), transparent 48%); pointer-events:none; opacity: 0.9; }
.auth-card > *{ position: relative; z-index: 1; }

.auth-card{ transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.auth-card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 22px 70px rgba(2,6,23,0.14) !important; border-color: rgba(37,99,235,0.22) !important; }

.auth-card h2{ font-family: Georgia, "Times New Roman", serif; font-size:22px !important; color:var(--auth-heading) !important; margin-bottom:4px !important; letter-spacing:-0.3px; }
.auth-card p{ color:var(--auth-subtext) !important; margin-bottom:4px !important; }

/* Compact variant used by register */
.auth-card.compact{ max-width:380px !important; padding:20px 20px !important; }

/* Inputs */

.input-wrap{ position: relative; display:block; margin-bottom:4px; }
.input-wrap i{ left:14px; top:50%; transform:translateY(-50%); position:absolute; color:#94a3b8; font-size:14px; }
.input-wrap, .form-group { width: 100%; }
.form-group{ margin-bottom:4px; }
.form-group label{ display:block; margin-bottom:4px; }
.value-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
.trust-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.trust-pill{ padding:6px 10px; background: rgba(255,255,255,0.16); color:#f8fafc; border-radius:999px; font-size:12px; font-weight:700; }
.form-control{ width:100%; padding:12px 56px 12px 42px; border-radius:14px; border:1px solid rgba(15,23,42,0.08); background: #eef6ff; font-size:15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); box-sizing: border-box; max-width: 100%; }
.form-control::placeholder{ color: #6b7280; }
.form-control:focus{ outline:none; box-shadow:0 8px 30px rgba(37,99,235,0.08) !important; border-color: rgba(37,99,235,0.45) !important; background: #ffffff; }
.form-control{ transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.form-control:hover{ border-color: rgba(15,118,110,0.25); transform: translateY(-1px); }

/* Password toggle */
.toggle-pass{ right:14px !important; top:50% !important; transform:translateY(-50%) !important; background: rgba(255,255,255,0.95); border:1px solid rgba(2,6,23,0.06); color:var(--auth-muted); cursor:pointer; font-size:14px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:999px; box-shadow: 0 6px 20px rgba(2,6,23,0.08); z-index:3; }

/* Checkbox */
.form-actions label input[type=checkbox]{ width:16px; height:16px; margin-right:8px; accent-color:var(--auth-gradient-1); }

/* Primary button */
.btn-primary{ border-radius:999px !important; padding:12px 18px !important; font-size:15px !important; font-weight:800 !important; background: linear-gradient(95deg, var(--auth-gradient-1), var(--auth-gradient-2)) !important; color:#fff !important; box-shadow: 0 14px 40px rgba(37,99,235,0.18) !important; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-primary i{ transform: translateY(1px); }
.btn-primary{ transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.btn-primary:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 52px rgba(37,99,235,0.26) !important; filter: saturate(1.06); }
.btn-primary:active{ transform: translateY(0) scale(0.995); }

/* Footer link */
.auth-footer{ color:var(--auth-muted); }
.auth-footer a{ color:var(--auth-gradient-2); font-weight:700; }

/* Responsive tweaks */
@media (max-width:980px){ .auth-shell{ grid-template-columns: 1fr; } .auth-brand{ order:2; } .auth-card{ margin: 18px; } }
@media (max-width:640px){ body{ padding: 16px; } .auth-card{ margin: 14px; padding: 22px 18px !important; max-width: 100% !important; box-shadow: 0 10px 30px rgba(2,6,23,0.06) !important; } }

/* Intro animation + stagger */
@keyframes authEnter { from { opacity:0; transform: translateY(14px) scale(0.985); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes authFadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
.auth-form > *{ opacity: 0; transform: translateY(8px); animation: authFadeUp 520ms cubic-bezier(.2,.9,.25,1) both; }
.auth-form > *:nth-child(1){ animation-delay: 40ms; }
.auth-form > *:nth-child(2){ animation-delay: 90ms; }
.auth-form > *:nth-child(3){ animation-delay: 140ms; }
.auth-form > *:nth-child(4){ animation-delay: 190ms; }
.auth-form > *:nth-child(5){ animation-delay: 240ms; }
.auth-form > *:nth-child(6){ animation-delay: 290ms; }
.auth-form > *:nth-child(7){ animation-delay: 340ms; }
.auth-form > *:nth-child(8){ animation-delay: 390ms; }
.auth-form > *:nth-child(9){ animation-delay: 440ms; }
.auth-form > *:nth-child(10){ animation-delay: 490ms; }

/* Value cards hover */
.value-card{ transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.value-card:hover{ transform: translateY(-4px); background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.trust-pill{ transition: transform 180ms ease, background 180ms ease; }
.trust-pill:hover{ transform: translateY(-2px); background: rgba(255,255,255,0.22); }

@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-form > *{ animation: none !important; opacity: 1 !important; transform: none !important; }
  .auth-card, .btn-primary, .form-control, .value-card, .trust-pill{ transition: none !important; }
}

/* Card header with small logo */
.card-header{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:4px; }
.card-logo{ width:150px; height:auto; display:block; border-radius:8px; box-shadow: 0 8px 26px rgba(2,6,23,0.08); margin-bottom:0; }
@media (max-width:980px){ .card-logo{ width:120px; } }
@media (max-width:640px){ .card-logo{ width:80px; } .card-header{ gap:8px; } }

/* Top-left logo inside auth shell */
.auth-toplogo{ position:absolute; top:12px; left:18px; z-index:4; display:block; }
.auth-toplogo img{ width:220px; height:auto; display:block; filter:none; }
@media (max-width:980px){ .auth-toplogo{ left:12px; top:10px; } .auth-toplogo img{ width:160px; } }

/* no extra duplicate margin rules */

/* Toast / popup */
.toast{ position: fixed; top: 22px; right: 22px; background: linear-gradient(90deg,#06b6d4,#2563eb); color:#fff; padding:10px 16px; border-radius:10px; box-shadow:0 10px 30px rgba(2,6,23,0.12); z-index:9999; opacity:0; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease; pointer-events:none; font-weight:600; }
.toast.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
.toast.success{ background: linear-gradient(90deg,#10b981,#06b6d4); }
.toast .close{ margin-left:12px; background: rgba(255,255,255,0.12); border-radius:6px; padding:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

/* Centered success modal */
.success-modal{ position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(2,6,23,0.45); opacity:0; pointer-events:none; transition: opacity .28s ease; z-index:10000; }
.success-modal.show{ opacity:1; pointer-events:auto; }
.success-modal-content{ background: #fff; padding:22px 26px; border-radius:12px; width: min(520px,92%); text-align:center; box-shadow: 0 18px 40px rgba(2,6,23,0.18); position:relative; }
.success-modal .success-icon{ font-size:48px; color:#10b981; margin-bottom:10px; }
.success-modal h3{ margin:0 0 6px; font-size:20px; color:var(--auth-heading); }
.success-modal p{ margin:0 0 12px; color:var(--auth-muted); font-size:14px; }
.success-modal-close{ position:absolute; top:10px; right:10px; background:transparent; border:0; font-size:20px; color:#94a3b8; cursor:pointer; padding:6px; border-radius:6px; }
.success-modal-content .btn-primary{ margin-top:12px; }

@media (max-width:640px){ .success-modal-content{ padding:18px; } .success-modal .success-icon{ font-size:40px; } }

/* Alerts */
.alert{ padding:10px 12px; border-radius:8px; margin-bottom:10px; font-weight:600; }
.alert-success{ color: #065f46; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.12); }
.alert-danger{ color: #b91c1c; background: rgba(185,28,28,0.04); border: 1px solid rgba(185,28,28,0.12); }