/**
 * ============================================================================
 * JATAÍ FRAMEWORK - COMPONENTE 9 (ONBOARDING E NIVELAMENTO) — CSS
 * Version: 2.3.0
 * Atualizado em: 27/09/2026 - (2.3.0) editor de perguntas até 880px e sheet da aluna até 860px no computador (antes 360px/640px); pergunta mostra até 2 linhas; tipos em 4 colunas.
 * Atualizado em: 27/09/2026 - (2.2.0) botões de nível com a sigla e o nome lado a lado em grade (2 colunas no celular, 3 no maior); sigla pequena no selo do resultado da aluna; saiu o estilo do campo de nota.
 * Atualizado em: 27/09/2026 - (2.1.0) editor do nivelamento da conta (origem, contagem, usar/tirar todas, chave por pergunta, pergunta fora do teste apagada, tipos em botões) e avaliação com nota; claro e escuro.
 * Atualizado em: 27/09/2026 - (2.0.4) chave "obrigatório": desligada incolor, ligada na cor da role (antes laranja fixo).
 * Atualizado em: 26/09/2026 - (2.0.3) cor da role: botões, ícones e campos na cor da role do usuário contexto (tokens --jatai-cor* do C2). (2.0.0) chave \"Nivelamento obrigatório\" no sheet da aluna. (1.1.0) avisos e fluxo direto.
 * ============================================================================
 */

/* Variáveis de cor no :root (não só em .jatai-c9-app) — os sheets
dinâmicos do nivelamento (editor de perguntas, revisão da gestora) são
criados direto no document.body via JS, fora do container .jatai-c9-app.
Se as variáveis só existissem ali dentro, qualquer var(--c9-*) usada
nesses sheets ficaria inválida (cores sumindo/ficando brancas). */
:root {
    --c9-terracota: #A85A3D;
    --c9-dourado: #D9A441;
    --c9-texto: #353B46;
    --c9-texto-suave: #6F7787;
    --c9-borda: #E4E8EF;
}

.jatai-c9-app {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    padding: 20px 16px 60px !important;
}

.jatai-c9-aviso {
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.jatai-c9-aviso__titulo {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-aviso__texto {
    font-size: 13.5px !important;
    color: var(--c9-texto-suave) !important;
}

/* ---------------------------------------------------------------------
FORMULÁRIO DA ALUNA (multi-etapas)
--------------------------------------------------------------------- */

.jatai-c9-form-etapa {
    max-width: 640px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.jatai-c9-form-progresso {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.jatai-c9-form-progresso__bola {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--c9-borda) !important;
    transition: background .2s ease !important;
}

.jatai-c9-form-progresso__bola--ativa {
    background: var(--jatai-cor, var(--c9-terracota)) !important;
}

.jatai-c9-form-etapa__titulo {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-form-etapa__sub {
    font-size: 13px !important;
    color: var(--c9-texto-suave) !important;
    margin-bottom: 14px !important;
}

.jatai-c9-form-etapa__campos {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.jatai-c9-campo {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.jatai-c9-campo__label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #4F5D34 !important;
    line-height: 1.4 !important;
}

.jatai-c9-campo__obrigatorio {
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

html body .jatai-c9-campo textarea,
html body .jatai-c9-campo input[type="text"] {
    width: 100% !important;
    padding: 12px 14px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: var(--c9-texto) !important;
    box-sizing: border-box !important;
    outline: none !important;
    resize: vertical !important;
    transition: border-color .15s ease, background .15s ease !important;
}

html body .jatai-c9-campo textarea:focus,
html body .jatai-c9-campo input[type="text"]:focus {
    border-color: var(--jatai-cor, var(--c9-terracota)) !important;
    background: #ffffff !important;
}

.jatai-c9-campo__opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.jatai-c9-campo__opcao {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    color: var(--c9-texto) !important;
    cursor: pointer !important;
}

.jatai-c9-campo__opcao input {
    accent-color: var(--jatai-cor, var(--c9-terracota)) !important;
    width: 16px !important;
    height: 16px !important;
}

.jatai-c9-form-etapa__erro {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #A32D2D !important;
    background: #FCEBEB !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-top: 14px !important;
}

.jatai-c9-form-etapa__erro[hidden] {
    display: none !important;
}

.jatai-c9-form-etapa__botoes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 22px !important;
}

html body button.jatai-c9-botao-principal {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 13px 26px !important;
    background: linear-gradient(135deg, var(--jatai-cor, var(--c9-terracota)), #C97355) !important;
    border: none !important;
    border-radius: 999px !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--jatai-cor, #A85A3D) 18%, transparent), 0 6px 16px color-mix(in srgb, var(--jatai-cor, #A85A3D) 22%, transparent) !important;
    transition: transform .18s ease, opacity .18s ease !important;
}

html body button.jatai-c9-botao-principal:hover {
    transform: translateY(-1px) !important;
}

html body button.jatai-c9-botao-principal:disabled {
    opacity: .6 !important;
    cursor: default !important;
    transform: none !important;
}

html body button.jatai-c9-botao-secundario {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 13px 20px !important;
    background: transparent !important;
    border: none !important;
    color: var(--c9-texto-suave) !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* ---------------------------------------------------------------------
CONSULTA DA ALUNA (read-only)
--------------------------------------------------------------------- */

.jatai-c9-consulta {
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Dentro do sheet da gestora, o "card" já é o próprio sheet — sem
fundo/borda/padding duplicados, só o conteúdo dos blocos. */
.jatai-c9-consulta--dentro-de-sheet {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.jatai-c9-sheet__topo-consulta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

html body button.jatai-c9-sheet__editar-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    background: #F0F3F8 !important;
    border: none !important;
    border-radius: 999px !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.jatai-c9-sheet__botoes-edicao {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.jatai-c9-consulta__titulo {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-consulta__sub {
    font-size: 13px !important;
    color: var(--c9-texto-suave) !important;
    margin-bottom: 18px !important;
}

.jatai-c9-consulta__bloco {
    padding: 16px 0 !important;
    border-top: 0.5px solid var(--c9-borda) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.jatai-c9-consulta__bloco-titulo {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

.jatai-c9-consulta__item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.jatai-c9-consulta__pergunta {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #4F5D34 !important;
}

.jatai-c9-consulta__resposta {
    font-size: 14px !important;
    color: var(--c9-texto) !important;
    line-height: 1.5 !important;
}

.jatai-c9-consulta__em-breve {
    font-size: 13px !important;
    color: var(--c9-texto-suave) !important;
}

/* ---------------------------------------------------------------------
VISÃO DA GESTORA — grid + busca + cards
--------------------------------------------------------------------- */

/* Cabeçalho (título + busca) num "vidro fosco" sobre o fundo floral
decorativo da página (.jatai-main-area) — antes ficava direto em cima
da imagem, sem nenhum contraste próprio. Mesmo efeito de glass já usado
na barra de navegação mobile (blur + saturação, fundo bem translúcido). */
.jatai-c9-gestora__cabecalho {
    position: relative !important;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(31, 35, 40, 0.06) !important;
    margin-bottom: 20px !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Navegador sem suporte a backdrop-filter — fundo sólido em vez de
    vidro, pra não ficar sem contraste nenhum sobre o fundo floral. */
    .jatai-c9-gestora__cabecalho {
        background: rgba(255, 255, 255, 0.92) !important;
    }
}

.jatai-c9-gestora__titulo {
    display: block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-gestora__sub {
    display: block !important;
    font-size: 13.5px !important;
    color: var(--c9-texto-suave) !important;
    margin: 4px 0 18px !important;
}

.jatai-c9-gestora__busca {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    margin-bottom: 0 !important;
}

html body .jatai-c9-gestora__busca input {
    flex: 1 1 auto !important;
    border: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    background: transparent !important;
    color: var(--c9-texto) !important;
}

html body button.jatai-c9-gestora__busca button,
.jatai-c9-gestora__busca button {
    background: none !important;
    border: none !important;
    color: var(--c9-texto-suave) !important;
    cursor: pointer !important;
    display: flex !important;
}

.jatai-c9-gestora__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

/* No mobile, "repeat(auto-fill, minmax(140px,1fr))" cabia 2 colunas
apertadas — cada card ficava espremido, texto (tipo nome longo de
aluno) cortando ou vazando da tela. 1 card por linha, com respiro de
verdade. */
@media (max-width: 560px) {
    .jatai-c9-gestora__grid {
        grid-template-columns: 1fr !important;
    }
    .jatai-c9-gestora__cabecalho {
        padding: 18px !important;
    }
}

.jatai-c9-gestora__vazio {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    color: var(--c9-texto-suave) !important;
    font-size: 13.5px !important;
    padding: 30px 0 !important;
}

html body button.jatai-c9-aluna-card {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 24px 16px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .03) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html body button.jatai-c9-aluna-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--jatai-cor, var(--c9-terracota)) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--jatai-cor, #A85A3D) 12%, transparent) !important;
}

.jatai-c9-aluna-card__foto {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

.jatai-c9-aluna-card__foto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.jatai-c9-aluna-card__nome {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    text-align: center !important;
}

.jatai-c9-aluna-card__status {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
}

.jatai-c9-aluna-card__status--ok {
    background: #E4EFDD !important;
    color: #4C7A32 !important;
}

.jatai-c9-aluna-card__status--pendente {
    background: #F6EEDD !important;
    color: var(--c9-dourado) !important;
}

/* ---------------------------------------------------------------------
SHEET DA GESTORA
--------------------------------------------------------------------- */

.jatai-c9-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.jatai-c9-sheet[hidden] {
    display: none !important;
}

.jatai-c9-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(44, 36, 28, .45) !important;
}

.jatai-c9-sheet__painel {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 640px !important;
    max-height: 84vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 22px !important;
    padding: 32px 26px 28px !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 60px rgba(44, 36, 28, .25) !important;
}

html body button.jatai-c9-sheet__fechar {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #F6F1EA !important;
    border: none !important;
    border-radius: 50% !important;
    color: #8A92A1 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.jatai-c9-sheet__carregando {
    text-align: center !important;
    padding: 40px 0 !important;
    color: var(--c9-texto-suave) !important;
    font-size: 13.5px !important;
}

.jatai-c9-sheet__nome {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-sheet__status {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--c9-texto-suave) !important;
    margin: 2px 0 16px !important;
}

.jatai-c9-sheet-bloco {
    padding: 14px 0 !important;
    border-top: 0.5px solid var(--c9-borda) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.jatai-c9-sheet-bloco__titulo {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

.jatai-c9-sheet-campo {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.jatai-c9-sheet-campo__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4F5D34 !important;
}

html body .jatai-c9-sheet-campo textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    color: var(--c9-texto) !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

.jatai-c9-sheet__erro {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #A32D2D !important;
    background: #FCEBEB !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin: 12px 0 !important;
}

.jatai-c9-sheet__erro[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    .jatai-c9-form-etapa,
    .jatai-c9-consulta {
        padding: 22px 18px !important;
    }
}

/*
=================================================
ABAS (Interesses / Nivelamento) — usadas tanto na
consulta da aluna quanto no sheet da gestora.
=================================================
*/
.jatai-c9-abas {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    border-bottom: 0.5px solid var(--c9-borda) !important;
    margin-bottom: 20px !important;
}

html body button.jatai-c9-abas__botao {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 4px 12px !important;
    margin-right: 20px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--c9-texto-suave) !important;
    cursor: pointer !important;
    position: relative !important;
}

html body button.jatai-c9-abas__botao--ativo {
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

html body button.jatai-c9-abas__botao--ativo::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -0.5px !important;
    height: 2px !important;
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    border-radius: 2px !important;
}

/*
=================================================
NIVELAMENTO — visão da ALUNA (intro, aguardando,
resultado) e o QUIZ em si.
=================================================
*/

.jatai-c9-nivel-intro,
.jatai-c9-nivel-aguardando,
.jatai-c9-nivel-resultado {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
}

.jatai-c9-nivel-aguardando,
.jatai-c9-nivel-resultado {
    align-items: center !important;
    text-align: center !important;
}

.jatai-c9-nivel-intro__titulo,
.jatai-c9-nivel-aguardando__titulo {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-nivel-intro__texto,
.jatai-c9-nivel-aguardando__texto,
.jatai-c9-nivel-resultado__texto {
    font-size: 14px !important;
    color: var(--c9-texto-suave) !important;
    line-height: 1.5 !important;
}

.jatai-c9-nivel-aguardando__icone {
    font-size: 36px !important;
}

html body button.jatai-c9-nivel-intro__comecar {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin-top: 6px !important;
    padding: 12px 24px !important;
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.jatai-c9-nivel-resultado__selo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 24px !important;
    background: linear-gradient(135deg, var(--jatai-cor, var(--c9-terracota)), var(--c9-dourado)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

/* ---- Quiz em si ---- */
.jatai-c9-nivel-quiz {
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 18px !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.jatai-c9-nivel-progresso-texto {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--c9-texto-suave) !important;
}

.jatai-c9-nivel-progresso-barra {
    width: 100% !important;
    height: 5px !important;
    background: var(--c9-borda) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-top: -8px !important;
}

.jatai-c9-nivel-progresso-barra span {
    display: block !important;
    height: 100% !important;
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    border-radius: 999px !important;
    transition: width .25s ease !important;
}

.jatai-c9-nivel-pergunta {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
    line-height: 1.5 !important;
    white-space: pre-line !important;
}

.jatai-c9-nivel-dica {
    font-size: 12.5px !important;
    color: var(--c9-texto-suave) !important;
    margin: -8px 0 0 !important;
}

.jatai-c9-nivel-opcoes {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body button.jatai-c9-nivel-opcao {
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: left !important;
    padding: 12px 16px !important;
    background: #F0F3F8 !important;
    border: 1px solid var(--c9-borda) !important;
    border-radius: 12px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    cursor: pointer !important;
    transition: border-color .12s ease, background .12s ease !important;
}

html body button.jatai-c9-nivel-opcao--selecionada {
    background: #FBF0E8 !important;
    border-color: var(--c9-terracota) !important;
    color: var(--c9-terracota) !important;
}

html body .jatai-c9-nivel-input,
html body .jatai-c9-nivel-textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 16px !important;
    color: var(--c9-texto) !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

.jatai-c9-nivel-erro {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d55d60 !important;
}

.jatai-c9-nivel-erro[hidden] {
    display: none !important;
}

.jatai-c9-nivel-navegacao {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

/* ---- Gravador de áudio ---- */
.jatai-c9-gravador {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px !important;
    background: #F0F3F8 !important;
    border: 1px dashed var(--c9-borda) !important;
    border-radius: 14px !important;
}

.jatai-c9-gravador--enviado {
    border-style: solid !important;
}

html body button.jatai-c9-gravador__botao {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 14px 24px !important;
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
    border: none !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.jatai-c9-gravador__gravando {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #C0392B !important;
}

.jatai-c9-gravador__pulso {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #C0392B !important;
    animation: jatai-c9-pulso 1.1s ease-in-out infinite !important;
}

@keyframes jatai-c9-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.3); }
}

html body button.jatai-c9-gravador__parar,
html body button.jatai-c9-gravador__regravar {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 10px 20px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    cursor: pointer !important;
}

.jatai-c9-gravador audio {
    width: 100% !important;
    max-width: 340px !important;
}

.jatai-c9-gravador__preview-botoes {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
}

/*
=================================================
NIVELAMENTO — visão da GESTORA (dentro do sheet
da aluna): placar, respostas, seletor de nível.
=================================================
*/

.jatai-c9-nivel-carregando,
.jatai-c9-nivel-vazio {
    font-size: 13.5px !important;
    color: var(--c9-texto-suave) !important;
    padding: 12px 0 !important;
}

.jatai-c9-nivel-tag-status {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
}

.jatai-c9-nivel-tag-status--pendente {
    background: #FBF0DC !important;
    color: #A0722F !important;
}

.jatai-c9-nivel-tag-status--avaliado {
    background: #E3F0DA !important;
    color: #4B7A2F !important;
}

.jatai-c9-nivel-placar {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    background: #F0F3F8 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
}

.jatai-c9-nivel-respostas {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 18px !important;
}

.jatai-c9-nivel-resposta-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 14px 16px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-left: 3px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}

.jatai-c9-nivel-resposta-item--certo {
    background: #F2F8ED !important;
    border-left-color: #6BA84F !important;
}

.jatai-c9-nivel-resposta-item--errado {
    background: #FCF1F0 !important;
    border-left-color: #D5716D !important;
}

.jatai-c9-nivel-resposta-marca {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
}

.jatai-c9-nivel-resposta-marca--certo {
    color: #4B7A2F !important;
}

.jatai-c9-nivel-resposta-marca--errado {
    color: #B54B47 !important;
}

.jatai-c9-nivel-revisao {
    margin-top: 20px !important;
}

.jatai-c9-nivel-revisao__titulo {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
    margin-bottom: 10px !important;
}

.jatai-c9-nivel-comentario {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-top: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.jatai-c9-nivel-comentario__label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

.jatai-c9-nivel-comentario__texto {
    font-size: 14px !important;
    color: var(--c9-texto) !important;
    line-height: 1.5 !important;
}

.jatai-c9-nivel-resposta-pergunta {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--c9-texto-suave) !important;
}

.jatai-c9-nivel-resposta-valor {
    font-size: 14px !important;
    color: var(--c9-texto) !important;
    white-space: pre-line !important;
}

.jatai-c9-nivel-resposta-item audio {
    width: 100% !important;
    max-width: 320px !important;
    margin-top: 2px !important;
}

.jatai-c9-nivel-atribuir {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 16px !important;
    border-top: 0.5px solid var(--c9-borda) !important;
}

.jatai-c9-nivel-atribuir__label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
}

.jatai-c9-nivel-atribuir__opcoes {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body button.jatai-c9-nivel-atribuir__opcao {
    -webkit-appearance: none !important;
    appearance: none !important;
    /* HIVE 2.2.0: sigla + nome do nível lado a lado ("A2 Básico") */
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    text-align: left !important;
    background: #F0F3F8 !important;
    border: 1px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--c9-texto) !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease !important;
}

html body button.jatai-c9-nivel-atribuir__opcao:hover {
    background: #F0EAE0 !important;
}

html body button.jatai-c9-nivel-atribuir__opcao--ativa,
html body button.jatai-c9-nivel-atribuir__opcao--ativa:hover {
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    border-color: var(--jatai-cor, var(--c9-terracota)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
}

.jatai-c9-nivel-atribuir__erro {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #d55d60 !important;
}

.jatai-c9-nivel-atribuir__erro[hidden] {
    display: none !important;
}

/*
=================================================
EDITOR DE PERGUNTAS (CRUD da gestora)
=================================================
*/

.jatai-c9-gestora__cabecalho-topo {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

html body button.jatai-c9-gestora__editar-perguntas {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.jatai-c9-editor-perguntas {
    max-width: 640px !important;
}

.jatai-c9-editor-lista {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.jatai-c9-editor-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 12px !important;
    transition: border-color .12s ease, background .12s ease !important;
}

.jatai-c9-editor-item:hover {
    background: #F5EFE6 !important;
    border-color: #D6DCE5 !important;
}

.jatai-c9-editor-item__num {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--c9-texto-suave) !important;
}

.jatai-c9-editor-item__info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.jatai-c9-editor-item__tipo {
    display: inline-flex !important;
    align-self: flex-start !important;
    align-items: center !important;
    padding: 2px 9px !important;
    border-radius: 999px !important;
    background: #F6EEDD !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .2px !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

.jatai-c9-editor-item__texto {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--c9-texto) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jatai-c9-editor-item__menu-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
}

html body button.jatai-c9-editor-item__mais {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 9px !important;
    color: var(--c9-texto-suave) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: background .12s ease !important;
}

html body button.jatai-c9-editor-item__mais:hover {
    background: #F0EAE0 !important;
}

.jatai-c9-editor-item__menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 130px !important;
    background: #ffffff !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(31, 35, 40, .12) !important;
    padding: 4px !important;
    overflow: hidden !important;
}

.jatai-c9-editor-item__menu[hidden] {
    display: none !important;
}

html body .jatai-c9-editor-item__menu button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: var(--c9-texto) !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

html body .jatai-c9-editor-item__menu button:hover {
    background: #F5EFE6 !important;
}

html body .jatai-c9-editor-item__menu button.jatai-c9-editor-item__menu-perigo {
    color: #C0392B !important;
}

.jatai-c9-editor-erro {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d55d60 !important;
    margin-top: 8px !important;
}

.jatai-c9-editor-erro[hidden] {
    display: none !important;
}

/* ---- Form de criar/editar pergunta ---- */
.jatai-c9-editor-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #F0F3F8 !important;
    border: 0.5px solid var(--c9-borda) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.jatai-c9-editor-form .jatai-c9-sheet-campo__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    color: var(--c9-texto-suave) !important;
    margin-bottom: -6px !important;
}

.jatai-c9-editor-form select.jatai-c9-nivel-input {
    cursor: pointer !important;
}

.jatai-c9-editor-opcoes-bloco {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 4px !important;
    border-top: 0.5px solid var(--c9-borda) !important;
}

.jatai-c9-editor-opcoes-bloco[hidden] {
    display: none !important;
}

/* Preview do tipo de resposta (resposta curta/longa/áudio) — mostra
como o campo vai aparecer pra aluna, no lugar do bloco de "Opções"
(que só faz sentido pra múltipla escolha). */
.jatai-c9-editor-preview {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 4px !important;
    border-top: 0.5px solid var(--c9-borda) !important;
}

.jatai-c9-editor-preview[hidden] {
    display: none !important;
}

.jatai-c9-editor-preview__label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    color: var(--c9-texto-suave) !important;
}

.jatai-c9-editor-preview input:disabled,
.jatai-c9-editor-preview textarea:disabled {
    background: #F0EAE0 !important;
    color: var(--c9-texto-suave) !important;
    cursor: not-allowed !important;
}

.jatai-c9-editor-preview--audio {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    background: #FBF0E8 !important;
    border: 1px dashed #E0C4A8 !important;
    border-top: 1px dashed #E0C4A8 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.jatai-c9-editor-preview__mic {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
}

.jatai-c9-editor-preview__texto {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    line-height: 1.4 !important;
}

.jatai-c9-editor-opcao-linha {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}

.jatai-c9-editor-opcao-linha .jatai-c9-nivel-input {
    flex: 1 1 auto !important;
    background: #ffffff !important;
}

.jatai-c9-editor-opcao-linha input[type="radio"] {
    flex-shrink: 0 !important;
    width: 17px !important;
    height: 17px !important;
    accent-color: var(--jatai-cor, var(--c9-terracota)) !important;
    cursor: pointer !important;
}

html body button.jatai-c9-editor-opcao-remover {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: none !important;
    color: var(--c9-texto-suave) !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

html body button.jatai-c9-editor-form__add-opcao {
    align-self: flex-start !important;
}

.jatai-c9-editor-form__botoes {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 4px !important;
}

html body button.jatai-c9-editor-nova {
    width: 100% !important;
}

@media (max-width: 600px) {
    .jatai-c9-gestora__cabecalho-topo {
        flex-direction: column !important;
    }
    html body button.jatai-c9-gestora__editar-perguntas {
        width: 100% !important;
    }
}

/*
=================================================
TEMA ESCURO
=================================================
Componente inteiro nasceu sem nenhuma regra de tema escuro — esta
seção fecha essa lacuna de uma vez.

Estratégia: quase todo texto/borda do arquivo já usa var(--c9-texto),
var(--c9-texto-suave) ou var(--c9-borda) — então redefinir essas 3
variáveis logo abaixo, uma vez só, já escurece a maior parte da tela
sozinha (mesma técnica já usada pelas variáveis --jatai-sb-* da
sidebar em C2). --c9-terracota e --c9-dourado ficam INTOCADAS de
propósito: são a cor de destaque (texto/borda/gradiente de botão) e já
contrastam bem em qualquer fundo, claro ou escuro — mesma conclusão já
registrada pro card de recurso em C1.

Depois da redefinição de variáveis, o que resta é só: fundos sólidos
que eram brancos/creme (não usavam variável, então a troca acima não
alcança) e os blocos de cor "pastel" (status, acerto/erro) que
precisam virar versões translúcidas pra não ficarem "lavados" contra
o fundo escuro — mesmo padrão já usado nos ícones coloridos dos
widgets do C6.
*/

[data-jatai-tema="escuro"] {
    --c9-texto: #F2F2F2;
    --c9-texto-suave: #98989D;
    --c9-borda: rgba(255, 255, 255, 0.12);
}

/* Rótulos que usavam um verde-oliva fixo (não é variável, sobra
escuro-sobre-escuro sem ajuste) */
[data-jatai-tema="escuro"] .jatai-c9-campo__label,
[data-jatai-tema="escuro"] .jatai-c9-consulta__pergunta,
[data-jatai-tema="escuro"] .jatai-c9-sheet-campo__label {
    color: #A9C48C !important;
}

/* ---- Cartões-base (aviso, form multi-etapas, consulta read-only,
telas de nivelamento da aluna, quiz) — todos eram fundo branco sólido. */
html[data-jatai-tema="escuro"] body .jatai-c9-aviso,
html[data-jatai-tema="escuro"] body .jatai-c9-form-etapa,
html[data-jatai-tema="escuro"] body .jatai-c9-consulta,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-intro,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-aguardando,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-resultado,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-quiz {
    background: #1C1C1E !important;
}

/* ---- Campos de texto (form da aluna, quiz, editor da gestora) —
fundo creme claro (#F0F3F8), viram cinza escuro; foco viraria branco
puro, agora um tom levemente mais claro que o campo. */
html[data-jatai-tema="escuro"] body .jatai-c9-campo textarea,
html[data-jatai-tema="escuro"] body .jatai-c9-campo input[type="text"],
html[data-jatai-tema="escuro"] body .jatai-c9-sheet-campo textarea,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-input,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-textarea {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-campo textarea:focus,
html[data-jatai-tema="escuro"] body .jatai-c9-campo input[type="text"]:focus {
    background: #3A3A3C !important;
}

/* ---- Mensagem de erro (form da aluna e sheet da gestora) — mesmo
padrão translúcido já usado nos hovers de "perigo" do resto do sistema. */
[data-jatai-tema="escuro"] .jatai-c9-form-etapa__erro,
[data-jatai-tema="escuro"] .jatai-c9-sheet__erro {
    background: rgba(163, 45, 45, 0.22) !important;
    color: #FF8B8B !important;
}

/* ---- Consulta read-only da aluna e sheet da gestora: divisores entre
blocos, que usavam a borda clara direto (já cobertos pela troca de
variável acima, aqui é só o botão "Editar") */
html[data-jatai-tema="escuro"] body .jatai-c9-sheet__editar-toggle {
    background: #2C2C2E !important;
}

/* ---- Cabeçalho "vidro" da visão da gestora (grid de alunas) — era
translúcido branco sobre o fundo floral claro; vira translúcido preto
sobre o fundo floral escuro (mesmo princípio, tom invertido). */
[data-jatai-tema="escuro"] .jatai-c9-gestora__cabecalho {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-gestora__busca {
    background: #1C1C1E !important;
}

/* ---- Grid de alunas (cards da gestora) */
html[data-jatai-tema="escuro"] body button.jatai-c9-aluna-card {
    background: #1C1C1E !important;
    box-shadow: none !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-aluna-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Selo de status do card — pastel claro com texto escuro vira
translúcido com texto claro, mesmo padrão do resto do sistema. */
[data-jatai-tema="escuro"] .jatai-c9-aluna-card__status--ok {
    background: rgba(107, 168, 79, 0.22) !important;
    color: #9BD37D !important;
}

[data-jatai-tema="escuro"] .jatai-c9-aluna-card__status--pendente {
    background: rgba(217, 164, 65, 0.22) !important;
    color: #E4C989 !important;
}

/* ---- Sheet da gestora (perfil da aluna: onboarding + nivelamento) */
html[data-jatai-tema="escuro"] body .jatai-c9-sheet__painel {
    background: #1C1C1E !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-sheet__fechar {
    background: #2C2C2E !important;
    color: #98989D !important;
}

/* ---- Nivelamento (quiz da aluna) */
html[data-jatai-tema="escuro"] body button.jatai-c9-nivel-opcao {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-nivel-opcao--selecionada {
    background: rgba(168, 90, 61, 0.24) !important;
}

/* ---- Gravador de áudio */
html[data-jatai-tema="escuro"] body .jatai-c9-gravador {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-gravador__parar,
html[data-jatai-tema="escuro"] body button.jatai-c9-gravador__regravar {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Revisão do nivelamento (visão da gestora): tags de status,
placar, itens de resposta certa/errada, comentário */
[data-jatai-tema="escuro"] .jatai-c9-nivel-tag-status--pendente {
    background: rgba(217, 164, 65, 0.22) !important;
    color: #E4C989 !important;
}

[data-jatai-tema="escuro"] .jatai-c9-nivel-tag-status--avaliado {
    background: rgba(107, 168, 79, 0.22) !important;
    color: #9BD37D !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-nivel-placar,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-resposta-item,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-comentario {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-jatai-tema="escuro"] .jatai-c9-nivel-resposta-item--certo {
    background: rgba(107, 168, 79, 0.14) !important;
    border-left-color: #6BA84F !important;
}

[data-jatai-tema="escuro"] .jatai-c9-nivel-resposta-item--errado {
    background: rgba(213, 113, 109, 0.14) !important;
    border-left-color: #D5716D !important;
}

[data-jatai-tema="escuro"] .jatai-c9-nivel-resposta-marca--certo {
    color: #9BD37D !important;
}

[data-jatai-tema="escuro"] .jatai-c9-nivel-resposta-marca--errado {
    color: #FF8B8B !important;
}

/* Botões de atribuir nível (1 a 5) */
html[data-jatai-tema="escuro"] body button.jatai-c9-nivel-atribuir__opcao {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-nivel-atribuir__opcao:hover {
    background: #3A3A3C !important;
}

/* --ativa (nível selecionado) precisava vir DEPOIS da regra acima e
com a MESMA especificidade (html+body+atributo+elemento+classe) —
sem isso, a regra de cima (mais específica que o "--ativa" original,
que não tinha o atributo do tema) sempre vencia e pintava o botão
selecionado com o mesmo cinza do não-selecionado: dava pra clicar,
mas ficava impossível saber em qual nível a gestora tinha clicado. */
html[data-jatai-tema="escuro"] body button.jatai-c9-nivel-atribuir__opcao--ativa {
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    border-color: var(--jatai-cor, var(--c9-terracota)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
}

/* ---- Editor de perguntas (CRUD da gestora) */
html[data-jatai-tema="escuro"] body .jatai-c9-editor-item {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-item:hover {
    background: #3A3A3C !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-item__num {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-jatai-tema="escuro"] .jatai-c9-editor-item__tipo {
    background: rgba(217, 164, 65, 0.22) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-editor-item__mais {
    background: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-jatai-tema="escuro"] body button.jatai-c9-editor-item__mais:hover {
    background: #3A3A3C !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-item__menu {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-item__menu button:hover {
    background: #3A3A3C !important;
}

/* Form de criar/editar pergunta */
html[data-jatai-tema="escuro"] body .jatai-c9-editor-form {
    background: #2C2C2E !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-preview input:disabled,
html[data-jatai-tema="escuro"] body .jatai-c9-editor-preview textarea:disabled {
    background: #1C1C1E !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-preview--audio {
    background: rgba(217, 164, 65, 0.14) !important;
    border-color: rgba(217, 164, 65, 0.4) !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-preview__mic {
    background: #1C1C1E !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-editor-opcao-linha .jatai-c9-nivel-input {
    background: #1C1C1E !important;
}

/* ---------- Chave "Nivelamento obrigatório" (sheet da aluna, 2.0.0) ---------- */
.jatai-c9-obrigatorio {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 12px 0 18px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: #F0F3F8 !important;
}

.jatai-c9-obrigatorio__texto {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.jatai-c9-obrigatorio__titulo {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1F2328 !important;
}

.jatai-c9-obrigatorio__sub {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #6F7787 !important;
}

html body button.jatai-c9-obrigatorio__chave {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    flex-shrink: 0 !important;
    width: 46px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    /* HIVE 1.33.0: desligada = incolor, ligada = cor da role */
    background: var(--jatai-chave-off, #E3E7EE) !important;
    box-shadow: inset 0 0 0 1px var(--jatai-chave-off-borda, #CDD3DD) !important;
    cursor: pointer !important;
    transition: background .18s ease, box-shadow .18s ease !important;
}

html body button.jatai-c9-obrigatorio__chave span {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(31, 35, 40, .25) !important;
    transition: transform .18s ease !important;
}

html body button.jatai-c9-obrigatorio__chave[aria-checked="true"] {
    background: var(--jatai-cor, #E87514) !important;
    box-shadow: none !important;
}

html body button.jatai-c9-obrigatorio__chave[aria-checked="true"] span {
    transform: translateX(18px) !important;
}

html body button.jatai-c9-obrigatorio__chave:disabled {
    opacity: .6 !important;
    cursor: default !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-obrigatorio {
    background: #2C2C2E !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-obrigatorio__titulo {
    color: #F2F2F2 !important;
}

html[data-jatai-tema="escuro"] body .jatai-c9-obrigatorio__sub {
    color: #98989D !important;
}

/* =================================================
HIVE 1.34.0 (C9 2.1.0) — editor do nivelamento da conta e avaliação
com nota. Cor de destaque sempre da role (--jatai-cor…).
================================================= */
.jatai-c9-editor-origem {
    margin: 0 0 12px !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--c9-texto-suave) !important;
}
.jatai-c9-editor-origem strong {
    color: var(--c9-texto) !important;
}
.jatai-c9-editor-resumo {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 16px !important;
    margin: 0 0 12px !important;
}
.jatai-c9-editor-resumo__contagem {
    font-size: 13px !important;
    color: var(--c9-texto-suave) !important;
}
.jatai-c9-editor-resumo__contagem strong {
    color: var(--jatai-cor-texto, var(--c9-texto)) !important;
    font-weight: 800 !important;
}
.jatai-c9-editor-resumo__acoes {
    display: inline-flex !important;
    gap: 14px !important;
}
html body button.jatai-c9-editor-link {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--jatai-cor-texto, var(--c9-terracota)) !important;
    cursor: pointer !important;
    white-space: normal !important;
    text-decoration: underline transparent !important;
    text-underline-offset: 3px !important;
    transition: text-decoration-color .12s ease !important;
}
html body button.jatai-c9-editor-link:hover {
    text-decoration-color: currentColor !important;
}
html body button.jatai-c9-editor-restaurar {
    display: block !important;
    margin: 14px auto 0 !important;
    color: var(--c9-texto-suave) !important;
}
html body button.jatai-c9-editor-item__chave {
    width: 40px !important;
    height: 24px !important;
}
html body button.jatai-c9-editor-item__chave span {
    width: 18px !important;
    height: 18px !important;
}
html body button.jatai-c9-editor-item__chave[aria-checked="true"] span {
    transform: translateX(16px) !important;
}
.jatai-c9-editor-item--desligada .jatai-c9-editor-item__texto,
.jatai-c9-editor-item--desligada .jatai-c9-editor-item__num {
    opacity: .55 !important;
}
.jatai-c9-editor-item--desligada .jatai-c9-editor-item__tipo {
    background: #E9ECF1 !important;
    color: var(--c9-texto-suave) !important;
}
.jatai-c9-editor-tipos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}
html body button.jatai-c9-editor-tipo {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--c9-borda) !important;
    border-radius: 10px !important;
    background: #F0F3F8 !important;
    box-shadow: none !important;
    font-family: 'Montserrat', -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c9-texto) !important;
    white-space: normal !important;
    cursor: pointer !important;
    transition: background .12s ease, border-color .12s ease !important;
}
html body button.jatai-c9-editor-tipo:hover {
    background: var(--jatai-cor-hover, #F0EAE0) !important;
}
html body button.jatai-c9-editor-tipo--ativo,
html body button.jatai-c9-editor-tipo--ativo:hover {
    background: var(--jatai-cor, var(--c9-terracota)) !important;
    border-color: var(--jatai-cor, var(--c9-terracota)) !important;
    color: var(--jatai-cor-sobre, #FFFFFF) !important;
}
html body button.jatai-c9-editor-tipo:focus-visible,
html body button.jatai-c9-editor-link:focus-visible {
    outline: 2px solid var(--jatai-cor, #E87514) !important;
    outline-offset: 2px !important;
}
/* HIVE 2.2.0: grade dos níveis — 2 colunas no celular, 3 a partir de 480px */
html body .jatai-c9-nivel-atribuir__opcoes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
@media (min-width: 480px) {
    html body .jatai-c9-nivel-atribuir__opcoes {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
.jatai-c9-nivel-atribuir__sigla {
    font-size: 14px !important;
    font-weight: 800 !important;
}
.jatai-c9-nivel-atribuir__nome {
    font-size: 12px !important;
    font-weight: 500 !important;
    opacity: .75 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.jatai-c9-nivel-resultado__sigla {
    font-size: .62em !important;
    font-weight: 600 !important;
    opacity: .7 !important;
    margin-left: 4px !important;
}
.jatai-c9-nivel-atribuir__ajuda {
    margin-top: -4px !important;
    font-size: 12px !important;
    color: var(--c9-texto-suave) !important;
}
.jatai-c9-nivel-resultado__nota {
    font-size: 14px !important;
    color: var(--c9-texto-suave) !important;
}
.jatai-c9-nivel-resultado__nota strong {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--jatai-cor-texto, var(--c9-texto)) !important;
}
html[data-jatai-tema="escuro"] body button.jatai-c9-editor-tipo {
    background: #2C2C2E !important;
    border-color: #3A3A3C !important;
    color: #F2F2F2 !important;
}
html[data-jatai-tema="escuro"] body button.jatai-c9-editor-tipo--ativo,
html[data-jatai-tema="escuro"] body button.jatai-c9-editor-tipo--ativo:hover {
    background: var(--jatai-cor, #E87514) !important;
    border-color: var(--jatai-cor, #E87514) !important;
    color: var(--jatai-cor-sobre, #1F2328) !important;
}
html[data-jatai-tema="escuro"] body .jatai-c9-editor-origem,
html[data-jatai-tema="escuro"] body .jatai-c9-editor-resumo__contagem,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-atribuir__ajuda,
html[data-jatai-tema="escuro"] body .jatai-c9-nivel-resultado__nota {
    color: #98989D !important;
}
html[data-jatai-tema="escuro"] body .jatai-c9-editor-origem strong {
    color: #F2F2F2 !important;
}
html[data-jatai-tema="escuro"] body .jatai-c9-editor-item--desligada .jatai-c9-editor-item__tipo {
    background: #3A3A3C !important;
    color: #98989D !important;
}

/* =================================================
HIVE 1.35.0 (C9 2.3.0) — sheets do nivelamento mais largos no computador.
O editor de perguntas herdava a largura de 360px do sheet genérico
(.jatai-hw-sheet__content, C3) e ficava estreito no PC.
================================================= */
html body .jatai-hw-sheet__content.jatai-c9-editor-perguntas {
    width: 100% !important;
    max-width: 640px !important;
    text-align: left !important;
}
@media (min-width: 1025px) {
    html body .jatai-hw-sheet__content.jatai-c9-editor-perguntas {
        max-width: min(880px, calc(100vw - 64px)) !important;
        max-height: 88vh !important;
        padding: 32px 36px !important;
    }
    html body .jatai-c9-sheet__painel {
        max-width: min(860px, calc(100vw - 64px)) !important;
        max-height: 88vh !important;
        padding: 36px 40px 32px !important;
    }
    /* com espaço, o texto da pergunta mostra até 2 linhas */
    html body .jatai-c9-editor-perguntas .jatai-c9-editor-item__texto {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    html body .jatai-c9-editor-tipos {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    html body .jatai-c9-editor-form .jatai-c9-sheet-campo__label {
        text-align: left !important;
    }
}