/*
 * FM Webmail
 * Professional Login Interface
 * #340-E002
 */

.task-login {
    --fm-bg: #07131d;
    --fm-panel: #0b1b28;
    --fm-panel-soft: #102534;
    --fm-card: #ffffff;
    --fm-text: #14222d;
    --fm-muted: #70808c;
    --fm-line: rgba(126, 207, 226, .18);
    --fm-accent: #19b9cf;
    --fm-accent-soft: #6fd8e5;
    --fm-success: #45d39a;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(25, 185, 207, .14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06111a 0%,
            #0a1b27 48%,
            #07131d 100%
        );

    color: #fff;
}

.task-login #layout {
    min-height: 100%;
    background: transparent;
}

.task-login #layout-content.fm-login-page {
    display: block;
    padding: 0;
    overflow: auto;
    background: transparent;
}

.fm-login-shell {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(390px, .82fr);
}

/* Infrastructure panel */

.fm-login-infrastructure {
    position: relative;
    min-height: 100vh;
    padding: 44px clamp(38px, 6vw, 92px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 55%
        );
}

.fm-login-infrastructure::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background-image:
        linear-gradient(
            rgba(111,216,229,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(111,216,229,.07) 1px,
            transparent 1px
        );
    background-size: 46px 46px;
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.85),
            transparent 90%
        );
}

.fm-login-infrastructure::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -220px;
    top: 22%;
    border: 1px solid rgba(111,216,229,.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(111,216,229,.025),
        0 0 0 140px rgba(111,216,229,.018);
    pointer-events: none;
}

.fm-brand-lockup,
.fm-infrastructure-content,
.fm-infrastructure-footer {
    position: relative;
    z-index: 1;
}

.fm-brand-lockup {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fm-brand-logo {
    width: 72px;
    height: 50px;
    object-fit: contain;
}

.fm-brand-copy {
    display: flex;
    flex-direction: column;
}

.fm-brand-name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .16em;
}

.fm-brand-subtitle {
    margin-top: 3px;
    color: #89a8b7;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.fm-infrastructure-content {
    width: min(700px, 100%);
    margin: auto 0;
    padding: 72px 0;
}

.fm-eyebrow {
    margin-bottom: 18px;
    color: var(--fm-accent-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
}

.fm-infrastructure-content h2 {
    max-width: 620px;
    margin: 0;
    color: #f5fbfd;
    font-size: clamp(34px, 4.2vw, 62px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.035em;
}

.fm-introduction {
    max-width: 580px;
    margin: 24px 0 0;
    color: #9db3bf;
    font-size: 15px;
    line-height: 1.75;
}

/* Mail routing diagram */

.fm-mail-flow {
    display: grid;
    grid-template-columns:
        minmax(115px, 1fr)
        minmax(36px, .4fr)
        minmax(115px, 1fr)
        minmax(36px, .4fr)
        minmax(115px, 1fr);
    align-items: center;
    margin-top: 46px;
}

.fm-flow-node {
    min-height: 122px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--fm-line);
    border-radius: 14px;
    background: rgba(10, 29, 42, .76);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.fm-flow-node-primary {
    border-color: rgba(25,185,207,.46);
    background:
        linear-gradient(
            145deg,
            rgba(25,185,207,.16),
            rgba(10,29,42,.86)
        );
    box-shadow:
        0 0 35px rgba(25,185,207,.08),
        inset 0 1px rgba(255,255,255,.05);
}

.fm-flow-icon {
    width: 39px;
    height: 39px;
    margin-bottom: 13px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(111,216,229,.3);
    border-radius: 9px;
    color: #8be3ed;
    background: rgba(25,185,207,.08);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.fm-flow-title {
    color: #eef8fa;
    font-size: 13px;
    font-weight: 700;
}

.fm-flow-detail {
    margin-top: 4px;
    color: #7793a1;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.fm-flow-connector {
    height: 1px;
    position: relative;
    background:
        linear-gradient(
            90deg,
            rgba(25,185,207,.12),
            rgba(111,216,229,.75),
            rgba(25,185,207,.12)
        );
}

.fm-flow-connector::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #6fd8e5;
    border-right: 1px solid #6fd8e5;
    transform: rotate(45deg);
}

/* Service indicators */

.fm-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.fm-service {
    min-height: 65px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(126,207,226,.12);
    border-radius: 11px;
    background: rgba(7,19,29,.42);
}

.fm-service-indicator,
.fm-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--fm-success);
    box-shadow: 0 0 12px rgba(69,211,154,.45);
}

.fm-service strong {
    display: block;
    color: #dff7fa;
    font-size: 11px;
    letter-spacing: .07em;
}

.fm-service div span {
    display: block;
    margin-top: 3px;
    color: #708e9d;
    font-size: 10px;
}

.fm-infrastructure-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid rgba(126,207,226,.1);
    color: #5f7d8c;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

/* Login area */

.fm-login-access {
    min-height: 100vh;
    padding: 48px clamp(30px, 5vw, 74px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.99),
            rgba(245,249,251,.99)
        );
    color: var(--fm-text);
    box-shadow: -24px 0 80px rgba(0,0,0,.18);
}

.fm-login-card {
    width: min(430px, 100%);
    margin: auto;
}

.fm-mobile-brand {
    display: none;
}

.fm-login-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 23px;
    color: #55717e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
}

.fm-login-card h2 {
    margin: 0;
    color: #10212c;
    font-size: 31px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
}

.fm-login-description {
    margin: 12px 0 30px;
    color: #778893;
    font-size: 14px;
    line-height: 1.6;
}

/* Preserve Roundcube form behaviour */

.task-login .fm-login-form {
    width: 100%;
    max-width: none;
    margin: 0;
}

.task-login .fm-login-form .row {
    margin-right: 0;
    margin-left: 0;
}

.task-login .fm-login-form .row > * {
    padding-right: 0;
    padding-left: 0;
}

.task-login .fm-login-form label {
    margin-bottom: 7px;
    color: #425864;
    font-size: 12px;
    font-weight: 700;
}

.task-login .fm-login-form .form-control {
    min-height: 50px;
    padding: 11px 14px;
    border: 1px solid #d8e1e6;
    border-radius: 9px;
    color: #162833;
    background: #fff;
    box-shadow: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.task-login .fm-login-form .form-control:focus {
    border-color: #31b8cb;
    box-shadow: 0 0 0 3px rgba(25,185,207,.12);
}

.task-login .fm-login-form .formbuttons {
    margin-top: 22px;
}

.task-login .fm-login-form .btn-primary {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 9px;
    background:
        linear-gradient(
            135deg,
            #119fb5,
            #18b9cc
        );
    box-shadow: 0 9px 24px rgba(17,159,181,.2);
    font-weight: 700;
    letter-spacing: .015em;
}

.task-login .fm-login-form .btn-primary:hover,
.task-login .fm-login-form .btn-primary:focus {
    background:
        linear-gradient(
            135deg,
            #0e91a6,
            #12aabe
        );
}

.task-login #login-footer {
    margin-top: 18px;
    color: #93a0a8;
    font-size: 10px;
    text-align: center;
}

.fm-security-note {
    margin-top: 25px;
    padding-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-top: 1px solid #e7edef;
    color: #80909a;
    font-size: 11px;
    line-height: 1.55;
}

.fm-security-note > span:first-child {
    color: #18aebf;
    font-size: 8px;
    margin-top: 4px;
}

.fm-login-access-footer {
    width: 100%;
    margin-top: auto;
    padding-top: 30px;
    color: #a1adb4;
    font-size: 9px;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Hide stock Elastic logo on FM login */

.task-login .fm-login-page > #logo {
    display: none;
}

/* Responsive */

@media screen and (max-width: 980px) {
    .fm-login-shell {
        grid-template-columns: 1fr;
    }

    .fm-login-infrastructure {
        display: none;
    }

    .fm-login-access {
        min-height: 100vh;
        padding: 40px 24px;
        box-shadow: none;
    }

    .fm-mobile-brand {
        margin-bottom: 42px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .fm-mobile-brand img {
        width: 62px;
        height: 42px;
        object-fit: contain;
    }

    .fm-mobile-brand span {
        color: #17303d;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .14em;
    }
}

@media screen and (max-width: 480px) {
    .fm-login-access {
        padding: 28px 20px;
    }

    .fm-mobile-brand {
        margin-bottom: 34px;
    }

    .fm-login-card h2 {
        font-size: 27px;
    }

    .fm-login-description {
        margin-bottom: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-login *,
    .task-login *::before,
    .task-login *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================
   FM LOGIN CARD POLISH - #340-E009
   ========================================================== */

.fm-login-card {
    width: min(440px, 100%);
}

.fm-login-status {
    margin-bottom: 18px;
}

.fm-login-card h2 {
    font-size: 30px;
    line-height: 1.16;
}

.fm-login-description {
    max-width: 360px;
    margin: 10px 0 16px;
    line-height: 1.55;
}

/* FM identity positioned between description and credentials */

.fm-login-card-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 72px;
    margin: 0 0 22px;
}

.fm-login-card-logo img {
    display: block;
    width: auto;
    height: 66px;
    max-width: 190px;
    object-fit: contain;
    object-position: left center;
}

/* Credentials */

.task-login .fm-login-form label {
    margin-bottom: 8px;
    color: #344d59;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.task-login .fm-login-form .form-control {
    min-height: 52px;
    padding: 12px 15px;
    border-color: #d5e0e5;
    border-radius: 10px;
    font-size: 14px;
}

.task-login .fm-login-form .form-control:hover {
    border-color: #bdcdd5;
}

.task-login .fm-login-form .form-control:focus {
    border-color: #1aaec1;
    box-shadow: 0 0 0 3px rgba(26,174,193,.12);
}

.task-login .fm-login-form .formbuttons {
    margin-top: 24px;
}

.task-login .fm-login-form .btn-primary {
    min-height: 52px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.task-login .fm-login-form .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 27px rgba(17,159,181,.25);
}

.fm-security-note {
    margin-top: 23px;
    padding-top: 18px;
}

/* Responsive FM logo */

@media screen and (max-width: 980px) {
    .fm-login-card-logo {
        justify-content: center;
        margin-bottom: 22px;
    }

    .fm-login-card-logo img {
        height: 62px;
        max-width: 180px;
        object-position: center;
    }
}

@media screen and (max-width: 520px) {
    .fm-login-card {
        width: 100%;
    }

    .fm-login-card h2 {
        font-size: 26px;
    }

    .fm-login-card-logo {
        min-height: 62px;
        margin-bottom: 19px;
    }

    .fm-login-card-logo img {
        height: 56px;
        max-width: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-login .fm-login-form .btn-primary {
        transition: none;
    }

    .task-login .fm-login-form .btn-primary:hover {
        transform: none;
    }
}

/* ==========================================================
   FM LOGIN COMPOSITION FIX - #340-E012
   ========================================================== */

/*
 * Keep the complete authentication area together vertically.
 * This overrides Elastic/login layout rules that can distribute
 * the heading and credentials across the available height.
 */

.task-login .fm-login-access {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.task-login .fm-login-card {
    width: min(440px, 100%);
    margin: 0 auto;
}

/* Heading */

.task-login .fm-login-status {
    margin: 0 0 16px;
}

.task-login .fm-login-card h2 {
    margin: 0;
}

.task-login .fm-login-description {
    margin: 10px 0 14px;
}

/* Logo immediately below description */

.task-login .fm-login-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    margin: 0 0 20px;
    padding: 0;
}

.task-login .fm-login-card-logo img {
    display: block;
    width: auto;
    height: 74px;
    max-width: 210px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

/* Remove unwanted vertical distribution from native login form */

.task-login .fm-login-form {
    position: static;
    width: 100%;
    margin: 0;
}

.task-login .fm-login-form .box-inner {
    position: static;
}

.task-login .fm-login-form .row {
    position: static;
}

/* Keep security message below the complete form */

.task-login .fm-security-note {
    position: static;
    margin: 22px 0 0;
}

/* Footer stays at bottom of access panel */

.task-login .fm-login-access-footer {
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    margin: 0;
    padding: 0 30px;
}

/* Mobile */

@media screen and (max-width: 980px) {
    .task-login .fm-login-access {
        justify-content: center;
    }

    .task-login .fm-login-card-logo img {
        height: 68px;
        max-width: 195px;
    }

    .task-login .fm-login-access-footer {
        position: static;
        margin-top: 34px;
        padding: 0;
    }
}

@media screen and (max-width: 520px) {
    .task-login .fm-login-card-logo img {
        height: 60px;
        max-width: 175px;
    }
}

/* ==========================================================
   FM TARGET DESIGN - #340-E015
   Final visual direction based on approved FM Webmail concept
   ========================================================== */

/* ---------- LEFT INFRASTRUCTURE PANEL ---------- */

.task-login .fm-login-infrastructure {
    padding: 30px 48px 24px;
}

.task-login .fm-brand-lockup {
    gap: 18px;
}

.task-login .fm-brand-logo {
    width: 92px;
    height: 64px;
    object-fit: contain;
}

.task-login .fm-brand-copy {
    gap: 3px;
}

.task-login .fm-infrastructure-content {
    width: min(760px, 100%);
    margin: auto;
}

.task-login .fm-eyebrow {
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: .17em;
}

.task-login .fm-infrastructure-content h2 {
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(42px, 4vw, 64px);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-align: center;
}

.task-login .fm-infrastructure-content > p {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.7;
    text-align: center;
}

/* Mail flow */

.task-login .fm-mail-flow {
    margin-top: 44px;
    gap: 0;
}

.task-login .fm-flow-node {
    min-height: 132px;
    padding: 20px 18px;
    border-radius: 14px;
    background: rgba(8,35,48,.58);
}

.task-login .fm-flow-node-primary {
    border-color: rgba(28,190,211,.48);
    background: rgba(9,47,61,.72);
}

.task-login .fm-flow-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.task-login .fm-flow-title {
    margin-top: 15px;
}

.task-login .fm-flow-connector {
    min-width: 72px;
}

/* Service cards */

.task-login .fm-service-grid {
    margin-top: 26px;
    gap: 12px;
}

.task-login .fm-service {
    min-height: 70px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(5,27,39,.60);
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.task-login .fm-service:hover {
    border-color: rgba(37,184,204,.34);
    background: rgba(7,38,52,.74);
    transform: translateY(-1px);
}

.task-login .fm-service-indicator {
    box-shadow: 0 0 12px rgba(60,225,176,.45);
}

/* ---------- RIGHT ACCESS PANEL ---------- */

.task-login .fm-login-access {
    padding: 42px 58px 30px;
    justify-content: center;
}

.task-login .fm-login-card {
    width: min(455px, 100%);
    margin: 0 auto;
}

/* Secure webmail label */

.task-login .fm-login-status {
    justify-content: flex-start;
    margin: 0 0 18px;
    font-size: 10px;
    letter-spacing: .15em;
}

/* Heading */

.task-login .fm-login-card h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.task-login .fm-login-description {
    max-width: none;
    margin: 10px 0 8px;
    font-size: 14px;
    line-height: 1.55;
}

/* LARGE FM LOGO */

.task-login .fm-login-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    margin: 0 0 12px;
    padding: 5px 0;
}

.task-login .fm-login-card-logo img {
    display: block;
    width: auto;
    height: 142px;
    max-width: 330px;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 18px rgba(8,60,82,.08));
}

/* ---------- ROUNDcube CREDENTIAL FORM ---------- */

.task-login .fm-login-form {
    width: 100%;
    margin: 0;
}

.task-login .fm-login-form .form-control {
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid #d3dfe5;
    border-radius: 11px;
    background: #fff;
    font-size: 15px;
}

.task-login .fm-login-form .form-control:hover {
    border-color: #b7cad3;
}

.task-login .fm-login-form .form-control:focus {
    border-color: #19b4c8;
    box-shadow:
        0 0 0 3px rgba(25,180,200,.11),
        0 5px 15px rgba(10,91,112,.04);
}

.task-login .fm-login-form label {
    color: #344f5c;
    font-size: 12px;
    font-weight: 700;
}

.task-login .fm-login-form .formbuttons {
    margin-top: 22px;
}

.task-login .fm-login-form .btn-primary {
    min-height: 58px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 10px 24px rgba(15,164,187,.18);
}

.task-login .fm-login-form .btn-primary:hover,
.task-login .fm-login-form .btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 13px 28px rgba(15,164,187,.24);
}

/* Security note */

.task-login .fm-security-note {
    justify-content: center;
    margin: 20px auto 0;
    padding: 17px 12px 0;
    color: #718995;
    font-size: 11px;
    text-align: center;
}

/* Roundcube product info */

.task-login #login-footer {
    margin-top: 14px;
    color: #a0adb4;
    font-size: 10px;
}

/* Bottom panel caption */

.task-login .fm-login-access-footer {
    right: 0;
    bottom: 18px;
    left: 0;
    color: #9cabb3;
    font-size: 9px;
    letter-spacing: .1em;
}

/* ---------- RESPONSIVE ---------- */

@media screen and (max-width: 1180px) {
    .task-login .fm-login-infrastructure {
        padding-right: 32px;
        padding-left: 32px;
    }

    .task-login .fm-login-access {
        padding-right: 38px;
        padding-left: 38px;
    }

    .task-login .fm-login-card-logo {
        min-height: 132px;
    }

    .task-login .fm-login-card-logo img {
        height: 124px;
        max-width: 290px;
    }
}

@media screen and (max-width: 980px) {
    .task-login .fm-login-access {
        min-height: 100vh;
        padding: 40px 28px;
    }

    .task-login .fm-login-card {
        width: min(470px, 100%);
    }

    .task-login .fm-login-card-logo {
        min-height: 135px;
        margin-bottom: 12px;
    }

    .task-login .fm-login-card-logo img {
        height: 128px;
        max-width: 300px;
    }

    .task-login .fm-login-access-footer {
        position: static;
        margin-top: 34px;
    }
}

@media screen and (max-width: 520px) {
    .task-login .fm-login-access {
        padding: 28px 20px;
    }

    .task-login .fm-login-card h2 {
        font-size: 27px;
    }

    .task-login .fm-login-description {
        font-size: 13px;
    }

    .task-login .fm-login-card-logo {
        min-height: 112px;
    }

    .task-login .fm-login-card-logo img {
        height: 105px;
        max-width: 250px;
    }

    .task-login .fm-login-form .form-control,
    .task-login .fm-login-form .btn-primary {
        min-height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-login .fm-service,
    .task-login .fm-login-form .btn-primary {
        transition: none;
    }

    .task-login .fm-service:hover,
    .task-login .fm-login-form .btn-primary:hover {
        transform: none;
    }
}

/* ==========================================================
   FM LOGO CENTERING - #340-E017
   ========================================================== */

.task-login .fm-login-card-logo {
    justify-content: center;
    text-align: center;
}

.task-login .fm-login-card-logo img {
    margin-left: auto;
    margin-right: auto;
    transform: translateX(10px);
}

@media screen and (max-width: 980px) {
    .task-login .fm-login-card-logo img {
        transform: none;
    }
}


/* ==========================================================
   FM LOGO VERTICAL POSITION - #340-E017
   ========================================================== */

.task-login .fm-login-card-logo {
    padding-top: 18px;
    margin-bottom: 4px;
}

.task-login .fm-login-card-logo img {
    transform: translateY(12px);
}

@media screen and (max-width: 980px) {
    .task-login .fm-login-card-logo img {
        transform: translateY(8px);
    }
}


/* ==========================================================
   FM LOGIN FORM POSITION - #340-E018
   Move credentials upward without moving FM logo
   ========================================================== */

.task-login .fm-login-form {
    position: relative;
    top: -105px;
}

.task-login .fm-security-note {
    position: relative;
    top: -105px;
}

.task-login #login-footer {
    position: relative;
    top: -105px;
}

/* Keep spacing more natural on smaller screens */
@media screen and (max-width: 980px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -65px;
    }
}

@media screen and (max-width: 520px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -35px;
    }
}

/* FM LOGIN FINAL POSITION - #340-E019 */

.task-login .fm-login-form {
    top: -130px;
}

.task-login .fm-security-note {
    top: -130px;
}

.task-login #login-footer {
    top: -130px;
}

@media screen and (max-width: 980px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -75px;
    }
}

@media screen and (max-width: 520px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -40px;
    }
}

/* ==========================================================
   FM PROFESSIONAL LOGIN COMPOSITION - #340-E020
   ========================================================== */

/* Right panel */

.task-login .fm-login-access {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 60px;
}

/* Main login block */

.task-login .fm-login-card {
    width: min(480px, 100%);
    margin: 0 auto;
}

/* Status */

.task-login .fm-login-status {
    margin: 0 0 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

/* Main title */

.task-login .fm-login-card h2 {
    margin: 0;
    font-size: clamp(30px, 2.2vw, 38px);
    line-height: 1.1;
    letter-spacing: -.035em;
}

/* Subtitle */

.task-login .fm-login-description {
    margin: 12px 0 0;
    color: #718794;
    font-size: 15px;
    line-height: 1.55;
}

/* FM logo */

.task-login .fm-login-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0;

    margin: 24px 0 18px;
    padding: 0;
}

.task-login .fm-login-card-logo img {
    display: block;

    width: auto;
    height: 145px;
    max-width: 335px;

    margin: 0 auto;

    object-fit: contain;

    /* cancel previous manual movement */
    transform: none;

    filter:
        drop-shadow(0 10px 22px rgba(8, 60, 82, .09));
}

/* ----------------------------------------------------------
   LOGIN FORM
   ---------------------------------------------------------- */

.task-login .fm-login-form {
    position: static;
    top: auto;

    width: 100%;
    margin: 0;
}

/* Cancel old manual movement */

.task-login .fm-login-form .box-inner,
.task-login .fm-login-form .row {
    position: static;
}

/* Credentials */

.task-login .fm-login-form .form-control {
    min-height: 58px;

    border: 1px solid #d4e0e6;
    border-radius: 12px;

    background: #fff;

    font-size: 15px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.task-login .fm-login-form .form-control:hover {
    border-color: #b8ccd5;
}

.task-login .fm-login-form .form-control:focus {
    border-color: #16b5ca;

    box-shadow:
        0 0 0 4px rgba(22, 181, 202, .10),
        0 8px 24px rgba(13, 91, 110, .06);

    background: #fff;
}

/* Slightly cleaner spacing between credentials */

.task-login .fm-login-form .row {
    margin-bottom: 12px;
}

/* Login button */

.task-login .fm-login-form .formbuttons {
    margin-top: 20px;
}

.task-login .fm-login-form .btn-primary {
    min-height: 58px;

    border: 0;
    border-radius: 12px;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;

    box-shadow:
        0 12px 28px rgba(14, 169, 191, .20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.task-login .fm-login-form .btn-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 15px 32px rgba(14, 169, 191, .27);

    filter: brightness(1.025);
}

/* ----------------------------------------------------------
   SECURITY / PRODUCT INFORMATION
   ---------------------------------------------------------- */

.task-login .fm-security-note {
    position: static;
    top: auto;

    justify-content: center;

    width: 100%;
    margin: 18px auto 0;
    padding: 0;

    color: #81949e;

    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.task-login #login-footer {
    position: static;
    top: auto;

    margin: 14px 0 0;

    color: #a4b1b8;
    font-size: 10px;
    text-align: center;
}

/* Bottom FM caption */

.task-login .fm-login-access-footer {
    position: absolute;

    right: 0;
    bottom: 18px;
    left: 0;

    margin: 0;

    color: #a0afb6;

    font-size: 9px;
    letter-spacing: .11em;
    text-align: center;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media screen and (max-width: 1180px) {

    .task-login .fm-login-access {
        padding-right: 38px;
        padding-left: 38px;
    }

    .task-login .fm-login-card-logo img {
        height: 132px;
        max-width: 305px;
    }
}

@media screen and (max-width: 980px) {

    .task-login .fm-login-access {
        min-height: 100vh;
        padding: 36px 26px;
    }

    .task-login .fm-login-card {
        width: min(470px, 100%);
    }

    .task-login .fm-login-card-logo {
        margin: 22px 0 18px;
    }

    .task-login .fm-login-card-logo img {
        height: 125px;
        max-width: 290px;
        transform: none;
    }

    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        position: static;
        top: auto;
    }

    .task-login .fm-login-access-footer {
        position: static;
        margin-top: 30px;
    }
}

@media screen and (max-width: 520px) {

    .task-login .fm-login-access {
        padding: 26px 20px;
    }

    .task-login .fm-login-card h2 {
        font-size: 28px;
    }

    .task-login .fm-login-description {
        font-size: 13px;
    }

    .task-login .fm-login-card-logo {
        margin: 18px 0 16px;
    }

    .task-login .fm-login-card-logo img {
        height: 108px;
        max-width: 255px;
    }

    .task-login .fm-login-form .form-control,
    .task-login .fm-login-form .btn-primary {
        min-height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-form .form-control,
    .task-login .fm-login-form .btn-primary {
        transition: none;
    }

    .task-login .fm-login-form .btn-primary:hover {
        transform: none;
    }
}


/* ==========================================================
   FM LOGO / LOGIN SPACING - #340-E021
   ========================================================== */

/* Reduce space underneath FM logo */
.task-login .fm-login-card-logo {
    margin-bottom: 4px;
}

/* Bring Username / Password / Login closer to logo */
.task-login .fm-login-form {
    position: relative;
    top: -28px;
}

/* Move associated information together with the form */
.task-login .fm-security-note {
    position: relative;
    top: -28px;
}

.task-login #login-footer {
    position: relative;
    top: -28px;
}

/* Mobile: use smaller adjustment */
@media screen and (max-width: 980px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -18px;
    }
}

@media screen and (max-width: 520px) {
    .task-login .fm-login-form,
    .task-login .fm-security-note,
    .task-login #login-footer {
        top: -10px;
    }
}


/* FM MANUAL LOGIN POSITION CONTROL */

.task-login .fm-login-form,
.task-login .fm-security-note,
.task-login #login-footer {
    position: relative;
    top: -90px;
}




/* FM MANUAL LOGIN POSITION CONTROL */



.task-login .fm-login-form,

.task-login .fm-security-note,

.task-login #login-footer {

    position: relative;

    top: -90px; 

}




/* FM MANUAL LOGIN POSITION CONTROL */

.task-login .fm-login-form,
.task-login .fm-security-note,
.task-login #login-footer {
    position: relative;
    top: -90px;
}



/* ==========================================================
   FM APPROVED LOGIN DESIGN - #340-E023
   Authoritative final login composition
   ========================================================== */

/*
   IMPORTANT:
   This block intentionally overrides earlier E017-E021
   experimental position rules.
*/

/* ----- RIGHT PANEL ----- */

.task-login .fm-login-access {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 36px 56px;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(31, 188, 211, .055),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdfe 60%,
            #f5fafc 100%
        );
}


/* ----- COMPLETE LOGIN CARD ----- */

.task-login .fm-login-card {
    width: min(520px, 100%);
    margin: 0 auto;
}


/* ----- SECURE WEBMAIL ----- */

.task-login .fm-login-status {
    margin: 0 0 22px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .17em;
}


/* ----- TITLE ----- */

.task-login .fm-login-card h2 {
    margin: 0;

    font-size: clamp(34px, 2.5vw, 42px);
    line-height: 1.08;

    letter-spacing: -.04em;
}


/* ----- DESCRIPTION ----- */

.task-login .fm-login-description {
    margin: 14px 0 0;

    color: #708897;

    font-size: 15px;
    line-height: 1.55;
}


/* ----- FM LOGO ----- */

.task-login .fm-login-card-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 0;

    margin: 26px 0 18px;
    padding: 0;
}


.task-login .fm-login-card-logo img {
    display: block;

    width: auto;
    height: 168px;
    max-width: 365px;

    margin: 0 auto;

    object-fit: contain;

    transform: none !important;

    filter:
        drop-shadow(
            0 12px 24px
            rgba(13, 70, 93, .10)
        );
}


/* ----- SECURITY BANNER ----- */

.task-login .fm-security-note {
    position: static !important;
    top: auto !important;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 0 14px;
    padding: 11px 16px;

    border: 1px solid
        rgba(21, 181, 202, .09);

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            rgba(19, 183, 204, .075),
            rgba(19, 183, 204, .035)
        );

    color: #678492;

    font-size: 11px;
    line-height: 1.4;

    text-align: center;
}


/* ----- LOGIN FORM ----- */

.task-login .fm-login-form {
    position: static !important;
    top: auto !important;

    width: 100%;

    margin: 0 !important;

    transform: none !important;
}


.task-login .fm-login-form .box-inner,
.task-login .fm-login-form .row {
    position: static !important;
}


/* Username / password rows */

.task-login .fm-login-form .row {
    margin-bottom: 12px;
}


/* Inputs */

.task-login .fm-login-form .form-control {
    min-height: 60px;

    border: 1px solid #d4e1e7;
    border-radius: 12px;

    background: rgba(255,255,255,.96);

    color: #19333f;

    font-size: 16px;

    box-shadow:
        0 4px 14px
        rgba(16, 66, 84, .025);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.task-login .fm-login-form .form-control:hover {
    border-color: #b9cfd8;
}


.task-login .fm-login-form .form-control:focus {
    border-color: #18b8ce;

    box-shadow:
        0 0 0 4px
        rgba(24, 184, 206, .10),
        0 8px 22px
        rgba(11, 100, 121, .07);
}


/* ----- LOGIN BUTTON ----- */

.task-login .fm-login-form .formbuttons {
    margin-top: 18px;
}


.task-login .fm-login-form .btn-primary {
    min-height: 60px;

    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            #149eb4 0%,
            #19b8cd 52%,
            #19c6d7 100%
        );

    font-size: 15px;
    font-weight: 800;

    letter-spacing: .075em;

    box-shadow:
        0 14px 30px
        rgba(13, 163, 185, .20);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.task-login .fm-login-form .btn-primary:hover,
.task-login .fm-login-form .btn-primary:focus {
    transform: translateY(-1px);

    filter: brightness(1.025);

    box-shadow:
        0 17px 34px
        rgba(13, 163, 185, .27);
}


/* ----- FADI EMAIL SYSTEM ----- */

.task-login #login-footer {
    position: static !important;
    top: auto !important;

    margin: 14px 0 0;

    color: #91a6b0;

    font-size: 10px;

    text-align: center;

    transform: none !important;
}


/* ----- BOTTOM CAPTION ----- */

.task-login .fm-login-access-footer {
    position: absolute;

    right: 0;
    bottom: 18px;
    left: 0;

    margin: 0;

    color: #91a8b3;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .12em;

    text-align: center;
}


/* ----- RESPONSIVE ----- */

@media screen and (max-width: 1180px) {

    .task-login .fm-login-access {
        padding-right: 36px;
        padding-left: 36px;
    }

    .task-login .fm-login-card {
        width: min(480px, 100%);
    }

    .task-login .fm-login-card-logo img {
        height: 150px;
        max-width: 330px;
    }
}


@media screen and (max-width: 980px) {

    .task-login .fm-login-access {
        min-height: 100vh;

        padding: 34px 24px;
    }

    .task-login .fm-login-card-logo {
        margin: 22px 0 16px;
    }

    .task-login .fm-login-card-logo img {
        height: 135px;
        max-width: 300px;
    }

    .task-login .fm-login-access-footer {
        position: static;

        margin-top: 30px;
    }
}


@media screen and (max-width: 520px) {

    .task-login .fm-login-access {
        padding: 26px 18px;
    }

    .task-login .fm-login-card h2 {
        font-size: 29px;
    }

    .task-login .fm-login-description {
        font-size: 13px;
    }

    .task-login .fm-login-card-logo {
        margin: 18px 0 14px;
    }

    .task-login .fm-login-card-logo img {
        height: 115px;
        max-width: 260px;
    }

    .task-login .fm-security-note {
        padding: 9px 11px;

        font-size: 10px;
    }

    .task-login .fm-login-form .form-control,
    .task-login .fm-login-form .btn-primary {
        min-height: 55px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-form .form-control,
    .task-login .fm-login-form .btn-primary {
        transition: none;
    }

    .task-login .fm-login-form .btn-primary:hover {
        transform: none;
    }
}



/* ==========================================================
   FM CENTERED LOGIN + ANIMATED LOGO - #340-E024
   ========================================================== */


/* ----------------------------------------------------------
   CENTER COMPLETE LOGIN COMPOSITION
   ---------------------------------------------------------- */

.task-login .fm-login-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.task-login .fm-login-card {
    width: min(520px, 100%);
    margin: 0 auto;
}

/*
 * Slight optical adjustment:
 * The footer occupies the bottom of the panel, so this moves
 * the login composition a little toward the true visual center.
 */
.task-login .fm-login-card {
    transform: translateY(12px);
}


/* Center heading area */

.task-login .fm-login-status {
    justify-content: center;
    text-align: center;
}

.task-login .fm-login-card h2,
.task-login .fm-login-description {
    text-align: center;
}


/* ----------------------------------------------------------
   FM LOGO ANIMATION
   ---------------------------------------------------------- */

.task-login .fm-login-card-logo {
    position: relative;
    overflow: visible;
}


/* Soft glow behind logo */

.task-login .fm-login-card-logo::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 210px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(19, 184, 211, .15) 0%,
            rgba(19, 184, 211, .07) 40%,
            transparent 72%
        );

    transform: translate(-50%, -50%);

    filter: blur(14px);

    pointer-events: none;

    animation:
        fmLogoGlow 3.8s ease-in-out infinite;
}


/* Actual FM logo */

.task-login .fm-login-card-logo img {
    position: relative;
    z-index: 2;

    transform-origin: center center;

    animation:
        fmLogoFloat 4s ease-in-out infinite;

    will-change: transform, filter;
}


/* Gentle vertical floating */

@keyframes fmLogoFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            drop-shadow(
                0 12px 24px
                rgba(13, 70, 93, .10)
            );
    }

    50% {
        transform:
            translateY(-7px)
            scale(1.018);

        filter:
            drop-shadow(
                0 18px 30px
                rgba(10, 147, 180, .18)
            );
    }
}


/* Background glow breathing */

@keyframes fmLogoGlow {

    0%,
    100% {
        opacity: .55;
        transform:
            translate(-50%, -50%)
            scale(.92);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}


/* ----------------------------------------------------------
   LOGIN FORM CENTERING
   ---------------------------------------------------------- */

.task-login .fm-security-note,
.task-login .fm-login-form,
.task-login #login-footer {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}


/* Keep login button centered/full width */

.task-login .fm-login-form .formbuttons {
    width: 100%;
}

.task-login .fm-login-form .btn-primary {
    width: 100%;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media screen and (max-width: 980px) {

    .task-login .fm-login-card {
        transform: none;
    }

    .task-login .fm-login-card-logo::before {
        width: 185px;
        height: 105px;
    }
}


@media screen and (max-width: 520px) {

    .task-login .fm-login-card-logo::before {
        width: 155px;
        height: 90px;
    }
}


/* Accessibility:
   Disable motion when operating system requests reduced motion.
*/

@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-card-logo img,
    .task-login .fm-login-card-logo::before {
        animation: none !important;
    }
}


/* ==========================================================
   FM TRUE CENTER LOGIN - #340-E025
   ========================================================== */

/* Center the complete login area in the right panel */
.task-login .fm-login-access {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 100vh;
}

/* True horizontal + vertical center */
.task-login .fm-login-card {
    position: relative !important;

    width: min(520px, calc(100% - 40px)) !important;

    margin: auto !important;

    transform: none !important;
}

/* Keep all content centered */
.task-login .fm-login-status {
    justify-content: center !important;
    text-align: center;
}

.task-login .fm-login-card h2,
.task-login .fm-login-description {
    text-align: center;
}

/* Logo centered */
.task-login .fm-login-card-logo {
    justify-content: center !important;
    text-align: center;
}

/* Login form centered */
.task-login .fm-login-form {
    position: static !important;
    top: auto !important;

    width: 100% !important;

    margin-right: auto !important;
    margin-left: auto !important;

    transform: none !important;
}

/* Security banner centered */
.task-login .fm-security-note {
    position: static !important;
    top: auto !important;

    width: 100%;

    margin-right: auto !important;
    margin-left: auto !important;

    transform: none !important;
}

/* Product text */
.task-login #login-footer {
    position: static !important;
    top: auto !important;

    text-align: center;

    transform: none !important;
}

/* Footer must not affect centering calculation */
.task-login .fm-login-access-footer {
    position: absolute !important;

    right: 0;
    bottom: 18px;
    left: 0;
}

@media screen and (max-height: 850px) {

    .task-login .fm-login-card {
        transform: scale(.92) !important;
        transform-origin: center center;
    }
}

@media screen and (max-width: 980px) {

    .task-login .fm-login-access {
        min-height: 100vh;
    }

    .task-login .fm-login-card {
        width: min(500px, 100%) !important;
    }
}


/* ==========================================================
   FM FINAL LOGO ANIMATION - #340-E026
   ========================================================== */

.task-login .fm-login-card-logo {
    position: relative;
    overflow: visible;
}

/* Animated glow behind logo */
.task-login .fm-login-card-logo::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 50%;
    left: 50%;

    width: 250px;
    height: 125px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(19, 188, 213, .20) 0%,
            rgba(19, 188, 213, .09) 38%,
            rgba(19, 188, 213, 0) 72%
        );

    filter: blur(17px);

    pointer-events: none;

    animation:
        fmFinalGlow 3.6s ease-in-out infinite;
}

/* FM logo itself */
.task-login .fm-login-card-logo img {
    position: relative;
    z-index: 2;

    transform-origin: center center;

    animation:
        fmFinalFloat 3.6s ease-in-out infinite !important;

    will-change: transform, filter;
}

@keyframes fmFinalFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        filter:
            drop-shadow(
                0 10px 20px
                rgba(8, 77, 103, .12)
            );
    }

    50% {
        transform:
            translateY(-9px)
            scale(1.025);

        filter:
            drop-shadow(
                0 18px 30px
                rgba(12, 169, 199, .25)
            );
    }
}

@keyframes fmFinalGlow {

    0%,
    100% {
        opacity: .45;

        transform:
            translate(-50%, -50%)
            scale(.88);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.12);
    }
}

/* Mobile: slightly gentler */
@media screen and (max-width: 520px) {

    .task-login .fm-login-card-logo img {
        animation-duration: 4.2s !important;
    }

    .task-login .fm-login-card-logo::after {
        width: 190px;
        height: 100px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-card-logo img,
    .task-login .fm-login-card-logo::before,
    .task-login .fm-login-card-logo::after {
        animation: none !important;
    }
}


/* ==========================================================
   FM FUTURISTIC INFRASTRUCTURE PANEL - #340-E027
   ========================================================== */

.task-login .fm-login-infrastructure {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 58%,
            rgba(0,188,235,.14),
            transparent 34%),
        radial-gradient(circle at 88% 28%,
            rgba(0,126,190,.13),
            transparent 32%),
        linear-gradient(145deg,
            #031923 0%,
            #052735 48%,
            #02131d 100%);
}

/* Technical grid */
.task-login .fm-login-infrastructure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(56,202,230,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56,202,230,.035) 1px, transparent 1px);

    background-size: 42px 42px;

    mask-image:
        linear-gradient(to bottom,
            rgba(0,0,0,.75),
            rgba(0,0,0,.15));
}

/* Large network/globe impression */
.task-login .fm-login-infrastructure::after {
    content: "";
    position: absolute;

    z-index: 0;

    left: 8%;
    right: 8%;
    bottom: 16%;

    height: 42%;

    border: 1px solid rgba(31,195,226,.15);
    border-radius: 50% 50% 15% 15% / 70% 70% 25% 25%;

    background:
        radial-gradient(circle at 20% 45%,
            rgba(37,218,244,.8) 0 2px,
            transparent 3px),
        radial-gradient(circle at 42% 28%,
            rgba(37,218,244,.7) 0 2px,
            transparent 3px),
        radial-gradient(circle at 60% 43%,
            rgba(37,218,244,.8) 0 2px,
            transparent 3px),
        radial-gradient(circle at 78% 25%,
            rgba(37,218,244,.65) 0 2px,
            transparent 3px),
        radial-gradient(ellipse at center,
            rgba(0,166,215,.14),
            rgba(0,88,130,.04) 55%,
            transparent 72%);

    box-shadow:
        0 -20px 80px rgba(0,184,230,.07),
        inset 0 15px 50px rgba(0,191,234,.04);

    opacity: .85;

    pointer-events: none;

    animation:
        fmNetworkPulse 6s ease-in-out infinite;
}

/* Keep content above background */
.task-login .fm-brand-lockup,
.task-login .fm-infrastructure-content,
.task-login .fm-login-infrastructure-footer {
    position: relative;
    z-index: 3;
}


/* ----------------------------------------------------------
   TOP BRAND
   ---------------------------------------------------------- */

.task-login .fm-brand-logo {
    width: 104px;
    height: 76px;

    filter:
        drop-shadow(0 8px 18px rgba(0,183,224,.15));
}

.task-login .fm-brand-copy strong {
    font-size: 20px;
    letter-spacing: .13em;
}

.task-login .fm-brand-copy span {
    color: #83a9b8;
    letter-spacing: .12em;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.task-login .fm-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    color: #49d9ef;

    font-weight: 800;
    letter-spacing: .18em;
}

.task-login .fm-eyebrow::before,
.task-login .fm-eyebrow::after {
    content: "";

    width: 48px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #29cde8
        );
}

.task-login .fm-eyebrow::after {
    background:
        linear-gradient(
            90deg,
            #29cde8,
            transparent
        );
}

.task-login .fm-infrastructure-content h2 {
    max-width: 760px;

    margin-top: 24px;

    font-size: clamp(44px, 4.4vw, 70px);
    line-height: 1.03;

    letter-spacing: -.045em;

    text-shadow:
        0 10px 35px rgba(0,0,0,.20);
}

/* Cyan emphasis */
.task-login .fm-infrastructure-content h2 strong,
.task-login .fm-infrastructure-content h2 em {
    color: #31cceb;
    font-style: normal;
}

.task-login .fm-infrastructure-content > p {
    max-width: 720px;

    color: #9ab8c5;

    font-size: 16px;
}


/* ----------------------------------------------------------
   MAIL FLOW CARDS
   ---------------------------------------------------------- */

.task-login .fm-mail-flow {
    position: relative;
    z-index: 4;

    margin-top: 38px;
}

.task-login .fm-flow-node {
    min-height: 150px;

    border: 1px solid rgba(50,194,222,.28);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(7,49,66,.80),
            rgba(3,28,41,.74)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 45px rgba(0,0,0,.13);

    backdrop-filter: blur(8px);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.task-login .fm-flow-node:hover {
    transform: translateY(-4px);

    border-color: rgba(45,215,239,.58);

    box-shadow:
        0 18px 40px rgba(0,166,209,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* Main FM server */
.task-login .fm-flow-node-primary {
    transform: scale(1.06);

    border-color: rgba(38,213,238,.72);

    background:
        linear-gradient(
            155deg,
            rgba(8,76,95,.94),
            rgba(3,39,55,.91)
        );

    box-shadow:
        0 0 0 1px rgba(43,216,241,.08),
        0 0 32px rgba(0,194,232,.13),
        inset 0 0 30px rgba(0,177,219,.05);
}

.task-login .fm-flow-node-primary:hover {
    transform:
        translateY(-4px)
        scale(1.06);
}

.task-login .fm-flow-icon {
    width: 54px;
    height: 54px;

    border: 1px solid rgba(51,215,239,.36);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(16,147,180,.28),
            rgba(6,57,75,.75)
        );

    box-shadow:
        0 0 20px rgba(0,199,235,.09);
}

.task-login .fm-flow-connector {
    position: relative;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(39,198,224,.16),
            #31cee8,
            rgba(39,198,224,.16)
        );
}

.task-login .fm-flow-connector::after {
    border-color: #3ed8ef;
}


/* ----------------------------------------------------------
   SERVICE CARDS
   ---------------------------------------------------------- */

.task-login .fm-service-grid {
    position: relative;
    z-index: 4;

    margin-top: 34px;

    gap: 14px;
}

.task-login .fm-service {
    min-height: 82px;

    border: 1px solid rgba(43,176,203,.20);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(5,38,52,.82),
            rgba(2,27,39,.70)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    backdrop-filter: blur(8px);
}

.task-login .fm-service:hover {
    border-color: rgba(45,211,236,.42);

    background:
        linear-gradient(
            145deg,
            rgba(6,52,68,.90),
            rgba(3,32,45,.82)
        );

    box-shadow:
        0 12px 30px rgba(0,165,205,.07);
}

.task-login .fm-service-indicator {
    width: 10px;
    height: 10px;

    background: #36e2ad;

    box-shadow:
        0 0 8px rgba(54,226,173,.85),
        0 0 18px rgba(54,226,173,.25);

    animation:
        fmStatusPulse 2.2s ease-in-out infinite;
}


/* ----------------------------------------------------------
   ANIMATIONS
   ---------------------------------------------------------- */

@keyframes fmNetworkPulse {
    0%,
    100% {
        opacity: .58;
        transform: scale(.985);
    }

    50% {
        opacity: .90;
        transform: scale(1);
    }
}

@keyframes fmStatusPulse {
    0%,
    100% {
        opacity: .65;
        transform: scale(.90);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media screen and (max-width: 1180px) {

    .task-login .fm-infrastructure-content h2 {
        font-size: clamp(40px, 4vw, 58px);
    }

    .task-login .fm-flow-node {
        min-height: 135px;
    }
}

@media screen and (max-width: 980px) {

    .task-login .fm-login-infrastructure::after {
        opacity: .45;
    }

    .task-login .fm-flow-node-primary,
    .task-login .fm-flow-node-primary:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-infrastructure::after,
    .task-login .fm-service-indicator {
        animation: none;
    }

    .task-login .fm-flow-node,
    .task-login .fm-service {
        transition: none;
    }
}

/* ==========================================================
   FM PREMIUM INFRASTRUCTURE DESIGN - #340-E030
   Authoritative final left-panel block
   ========================================================== */

.task-login .fm-login-infrastructure {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 32px 44px 24px;

    background:
        radial-gradient(
            ellipse at 50% 61%,
            rgba(0, 196, 239, .17) 0%,
            rgba(0, 123, 172, .08) 32%,
            transparent 59%
        ),
        radial-gradient(
            circle at 15% 18%,
            rgba(0, 160, 213, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 25%,
            rgba(0, 111, 177, .10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #02131e 0%,
            #032536 48%,
            #01111b 100%
        );
}


/* ----------------------------------------------------------
   TECHNICAL GRID + NETWORK LINES
   ---------------------------------------------------------- */

.task-login .fm-login-infrastructure::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:

        radial-gradient(
            circle at 7% 48%,
            rgba(59, 220, 244, .80) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 22% 40%,
            rgba(59, 220, 244, .70) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 37% 50%,
            rgba(59, 220, 244, .72) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 53% 39%,
            rgba(59, 220, 244, .78) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 69% 48%,
            rgba(59, 220, 244, .72) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 84% 39%,
            rgba(59, 220, 244, .74) 0 2px,
            transparent 3px
        ),

        linear-gradient(
            rgba(47, 201, 229, .025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(47, 201, 229, .025) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        auto,
        auto,
        auto,
        auto,
        46px 46px,
        46px 46px;

    opacity: .82;

    pointer-events: none;
}


/* ----------------------------------------------------------
   DIGITAL GLOBE / NETWORK HORIZON
   ---------------------------------------------------------- */

.task-login .fm-login-infrastructure::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: -14%;
    width: 128%;

    top: 34%;
    height: 42%;

    border:
        1px solid
        rgba(37, 207, 238, .18);

    border-top:
        2px solid
        rgba(42, 218, 244, .55);

    border-radius:
        50% 50% 8% 8% /
        58% 58% 8% 8%;

    background:

        repeating-radial-gradient(
            ellipse at center bottom,
            transparent 0 36px,
            rgba(35, 196, 225, .075) 37px 38px,
            transparent 39px 72px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0 92px,
            rgba(36, 197, 226, .055) 93px,
            transparent 94px 184px
        ),

        radial-gradient(
            ellipse at center bottom,
            rgba(0, 189, 233, .20) 0%,
            rgba(0, 122, 170, .09) 39%,
            rgba(0, 67, 100, .025) 59%,
            transparent 73%
        );

    box-shadow:
        0 -2px 22px rgba(0, 213, 247, .14),
        inset 0 22px 55px rgba(0, 188, 231, .055);

    opacity: .72;

    transform-origin: center bottom;

    pointer-events: none;

    animation:
        fmPremiumNetwork 7s ease-in-out infinite;
}


/* ----------------------------------------------------------
   LAYERING
   ---------------------------------------------------------- */

.task-login .fm-brand-lockup,
.task-login .fm-infrastructure-content,
.task-login .fm-login-infrastructure-footer {
    position: relative;
    z-index: 5;
}


/* ----------------------------------------------------------
   BRAND
   ---------------------------------------------------------- */

.task-login .fm-brand-lockup {
    align-items: center;
}

.task-login .fm-brand-logo {
    width: 96px;
    height: 70px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 18px
            rgba(0, 188, 230, .20)
        );
}

.task-login .fm-brand-copy strong {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .12em;
}

.task-login .fm-brand-copy span {
    margin-top: 4px;

    color: #86a8b7;

    font-size: 10px;
    letter-spacing: .14em;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.task-login .fm-infrastructure-content {
    width: min(790px, 100%);
    margin: auto;
}

.task-login .fm-eyebrow {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 18px;

    color: #42d8ef;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .19em;
}

.task-login .fm-eyebrow::before,
.task-login .fm-eyebrow::after {
    content: "";

    width: 48px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #32d6ef
        );
}

.task-login .fm-eyebrow::after {
    background:
        linear-gradient(
            90deg,
            #32d6ef,
            transparent
        );
}

.task-login .fm-infrastructure-content h2 {
    max-width: 770px;

    margin: 0 auto;

    color: #f7fbfd;

    font-size: clamp(44px, 4.2vw, 68px);
    font-weight: 800;

    line-height: 1.03;
    letter-spacing: -.045em;

    text-align: center;

    text-shadow:
        0 10px 32px rgba(0, 0, 0, .27);
}

.task-login .fm-infrastructure-content h2 strong {
    color: #34d1ee;

    font-weight: 800;

    text-shadow:
        0 0 28px
        rgba(39, 211, 239, .18);
}

.task-login .fm-infrastructure-content > p {
    max-width: 670px;

    margin: 25px auto 0;

    color: #a1bbc6;

    font-size: 15px;

    line-height: 1.65;

    text-align: center;
}


/* ----------------------------------------------------------
   MAIL ROUTING FLOW
   ---------------------------------------------------------- */

.task-login .fm-mail-flow {
    position: relative;
    z-index: 6;

    margin-top: 38px;

    gap: 0;
}

.task-login .fm-flow-node {
    min-height: 154px;

    padding: 20px 18px;

    border:
        1px solid
        rgba(41, 196, 224, .34);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 55, 73, .86),
            rgba(2, 26, 39, .84)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .04),

        0 18px 44px
        rgba(0, 0, 0, .16);

    backdrop-filter: blur(11px);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.task-login .fm-flow-node:hover {
    transform: translateY(-4px);

    border-color:
        rgba(48, 218, 242, .65);

    box-shadow:
        0 20px 42px
        rgba(0, 188, 225, .11),

        inset 0 1px 0
        rgba(255, 255, 255, .055);
}


/* CENTRAL FM SERVER */

.task-login .fm-flow-node-primary {
    position: relative;

    z-index: 3;

    transform: scale(1.08);

    border:
        1px solid
        rgba(55, 225, 248, .92);

    background:
        linear-gradient(
            155deg,
            rgba(8, 95, 118, .97),
            rgba(2, 42, 59, .96)
        );

    box-shadow:
        0 0 0 1px rgba(47, 217, 243, .12),
        0 0 22px rgba(0, 209, 246, .22),
        0 0 48px rgba(0, 174, 218, .09),
        0 20px 44px rgba(0, 0, 0, .18),
        inset 0 0 38px rgba(0, 201, 239, .08);
}

.task-login .fm-flow-node-primary:hover {
    transform:
        translateY(-4px)
        scale(1.08);
}


/* NODE ICON */

.task-login .fm-flow-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border:
        1px solid
        rgba(52, 221, 244, .46);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20, 169, 201, .36),
            rgba(3, 51, 69, .88)
        );

    box-shadow:
        0 0 22px
        rgba(0, 205, 242, .14);

    color: #a8ecf6;
}

.task-login .fm-flow-title {
    margin-top: 17px;

    color: #f5fbfd;

    font-size: 14px;
    font-weight: 800;
}

.task-login .fm-flow-detail {
    margin-top: 6px;

    color: #7fa5b5;

    font-size: 10px;

    letter-spacing: .07em;
}


/* CONNECTORS */

.task-login .fm-flow-connector {
    position: relative;

    min-width: 68px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(42, 207, 234, .14),
            #35d5ed,
            rgba(42, 207, 234, .14)
        );

    box-shadow:
        0 0 10px
        rgba(35, 209, 237, .12);
}


/* ----------------------------------------------------------
   SERVICE CARDS
   ---------------------------------------------------------- */

.task-login .fm-service-grid {
    position: relative;

    z-index: 6;

    margin-top: 34px;

    gap: 12px;
}

.task-login .fm-service {
    min-height: 82px;

    padding: 15px 17px;

    border:
        1px solid
        rgba(39, 171, 199, .25);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 43, 57, .90),
            rgba(2, 25, 37, .86)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .03);

    backdrop-filter: blur(9px);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.task-login .fm-service:hover {
    transform: translateY(-2px);

    border-color:
        rgba(46, 211, 237, .48);

    background:
        linear-gradient(
            145deg,
            rgba(7, 57, 73, .95),
            rgba(3, 31, 44, .91)
        );
}

.task-login .fm-service strong {
    color: #f0f8fb;

    font-size: 12px;
}

.task-login .fm-service div span {
    color: #7f9eac;

    font-size: 10px;
}

.task-login .fm-service-indicator {
    width: 9px;
    height: 9px;

    background: #3de0ae;

    box-shadow:
        0 0 7px rgba(61, 224, 174, .9),
        0 0 17px rgba(61, 224, 174, .30);

    animation:
        fmPremiumStatus 2.2s ease-in-out infinite;
}


/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.task-login .fm-login-infrastructure-footer {
    border-top:
        1px solid
        rgba(80, 158, 184, .14);

    color: #6f93a3;

    font-size: 9px;

    letter-spacing: .12em;
}


/* ----------------------------------------------------------
   ANIMATION
   ---------------------------------------------------------- */

@keyframes fmPremiumNetwork {

    0%,
    100% {
        opacity: .58;

        transform:
            scale(.985)
            translateY(3px);
    }

    50% {
        opacity: .82;

        transform:
            scale(1.008)
            translateY(-2px);
    }
}

@keyframes fmPremiumStatus {

    0%,
    100% {
        opacity: .62;
        transform: scale(.90);
    }

    50% {
        opacity: 1;
        transform: scale(1.14);
    }
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media screen and (max-width: 1180px) {

    .task-login .fm-login-infrastructure {
        padding-right: 30px;
        padding-left: 30px;
    }

    .task-login .fm-infrastructure-content h2 {
        font-size: clamp(40px, 4vw, 58px);
    }

    .task-login .fm-flow-node {
        min-height: 140px;
    }
}

@media screen and (max-width: 980px) {

    .task-login .fm-login-infrastructure::after {
        opacity: .40;
    }

    .task-login .fm-flow-node-primary,
    .task-login .fm-flow-node-primary:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .task-login .fm-login-infrastructure::after,
    .task-login .fm-service-indicator {
        animation: none;
    }

    .task-login .fm-flow-node,
    .task-login .fm-service {
        transition: none;
    }
}