:root {
    --login-bg: #eef3f5;
    --login-panel: #ffffff;
    --login-ink: #17202a;
    --login-muted: #667783;
    --login-line: #d9e3e8;
    --login-teal: #0f766e;
    --login-deep: #102a2d;
}

body {
    background: var(--login-bg) !important;
    color: var(--login-ink) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.login-page {
    padding: 32px !important;
    background: var(--login-bg) !important;
}

.login-shell {
    width: min(980px, 100%) !important;
    min-height: 560px !important;
    grid-template-columns: minmax(0, 1fr) 430px !important;
    border: 1px solid var(--login-line) !important;
    border-radius: 8px !important;
    background: var(--login-panel) !important;
    box-shadow: 0 22px 60px rgba(23, 32, 42, 0.12) !important;
}

.login-visual {
    min-height: 560px !important;
    background: #dfe8ed !important;
}

.login-visual::after {
    background: linear-gradient(135deg, rgba(16, 42, 45, 0.28), rgba(16, 42, 45, 0.04)) !important;
}

.login-panel {
    min-height: 560px !important;
    padding: 44px 40px !important;
    background: var(--login-panel) !important;
}

.auth-card {
    max-width: 342px !important;
}

.brand-ring {
    height: 86px !important;
    margin-bottom: 30px !important;
    border-bottom: 1px solid var(--login-line) !important;
}

.brand-initial {
    min-width: 170px !important;
    min-height: 54px !important;
    border: 1px solid var(--login-line) !important;
    border-radius: 8px !important;
    background: #e8f7f5 !important;
    color: #0f5e57 !important;
    letter-spacing: 0 !important;
}

.form-label {
    color: #30404b !important;
}

.form-input {
    height: 44px !important;
    border: 1px solid #cbd8df !important;
    border-radius: 6px !important;
    background: #fbfdfe !important;
    color: var(--login-ink) !important;
}

.form-input::placeholder {
    color: #8a9aa5 !important;
}

.form-input:focus {
    border-color: var(--login-teal) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important;
}

.login-button {
    height: 46px !important;
    border-radius: 6px !important;
    background: var(--login-teal) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.login-button:hover {
    background: #0f5e57 !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18) !important;
}

.alert {
    border-radius: 6px !important;
}

.alert-success {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #166534 !important;
}

.alert-error {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
    color: #991b1b !important;
}

.footer {
    color: var(--login-muted) !important;
}

@media (max-width: 900px) {
    .login-page {
        padding: 18px !important;
    }

    .login-shell {
        grid-template-columns: 1fr !important;
    }

    .login-panel {
        min-height: auto !important;
        padding: 34px 24px !important;
    }
}