/* layout.css — shells (público, app, foco, admin), cabeçalho em dois níveis com menus grandes, faixa do plano Grátis,
   navegação inferior, rail da TV, sidebar do admin, contêineres e grades (C §3.3, §3.10, §6; REQUISITOS 23/09). */

@layer layout {
  /* ------------------------------------------------------------------ contêineres e grades */
  .conteudo { display: block; padding: var(--sp-6) var(--gutter) var(--sp-12); min-height: 60vh; outline: none; }
  .largura-leitura { max-width: var(--w-leitura); margin-inline: auto; }
  .largura-conteudo { max-width: var(--w-conteudo); margin-inline: auto; }
  .largura-larga { max-width: var(--w-larga); margin-inline: auto; }
  .grade { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade > * { grid-column: 1 / -1; min-width: 0; }
  @media (min-width: 768px) {
    .grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); }
    .grade > .md-3 { grid-column: span 3; } .grade > .md-2 { grid-column: span 2; } .grade > .md-4 { grid-column: span 4; }
  }
  @media (min-width: 1024px) {
    .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-6); }
    .grade > .lg-3 { grid-column: span 3; } .grade > .lg-4 { grid-column: span 4; } .grade > .lg-5 { grid-column: span 5; }
    .grade > .lg-6 { grid-column: span 6; } .grade > .lg-7 { grid-column: span 7; } .grade > .lg-8 { grid-column: span 8; }
    .grade > .lg-12 { grid-column: 1 / -1; }
  }
  .grade-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-auto { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .secao { margin-top: var(--sp-8); }
  .secao__cabeca { display: flex; align-items: end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
  .secao__titulo { font-size: var(--fs-lg); }
  .secao__sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--sp-1); }
  .titulo-pagina { font-size: var(--fs-xl); }
  .titulo-pagina + .subtitulo-pagina { margin-top: var(--sp-2); color: var(--text-2); max-width: 64ch; }

  /* ------------------------------------------------------------------ faixa do plano Grátis (lembrete vermelho elegante) */
  .faixa-plano {
    position: relative; z-index: calc(var(--z-nav) + 1);
    display: flex; align-items: center; gap: var(--sp-3); min-height: var(--faixa-plano);
    padding: var(--sp-2) var(--gutter);
    background:
      radial-gradient(120% 180% at 0% 50%, color-mix(in oklab, var(--danger) 16%, transparent), transparent 60%),
      var(--danger-soft);
    color: var(--text);
    border-bottom: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
    font-size: var(--fs-sm);
    animation: faixa-entra var(--dur-3) var(--ease-out) both;
  }
  .faixa-plano__icone { color: var(--danger-strong); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); background: color-mix(in oklab, var(--danger) 14%, var(--surface)); flex: none; }
  .faixa-plano__texto { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; }
  .faixa-plano__texto > span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .faixa-plano__texto strong, .faixa-plano__mini strong { color: var(--danger-strong); font-weight: 800; white-space: nowrap; }
  .faixa-plano__cota { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text-2); font-weight: 600; flex: none; white-space: nowrap; }
  .faixa-plano__barra { width: 96px; height: 6px; flex: none; }
  .faixa-plano__acao {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4);
    border-radius: var(--r-full); background: var(--danger-strong); color: var(--surface); font-weight: 700; font-size: var(--fs-sm);
    text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--danger) 70%, transparent);
    transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  @media (pointer: coarse) { .faixa-plano__acao { min-height: var(--alvo-min); } }
  /* Fundo --danger-strong (M26/axe 23/09: --surface sobre --danger ficava no limite do 4,5:1 no claro durante a entrada). */
  .faixa-plano__acao:hover { background: color-mix(in oklab, var(--danger-strong) 86%, var(--text)); }
  .faixa-plano__acao:active { transform: translateY(1px); }
  .faixa-plano__fechar { flex: none; display: grid; place-items: center; width: var(--alvo-min); height: var(--alvo-min); margin-right: calc(var(--sp-2) * -1); border-radius: var(--r-full); color: var(--text-2); }
  .faixa-plano__fechar:hover { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--text); }
  .faixa-plano[data-estado="minimizada"] { display: none; }
  @media (max-width: 767.98px) {
    .faixa-plano { gap: var(--sp-2); padding-block: var(--sp-2); }
    .faixa-plano__icone { display: none; }
    .faixa-plano__barra { width: 64px; }
    .faixa-plano__acao { min-height: var(--alvo-min); padding: 0 var(--sp-3); }
    .faixa-plano__frase-longa { display: none; }
    .faixa-plano__cota-texto-longo { display: none; }
  }
  @media (max-width: 1279.98px) { .faixa-plano__frase-longa { display: none; } }
  @keyframes faixa-entra { from { opacity: 0; transform: translateY(-6px); } }

  /* ------------------------------------------------------------------ cabeçalho do app: nível 1 (marca, busca, ações, conta) */
  .cabecalho { position: relative; z-index: calc(var(--z-nav) + 2); background: var(--surface); border-bottom: 1px solid var(--border); }
  .cabecalho__barra {
    display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar);
    padding: 0 var(--gutter); max-width: var(--w-larga); margin-inline: auto;
  }
  .marca { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); color: var(--text); text-decoration: none; flex: none; border-radius: var(--r-md); min-height: var(--alvo-min); min-width: var(--alvo-min); }
  .marca__icone { width: 36px; height: 36px; border-radius: var(--r-md); box-shadow: 0 6px 14px -8px color-mix(in oklab, var(--marca-2) 80%, transparent); transition: transform var(--dur-3) var(--ease-spring); }
  .marca:hover .marca__icone { transform: rotate(-6deg) scale(1.04); }
  .marca__nome { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; white-space: nowrap; }
  .marca__nome em { font-style: normal; color: var(--accent-text); }
  .cabecalho__acoes { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; min-width: 0; }
  .busca-gatilho {
    flex: 1 1 360px; max-width: 460px; margin-inline: auto; display: flex; align-items: center; gap: var(--sp-3);
    height: var(--alvo-min); padding: 0 var(--sp-2) 0 var(--sp-4); border-radius: var(--r-full);
    background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); text-align: left; font-size: var(--fs-base);
    transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .busca-gatilho:hover { border-color: var(--accent-border); background: var(--surface); box-shadow: var(--sh-1); }
  .busca-gatilho__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .busca-gatilho__atalho { display: inline-flex; gap: var(--sp-1); }

  /* Nível 2: menus principais grandes (≥ 16 px, alvo ≥ 48 px), aproveitando a largura (REQUISITOS 23/09). */
  .nav-principal {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .nav-principal__lista { display: flex; align-items: stretch; gap: var(--sp-1); max-width: var(--w-larga); margin-inline: auto; padding: 0 var(--gutter); }
  .nav-item {
    position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 52px; padding: 0 var(--sp-4); border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--text-2); font-size: var(--fs-nav); font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .nav-item .i { width: 1.25rem; height: 1.25rem; opacity: .85; }
  .nav-item::after {
    content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 3px; border-radius: var(--r-full) var(--r-full) 0 0;
    background: var(--accent); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out);
  }
  .nav-item:hover { color: var(--text); background: var(--surface-2); }
  .nav-item[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
  .nav-item[aria-current="page"] .i { opacity: 1; }
  .nav-item[aria-current="page"]::after { transform: scaleX(1); }
  .nav-item__selo { margin-left: var(--sp-1); }
  .nav-principal__mais { position: relative; margin-left: auto; display: flex; }
  .nav-principal__mais > .nav-item { border: 0; }
  .nav-principal__cota { display: none; align-items: center; gap: var(--sp-2); margin-left: var(--sp-2); color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
  @media (min-width: 1440px) { .nav-principal__cota { display: inline-flex; } }
  @media (min-width: 1024px) and (max-width: 1279.98px) { .nav-item { padding: 0 var(--sp-3); } .nav-item--sec { display: none; } }
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .nav-principal__lista { overflow-x: auto; scrollbar-width: none; }
    .nav-principal__lista::-webkit-scrollbar { display: none; }
    .nav-item { padding: 0 var(--sp-3); }
    .nav-item--sec { display: none; }
    .busca-gatilho__texto, .busca-gatilho__atalho { display: none; }
    .busca-gatilho { flex: none; width: var(--alvo-min); padding: 0; justify-content: center; margin-inline: auto 0; }
  }

  /* ------------------------------------------------------------------ conta: avatar + nome + pílula do plano (sempre visível) */
  .conta { position: relative; }
  .conta__gatilho {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--alvo-min);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border-radius: var(--r-full);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .conta__gatilho:hover, .conta__gatilho[aria-expanded="true"] { border-color: var(--accent-border); box-shadow: var(--sh-1); }
  .conta__textos { display: grid; line-height: 1.15; text-align: left; }
  .conta__nome { font-weight: 700; font-size: var(--fs-sm); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Até 1279 px o gatilho fica só com avatar + pílula do plano (o nome aparece no menu); evita rolagem lateral a 1024 px. */
  @media (max-width: 1279.98px) { .conta__nome { display: none; } .busca-gatilho { min-width: var(--alvo-min); } }
  .conta__chevron { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
  .conta__gatilho[aria-expanded="true"] .conta__chevron { transform: rotate(180deg); }

  /* ------------------------------------------------------------------ corpo do app, rodapé e navegação inferior */
  .app-corpo { display: flex; min-width: 0; }
  .app-corpo > .conteudo { flex: 1 1 auto; min-width: 0; }
  .rodape-app { padding: var(--sp-8) var(--gutter) calc(var(--bottomnav) + var(--sp-8)); color: var(--text-3); font-size: var(--fs-sm); border-top: 1px solid var(--border); }
  .rodape-app__interno { max-width: var(--w-larga); margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; }
  .rodape-app a { color: var(--text-2); text-decoration: none; }
  .rodape-app a:hover { color: var(--accent-text); text-decoration: underline; }
  .rodape-app__botao { min-height: var(--alvo-min); color: var(--text-2); }
  .rodape-app__botao:hover { color: var(--accent-text); text-decoration: underline; }
  @media (min-width: 768px) { .rodape-app { padding-bottom: var(--sp-8); } }

  .bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); width: 100%; max-width: 100vw; box-sizing: border-box;
    /* Colunas iguais que podem encolher (RD 23/09: a 390 px o "Mais" passava da borda no checkout). */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: var(--sp-1) var(--sp-1) env(safe-area-inset-bottom, 0px);
    background: color-mix(in oklab, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--border);
  }
  .bottom-nav__item {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; min-width: 0;
    color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; border-radius: var(--r-lg);
  }
  .bottom-nav__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav__icone { display: grid; place-items: center; width: min(56px, 100%); height: 30px; border-radius: var(--r-full); transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
  .bottom-nav__icone .i { width: 22px; height: 22px; }
  .bottom-nav__item[aria-current="page"] { color: var(--accent-text); font-weight: 700; }
  .bottom-nav__item[aria-current="page"] .bottom-nav__icone { background: var(--accent-soft); }
  .bottom-nav__item:active .bottom-nav__icone { transform: scale(.94); }

  /* Pequeno (< 768): cabeçalho compacto + navegação inferior; menus principais e busca larga somem. */
  @media (max-width: 767.98px) {
    .cabecalho__barra { gap: var(--sp-2); }
    .marca__icone { width: 32px; height: 32px; }
    .marca__nome { font-size: 1rem; }
    .nav-principal, .busca-gatilho { display: none; }
    .conta__nome { display: none; }
    .conta__gatilho { gap: var(--sp-1); padding-right: var(--sp-1); }
    .conta__chevron { display: none; }
  }
  @media (max-width: 479.98px) { .cabecalho .marca__nome { display: none; } }
  @media (min-width: 768px) { .bottom-nav { display: none; } }
  /* Celular (24/09): rótulos da barra de abas no tamanho dos apps (11 px) para "Desempenho" caber sem reticências; menu da
     conta: ver componentes.css (a camada dos componentes vence esta). */
  @media (max-width: 767.98px) {
    .bottom-nav__item { font-size: .6875rem; letter-spacing: -0.005em; gap: 3px; }
    /* Sem reticências: o rótulo pode passar 1–2 px da coluna (as vizinhas têm folga) em vez de virar "Desempen…". */
    .bottom-nav__item > span:last-child { overflow: visible; text-overflow: clip; max-width: none; }
    .faixa-plano__cota { font-size: var(--fs-sm); }
    .faixa-plano__acao { flex: none; }
  }
  .rodape-publico .marca__nome { white-space: normal; }


  /* ------------------------------------------------------------------ layout público (landing, entrar, planos) */
  .topo-publico {
    position: sticky; top: 0; z-index: var(--z-nav);
    transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    border-bottom: 1px solid transparent;
  }
  .topo-publico[data-rolou="sim"] {
    background: var(--vidro); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom-color: var(--border);
  }
  .topo-publico__barra { display: flex; align-items: center; gap: var(--sp-4); height: 72px; padding: 0 var(--gutter); max-width: var(--w-larga); margin-inline: auto; }
  .topo-publico__links { display: flex; gap: var(--sp-1); margin-left: var(--sp-6); }
  .topo-publico__links a { display: inline-flex; align-items: center; min-height: var(--alvo-min); padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--text-2); font-weight: 600; font-size: var(--fs-nav); text-decoration: none; }
  .topo-publico__links a:hover { color: var(--text); background: var(--surface-2); }
  .topo-publico__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
  @media (max-width: 1023.98px) { .topo-publico__links { display: none; } }
  .rodape-publico { margin-top: var(--sp-16); padding: var(--sp-12) var(--gutter) var(--sp-10); border-top: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); }
  .rodape-publico__interno { max-width: var(--w-larga); margin-inline: auto; display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .rodape-publico h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: var(--sp-3); }
  .rodape-publico ul { display: grid; gap: var(--sp-2); }
  .rodape-publico a { color: var(--text-2); text-decoration: none; }
  .rodape-publico a:hover { color: var(--accent-text); text-decoration: underline; }
  .rodape-publico__base { max-width: var(--w-larga); margin: var(--sp-10) auto 0; padding-top: var(--sp-6); border-top: 1px solid var(--border); color: var(--text-3); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; }

  /* ------------------------------------------------------------------ layout foco (prova, editor, modo foco)
     Decisão do Roger (23/09 ~22h30): o menu principal fica SEMPRE visível, inclusive na prova oficial. O foco é o menu
     COMPACTO numa única barra fixa com a altura --topbar (os sticky das telas usam top: var(--topbar)): marca · menus
     (ícones; rótulos só a partir de 1760 px) · "Mais" · título · ações da tela · conta com a pílula do plano. Abaixo de
     768 px os menus vão para a navegação inferior (como no app); na TV, para o rail. */
  .barra-foco {
    position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--topbar); padding: var(--sp-1) var(--gutter);
    background: var(--vidro); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
  }
  .barra-foco > .marca { min-width: var(--alvo-min); }
  .barra-foco .marca__icone { width: 32px; height: 32px; }
  .barra-foco__nav { flex: none; min-width: 0; }
  .barra-foco__lista { display: flex; align-items: center; gap: 2px; }
  .barra-foco__mais { position: relative; }
  .nav-foco {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-width: var(--alvo-min); min-height: var(--alvo-min); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-md);
    background: transparent; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .nav-foco .i { width: 1.25rem; height: 1.25rem; flex: none; }
  .nav-foco:hover, .nav-foco[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
  .nav-foco[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); }
  /* Rótulo: só visível com folga (≥ 1760 px); abaixo disso continua como nome acessível (e o title dá a dica ao mouse). */
  .nav-foco__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (min-width: 1760px) {
    .nav-foco { padding: 0 var(--sp-3); }
    .nav-foco__rotulo { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  }
  .barra-foco__titulo {
    flex: 1 1 0; min-width: 0; padding-left: var(--sp-3); margin-left: var(--sp-1); border-left: 1px solid var(--border);
    font-weight: 700; font-size: var(--fs-base); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .barra-foco__titulo:empty { visibility: hidden; border: 0; }
  .barra-foco__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; min-width: 0; }
  .barra-foco__slot { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
  .barra-foco .conta__gatilho { gap: var(--sp-1); padding: 2px var(--sp-1) 2px 2px; }
  .menu-suspenso__item--so-foco-estreito { display: none; }
  /* Até 1279 px: Mapa, Provas e Cadernos passam para o "Mais" e o título sai (cabem cronômetro, legislação e entregar). */
  @media (max-width: 1279.98px) {
    .barra-foco__sec { display: none; }
    .menu-suspenso__item--so-foco-estreito { display: flex; }
    .barra-foco__titulo { display: none; }
  }
  @media (max-width: 767.98px) {
    .barra-foco { gap: var(--sp-1); padding-inline: var(--sp-3); }
    .barra-foco__nav { display: none; }
    .barra-foco__acoes { gap: var(--sp-1); }
    .barra-foco__slot { gap: var(--sp-1); }
  }
  @media (max-width: 1279.98px) { .barra-foco .conta__gatilho { padding: 2px; } }
  .corpo--foco .conteudo { padding-top: var(--sp-6); }
  /* A navegação inferior do celular fica sobre o rodapé da página: reserva o espaço dela. */
  @media (max-width: 767.98px) { .corpo--foco .conteudo { padding-bottom: calc(var(--bottomnav) + var(--sp-8)); } }

  /* Confirmação discreta ao sair de uma prova cronometrada pelo menu (não modal; o app.js posiciona e cuida do foco). */
  .sair-prova {
    position: fixed; z-index: var(--z-dropdown); top: calc(var(--topbar) + var(--sp-2)); right: var(--gutter); width: min(420px, calc(100vw - 2 * var(--gutter)));
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4);
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    animation: menu-entra var(--dur-2) var(--ease-out);
  }
  .sair-prova[hidden] { display: none; }
  .sair-prova__icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--warning-soft); color: var(--warning-strong); }
  .sair-prova__titulo { font-weight: 700; }
  .sair-prova__texto { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
  .sair-prova__acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
  @media (max-width: 767.98px) {
    .sair-prova { top: auto; bottom: calc(var(--bottomnav) + var(--sp-2)); left: var(--sp-3); right: var(--sp-3); width: auto; }
  }

  /* ------------------------------------------------------------------ admin: sidebar agrupada, densidade compacta, --w-larga */
  .admin { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
  /* A sidebar é sticky com a altura da janela; o fundo e a borda da coluna vêm do próprio .admin para acompanhar páginas longas. */
  @media (min-width: 1024px) {
    .admin {
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
      background: linear-gradient(90deg, var(--surface) calc(var(--sidebar) - 1px), var(--border) calc(var(--sidebar) - 1px), var(--border) var(--sidebar), transparent var(--sidebar));
    }
  }
  .sidebar {
    display: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-3); background: var(--surface); border-right: 1px solid var(--border);
  }
  @media (min-width: 1024px) { .sidebar { display: flex; } }
  .sidebar__grupo { margin-top: var(--sp-4); padding: 0 var(--sp-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .sidebar__item {
    position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--alvo-min); padding: 0 var(--sp-3);
    border-radius: var(--r-md); color: var(--text-2); font-weight: 600; text-decoration: none;
  }
  .sidebar__item:hover { background: var(--surface-2); color: var(--text); }
  .sidebar__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }
  .sidebar__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2); width: 3px; border-radius: var(--r-full); background: var(--accent); }
  .sidebar__rodape { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
  .admin__principal { min-width: 0; }
  /* Uma marca só (RD 23/09): com a sidebar visível (≥ 1024 px) a marca do topo some; abaixo disso ela é a única. */
  @media (min-width: 1024px) { .admin__principal .cabecalho .marca { display: none; } .admin__principal .cabecalho__barra { justify-content: flex-end; } }
  .admin .conteudo { max-width: var(--w-larga); }

  /* ------------------------------------------------------------------ rail da TV (C §7.3): expande com o foco */
  .rail-tv { display: none; }
}

@layer utilities {
  .publico-menu { display: none; }
  @media (max-width: 1023.98px) { .publico-menu { display: inline-grid; } }
  @media (max-width: 639.98px) {
    .topo-publico__barra { gap: var(--sp-2); height: 64px; }
    .topo-publico__acoes { gap: var(--sp-1); }
    .topo-publico__acoes .btn-ghost { display: none; }
    .topo-publico__acoes .btn-pri { padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  }
  @media (max-width: 419.98px) { .topo-publico .marca__nome { display: none; } }
}

/* Visibilidade responsiva: na camada "utilities" para vencer a exibição definida pelos componentes. */
@layer utilities {
  .busca-icone { display: none; }
  /* Barra do foco (menu sempre visível na prova): até 1279 px a conta fica só com a pílula do plano (avatar e nome no menu
     dela); abaixo de 480 px, quando a tela põe muitas ações na barra (a 2ª fase: cronômetro, legislação, foco, entregar), a
     marca sai — a navegação inferior tem o Início. */
  @media (max-width: 1279.98px) { .barra-foco .conta__gatilho .avatar { display: none; } }
  @media (max-width: 479.98px) { .barra-foco:has(.barra-foco__slot > :nth-child(4)) > .marca { display: none; } }
  @media (max-width: 767.98px) {
    .busca-icone { display: inline-grid; }
    .cabecalho__so-largo { display: none; }
    .faixa-plano__texto, .faixa-plano__cota-normal, .faixa-plano__barra { display: none; }
    .faixa-plano__mini { display: inline; }
    .faixa-plano__cota { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.3; }
    .faixa-plano__fechar { margin-right: calc(var(--sp-3) * -1); }
    .faixa-plano { padding-right: var(--sp-3); }
  }
  @media (min-width: 768px) { .faixa-plano__mini { display: none; } .so-celular { display: none; } }
  /* Tablet (768–1023 px): a frase "Você está no plano Grátis" não cabe ao lado da cota — vale a versão curta ("Grátis · Hoje: …"). */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    .faixa-plano__texto, .faixa-plano__cota-normal { display: none; }
    .faixa-plano__mini { display: inline; }
    .faixa-plano__cota { flex: 1 1 auto; min-width: 0; }
  }
  @media (max-width: 767.98px) { .so-largo { display: none; } }
}

@layer layout {
  @media (max-width: 767.98px) { .grade > .sm-2 { grid-column: span 2; } }
}

/* Telas que já trazem a própria margem lateral (e, abaixo de 480 px, blocos de borda a borda) dentro do .conteudo, que
   também tem margem: no celular a soma deixava 32 px de cada lado e os blocos "de borda a borda" com borda aparente
   (24/09). Em "utilities" para vencer a largura definida nas telas. */
@layer utilities {
  @media (max-width: 767.98px) {
    .conteudo > :is(.pg-checkout, .pg-pagamento, .pg-conta, .boas-vindas, .acesso) { width: auto; margin-inline: calc(var(--gutter) * -1); }
    .conteudo > .prova { padding-inline: 0; }
  }
}