/* Cyberpunk artwork: amber highlights, charcoal card, no external dependencies. */
html,
body {
    min-height: 100%;
    background-color: #0b0c0e !important;
}

body {
    background-image: linear-gradient(rgba(5, 7, 10, .14), rgba(5, 7, 10, .28)),
        url('/branding/login-background-desktop.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Stable MUI classes rather than generated Emotion class names. */
.MuiContainer-maxWidthXs {
    background-color: rgba(14, 17, 21, .82) !important;
    background-image: none !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 159, 67, .35);
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
    max-width: 400px !important;
    padding: 24px !important;
}

.MuiContainer-maxWidthXs .MuiLink-root,
.MuiContainer-maxWidthXs .MuiButton-textPrimary {
    color: #ffb66b !important;
}

.MuiButton-contained:not(.Mui-disabled) .MuiSvgIcon-root {
    color: inherit !important;
}

.MuiButton-containedPrimary:not(.Mui-disabled),
.MuiButton-contained:not(.Mui-disabled) {
    background-color: #ff9f43 !important;
    color: #17100a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 16px rgba(255, 159, 67, .18) !important;
}

.MuiButton-containedPrimary:not(.Mui-disabled):hover,
.MuiButton-contained:not(.Mui-disabled):hover {
    background-color: #ffb66b !important;
}

.MuiButton-root:focus-visible,
.MuiIconButton-root:focus-visible,
a:focus-visible {
    outline: 2px solid #ffb66b !important;
    outline-offset: 3px;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #ff9f43 !important;
}

.MuiInputLabel-root.Mui-focused {
    color: #ffb66b !important;
}

@media (max-width: 600px) and (orientation: portrait) {
    body {
        background-image: linear-gradient(rgba(5, 7, 10, .08), rgba(5, 7, 10, .20)),
            url('/branding/login-background-mobile.webp') !important;
        background-position: center top !important;
        background-attachment: fixed !important;
    }
    #first-factor-stage {
        align-items: flex-start !important;
    }
    .MuiContainer-maxWidthXs {
        background-color: rgba(14, 17, 21, .82) !important;
        width: calc(100% - 24px);
        padding: 20px !important;
        margin-top: clamp(170px, 28vh, 240px) !important;
        margin-bottom: 24px !important;
    }
    #first-factor-stage .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child {
        display: none;
    }
}