/* Inter font (swap to local if CSP blocks remote) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Palette tuned to the mock */
:root{
  --page:#2c2838;
  --card:#2d293a;
  --card-edge:#3a3550;
  --ink:#eef0fb;
  --muted:#b6b1c7;
  --border:#413b56;
  --field:#343047;
  --field-border:#4a4561;
  --placeholder:#9f9ab2;
  --accent:#7c5cff;         /* primary purple */
  --accent-hover:#6e51ff;
  --focus:rgba(124,92,255,.36);
  --radius-xl:18px;
}

html,body{height:100%}
body{
  background: radial-gradient(1100px 500px at 50% -10%, #403a58 0%, var(--page) 65%, var(--page) 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}

/* ---------- SCOPE: only affect auth pages ---------- */
.auth-layout .auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px;
}

.auth-layout .auth-split,
.auth-split[data-layout="split"]{
  display:grid !important; grid-template-columns: 1.05fr .95fr; gap:20px;
  width:min(1024px,100%);
  border-radius: calc(var(--radius-xl) + 2px);
  box-shadow: 0 26px 80px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.25);
}

/* Left hero */
.auth-layout .auth-left{
  position:relative; overflow:hidden; border-radius: var(--radius-xl);
  background-color:#0b1422; background-position:center; background-size:cover; background-repeat:no-repeat;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,.06);
}
.auth-layout .auth-left::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,24,39,.08), rgba(17,24,39,.55))}
.auth-layout .auth-left-inner{position:relative; z-index:1; height:100%; padding:18px}
.auth-layout .auth-left-top{display:flex; justify-content:space-between; align-items:center}
.auth-layout .auth-left-top .logo{color:#fff; text-decoration:none}
.auth-layout .auth-left-top .back{
  background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:600; backdrop-filter: blur(8px);
}
.auth-layout .auth-left-bottom{position:absolute; left:0; right:0; bottom:0; padding:26px 22px; color:#fff}
.auth-layout .auth-caption{font-size:22px; font-weight:800; line-height:1.25}
.auth-layout .dots{margin-top:16px; display:flex; gap:8px}
.auth-layout .dots span{width:26px; height:6px; border-radius:6px; background:rgba(255,255,255,.35)}
.auth-layout .dots .active{background:#fff}

/* Right card */
.auth-layout .auth-right{
  background:var(--card); border-radius: var(--radius-xl);
  border:1px solid var(--card-edge);
  padding: 28px 26px;
  color: var(--ink);
}
.auth-layout .auth-h1{font-weight:800; font-size:38px; margin:0 0 12px}
.auth-layout .auth-hint{color:var(--muted); margin-bottom:18px; font-size:15px}

/* Labels & help */
.auth-layout .form-label{color:var(--muted); font-weight:600}
.auth-layout .help-block{color:#ff7a7a; font-size:.87rem; margin-top:.25rem}

/* Fields */
.auth-layout .form-control,
.auth-layout .form-select{
  background:var(--field); color:var(--ink);
  border-radius:12px; border:1px solid var(--field-border);
  padding:.7rem .95rem; font-size:.95rem;
}
.auth-layout .form-control::placeholder{color:var(--placeholder)}
.auth-layout .form-control:focus{
  border-color:var(--accent); box-shadow:0 0 0 .2rem var(--focus); color:var(--ink);
}

/* Checkbox / links row */
.auth-layout .auth-actions{display:flex; justify-content:space-between; align-items:center}
.auth-layout .form-check-input:checked{background-color:var(--accent); border-color:var(--accent)}
.auth-layout a{color:#8aa7ff}
.auth-layout a:hover{color:#a7baff}

/* Submit button */
.auth-layout .auth-submit{
  display:block; width:100%; padding:.85rem 1rem; border-radius:10px; font-weight:700;
  background:var(--accent); color:#fff; border:1px solid #6952ff;
  box-shadow: 0 12px 20px rgba(124,92,255,.25);
  margin-top:6px;
}
.auth-layout .auth-submit:hover{background:var(--accent-hover)}

/* Divider + SSO */
.auth-layout .auth-divider{
  display:flex; align-items:center; gap:12px; color:var(--muted); margin:18px 0 12px;
}
.auth-layout .auth-divider:before,
.auth-layout .auth-divider:after{
  content:""; height:1px; background:var(--border); flex:1;
}

.auth-layout .sso-wrap{margin-top:8px; text-align:center}
.auth-layout .sso-grid{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-start}
.auth-layout .sso-btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:10px; padding:.6rem .9rem;
  font-weight:600; border:1px solid var(--border); background:#272335; color:#e6e4f2; font-size:.95rem;
}
.auth-layout .sso-icon i{font-size:18px}
.auth-layout .sso-apple{background:#151316; border-color:#2b2932}
.auth-layout .sso-google{background:#272335}
.auth-layout .sso-microsoft{background:#272335}
.auth-layout .sso-facebook{background:#1c3fa6; border-color:#1c3fa6}
.auth-layout .sso-twitter{background:#1a8cd8; border-color:#1a8cd8}

/* Responsive */
@media (max-width: 1060px){
  .auth-layout .auth-right{padding:22px 20px}
  .auth-layout .auth-h1{font-size:32px}
}
@media (max-width: 980px){
  .auth-layout .auth-split{grid-template-columns:1fr !important}
  .auth-layout .auth-left{min-height:260px}
}


/* ---------------- Compact mode (smaller card & fonts) ---------------- */
.auth-layout.auth-compact .auth-split{
  width: min(920px, 100%);                     /* narrower overall width (was ~1024) */
  grid-template-columns: 1.02fr .88fr;         /* tighter right column */
}

.auth-layout.auth-compact .auth-left{
  min-height: 470px;                           /* a bit shorter hero */
}
.auth-layout.auth-compact .auth-left-top .back{
  padding: 6px 12px;                           /* slightly smaller “Back” chip */
  font-size: .92rem;
}

.auth-layout.auth-compact .auth-right{
  padding: 20px 18px;                          /* tighter card padding (was 28/26) */
  border-radius: 14px;                         /* a touch less round */
}

/* Headings / copy */
.auth-layout.auth-compact .auth-h1{
  font-size: 30px;                             /* was 38px */
  margin-bottom: 8px;
}
.auth-layout.auth-compact .auth-hint{
  font-size: 14px;                             /* was 15px */
  margin-bottom: 14px;
}

/* Form controls */
.auth-layout.auth-compact .form-control,
.auth-layout.auth-compact .form-select{
  padding: .55rem .75rem;                      /* was .7rem .95rem */
  font-size: .92rem;
  border-radius: 10px;                          /* was 12px */
}
.auth-layout.auth-compact .form-label{
  font-size: .92rem;
}

/* Checkbox row */
.auth-layout.auth-compact .auth-actions{
  font-size: .95rem;
}

/* Submit */
.auth-layout.auth-compact .auth-submit{
  padding: .65rem .9rem;                       /* was .85rem 1rem */
  font-size: 1rem;                             /* keep bold but smaller */
  border-radius: 9px;
  box-shadow: 0 10px 16px rgba(124,92,255,.22);
}

/* Divider + SSO */
.auth-layout.auth-compact .auth-divider{
  margin: 14px 0 10px;
  font-size: .95rem;
}
.auth-layout.auth-compact .sso-grid{ gap: .5rem; }
.auth-layout.auth-compact .sso-btn{
  padding: .5rem .8rem;
  font-size: .9rem;
  border-radius: 9px;
}

/* Slightly smaller dots under the hero caption */
.auth-layout.auth-compact .dots span{ width:22px; height:5px; }