/* Selected 21st references and provenance: /third-party/login-21st.txt. */
.auth-page {
  --bg: var(--fusion-surface);
  --card: #fff;
  --text: var(--fusion-text);
  --muted: var(--fusion-muted);
  --border: var(--fusion-border);
  --primary: var(--fusion-accent);
  --danger: #b42332;
  --success: #187344;
  --soft: #f5f7fa;
  --warning: #92520b;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  line-height: 20px;
  color-scheme: light;
}
.auth-page.theme-dark {
  /* Match the application's dark surface in selected-21st.css. */
  --card: #101b2a;
  --primary: color-mix(in srgb, var(--fusion-accent) 65%, white);
  --danger: #ff9aa3;
  --success: #81d9a2;
  --soft: #222e3f;
  --warning: #efb670;
  color-scheme: dark;
}
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth-page [hidden] { display: none !important; }
.auth-page button, .auth-page input, .auth-page select { font: inherit; }
.auth-page button { cursor: pointer; }
.auth-page :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.auth-page ::selection { background: var(--primary); color: var(--card); }
.auth-toolbar { position: absolute; inset: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 16px 28px 0; min-height: 60px; }
.auth-page .login-lang-host .lw-select { min-height: 40px; padding: 8px 26px 8px 12px; border-radius: 8px; }
.auth-page .login-lang-host .lw-globe { stroke: var(--muted); }
.login-page { min-height: 100svh; display: flex; padding: 80px 16px; }
/* Signup 1: max-w-sm, px-6 py-12, gap-y-8, rounded-md, shadow-md. */
.login-card { width: 100%; max-width: 384px; margin: auto; padding: 48px 24px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; }
.login-brand { display: flex; justify-content: center; margin-bottom: 32px; }
.login-brand img { display: block; width: auto; max-width: 100%; height: 40px; }
.auth-page.theme-dark .login-brand img { content: url("/img/brand/fusion-logo-dark.svg"); }
.auth-heading { margin-bottom: 26px; text-align: center; }
.auth-heading h1 { margin: 0; font-size: 25px; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { min-width: 0; display: grid; gap: 8px; }
.auth-field label { font-weight: 500; }
.auth-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.auth-field input { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 8px; padding: 8px 12px; caret-color: var(--primary); }
.auth-field input::placeholder { color: var(--muted); opacity: 1; }
.auth-field input:focus { border-color: var(--primary); }
.auth-field input[aria-invalid="true"] { border-color: var(--danger); }
.auth-field input:disabled { background: var(--soft); }
.password-field { position: relative; }
.password-field input { padding-right: 36px; }
.password-toggle { position: absolute; inset: 0 0 0 auto; display: grid; place-items: center; width: 36px; padding: 0; background: transparent; color: color-mix(in srgb, var(--muted) 80%, transparent); border: 0; border-radius: 0 8px 8px 0; }
.password-toggle svg { width: 16px; height: 16px; }
.password-toggle:hover { color: var(--text); }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; margin-top: 8px; padding: 8px 16px; border: 0; border-radius: 8px; background: var(--fusion-accent); color: #fff; font-weight: 500; line-height: 20px; }
.auth-submit:hover { background: var(--fusion-accent-hover); }
.auth-page button:disabled { cursor: wait; opacity: 0.65; }
.login-form[aria-busy="true"] .auth-submit::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: auth-spin 0.8s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.text-button { padding: 0; min-height: 24px; border: 0; background: transparent; color: var(--primary); text-underline-offset: 4px; }
.text-button:hover { text-decoration: underline; }
.auth-switch { display: flex; justify-content: center; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-top: 16px; color: var(--muted); }
.auth-switch p { margin: 0; }
.auth-switch .text-button { min-height: 20px; font-weight: 500; color: var(--primary); text-decoration: none; }
.auth-switch .text-button:hover { text-decoration: underline; }
.auth-recovery { margin-top: -12px; text-align: right; }
.auth-help { margin: 0; color: var(--muted); line-height: 1.6; }
.auth-email { margin: -10px 0 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.auth-message { margin: 0 0 20px; padding: 12px 14px; background: var(--soft); border: 1px solid var(--border); border-radius: 7px; overflow-wrap: anywhere; }
.auth-error { color: var(--danger); border-color: var(--danger); }
.auth-domains { margin-top: -8px; font-size: 12px; color: var(--muted); }
.auth-domains summary { width: fit-content; padding: 3px 0; cursor: pointer; text-underline-offset: 3px; }
.auth-domains p { margin: 6px 0 0; line-height: 1.7; overflow-wrap: anywhere; }
/* Origin UI: h-9 input, mt-3/mb-4 indicator, four rows with 6px gaps. */
.auth-field:has(.password-guidance) { display: block; }
.auth-field:has(.password-guidance) > label { display: block; margin-bottom: 8px; line-height: 16px; }
.auth-field:has(.password-guidance) input { height: 36px; box-shadow: 0 1px 2px #0000000d; }
.auth-field:has(.password-guidance) input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.password-guidance { font-size: 12px; color: var(--muted); }
.strength-track { height: 4px; margin: 12px 0 16px; background: var(--border); overflow: hidden; border-radius: 9999px; }
.strength-fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: #ef4444; transition: transform 500ms ease-out, background-color 500ms ease-out; }
.password-guidance[data-score="0"] .strength-fill { background: var(--border); }
.password-guidance[data-score="2"] .strength-fill { background: #f97316; }
.password-guidance[data-score="3"] .strength-fill { background: #f59e0b; }
.password-guidance[data-score="4"] .strength-fill { background: #10b981; }
.strength-label { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.strength-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 0; }
.strength-list li { display: flex; gap: 8px; align-items: center; line-height: 16px; }
.strength-list svg { width: 16px; height: 16px; flex: 0 0 auto; color: color-mix(in srgb, var(--muted) 80%, transparent); }
.strength-list [data-met="true"] { color: #059669; }
.strength-list [data-met="true"] svg { color: #10b981; }
.otp-field { position: relative; height: 54px; isolation: isolate; }
.auth-field .otp-field input { position: absolute; inset: 0; height: 100%; opacity: 0; z-index: 1; cursor: text; }
.otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; height: 100%; }
.otp-cell { display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--card); }
.otp-field:focus-within .otp-cell[data-active="true"] { outline: 2px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
.otp-field:has([aria-invalid="true"]) .otp-cell { border-color: var(--danger); }
.auth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .auth-toolbar { padding: 12px 20px 0; }
  .login-page { padding: 76px 16px 32px; }
}
@media (max-width: 360px) {
  .login-card { padding-inline: 18px; }
  .auth-row, .strength-list { grid-template-columns: 1fr; }
  .otp-cells { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .strength-fill { transition: none; }
  .login-form[aria-busy="true"] .auth-submit::before { animation: none; }
}