/* =========================================================================
   IDENTIDADE — MeuAnatomy
   =========================================================================
   A marca e a cor do proprio conteudo: o vermelho-tijolo do musculo, que ja
   esta no atlas 3D. Distingue do azul generico de app de saude e liga a
   interface ao modelo.

   Regras do sistema:
   1. UMA cor de marca. Antes eram oito acentos declarados (azul, violeta,
      magenta, coral, teal, verde, ciano, brass) — oito destaques nao
      destacam nada.
   2. Cor semantica so tem uso semantico. Vermelho de erro NUNCA decora;
      por isso ele (#B3261E) e distinto do tijolo da marca (#A8362B).
   3. Contraste medido, nao estimado. Todos os valores abaixo foram
      verificados contra branco e contra o fundo da pagina.

   Verificado (WCAG 2.2):
     tinta      17.76  AAA      marca         6.51  AA
     grafite     7.77  AAA      marca-escura 10.02  AAA
     grafite-2   4.73  AA       erro          6.54  AA
     linha       3.15  AA (componente, >= 3:1 exigido por 1.4.11)
   ========================================================================= */
/* =========================================================================
   Atlas Anatomia — aplicativo de estudo anatomico (web app real)
   Tema escuro "grafite + azul clinico". Montserrat (UI) + JetBrains Mono
   (dados). App-shell: rail lateral + barra superior + tab bar no mobile.
   ========================================================================= */

/* Inter (interface, com numerais tabulares), Lora (leitura longa) e
   JetBrains Mono (dados alinhados). Montserrat saiu: era larga demais para
   texto de interface e nao tinha tabulares. A JetBrains Mono ja era baixada
   antes e nunca usada, porque --ff-mono apontava para Montserrat. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400..800&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Superficies: cinzas frios em camadas, com contraste previsivel */

  /* Texto: alto contraste em telas claras */

  /* Acentos vivos modernos, usados com parcimonia sobre base neutra. */

  /* Grade tonal moderna: tons vivos usados como acentos, nao como fundo dominante. */
  --grade-blue-700: #0043ce;
  --grade-blue-600: #0f62fe;
  --grade-blue-500: #4589ff;
  --grade-cyan-500: #1192e8;
  --grade-teal-500: #009d9a;
  --grade-red-500: #fa4d56;
  --grade-magenta-500: #ee5396;
  --grade-violet-500: #8a3ffc;

  /* Estados (legiveis sobre claro) */
  --ok: #2e9b5f;
  --ok-soft: var(--leaf-soft);
  --warn: #fa4d56;
  --warn-soft: var(--coral-soft);
  --danger: #c95045;
  --danger-soft: rgba(201, 80, 69, 0.12);

  /* Tipografia — Montserrat (UI/titulos) + Lora (leitura); sem mono no texto */
  /* Inter e desenhada para tela e traz numerais tabulares: contadores e
     tempos param de "dancar" ao mudar de valor. Montserrat e geometrica e
     larga — boa em titulo curto, cansativa em texto de interface. */
  --num-tab: "tnum" 1;
  --ff: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Tres papeis tipograficos, tres familias:
     --ff-marca  Fraunces  -> so a marca. Serifada de display, com personalidade.
     --ff-read   Lora      -> leitura longa. Serifada de texto, neutra.
     --ff        Inter     -> interface.
     A marca NAO usa --ff de proposito: com a mesma fonte da interface ela
     vira um titulo qualquer e para de funcionar como marca. */
  --ff-marca: "Fraunces", "Lora", Georgia, serif;
  --ff-read: "Lora", Georgia, serif;
  /* Apontava para Montserrat, que NAO e monoespacada: onde o codigo pedia
     alinhamento (contadores, cronometro, ids) nada alinhava. */
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Forma */
  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --tap: 48px; /* alvo de toque mínimo (mobile) */
  --rail-w: 250px;
  --rail-w-collapsed: 76px;
  --topbar-h: 62px;
  --shadow: 0 12px 30px -14px rgba(22, 22, 22, 0.24);
  --shadow-lg: 0 24px 60px -22px rgba(22, 22, 22, 0.32);

  color-scheme: light;
  font-family: var(--ff);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* --- marca --------------------------------------------------------- */
  --marca: #A8362B;
  --marca-forte: #7A241C;
  --marca-suave: rgba(168, 54, 43, 0.10);
  --marca-linha: rgba(168, 54, 43, 0.34);

  /* --- neutros ------------------------------------------------------- */
  --bg: #F7F8FA;
  --surface: #ffffff;
  --surface-2: #EFF1F4;
  --surface-3: #E3E7EC;
  --text: #16181D;
  --text-muted: #4A5361;
  --text-dim: #6B7481;
  --border: #8892A1;          /* funcional: contorno de campo e componente */
  --border-2: #6B7481;
  --border-suave: #E3E7EC;    /* separador decorativo, isento de 3:1 */

  /* --- semanticas (uso semantico apenas) ------------------------------ */
  --erro: #B3261E;
  --erro-suave: rgba(179, 38, 30, 0.10);
  --ok: #1D7A44;
  --ok-suave: rgba(29, 122, 68, 0.10);
  --aviso: #8A5A00;
  --aviso-suave: rgba(138, 90, 0, 0.10);

  /* --- compatibilidade ------------------------------------------------
     O codigo existente referencia --accent/--danger/--ok em muitos pontos.
     Apontam para a marca em vez de serem trocados um a um, o que evitaria
     um mutirao de substituicao sem ganho. */
  --accent: var(--marca);
  --accent-hover: var(--marca-forte);
  --accent-press: var(--marca-forte);
  --accent-soft: var(--marca-suave);
  --accent-line: var(--marca-linha);
  --danger: var(--erro);
  --ok-color: var(--ok);
}

#product-app-root,
#product-app-root * {
  box-sizing: border-box;
}

body:has(#product-app-root) {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  /* O shell possui uma única área de rolagem (.pa-content). Manter o body
     rolável ao mesmo tempo cria dois scroll containers no Safari e, depois de
     trocar de tela, o gesto pode ficar preso no container antigo. */
  overflow: hidden;
}

/* :where() = especificidade ZERO — botões herdam por padrão, mas qualquer cor/fonte
   explícita de classe vence (senão #id button defeats .classe e quebra o contraste). */
:where(#product-app-root button, #product-app-root input, #product-app-root select) {
  font: inherit;
  color: inherit;
}

#product-app-root button {
  font-family: var(--ff);
}

#product-app-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbars finas (cara de app) */
#product-app-root *::-webkit-scrollbar { width: 11px; height: 11px; }
#product-app-root *::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
#product-app-root *::-webkit-scrollbar-thumb:hover { background: var(--border-2); background-clip: padding-box; }
#product-app-root * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }

.pa-mono {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum" 1;
}

.pa-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------- Shell ---------------------------------- */

.pa-app {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  background: var(--bg);
  /* A própria largura anima; sem isto o menu saltava entre os dois tamanhos. */
  transition: grid-template-columns .55s cubic-bezier(.22, 1, .36, 1);
}

.pa-app[data-rail-collapsed="true"] {
  grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr);
}

@media (prefers-reduced-motion: reduce) {
  .pa-app { transition: none; }
}

.pa-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------- Rail ----------------------------------- */

/* Barra lateral — estetica flat: mesma linguagem do conteudo, sem tema
   proprio. A distincao vem da borda e do item ativo, nao de cor de fundo. */
.pa-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow: hidden;
}

.pa-nav-section {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 10px 6px;
}

.pa-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 16px;
  margin-bottom: 6px;
  /* Sem divisor: a sutura da marca ja fecha o bloco visualmente, e uma segunda
     linha logo abaixo dela competia com o proprio sinal. A borda tambem ficou
     pesada quando --border passou de #c6c6c6 para o #8892A1 acessivel. */
}

/* .pa-brand-mark removido: a marca deixou de ter simbolo. */


.pa-brand-text { min-width: 0; }

.pa-brand-text strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Classe propria, nao posicao. Este seletor ja quebrou a marca duas vezes:
   como `span` pegava os spans internos do wordmark, e como `> span` pegou o
   involucro da marca — nos dois casos impondo caixa alta ao nome. */
.pa-brand-sub {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.pa-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.pa-nav-section {
  margin: 14px 8px 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pa-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}

.pa-nav-item .pa-icon { width: 19px; height: 19px; flex-shrink: 0; }

.pa-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Ativo sem relevo: fundo suave, texto no acento e uma barra fina a esquerda.
   Em estetica flat o estado se le por cor e peso, nao por profundidade. */
.pa-nav-item[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.pa-nav-item[data-active="true"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.pa-nav-count {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.pa-rail-foot {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pa-data-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
}

.pa-data-chip .pa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

.pa-data-chip[data-status="ready"] { color: var(--ok); }
.pa-data-chip[data-status="ready"] .pa-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.pa-data-chip[data-status="error"] { color: var(--danger); }
.pa-data-chip[data-status="error"] .pa-dot { background: var(--danger); }

.pa-rail-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.pa-rail-collapse:hover { background: var(--surface-2); color: var(--text); }
.pa-rail-collapse .pa-icon { width: 18px; height: 18px; transition: transform 0.2s ease; }

/* Estado colapsado (desktop) */
.pa-app[data-rail-collapsed="true"] .pa-brand { justify-content: center; padding-inline: 0; }

/* Recolhimento suave (padrão de Collapsible-Sidebar-with-Smooth-Animation).
   Antes os rótulos sumiam com display:none — troca instantânea, sem transição
   possível. Aqui eles encolhem: opacity + width + flex-basis animam juntos, e
   pointer-events:none evita clique em texto invisível. */
.pa-brand-text,
.pa-nav-section,
.pa-nav-item span,
.pa-nav-count,
.pa-data-chip span,
.pa-rail-collapse span {
  overflow: hidden;
  white-space: nowrap;
  transition:
    opacity .35s cubic-bezier(.22, 1, .36, 1),
    width .55s cubic-bezier(.22, 1, .36, 1),
    margin .55s cubic-bezier(.22, 1, .36, 1);
}

.pa-app[data-rail-collapsed="true"] .pa-brand-text,
.pa-app[data-rail-collapsed="true"] .pa-nav-section,
.pa-app[data-rail-collapsed="true"] .pa-nav-item span,
.pa-app[data-rail-collapsed="true"] .pa-nav-count,
.pa-app[data-rail-collapsed="true"] .pa-data-chip span,
.pa-app[data-rail-collapsed="true"] .pa-rail-collapse span {
  opacity: 0;
  width: 0;
  min-width: 0;
  margin: 0;
  flex: 0 0 0;
  pointer-events: none;
  /* Ao recolher não há espera: o feedback é imediato. O escalonamento existe
     só na abertura, abaixo. */
  transition-delay: 0s;
}

/* Abertura escalonada: os itens reaparecem em cascata, o que dá a sensação de
   "desdobrar" em vez de piscar tudo de uma vez. */
.pa-app[data-rail-collapsed="false"] .pa-brand-text { transition-delay: .10s; }
.pa-app[data-rail-collapsed="false"] .pa-nav-section { transition-delay: .16s; }
.pa-app[data-rail-collapsed="false"] .pa-nav-item span { transition-delay: .22s; }
.pa-app[data-rail-collapsed="false"] .pa-nav-count { transition-delay: .28s; }
.pa-app[data-rail-collapsed="false"] .pa-data-chip span,
.pa-app[data-rail-collapsed="false"] .pa-rail-collapse span { transition-delay: .34s; }
.pa-app[data-rail-collapsed="true"] .pa-nav-item { justify-content: center; padding-inline: 0; }
.pa-app[data-rail-collapsed="true"] .pa-data-chip { justify-content: center; padding-inline: 0; }
.pa-app[data-rail-collapsed="true"] .pa-rail-collapse { justify-content: center; }
.pa-app[data-rail-collapsed="true"] .pa-rail-collapse .pa-icon { transform: rotate(180deg); }

/* ------------------------------ Topbar ---------------------------------- */

.pa-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: 0 clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}

.pa-topbar-title { min-width: 0; }

.pa-topbar-title .pa-crumb {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pa-topbar-title h1 {
  margin: 1px 0 0;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-search-global {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(320px, 34vw);
  padding: 9px 13px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: text;
  transition: border-color 0.15s ease;
}

.pa-search-global:focus-within { border-color: var(--accent); }
.pa-search-global .pa-icon { width: 16px; height: 16px; flex-shrink: 0; }

.pa-search-global input {
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 0.86rem;
  color: var(--text);
}
.pa-search-global input::placeholder { color: var(--text-dim); }

.pa-kbd {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  padding: 2px 6px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  color: var(--text-dim);
}

.pa-icon-btn {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.pa-icon-btn:hover { background: var(--surface-2); }
.pa-icon-btn .pa-icon { width: 20px; height: 20px; }

/* ------------------------------ Conteudo -------------------------------- */

.pa-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
}

.pa-content[data-mode="page"] {
  padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 34px) 80px;
}

.pa-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.4vw, 40px);
}

.pa-content[data-mode="atlas"] { padding: 0; overflow: hidden; }
/* Leitura: conteudo longo, rola na propria area de conteudo. Sem altura fixa,
   senao a apostila fica cortada no fim da viewport. */
.pa-content[data-mode="leitura"] { padding: 0; overflow-y: auto; }
.pa-atlas-host, .pa-photo-host { height: 100%; width: 100%; }
.pa-apostila-host {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  contain: layout;
}

/* Entrada app: fade-rise curto */
@media (prefers-reduced-motion: no-preference) {
  .pa-content[data-mode="page"] .pa-page > * {
    opacity: 0;
    transform: translateY(10px);
    animation: pa-rise 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }
  .pa-content[data-mode="page"] .pa-page > *:nth-child(1) { animation-delay: 0.02s; }
  .pa-content[data-mode="page"] .pa-page > *:nth-child(2) { animation-delay: 0.08s; }
  .pa-content[data-mode="page"] .pa-page > *:nth-child(3) { animation-delay: 0.14s; }
  .pa-content[data-mode="page"] .pa-page > *:nth-child(4) { animation-delay: 0.2s; }
}
@keyframes pa-rise { to { opacity: 1; transform: none; } }

/* --------------------------- Secao / cabecalho -------------------------- */

.pa-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pa-sec-head h2 {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pa-sec-head .pa-eyebrow { margin-bottom: 5px; }

.pa-metrics {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.pa-metric {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.pa-metric b {
  font-family: var(--ff-mono);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text);
}

.pa-metric span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ------------------------------ Buttons --------------------------------- */

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 17px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.pa-btn:active { transform: translateY(1px); }
.pa-btn .pa-icon { width: 17px; height: 17px; }

.pa-btn-primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-press));
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(8, 118, 109, 0.58);
}
.pa-btn-primary:hover { background: var(--accent-hover); }

.pa-btn-ghost {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.pa-btn-ghost:hover { background: var(--surface-3); border-color: var(--border-2); }

.pa-btn-sm { min-height: 40px; padding: 8px 14px; font-size: 0.82rem; }

.pa-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--accent-hover);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.pa-btn-link:hover { color: var(--accent); }
.pa-btn-link .pa-icon { width: 15px; height: 15px; transition: transform 0.18s ease; }
.pa-btn-link:hover .pa-icon { transform: translateX(3px); }

/* ----------------------- Card continuar (home) -------------------------- */

.pa-continue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.92fr);
  grid-template-areas:
    "body preview"
    "steps preview";
  gap: clamp(16px, 2.4vw, 28px) clamp(20px, 3vw, 38px);
  align-items: start;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(130% 150% at 100% 0%, var(--accent-soft), transparent 48%),
    var(--surface);
  position: relative;
  overflow: hidden;
}

/* Preview 3D integrado ao card: o osso "flutua" sobre a superficie,
   sem caixa/borda propria. */
.pa-continue-preview {
  grid-area: preview;
  position: relative;
  align-self: stretch;
  min-height: 320px;
  cursor: grab;
}
.pa-continue-preview:active { cursor: grabbing; }

.pa-preview-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.pa-preview-canvas { width: 100%; height: 100%; display: block; }
.pa-preview-poster { width: 100%; height: 100%; object-fit: contain; }
.pa-preview-glyph { color: var(--accent-hover); opacity: 0.5; }
.pa-preview-glyph .pa-icon { width: 56px; height: 56px; }

.pa-preview-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pa-spin 0.8s linear infinite;
}

/* Botao "Ver em 3D" (preview sob demanda em rede limitada/mobile) */
.pa-preview-load {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: rgba(8, 11, 15, 0.72);
  color: #e9eef5; /* botão sobre área escura — texto claro */
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pa-preview-load:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pa-preview-load .pa-icon { width: 17px; height: 17px; }

.pa-continue-body { grid-area: body; min-width: 0; }
.pa-continue-body .pa-eyebrow { color: var(--accent-hover); }

.pa-continue-body h2 {
  margin: 8px 0 6px;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.pa-continue-body p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 52ch;
}

.pa-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Foco de prova (chips) */
.pa-focus { margin: 0 0 18px; }
.pa-focus-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 9px;
}
.pa-focus-label .pa-icon { width: 14px; height: 14px; }
.pa-focus-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pa-focus-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,0)),
    var(--coral-soft);
  border: 1px solid color-mix(in srgb, var(--coral) 38%, transparent);
  color: #a23d2d;
  font-size: 0.76rem;
  font-weight: 600;
}

/* Medidor de progresso de estudo */
.pa-track {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.pa-track-bar {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.pa-track-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pa-track-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.pa-track-label b {
  font-family: var(--ff-mono);
  color: var(--text);
  font-weight: 600;
}

/* Dica guiada por passo */
.pa-step-tip {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Roteiro compacto */
.pa-steps {
  grid-area: steps;
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.pa-steps-head {
  margin: 0 4px 8px;
}

.pa-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 6px;
  border-radius: var(--r-sm);
}
.pa-steps li + li { border-top: 1px solid var(--border); }

.pa-step-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--accent-hover);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.pa-step-body strong { display: block; font-size: 0.86rem; font-weight: 600; }
.pa-step-body small { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

/* ----------------------------- Launcher --------------------------------- */

.pa-launch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.pa-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.pa-tile:hover { border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-2px); }

.pa-tile-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(145deg, var(--cyan-soft), var(--accent-soft));
  color: var(--accent-hover);
}
.pa-tile-icon .pa-icon { width: 21px; height: 21px; }

.pa-tile strong { font-size: 0.92rem; font-weight: 600; }
.pa-tile span { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--text-dim); }

/* --------------------------- Grid de regioes ---------------------------- */

.pa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.pa-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.pa-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }

.pa-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.pa-chip {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
}

.pa-card h3 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.pa-card p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted); }

.pa-stat-row {
  display: flex;
  gap: 18px;
  padding: 2px 0;
}
.pa-stat-row .pa-stat { display: flex; flex-direction: column; gap: 1px; }
.pa-stat b { font-family: var(--ff-mono); font-size: 1.04rem; font-weight: 600; }
.pa-stat span { font-size: 0.66rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

.pa-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.pa-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }

.pa-progress-row { display: flex; align-items: center; gap: 12px; }
.pa-progress-row .pa-progress { flex: 1; }
.pa-progress-row small { font-family: var(--ff-mono); font-size: 0.72rem; color: var(--text-muted); }

.pa-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

/* ------------------------------ Tabela ---------------------------------- */

.pa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.pa-search {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 2px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  min-width: 280px;
  transition: border-color 0.15s ease;
}
.pa-search:focus-within { border-color: var(--accent); }
.pa-search .pa-icon { width: 16px; height: 16px; color: var(--text-dim); }
.pa-search input { border: 0; outline: none; background: transparent; width: 100%; min-height: 42px; font-size: 0.86rem; color: var(--text); }
.pa-search input::placeholder { color: var(--text-dim); }

.pa-table {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}

.pa-tr {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
}

.pa-thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pa-tbody .pa-tr { border-top: 1px solid var(--border); transition: background 0.13s ease; }
.pa-tbody .pa-tr:first-child { border-top: 0; }
.pa-tbody .pa-tr:hover { background: var(--surface-2); }

.pa-td-main strong { display: block; font-size: 0.9rem; font-weight: 600; }
.pa-td-main span { font-family: var(--ff-mono); font-size: 0.7rem; color: var(--text-dim); }
.pa-td-sub { font-size: 0.82rem; color: var(--text-muted); }

/* ------------------------------- Badges --------------------------------- */

.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}
.pa-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pa-badge[data-status="validado"],
.pa-badge[data-status="aprovado"],
.pa-badge[data-status="cc0"] { background: var(--ok-soft); color: var(--ok); }
.pa-badge[data-status="revisar"],
.pa-badge[data-status="divergente"] { background: var(--warn-soft); color: var(--warn); }
.pa-badge[data-status="em-estudo"] { background: var(--cyan-soft); color: var(--cyan); }
.pa-badge[data-status^="cc by"] { background: var(--violet-soft); color: var(--violet); }

/* ------------------------------ Estados --------------------------------- */

.pa-empty-hint { margin: 18px 4px; font-size: 0.88rem; color: var(--text-dim); }

.pa-loading-panel {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 50vh;
  color: var(--text-muted);
}
.pa-loading-mark {
  width: 34px; height: 34px;
  border: 2.5px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pa-spin 0.8s linear infinite;
}
.pa-loading-panel p { margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--text-muted); }
@keyframes pa-spin { to { transform: rotate(360deg); } }

.pa-atlas-fallback {
  display: grid; place-items: center; gap: 14px;
  height: 100%; padding: 48px; text-align: center; color: var(--text-muted);
}
.pa-atlas-fallback .pa-icon { width: 34px; height: 34px; color: var(--danger); }
.pa-atlas-fallback strong { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.pa-atlas-fallback p { margin: 0; max-width: 44ch; line-height: 1.55; }

.pa-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ------------------------- Tab bar (mobile) ----------------------------- */

.pa-tabbar { display: none; }

/* ----------------------- Landing preview embutido ----------------------- */

.pa-app[data-preview-mode="landing"] {
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(680px 420px at 92% -10%, rgba(15, 90, 84, 0.14), transparent 60%),
    var(--bg);
}

.pa-app[data-preview-mode="landing"] .pa-rail,
.pa-app[data-preview-mode="landing"] .pa-tabbar {
  display: none;
}

.pa-app[data-preview-mode="landing"] .pa-topbar {
  height: 76px;
  padding: 12px 20px;
  background: rgba(253, 251, 245, 0.9);
}

.pa-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.pa-preview-top h1 {
  margin: 2px 0 0;
  font-size: clamp(1.06rem, 2vw, 1.36rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.pa-preview-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pa-preview-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.pa-preview-badges span:first-child {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-press);
}

.pa-app[data-preview-mode="landing"] .pa-content[data-mode="page"] {
  padding: 18px 20px 28px;
}

.pa-app[data-preview-mode="landing"] .pa-page {
  max-width: 980px;
  gap: 18px;
}

.pa-app[data-preview-mode="landing"] .pa-continue {
  grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.78fr);
  grid-template-areas:
    "body preview"
    "steps preview";
  gap: 16px 22px;
  padding: 20px;
  border-radius: var(--r);
}

.pa-app[data-preview-mode="landing"] .pa-continue-body h2 {
  font-size: clamp(1.38rem, 3vw, 1.86rem);
}

.pa-app[data-preview-mode="landing"] .pa-continue-body p {
  margin-bottom: 12px;
}

.pa-app[data-preview-mode="landing"] .pa-focus {
  margin-bottom: 12px;
}

.pa-app[data-preview-mode="landing"] .pa-track {
  margin-bottom: 13px;
}

.pa-app[data-preview-mode="landing"] .pa-continue-preview {
  min-height: 260px;
}

.pa-app[data-preview-mode="landing"] .pa-steps {
  padding: 12px;
}

.pa-app[data-preview-mode="landing"] .pa-steps li {
  padding: 8px 6px;
}

.pa-app[data-preview-mode="landing"] .pa-launch {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pa-app[data-preview-mode="landing"] .pa-tile {
  min-height: 118px;
}

.pa-app[data-preview-mode="landing"] .pa-content[data-mode="atlas"],
.pa-app[data-preview-mode="landing"] .pa-atlas-host,
.pa-app[data-preview-mode="landing"] .pa-photo-host {
  height: calc(100dvh - 76px);
}

.pa-app[data-preview-mode="landing"] .apo {
  min-height: calc(100dvh - 76px);
  background:
    radial-gradient(580px 300px at 100% 0%, rgba(17,146,232,.09), transparent 62%),
    var(--bg);
}

.pa-app[data-preview-mode="landing"] .apo__doc {
  max-width: 940px;
  padding: 24px 32px 70px;
}

.pa-app[data-preview-mode="landing"] .apo__doc-top {
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.pa-app[data-preview-mode="landing"] .apo__crumb {
  display: block;
  margin-top: 3px;
}

.pa-app[data-preview-mode="landing"] .apo__h1 {
  max-width: 760px;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
}

.pa-app[data-preview-mode="landing"] .apo__lead {
  max-width: 760px;
}

.pa-app[data-preview-mode="landing"] .apo__learning-path {
  padding: 8px;
  gap: 4px;
}

.pa-app[data-preview-mode="landing"] .apo__learning-path li {
  padding: 6px;
}

.pa-app[data-preview-mode="landing"] .apo__audio-card {
  margin-block: 16px;
}

.pa-app[data-preview-mode="landing"] .apo__bloco {
  padding-block: 3px;
}

.pa-app[data-preview-mode="landing"] .apo__teste,
.pa-app[data-preview-mode="landing"] .apo__fontes {
  margin-top: 22px;
}

@media (max-width: 720px) {
  .pa-app[data-preview-mode="landing"] .pa-topbar {
    height: auto;
    min-height: 76px;
    padding: 11px 14px;
  }

  .pa-preview-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .pa-preview-badges {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .pa-app[data-preview-mode="landing"] .pa-content[data-mode="page"] {
    padding: 14px 14px 24px;
  }

  .pa-app[data-preview-mode="landing"] .pa-continue {
    grid-template-columns: 1fr;
    grid-template-areas:
      "preview"
      "body"
      "steps";
    padding: 16px;
  }

  .pa-app[data-preview-mode="landing"] .pa-launch {
    grid-template-columns: 1fr;
  }

  .pa-app[data-preview-mode="landing"] .apo__doc {
    padding: 18px 16px 64px;
  }

  .pa-app[data-preview-mode="landing"] .apo__doc-top {
    padding: 12px;
  }

  .pa-app[data-preview-mode="landing"] .apo__niveis {
    width: 100%;
    margin-left: 0;
  }

  .pa-app[data-preview-mode="landing"] .apo__nivel {
    flex: 1;
    padding-inline: 8px;
  }

  .pa-app[data-preview-mode="landing"] .apo__learning-path {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------- Responsivo ------------------------------- */

@media (max-width: 860px), (orientation: landscape) and (max-height: 540px) {
  .pa-app,
  .pa-app[data-rail-collapsed="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .pa-rail { display: none; }

  .pa-icon-btn { display: none; }

  .pa-content[data-mode="page"] { padding-bottom: 92px; }

  .pa-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  }

  .pa-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    padding: 8px 4px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.62rem;
    font-weight: 600;
  }
  .pa-tab .pa-icon { width: 21px; height: 21px; }
  .pa-tab[data-active="true"] { color: var(--accent-hover); }

  .pa-continue {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "body"
      "steps";
  }
  .pa-continue-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: clamp(228px, 68vw, 360px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  /* No mobile o Atlas 3D ocupa altura definida: o palco fica fixo no topo e a
     FOLHA (painel) rola por dentro — robusto, sem sticky/dvh. */
  .pa-content[data-mode="atlas"] { overflow: hidden; }
  .pa-atlas-host { height: 100%; }

  /* Leitura e páginas longas devem continuar rolando no container principal
     mesmo quando o Safari recalcula a altura da barra de endereço. */
  .pa-content[data-mode="leitura"],
  .pa-content[data-mode="page"] {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pa-search-global { width: auto; flex: 1; }
  .pa-search-global .pa-kbd { display: none; }
}

/* Navegação de bolso: a barra inferior é navegação, não uma coleção de
   cartões. Em telas estreitas os cinco contornos individuais roubavam área
   de leitura e davam a impressão de cinco CTAs concorrentes. */
@media (max-width: 860px) {
  #product-app-root .pa-tabbar {
    min-height: 64px;
    gap: 0;
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 97%, transparent);
  }

  #product-app-root .pa-tab {
    min-height: 56px;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #product-app-root .pa-tab:hover,
  #product-app-root .pa-tab:active {
    border: 0;
    background: transparent;
  }

  #product-app-root .pa-tab[data-active="true"] {
    border: 0;
    background: transparent;
    color: var(--accent-hover);
  }

  #product-app-root .pa-tab[data-active="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  #product-app-root .pa-tab { position: relative; }
  #product-app-root .pa-tab .pa-icon { width: 20px; height: 20px; }
}

@media (max-width: 560px) {
  .pa-search { min-width: 0; width: 100%; }
  .pa-toolbar { align-items: stretch; }
  .pa-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .pa-tr .pa-td-sub { grid-column: 1; }
  .pa-tr .pa-badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .pa-tr .pa-btn-link { grid-column: 1 / -1; }
  .pa-thead { display: none; }
}

/* =========================================================================
   Atlas fotografico — mesmo tema de app escuro
   ========================================================================= */

.pa-photo {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  height: 100%;
  background: var(--bg);
}

.pa-photo-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 14px 14px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  min-height: 0;
}

.pa-photo-rail-head { flex: none; }
.pa-photo-rail-head .pa-eyebrow { display: block; margin-bottom: 8px; }
.pa-photo-rail-head h2 { margin: 0; font-size: 1.04rem; font-weight: 700; }
.pa-photo-rail-head p { margin: 6px 0 0; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--text-dim); }

.pa-photo-search { min-width: 0; width: 100%; flex: none; }

/* Busca/cabecalho ficam fixos; apenas a lista de ossos rola. */
.pa-photo-rail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.pa-photo-rail-region {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 4px 7px;
  background: linear-gradient(var(--surface) 70%, transparent);
  border-bottom: 1px solid var(--border);
}

.pa-photo-bone {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pa-photo-bone:hover { background: var(--surface-2); }
.pa-photo-bone[data-active="true"] { background: var(--accent-soft); border-color: var(--accent-line); }

.pa-photo-bone-thumb {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 8px; overflow: hidden;
  background: #0a0d11;
  color: var(--text-dim);
  flex-shrink: 0;
}
.pa-photo-bone-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pa-photo-bone-info { min-width: 0; }
.pa-photo-bone-info strong { display: block; font-size: 0.88rem; font-weight: 600; }
.pa-photo-bone-info small { font-family: var(--ff-mono); font-size: 0.68rem; color: var(--text-dim); }

.pa-photo-stage {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(20px, 3vw, 34px);
  overflow-y: auto;
}

.pa-photo-stage-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pa-photo-stage-head .pa-eyebrow { display: block; margin-bottom: 7px; color: var(--accent-hover); }
.pa-photo-stage-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; }
.pa-photo-stage-head p { margin: 6px 0 0; font-size: 0.86rem; color: var(--text-muted); }
.pa-photo-stage-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.pa-photo-figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.pa-photo-frame {
  position: relative;
  aspect-ratio: var(--ar, 4 / 3);
  max-height: 58vh; max-width: 100%;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #11161d, #07090c 78%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.pa-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

/* palco 3D que substitui a foto no atlas fotográfico.
   Largura/altura EXPLÍCITAS: sem <img>, o aspect-ratio + margin:auto colapsa o frame. */
.pa-3d-frame { width: 100%; height: min(56vh, 520px); aspect-ratio: auto; max-height: none; margin: 0; cursor: grab; }
.pa-3d-frame:active { cursor: grabbing; }
.pa-3d-host { position: absolute; inset: 0; width: 100%; height: 100%; }
.pa-3d-host canvas { display: block; width: 100% !important; height: 100% !important; }
.pa-photo-overlay-btn.is-principal { border-color: var(--accent, #0f5a54); color: var(--accent, #0f5a54); font-weight: 700; }
.pa-photo-base { position: relative; z-index: 1; }
.pa-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.pa-photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(16, 20, 24, 0.62);
  color: #eef2f0; /* sobre a foto escura — texto sempre claro */
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.75);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pa-photo-nav:hover { background: rgba(55, 194, 177, 0.9); border-color: transparent; color: #06231f; }
.pa-photo-nav.prev { left: 14px; }
.pa-photo-nav.next { right: 14px; }

.pa-photo-counter {
  position: absolute; right: 14px; bottom: 14px;
  z-index: 3;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(16, 20, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef2f0; /* sobre a foto escura */
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.75);
}

.pa-photo-caption { display: flex; flex-direction: column; gap: 7px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.pa-photo-credit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 0.72rem; color: var(--text-dim); }
.pa-photo-credit a { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent-hover); font-weight: 600; }

.pa-photo-layers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pa-photo-layers-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pa-photo-layers-head .pa-icon { width: 15px; height: 15px; color: var(--accent-hover); }
.pa-photo-layer-note {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.pa-photo-layer-note strong { color: var(--text); font-weight: 600; }

.pa-photo-overlays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Grupo de camadas por categoria (ex.: "Ossos" com nomes especificos) */
.pa-photo-overlay-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding-top: 4px;
}
.pa-photo-overlay-group-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pa-photo-overlay-btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pa-photo-overlay-btn:hover,
.pa-photo-overlay-btn[data-active="true"] {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--text);
}

.pa-photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 11px; }

.pa-photo-thumb {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 0; overflow: hidden; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.pa-photo-thumb:hover { transform: translateY(-2px); border-color: var(--border-2); }
.pa-photo-thumb[data-active="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pa-photo-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; background: #0a0d11; }
.pa-photo-thumb span { display: block; padding: 7px 9px; font-family: var(--ff-mono); font-size: 0.64rem; color: var(--text-muted); text-align: left; line-height: 1.3; }

.pa-photo-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pa-photo-info-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.pa-photo-info-card .pa-eyebrow { display: block; color: var(--accent-hover); }
.pa-photo-info-card p { margin: 0; font-size: 0.9rem; color: var(--text); line-height: 1.6; }
.pa-photo-obs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; }

.pa-landmark-index { list-style: none; margin: 0; padding: 0; }
.pa-landmark-index li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.pa-landmark-index li:last-child { border-bottom: 0; }
.pa-landmark-index strong { font-size: 0.9rem; font-weight: 600; }
.pa-landmark-index em { font-size: 0.82rem; color: var(--text-dim); font-style: italic; }
.pa-mini-tag { margin-left: auto; font-family: var(--ff-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.pa-exam-flag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
}

.pa-info-line { margin-top: 8px; }
.pa-info-line dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.pa-info-line dd { margin: 4px 0 0; font-size: 0.92rem; color: var(--text); line-height: 1.55; }

.pa-photo-awaiting {
  display: grid; place-items: center; gap: 14px; text-align: center;
  padding: 48px 28px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.pa-photo-awaiting-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r); background: var(--surface-3); color: var(--text-dim); }
.pa-photo-awaiting-mark .pa-icon { width: 26px; height: 26px; }
.pa-photo-awaiting strong { font-size: 1.1rem; font-weight: 700; }
.pa-photo-awaiting p { margin: 0; max-width: 50ch; color: var(--text-muted); line-height: 1.55; }

.pa-photo-bone[data-has-photos="false"] .pa-photo-bone-thumb { color: var(--text-dim); }
.pa-photo-bone[data-has-photos="false"] small { color: var(--warn); }

.pa-photo-empty { display: grid; place-content: center; gap: 10px; height: 100%; padding: 48px; text-align: center; color: var(--text-muted); }
.pa-photo-empty strong { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.pa-photo-empty p { margin: 0; max-width: 46ch; line-height: 1.55; }

@media (max-width: 860px) {
  .pa-photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pa-photo-rail { border-right: 0; border-bottom: 1px solid var(--border); max-height: 38vh; }
}

/* Atlas embutido em paisagem (celular deitado): o app preenche a area e a
   lista de pontos rola internamente, em vez de a pagina inteira rolar. */
/* Paisagem em tela baixa: recupera altura vertical encolhendo a barra superior.
   O atlas mantem a rolagem do retrato (modelo fixo + pontos abaixo). */
@media (orientation: landscape) and (max-height: 540px) {
  .pa-topbar { height: 46px; }
  .pa-topbar-title h1 { font-size: 1rem; }
}

/* =========================================================================
   A camada "Skeuomorphic controls layer" foi removida daqui.

   Eram 343 linhas que pintavam 83 seletores com materiais simulados
   (--mat-ceramic, --mat-brass, --mat-blue-metal, --mat-rubber,
   --mat-glass, --mat-texture), bisel, relevo e estado pressionado.
   Trocada por uma estetica flat: hierarquia por tipografia e espaco,
   borda de 1px, sem sombra e sem gradiente. Ver a secao "ESTETICA FLAT"
   no fim do arquivo.
   ========================================================================= */

/* Falha de rede no boot: painel com saída (botão de retry), em vez de só o chip
   "Dados indisponíveis" no rail — antes a única saída era recarregar a página. */
.pa-error-panel {
  gap: 10px;
  text-align: center;
  border: 1px solid var(--danger);
  background: var(--danger-soft);
}
.pa-error-panel > .pa-icon { width: 32px; height: 32px; color: var(--danger); }
.pa-error-panel strong { font-size: 1.05rem; color: var(--danger); }
.pa-error-panel p { max-width: 46ch; margin: 0 auto; }
.pa-error-panel .pa-btn { margin-top: 6px; }

/* =========================================================================
   ESTÉTICA FLAT
   Substitui a camada realista removida acima. Regra do sistema: hierarquia
   por tipografia, cor e espaço — nunca por profundidade. Sem sombra, sem
   gradiente, sem textura, sem bisel. Borda de 1px define superfície.
   ========================================================================= */

#product-app-root {
  --flat-borda: var(--border);
  --flat-raio: 8px;
  --flat-raio-g: 12px;
}

/* Superfícies: caixa é borda, não sombra. */
#product-app-root :where(
  .pa-card, .pa-tile, .es-card, .es-stat, .es-track, .es-question,
  .apo__quiz, .apo__callout, .corpo-lm-card, .pa-panel
) {
  background: var(--surface);
  border: 1px solid var(--flat-borda);
  border-radius: var(--flat-raio-g);
  box-shadow: none;
}

/* Controles: sem relevo nem estado pressionado simulado. O feedback é
   mudança de fundo e de cor, imediata. */
#product-app-root :where(
  .pa-btn, .pa-tab, .pa-icon-btn, .pa-preview-load,
  .pa-photo-overlay-btn, .pa-photo-thumb,
  .es-btn, .es-subnav-item, .es-choice, .es-chip, .es-seg
) {
  background: var(--surface);
  border: 1px solid var(--flat-borda);
  border-radius: var(--flat-raio);
  box-shadow: none;
  background-image: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

#product-app-root :where(
  .pa-btn, .pa-tab, .pa-icon-btn, .es-btn, .es-subnav-item, .es-choice
):hover {
  background: var(--surface-2);
  border-color: var(--text-dim);
}

#product-app-root :where(
  .pa-btn, .pa-tab, .pa-icon-btn, .es-btn, .es-subnav-item, .es-choice
):active {
  background: var(--surface-2);
  transform: none;         /* o realista afundava o botão; aqui não há eixo Z */
}

/* Estado ativo/selecionado: cor sólida do acento, contorno mais forte. */
#product-app-root :where(
  .pa-tab[data-active="true"], .es-subnav-item[data-active="true"],
  .es-choice[data-active="true"], .es-chip[data-active="true"],
  .es-seg[data-active="true"], .apo__licao.is-active,
  .corpo-lm[data-active="true"]
) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
  box-shadow: none;
  background-image: none;
}

/* Botão primário: preenchido, chapado. */
#product-app-root :where(.pa-btn-primary, .es-btn-primary) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  background-image: none;
  box-shadow: none;
}
#product-app-root :where(.pa-btn-primary, .es-btn-primary):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Foco visível — sem relevo, o anel de foco passa a ser o único indicador
   para quem navega por teclado. */
#product-app-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Últimos resquícios decorativos do tema anterior: gradientes e brilhos em
   elementos que não são controles. Em sistema flat eles viram cor sólida —
   o destaque continua existindo, sem simular material. */
#product-app-root :where(.pa-tile-icon, .pa-focus-chip, .pa-continue) {
  background-image: none;
  box-shadow: none;
}

#product-app-root .pa-tile-icon {
  background: var(--accent-soft);
  color: var(--accent-hover);
  border-radius: var(--flat-raio);
}

#product-app-root .pa-focus-chip {
  background: var(--surface-2);
  border: 1px solid var(--flat-borda);
  color: var(--text);
}

#product-app-root .pa-continue {
  background: var(--surface);
  border: 1px solid var(--flat-borda);
}

/* .pa-brand-mark saiu junto com o simbolo: a marca agora e so tipografia. */

/* O ponto de status mantém a cor, perde o halo. */
#product-app-root .pa-dot { box-shadow: none; }

/* Numerais tabulares onde o valor muda no lugar: contador, cronometro,
   progresso. Sem isto os digitos tem larguras diferentes e o texto "pula"
   a cada atualizacao. */
#product-app-root :where(.pa-nav-count, .pa-data-chip, .es-timer, .es-stat, .pa-badge, output) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =========================================================================
   MARCA TIPOGRÁFICA — MeuAnatomy
   Sem símbolo. O contraste de peso entre "Meu" e "Anatomy" transforma a
   mistura de idiomas em decisão de desenho, e o ponto concentra a cor da
   marca num único sinal — colorir a palavra inteira faria a marca competir
   com o vermelho que a navegação usa no estado ativo.
   ========================================================================= */
#product-app-root .pa-wordmark {
  display: block;
  font-family: var(--ff-marca);
  /* opsz alto pede o desenho de display da Fraunces: mais contraste entre
     hastes finas e grossas, que e o que da carater no tamanho da marca. */
  font-variation-settings: "opsz" 40;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.022em;   /* marca pede trama mais fechada que texto */
  white-space: nowrap;
}
#product-app-root .pa-wordmark-a { font-weight: 400; color: var(--text-muted); }
#product-app-root .pa-wordmark-b { font-weight: 700; color: var(--text); }

/* Versão mínima: aparece só com o menu recolhido. */
#product-app-root .pa-wordmark-min {
  display: none;
  font: 700 1.2rem/1 var(--ff-marca);
  font-variation-settings: "opsz" 40;
  letter-spacing: -0.03em;
  color: var(--text);
  text-align: center;
  padding: 2px 0 4px;
}
#product-app-root .pa-app[data-rail-collapsed="true"] .pa-wordmark-min { display: block; }

/* O container da marca perdeu o quadrado do símbolo. */
#product-app-root .pa-brand { display: block; padding: 4px 8px 16px; }