/* ═══════════════════════════════════════════════════════════════════════════
   MÉTODO APROVA DENTISTAS — DESIGN SYSTEM DA ÁREA LOGADA
   Camada de pele. Carregada DEPOIS de estilo.css; nada aqui reescreve estilo.css.
   Remover a linha <link> do index.html devolve o app exatamente ao estado anterior.

   POR QUE ESTA CAMADA EXISTE
   A área logada tinha três linguagens visuais convivendo (shell com sidebar, shell com
   topbar do Planejamento, e o Radar com header próprio) e nenhuma delas conversava com a
   landing. O aluno atravessava uma fronteira visível ao logar.

   COMO ELA FUNCIONA SEM REESCREVER 39 VIEWS
   As views já consomem tokens — `var(--surface)`, `var(--border)`, `var(--orange)`. Então
   redefinir o token muda a view sem tocar no arquivo dela. O que os tokens não alcançam
   (vidro, brilho, escala tipográfica) entra por regra de mesma especificidade declarada
   depois, que vence na cascata sem precisar de !important.

   REGRA DE CONVIVÊNCIA
   Nenhum seletor daqui muda posição, tamanho de grade ou fluxo de documento — só
   superfície, cor, tipo e movimento. Layout quebrado é regressão; cor diferente é o pedido.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS — extensão, não substituição
   Os nomes de marca (--orange, --green) continuam valendo: 39 views dependem deles.
   O que muda é o FUNDO e a SUPERFÍCIE, que passam a ser translúcidos para o vidro
   ter o que borrar.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Paleta da landing, mesmos hexadecimais */
  --ds-void:      #08070d;
  --ds-void2:     #0e0c16;
  --ds-amber:     #E5903E;
  --ds-amber2:    #f2ad61;
  --ds-teal:      #5AA17E;
  --ds-teal2:     #7fc9a2;
  --ds-iris:      #8a7bf0;
  --ds-azure:     #5c7de0;

  /* Vidro */
  --ds-glass:       linear-gradient(152deg, rgba(255,255,255,.075), rgba(255,255,255,.016) 60%, rgba(255,255,255,.032));
  --ds-glass-hover: linear-gradient(152deg, rgba(255,255,255,.11), rgba(255,255,255,.028) 60%, rgba(255,255,255,.048));
  --ds-glass-edge:  linear-gradient(152deg, rgba(255,255,255,.30), rgba(255,255,255,.045) 42%, rgba(229,144,62,.26));
  --ds-blur:        blur(18px) saturate(1.35);
  --ds-lift:        0 18px 44px rgba(0,0,0,.42);
  --ds-lift-hover:  0 26px 66px rgba(0,0,0,.5), 0 0 46px -12px rgba(229,144,62,.42);

  /* Brilho de fundo por contexto — o âmbar é o padrão (IA e planejamento) */
  --ds-glow-1: rgba(229,144,62,.20);
  --ds-glow-2: rgba(90,161,126,.15);

  /* Escala tipográfica. O problema relatado era título de seção com peso visual igual ao
     texto de apoio — a escala abaixo abre esse contraste em tamanho, peso E cor. */
  --ds-t-hero:  clamp(1.75rem, 3.4vw, 2.35rem);
  --ds-t-h1:    clamp(1.45rem, 2.6vw, 1.85rem);
  --ds-t-h2:    clamp(1.18rem, 2vw, 1.4rem);
  --ds-t-h3:    1.02rem;
  --ds-t-body:  .94rem;
  --ds-t-small: .82rem;
  --ds-t-micro: .72rem;

  --ds-r:    16px;
  --ds-r-sm: 11px;
  --ds-ease: cubic-bezier(.2,.7,.2,1);

  /* Superfícies translúcidas: é o que permite o backdrop-filter existir. */
  --bg:       #08070d;
  --surface:  rgba(255,255,255,.055);
  --surface2: rgba(255,255,255,.085);
  --border:   rgba(255,255,255,.10);
  --border2:  rgba(255,255,255,.16);
  /* ⚠️ SÓLIDO. Já foi .045 e depois .13 — e o Rafael continuou relatando campo
     transparente (Simulados e Perfil da Banca, 08/08). Subir a porcentagem é mexer no
     limiar; qualquer valor translúcido deixa o fundo atravessar. Campo de digitar é pra
     ser lido, não pra deixar ver através: vira cor cheia e o assunto morre.
     #221f2b = o mesmo tom do vidro dos cartões, opaco. */
  --input-bg: #221f2b;
  --text:     #f5f1eb;
  --body:     #bdb5c6;
  --muted:    #847d95;
  --shadow:      0 10px 30px rgba(0,0,0,.4);
  --shadow-card: var(--ds-lift);
}

/* Tema claro — mesma linguagem, ground de papel. O vidro fica sobre branco, então a
   translucidez desce (senão o cartão some) e a borda ganha densidade. */
[data-theme="light"] {
  --ds-glass:       linear-gradient(152deg, rgba(255,255,255,.85), rgba(255,255,255,.62) 60%, rgba(255,255,255,.78));
  --ds-glass-hover: linear-gradient(152deg, rgba(255,255,255,.95), rgba(255,255,255,.78) 60%, rgba(255,255,255,.9));
  --ds-glass-edge:  linear-gradient(152deg, rgba(255,255,255,.9), rgba(0,0,0,.06) 42%, rgba(229,144,62,.32));
  --ds-lift:        0 12px 32px rgba(38,28,54,.10);
  --ds-lift-hover:  0 18px 46px rgba(38,28,54,.14), 0 0 40px -14px rgba(229,144,62,.45);
  --ds-glow-1: rgba(229,144,62,.16);
  --ds-glow-2: rgba(90,161,126,.12);

  --bg:       #f6f2ea;
  --surface:  rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);
  --border:   rgba(26,23,32,.10);
  --border2:  rgba(26,23,32,.17);
  /* no claro, sólido: campo é para ser lido, não para deixar ver através */
  --input-bg: #ffffff;
  --text:     #1a1720;
  --body:     #4d4757;
  --muted:    #6b6478;
  --shadow:      0 8px 24px rgba(38,28,54,.09);
  --shadow-card: var(--ds-lift);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BRILHO AMBIENTE — o gradiente radial da landing, no lugar do preto chapado
   Dois halos fixos atrás de tudo. `position:fixed` e não absolute: acompanham a rolagem
   sem esticar a altura do documento (glow em fluxo já causou rolagem horizontal na
   landing — o erro não se repete aqui).
   ───────────────────────────────────────────────────────────────────────── */
body { background: var(--bg); }

body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  transition: background .6s ease;
}
body::before { width: 760px; height: 760px; top: -260px; left: -180px;
  background: radial-gradient(circle, var(--ds-glow-1), transparent 70%); }
body::after  { width: 640px; height: 640px; bottom: -220px; right: -160px;
  background: radial-gradient(circle, var(--ds-glow-2), transparent 70%); }

/* O conteúdo precisa ficar ACIMA do halo. */
#view, #topbar, #legal-footer { position: relative; z-index: 1; }

/* Contexto do brilho por área. O roteador põe data-ds-glow no <html>; a cor do halo
   passa a dizer em que parte do app o aluno está, sem escrever nada na tela.
     âmbar → ferramentas de IA e planejamento
     verde → desempenho e evolução
     roxo  → comunidade e neurociência                                            */
:root[data-ds-glow="desempenho"] { --ds-glow-1: rgba(90,161,126,.22);  --ds-glow-2: rgba(127,201,162,.13); }
:root[data-ds-glow="comunidade"] { --ds-glow-1: rgba(138,123,240,.20); --ds-glow-2: rgba(92,125,224,.15); }
:root[data-ds-glow="banco"]      { --ds-glow-1: rgba(92,125,224,.18);  --ds-glow-2: rgba(229,144,62,.12); }
[data-theme="light"][data-ds-glow="desempenho"] { --ds-glow-1: rgba(90,161,126,.15);  --ds-glow-2: rgba(127,201,162,.10); }
[data-theme="light"][data-ds-glow="comunidade"] { --ds-glow-1: rgba(138,123,240,.14); --ds-glow-2: rgba(92,125,224,.11); }
[data-theme="light"][data-ds-glow="banco"]      { --ds-glow-1: rgba(92,125,224,.13);  --ds-glow-2: rgba(229,144,62,.10); }

/* ─────────────────────────────────────────────────────────────────────────
   3. VIDRO — substitui o cartão de borda cinza
   Vale para `.card` (usado no Dashboard, Ferramentas, Banco e Radar) sem que nenhuma
   view precise trocar de classe.
   ───────────────────────────────────────────────────────────────────────── */
.card,
.ds-glass {
  position: relative;
  background: var(--ds-glass);
  border: 0;
  border-radius: var(--ds-r);
  box-shadow: var(--ds-lift);
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
  transition: transform .38s var(--ds-ease), box-shadow .38s, background .38s;
}

/* A borda é um gradiente de 1px, não um `border` sólido: só a máscara permite que a
   luz corra pela quina como na landing. */
.card::after,
.ds-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--ds-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85;
  transition: opacity .38s;
}

.card:hover,
.ds-glass:hover {
  transform: translateY(-5px);
  background: var(--ds-glass-hover);
  box-shadow: var(--ds-lift-hover);
}
.card:hover::after,
.ds-glass:hover::after { opacity: 1; }

/* Cartão que não é clicável não deve levantar — elevação promete interação. */
.card.ds-static:hover { transform: none; box-shadow: var(--ds-lift); }

/* Variações de aresta e brilho por contexto */
.ds-t::after { background: linear-gradient(152deg, rgba(255,255,255,.30), rgba(255,255,255,.045) 42%, rgba(90,161,126,.28)); }
.ds-t:hover  { box-shadow: 0 26px 66px rgba(0,0,0,.5), 0 0 46px -12px rgba(90,161,126,.42); }
.ds-i::after { background: linear-gradient(152deg, rgba(255,255,255,.30), rgba(255,255,255,.045) 42%, rgba(138,123,240,.28)); }
.ds-i:hover  { box-shadow: 0 26px 66px rgba(0,0,0,.5), 0 0 46px -12px rgba(138,123,240,.42); }

/* `overflow:hidden` do .card original recortava a máscara da borda. */
.card { overflow: visible; }
.card > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card > :last-child  { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   4. BOTÕES — gradiente e brilho, laranja da marca preservado
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 12px;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  letter-spacing: .005em;
  transition: transform .25s var(--ds-ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn-primary {
  background: linear-gradient(120deg, var(--ds-amber), #d8792a);
  color: #1a1207;
  border: 1px solid transparent;
  box-shadow: 0 0 34px rgba(229,144,62,.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px rgba(229,144,62,.5);
}
.btn-ghost {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--border2); transform: translateY(-1px); }
[data-theme="light"] .btn-ghost { background: rgba(255,255,255,.72); }
[data-theme="light"] .btn-ghost:hover { background: #fff; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ds-amber);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. TIPOGRAFIA — abre o contraste entre título, subtítulo e apoio
   O relato era "Ferramentas de Estudo" com peso visual igual ao texto abaixo. Aqui o
   título sobe em tamanho e peso e o apoio DESCE em cor — os dois lados do contraste.
   ───────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .page-header h1, .page-header h2 {
  font-family: 'Lato', sans-serif;
  color: var(--text);
  line-height: 1.12;
  letter-spacing: -.018em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--ds-t-h1); }
h2 { font-size: var(--ds-t-h2); }
h3 { font-size: var(--ds-t-h3); }

.page-header { margin-bottom: 30px; }
.page-header h1, .page-header h2 { font-size: var(--ds-t-hero); margin-bottom: 8px; }
.page-header p, .page-header .sub { color: var(--muted); font-size: var(--ds-t-body); max-width: 62ch; }

/* Sobrelinha da landing: filete curto que some no gradiente. Marca a seção sem
   consumir uma linha inteira de título. */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Lato', sans-serif;
  font-size: var(--ds-t-micro); font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ds-amber); margin-bottom: 10px;
}
.ds-eyebrow::before {
  content: ""; width: 22px; height: 1.5px;
  background: linear-gradient(90deg, var(--ds-amber), transparent);
}
.ds-grad {
  background: linear-gradient(105deg, var(--ds-amber), var(--ds-teal2) 62%, var(--ds-iris));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .ds-grad { background: linear-gradient(105deg, #c4761f, #2f7a55 60%, #5a48c9); -webkit-background-clip: text; background-clip: text; }

/* ─────────────────────────────────────────────────────────────────────────
   6. FORMULÁRIOS — vidro, foco com brilho, e respiro entre grupos
   Nenhum campo, rótulo ou validação muda: só a superfície e o agrupamento visual.
   ───────────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--ds-r-sm);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .22s, box-shadow .22s, background .22s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(229,144,62,.55);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 3px rgba(229,144,62,.14), 0 0 26px -6px rgba(229,144,62,.35);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus { background: #fff; }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Agrupamento: o problema era input de borda simples lado a lado sem grupo visível.
   `.ds-field-group` desenha o grupo; `.ds-fields` dá a grade com respiro. */
.ds-field-group {
  border-radius: var(--ds-r);
  padding: 20px 22px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
[data-theme="light"] .ds-field-group { background: rgba(255,255,255,.55); }
.ds-field-group > .ds-eyebrow { margin-bottom: 14px; }
.ds-fields { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ds-fields label, .ds-field label {
  display: block; font-size: var(--ds-t-small); font-weight: 700;
  color: var(--body); margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. ÍCONES — mesmo traço da landing (1.75), tamanho herdado do texto
   ───────────────────────────────────────────────────────────────────────── */
.ic {
  width: 1em; height: 1em;
  stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; flex: none; display: inline-block;
  vertical-align: -.125em;
}
.ic-fill { fill: currentColor; stroke: none; }
.ic-lg { width: 1.5em; height: 1.5em; }
.ic-xl { width: 2em; height: 2em; }
.ic-amber { color: var(--ds-amber); }
.ic-teal  { color: var(--ds-teal2); }
.ic-iris  { color: var(--ds-iris); }

/* Ícone de destaque: flutuação contínua, igual à da landing. */
.ic-float { animation: ds-float 6s ease-in-out infinite; }
@keyframes ds-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ─────────────────────────────────────────────────────────────────────────
   8. MOVIMENTO
   Entrada em cascata curta. O teto de 8 passos é deliberado: quem está estudando não
   pode esperar a tela montar. Depois do 8º item, tudo entra junto.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes ds-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }

.ds-rise { animation: ds-rise .5s var(--ds-ease) both; }
.ds-rise-1 { animation-delay: .04s } .ds-rise-2 { animation-delay: .08s }
.ds-rise-3 { animation-delay: .12s } .ds-rise-4 { animation-delay: .16s }
.ds-rise-5 { animation-delay: .20s } .ds-rise-6 { animation-delay: .24s }
.ds-rise-7 { animation-delay: .28s } .ds-rise-8 { animation-delay: .32s }

/* Troca de aba e de filtro: o conteúdo novo aparece, não pisca. */
.ds-swap { animation: ds-fade .28s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .ds-glass:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. SHELL — sidebar e header no mesmo vidro
   Mantém a estrutura de `renderAreaShell`; só troca a superfície.
   ───────────────────────────────────────────────────────────────────────── */
.aa-header {
  background: rgba(8,7,13,.66);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .aa-header { background: rgba(246,242,234,.8); }

.aa-sidebar {
  background: rgba(255,255,255,.032);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
}
[data-theme="light"] .aa-sidebar { background: rgba(255,255,255,.6); }

.aa-nav-item, .aa-nav a, .aa-side-link {
  border-radius: 10px;
  transition: background .22s, color .22s, transform .22s var(--ds-ease);
}
.aa-nav-item:hover, .aa-nav a:hover, .aa-side-link:hover {
  background: rgba(255,255,255,.06);
  transform: translateX(2px);
}
.aa-nav-item.active, .aa-nav a.active, .aa-side-link.active {
  background: linear-gradient(100deg, rgba(229,144,62,.18), rgba(229,144,62,.05));
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--ds-amber);
}

.aa-footer { border-top: 1px solid var(--border); background: transparent; }

/* ─────────────────────────────────────────────────────────────────────────
   10. AJUSTES DE CONVIVÊNCIA
   Componentes que o vidro deixaria ilegíveis ou que precisam continuar opacos.
   ───────────────────────────────────────────────────────────────────────── */
.toast, .aa-avatar-menu, .avatar-menu, .aa-notif-dropdown, .modal, .modal-content {
  background: rgba(22,19,31,.94);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--border2);
  border-radius: var(--ds-r-sm);
}
[data-theme="light"] .toast, [data-theme="light"] .aa-avatar-menu,
[data-theme="light"] .avatar-menu, [data-theme="light"] .aa-notif-dropdown,
[data-theme="light"] .modal, [data-theme="light"] .modal-content { background: rgba(255,255,255,.97); }

/* Tabela dentro de vidro: a linha zebrada some, o filete resolve. */
table thead th { border-bottom: 1px solid var(--border2); }
table tbody td { border-bottom: 1px solid var(--border); }

/* Conteúdo largo nunca empurra a página para o lado. */
.table-wrap, .aa-content .scroll-x { overflow-x: auto; }
body { overflow-x: hidden; }

/* Em telas estreitas o borrão custa caro e o halo atrapalha a leitura. */
@media (max-width: 720px) {
  body::before, body::after { filter: blur(90px); opacity: .7; }
  .card, .ds-glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* Navegador sem backdrop-filter (Firefox antigo): vidro vira superfície sólida em vez
   de virar um retângulo transparente ilegível. */
@supports not (backdrop-filter: blur(1px)) {
  .card, .ds-glass { background: #16131f; }
  [data-theme="light"] .card, [data-theme="light"] .ds-glass { background: #fff; }
  .aa-header { background: #0e0c16; }
  .aa-sidebar { background: #0e0c16; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. SHELL UNIFICADO (31/07/2026)
   Planejamento e Radar passaram a usar o MESMO shell do resto do app. O que segue
   é o que essa mudança exige — e nada além disso.
   ───────────────────────────────────────────────────────────────────────── */

/* Separador de grupo na sidebar. Com o Planejamento dentro, a lista foi de 10 para
   15 itens; sem hierarquia visual isso vira parede. */
.aa-grupo {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
  padding: 16px 11px 6px;
  user-select: none;
}
.aa-grupo:first-child { padding-top: 4px; }

/* O Radar desenha um header próprio (logo + botão de tema), cópia do público. Dentro
   do shell isso é o segundo header da mesma tela. Escondido AQUI, e não removido de
   views/radar.js, porque o Radar continua servindo à rota pública com header próprio —
   apagar de lá quebraria o público. */
.aa-content .rd2-header,
.aa-content .rd2-trust-bar { display: none; }

/* O hero do Radar herdava o espaçamento de uma página de topo. Dentro do shell ele é
   o começo do conteúdo, não da página. */
.aa-content .rd2-hero { padding-top: 4px; }
.aa-content .rd2-view { max-width: none; }

/* As views do Planejamento usam `.container` (780px), pensado para largura de janela
   inteira. Dentro do shell a sidebar já consumiu 236px, então o texto ficava numa
   coluna estreita demais no meio de um vão largo. */
.aa-content .container { max-width: 100%; padding: 4px 0 20px; }
.aa-content .container-wide { max-width: 100%; padding: 4px 0 40px; }

/* ─────────────────────────────────────────────────────────────────────────
   12. VIDRO NAS TELAS PRIORITÁRIAS (31/07/2026)

   POR QUE O PREFIXO `#view`
   Cada view injeta o próprio <style> em tempo de execução — e um <style> criado depois
   entra no fim do <head>, vencendo esta folha por ordem de cascata. Foi por isso que os
   cartões apareceram chapados na primeira captura, mesmo com a camada ligada.
   `#view .ft-card` (1,1,0) vence `.ft-card` (0,1,0) por ESPECIFICIDADE, não por ordem —
   e assim nenhum arquivo de view precisa ser editado.

   O QUE ENTRA AQUI
   Só o que é CARTÃO de verdade. Menu, chip, badge, input e opção de combo continuam
   opacos de propósito: vidro sobre vidro vira sopa e o aluno perde a hierarquia.
   ───────────────────────────────────────────────────────────────────────── */
#view .ft-card,      #view .ft-radar-card, #view .ft-soon-card, #view .ft-hero,
#view .aa-card,      #view .aa-com-card,   #view .aa-result-card, #view .aa-desemp,
#view .bq-filter-panel,
#view .pm-card,
#view .pb-plano-card, #view .pb-prova-card, #view .pb-assunto-card,
#view .pb-minicard,   #view .pb-deposito,
#view .fc-face,       #view .fc-stat,       #view .fc-manage-item {
  position: relative;
  background: var(--ds-glass);
  border: 0;
  border-radius: var(--ds-r);
  box-shadow: var(--ds-lift);
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
  transition: transform .38s var(--ds-ease), box-shadow .38s, background .38s;
}

#view .ft-card::after,      #view .ft-radar-card::after, #view .ft-soon-card::after,
#view .ft-hero::after,
#view .aa-card::after,      #view .aa-com-card::after,   #view .aa-result-card::after,
#view .aa-desemp::after,
#view .bq-filter-panel::after,
#view .pm-card::after,
#view .pb-plano-card::after, #view .pb-prova-card::after, #view .pb-assunto-card::after,
#view .pb-minicard::after,   #view .pb-deposito::after,
#view .fc-face::after,       #view .fc-stat::after,       #view .fc-manage-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--ds-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85;
  transition: opacity .38s;
}

/* Só o que É clicável levanta. Elevação promete interação — o painel de filtros e o
   cartão de estatística não levam a lugar nenhum. */
#view .ft-card:hover, #view .ft-radar-card:hover,
#view .aa-card:hover, #view .aa-com-card:hover, #view .aa-result-card:hover,
#view .pb-prova-card:hover, #view .pb-assunto-card:hover, #view .fc-manage-item:hover {
  transform: translateY(-5px);
  background: var(--ds-glass-hover);
  box-shadow: var(--ds-lift-hover);
}
#view .ft-card:hover::after, #view .ft-radar-card:hover::after,
#view .aa-card:hover::after, #view .aa-com-card:hover::after,
#view .aa-result-card:hover::after, #view .pb-prova-card:hover::after,
#view .pb-assunto-card:hover::after, #view .fc-manage-item:hover::after { opacity: 1; }

/* O hero das Ferramentas tinha borda laranja sólida de 2px — a única coisa na tela com
   esse peso. Vira aresta de vidro âmbar: continua sendo o elemento mais importante da
   página, sem gritar. */
#view .ft-hero::after {
  background: linear-gradient(152deg, rgba(229,144,62,.55), rgba(255,255,255,.06) 45%, rgba(229,144,62,.35));
  opacity: 1;
}
#view .ft-hero { padding: 26px 28px; }

/* O Radar é a área "azul" do app — a aresta acompanha. */
#view .ft-radar-card::after {
  background: linear-gradient(152deg, rgba(255,255,255,.28), rgba(255,255,255,.045) 42%, rgba(92,125,224,.30));
}

/* Ícone dentro de cartão: caixa com a cor do contexto, no lugar do emoji solto. */
#view .ft-ic, #view .ft-radar-ic, #view .aa-card-ic {
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(229,144,62,.13);
  border: 1px solid rgba(229,144,62,.22);
  color: var(--ds-amber);
}
#view .ft-radar-ic { background: rgba(92,125,224,.14); border-color: rgba(92,125,224,.24); color: var(--ds-azure); }

/* Entrada em cascata nas grades de cartão — sem tocar no HTML das views. */
#view .ft-grid > *, #view .dash-grid > *, #view .aa-cards > * { animation: ds-rise .5s var(--ds-ease) both; }
#view .ft-grid > :nth-child(1), #view .dash-grid > :nth-child(1), #view .aa-cards > :nth-child(1) { animation-delay: .03s }
#view .ft-grid > :nth-child(2), #view .dash-grid > :nth-child(2), #view .aa-cards > :nth-child(2) { animation-delay: .06s }
#view .ft-grid > :nth-child(3), #view .dash-grid > :nth-child(3), #view .aa-cards > :nth-child(3) { animation-delay: .09s }
#view .ft-grid > :nth-child(4), #view .dash-grid > :nth-child(4), #view .aa-cards > :nth-child(4) { animation-delay: .12s }
#view .ft-grid > :nth-child(5), #view .dash-grid > :nth-child(5), #view .aa-cards > :nth-child(5) { animation-delay: .15s }
#view .ft-grid > :nth-child(n+6), #view .dash-grid > :nth-child(n+6), #view .aa-cards > :nth-child(n+6) { animation-delay: .18s }

/* O rótulo da sidebar não pode quebrar em duas linhas. */
.aa-side-item > span { flex: 1; min-width: 0; }
.aa-side-item .ic { flex: none; color: var(--muted); }
.aa-side-item.active .ic { color: var(--ds-amber); }

/* ─────────────────────────────────────────────────────────────────────────
   13. CORREÇÃO — a barra de marca é ESCURA nos dois temas (31/07/2026)

   O app já definia `--header-bg: #2D2D2D` FORA dos blocos de tema: a barra superior
   sempre foi escura, claro ou escuro. A seção 9 desta folha deixou a barra clara no
   tema claro, e o logo — PNG com texto branco, desenhado para fundo escuro — sumiu.
   Regressão minha, na captura de 31/07.

   Voltar a barra para escura é honrar o que já existia, não inventar: o ativo foi
   desenhado para esse fundo, e a sidebar continua clara.
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] .aa-header {
  background: rgba(30,26,38,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Sobre barra escura, o conteúdo do header é claro nos DOIS temas. */
[data-theme="light"] .aa-header,
[data-theme="light"] .aa-header .aa-icon-btn,
[data-theme="light"] .aa-header .aa-bell,
[data-theme="light"] .aa-header .ic { color: #e8e4de; }
[data-theme="light"] .aa-header .aa-icon-btn:hover,
[data-theme="light"] .aa-header .aa-bell:hover { background: rgba(255,255,255,.12); color: #fff; }

/* O ícone herda a cor do botão; sem isto ele saía branco sobre branco. */
.aa-icon-btn .ic, .aa-bell .ic { color: inherit; }

/* ─────────────────────────────────────────────────────────────────────────
   14. TELAS RESTANTES — Onboarding, Perfil da Banca, Flashcards (31/07/2026)
   Mesmo mecanismo da seção 12: `#view` vence o CSS que a view injeta em runtime.
   ───────────────────────────────────────────────────────────────────────── */
#view .step-card, #view .route-card, #view .ob-hero,
#view .pb-plano-card, #view .pb-prova-card, #view .pb-assunto-card,
#view .pb-minicard, #view .pb-resumo-item, #view .pb-deposito,
#view .fc-face, #view .fc-stat, #view .fc-manage-item, #view .fc-nota {
  position: relative;
  background: var(--ds-glass);
  border: 0;
  border-radius: var(--ds-r);
  box-shadow: var(--ds-lift);
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
  transition: transform .38s var(--ds-ease), box-shadow .38s, background .38s;
}
#view .step-card::after, #view .route-card::after, #view .ob-hero::after,
#view .pb-plano-card::after, #view .pb-prova-card::after, #view .pb-assunto-card::after,
#view .pb-minicard::after, #view .pb-resumo-item::after, #view .pb-deposito::after,
#view .fc-face::after, #view .fc-stat::after, #view .fc-manage-item::after,
#view .fc-nota::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; background: var(--ds-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85; transition: opacity .38s;
}
#view .route-card:hover, #view .pb-prova-card:hover, #view .pb-assunto-card:hover,
#view .fc-manage-item:hover {
  transform: translateY(-4px);
  background: var(--ds-glass-hover);
  box-shadow: var(--ds-lift-hover);
}
#view .route-card:hover::after, #view .pb-prova-card:hover::after,
#view .pb-assunto-card:hover::after, #view .fc-manage-item:hover::after { opacity: 1; }

/* Rota escolhida no Onboarding: a aresta âmbar mostra a seleção sem borda dura. */
#view .route-card.sel::after, #view .route-card.ativo::after, #view .route-card.active::after {
  background: linear-gradient(152deg, rgba(229,144,62,.6), rgba(255,255,255,.06) 45%, rgba(229,144,62,.4));
  opacity: 1;
}

/* Botões Sim/Não do Onboarding: superfície de vidro em vez de caixa cinza. */
#view .yn-btn {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--border);
  border-radius: var(--ds-r-sm);
  transition: border-color .22s, background .22s, transform .22s var(--ds-ease);
}
#view .yn-btn:hover { background: rgba(255,255,255,.085); border-color: var(--border2); }
#view .yn-btn.sel, #view .yn-btn.ativo, #view .yn-btn.active {
  background: linear-gradient(120deg, rgba(229,144,62,.2), rgba(229,144,62,.07));
  border-color: rgba(229,144,62,.5);
  color: var(--text);
}
[data-theme="light"] #view .yn-btn { background: rgba(255,255,255,.7); }

/* ─────────────────────────────────────────────────────────────────────────
   15. GRUPOS DE CAMPO (ver js/ui/grupos.js)
   O cabeçalho ocupa a linha inteira da grade — é ITEM da grade, não pseudo-elemento,
   porque pseudo-elemento de item de grade não é item de grade.
   ───────────────────────────────────────────────────────────────────────── */
.ds-grupo-campos {
  grid-column: 1 / -1;
  font-family: 'Lato', sans-serif;
  font-size: var(--ds-t-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 -2px;
}
.ds-grupo-campos:first-child { margin-top: 0; }
/* O filete continua até o fim da linha: mostra até onde o grupo vai. */
.ds-grupo-campos::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border2), transparent);
}

/* Mais respiro entre os campos, agora que eles têm dono. */
#view .bq-filtros { gap: 14px 16px; }
#view .bq-filtros .form-label {
  font-size: var(--ds-t-small);
  font-weight: 700;
  color: var(--body);
  letter-spacing: .01em;
  text-transform: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   16. MAPA MENTAL — só moldura, fundo e barra (31/07/2026)

   O editor é o único que não usa o shell: ele toma a viewport inteira, e é assim de
   propósito. Combinado com o Rafael: NADA de canvas nem de engine.

   FICAM DE FORA, EXPLICITAMENTE:
     .mm-palco  .mm-mundo  .mm-svg  .mm-no  .mm-seta  .mm-zoom
   São o quadro, os nós e as arestas — o motor do editor. Um seletor meu ali seria
   escopo que ninguém pediu, e num editor de canvas é onde o estrago é mais caro.
   ───────────────────────────────────────────────────────────────────────── */
#view .mm-topo {
  background: rgba(14,12,22,.8);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
#view .mm-lado {
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border);
}
[data-theme="light"] #view .mm-topo { background: rgba(30,26,38,.93); }
[data-theme="light"] #view .mm-lado { background: rgba(255,255,255,.64); }

/* Botões da barra e itens da lista de mapas: mesma linguagem, sem mexer no que fazem. */
#view .mm-bt, #view .mm-tbtn, #view .mm-item, #view .mm-pasta-cab {
  border-radius: 10px;
  transition: background .2s, border-color .2s, transform .2s var(--ds-ease);
}
#view .mm-bt:hover, #view .mm-tbtn:hover { transform: translateY(-1px); }
#view .mm-item:hover { background: rgba(255,255,255,.06); }
#view .mm-busca, #view .mm-nome-mapa, #view .mm-disc {
  border-radius: var(--ds-r-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ─────────────────────────────────────────────────────────────────────────
   17. HERÓI DE PÁGINA (`.hero`, usado no Onboarding e afins)
   Vive no estilo.css, não é injetado em runtime — logo esta folha vence por ORDEM,
   sem precisar do prefixo `#view`. Era um retângulo de quina viva coberto de gradiente;
   vira a mesma superfície de vidro do resto, com o brilho por trás aparecendo.
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  border-radius: var(--ds-r);
  background: linear-gradient(152deg, rgba(229,144,62,.10), rgba(255,255,255,.02) 55%, rgba(90,161,126,.09));
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
  box-shadow: var(--ds-lift);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: linear-gradient(152deg, rgba(229,144,62,.42), rgba(255,255,255,.05) 48%, rgba(90,161,126,.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
[data-theme="light"] .hero {
  background: linear-gradient(152deg, rgba(255,255,255,.9), rgba(255,255,255,.66) 55%, rgba(255,255,255,.82));
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Lato', sans-serif; font-weight: 800;
  font-size: var(--ds-t-micro); letter-spacing: .16em; text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   18. MOVIMENTO QUE FALTAVA (31/07/2026)

   Duas peças estavam escritas na seção 8 e NUNCA foram usadas: `.ic-float` e `.ds-swap`.
   CSS que ninguém aplica é CSS que não existe — e os dois eram item explícito do
   briefing ("flutuação sutil em ícones de destaque", "transições suaves ao trocar de
   aba/filtro"). Aqui elas passam a acontecer de fato.
   ───────────────────────────────────────────────────────────────────────── */

/* FLUTUAÇÃO — só nos ícones de DESTAQUE: a caixa de ícone dos cartões de ferramenta e
   do Radar. Não vale para ícone de lista, de botão ou de rótulo; se tudo flutua, nada
   é destaque, e numa tela de estudo isso vira ruído.
   Os atrasos são diferentes de propósito: em uníssono o efeito lê como mecânico. */
#view .ft-ic > .ic,
#view .ft-radar-ic > .ic { animation: ds-float 6s ease-in-out infinite; }
#view .ft-grid > :nth-child(1) .ft-ic > .ic { animation-delay: -.2s }
#view .ft-grid > :nth-child(2) .ft-ic > .ic { animation-delay: -1.6s }
#view .ft-grid > :nth-child(3) .ft-ic > .ic { animation-delay: -3.0s }
#view .ft-grid > :nth-child(4) .ft-ic > .ic { animation-delay: -4.4s }
#view .ft-grid > :nth-child(n+5) .ft-ic > .ic { animation-delay: -5.2s }

/* Enquanto o cursor está no cartão, o ícone para: quem foi clicar não persegue alvo. */
#view .ft-card:hover .ft-ic > .ic,
#view .ft-radar-card:hover .ft-radar-ic > .ic { animation-play-state: paused; }

/* TROCA DE ABA E DE FILTRO — a classe é posta pelo observador (js/app.js) quando um
   contêiner tem o conteúdo SUBSTITUÍDO, e removida ao fim. Curta de propósito: 220ms
   é percebido como "trocou", 400ms já é espera. */
.ds-swap { animation: ds-swap-in .22s var(--ds-ease) both; }
@keyframes ds-swap-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Botão de aba: o estado ativo se move, não pisca. */
#view .fc-tab-btn, #view .aa-dtab, #view .pb-chip-filtro, #view .rd2-tab {
  transition: background .22s, color .22s, border-color .22s, transform .2s var(--ds-ease);
}
#view .fc-tab-btn:hover, #view .aa-dtab:hover,
#view .pb-chip-filtro:hover, #view .rd2-tab:hover { transform: translateY(-1px); }

/* ═════════════════════════════════════════════════════════════════════════
   19. COBERTURA DOS 100% DO APP (31/07/2026)

   A lista de "telas prioritárias" do briefing era por onde COMEÇAR, não o escopo —
   o pedido é "um único design system em 100% do app". As 23 views abaixo ficaram
   de fora da primeira leva e voltam aqui.

   TRÊS NÍVEIS, PORQUE NÃO É TUDO A MESMA COISA
   Dar peso de cartão a uma linha de lista de 40 itens produz uma parede de sombras
   e destrói a leitura da lista. Cada nível ganha o peso que o seu papel pede.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── NÍVEL 1 · CARTÃO — unidade de conteúdo, com aresta e elevação ───────── */
#view .ac-card, #view .cd-card, #view .dc-card, #view .mk-card, #view .nt-card,
#view .nt-bloco, #view .pv-card, #view .sd-card, #view .sim-card, #view .sm-card,
#view .sm-wizard-card, #view .ds-stat, #view .aa-card-breve,
#view .asn-block-card, #view .asn-curso-avulso-card, #view .asn-plan-card,
#view .bib-mat-card, #view .fc-form-card, #view .fr-msg-card, #view .fr-new-topic-panel,
#view .fr-empty-state, #view .pv-filter-panel, #view .rd2-hero, #view .rd-card,
#view .rd-profile-card, #view .rd-user-card, #view .rd-blocked-panel,
#view .pb-sec-discreto {
  position: relative;
  background: var(--ds-glass);
  border: 0;
  border-radius: var(--ds-r);
  box-shadow: var(--ds-lift);
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
  transition: transform .38s var(--ds-ease), box-shadow .38s, background .38s;
}
#view .ac-card::after, #view .cd-card::after, #view .dc-card::after,
#view .mk-card::after, #view .nt-card::after, #view .nt-bloco::after,
#view .pv-card::after, #view .sd-card::after, #view .sim-card::after,
#view .sm-card::after, #view .sm-wizard-card::after,
#view .ds-stat::after, #view .aa-card-breve::after, #view .asn-block-card::after,
#view .asn-curso-avulso-card::after, #view .asn-plan-card::after,
#view .bib-mat-card::after, #view .fc-form-card::after, #view .fr-msg-card::after,
#view .fr-new-topic-panel::after, #view .fr-empty-state::after,
#view .pv-filter-panel::after, #view .rd2-hero::after, #view .rd-card::after,
#view .rd-profile-card::after, #view .rd-user-card::after,
#view .rd-blocked-panel::after, #view .pb-sec-discreto::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; background: var(--ds-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85; transition: opacity .38s;
}
/* Só o que leva a algum lugar levanta. */
#view .ac-card:hover, #view .cd-card:hover, #view .dc-card:hover, #view .mk-card:hover,
#view .sd-card:hover, #view .sm-card:hover, #view .bib-mat-card:hover,
#view .rd-user-card:hover, #view .asn-plan-card:hover {
  transform: translateY(-4px);
  background: var(--ds-glass-hover);
  box-shadow: var(--ds-lift-hover);
}
#view .ac-card:hover::after, #view .cd-card:hover::after, #view .dc-card:hover::after,
#view .mk-card:hover::after, #view .sd-card:hover::after, #view .sm-card:hover::after,
#view .bib-mat-card:hover::after, #view .rd-user-card:hover::after,
#view .asn-plan-card:hover::after { opacity: 1; }

/* ── NÍVEL 2 · LINHA DE LISTA — peso leve, sem sombra ────────────────────
   Uma lista de 40 tópicos do Fórum com sombra de cartão em cada linha vira uma
   parede cinza: o olho perde a régua e a lista deixa de ser lista. Aqui a linha
   é só uma superfície com filete embaixo, e o hover é que a destaca.            */
#view .bib-row, #view .bib-row-head, #view .cht-conv-item, #view .cht-nova-item,
#view .fc-chamado-row, #view .fr-denuncia-item, #view .fr-mod-topic-row,
#view .fr-topico-row, #view .msg-conv, #view .msg-mn-item, #view .sm-disc-row,
#view .sm-ms-item, #view .sm-step-item, #view .qd-filtro-row,
#view .asn-plan-info-item, #view .aa-notif-item {
  background: rgba(255,255,255,.028);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: var(--ds-r-sm);
  box-shadow: none;
  transition: background .22s, transform .22s var(--ds-ease);
}
#view .bib-row:hover, #view .cht-conv-item:hover, #view .fc-chamado-row:hover,
#view .fr-topico-row:hover, #view .fr-mod-topic-row:hover, #view .msg-conv:hover,
#view .sm-disc-row:hover, #view .sm-ms-item:hover {
  background: rgba(255,255,255,.07);
  transform: translateX(2px);
}
[data-theme="light"] #view .bib-row, [data-theme="light"] #view .bib-row-head,
[data-theme="light"] #view .cht-conv-item, [data-theme="light"] #view .cht-nova-item,
[data-theme="light"] #view .fc-chamado-row, [data-theme="light"] #view .fr-denuncia-item,
[data-theme="light"] #view .fr-mod-topic-row, [data-theme="light"] #view .fr-topico-row,
[data-theme="light"] #view .msg-conv, [data-theme="light"] #view .msg-mn-item,
[data-theme="light"] #view .sm-disc-row, [data-theme="light"] #view .sm-ms-item,
[data-theme="light"] #view .sm-step-item, [data-theme="light"] #view .qd-filtro-row,
[data-theme="light"] #view .asn-plan-info-item,
[data-theme="light"] #view .aa-notif-item { background: rgba(255,255,255,.6); }

/* ── NÍVEL 3 · BALÃO DE CONVERSA ─────────────────────────────────────────
   Chat e Mensagens. O que NÃO pode se perder é a distinção entre o que eu mandei
   e o que recebi — é isso que faz a conversa ser legível. O vidro entra leve e a
   regra do "meu balão" (que cada view já define) continua vencendo.              */
#view .cht-bubble, #view .msg-bolha, #view .msg-th-envio, #view .fc-thread-bubble {
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
#view .msg-thread { background: transparent; border: 0; box-shadow: none; }
[data-theme="light"] #view .cht-bubble, [data-theme="light"] #view .msg-bolha,
[data-theme="light"] #view .msg-th-envio,
[data-theme="light"] #view .fc-thread-bubble { background: rgba(255,255,255,.82); }

/* Últimas quatro caixas de conteúdo. `.aa-am-item` e `.aa-side-item` ficam FORA de
   propósito: são item de menu e item de sidebar, já tratados nas seções 9 e 10 —
   dar peso de cartão a eles engrossaria a navegação. */
#view .bib-viewer-box, #view .fr-reply-box, #view .bq-espelho-box, #view .bq-stat-box {
  position: relative;
  background: var(--ds-glass);
  border: 0;
  border-radius: var(--ds-r);
  box-shadow: var(--ds-lift);
  backdrop-filter: var(--ds-blur);
  -webkit-backdrop-filter: var(--ds-blur);
}
#view .bib-viewer-box::after, #view .fr-reply-box::after,
#view .bq-espelho-box::after, #view .bq-stat-box::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; background: var(--ds-glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .85;
}

/* ─────────────────────────────────────────────────────────────────────────
   20. TABELA NO CELULAR (31/07/2026)

   A varredura por largura fixa achou 71 `max-width` (seguros — limitam, não forçam) e
   duas `min-width` grandes. Uma é CSS morto (`table.cal`, nenhuma view usa). A outra é
   real: as três tabelas de dados da Rede não têm contêiner rolável, e tabela de dados
   não cabe em 390px.

   Rolagem lateral da PÁGINA é defeito; rolagem lateral DENTRO da tabela é o
   comportamento correto — o resto da tela continua parado. Escopo no breakpoint móvel
   de propósito: no desktop a tabela continua sendo tabela.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  #view table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* O cabeçalho não pode quebrar palavra a palavra e virar uma coluna de letras. */
  #view table th { white-space: nowrap; }
}

/* ═════════════════════════════════════════════════════════════════════════
   21. MODAL É OPACO — SEMPRE (31/07/2026)

   O DEFEITO (reportado pelo Rafael, com foto do celular)
   Os modais "Adicionar em um caderno" e "Criar flashcard" estavam TRANSPARENTES:
   dava para ler os botões da tela de baixo através do painel.

   A CAUSA — minha
   A seção 1 redefiniu `--surface` de `#1a1a1d` (SÓLIDO) para `rgba(255,255,255,.055)`,
   para o vidro ter o que borrar. Só que dezenas de painéis pelo app faziam
   `background: var(--surface)` contando com ele ser opaco. O modal do flashcard virou
   5% de branco sobre o escurecimento de 60% do pano — legível dos dois lados.

   POR QUE EU NÃO PEGUEI ANTES
   Classifiquei as classes pelo NOME. O painel do modal se chama `.bq-fc-card` — nome de
   cartão, papel de modal — e foi parar na lista de vidro pelas minhas próprias mãos.
   É o mesmo erro do Radar em outra roupa: **nome é identidade declarada, e identidade
   engana. Estrutura é comportamento, e comportamento não mente.**

   A REGRA ESTRUTURAL
   Todo modal deste app vive DENTRO do seu pano de fundo. Então "filho direto de um
   backdrop" identifica o painel sem depender de como ele se chama — e pega os que ainda
   nem foram escritos.
   ═════════════════════════════════════════════════════════════════════════ */

/* Superfície verdadeiramente opaca. Existe porque `--surface` deixou de ser. */
:root { --ds-solid: #17141f; --ds-solid-2: #1e1a29; }
[data-theme="light"] { --ds-solid: #ffffff; --ds-solid-2: #f4f1ea; }

/* ⚠️ ESPECIFICIDADE — a mesma armadilha da §12, e ela me pegou DE NOVO aqui.
   `[class*="backdrop"] > *` pesa (0,1,0), igual a `.bq-fc-card`. O <style> que a view
   injeta em runtime entra no fim do <head> e vence por ORDEM. O `[class]` extra leva
   os seletores a (0,2,0) e a disputa deixa de depender de quem chegou por último.
   Nem `#view` serviria: o pano é anexado ao <body>, fora de #view.                     */

/* O pano: escurece e desfoca o que está atrás. O desfoque é o que separa os dois
   planos mesmo quando o conteúdo de baixo é claro. */
[class*="backdrop"][class], .mm-overlay[class], .modal-backdrop[class] {
  background: rgba(6,5,10,.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* O painel: filho direto do pano. Opaco, ponto. */
[class*="backdrop"] > *[class],
.mm-overlay > *[class],
.modal-backdrop > *[class] {
  background: var(--ds-solid);
  border: 1px solid var(--border2);
  border-radius: var(--ds-r);
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[class*="backdrop"] > *[class]::after,
.mm-overlay > *[class]::after { display: none; }

/* Menus e dropdowns não vivem em pano — mas também não podem ser translúcidos:
   um menu que deixa ler o texto de baixo é um menu ilegível. */
.aa-avatar-menu[class], .avatar-menu[class], .aa-notif-dropdown[class], .notif-menu[class],
.asn-modal[class], .bib-modal[class], .cht-modal[class], .cht-nova-modal[class],
.fc-modal[class], .fr-modal[class], .mm-modal[class], .msg-modal[class], .pb-modal[class],
.rd-modal[class], .sim-modal[class], .modal[class], .modal-content[class] {
  background: var(--ds-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Campo dentro de modal: sobre superfície opaca, o campo precisa de contraste
   próprio — o vidro da seção 6 sumiria contra o painel. */
[class*="backdrop"] input[class], [class*="backdrop"] select[class],
[class*="backdrop"] textarea[class],
[class*="backdrop"] input, [class*="backdrop"] select, [class*="backdrop"] textarea,
.modal input, .modal select, .modal textarea {
  background: var(--ds-solid-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── BARRA FIXA DE AÇÃO (`.sticky-footer`) ───────────────────────────────
   Vista na foto do Rafael: "Selecionar todas · Incluir em um caderno" com o texto das
   questões atravessando. `position:fixed` + `background:var(--surface)` = 5% de branco
   sobre a lista, sem desfoque nenhum.

   Aqui a translucidez PODE ficar — é uma barra de ação sobre conteúdo, e o vidro é
   justamente a linguagem certa. O que faltava era o DESFOQUE: sem ele não há separação
   entre os dois planos, e translucidez sem separação é só texto sobre texto.

   Vale para as DUAS barras de ação do app: `.sticky-footer` (fixa) e `.bq-bulk`
   (grudada, a do Banco de Questões — a que aparece na foto). Achei a segunda só depois
   de procurar por COMPORTAMENTO (`position: fixed|sticky` + `var(--surface)`) em vez de
   pelo nome; pelo nome eu teria consertado uma e deixado a outra.                       */
.sticky-footer[class], .bq-bulk[class] {
  background: rgba(14,12,22,.88);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid var(--border2);
}
[data-theme="light"] .sticky-footer[class], .bq-bulk[class] {
  background: rgba(246,242,234,.93);
}

/* ═══ A LISTA DO SELECT — 08/08/2026 ══════════════════════════════════════════
   Rafael: "os filtros que abrem a aba para baixo estão transparentes, não é possível ler as
   alternativas".

   ⚠️ O dropdown NATIVO é desenhado pelo sistema operacional: não herda o fundo da página e
   ignora `backdrop-filter`. Com `--surface` (5,5% de branco) a lista aparecia praticamente
   transparente. Aqui a cor é SÓLIDA — vidro só funciona quando há algo atrás para embaçar.

   ⚠️ Espaço descendente explícito. */
select option,
select optgroup {
  background-color: #221f2b;
  color: #f5f1eb;
}
[data-theme="light"] select option,
[data-theme="light"] select optgroup {
  background-color: #ffffff;
  color: #1a1720;
}

/* O campo fechado: sem vidro, para o contorno e o texto ficarem legíveis sobre qualquer
   fundo — inclusive dentro de card claro. */
select {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}