*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
}

body{
    margin:0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:#070c10;

    color:#fff;
}


.fm-auth-shell{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(420px,1fr)
        minmax(480px,.82fr);
}


/* ============================================================
   BRAND
   ============================================================ */

.fm-auth-brand{
    min-height:100vh;

    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    padding:
        clamp(34px,4vw,64px);

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(213,45,148,.17),
            transparent 24%
        ),
        radial-gradient(
            circle at 62% 65%,
            rgba(42,175,225,.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #101920 0%,
            #080e12 54%,
            #05090c 100%
        );
}


.fm-auth-logo{
    position:relative;
    z-index:4;

    width:max-content;

    display:flex;
    align-items:baseline;

    color:#fff;

    text-decoration:none;
}


.fm-auth-logo strong{
    font-size:34px;
    line-height:1;

    font-weight:950;

    letter-spacing:-.075em;
}


.fm-auth-logo span{
    margin-left:5px;

    color:#d52d94;

    font-size:17px;

    font-weight:950;
}


.fm-auth-brand-copy{
    position:relative;
    z-index:3;

    max-width:620px;

    margin:
        auto 0;
}


.fm-auth-brand-copy > span{
    color:#d52d94;

    font-size:11px;

    font-weight:950;

    letter-spacing:.12em;
}


.fm-auth-brand-copy h1{
    margin:
        20px 0 0;

    font-size:
        clamp(52px,6vw,92px);

    line-height:.86;

    font-weight:950;

    letter-spacing:-.065em;
}


.fm-auth-brand-copy p{
    max-width:470px;

    margin:
        28px 0 0;

    color:#9baab2;

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


/* ============================================================
   RADAR
   ============================================================ */

.fm-auth-radar{
    width:520px;
    height:520px;

    position:absolute;

    right:-140px;
    bottom:-145px;

    opacity:.52;
}


.fm-auth-radar i{
    position:absolute;

    left:50%;
    top:50%;

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

    border:
        1px solid
        rgba(213,45,148,.22);

    border-radius:50%;
}


.fm-auth-radar i:nth-child(1){
    width:100px;
    height:100px;
}

.fm-auth-radar i:nth-child(2){
    width:190px;
    height:190px;
}

.fm-auth-radar i:nth-child(3){
    width:310px;
    height:310px;
}

.fm-auth-radar i:nth-child(4){
    width:470px;
    height:470px;
}


.fm-auth-radar b{
    width:12px;
    height:12px;

    position:absolute;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:#d52d94;

    box-shadow:
        0 0 14px
        rgba(213,45,148,.95),
        0 0 38px
        rgba(213,45,148,.50);
}


/* ============================================================
   FORM PANEL
   ============================================================ */

.fm-auth-panel{
    min-height:100vh;

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

    padding:
        54px 46px;

    background:
        #f5f7f8;
}


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


.fm-auth-kicker{
    color:#d52d94;

    font-size:10px;

    font-weight:950;

    letter-spacing:.11em;
}


.fm-auth-card-head h2{
    margin:
        10px 0 0;

    color:#111a20;

    font-size:
        clamp(32px,3vw,44px);

    line-height:.98;

    font-weight:950;

    letter-spacing:-.045em;
}


.fm-auth-card-head p{
    margin:
        15px 0 30px;

    color:#74828a;

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


/* ============================================================
   FORM
   ============================================================ */

.fm-auth-form{
    display:flex;
    flex-direction:column;

    gap:17px;
}


.fm-auth-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:13px;
}


.fm-auth-field{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.fm-auth-field > span{
    color:#536169;

    font-size:10px;

    font-weight:900;

    letter-spacing:.06em;
}


.fm-auth-field small{
    color:#86939a;

    font-size:11px;
    line-height:1.35;
}


.fm-auth-field input{
    width:100%;
    height:50px;

    padding:
        0 14px;

    border:
        1px solid
        #d2dadd;

    border-radius:7px;

    outline:0;

    background:#fff;

    color:#142028;

    font:inherit;

    font-size:14px;

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


.fm-auth-field input:hover{
    border-color:#bdc8cd;
}


.fm-auth-field input:focus{
    border-color:
        rgba(213,45,148,.72);

    box-shadow:
        0 0 0 4px
        rgba(213,45,148,.08);
}


.fm-auth-options{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}


.fm-auth-check{
    display:flex;
    align-items:center;

    gap:8px;

    color:#68767e;

    font-size:12px;
}


.fm-auth-check input{
    accent-color:#d52d94;
}


.fm-auth-options a{
    color:#258eaf;

    text-decoration:none;

    font-size:12px;

    font-weight:750;
}


.fm-auth-submit{
    width:100%;
    height:52px;

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

    gap:18px;

    margin-top:3px;

    border:0;

    border-radius:7px;

    background:
        linear-gradient(
            90deg,
            #d52d94,
            #bc2783
        );

    color:#fff;

    font-size:11px;

    font-weight:950;

    letter-spacing:.07em;

    cursor:pointer;

    box-shadow:
        0 12px 30px
        rgba(213,45,148,.20);

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


.fm-auth-submit:hover{
    transform:
        translateY(-1px);

    box-shadow:
        0 15px 34px
        rgba(213,45,148,.27);
}


/* ============================================================
   MESSAGES
   ============================================================ */

.fm-auth-error,
.fm-auth-status{
    margin:
        0 0 21px;

    padding:
        13px 14px;

    border-radius:6px;

    font-size:12px;
    line-height:1.45;
}


.fm-auth-error{
    display:flex;
    flex-direction:column;

    gap:3px;

    border:
        1px solid
        rgba(190,38,78,.20);

    background:
        rgba(190,38,78,.07);

    color:#a52149;
}


.fm-auth-status{
    border:
        1px solid
        rgba(36,155,109,.20);

    background:
        rgba(36,155,109,.07);

    color:#197b58;
}


/* ============================================================
   FOOTER
   ============================================================ */

.fm-auth-footer{
    display:flex;
    align-items:center;

    gap:7px;

    margin-top:27px;

    padding-top:20px;

    border-top:
        1px solid #dde3e6;

    color:#75828a;

    font-size:12px;
}


.fm-auth-footer a{
    color:#258eaf;

    text-decoration:none;

    font-weight:750;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

    .fm-auth-shell{
        grid-template-columns:1fr;
    }


    .fm-auth-brand{
        min-height:280px;

        padding:
            30px;
    }


    .fm-auth-brand-copy{
        margin:
            48px 0 12px;
    }


    .fm-auth-brand-copy h1{
        font-size:44px;
    }


    .fm-auth-brand-copy p{
        display:none;
    }


    .fm-auth-panel{
        min-height:auto;

        padding:
            42px 23px 55px;
    }

}


@media(max-width:540px){

    .fm-auth-grid{
        grid-template-columns:1fr;
    }


    .fm-auth-options{
        align-items:flex-start;
        flex-direction:column;

        gap:12px;
    }

}


/* ============================================================
   AUTH · LEGAL CONSENT
   ============================================================ */

.fm-auth-legal-consent{
    display:flex;
    flex-direction:column;
    gap:11px;

    margin:
        2px 0 4px;

    padding:
        15px 16px;

    border:
        1px solid
        #dce3e6;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.58);
}


.fm-auth-legal-consent
.fm-auth-check{
    align-items:flex-start;

    color:#66757d;

    font-size:12px;
    line-height:1.45;
}


.fm-auth-legal-consent
input{
    margin-top:2px;

    accent-color:#d52d94;
}


.fm-auth-legal-consent
a{
    color:#258eaf;

    font-weight:750;

    text-decoration:none;
}


.fm-auth-legal-consent
a:hover{
    text-decoration:underline;
}