body.sr-auth-page,
body.sr-system-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(145deg, var(--sr-primary) 0%, var(--sr-primary-2) 100%) !important;
}

.sr-auth-page .auth-card,
.sr-auth-page .reset-card,
.sr-auth-page .container,
.sr-system-page .error-container,
.sr-system-page .info-container,
.sr-system-page .api-container {
    border-radius: var(--sr-radius) !important;
    box-shadow: var(--sr-shadow) !important;
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.sr-auth-page .auth-title,
.sr-auth-page h2,
.sr-system-page .error-title,
.sr-system-page .info-title,
.sr-system-page .api-header h1 {
    color: var(--sr-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.sr-auth-page .auth-btn,
.sr-auth-page button[type="submit"],
.sr-system-page .btn-home,
.sr-system-page .btn-primary,
.sr-system-page .api-method {
    background: var(--sr-primary) !important;
    color: #fff !important;
    border-radius: var(--sr-radius) !important;
}

.sr-auth-page .auth-input,
.sr-auth-page input[type="password"],
.sr-auth-page input[type="text"] {
    border-radius: var(--sr-radius) !important;
    border-color: var(--sr-border) !important;
    background: #f8fafc !important;
}

.sr-auth-page .auth-input:focus,
.sr-auth-page input[type="password"]:focus,
.sr-auth-page input[type="text"]:focus {
    border-color: var(--sr-primary) !important;
}

.sr-auth-page .auth-link,
.sr-system-page .back-link,
.sr-system-page .param-name {
    color: var(--sr-primary) !important;
}

@media (max-width: 560px) {
    body.sr-auth-page,
    body.sr-system-page {
        align-items: stretch;
        padding: 16px;
    }
}