body:has(.login-page) {
    background: #0f1720;
}

.login-main-content,
.login-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.login-page {
    min-height: 100vh !important;
    display: grid !important;
    grid-template-columns: minmax(0, 58vw) minmax(480px, 42vw) !important;
    background: #0f1720 !important;
}

.login-visual {
    min-height: 100vh !important;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(11, 18, 28, 0.95), rgba(11, 18, 28, 0.62)),
        url("images/login-screen.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 72px !important;
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 10px;
    background: linear-gradient(90deg, #18a999 0%, #f2b84b 50%, #e85d75 100%);
}

.login-copy {
    position: relative;
    z-index: 1;
    max-width: 760px !important;
}

.login-eyebrow {
    color: #f2b84b !important;
    font-weight: 800 !important;
}

.login-copy .mud-typography-h2 {
    color: #ffffff !important;
    font-size: clamp(3.2rem, 5vw, 5.6rem) !important;
    font-weight: 850 !important;
    line-height: 0.98 !important;
    margin: 12px 0 22px !important;
}

.login-copy .mud-typography-subtitle1 {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 1.15rem !important;
    max-width: 560px;
}

.login-panel-wrap {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 64px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
}

.login-panel {
    width: min(100%, 500px) !important;
    border: 1px solid #d9e2ec !important;
    border-top: 6px solid #18a999 !important;
    border-radius: 8px !important;
    padding: 56px 52px !important;
    background: #ffffff !important;
    box-shadow: 0 34px 90px rgba(15, 23, 32, 0.18) !important;
}

.login-header {
    padding-bottom: 18px !important;
}

.login-header .mud-typography-h4 {
    color: #16212f !important;
    font-size: 2.15rem !important;
    font-weight: 780 !important;
}

.login-panel .mud-input-root {
    font-size: 1.05rem !important;
}

.login-panel .mud-input-control {
    margin-top: 18px !important;
}

.login-actions {
    gap: 14px !important;
    padding-top: 14px !important;
}

.login-actions .mud-button {
    min-height: 46px !important;
    border-radius: 8px !important;
    padding-inline: 22px !important;
}

@media (max-width: 980px) {
    .login-page {
        grid-template-columns: 1fr !important;
    }

    .login-visual {
        min-height: 38vh !important;
        padding: 40px 28px !important;
    }

    .login-panel-wrap {
        min-height: auto !important;
        padding: 28px 18px 36px !important;
    }

    .login-panel {
        width: 100% !important;
        padding: 38px 30px !important;
    }
}