.conta-page,
.onboarding-page,
.perfil-page {
    min-height: 100vh;
    padding: 32px 0 90px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(117, 103, 255, .19),
            transparent 29rem
        ),
        #07101f;
}

.conta-layout,
.onboarding-container,
.perfil-container {
    width: min(100% - 24px, 1120px);
    margin: 0 auto;
}

.conta-layout {
    display: grid;
    gap: 30px;
}

.conta-legenda {
    color: #2ed6c5;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .09em;
}

.conta-apresentacao {
    padding: 12px 2px;
}

.conta-apresentacao h1,
.conta-cabecalho h1,
.perfil-header h1 {
    margin: 11px 0;
    font-size: 2.35rem;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.conta-apresentacao > p,
.conta-cabecalho > p,
.perfil-header p {
    margin: 0;
    color: #9eabc0;
    line-height: 1.72;
}

.conta-beneficios {
    margin-top: 24px;
    display: grid;
    gap: 10px;
    color: #c8d1de;
    font-size: .79rem;
}

.conta-card {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: #111f33;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
}

.conta-card header {
    margin-bottom: 22px;
}

.conta-card header h2 {
    margin: 8px 0;
    font-size: 1.45rem;
}

.conta-card header p {
    margin: 0;
    color: #8d9aaf;
    font-size: .8rem;
    line-height: 1.6;
}

.conta-card form,
.perfil-form {
    display: grid;
    gap: 16px;
}

.conta-campo > label {
    display: block;
    margin-bottom: 7px;
    color: #d6deea;
    font-size: .73rem;
    font-weight: 850;
}

.conta-campo-input,
.conta-campo > input,
.conta-campo > select,
.conta-campo > textarea {
    width: 100%;
    min-height: 50px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    outline: 0;
    background: #0a1728;
    color: white;
}

.conta-campo-input:focus,
.conta-campo > input:focus,
.conta-campo > select:focus,
.conta-campo > textarea:focus {
    border-color: #8b7fff;
    box-shadow: 0 0 0 3px rgba(117, 103, 255, .14);
}

.conta-campo small,
.conta-erro-geral {
    display: block;
    margin-top: 6px;
    color: #ff929d;
    font-size: .68rem;
    line-height: 1.45;
}

.conta-ajuda {
    margin-top: 6px;
    color: #7d8ba0;
    font-size: .64rem;
    line-height: 1.5;
}

.conta-ajuda ul {
    margin: 6px 0 0;
    padding-left: 17px;
}

.conta-erro-geral {
    padding: 12px;
    border-radius: 11px;
    background: rgba(239, 91, 105, .1);
}

.conta-botao,
.conta-botao-secundario {
    min-height: 51px;
    padding: 0 18px;
    border: 0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}

.conta-botao {
    width: 100%;
    background:
        linear-gradient(
            135deg,
            #7567ff,
            #887cff
        );
    color: white;
}

.conta-botao-secundario {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: white;
}

.conta-recuperar {
    justify-self: end;
    color: #66e6da;
    font-size: .72rem;
    font-weight: 850;
}

.conta-card footer {
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #8391a6;
    font-size: .72rem;
    text-align: center;
}

.conta-card footer a {
    color: #66e6da;
    font-weight: 850;
}

.conta-centralizada {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conta-card-menor {
    width: min(100% - 24px, 500px);
}

.conta-resultado {
    text-align: center;
}

.conta-resultado > span {
    width: 58px;
    height: 58px;
    margin: 0 auto 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 199, 132, .13);
    color: #67e2a8;
    font-size: 1.5rem;
    font-weight: 900;
}

.conta-resultado h1 {
    margin: 0 0 10px;
}

.conta-resultado p {
    margin: 0 0 22px;
    color: #9eabc0;
    line-height: 1.65;
}

.conta-cabecalho {
    max-width: 760px;
    margin-bottom: 25px;
}

.onboarding-progresso {
    height: 6px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.onboarding-progresso span {
    width: 70%;
    height: 100%;
    display: block;
    background:
        linear-gradient(
            90deg,
            #7567ff,
            #2ed6c5
        );
}

.onboarding-card {
    display: grid;
    gap: 20px;
}

.conta-grid {
    display: grid;
    gap: 16px;
}

.conta-checkbox > ul {
    margin: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    display: grid;
    gap: 10px;
    list-style: none;
    background: #0a1728;
}

.conta-checkbox li label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c6d0de;
    font-size: .75rem;
}

.conta-checkbox input {
    accent-color: #7567ff;
}

.conta-pular {
    margin-top: 12px;
    text-align: center;
}

.conta-pular button {
    border: 0;
    background: transparent;
    color: #8290a5;
    font-size: .72rem;
    cursor: pointer;
}

.perfil-header {
    margin-bottom: 25px;
    display: grid;
    gap: 17px;
}

.perfil-form {
    gap: 17px;
}

.perfil-card > header {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 43px 1fr;
    gap: 12px;
}

.perfil-card > header > span {
    width: 43px;
    height: 43px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(117, 103, 255, .14);
    color: #aaa3ff;
    font-size: .7rem;
    font-weight: 900;
}

.perfil-card h2 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}

.perfil-card header p {
    margin: 0;
    color: #8795aa;
    font-size: .7rem;
    line-height: 1.5;
}

.perfil-salvar {
    position: sticky;
    z-index: 20;
    bottom: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .32);
}

@media (min-width: 760px) {
    .conta-page,
    .onboarding-page,
    .perfil-page {
        padding: 65px 0 105px;
    }

    .conta-layout,
    .onboarding-container,
    .perfil-container {
        width: min(100% - 40px, 1120px);
    }

    .conta-layout {
        grid-template-columns: 1fr 500px;
        align-items: center;
        gap: 80px;
    }

    .conta-apresentacao h1,
    .conta-cabecalho h1,
    .perfil-header h1 {
        font-size: 3.35rem;
    }

    .conta-card {
        padding: 32px;
        border-radius: 23px;
    }

    .conta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 19px;
    }

    .conta-campo-largo {
        grid-column: 1 / -1;
    }

    .conta-checkbox > ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .perfil-header {
        grid-template-columns: 1fr auto;
        align-items: end;
    }

    .perfil-salvar {
        position: static;
        width: auto;
        min-width: 230px;
        justify-self: end;
    }
}