:root {
    --auth-navy: #172554;
    --auth-deep: #0f172a;
    --auth-accent: #e11d48;
    --auth-border: #dbe3ee;
    --auth-muted: #64748b;
}

.auth-page {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1rem;
    overflow-x: hidden;
    background: radial-gradient(circle at 12% 12%, rgba(59, 130, 246, .16), transparent 28rem), radial-gradient(circle at 88% 88%, rgba(225, 29, 72, .11), transparent 26rem), linear-gradient(145deg, #f8fafc 0%, #eef2f7 100%);
}

.auth-page::before, .auth-page::after { position: fixed; z-index: 0; width: 18rem; height: 18rem; border: 1px solid rgba(23, 37, 84, .07); border-radius: 50%; content: ''; }
.auth-page::before { top: -8rem; right: -7rem; }
.auth-page::after { bottom: -10rem; left: -6rem; width: 24rem; height: 24rem; }
.auth-page .login-box, .auth-page .register-box { position: relative; z-index: 1; width: 420px; max-width: 100%; margin: auto; }
.auth-page .login-logo, .auth-page .register-logo { margin-bottom: 1.35rem; line-height: 1.2; text-align: center; }
.auth-page .login-logo a, .auth-page .register-logo a { display: block; color: var(--auth-navy); font-size: 1.55rem; letter-spacing: -.02em; }
.auth-page .auth-brand-logo { display: block; width: min(220px, 80%); height: 105px; margin: 0 auto .75rem; object-fit: contain; border-radius: 10px; }
.auth-page .login-logo span, .auth-page .register-logo span { display: block; margin-top: .4rem; color: var(--auth-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.auth-page .card { overflow: hidden; border: 1px solid rgba(219, 227, 238, .9); border-radius: 16px; box-shadow: 0 22px 55px rgba(15, 23, 42, .11); }
.auth-page .card::before { display: block; height: 4px; background: linear-gradient(90deg, var(--auth-navy), var(--auth-accent)); content: ''; }
.auth-page .login-card-body, .auth-page .register-card-body { padding: 2rem; background: rgba(255, 255, 255, .98); color: #334155; }
.auth-page .login-box-msg { padding: 0 0 1.45rem; color: var(--auth-muted); }
.auth-page .login-box-msg strong { display: block; margin-bottom: .4rem; color: var(--auth-deep); font-size: 1.35rem; }
.auth-page .login-box-msg span { display: block; font-size: .9rem; }
.auth-page .input-group { margin-bottom: 1rem !important; }
.auth-page .form-control, .auth-page .input-group-text { height: 46px; border-color: var(--auth-border); background: #fff; }
.auth-page .form-control { border-right: 0; border-radius: 9px 0 0 9px; padding-left: .85rem; }
.auth-page .input-group-text { border-left: 0; border-radius: 0 9px 9px 0; color: #94a3b8; }
.auth-page .form-control:focus { border-color: #94a3b8; box-shadow: none; }
.auth-page .form-control:focus + .input-group-append .input-group-text { border-color: #94a3b8; color: var(--auth-navy); }
.auth-page .btn-primary { min-height: 42px; border: 0; border-radius: 8px; background: linear-gradient(100deg, var(--auth-navy), #263b78); font-weight: 700; box-shadow: 0 8px 18px rgba(23, 37, 84, .18); }
.auth-page .btn-primary:hover { background: linear-gradient(100deg, #1e3a8a, var(--auth-navy)); transform: translateY(-1px); }
.auth-page a { color: var(--auth-navy); font-weight: 600; }
.auth-page a:hover { color: var(--auth-accent); }
.auth-page .login-card-body > p:not(.login-box-msg), .auth-page .register-card-body > a { font-size: .88rem; }
.auth-page .alert { border: 0; border-radius: 9px; font-size: .88rem; }

@media (max-width: 575.98px) {
    .auth-page { padding: 1.25rem .75rem; }
    .auth-page .login-card-body, .auth-page .register-card-body { padding: 1.5rem 1.2rem; }
    .auth-page .row .col-8, .auth-page .row .col-4 { flex: 0 0 100%; max-width: 100%; }
    .auth-page .row .col-4 { margin-top: .9rem; }
}