:root {
    --login-bg: #f6f8fb;
    --login-card-bg: #ffffff;
    --login-card-text: #44515a;
    --login-card-heading: #0f2f2e;
    --login-input-bg: #ffffff;
    --login-input-text: #44515a;
    --login-input-border: #d1d5db;
    --login-input-focus-border: #0f766e;
    --login-input-focus-ring: rgba(15, 118, 110, 0.18);
    --login-muted: #6b7280;
    --login-link: #0f766e;
    --login-link-hover: #0b5f59;
    --login-btn-bg: #0f766e;
    --login-btn-text: #ffffff;
    --login-btn-hover-bg: #0b5f59;
    --login-btn-hover-text: #ffffff;
    --login-error-text: #dc2626;
    --login-success-text: #059669;
    --login-card-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --login-bg-gradient: linear-gradient(180deg, #f8fbfb 0%, #edf4f4 100%);
}

body.auth-layout {
    background: var(--login-bg-gradient);
    color: var(--login-card-text);
    min-height: 100vh;
}

body.auth-layout .theme-bg {
    background: transparent !important;
}

body.auth-layout .login-logo img {
    max-width: 220px;
    height: auto;
}

body.auth-layout .login-card {
    background-color: var(--login-card-bg) !important;
    color: var(--login-card-text) !important;
    border: 1px solid rgba(15, 118, 110, 0.08);
    border-radius: 0.75rem;
    box-shadow: var(--login-card-shadow);
}

body.auth-layout .login-card label {
    color: var(--login-card-text) !important;
}

body.auth-layout .login-card a {
    color: var(--login-link) !important;
    transition: color 0.2s ease;
}

body.auth-layout .login-card .text-sm,
body.auth-layout .login-card .text-xs {
    color: var(--login-card-text) !important;
}

body.auth-layout .login-card a.text-sm,
body.auth-layout .login-card a.text-xs {
    color: var(--login-link) !important;
}

body.auth-layout .login-card a:hover,
body.auth-layout .login-card a:focus {
    color: var(--login-link-hover) !important;
}

body.auth-layout .login-card input,
body.auth-layout .login-card select,
body.auth-layout .login-card textarea {
    background-color: var(--login-input-bg) !important;
    color: var(--login-input-text) !important;
    border-color: var(--login-input-border) !important;
    box-shadow: none;
}

body.auth-layout .login-card input::placeholder,
body.auth-layout .login-card textarea::placeholder {
    color: var(--login-muted);
    opacity: 0.75;
}

body.auth-layout .login-card input:focus,
body.auth-layout .login-card select:focus,
body.auth-layout .login-card textarea:focus {
    outline: none;
    border-color: var(--login-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--login-input-focus-ring) !important;
}

body.auth-layout .login-card input[type="checkbox"] {
    accent-color: var(--login-btn-bg);
    border-color: var(--login-input-border);
    background-color: var(--login-input-bg);
}

body.auth-layout .login-card input:-webkit-autofill,
body.auth-layout .login-card input:-webkit-autofill:hover,
body.auth-layout .login-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-input-text) !important;
    box-shadow: 0 0 0px 1000px var(--login-input-bg) inset;
    transition: background-color 600000s 0s;
}

body.auth-layout .login-card button[type="submit"] {
    background-color: var(--login-btn-bg) !important;
    color: var(--login-btn-text) !important;
    border-color: transparent !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

body.auth-layout .login-card button[type="submit"]:hover,
body.auth-layout .login-card button[type="submit"]:focus,
body.auth-layout .login-card button[type="submit"]:focus-visible {
    background-color: var(--login-btn-hover-bg) !important;
    color: var(--login-btn-hover-text) !important;
    transform: translateY(-1px);
}

body.auth-layout .login-card button[type="submit"]:active {
    transform: translateY(0);
}

body.auth-layout .login-card [class*="text-red"] {
    color: var(--login-error-text) !important;
}

body.auth-layout .login-card [class*="text-green"] {
    color: var(--login-success-text) !important;
}