.comreact-auth {
    margin: 0;
    color: var(--app-text, #1f2a37);
    background:
        linear-gradient(rgba(23, 32, 43, .2), rgba(23, 32, 43, .4)),
        url('https://images.unsplash.com/photo-1590496794008-383c8070b257?q=80&w=2291&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat,
        #17202b;
}
.auth-main {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 24px;
}
.auth-card {
    width: 100%; max-width: 460px;
    border: 1px solid var(--app-border, #d9e1ec);
    border-radius: 18px; background: #fff;
    box-shadow: 0 16px 48px rgba(15, 23, 42, .09);
    overflow: hidden;
}
.auth-brand {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 32px;
    background: linear-gradient(120deg, #17202b, #1d365a);
    border-bottom: 3px solid var(--app-primary, #0b67c2);
}
.auth-brand img { max-width: 100%; object-fit: contain; object-position: left; }
.auth-brand span { color: #b9d4f3; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-content { padding: 30px 32px 32px; overflow-wrap: anywhere; }
.auth-content h1 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; color: #172033; }
.auth-content h2, .auth-content h3 { margin: 24px 0 10px; font-size: 1.05rem; font-weight: 750; }
.auth-content p { font-size: .85rem; line-height: 1.65; color: #64748b; }
.auth-content>p { margin-bottom: 24px; }
.auth-content label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 650; color: #334155; }
.auth-content input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]),
.auth-content select, .auth-content textarea {
    display: block; width: 100%; min-height: 48px; padding: 11px 13px;
    border: 1px solid #cbd5e1; border-radius: 9px;
    background: #f8fafc; color: #172033; font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.auth-content input:focus-visible, .auth-content select:focus-visible, .auth-content textarea:focus-visible {
    outline: 0; border-color: var(--app-primary, #0b67c2); background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 103, 194, .15);
}
.auth-content input[aria-invalid=true] { border-color: #dc3545; }
.auth-content input[type=checkbox], .auth-content input[type=radio] { width: auto; margin-right: 7px; accent-color: var(--app-primary, #0b67c2); }
.auth-content label:has(input[type=checkbox]), .auth-content label:has(input[type=radio]) { display: flex; align-items: center; gap: 7px; }
.auth-content .btn { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; border-radius: 9px; font-size: .85rem; font-weight: 700; padding: 10px 16px; }
.auth-content .btn-primary { box-shadow: 0 3px 8px rgba(11, 103, 194, .15); }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.auth-actions>.btn-primary { flex: 1; }
.auth-content .btn-block { width: 100%; }
.auth-content .alert { font-size: .82rem; line-height: 1.55; border-radius: 9px; }
.auth-content .errorlist { margin: 8px 0; padding-left: 18px; color: #b42318; font-size: .8rem; }
.auth-content .form-text { font-size: .75rem; line-height: 1.5; }
.auth-content table { width: 100%; margin-bottom: 16px; }
.auth-content table th, .auth-content table td { display: block; width: 100%; padding: 4px 0; border: 0; }
.auth-content img { max-width: 100%; height: auto; }
.auth-content .float-right { float: none !important; display: inline-block; margin-bottom: 8px; }
.auth-back { display: inline-block; margin-bottom: 20px; font-size: .8rem; }
.auth-footer { margin-top: 24px; color: #fff; font-size: .72rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
@media (max-width: 480px) {
    .auth-main { padding: 24px 16px; }
    .auth-brand { padding: 26px 24px; }
    .auth-content { padding: 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-content input, .auth-content select, .auth-content textarea { transition: none !important; }
}