/* Authentication pages mirror the original SairikLabs max-w-sm card layout. */
.auth-page-body {
    min-height: 100svh;
    background: var(--background);
}

.auth-page-body .site-page,
.auth-page-body main {
    min-height: 100svh;
    background: var(--background);
}

.auth-shell {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: 40px;
}

.auth-stack {
    display: flex;
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
    flex-direction: column;
    gap: 16px;
}

.auth-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card, var(--background));
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.auth-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    text-align: center;
}

.auth-logo {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    background: var(--primary);
    color: var(--primary-foreground, #fff);
    box-shadow: var(--shadow-sm);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
}

.auth-card-header h1,
.auth-card-header h2 {
    margin: var(--space-xs) 0 0;
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--text-card-title);
    font-weight: 700;
    line-height: var(--leading-heading);
    letter-spacing: -.02em;
}

.auth-card-header p {
    margin: 8px 0 0;
    color: var(--muted-foreground);
    font-size: .875rem;
}

.auth-form,
.auth-card > .social-auth,
.auth-card > .auth-divider,
.auth-card > .oauth-unavailable-note {
    margin-right: 16px;
    margin-left: 16px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.auth-form-register {
    gap: 24px;
}

.auth-form .field-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-form .field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.auth-form .field label {
    color: var(--foreground);
    font-size: .875rem;
    font-weight: 600;
}

.auth-form .field input {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--input);
    border-radius: var(--radius-input);
    background: var(--background);
    box-shadow: var(--shadow-sm);
    color: var(--foreground);
    font-size: var(--text-sm);
    line-height: var(--leading-control);
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

@media (hover: hover) {
    .auth-form .field input:hover:not(:disabled) {
        border-color: var(--color-control-border-hover);
    }
}

.auth-form .field input:focus-visible {
    border-color: var(--primary);
    outline: var(--focus-ring-width) solid var(--ring);
    outline-offset: var(--focus-ring-offset);
}

.auth-form .field input:disabled {
    border-color: var(--color-control-border-disabled);
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: .72;
}

.auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.auth-label-row a {
    padding: 0;
    color: var(--muted-foreground);
    font-size: .75rem;
    font-weight: 400;
}

.auth-label-row a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 42px !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    width: var(--control-height);
    min-height: var(--control-height);
    height: 100%;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius-input);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: transparent;
    color: var(--foreground);
}

.field-validation {
    min-height: 1lh;
    color: var(--destructive);
    font-size: .75rem;
    line-height: 1.35;
}

.field-validation:empty {
    visibility: hidden;
}

.auth-validation.validation-summary-valid {
    display: none;
}

.auth-validation {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent);
    border-radius: var(--radius-input);
    background: var(--color-danger-soft);
    color: var(--destructive);
    font-size: .78rem;
    line-height: 1.45;
}

.auth-validation ul {
    margin: 0;
    padding-left: 18px;
}

.auth-submit,
.oauth-button {
    width: 100%;
    min-height: var(--control-height);
    padding: 9px 14px;
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
}

.auth-submit {
    margin-top: 0;
    min-height: var(--control-height-large);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    flex: 1;
    background: var(--border);
    content: "";
}

.auth-divider span {
    margin: 0 16px;
    font-size: .875rem;
}

.social-auth {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.oauth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--input);
    background: var(--background);
    color: var(--foreground);
    font-weight: 500;
}

.oauth-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--primary);
    background: var(--muted);
    box-shadow: 0 0 0 1px var(--primary);
}

.oauth-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 0 1px var(--input);
}

.oauth-button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.oauth-button.is-loading {
    pointer-events: none;
    opacity: .72;
}

.oauth-button.is-pending-disabled {
    pointer-events: none;
    opacity: .5;
}

.oauth-button .ui-icon,
.oauth-google-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.oauth-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: auth-spin .75s linear infinite;
}

.oauth-button.is-loading .oauth-provider-icon {
    display: none;
}

.oauth-button.is-loading .oauth-spinner {
    display: inline-block;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* OAuth buttons provide their own spinner. Suppress the global busy pseudo-element
   so the user never sees two loading indicators on the same control. */
.oauth-button[aria-busy="true"]::after {
    display: none !important;
    content: none !important;
}

.oauth-button.is-loading span:last-child {
    white-space: nowrap;
}

.oauth-unavailable-note {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--muted-foreground);
    font-size: .68rem;
    line-height: 1.45;
    text-align: center;
}

.auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.auth-card-footer a {
    width: 100%;
    color: var(--muted-foreground);
    font-size: .8rem;
    font-weight: 400;
    text-align: center;
}

.auth-card-footer a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-consent {
    width: 100%;
    margin: 0;
    color: var(--muted-foreground);
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
}

.auth-consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-consent a:hover {
    color: var(--primary);
}

.auth-back-link {
    position: fixed;
    z-index: 90;
    top: 24px;
    left: 24px;
}

.auth-error-message {
    margin: 0 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: .82rem;
    line-height: 1.55;
    text-align: center;
}

.auth-error-actions {
    padding: 0 16px 16px;
}

.oauth-button:focus-visible,
.auth-submit:focus-visible,
.password-toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--ring);
    outline-offset: var(--focus-ring-offset);
}

.auth-card input[aria-invalid="true"] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--destructive) 18%, transparent);
}

@media (max-width: 767px) {
    .auth-shell {
        padding: 24px 16px;
    }

    .auth-stack {
        width: min(440px, 100%);
        max-width: 440px;
    }

    .auth-back-link {
        top: 24px;
        left: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .oauth-button,
    .auth-submit {
        transition: none;
    }
}


/* Modal authentication parity with the original Radix dialog. */
body.auth-dialog-open{overflow:hidden}
.auth-dialog{width:min(400px,calc(100% - 28px));max-width:400px;padding:0;overflow:visible;border:0;background:transparent;color:var(--foreground)}
.auth-dialog::backdrop{background:var(--color-overlay);backdrop-filter:blur(4px)}
.auth-dialog-frame{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-dialog);background:var(--background);box-shadow:var(--shadow-lg)}
.auth-dialog-panel{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.auth-dialog-panel[hidden]{display:none}
.auth-dialog-close{position:absolute;z-index:3;top:var(--space-xs);right:var(--space-xs);display:grid;width:var(--control-height);height:var(--control-height);padding:0;place-items:center;border:0;border-radius:var(--radius-input);background:transparent;color:var(--muted-foreground);cursor:pointer}
.auth-dialog-close:hover{background:var(--muted);color:var(--foreground)}
.auth-dialog-close .ui-icon{width:16px;height:16px}
.auth-dialog-header{padding-top:2px}
.auth-dialog .auth-form,.auth-dialog .social-auth,.auth-dialog .auth-divider,.auth-dialog .oauth-unavailable-note{margin-inline:16px}
.auth-dialog .auth-card-footer{margin-top:0}
.auth-dialog-captcha{margin:0 16px 8px;padding-top:4px}
.auth-dialog-captcha .cf-turnstile{display:flex;justify-content:center}
.auth-card-footer button{width:100%;padding:0;border:0;background:transparent;color:var(--muted-foreground);font-size:.8rem;cursor:pointer;text-align:center}
.auth-card-footer button:hover{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
.auth-dialog-consent{margin:var(--space-md) auto 0;color:var(--color-on-dark-muted);text-shadow:0 1px 2px var(--color-shadow-modal)}
.auth-dialog-consent a{color:var(--color-on-dark)}
.auth-validation.success{border-color:color-mix(in srgb,var(--color-success) 35%,transparent);background:var(--color-success-soft);color:var(--color-success)}
@media(max-width:520px){.auth-dialog{width:calc(100% - 24px)}.auth-dialog-consent{font-size:.7rem}}

/* Round 23: a roomier, clearer account recovery experience. */
.auth-shell-recovery { padding: clamp(24px,5vw,72px); }
.auth-recovery-layout { display:grid; width:min(960px,100%); grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-dialog); background:var(--card,var(--background)); box-shadow:var(--shadow-lg); }
.auth-recovery-intro { display:flex; min-height:560px; padding:clamp(36px,6vw,72px); flex-direction:column; justify-content:center; background:var(--color-accent-hover); color:var(--color-on-dark); }
.auth-recovery-brand { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-bottom:auto; }
.auth-recovery-brand .auth-logo { background:var(--color-on-dark); color:var(--color-accent); }
.auth-recovery-brand strong { font-size:1rem; letter-spacing:-.02em; }
.auth-recovery-intro .eyebrow { margin-top:56px; color:var(--color-on-dark-muted); }
.auth-page-body .auth-recovery-intro h1 { max-width:540px; margin:8px 0 16px; color:var(--color-on-dark); font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4.4rem); line-height:.96; letter-spacing:-.04em; }
.auth-recovery-intro > p { max-width:560px; margin:0; color:var(--color-on-dark-muted); font-size:1rem; }
.auth-recovery-steps { display:grid; gap:16px; margin:36px 0 0; padding:0; list-style:none; }
.auth-recovery-steps li { display:flex; align-items:center; gap:13px; }
.auth-recovery-steps li > span { display:grid; width:32px; height:32px; flex:0 0 auto; place-items:center; border:1px solid color-mix(in srgb,var(--color-on-dark) 25%,transparent); border-radius:50%; background:color-mix(in srgb,var(--color-on-dark) 9%,transparent); font-size:.8rem; font-weight:700; }
.auth-recovery-steps div { display:grid; gap:1px; }
.auth-recovery-steps strong { font-size:.9rem; }
.auth-recovery-steps small { color:var(--color-on-dark-muted); }
.auth-recovery-card { align-self:center; margin:32px; padding:12px 0 0; border:0; box-shadow:none; }
.auth-recovery-card-header { align-items:flex-start; padding:12px 28px 0; text-align:left; }
.auth-recovery-card-header h2 { margin:16px 0 4px; font-size:1.65rem; letter-spacing:-.025em; }
.auth-recovery-card-header p { margin:0; font-size:.9rem; line-height:1.55; }
.auth-recovery-icon { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); }
.auth-recovery-icon .ui-icon { width:21px; height:21px; }
.auth-recovery-card .auth-form { margin:28px; }
.auth-recovery-card .field input { min-height:46px; border-radius:10px; font-size:.95rem; }
.auth-recovery-card .auth-submit { min-height:46px; gap:8px; }
.auth-recovery-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 28px; }
.auth-recovery-footer a { display:inline-flex; align-items:center; gap:6px; }
.auth-recovery-footer .ui-icon { width:15px; height:15px; }
@media (max-width:780px) {
  .auth-shell-recovery { align-items:start; padding:calc(var(--control-height) + var(--space-lg)) var(--space-lg) var(--space-lg); }
  .auth-recovery-layout { grid-template-columns:1fr; border-radius:20px; }
  .auth-recovery-intro { min-height:auto; padding:30px 26px; }
  .auth-recovery-brand { margin-bottom:28px; }
  .auth-recovery-intro .eyebrow { margin-top:0; }
  .auth-recovery-intro h1 { font-size:2.5rem; }
  .auth-recovery-steps { display:none; }
  .auth-recovery-card { margin:10px; }
}
@media (max-width:480px) {
  .auth-shell-recovery { padding:calc(var(--control-height) + var(--space-lg)) 0 0; }
  .auth-recovery-layout { min-height:calc(100svh - var(--control-height) - var(--space-lg)); border:0; border-radius:0; }
  .auth-recovery-intro { padding:26px 22px; }
  .auth-recovery-card { margin:0; padding-top:18px; }
  .auth-recovery-card-header,.auth-recovery-footer { padding-right:22px; padding-left:22px; }
  .auth-recovery-card .auth-form { margin-right:22px; margin-left:22px; }
}
.auth-recovery-footer a { width:auto; }

/* Round 24 brand and recovery-form spacing. */
.auth-logo {
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}
.auth-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}
.auth-recovery-brand .auth-logo {
    background: transparent;
    color: inherit;
}
.auth-recovery-card-header {
    padding-right: 36px;
    padding-left: 36px;
}
.auth-recovery-card .auth-form {
    margin: 30px 36px 34px;
}
.auth-recovery-card .auth-form .field,
.auth-recovery-card .auth-submit {
    width: 100%;
    max-width: 100%;
}
.auth-recovery-footer {
    padding-right: 36px;
    padding-left: 36px;
}
@media (max-width: 780px) {
    .auth-recovery-card-header,
    .auth-recovery-footer {
        padding-right: 28px;
        padding-left: 28px;
    }
    .auth-recovery-card .auth-form {
        margin-right: 28px;
        margin-left: 28px;
    }
}
@media (max-width: 520px) {
    .auth-recovery-card-header,
    .auth-recovery-footer {
        padding-right: 22px;
        padding-left: 22px;
    }
    .auth-recovery-card .auth-form {
        margin-right: 22px;
        margin-left: 22px;
    }
}

/* Round 33: balanced recovery form geometry in both locales. */
.auth-shell-recovery { padding: clamp(24px, 4vw, 64px); }
.auth-recovery-layout {
  width: min(1080px, 100%);
  grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr);
}
.auth-recovery-card {
  width: min(470px, calc(100% - 52px));
  margin: 0 auto;
  padding: 24px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--background);
  box-shadow: var(--shadow-md);
}
.auth-recovery-card-header { padding: 0 30px; }
.auth-recovery-card-header h2 { margin-top: 16px; }
.auth-recovery-card .auth-form { margin: 26px 30px 30px; gap: 18px; }
.auth-recovery-card .auth-form .field { gap: 8px; }
.auth-recovery-card .auth-form .field input,
.auth-recovery-card .auth-submit { min-height: 48px; }
.auth-recovery-footer { padding: 16px 30px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 35%, var(--background)); }

@media (max-width: 900px) {
  .auth-recovery-layout { grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr); }
  .auth-recovery-intro { padding: 42px 34px; }
  .auth-recovery-card { width: min(440px, calc(100% - 28px)); }
}
@media (max-width: 780px) {
  .auth-shell-recovery { padding: calc(var(--control-height) + var(--space-lg)) var(--space-lg) var(--space-lg); }
  .auth-recovery-layout { grid-template-columns: 1fr; }
  .auth-recovery-card { width: min(480px, calc(100% - 32px)); margin: 18px auto; }
}
@media (max-width: 480px) {
  .auth-shell-recovery { padding: calc(var(--control-height) + var(--space-lg)) 0 0; }
  .auth-recovery-layout { min-height: calc(100svh - var(--control-height) - var(--space-lg)); }
  .auth-recovery-card { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .auth-recovery-card-header { padding-inline: 22px; }
  .auth-recovery-card .auth-form { margin-inline: 22px; }
  .auth-recovery-footer { padding-inline: 22px; }
}