body.authentication {
    --auth-ink: #172b4d;
    --auth-muted: #52627a;
    --auth-accent: #6554c0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--auth-ink);
    background: linear-gradient(135deg, #eaf0fb 0%, #f5f3fc 55%, #e5f4f2 100%);
    padding: 24px;
    line-height: 1.5;
    letter-spacing: 0;
}
.authentication *,
.authentication *::before,
.authentication *::after { box-sizing: border-box; min-width: 0; letter-spacing: 0; }
.authentication :is(.login-container, .card) { border: 1px solid #dce3ed; border-radius: 8px; box-shadow: 0 12px 36px #172b4d14; }
.authentication :is(.login-header, .header) { background: linear-gradient(120deg, #172b4d, #284c78); color: #fff; }
.authentication :is(h1, h2, h3) { line-height: 1.3; font-weight: 650; overflow-wrap: anywhere; }
.authentication .login-header h1 { font-size: 1.65rem; }
.authentication :is(label, .list) { color: var(--auth-ink); }
.authentication label { font-size: 0.875rem; font-weight: 600; }
.authentication :is(.small, .hint, .signup-link) { color: var(--auth-muted); }
.authentication :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    border: 1px solid #b9c5d5;
    border-radius: 6px;
    background: #fff;
    color: var(--auth-ink);
    padding: 11px 12px;
    font: inherit;
    line-height: 1.5;
}
.authentication :is(input, select, textarea):focus {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px #6554c018;
}
.authentication input[type="checkbox"] { accent-color: var(--auth-accent); }
.authentication textarea { resize: vertical; }
.authentication :is(.btn, .btn-login, a.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    background: var(--auth-accent);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.authentication :is(.btn, .btn-login, a.btn):hover { background: #51409f; transform: none; box-shadow: none; }
.authentication :is(a, button):focus-visible { outline: 2px solid #2264b5; outline-offset: 3px; }
.authentication a:not(.btn) { color: #2264b5; }
.authentication :is(.alert, .note) { border-radius: 6px; overflow-wrap: anywhere; }
.authentication .alert-success { background: #e4f4ef; color: #086453; border-color: #afd9cb; }
.authentication .alert-error { background: #fcebef; color: #9c243b; border-color: #efbcc7; }
.authentication .note { background: #fff6db; color: #684500; border-color: #e6d39a; }
.authentication .remember-forgot { flex-wrap: wrap; gap: 10px; }
.authentication .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
    body.authentication { padding: 16px; }
    .authentication :is(.login-form, .body, .login-header, .header) { padding: 24px 20px; }
    .authentication .row { grid-template-columns: minmax(0, 1fr); }
}