*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-ui); }
.auth-page { min-height: 100vh; padding: 1.5rem; }
.auth-main:focus { outline: none; }
.auth-container {
    width: min(100%, 1480px);
    min-height: calc(100vh - 3rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(32rem, .9fr) minmax(36rem, 1.1fr);
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.auth-main { min-width: 0; padding: 3.25rem 4.5rem 2rem; display: grid; grid-template-rows: auto 1fr auto; }
.auth-brand .navbar-brand { min-height: 44px; display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.auth-brand .brand-icon {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-size: var(--type-title);
}
.auth-brand .brand-text { font: 700 1.55rem var(--font-ui); }
.auth-card-wrapper { width: min(100%, 470px); margin-block: auto; padding-block: 2.5rem; }
.auth-card { width: 100%; }
.auth-card-header { margin-bottom: 2.25rem; }
.auth-card-title { margin: 0 0 .55rem; font: 700 clamp(2rem,3vw,2.65rem) var(--font-ui); letter-spacing: -.035em; }
.auth-card-subtitle { margin: 0; color: var(--ink-muted); font-size: var(--type-lead); }
.auth-form .form-group { margin-bottom: 1.15rem; }
.auth-form label { display: block; margin-bottom: .45rem; color: var(--ink-2); font-size: var(--type-small); font-weight: 600; }
.input-wrapper { position: relative; }
.auth-form .input-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: var(--ink-muted); }
.auth-form .form-control {
    width: 100%; min-height: 52px; padding: .8rem 3rem .8rem 2.75rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit;
}
.auth-form .form-control:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-veil); }
.auth-form .form-control::placeholder { color: var(--ink-muted); }
.auth-form-options { margin: .25rem 0 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; }
.auth-form-options .form-check { min-height: 44px; margin: 0; padding: 0; display: flex; align-items: center; gap: .6rem; }
.auth-form .form-check-label { margin: 0; cursor: pointer; }
.auth-form-options .form-check-input { width: 24px; height: 24px; flex: none; margin: 0; border-color: var(--rule-strong); }
.auth-form-options .form-check-input:checked { border-color: var(--brand-ink); background-color: var(--brand-ink); }
.auth-form-options .form-check-input:focus { outline: none; border-color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-veil); }
.auth-form-options .form-check-label, .forgot-link { color: var(--ink-2); font-size: var(--type-small); }
.forgot-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.forgot-link:hover { color: var(--brand-ink-hover); }
.btn-auth {
    width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 0; border-radius: var(--radius-md); font: inherit; font-weight: 700; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-auth-primary { background: var(--brand); color: var(--on-brand); }
.btn-auth-primary:hover, .btn-auth-primary:active { background: var(--brand-deep); }
.btn-auth-primary:focus-visible { box-shadow: var(--shadow-brand); }
.btn-auth.is-busy { background: var(--brand-deep); cursor: progress; }
.btn-auth.is-busy.can-retry { cursor: pointer; }
.auth-divider { margin: 1.5rem 0; display: flex; align-items: center; gap: .8rem; color: var(--ink-muted); font-size: var(--type-meta); }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--rule); content: ''; }
.auth-social { width: 100%; display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-social {
    min-height: 46px; flex: 1 1 9rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-2);
    font: inherit; font-size: var(--type-body); font-weight: 600; cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.btn-social:hover { border-color: var(--brand-ink); background: var(--brand-ghost); color: var(--brand-ink); }
.auth-card-footer { margin-top: 1.5rem; color: var(--ink-muted); text-align: center; font-size: var(--type-body); }
.auth-card-footer p { margin: 0; }
.auth-card-footer a { color: var(--brand-ink); font-weight: 600; text-underline-offset: .2em; }
.auth-card-footer a:hover { color: var(--brand-ink-hover); }
.auth-footer { padding-top: 2rem; color: var(--ink-muted); font-size: var(--type-meta); }
.auth-footer p { margin: 0; }

.auth-showcase {
    position: relative; margin: 1.5rem; padding: clamp(3rem,6vw,6rem); overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; border-radius: var(--radius-xl); background: var(--brand); color: var(--on-brand);
}
/* The dark theme lifts --brand for controls, which leaves too little contrast for
 * secondary text on a panel this size; the deeper band keeps the copy above 4.5:1,
 * as on the dashboard hero. */
[data-theme="dark"] .auth-showcase { background: var(--brand-band); }
.auth-showcase::before, .auth-showcase::after {
    position: absolute; border: 1px solid var(--on-brand-ghost); border-radius: 50%; content: '';
}
.auth-showcase::before { width: 34rem; height: 34rem; top: -18rem; right: -8rem; }
.auth-showcase::after { width: 28rem; height: 28rem; bottom: -18rem; left: -10rem; }
.auth-showcase-copy, .auth-showcase-preview { position: relative; z-index: 1; }
.auth-showcase h2 { max-width: 12ch; margin: 0; color: var(--on-brand); font: 600 clamp(2.4rem,4vw,4rem)/1.04 var(--font-ui); letter-spacing: -.035em; text-wrap: balance; }
.auth-showcase-copy p { max-width: 36rem; margin: 1.25rem 0 0; color: var(--on-brand-muted); }
.auth-showcase-preview {
    width: min(100%,620px); margin-top: 3.25rem; padding: 1.25rem; border: 1px solid var(--on-brand-line);
    border-radius: var(--radius-lg); background: var(--on-brand); box-shadow: var(--shadow-brand); color: var(--inset-ink);
}
.preview-topline { display: flex; justify-content: space-between; gap: 1rem; color: var(--inset-ink-muted); font-size: var(--type-micro); }
.preview-topline strong { color: var(--inset-ink); }
.preview-metrics { margin: 1rem 0; display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.preview-metrics div { padding: .75rem; border: 1px solid var(--inset-rule); border-radius: var(--radius-md); background: var(--inset-surface); }
.preview-metrics span, .preview-metrics strong { display: block; }
.preview-metrics span { color: var(--inset-ink-muted); font-size: var(--type-label); }
.preview-metrics strong { margin-top: .3rem; font-size: var(--type-title); }
.preview-trace { margin: 0; padding: 0; list-style: none; border: 1px solid var(--inset-rule); border-radius: var(--radius-md); background: var(--inset-surface); }
.preview-trace li { padding: .65rem .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--type-meta); }
.preview-trace li + li { border-top: 1px solid var(--inset-rule); }
.preview-trace span { color: var(--inset-ink); font-weight: 600; }
.preview-trace em {
    padding: .2rem .55rem; border-radius: var(--radius-pill); background: var(--inset-accent-wash); color: var(--inset-accent-ink);
    font: 700 .7rem/1.2 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
}

.alert-auth { margin-bottom: 1.25rem; padding: .85rem 1rem; display: flex; align-items: flex-start; gap: .65rem; border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: var(--type-body); line-height: 1.45; }
.alert-auth > .mdi { flex: none; font-size: var(--type-title); line-height: 1.25; }
.alert-auth ul, .alert-auth p { margin: 0; padding: 0; list-style: none; }
.alert-auth-success { border-color: var(--accent-ink); background: var(--accent-wash); color: var(--accent-ink); }
.password-toggle {
    position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}
.password-toggle:hover { color: var(--brand-ink); }
.text-danger { display: block; margin-top: .35rem; color: var(--danger) !important; font-size: var(--type-meta); }

@media (max-width: 1050px) {
    .auth-container { grid-template-columns: 1fr; }
    .auth-brand, .auth-card-wrapper, .auth-footer { width: min(100%, 470px); margin-inline: auto; }
    .auth-showcase { display: none; }
    .auth-main { min-height: calc(100vh - 3rem); }
}
@media (max-width: 600px) {
    .auth-page { padding: 0; }
    .auth-container { min-height: 100vh; border: 0; border-radius: 0; }
    .auth-main { min-height: 100vh; padding: 1.5rem; }
    .auth-card-wrapper { padding-block: 2rem; }
    .auth-card-title { font-size: var(--type-metric); }
}