/* HubFit — identidade "Brasa" (docs/DECISOES-HUBFIT.md D05 e D07; pranchas em docs/design/telas).
   Só tema claro: o design define "papel" como fundo. */

:root {
    --brasa: #FF5B1F;
    --brasa-sombra: #B8400F;
    --brasa-claro: #FFE4D8;
    --tinta: #121212;
    --papel: #F4F4F0;
    --branco: #FFFFFF;
    --linha: #E2E2DC;
    --linha-suave: #EDEDE7;
    --texto-secundario: #5E5E58;
    --conquista: #17784C;
    --conquista-fundo: #E3F2E9;
    --erro: #B3261E;

    /* Macros: diferem também em claridade (daltonismo). Versões claras para o painel escuro. */
    --proteina: #2B59C3;
    --carbo: #F5C842;
    --gordura: #9B6BDE;
    --fibra: #17784C;
    --proteina-escuro: #6E93F0;
    --gordura-escuro: #B48CEB;
    --fibra-escuro: #5CC08C;

    --altura-barra: 82px;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: 'Barlow', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
}

button, input, select { font-family: inherit; }
a { color: var(--tinta); }
h1:focus { outline: none; }

/* Tipografia */
.hf-num {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.hf-titulo { font-style: italic; text-transform: uppercase; margin: 0; }

.hf-label {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.texto-secundario { color: var(--texto-secundario); }

/* Botões: "se afunda, é ação" */
.hf-btn {
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 14px;
    min-height: 54px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    color: var(--tinta);
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.hf-btn:active { transform: translateY(3px); }
.hf-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

.hf-primario { background: var(--brasa); box-shadow: 0 4px 0 var(--brasa-sombra); }
.hf-primario:active { box-shadow: 0 1px 0 var(--brasa-sombra); }
.hf-escuro { background: var(--tinta); color: var(--branco); box-shadow: 0 4px 0 #000; }
.hf-escuro:active { box-shadow: 0 1px 0 #000; }
.hf-contorno { background: var(--branco); box-shadow: inset 0 0 0 2px var(--tinta), 0 4px 0 var(--tinta); }
.hf-contorno:active { box-shadow: inset 0 0 0 2px var(--tinta), 0 1px 0 var(--tinta); }
.hf-claro { background: var(--branco); box-shadow: 0 4px 0 #9E9E96; }
.hf-claro:active { box-shadow: 0 1px 0 #9E9E96; }

.hf-press { transition: transform 100ms ease; }
.hf-press:active { transform: scale(0.96); }

.botao-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: var(--branco);
    color: var(--tinta);
    box-shadow: inset 0 0 0 1.5px var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.botao-icone[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.botao-icone.cheio { box-shadow: none; background: var(--tinta); color: var(--branco); }
.botao-icone.suave { box-shadow: none; background: var(--papel); }

.link-texto {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--tinta);
    cursor: pointer;
}

/* Layout de app: conteúdo + barra inferior fixa */
.conteudo {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 18px calc(var(--altura-barra) + 24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.conteudo.sem-barra { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

.cabecalho { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.cabecalho .titulo { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cabecalho h1 { font-size: 30px; }
.cabecalho.centralizado .titulo { align-items: center; }

.barra-navegacao {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    height: calc(var(--altura-barra) + env(safe-area-inset-bottom));
    padding: 0 6px calc(10px + env(safe-area-inset-bottom));
    background: var(--branco);
    border-top: 2px solid var(--tinta);
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.barra-navegacao .item {
    min-width: 60px;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--texto-secundario);
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.barra-navegacao .item::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: transparent; }
.barra-navegacao .item.active { color: var(--tinta); }
.barra-navegacao .item.active::after { background: var(--brasa); }
.barra-navegacao .registrar { width: 58px; height: 54px; min-height: 0; padding: 0; margin-top: -26px; border-radius: 18px; }

/* Superfícies */
.cartao {
    background: var(--branco);
    border-radius: 18px;
    border: 1px solid var(--linha);
    padding: 14px 16px;
}
.cartao.destaque { border: none; box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta); }
.cartao-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--tinta); }

.painel {
    background: var(--tinta);
    color: var(--branco);
    border-radius: 22px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.painel .texto-secundario, .painel .rotulo { color: #BDBDB5; }
.painel .fraco { color: #9E9E96; }

.ladrilhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ladrilho {
    min-height: 74px;
    background: var(--branco);
    border: none;
    border-radius: 16px;
    box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--tinta);
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.ladrilho:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--tinta), 0 1px 0 var(--tinta); }

/* Barras de progresso */
.trilho { height: 10px; border-radius: 5px; background: var(--linha-suave); overflow: hidden; }
.painel .trilho { background: #2E2E2A; }
.trilho.fino { height: 5px; border-radius: 3px; }
.preenchimento {
    height: 100%;
    border-radius: inherit;
    background: var(--brasa);
    transform-origin: left center;
    animation: hf-barra 900ms cubic-bezier(.2, .8, .2, 1) both;
}

.legenda { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.legenda span { font-size: 12px; color: #DCDCD4; display: flex; align-items: center; gap: 5px; }
.legenda i { width: 8px; height: 8px; border-radius: 2px; }

.macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.macro { display: flex; flex-direction: column; gap: 5px; }

/* Formulários */
.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario label, .campo { display: flex; flex-direction: column; gap: 6px; }
.formulario .hf-label, .campo .hf-label { color: var(--texto-secundario); }
.entrada, .formulario input:not([type="checkbox"]), .formulario select {
    min-height: 52px;
    width: 100%;
    min-width: 0;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: var(--branco);
    box-shadow: inset 0 0 0 2px var(--tinta);
    font-size: 16px;
    font-weight: 500;
    color: var(--tinta);
}
.entrada:focus-visible, .formulario input:focus-visible, .formulario select:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }
.grade-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.linha-formulario { display: flex; gap: 10px; align-items: flex-end; }
.linha-formulario > :first-child { flex: 1; min-width: 0; }

.busca {
    min-height: 52px;
    border-radius: 14px;
    background: var(--branco);
    box-shadow: inset 0 0 0 2px var(--tinta);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}
.busca input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; font-weight: 500; color: var(--tinta); }

.erro { color: var(--erro); font-weight: 600; margin: 0; }
.sucesso { color: var(--conquista); font-weight: 600; margin: 0; }
.aviso { font-size: 13px; line-height: 1.4; margin: 0; }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { min-height: 56px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--linha-suave); }
.lista > li:first-child { border-top: none; }
.lista .nome { font-size: 15px; font-weight: 600; }
.lista .detalhe { font-size: 13px; color: var(--texto-secundario); }
.item-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.item-botao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 6px 0;
    background: none;
    border: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.selo { font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.selo-taco { background: var(--conquista-fundo); color: #135E3C; }
.selo-manual { background: var(--brasa-claro); color: #6B2A0C; }

/* Diário */
.refeicao { background: var(--branco); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linha); overflow: hidden; }
.refeicao.vazia { box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta); }
.refeicao-cabecalho { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.refeicao-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--conquista); flex-shrink: 0; }
.refeicao.vazia .refeicao-ponto { background: var(--brasa); }
.refeicao-alternar {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    color: var(--tinta);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
}
.refeicao-alternar .resumo { font-size: 13px; color: var(--texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refeicao-itens { padding: 0 16px 6px 34px; animation: hf-abrir 220ms ease both; }
.refeicao-acoes { display: flex; gap: 8px; padding: 0 14px 14px 34px; flex-wrap: wrap; }
.editar-item { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 14px; width: 100%; }
.editar-item .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.editar-item .hf-btn { min-height: 44px; font-size: 15px; padding: 0 14px; }

/* Barra fixa de confirmação (adicionar alimento) */
.barra-acao {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    padding: 12px 18px calc(22px + env(safe-area-inset-bottom));
    background: var(--branco);
    border-top: 2px solid var(--tinta);
    display: flex;
    align-items: center;
    gap: 12px;
}
.barra-acao > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* Folha de confirmação */
.veu { position: fixed; inset: 0; z-index: 20; background: rgba(18, 18, 18, 0.6); animation: hf-fade 200ms ease both; }
.folha {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 21;
    max-width: 480px;
    margin: 0 auto;
    padding: 28px 22px calc(26px + env(safe-area-inset-bottom));
    background: var(--branco);
    border-radius: 28px 28px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    animation: hf-subir 320ms cubic-bezier(.2, .8, .2, 1) both;
}
.folha .check {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--conquista);
    color: var(--branco);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 0 #0E4F31;
    animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both;
}

/* Conta do déficit: TMB × atividade − déficit = meta */
.conta-deficit { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--papel); display: flex; flex-direction: column; }
.conta-deficit li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--linha); }
.conta-deficit li:first-child { border-top: none; }
.conta-deficit li strong { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; font-size: 18px; white-space: nowrap; }
.conta-deficit li.subtrai strong { color: var(--erro); }
.conta-deficit li.total { background: var(--tinta); color: var(--branco); border-radius: 0 0 14px 14px; }
.conta-deficit li.total strong { font-size: 22px; }

/* Lista de configurações do perfil (prancha Perfil) */
.lista-config { background: var(--branco); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linha); padding: 0 10px 0 12px; display: flex; flex-direction: column; }
.linha-config {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--linha-suave);
    background: none;
    color: var(--tinta);
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.lista-config > .linha-config:last-child { border-bottom: none; }
.linha-config-icone { width: 36px; height: 36px; border-radius: 11px; background: var(--papel); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.linha-config-nome { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
.linha-config-valor { font-size: 13px; color: var(--texto-secundario); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-config.perigo { color: var(--erro); }
.linha-config.perigo .linha-config-icone { background: #FBE3DC; }

/* Páginas de texto do perfil (privacidade, legal, fontes, suporte) */
.texto-pagina { display: flex; flex-direction: column; gap: 8px; }
.texto-pagina h2 { margin: 0; }
.texto-pagina p, .texto-pagina li { margin: 0; font-size: 15px; line-height: 1.5; }
.texto-pagina ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.texto-pagina .fonte { font-size: 14px; line-height: 1.45; }
.status-recurso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Campo de senha com olho */
.campo-senha-rotulo { display: flex; flex-direction: column; gap: 6px; }
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 54px; }
.alternar-senha {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tinta); /* os campos são brancos também na tela escura de entrada */
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.alternar-senha:hover, .alternar-senha[aria-pressed="true"] { opacity: 1; }

/* Filtro de exercícios por grupo muscular (linha rolável) e escolha de grupos secundários */
.filtro-grupos { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.chips-grupos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: var(--branco);
    color: var(--tinta);
    box-shadow: inset 0 0 0 1.5px #C9C9C1;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.chip-filtro[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }
.chip-filtro:disabled { opacity: 0.4; cursor: default; }
.chip-filtro .contagem { margin-left: 6px; font-size: 13px; opacity: 0.65; }
.item-botao.escolhido .nome { color: var(--conquista); }

/* Calendário (seletor de data em folha) */
.folha.calendario { align-items: stretch; text-align: left; gap: 14px; outline: none; }
.calendario-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendario-topo h2 { flex: 1; text-align: center; margin: 0; }
.calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario-semana { text-align: center; color: var(--texto-secundario); min-height: 24px; display: flex; align-items: center; justify-content: center; }
.calendario-dia {
    min-height: 44px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--tinta);
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 800;
    font-size: 20px;
    cursor: pointer;
}
.calendario-dia:hover:not(:disabled):not(.escolhido) { background: var(--papel); }
.calendario-dia:disabled { color: #B5B5AD; cursor: default; }
.calendario-dia.hoje { box-shadow: inset 0 0 0 2px var(--brasa); }
.calendario-dia.escolhido { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }
.calendario-dia.escolhido.hoje { box-shadow: inset 0 0 0 2px var(--brasa), 0 3px 0 #000; }

/* Data do cabeçalho da dieta: abre o calendário */
.titulo-data {
    background: none;
    border: none;
    padding: 4px 10px;
    min-height: 44px;
    border-radius: 12px;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    font-style: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}
.titulo-data:hover { background: var(--branco); }
.titulo-data .dia { font-size: 30px; line-height: 1; }
.titulo-data .hf-label { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }

/* Tela de entrada (escura) */
.tela-entrada {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--tinta);
    color: var(--branco);
    position: relative;
    overflow: hidden;
}
.tela-entrada .fundo-logo { position: absolute; right: -230px; top: 80px; width: 520px; height: 520px; pointer-events: none; }
.tela-entrada main {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 24px calc(30px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tela-entrada h1 { font-size: 66px; line-height: 0.92; letter-spacing: -0.02em; margin-top: 72px; }
.tela-entrada .chamada { margin: 0; max-width: 270px; font-size: 17px; line-height: 1.45; color: #DCDCD4; }
.tela-entrada .formulario { margin-top: auto; }
.tela-entrada .formulario .hf-label { color: #BDBDB5; }
.tela-entrada .formulario input { box-shadow: none; }
.tela-entrada .erro { color: #FF9B78; }
.tela-entrada .link-texto { color: var(--branco); justify-content: center; }

.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marca { font-style: italic; letter-spacing: -0.03em; }
.marca .i { position: relative; display: inline-block; }
.marca .pingo { position: absolute; left: 0.075em; top: 0.09em; width: 0.19em; height: 0.19em; border-radius: 50%; background: var(--brasa); }

.avatar {
    min-width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--branco);
    box-shadow: inset 0 0 0 1.5px var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    color: var(--tinta);
}
.avatar.grande { width: 56px; height: 56px; box-shadow: none; font-size: 22px; background: var(--branco); color: var(--tinta); }

.em-construcao { display: flex; flex-direction: column; gap: 6px; border: 2px dashed #C9C9C1; background: transparent; }

/* Animações (D07) — respeitam "reduzir movimento" */
@keyframes hf-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hf-abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hf-subir { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes hf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hf-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Blazor */
#blazor-error-ui {
    background: var(--brasa-claro);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--linha); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: var(--brasa);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-family: 'Barlow Condensed', system-ui, sans-serif;
    font-weight: 800;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Carregando"); }

/* Onboarding (pranchas Objetivo, DadosCorporais, NivelAtividade, Onboarding) */
.passos { display: flex; align-items: center; gap: 12px; }
.passos-barra { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.passos-barra span { height: 10px; border-radius: 5px; background: #DCDCD4; }
.passos-barra span.feito { background: var(--brasa); }
.onboarding h1 { font-size: 44px; line-height: 0.95; }
.onboarding .introducao { display: flex; flex-direction: column; gap: 10px; }
.onboarding .introducao p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--texto-secundario); }
.onboarding .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.onboarding .rodape .hf-btn { min-height: 58px; font-size: 20px; }

.opcoes { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 12px; }
.opcao {
    min-height: 66px;
    padding: 12px 16px;
    border: none;
    border-radius: 18px;
    background: var(--branco);
    color: var(--tinta);
    box-shadow: inset 0 0 0 2px var(--tinta), 0 4px 0 var(--tinta);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    font: inherit;
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.opcao:active { transform: translateY(3px); }
.opcao[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 4px 0 #000; }
.opcao .texto { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.opcao .descricao { font-size: 14px; color: var(--texto-secundario); }
.opcao[aria-pressed="true"] .descricao { color: #DCDCD4; }
.opcao .icone-objetivo {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: var(--papel); color: var(--tinta);
    display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.opcao[aria-pressed="true"] .icone-objetivo { background: var(--brasa); }
.niveis { display: flex; align-items: flex-end; gap: 3px; height: 26px; width: 36px; flex-shrink: 0; }
.niveis i { width: 5px; border-radius: 2px; background: #DCDCD4; }
.niveis i.ativo { background: var(--tinta); }
.opcao[aria-pressed="true"] .niveis i { background: #3A3A35; }
.opcao[aria-pressed="true"] .niveis i.ativo { background: var(--brasa); }

.escolha-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.escolha-dupla .hf-btn { min-height: 50px; background: var(--branco); box-shadow: inset 0 0 0 2px var(--tinta), 0 4px 0 var(--tinta); }
.escolha-dupla .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 4px 0 #000; }
.formulario .campo-grande input:not([type="checkbox"]) { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; font-size: 30px; min-height: 58px; }

.formulario label.consentimento, .consentimento {
    flex-direction: row;
    background: var(--branco);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--linha);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.consentimento input { width: 24px; height: 24px; margin: 0; accent-color: var(--tinta); flex-shrink: 0; }
.consentimento strong { font-size: 15px; display: block; margin-bottom: 4px; }
.consentimento span span { font-size: 13px; line-height: 1.45; color: var(--texto-secundario); }

.cartao-brasa { background: var(--brasa-claro); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cartao-brasa .hf-label { color: #6B2A0C; }
.cartao-brasa p { margin: 0; font-size: 14px; line-height: 1.45; color: #4A2210; }
.detalhes { background: var(--branco); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linha); padding: 2px 16px; }
.detalhes summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 700; cursor: pointer; }
.detalhes p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--texto-secundario); }

/* Toast de recompensa e chips (prancha Hoje) */
.toast {
    position: fixed;
    left: 18px;
    right: 18px;
    bottom: calc(var(--altura-barra) + 16px + env(safe-area-inset-bottom));
    z-index: 30;
    max-width: 444px;
    margin: 0 auto;
    min-height: 58px;
    border-radius: 16px;
    background: var(--tinta);
    color: var(--branco);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    animation: hf-subir 320ms cubic-bezier(.2, .8, .2, 1) both;
}
.toast-icone { width: 34px; height: 34px; border-radius: 50%; background: var(--brasa); color: var(--tinta); display: flex; align-items: center; justify-content: center; animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both; }
.toast-texto { flex: 1; font-size: 15px; font-weight: 600; }
.toast-xp { font-size: 24px; color: var(--brasa); animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both; }

.chip {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--tinta);
}
.chip-sequencia { background: var(--brasa-claro); }
.chip-sequencia svg { color: var(--brasa); }
.chip-xp { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.chip-perfil { padding: 0 12px 0 5px; gap: 5px; }
.chip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--branco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chip-perfil svg:not(.chip-avatar svg) { color: var(--brasa); }

.selo-xp { font-size: 22px; padding: 8px 14px; border-radius: 12px; background: var(--brasa); color: var(--tinta); animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) 150ms both; }
.selo-sequencia { min-height: 38px; padding: 0 14px; border-radius: 12px; background: var(--brasa-claro); display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) 260ms both; }
.selo-sequencia svg { color: var(--brasa); }

/* Tela Sequência */
.sequencia-topo { background: var(--brasa); padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; border-radius: 0 0 28px 28px; }
.sequencia-topo .botao-icone { background: var(--tinta); color: var(--branco); box-shadow: none; }
.sequencia-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; background: var(--tinta); border-radius: 16px; padding: 12px 10px; }
.sequencia-semana > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sequencia-semana .bolinha { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tinta); }
.bolinha.ativo { background: var(--brasa); }
.bolinha.protegido { background: #DCE8FB; color: #1E4FA8; }
.bolinha.perdido { background: #2E2E2A; }
.bolinha.pendente { box-shadow: inset 0 0 0 2px #5E5E58; }
.bolinha.hoje { outline: 3px solid var(--branco); outline-offset: -1px; }
.protetor-icone { width: 38px; height: 38px; border-radius: 12px; background: #DCE8FB; color: #1E4FA8; display: flex; align-items: center; justify-content: center; }
.protetor-icone.vazio { background: var(--linha-suave); color: #9E9E96; }
.chama-pulso { transform-origin: 50% 85%; animation: hf-pulso 1800ms ease-in-out infinite; }
@keyframes hf-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Meta de gordura (prancha MetaGordura) */
.blocos { display: flex; gap: 4px; }
.blocos > div { flex: 1; height: 14px; border-radius: 4px; background: #2E2E2A; overflow: hidden; }
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.indicadores > div { background: var(--branco); border-radius: 16px; border: 1px solid var(--linha); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.indicadores > div.destaque-brasa { background: var(--brasa-claro); border: none; }
.grafico-barras { height: 96px; display: flex; align-items: flex-end; gap: 6px; border-bottom: 2px solid var(--tinta); }
.grafico-barras > div { flex: 1; border-radius: 4px 4px 0 0; background: var(--tinta); transform-origin: bottom; animation: hf-crescer 600ms cubic-bezier(.2, .8, .2, 1) both; }
.grafico-barras > div.hoje { background: var(--brasa); }
.grafico-barras > div.superavit { background: var(--erro); }
.grafico-barras > div.lacuna { background: transparent; border: 1.5px dashed #C9C9C1; border-bottom: none; }
.grafico-legenda { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--texto-secundario); }
.alvos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.alvos .hf-btn { min-height: 46px; padding: 0 6px; font-size: 17px; background: var(--branco); box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta); }
.alvos .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }
@keyframes hf-crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Porção e lançamento manual (pranchas Porcao e CadastroManual) */
.selo-meu { background: #F1EDE4; color: #6B4E00; }
.escolha-medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.escolha-medidas .hf-btn, .atalhos .hf-btn {
    background: var(--branco);
    box-shadow: inset 0 0 0 2px var(--tinta), 0 3px 0 var(--tinta);
}
.escolha-medidas .hf-btn { min-height: 54px; padding: 0 12px; font-size: 16px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
.escolha-medidas .hf-btn .sub { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--texto-secundario); }
.escolha-medidas .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }
.escolha-medidas .hf-btn[aria-pressed="true"] .sub { color: #BDBDB5; }
.atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.atalhos .hf-btn { min-height: 42px; padding: 0 4px; font-size: 16px; box-shadow: inset 0 0 0 1.5px #C9C9C1; }
.atalhos .hf-btn[aria-pressed="true"] { background: var(--brasa-claro); }
.entrada-quantidade {
    width: 120px; min-height: 58px; border: none; border-radius: 14px; text-align: center;
    font-size: 40px; font-style: italic; background: var(--branco); box-shadow: inset 0 0 0 2px var(--tinta); color: var(--tinta);
}
.abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--tinta); }
.abas button {
    min-height: 42px; border: none; border-radius: 10px; background: transparent; color: #DCDCD4; cursor: pointer;
    font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase;
}
.abas button[aria-selected="true"] { background: var(--brasa); color: var(--tinta); }
.entrada-kcal {
    width: 130px; min-height: 58px; padding: 0 12px; border: none; border-radius: 14px; text-align: right;
    font-size: 34px; background: #FFF1EA; box-shadow: inset 0 0 0 2px var(--tinta); color: var(--tinta);
}
.macros-entrada { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.macros-entrada label { display: flex; flex-direction: column; gap: 5px; }
.macros-entrada .hf-label { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.macros-entrada i { width: 8px; height: 8px; border-radius: 2px; }
.macros-entrada input {
    width: 100%; min-width: 0; min-height: 46px; border: none; border-radius: 12px; text-align: center;
    font-size: 22px; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; color: var(--tinta);
}
.aviso-macros { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--brasa-claro); color: #4A2210; font-size: 14px; line-height: 1.4; }
.aviso-macros span { flex: 1; }
.aviso-macros .hf-btn { min-height: 40px; padding: 0 12px; font-size: 15px; flex-shrink: 0; }
.ok-macros { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--conquista-fundo); color: #0E4F31; font-size: 14px; }
.opcao-marcar { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.opcao-marcar input { width: 22px; height: 22px; margin: 0; accent-color: var(--tinta); flex-shrink: 0; }
.barra-acao .hf-btn:disabled:not(.hf-primario) { background: #DCDCD4; color: var(--texto-secundario); box-shadow: none; opacity: 1; }

/* Abas da busca (prancha AdicionarAlimento): pílulas que rolam de lado em telas estreitas. */
.abas-pilula { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.abas-pilula::-webkit-scrollbar { display: none; }
.abas-pilula button {
    min-height: 40px; padding: 0 14px; border: none; border-radius: 999px; flex-shrink: 0; cursor: pointer;
    background: var(--branco); color: var(--tinta); box-shadow: inset 0 0 0 1.5px #C9C9C1;
}
.abas-pilula button[aria-selected="true"] { background: var(--tinta); color: var(--branco); box-shadow: none; }

/* "Você costuma jantar · Minha janta padrão" */
.sugestao-agora { background: var(--brasa-claro); border-radius: 18px; padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px; }
.sugestao-agora .hf-label { color: #6B2A0C; }

.botao-icone:disabled { opacity: 0.4; }
.botao-favorito { color: var(--tinta); }
.botao-favorito[aria-pressed="true"] { color: var(--brasa); }
.salvar-refeicao { display: flex; gap: 8px; align-items: center; width: 100%; }
.salvar-refeicao input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: none; border-radius: 12px; font: inherit; font-size: 15px; background: var(--branco); box-shadow: inset 0 0 0 2px var(--tinta); color: var(--tinta); }

/* Código de barras digitado (prancha Camera, versão sem câmera da E1). */
.entrada-codigo { font-size: 28px !important; letter-spacing: 0.06em; text-align: center; }
.achado { display: flex; flex-direction: column; gap: 12px; }
.achado-icone { width: 44px; height: 44px; border-radius: 12px; background: var(--conquista-fundo); color: #135E3C; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.selo-off { background: #E8EEF8; color: #22416E; }

/* ---------- Treino (pranchas MeusTreinos, SessaoTreino, TreinoConcluido, HistoricoExercicio) ---------- */
.hf-ok { background: var(--conquista); color: var(--branco); box-shadow: 0 3px 0 #0E4F31; }
.hf-ok:active { transform: translateY(3px); box-shadow: none; }
.treino-andamento { text-decoration: none; color: var(--tinta); }
.semana-treino { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.semana-treino > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.semana-treino .dia { width: 34px; height: 34px; border-radius: 10px; box-sizing: border-box; background: var(--papel); box-shadow: inset 0 0 0 1.5px #DCDCD4; color: var(--branco); display: flex; align-items: center; justify-content: center; }
.semana-treino .dia.hoje { box-shadow: inset 0 0 0 2px var(--tinta); }
.semana-treino .dia.treinou { background: var(--conquista); box-shadow: none; }
.selo-xp-pequeno { font-size: 16px; padding: 4px 8px; border-radius: 8px; background: var(--brasa); color: var(--tinta); }
.letra-treino { width: 40px; height: 40px; border-radius: 11px; background: var(--papel); color: var(--tinta); font-size: 24px; font-style: italic; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.letra-treino.proximo { background: var(--tinta); color: var(--brasa); }
.letra-treino.grande { width: 64px; height: 64px; border-radius: 16px; background: var(--brasa); color: var(--tinta); font-size: 44px; }
.linha-recorde { min-height: 52px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); border-top: 1px solid var(--linha-suave); }
.lista-plano { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-plano > li { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.plano-campos { display: grid; grid-template-columns: 0.8fr 1.5fr 1fr 1.1fr; gap: 6px; }
.plano-campos label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plano-campos .hf-label { font-size: 11px; color: var(--texto-secundario); }
.plano-campos input, .plano-campos select { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; border: none; border-radius: 10px; text-align: center; font-size: 18px; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; color: var(--tinta); }
.plano-campos select { font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; padding: 0 2px; }
.plano-campos .faixa { display: flex; align-items: center; gap: 2px; }
.adicionar-tracejado { border: 2px dashed #C9C9C1 !important; box-shadow: none !important; background: transparent !important; color: var(--tinta); border-radius: 12px; }
.progresso-exercicios { display: grid; gap: 5px; }
.progresso-exercicios button { height: 8px; border-radius: 4px; border: none; padding: 0; background: #DCDCD4; cursor: pointer; }
.progresso-exercicios button.feito { background: var(--conquista); }
.progresso-exercicios button.atual { background: var(--tinta); }
.exercicio-atual { background: var(--branco); border-radius: 20px; box-shadow: inset 0 0 0 2px var(--tinta); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.grade-series { display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px 56px 48px; gap: 8px; align-items: center; }
.cabecalho-series .hf-label { font-size: 12px; color: var(--texto-secundario); }
.linha-serie { min-height: 54px; margin: 0 -8px; padding: 0 8px; border-radius: 12px; }
.linha-serie.proxima { background: #FFF1EA; }
.linha-serie.feita { background: var(--conquista-fundo); }
.linha-serie .anterior { font-size: 14px; font-weight: 600; color: var(--texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-serie input { width: 100%; box-sizing: border-box; height: 46px; border-radius: 10px; border: none; box-shadow: inset 0 0 0 1.5px #C9C9C1; background: var(--branco); text-align: center; font-size: 22px; color: var(--tinta); -moz-appearance: textfield; }
.linha-serie input::-webkit-outer-spin-button, .linha-serie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.marcar-serie { width: 48px; height: 46px; border-radius: 12px; border: none; background: var(--branco); color: #9E9E96; box-shadow: inset 0 0 0 2px #C9C9C1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.marcar-serie[aria-pressed="true"] { background: var(--conquista); color: var(--branco); box-shadow: 0 3px 0 #0E4F31; animation: hf-pop 200ms cubic-bezier(.3, 1.6, .5, 1) both; }
.descanso { background: var(--tinta); color: var(--branco); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.descanso .hf-label { color: #BDBDB5; }
.descanso .relogio { font-size: 64px; font-style: italic; line-height: 1; }
.descanso .relogio.zerado { color: var(--brasa); }
.descanso .trilho { background: #2E2E2A; }
.descanso .preenchimento { background: var(--brasa); }
.botao-descanso { min-height: 46px; background: #2A2A26; color: var(--branco); font-size: 17px; box-shadow: none; }
.a-seguir { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; width: 100%; }
.check-concluido { width: 76px; height: 76px; border-radius: 50%; background: var(--conquista); color: var(--branco); display: flex; align-items: center; justify-content: center; animation: hf-pop 380ms cubic-bezier(.3, 1.6, .5, 1) both; }
.resumo-treino { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.resumo-treino > div { background: var(--branco); border-radius: 16px; box-shadow: inset 0 0 0 1px #E2E2DC; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.resumo-treino .hf-label { font-size: 12px; color: var(--texto-secundario); }
.resumo-treino .hf-num { font-size: 26px; }
.resumo-treino small { font-size: 14px; }
.recorde-novo { background: var(--brasa-claro); border-radius: 18px; padding: 14px; display: flex; gap: 12px; align-items: center; color: #4A2210; }
.recorde-novo .hf-label { color: #6B2A0C; }
.recorde-icone { width: 46px; height: 46px; border-radius: 14px; background: var(--brasa); color: var(--tinta); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.linha-xp { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; }
.linha-xp .hf-num { font-size: 20px; }
.linha-xp.total { border-top: 1px solid var(--linha-suave); padding-top: 10px; }
.linha-xp.total .hf-num { color: var(--brasa); font-size: 24px; }
.abas-pilula.escuras button { background: #2A2A26; color: #DCDCD4; box-shadow: none; }
.abas-pilula.escuras button[aria-selected="true"] { background: var(--brasa); color: var(--tinta); }
.sessao-historico { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linha-suave); }
.sessao-historico:first-child { border-top: none; }
.escolha-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.escolha-tipos .hf-btn { min-height: 44px; padding: 0 4px; font-size: 15px; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; color: var(--tinta); }
.escolha-tipos .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }

/* ---------- Água (prancha Saúde) ---------- */
.card-agua { display: flex; flex-direction: column; gap: 12px; }
.copos { display: flex; gap: 4px; }
.copos > div { flex: 1; height: 26px; border-radius: 6px; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; transition: background 300ms ease; }
.copos > div.cheio { background: var(--tinta); box-shadow: none; }
.botoes-agua { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.botoes-agua .hf-btn { min-height: 46px; padding: 0 6px; font-size: 17px; }

/* ---------- Desafios (pranchas Desafio, CheckIn, Convite, CriarDesafio) ---------- */
.avatar { border-radius: 50%; color: var(--branco); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: 'Barlow Condensed', system-ui, sans-serif; font-weight: 800; letter-spacing: 0.02em; }
.avatares-empilhados { display: flex; }
.avatares-empilhados .avatar { box-shadow: 0 0 0 2px var(--branco); }
.avatares-empilhados .avatar + .avatar { margin-left: -8px; }
.grupo-card { gap: 6px; }
.convite { gap: 12px; }
.convite .codigo { font-size: 56px; font-style: italic; letter-spacing: 0.08em; color: var(--brasa); line-height: 1; }
.link-convite { display: flex; align-items: center; gap: 8px; background: #2A2A26; border-radius: 12px; padding: 6px 6px 6px 12px; }
.link-convite span { flex: 1; min-width: 0; font-size: 13px; color: #DCDCD4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-convite .hf-btn { min-height: 38px; padding: 0 12px; font-size: 14px; }
.convite-previa { display: flex; flex-direction: column; gap: 12px; }
.selos-convite { display: flex; gap: 6px; flex-wrap: wrap; }
.selos-convite span { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--papel); }
.escolha-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.escolha-modos .hf-btn { min-height: 62px; flex-direction: column; gap: 2px; padding: 6px; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; color: var(--tinta); font-size: 16px; }
.escolha-modos .hf-btn .sub { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--texto-secundario); }
.escolha-modos .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: 0 3px 0 #000; }
.escolha-modos .hf-btn[aria-pressed="true"] .sub { color: #DCDCD4; }
.escolha-modos .hf-btn:disabled { opacity: 0.55; }
.regras { display: flex; flex-direction: column; padding: 4px 16px; }
.regras > div { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; border-top: 1px solid var(--linha-suave); }
.regras > div:first-child { border-top: none; }
.chave { width: 50px; height: 30px; border-radius: 999px; border: none; padding: 0; background: #C9C9C1; position: relative; flex-shrink: 0; cursor: pointer; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--branco); transition: transform 150ms ease; }
.chave.ligada { background: var(--conquista); }
.chave.ligada::after { transform: translateX(20px); }
.chave.travada { opacity: 0.6; cursor: default; }
.desafio-topo { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ranking { list-style: none; margin: 0; padding: 4px 12px; }
.ranking li { min-height: 62px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--linha-suave); }
.ranking li:first-child { border-top: none; }
.ranking li.eu { background: #FFF1EA; margin: 0 -12px; padding: 0 12px; }
.ranking .posicao { width: 24px; font-size: 24px; font-style: italic; text-align: center; }
.checkin { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.checkin.invalidado .foto-checkin { opacity: 0.4; filter: grayscale(1); }
.foto-checkin { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--papel); }
.reacoes { display: flex; align-items: center; gap: 8px; }
.reacao { min-height: 40px; min-width: 52px; padding: 0 10px; border-radius: 999px; border: none; background: var(--papel); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.reacao .hf-num { font-size: 16px; }
.reacao[aria-pressed="true"] { background: var(--brasa-claro); box-shadow: inset 0 0 0 2px var(--brasa); }
.contestacao { display: flex; gap: 10px; align-items: flex-start; padding-top: 10px; border-top: 1px solid rgba(74, 34, 16, 0.2); }
.contestacao img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.acao-checkin { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 9; padding: 10px 18px; display: flex;
    background: linear-gradient(to top, var(--papel) 70%, transparent); }
.acao-checkin .selo-xp-pequeno { font-size: 14px; margin-left: 4px; }
.camera { position: relative; border-radius: 22px; overflow: hidden; background: #262622; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; }
.camera video, .camera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera .disparador { position: relative; margin-bottom: 18px; width: 78px; height: 78px; border-radius: 50%; border: 5px solid var(--branco); background: var(--brasa); cursor: pointer; }
.camera .disparador:disabled { opacity: 0.5; }
.camera .selo-ao-vivo { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: var(--branco); }
.camera .refazer { position: absolute; bottom: 12px; right: 12px; min-height: 40px; padding: 0 14px; font-size: 15px; }
.camera-aviso { position: relative; margin: auto 18px; display: flex; flex-direction: column; gap: 8px; color: var(--branco); text-align: center; align-items: center; font-size: 14px; line-height: 1.4; }
.camera-aviso strong { font-size: 18px; }
.opcao-vinculo { min-height: 56px; justify-content: flex-start; gap: 12px; padding: 0 14px; text-align: left; background: var(--branco); box-shadow: inset 0 0 0 1.5px #C9C9C1; color: var(--tinta); font-size: 15px; }
.opcao-vinculo .sub { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--texto-secundario); }
.opcao-vinculo .marcador { width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px #C9C9C1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opcao-vinculo[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tinta); }
.opcao-vinculo[aria-pressed="true"] .marcador { background: var(--conquista); color: var(--branco); box-shadow: none; }
.posicao-publicada { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--brasa-claro); border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.4; color: #4A2210; }
.posicao-publicada .hf-num { font-size: 40px; font-style: italic; color: var(--tinta); }

.atalhos-treino { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atalhos-treino .hf-btn { min-height: 46px; font-size: 15px; padding: 0 8px; }

.escolha-deficit .atalhos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.escolha-deficit .atalhos .hf-btn { flex-direction: column; min-height: 56px; gap: 0; line-height: 1.1; }
.escolha-deficit .atalhos .hf-btn .sub { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--texto-secundario); }
.escolha-deficit .atalhos .hf-btn[aria-pressed="true"] { background: var(--tinta); color: var(--branco); }
.escolha-deficit .atalhos .hf-btn[aria-pressed="true"] .sub { color: #DCDCD4; }
.resultado-deficit { display: flex; flex-direction: column; gap: 2px; font-size: 14px; background: var(--papel); border-radius: 12px; padding: 10px 12px; }

/* Registro rápido (prancha RegistroRapido) */
.ladrilhos.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ladrilho.pequeno { min-height: 62px; gap: 2px; }
.ladrilho.pequeno .hf-label { font-size: 12px; }
.ladrilho:disabled { opacity: 0.5; }