body.task-login {
    background-color: #020617;
    background:
        linear-gradient(
            90deg,
            rgba(31, 43, 47, 0.00) 0%,
            rgba(31, 43, 47, 0.04) 30%,
            rgba(31, 43, 47, 0.08) 48%,
            rgba(31, 43, 47, 0.15) 100%
        ),
        url("../images/roundcubebackground.webp") center center / cover no-repeat fixed;
}

body.task-login #layout-content {
    border: 1px solid rgba(125, 211, 252, 0.30);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50);
    padding: 2rem;
    backdrop-filter: none;
}

body.task-login #logo {
    max-width: 96px;
    height: auto;
    filter:
        drop-shadow(0 0 12px rgba(56, 199, 255, 0.35))
        drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

/*
 * Mobile portrait: only replace the background artwork.
 * Do not move #logo or #layout-content here; Roundcube positions
 * the real login form and we want that to remain stable.
 */
@media (max-width: 700px) and (orientation: portrait) {
    body.task-login {
        background-color: #020617;
        background:
            linear-gradient(
                180deg,
                rgba(2, 6, 23, 0.00) 0%,
                rgba(2, 6, 23, 0.00) 65%,
                rgba(2, 6, 23, 0.16) 100%
            ),
            url("../images/zerodnsmail-mobile-background.webp") top center / cover no-repeat scroll;
    }

    body.task-login #layout-content {
        padding: 2rem;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50);
    }

    body.task-login #logo {
        max-width: 96px;
        margin-top: 0;
    }
}