/* Learner account recovery and signup confirmation. */
:root {
  --system-ink: #17243b;
  --system-copy: #59677d;
  --system-paper: #fbfaf7;
  --system-line: #e8e4dc;
  --system-blue: #1d58ce;
  --system-blue-dark: #1748a7;
  --system-orange: #cc785c;
  --system-green: #27805d;
  --system-red: #bf4d4d;
}

.system-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--system-blue); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.system-kicker::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(29, 88, 206, .09); content: ""; }

/* Password recovery keeps the existing forms and auth-client IDs intact. */
body.auth-page.system-auth-page { display: flex; min-height: 100vh; flex-direction: column; background: radial-gradient(ellipse at 20% 80%, #fff0e7, transparent 31rem), radial-gradient(ellipse at 82% 20%, #edf4ff, transparent 32rem), var(--system-paper); }
.system-auth-page .auth-shell { width: min(1160px, calc(100% - 44px)); flex: 1; padding: 48px 0; }
.system-auth-page .auth-panel { grid-template-columns: minmax(0, 1.02fr) minmax(340px, .78fr); gap: clamp(34px, 7vw, 92px); }
.system-auth-page .auth-logo { left: max(22px, calc((100vw - 1160px) / 2)); color: var(--system-ink); }
.system-auth-page .auth-logo .logo-icon { background: var(--system-blue); color: #fff; }
.system-auth-page .auth-copy h1 { color: var(--system-ink); font-size: clamp(39px, 5.5vw, 64px); }
.system-auth-page .auth-copy p { color: var(--system-copy); }
.system-auth-page .auth-card { border-color: rgba(23, 36, 59, .1); background: rgba(255, 255, 255, .94); box-shadow: 0 20px 60px rgba(30, 49, 78, .11); backdrop-filter: none; }
.system-auth-page .auth-card label { color: #283851; }
.system-auth-page .auth-card .input-field { border-color: #dce3ed; background: #fff; color: var(--system-ink); }
.system-auth-page .auth-card .input-field::placeholder { color: #8b96a5; }
.system-auth-page .auth-card .input-field:focus { border-color: var(--system-blue); box-shadow: 0 0 0 3px rgba(29, 88, 206, .11); }
.system-auth-page .auth-card .btn-primary { background: var(--system-blue); color: #fff; box-shadow: 0 6px 18px rgba(29, 88, 206, .2); }
.system-auth-page .auth-card .btn-primary:hover { background: var(--system-blue-dark); }
.system-auth-page .auth-card .btn-ghost { border-color: var(--system-line); background: white; color: var(--system-ink); }
.system-auth-page .auth-switch, .system-auth-page .auth-switch a, .system-auth-page .auth-inline-link a { color: var(--system-blue); }
.system-auth-page .auth-message { color: #68768b; }
.system-auth-page .auth-message.error { color: #b42318; }
.system-auth-page .auth-message.success { color: var(--system-green); }
.system-auth-mascot { position: relative; width: min(360px, 90%); margin: 25px 0 0 -8px; padding: 14px 20px 5px; border: 1px solid rgba(29, 88, 206, .08); border-radius: 25px; background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(233,242,255,.66)); }
.system-auth-mascot img { width: 100%; max-height: 235px; object-fit: contain; }
.system-auth-mascot figcaption { padding: 0 0 9px; color: #66758a; font-size: 11px; font-weight: 650; text-align: center; }
.system-auth-page .system-kicker { margin-bottom: 11px; }

/* The signup confirmation reuses its live state and keeps its existing controls. */
.signup-success-art { width: 130px; height: 125px; float: right; margin: -12px -4px 3px 14px; }
.signup-success-art img { width: 100%; height: 100%; object-fit: contain; }
#signupSuccess .section-tag { color: var(--system-blue); }
body.auth-page.signup-confirmation { align-items: stretch; justify-content: flex-start; background: radial-gradient(ellipse at 78% 32%, #edf4ff, transparent 31rem), var(--system-paper); color: var(--system-ink); }
.signup-confirmation .auth-shell { width: min(820px, calc(100% - 40px)); }
.signup-confirmation .auth-panel { display: block; padding-top: 52px; }
.signup-confirmation .auth-copy { display: none; }
.signup-confirmation .auth-logo { color: var(--system-ink); }
.signup-confirmation .auth-logo .logo-icon { background: var(--system-blue); color: #fff; }
.signup-confirmation #signupSuccess { display: block; max-width: 760px; padding: clamp(28px, 5vw, 54px); border-color: rgba(23, 36, 59, .1); background: rgba(255, 255, 255, .96); box-shadow: 0 22px 68px rgba(30, 49, 78, .12); }
.signup-confirmation #signupSuccess h2 { max-width: 600px; color: var(--system-ink); font-size: clamp(30px, 4.5vw, 48px); }
.signup-confirmation #signupSuccess p { color: var(--system-copy); }
.signup-confirmation #signupSuccess .btn-primary { background: var(--system-blue); color: #fff; }
.signup-confirmation #signupSuccess .btn-ghost { border-color: var(--system-line); background: #fff; color: var(--system-ink); }

@media (max-width: 780px) {
  .system-auth-page .auth-panel { grid-template-columns: 1fr; gap: 28px; }
  .system-auth-page .auth-shell { padding-top: 92px; }
  .system-auth-mascot { width: min(280px, 82%); margin-top: 17px; }
  .system-auth-mascot img { max-height: 180px; }
}

@media (max-width: 520px) {
  .system-auth-page .auth-shell { width: min(100% - 32px, 1160px); padding-bottom: 30px; }
  .system-auth-page .auth-logo { left: 16px; }
  .system-auth-page .auth-card { padding: 22px; }
}