.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;
    }
}

/* CAPTCHA_CADASTRO_V1 */

.cadastro-captcha {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    margin: 18px 0;
    padding: 15px;
    border: 1px solid rgba(49, 230, 209, .22);
    border-radius: 15px;
    background: rgba(49, 230, 209, .055);
}

.cadastro-captcha-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    color: #31e6d1;
    background: rgba(49, 230, 209, .11);
    font-weight: 900;
}

.cadastro-captcha-conteudo {
    flex: 1;
}

.cadastro-captcha label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 800;
    opacity: .72;
}

.cadastro-captcha strong {
    display: block;
    margin-bottom: 9px;
    font-size: 16px;
}

.cadastro-captcha input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 11px;
    color: #fff;
    background: rgba(6, 16, 31, .72);
}

.cadastro-captcha small {
    display: block;
    margin-top: 8px;
    line-height: 1.45;
    opacity: .62;
}

.cadastro-captcha-erro,
.cadastro-captcha-erro ul {
    margin: 8px 0 0;
    padding: 0;
    color: #fca5a5;
    list-style: none;
    font-size: 13px;
}

@media (max-width: 600px) {
    .cadastro-captcha {
        padding: 13px;
    }
}

/* QTI_PERFIL_CHECKBOX_V2_INICIO */

/* ==========================================================
   PERFIL
   DIAS DE ESTUDO + DISCIPLINAS PRIORITÁRIAS
   ========================================================== */

.perfil-form .conta-checkbox {
    grid-column: 1 / -1;
    min-width: 0;
}

/*
 * Título principal do campo.
 * Ex.: Dias preferidos para estudar
 */
.perfil-form .conta-checkbox > label {
    display: block;
    margin: 0 0 10px;
    color: #dce8f7;
    font-size: .82rem;
    line-height: 1.35;
    font-weight: 800;
}

/*
 * Django CheckboxSelectMultiple.
 *
 * Django normalmente gera:
 *
 * <div id="...">
 *     <div>
 *         <label>
 *             <input type="checkbox">
 *             Texto
 *         </label>
 *     </div>
 * </div>
 */
.perfil-form .conta-checkbox > div,
.perfil-form .conta-checkbox > ul {
    width: 100%;
    margin: 0 !important;
    padding: 14px !important;

    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(205px, 1fr)
        );

    gap: 10px;

    list-style: none;

    border:
        1px solid
        rgba(139, 159, 185, .18);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 22, 39, .96),
            rgba(9, 25, 44, .92)
        );

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

/*
 * Cada opção individual.
 */
.perfil-form .conta-checkbox > div > div,
.perfil-form .conta-checkbox > ul > li {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Card clicável.
 */
.perfil-form
.conta-checkbox
> div
> div
> label,

.perfil-form
.conta-checkbox
> ul
> li
> label {
    position: relative;

    width: 100%;
    min-height: 52px;

    margin: 0 !important;
    padding: 11px 13px;

    display: flex !important;
    align-items: center;
    justify-content: flex-start;

    gap: 11px;

    border:
        1px solid
        rgba(151, 169, 194, .16);

    border-radius: 12px;

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

    color: #e9f0fa;

    font-size: .9rem;
    line-height: 1.3;
    font-weight: 650;

    cursor: pointer;

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

/*
 * Hover.
 */
@media (hover: hover) {

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label:hover,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label:hover {
        transform:
            translateY(-1px);

        border-color:
            rgba(
                109,
                93,
                252,
                .48
            );

        background:
            rgba(
                109,
                93,
                252,
                .075
            );
    }
}

/*
 * CORREÇÃO PRINCIPAL:
 *
 * impede as regras gerais dos inputs de transformarem
 * checkbox em um quadrado gigante ou input de largura total.
 */
.perfil-form
.conta-checkbox
input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    flex:
        0 0 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0;

    accent-color:
        var(
            --primaria,
            #6d5dfc
        );

    cursor: pointer;

    box-shadow: none !important;
}

/*
 * Opção marcada.
 *
 * :has é progressivo:
 * caso o browser não suporte, o checkbox continua
 * perfeitamente funcional e alinhado.
 */
.perfil-form
.conta-checkbox
> div
> div:has(
    input[type="checkbox"]:checked
)
> label,

.perfil-form
.conta-checkbox
> ul
> li:has(
    input[type="checkbox"]:checked
)
> label {
    border-color:
        rgba(
            109,
            93,
            252,
            .65
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                109,
                93,
                252,
                .17
            ),
            rgba(
                46,
                214,
                197,
                .055
            )
        );

    box-shadow:
        0 8px 22px
        rgba(
            7,
            12,
            30,
            .18
        );
}

/*
 * Pequeno destaque lateral na opção marcada.
 */
.perfil-form
.conta-checkbox
> div
> div:has(
    input[type="checkbox"]:checked
)
> label::after,

.perfil-form
.conta-checkbox
> ul
> li:has(
    input[type="checkbox"]:checked
)
> label::after {
    content: "";

    position: absolute;

    top: 11px;
    right: 11px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(
            --ciano,
            #2ed6c5
        );

    box-shadow:
        0 0 0 4px
        rgba(
            46,
            214,
            197,
            .08
        );
}

/*
 * Foco de teclado/acessibilidade.
 */
.perfil-form
.conta-checkbox
input[type="checkbox"]:focus-visible {
    outline:
        3px solid
        rgba(
            109,
            93,
            252,
            .32
        );

    outline-offset: 3px;
}

/*
 * Evita que label ou texto estourem o card.
 */
.perfil-form
.conta-checkbox
> div
label,

.perfil-form
.conta-checkbox
> ul
label {
    overflow-wrap: anywhere;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (
    max-width: 760px
) {

    .perfil-form
    .conta-checkbox
    > div,

    .perfil-form
    .conta-checkbox
    > ul {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        padding:
            11px !important;

        gap: 9px;
    }

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label {
        min-height: 50px;

        padding:
            10px 11px;

        font-size:
            .87rem;
    }
}

/* ==========================================================
   MOBILE FIRST
   ========================================================== */

@media (
    max-width: 520px
) {

    .perfil-form
    .conta-checkbox
    > div,

    .perfil-form
    .conta-checkbox
    > ul {
        grid-template-columns:
            1fr;

        border-radius:
            14px;
    }

    .perfil-form
    .conta-checkbox
    > div
    > div
    > label,

    .perfil-form
    .conta-checkbox
    > ul
    > li
    > label {
        min-height:
            48px;
    }

    .perfil-form
    .conta-checkbox
    input[type="checkbox"] {
        width:
            19px !important;

        min-width:
            19px !important;

        max-width:
            19px !important;

        height:
            19px !important;

        min-height:
            19px !important;

        max-height:
            19px !important;

        flex:
            0 0 19px !important;
    }
}

/* QTI_PERFIL_CHECKBOX_V2_FIM */

/* QTI_PROFESSOR_PERFIL_ETAPA07_INICIO */

.perfil-professor-integracao {
    width: min(
        calc(100% - 24px),
        960px
    );
    margin: 18px auto 55px;
    padding: 18px;
    border: 1px solid
        rgba(109,93,252,.23);
    border-radius: 17px;
    display: grid;
    gap: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(109,93,252,.09),
            #111f33
        );
}

.perfil-professor-integracao h2 {
    margin: 6px 0;
    color: #edf4fc;
    font-size: 1rem;
}

.perfil-professor-integracao p {
    margin: 0;
    color: #8796ab;
    font-size: .7rem;
    line-height: 1.6;
}

@media (min-width: 760px) {

    .perfil-professor-integracao {
        padding: 23px;
        grid-template-columns:
            minmax(0,1fr)
            auto;
        align-items: center;
    }
}

/* QTI_PROFESSOR_PERFIL_ETAPA07_FIM */