:root {

    --pm-bg: #05070A;

    --pm-surface: #0E1319;

    --pm-surface-2: #121A22;

    --pm-line:
        rgba(255,255,255,.10);

    --pm-line-strong:
        rgba(255,255,255,.15);

    --pm-text: #F7F9FB;

    --pm-muted: #95A0AD;

    --pm-cyan: #00F0E5;

    --pm-yellow: #FFD800;

    --pm-red: #FF6B72;
}


* {
    box-sizing: border-box;
}


body {

    min-height: 100vh;

    margin: 0;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        var(--pm-text);

    background:

        radial-gradient(
            circle at 16% 18%,
            rgba(0,240,229,.12),
            transparent 27%
        ),

        radial-gradient(
            circle at 84% 16%,
            rgba(255,216,0,.10),
            transparent 22%
        ),

        radial-gradient(
            circle at 70% 85%,
            rgba(0,240,229,.05),
            transparent 25%
        ),

        linear-gradient(
            180deg,
            #05070A 0%,
            #070B10 100%
        );
}


button,
input {
    font: inherit;
}


a {
    color: inherit;
}


/* =========================================================
   PÁGINA
========================================================= */

.login-page {

    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        26px;
}


/* =========================================================
   LAYOUT
========================================================= */

.login-layout {

    width:
        min(
            100%,
            980px
        );

    display:
        grid;

    grid-template-columns:
        1.12fr .88fr;

    min-height:
        620px;

    background:
        rgba(7,10,14,.84);

    border:
        1px solid
        var(--pm-line);

    border-radius:
        28px;

    overflow:
        hidden;

    box-shadow:
        0 32px 100px
        rgba(0,0,0,.45);
}


/* =========================================================
   LADO DA MARCA
========================================================= */

.brand-panel {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        46px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 18% 22%,
            rgba(0,240,229,.20),
            transparent 26%
        ),

        radial-gradient(
            circle at 78% 76%,
            rgba(255,216,0,.08),
            transparent 22%
        ),

        linear-gradient(
            145deg,
            #05080C,
            #0A1117 62%,
            #081015
        );
}


.brand-panel::before {

    content: "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -140px;

    top:
        -140px;

    border:
        1px solid
        rgba(0,240,229,.16);

    border-radius:
        50%;

    box-shadow:
        0 0 80px
        rgba(0,240,229,.08);
}


.brand-panel::after {

    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    left:
        -125px;

    bottom:
        -130px;

    border:
        1px solid
        rgba(255,216,0,.15);

    border-radius:
        50%;
}


.brand-lockup {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;
}


.brand-mark {

    display:
        grid;

    place-items:
        center;

    width:
        60px;

    height:
        60px;

    border-radius:
        18px;

    color:
        #071014;

    background:

        linear-gradient(
            135deg,
            #FFF 0 58%,
            var(--pm-cyan) 58% 77%,
            var(--pm-yellow) 77%
        );

    font-size:
        30px;

    font-weight:
        900;

    box-shadow:
        0 0 32px
        rgba(0,240,229,.19);
}


.brand-name {

    margin:
        0;

    font-size:
        28px;

    font-weight:
        950;

    letter-spacing:
        -.05em;
}


.brand-name .accent {
    color:
        var(--pm-cyan);
}


.brand-subtitle {

    margin:
        6px
        0
        0;

    color:
        var(--pm-muted);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .38em;

    text-transform:
        uppercase;
}


/* =========================================================
   TEXTO
========================================================= */

.hero-copy {

    position:
        relative;

    z-index:
        1;

    max-width:
        470px;
}


.hero-copy .eyebrow {

    color:
        var(--pm-yellow);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .24em;

    text-transform:
        uppercase;
}


.hero-copy h1 {

    margin:
        14px
        0
        12px;

    font-size:
        clamp(
            36px,
            5vw,
            62px
        );

    line-height:
        .95;

    letter-spacing:
        -.065em;
}


.hero-copy p {

    margin:
        0;

    color:
        var(--pm-muted);

    font-size:
        14px;

    line-height:
        1.7;
}


.hero-line {

    width:
        86px;

    height:
        3px;

    margin-top:
        24px;

    background:
        linear-gradient(
            90deg,
            var(--pm-cyan),
            var(--pm-yellow)
        );

    border-radius:
        999px;

    box-shadow:
        0 0 20px
        rgba(0,240,229,.26);
}


.brand-tagline {

    position:
        relative;

    z-index:
        1;

    color:
        #6F7A86;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .26em;

    text-transform:
        uppercase;
}


.brand-tagline span:nth-child(2) {
    color:
        var(--pm-cyan);
}


.brand-tagline span:nth-child(3) {
    color:
        var(--pm-yellow);
}


/* =========================================================
   LOGIN
========================================================= */

.login-panel {

    display:
        flex;

    align-items:
        center;

    padding:
        46px;

    background:
        rgba(14,19,25,.96);

    border-left:
        1px solid
        var(--pm-line);
}


.login-card {

    width:
        100%;

    max-width:
        390px;

    margin:
        0 auto;
}


.login-header {

    margin-bottom:
        26px;
}


.login-header .eyebrow {

    color:
        var(--pm-cyan);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;
}


.login-header h2 {

    margin:
        12px
        0
        8px;

    font-size:
        32px;

    letter-spacing:
        -.05em;
}


.login-header p {

    margin:
        0;

    color:
        var(--pm-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   MENSAGENS
========================================================= */

.message-stack {

    display:
        grid;

    gap:
        9px;

    margin-bottom:
        18px;
}


.message {

    padding:
        11px
        12px;

    border-radius:
        10px;

    border:
        1px solid
        var(--pm-line);

    font-size:
        12px;

    line-height:
        1.45;
}


.message-error,
.message-danger {

    color:
        #FFDfe1;

    background:
        rgba(255,107,114,.08);

    border-color:
        rgba(255,107,114,.18);
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.login-form {

    display:
        grid;

    gap:
        17px;
}


.field {

    display:
        grid;

    gap:
        8px;
}


.field label {

    color:
        #DDE3E8;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.field-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.field input {

    width:
        100%;

    height:
        50px;

    padding:
        0
        14px;

    color:
        var(--pm-text);

    background:
        #080D12;

    border:
        1px solid
        var(--pm-line-strong);

    border-radius:
        11px;

    outline:
        none;

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


.field input::placeholder {
    color:
        #5F6975;
}


.field input:focus {

    border-color:
        rgba(0,240,229,.55);

    box-shadow:
        0 0 0 4px
        rgba(0,240,229,.07);

    background:
        #0A1117;
}


.password-wrapper {
    position:
        relative;
}


.password-wrapper input {
    padding-right:
        88px;
}


.toggle-password {

    position:
        absolute;

    top:
        50%;

    right:
        8px;

    transform:
        translateY(-50%);

    border:
        0;

    background:
        transparent;

    color:
        var(--pm-cyan);

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

    padding:
        8px
        7px;
}


.text-link {

    color:
        var(--pm-yellow);

    font-size:
        11px;

    font-weight:
        800;

    text-decoration:
        none;
}


.text-link:hover {
    text-decoration:
        underline;
}


.remember {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--pm-muted);

    font-size:
        12px;

    cursor:
        pointer;
}


.remember input {

    width:
        15px;

    height:
        15px;

    accent-color:
        var(--pm-cyan);
}


.submit-button {

    width:
        100%;

    min-height:
        51px;

    margin-top:
        4px;

    border:
        0;

    border-radius:
        12px;

    cursor:
        pointer;

    font-size:
        13px;

    font-weight:
        950;
}


.submit-button:hover {

    transform:
        translateY(-1px);
}


/* =========================================================
   RODAPÉ
========================================================= */

.login-footer {

    margin-top:
        24px;

    color:
        #59636F;

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 820px) {

    .login-page {
        padding:
            16px;
    }


    .login-layout {

        grid-template-columns:
            1fr;

        min-height:
            auto;
    }


    .brand-panel {

        min-height:
            350px;

        padding:
            30px;
    }


    .login-panel {

        padding:
            30px;

        border-left:
            0;

        border-top:
            1px solid
            var(--pm-line);
    }

}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 18px;
}

.remember-me input {
    width: 16px;
    height: 16px;
    accent-color: #00F0E5;
    cursor: pointer;
}

.remember-me label {
    color: #aeb6c0;
    font-size: 13px;
    cursor: pointer;
}