/* =======================================================================
   AURUM — design system da nova versão (substitui a "Palette B").
   -----------------------------------------------------------------------
   Conceito aprovado pelo dono (2026-08-07): preto profundo + UM ouro usado
   como luz (não como tinta) + tipografia fina + halos sutis. Regras:
     · um só brilho por tela, guiando o olho;
     · caixas viram linhas finas + espaço;
     · botões e alvos de toque ≥44px (acessibilidade Apple);
     · animações curtas e desligáveis (prefers-reduced-motion).
   Este arquivo carrega DEPOIS do style.css e vai vencendo tela a tela
   conforme as fatias do PLANO-IMPLEMENTACAO.md são aplicadas.
   ===================================================================== */

/* ── [DESIGN-CONTRATO aprovado 2026-08-11] FONTES AUTO-HOSPEDADAS ──
   Sora = todo texto (pesos 100–600 numa fonte variável) · Space Mono =
   SÓ kickers/rótulos-carimbo (decisão "2a duas vozes" do dono). Nada de
   Google Fonts em produção: o app é PWA offline. ── */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 600; font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 600; font-display:swap;
  src:url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spacemono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spacemono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* paleta Aurum */
  --au-bg:#050504;
  --au-surface:#0d0c0a;
  --au-surface-2:#12100e;
  --au-line:rgba(255,255,255,.07);
  --au-line-soft:rgba(255,255,255,.04);
  --au-gold:#c9a24a;
  --au-gold-hi:#e8c979;
  --au-gold-dim:#8a7a55;
  /* ouro-escuro do KICKER decorativo — valor aprovado na régua de cor do
     pacote APPLE VERSION (CLAUDE.md: "kicker decorativo = ouro-escuro
     #8a7135"). Era escrito à mão em 33 lugares; agora é token. */
  --au-gold-kicker:#a38746;
  /* superfície levemente tingida de ouro (fundo de avatar/selo do autor) —
     era #26211a hardcoded em 15 lugares. */
  --au-gold-tint:#26211a;
  /* BORDA DO SELO TRACEJADO — o monograma quadrado do MÉTODO/IA.

     A regra da assinatura é INVIOLÁVEL (avatar redondo sólido = Matheus
     humano · monograma quadrado tracejado = método, que nunca assina como
     ele), e mesmo assim o tracejado estava escrito à mão em NOVE lugares
     com CINCO opacidades diferentes (.45 · .5 · .55 · .6): a mesma marca
     parecia mais forte ou mais fraca dependendo da tela em que você a
     encontrasse. A 12ª rodada registrou a divergência; aqui ela morre.

     O valor canônico é o do `fsAuthorSignatureHTML` (.5), que a 12ª rodada
     nomeou fonte de verdade da regra — e é o MESMO .5 da borda do selo
     sólido, então os dois lados da regra passam a pesar igual.

     O TAMANHO de cada selo continua sendo de quem desenha a tela (16px na
     assinatura, 22px na mobilidade, 40px no cartão de escolha do modo):
     isso é layout, e é legítimo variar. Aqui mora só a COR/efeito, que é o
     que o AURUM manda centralizar. */
  --au-seal-dashed:1px dashed rgba(201,162,74,.5);
  --au-text:#f5f3ee;
  --au-text-soft:#d9d6cf;
  /* [legibilidade 2026-08-11 · medido] os secundários subiram de degrau:
     o antigo --au-faint tinha 2,7:1 de contraste sobre o fundo (reprova
     em qualquer critério; era a real causa do "não dá pra ler", mais que
     o tamanho). Agora: muted 7,2:1 · faint 5,1:1 · kicker 5,9:1. */
  --au-muted:#9d998f;
  --au-faint:#847f77;
  --au-green:#5fa87a;
  --au-orange:#d99a6c;
  --au-red:#e0895a;

  /* ── CARGA DA SESSÃO (periodização não-linear, 31/08) ────────────────
     PESADO · MODERADO · LEVE, e eles são LUMINÂNCIA da mesma luz quente,
     nunca matiz novo — a mesma régua que já governa as zonas Z1–Z4 de
     endurance. Um matiz por zona (vermelho/amarelo/verde) daria à grade
     três cores que não querem dizer nada no resto do app, e roubaria do
     ouro o papel de apontar o "agora".

     NÃO HÁ COR PRA "SEM SESSÃO": dia vazio é vazio. Pintá-lo de um cinza
     próprio faria descanso parecer estímulo fraco, e na ondulatória o
     descanso é parte do desenho. */
  --au-load-heavy:rgba(245,243,238,.30);
  --au-load-mod:rgba(245,243,238,.15);
  --au-load-light:rgba(245,243,238,.06);

  /* o ÚNICO fill sólido do app (CTA pílula clara) — vive aqui pra as telas
     pararem de reimplementar o gradiente à mão. */
  --au-cta-a:#f5f3ee;
  --au-cta-b:#dedbd2;
  --au-on-light:#0a0a09;

  /* efeitos padrão (únicos permitidos — consistência em todas as telas) */
  --au-glow-gold:0 0 18px -6px rgba(201,162,74,.6);
  --au-glow-gold-soft:0 0 26px -12px rgba(201,162,74,.5);
  --au-glow-green:0 0 8px rgba(95,168,122,.7);
  --au-glow-copper:0 0 8px rgba(217,154,108,.7);
  --au-btn-shadow:0 10px 30px -12px rgba(245,243,238,.32);
  /* tempos: press é curto (régua), UI padrão 180ms, folha 320ms. */
  --au-dur-press:120ms;
  --au-dur:180ms;
  --au-dur-sheet:320ms;
  --au-ease:cubic-bezier(.22,1,.36,1);
  --au-ease-sheet:cubic-bezier(.32,.72,0,1);

  /* ── ESCALA DO CONTRATO v2 (DESIGN-CONTRATO.md · legibilidade aprovada
     pelo dono 2026-08-11: +2 degraus, piso de 10px nos carimbos).
     Em REM: 1rem = base do app = o "Tamanho do Texto" do iPhone quando o
     sistema oferece (Dynamic Type, abaixo). Os px ao lado são o valor na
     base padrão de 16px — é contra eles que o fiscal mede. ── */
  --au-fs-mono-xs:.625rem;  /* 10 */  --au-fs-mono-s:.625rem;  /* 10 */
  --au-fs-mono:.6875rem;    /* 11 */  --au-fs-mono-m:.6875rem; /* 11 */
  --au-fs-mono-l:.75rem;    /* 12 */  --au-fs-mono-xl:.75rem;  /* 12 */
  --au-fs-xs:.8125rem;  /* 13 */ --au-fs-s:.875rem;   /* 14 */
  --au-fs-sm:.875rem;   /* 14 */ --au-fs:.9375rem;    /* 15 */
  --au-fs-m:.9375rem;   /* 15 */ --au-fs-l:1rem;      /* 16 */
  --au-fs-xl:1.0625rem; /* 17 — corpo padrão iOS */
  --au-fs-t-s:1.25rem;  /* 20 */ --au-fs-t:1.5rem;    /* 24 */
  --au-fs-t-m:1.625rem; /* 26 */ --au-fs-t-l:1.875rem;/* 30 */
  --au-fs-t-xl:2.125rem;/* 34 */ --au-fs-t-xxl:2.5rem;/* 40 */
  --au-fs-hero-s:3rem;  /* 48 */ --au-fs-hero:3.25rem;/* 52 */
  --au-fs-hero-l:3.5rem;/* 56 */ --au-fs-hero-xl:7rem;/* 112 */
  /* alturas fechadas de alvo/botão (não escalam: são alvo de dedo) */
  --au-h-cta:54px; --au-h-ghost:48px; --au-h-tap:44px;
  /* altura da tab bar do atleta (#bottomNav), sem a safe-area. Toda tela que
     precisa reservar espaço embaixo soma este token + o respiro DELA — assim
     mexer na barra não deixa nenhuma tela pra trás. [dono 2026-08-12: 68→104]
     [dono 2026-08-14: 104→84, opção A do mockup tres-ajustes] Em 104 ela
     comia 12% de uma tela de 844px. 84 continua ACIMA do padrão iOS (~49pt,
     ~83px com safe-area), então o ganho de alcance que ele pediu em 12/08
     fica de pé — e as telas recuperam 20px, que é justamente o que faltava
     no manequim de músculo pra caber sem rolagem.
     [dono 2026-09-03: 84→60, opção A de mockups/home-espera-chat-e-barra.html]
     "Existe muito espaço em branco entre o menu inferior e a parte inferior
     da tela." Medido no iPhone: 84 de barra + 34 de área segura, rótulo
     centrado — o texto acabava a 76px do fim da tela, e a barra é só texto,
     sem ícone. Em 60 o rótulo fica a 64px do fim e toda tela ganha 24px.
     O alvo continua inteiro (os 60px são tocáveis, acima dos 44 do
     contrato); o alcance que ele pediu em 12/08 mora no ALVO, não na
     altura visual. */
  --au-h-nav:60px;
  /* enquadramento */
  --au-frame-max:460px; --au-pad-x:26px;
}

/* ── BASE DO APP + DYNAMIC TYPE (aprovado 2026-08-11) ──
   Tudo o que o app desenha usa rem, então a base manda em tudo. No iPhone
   a base passa a ser o "Tamanho do Texto" do sistema (-apple-system-body):
   quem precisa de letra maior resolve sozinho nos Ajustes, sem depender
   de release nova. Fora do iOS, base fixa de 16px. As alturas de alvo
   (44/48/54) NÃO escalam — alvo de dedo é físico, não tipográfico. */
html{ font-size:16px; }
@supports (font: -apple-system-body){
  @media (pointer:coarse){
    html{ font:-apple-system-body; }
  }
}
body{ font-family:'Sora',system-ui,sans-serif; font-size:var(--au-fs-xl); }
/* [fiscal 2026-08-11] controles de formulário NÃO herdam família por
   padrão do navegador — todo botão sem font-family explícito caía em
   Arial. Era a maior fonte de "voz" fora do padrão no app inteiro. */
button, input, select, textarea{ font-family:inherit }
/* ── [dono 2026-08-11] ZOOM fora do caminho ──
   1) o iOS dá zoom automático ao focar campo com fonte < 16px — o piso de
      1.0625rem (17px) nos campos mata o salto de tela ao digitar;
   2) `touch-action: manipulation` desliga o zoom de DUPLO-TOQUE e, de
      quebra, remove o atraso de ~300ms que o iOS punha em todo toque.
   A pinça de dois dedos CONTINUA funcionando (acessibilidade) — e quem
   precisa de letra maior tem o Dynamic Type, que o app respeita. */
input, select, textarea{ font-size:max(1.0625rem, 1em) }
html{ touch-action:manipulation; -webkit-text-size-adjust:100%; }

/* A base do app muda pro preto Aurum (o style.css antigo usa #060606). */
:root{ --bg:var(--au-bg); --surface:var(--au-surface); }
body{ background:var(--au-bg); }

/* [BOOT · gate de abertura 2026-08-14] A SAÍDA da cobertura que segura a
   tela até o Firebase dizer se existe sessão salva (#bootSplash no
   index.html; a lógica em js/core/boot-splash.js). Só opacity, como manda a
   régua de movimento — e por ser fade puro ele continua valendo inteiro com
   reduced-motion, que corta deslocamento e mantém o esmaecer. A cobertura em
   si nasce estilizada INLINE porque precisa valer antes deste arquivo
   chegar; aqui mora só o que acontece bem depois do carregamento. */
#bootSplash{ transition:opacity 220ms cubic-bezier(.22,1,.36,1) }
#bootSplash.is-gone{ opacity:0; pointer-events:none }

/* ---- tipografia utilitária ---- */
.au-k{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.28em; color:var(--au-gold-dim); text-transform:uppercase }
.au-k2{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.2em; color:var(--au-faint); text-transform:uppercase }
.au-title{ font:200 var(--au-fs-t-m)/1.15 'Sora',sans-serif; color:var(--au-text); letter-spacing:-.01em }
.au-huge{ font:100 var(--au-fs-hero-l)/1 'Sora',sans-serif; color:var(--au-text); letter-spacing:-.03em }
.au-huge small{ font-size:.34em; color:var(--au-muted); font-weight:200 }
.au-sub{ font:400 .875rem/1.6 'Sora',sans-serif; color:var(--au-muted) }
.au-mono{ font:400 .6875rem 'Space Mono',monospace; letter-spacing:.1em; color:var(--au-muted); text-transform:uppercase }

/* ---- o fio de ouro (assinatura de topo de cada tela) ---- */
.au-hairline{ height:1px; background:linear-gradient(90deg,rgba(201,162,74,.5),rgba(201,162,74,.05)); margin:11px 0; border:none }
.au-hairline-center{ height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,74,.55),transparent); border:none }

/* ---- ✓ de conclusão com glow + citação do coach (mockup tela 4; a
   citação serve também pra nota/voz do coach em outras telas) ---- */
.au-check{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(201,162,74,.5); display:grid; place-items:center; margin:0 auto; box-shadow:var(--au-glow-gold-soft); color:var(--au-gold); font-size:16px }
.au-quote{ border:1px solid rgba(201,162,74,.3); background:rgba(201,162,74,.05); border-radius:11px; padding:12px 14px; font:italic 400 .9375rem/1.55 'Sora',sans-serif; color:var(--au-text-soft) }
.au-quote .au-quote-sig{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.16em; color:var(--au-gold-dim); text-transform:uppercase; font-style:normal; white-space:nowrap }

/* ---- RESPOSTA AO TOQUE (régua Apple: o feedback nasce no PRESS, não no
   soltar). O app desenha quase tudo com style="" inline — e estilo inline
   NÃO tem :active, então 24 elementos declaravam a transição certa e nunca
   encolhiam. Esta regra única devolve o press a todo pressável do app. Só
   transform (GPU), 120ms, curva do projeto. ---- */
button, [role="button"], .au-press{
  transition:transform var(--au-dur-press) var(--au-ease);
}
button:active:not(:disabled), [role="button"]:active, .au-press:active{
  transform:scale(.97);
}
/* botões de largura total encolhem menos (a mesma escala num bloco largo
   parece um salto) */
.au-btn:active:not(:disabled), .au-btn-quiet:active, .au-ghost:active, .home-card:active{
  transform:scale(.985);
}

/* ---- botões (CLASSES CANÔNICAS do contrato — telas NÃO redeclaram
   fonte/altura de botão inline; muda aqui, muda em todas) ---- */
.au-btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-cta); border:none; border-radius:100px; cursor:pointer;
  background:linear-gradient(180deg,var(--au-cta-a),var(--au-cta-b)); color:var(--au-on-light);
  font:500 var(--au-fs-xl) 'Sora',sans-serif; box-shadow:var(--au-btn-shadow);
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-btn:disabled{ opacity:.35; cursor:default }
/* CTA secundário neutro (mesma altura do .au-btn, sem o fill sólido): ação
   repetível/opcional — ex.: "Repetir a rotina" quando a mobilidade do dia
   já foi feita. Formaliza o estilo que já vivia inline em Peso/Capacidades. */
.au-btn-quiet{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-cta); border-radius:100px; cursor:pointer;
  background:rgba(239,237,232,.06); border:1px solid rgba(239,237,232,.28);
  color:var(--au-text); font:500 var(--au-fs-xl) 'Sora',sans-serif;
  /* [dono 2026-08-12] ZERAR é obrigatório: o glow é a assinatura do ÚNICO
     CTA sólido da tela (a luz que a pílula branca joga no escuro). Como
     metade do app escreve class="au-btn au-btn-quiet", sem esta linha o
     secundário herdava o glow do .au-btn e disputava o olho com o CTA —
     "Pausar" brilhava igual a "Concluir" no executor de mobilidade.
     O .au-btn-gold já fazia isso; faltava aqui. */
  box-shadow:none;
  transition:transform var(--au-dur-press) var(--au-ease);
}
/* CTA da ÚLTIMA ação do treino (variante ouro do contrato) */
.au-btn-gold{
  background:rgba(201,162,74,.10); color:var(--au-gold);
  border:1px solid rgba(201,162,74,.55); box-shadow:none;
}
.au-ghost{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-ghost); border-radius:100px; cursor:pointer; background:none;
  border:1px solid rgba(201,162,74,.35); color:var(--au-gold);
  font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
  transition:transform var(--au-dur-press) var(--au-ease);
}
/* ---- LARGURA DOS BOTÕES CANÔNICOS numa linha lado a lado.
   `.au-btn`, `.au-btn-quiet` e `.au-ghost` nascem `width:100%` — é o certo
   pro CTA, que ocupa a largura da tela. Numa LINHA com dois botões isso
   estoura: cada um tenta 100% do container e os dois transbordam.

   [dono 2026-08-18, do print dele] Foi assim que "Cancelar/Salvar" da nota
   do aluno passou POR CIMA da barra lateral do coach. Medido antes do
   conserto, com o editor da nota aberto: a 1280px cada botão tinha 602px e
   o Cancelar começava em x=24 (a barra vai até 236); a 1440px tinha 762px e
   começava em x=-136, ou seja FORA da tela. E piorava quanto MAIS larga a
   janela — o contrário do que a intuição diz, porque 100% de um container
   maior é um botão maior.

   As duas saídas viram classe porque o contrato proíbe tela declarar
   geometria de botão inline: muda aqui, muda em todas.
   · `.au-btn-auto` — largura pelo CONTEÚDO (par Cancelar/Salvar, ações
     curtas encostadas numa borda);
   · `.au-btn-row`  — os botões DIVIDEM a linha por igual (dois CTAs de
     mesmo peso, ex.: as duas escolhas do fecho da mobilidade).
   Vêm depois dos blocos acima de propósito: mesma especificidade, quem
   está por último vence. ---- */
.au-btn-auto{ flex:0 0 auto; width:auto; padding:0 22px }
.au-btn-row{ flex:1 1 0; width:auto; min-width:0 }

/* kicker/carimbo (Space Mono — decisão 2a) */
.au-kicker{ font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--au-gold-kicker) }
.au-kicker-soft{ font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--au-faint) }
/* número-herói (dado grande, algarismos tabulares) */
.au-hero-n{ font:100 var(--au-fs-hero) 'Sora',sans-serif; color:var(--au-text); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.au-hero-n small{ font-size:.8125rem; color:var(--au-muted); font-weight:400 }
/* chip de AÇÃO (tocável, 44) × chip de LEITURA (32, nunca clicável) */
.au-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--au-h-tap); padding:0 16px; border:1px solid rgba(255,255,255,.14); border-radius:100px; background:none; color:var(--au-text-soft); font:400 var(--au-fs-l) 'Sora',sans-serif; cursor:pointer }
.au-chip.on{ border-color:var(--au-text); color:var(--au-text) }
.au-chip-read{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:100px; font:400 var(--au-fs-mono-s) 'Space Mono',monospace; letter-spacing:.12em; color:var(--au-muted) }
/* link-carimbo (pular round, refazer avaliação…) — alvo 44 via padding */
/* `min-width` entrou em 14/08 junto com a detecção de idioma, e o motivo
   fica registrado porque ele só aparece num idioma: a classe tinha a metade
   VERTICAL da regra dos 44 (`min-height`) e não a horizontal. Medido na tela
   do Peso: o botão `tHero("FIX","CORRIGIR")` dá 79,5px em português e
   **34,8px em inglês** — abaixo do mínimo. Passou despercebido porque o
   fiscal sempre rodou em português, que era o padrão cravado de todo mundo;
   com a detecção, quem tem o celular em inglês cai nesse estado por padrão.
   As outras 8 usos da classe já são `width:100%`, então nada mais muda. */
.au-link-mono{ background:none; border:none; cursor:pointer; min-height:var(--au-h-tap); min-width:var(--au-h-tap); padding:12px 4px; font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--au-faint) }
.au-ghost:active{ border-color:rgba(201,162,74,.7); box-shadow:var(--au-glow-gold) }

/* ENTRADA SOCIAL — Apple e Google lado a lado, SÓ com o símbolo
   (dono 2026-08-19, variante B de mockups/login-porta.html).

   POR QUE SEM TEXTO: eram três pílulas idênticas empilhadas — uma parede que
   obrigava a ler três linhas pra escolher uma. Com o símbolo, os dois ocupam
   UMA linha e a decisão vira reconhecimento, não leitura.

   OS DOIS SÃO SILENCIOSOS de propósito: o único fill sólido da tela é o
   "Criar conta" (régua AURUM — um fill por tela, e ele é o CTA). Zeram o
   glow pelo mesmo motivo do `.au-btn-quiet`: sem isso herdariam a luz que é
   a assinatura da pílula branca.

   SEM TEXTO, O `aria-label` É A ÚNICA COISA QUE O LEITOR DE TELA ANUNCIA —
   é obrigatório, exatamente como no `.au-back` (voltar só com a seta). */
/* A PORTA (gate de abertura + painel de entrada do login).
   As duas telas compartilham a MESMA composição de propósito: identidade no
   centro exato, ações no rodapé. É isso que faz o monograma não se mexer
   quando o login entra — medido: MW em 337 nas duas, salto zero. */
.boot-splash-panel,
.auth-door{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  box-sizing:border-box; width:100%; max-width:460px; margin:0 auto;
  min-height:100dvh; padding:45px 26px;
}
.boot-splash-panel{ min-height:100% }
.auth-door-mark{ text-align:center }
/* [dono 19/08] O FILETE DOURADO RESPIRA MENOS, e agora respira IGUAL dos
   dois lados. Ele tinha `margin:18px auto` inline (nas DUAS telas — gate e
   login, regra 11), e a frase logo abaixo somava outros 20px de topo: o vão
   de baixo era 38px contra 18 de cima, quase o dobro, e ninguém tinha
   medido. Agora são 12px de cada lado, escritos UMA vez.
   A largura sai do inline junto: ela é do desenho da porta, não de quem
   escreve a tela (DESIGN-CONTRATO). A classe `.au-hairline-center` em si
   NÃO muda — ela é usada em outras telas e continua sem margem própria. */
.boot-splash-panel .au-hairline-center,
.auth-door-mark .au-hairline-center{ width:56px; margin:8px auto }

/* [dono 19/08] A PROMESSA EM 17px (--au-fs-xl, o corpo padrao do iOS).
   Ela nasceu em 26 e ele achou grande; 20 foi o meio do caminho e ele
   escolheu 17 olhando os quatro degraus lado a lado.
   O que se ganha, medido depois: em 17 ela cabe numa linha tambem no SE
   (375px), onde 20 ja quebrava em duas. Em 320 ela ainda quebra — e tudo
   bem: quebra natural, sem vazar e sem rolagem. O preco e que ela fica do mesmo tamanho da linha do gate, entao a
   diferenca entre as duas telas passa a ser o PESO (200 aqui, 400 la) e a
   cor (--au-text-soft contra --au-muted), nao o tamanho. */
.auth-door-voz{
  font:200 var(--au-fs-xl)/1.4 'Sora',sans-serif; color:var(--au-text-soft);
  text-align:center; margin:0; letter-spacing:0;
}
.auth-door-acoes{
  position:absolute; left:26px; right:26px;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:8px;
}
.auth-door-termos{
  text-align:center; font:400 var(--au-fs-xs)/1.7 'Sora',sans-serif;
  color:var(--au-muted); margin:4px 0 0;
}
.auth-door-legal{ display:flex; justify-content:center; gap:18px; margin-top:2px }
.auth-door-legal a{
  color:var(--au-text-soft); text-decoration:underline;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--au-h-tap); padding:0 6px;
  font:400 var(--au-fs-xs) 'Sora',sans-serif;
}
/* TELA CURTA (dono 2026-08-19). Em 375×667 sobravam 17px entre a promessa e
   o primeiro botão — não sobrepunha, mas espremia. Abaixo de 700px de altura
   a identidade sobe e deixa de disputar o rodapé. Medido em 390×844: nada
   muda (a regra nem entra). */
@media (max-height: 700px){
  /* A identidade continua CENTRADA — o que muda é em quê. Aqui ela se
     centra no espaço que sobra ACIMA das ações, e não na tela inteira: um
     respiro embaixo empurra o conjunto pra cima metade do valor.
     A 1ª tentativa foi `flex-start` com 12vh de topo e ficou pior que o
     problema — o monograma subia pra 80px numa tela de 667 e sobravam 143px
     de vazio embaixo dele. Medir os dois lados é o que separou as duas.
     O gate NÃO entra: lá não há ações, e centrar pela tela é o certo. */
  .auth-door{ justify-content:flex-start }
  .auth-door-acoes{ position:static; left:auto; right:auto; bottom:auto;
                    padding-bottom:env(safe-area-inset-bottom, 0px) }
  /* UMA margem automática só. Com `auto` nos dois (aqui e nas ações) o
     espaço livre se dividia em TRÊS e a identidade subia demais: 53px de
     folga em cima contra 106 embaixo. Sozinha, ela absorve o vão inteiro e
     centra de verdade no espaço acima das ações. */
  .auth-door-mark{ margin:auto 0 }
}

.au-social-row{ display:flex; gap:10px }
.au-social-btn{
  flex:1 1 0; min-width:0; min-height:var(--au-h-cta);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:100px; background:none; border:1px solid rgba(255,255,255,.16);
  color:var(--au-text-soft); cursor:pointer; box-shadow:none;
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-social-btn:active{ transform:scale(.97) }
/* VOLTAR canônico (dono 2026-08-12, variante A do mockup
   "botao-voltar-so-seta"): SÓ A SETA. A palavra ao lado ("← HOJE",
   "← CORPO") era um terceiro carimbo em Space Mono disputando o topo com o
   kicker da tela e a assinatura do autor. Alvo de 44×44 invisível (o
   margin-left negativo alinha a SETA com a coluna do texto, não a caixa).
   `aria-label` é OBRIGATÓRIO em todo uso: sem texto, é a única coisa que o
   leitor de tela tem pra anunciar. */
.au-back{
  display:inline-flex; align-items:center; justify-content:flex-start;
  width:var(--au-h-tap); height:var(--au-h-tap); margin-left:-10px; padding:0;
  border:none; background:none; cursor:pointer;
  font:400 var(--au-fs-t-s) 'Sora',sans-serif; line-height:1; color:var(--au-text-soft);
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-back:active{ transform:scale(.92) }
/* ── TIRA DE PORTAS COM ÍCONE (HUB do aluno · dono 2026-08-20) ──────────
   Variante do trilho de abas logo abaixo, e não uma tabela nova: mesma
   rolagem horizontal (exceção já sancionada no fiscal), mesmo fio de 2px
   embaixo da ativa, mesma família de cor. O que muda é que cada porta leva
   um ícone com o rótulo EMBAIXO.

   O RÓTULO NÃO É ENFEITE. Ícone sozinho é adivinhação — e pra quem usa
   leitor de tela ele simplesmente não existe. Por isso a palavra está no
   desenho, e não só num `aria-label` (que continua obrigatório).

   56px de altura: acima dos 44 da régua da Apple, com folga pro texto. */
.au-tabs-ico{
  display:flex; gap:0; overflow-x:auto; flex:none;
  border-bottom:1px solid var(--au-line);
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.au-tabs-ico::-webkit-scrollbar{ display:none }
.au-tab-ico{
  position:relative; flex:none; min-width:72px; min-height:56px;
  padding:8px 12px 6px; margin-bottom:-1px;
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  color:var(--au-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:color var(--au-dur-press) var(--au-ease), transform var(--au-dur-press) var(--au-ease);
}
.au-tab-ico span{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
}
.au-tab-ico.on{ color:var(--au-gold); border-bottom-color:var(--au-gold) }
.au-tab-ico:active{ transform:scale(.97) }
/* ponto ouro: tem recado esperando. Mesmo sinal do selo M do resto do app. */
.au-tab-ico .au-tab-pt{
  position:absolute; top:9px; right:14px; width:7px; height:7px; border-radius:50%;
  background:var(--au-gold); box-shadow:var(--au-glow-gold);
}

/* TRILHO DE ABAS (dono 2026-08-13, opção C do mockup
   "mobilidade-abas-por-articulacao"): rola na horizontal — exceção já
   sancionada no fiscal, mesma família do baralho e do arquivo.
   A aba ATIVA é o "agora" da tela, e por isso é o único lugar onde o ouro
   entra aqui: um fio de 2px embaixo. Sem fill, sem pílula — pílula
   competiria com o CTA, que é o único fill sólido da tela (régua AURUM).
   Cada aba entrega 44px de alvo; o rótulo é Space Mono porque é rótulo de
   controle com estado, não kicker decorativo. */
.au-tabs{
  display:flex; gap:0; overflow-x:auto; flex:none;
  border-bottom:1px solid var(--au-line);
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.au-tabs::-webkit-scrollbar{ display:none }
.au-tab{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--au-h-tap); padding:0 13px; margin-bottom:-1px;
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--au-faint); white-space:nowrap;
  transition:color var(--au-dur-press) var(--au-ease), transform var(--au-dur-press) var(--au-ease);
}
.au-tab:active{ transform:scale(.97) }
.au-tab.on{ color:var(--au-text); border-bottom-color:var(--au-gold) }
.au-iconbtn{ /* voltar/fechar — já padronizado em 44px na rodada de acessibilidade */
  display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; background:none; border:none;
  color:var(--au-muted); cursor:pointer;
}

/* ---- INTERRUPTOR (dono 2026-09-02) ----
   "algo como o iPhone tem em suas configurações, mostrando uma cor quando on
   e sem cor quando off". É um BOTÃO com role="switch" (não um checkbox
   escondido): assim um clique é um evento só — com <label>+<input> o
   navegador dispara o clique duas vezes e um ouvinte delegado desliga o que
   acabou de ligar. Caixa de 44 pelo contrato; o trilho é 40×24. Cor de "on"
   = ouro por padrão; `.au-switch--orange` pinta de cobre (atenção/lesão).
   UM interruptor no app inteiro: a Conta e a tela de Lesões usam este. */
.au-switch{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--au-h-tap); min-height:var(--au-h-tap); padding:0; background:none; border:none; cursor:pointer; flex:none; transition:transform var(--au-dur-press) var(--au-ease) }
.au-switch:active{ transform:scale(.97) }
.au-switch-track{ position:relative; display:block; width:40px; height:24px; border-radius:100px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); transition:background var(--au-dur) var(--au-ease), border-color var(--au-dur) var(--au-ease) }
.au-switch-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--au-muted); transition:transform var(--au-dur) var(--au-ease), background var(--au-dur) var(--au-ease) }
.au-switch.on .au-switch-track{ background:var(--au-gold-tint); border-color:rgba(201,162,74,.6) }
.au-switch.on .au-switch-thumb{ transform:translateX(16px); background:var(--au-gold) }
.au-switch--orange.on .au-switch-track{ background:rgba(217,154,108,.16); border-color:rgba(217,154,108,.6) }
.au-switch--orange.on .au-switch-thumb{ background:var(--au-orange) }
/* [dono 03/09] A LINHA DE AJUSTE — o interruptor como linha inteira
   (ícone · título · legenda · trilho à direita), a mesma cara pra qualquer
   "quem vê / ligar isto" do app. Nasceu na tela de fotos ("Matheus pode
   ver"); o `--lendo` é o estado antes de ler, SEM botão, com o trilho
   apagado só pra a linha não pular quando a leitura chegar. */
.au-switch-row{ width:100%; justify-content:flex-start; gap:12px; min-height:56px; padding:6px 0; border-top:1px solid var(--au-line); border-bottom:1px solid var(--au-line); text-align:left; color:var(--au-text); margin-top:14px }
.au-switch-row .au-switch-track{ margin-left:auto }
.au-switch-row-ico{ flex:none; width:24px; display:grid; place-items:center; color:var(--au-faint) }
.au-switch-row.on .au-switch-row-ico{ color:var(--au-gold) }
.au-switch-row-txt{ flex:1; min-width:0 }
.au-switch-row-t{ display:block; font:300 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text) }
.au-switch-row-s{ display:block; font:300 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-muted); margin-top:2px }
.au-switch-row--lendo{ display:flex; align-items:center; opacity:.6 }

/* ---- superfícies ---- */
.au-card{ background:var(--au-surface); border:1px solid var(--au-line); border-radius:16px; padding:14px }
.au-card-gold{ border-color:rgba(201,162,74,.4); box-shadow:var(--au-glow-gold-soft) }
.au-card-green{ border-color:rgba(95,168,122,.4); background:rgba(95,168,122,.04) }
.au-row{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--au-line-soft) }
.au-row:last-child{ border-bottom:none }

/* ---- campos ---- */
.au-input{
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0; padding:11px 2px; font:400 1.0625rem 'Sora',sans-serif;
  color:var(--au-text); width:100%; min-height:44px; outline:none;
  transition:border-color var(--au-dur) var(--au-ease);
}
.au-input:focus{ border-bottom-color:rgba(201,162,74,.6); box-shadow:0 12px 18px -14px rgba(201,162,74,.35) }
/* [16/08] Placeholder dos campos de carga (kg × reps, `js/core/cargas-declaradas.js`).
   O VALOR digitado é 24px de propósito — é número que se lê de longe, com o
   celular no chão. Mas a palavra "reps" nesse tamanho NÃO CABE nos 62px do
   campo e saía cortada, nas DUAS telas que usam a linha (a folha do Goal e a
   tela de cargas do onboarding). Medido: precisava de 54px e tinha 44.
   Quem pegou foi a CAPTURA DE TELA — medida de borda não vê texto cortado
   DENTRO do elemento, porque nada vaza. Só o placeholder encolhe. */
input[data-carga]::placeholder{ font-size:var(--au-fs-m); letter-spacing:0 }
.au-numbox{
  border:1px solid rgba(201,162,74,.4); border-radius:14px; padding:10px;
  text-align:center; box-shadow:0 0 16px -9px rgba(201,162,74,.6); min-height:44px;
}
.au-numbox .v{ font:100 2.125rem 'Sora',sans-serif; color:var(--au-text) }
.au-numbox .l{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.16em; color:var(--au-gold-dim); text-transform:uppercase; margin-top:2px }

/* ---- pontos/barras com halo (status) ---- */
.au-dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto }
.au-dot.gold{ background:var(--au-gold); box-shadow:0 0 10px rgba(201,162,74,.6) }
.au-dot.green{ background:var(--au-green); box-shadow:var(--au-glow-green) }
.au-dot.orange{ background:var(--au-orange); box-shadow:0 0 8px rgba(217,154,108,.7) }
.au-dot.off{ background:none; border:1px solid rgba(255,255,255,.12) }
.au-bar{ height:3px; border-radius:100px; background:var(--au-surface); position:relative; overflow:hidden; flex:1 }
.au-bar>i{ position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--c,var(--au-gold)); box-shadow:0 0 8px color-mix(in srgb, var(--c,var(--au-gold)) 55%, transparent) }

/* ---- segmentos/chips (alvo 44px) ---- */
.au-seg{ display:flex; gap:6px }
.au-seg>*{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:44px;
  border:1px solid rgba(255,255,255,.1); border-radius:100px; background:none;
  color:var(--au-text-soft); font:400 .9375rem 'Sora',sans-serif; cursor:pointer;
  transition:border-color var(--au-dur) var(--au-ease), color var(--au-dur) var(--au-ease);
}
.au-seg>.on{ border-color:rgba(201,162,74,.55); color:var(--au-gold); box-shadow:var(--au-glow-gold) }
/* [dono 17/08 · texto cortado] SEGMENTO QUE QUEBRA EM DUAS FILEIRAS.
   Um `.au-seg` não encolhe abaixo da PALAVRA de cada item: os itens são
   `flex:1` com `min-width:auto`, e uma palavra só não tem onde quebrar.
   Medido no passo "Onde você treina" em 320px, com o app em INGLÊS: os três
   botões pedem 331px numa faixa de 268, e "Outdoors" ia até 357 — 37px FORA
   DA TELA. Em português ("Rua") cabia, e por isso o defeito só aparecia num
   idioma. Nem o fiscal nem a varredura de texto cortado pegavam: a tela não
   rola (o corte é do container) e o botão em si não está com overflow
   escondido — quem estoura é a FAIXA.
   Encolher a fonte não resolve: a 15px "Outdoors" ainda pede mais espaço do
   que os 85px que sobram por botão. Então a faixa quebra: em 320 o terceiro
   desce pra segunda fileira, inteiro e legível. Em 375+ nada muda.
   Modificador, e não mudança no `.au-seg`: a classe canônica serve o passo
   dos DIAS (5 números curtos) e a experiência, que devem continuar numa
   fileira só. */
.au-seg-wrap{ flex-wrap:wrap }
.au-seg-wrap>*{ flex:1 1 auto }

/* ---- slider (RPE e afins) — trilho verde→ouro, polegar com halo ---- */
.au-slider{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:none; cursor:pointer }
.au-slider::-webkit-slider-runnable-track{ height:3px; border-radius:100px; background:linear-gradient(90deg,var(--au-green),var(--au-gold)) }
.au-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#f5f3ee; border:none; margin-top:-9.5px; box-shadow:0 0 16px rgba(201,162,74,.85) }
.au-slider::-moz-range-track{ height:3px; border-radius:100px; background:linear-gradient(90deg,var(--au-green),var(--au-gold)) }
.au-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#f5f3ee; border:none; box-shadow:0 0 16px rgba(201,162,74,.85) }

/* ---- trilho de exercícios do player ---- */
.au-rail{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -26px; padding:2px 26px }
.au-rail::-webkit-scrollbar{ display:none }
.au-rail-item{ flex:0 0 58px; background:none; border:none; padding:0; cursor:pointer; text-align:center }
.au-rail-thumb{ width:58px; height:58px; border-radius:13px; background:var(--au-surface-2); border:1px solid var(--au-line); display:flex; align-items:center; justify-content:center; position:relative; font:400 .9375rem 'Space Mono',monospace; letter-spacing:.06em; color:var(--au-muted); transition:border-color var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease) }
.au-rail-item.done .au-rail-thumb{ opacity:.45 }
.au-rail-item.cur .au-rail-thumb{ border-color:rgba(201,162,74,.6); box-shadow:var(--au-glow-gold); color:var(--au-gold) }
.au-rail-chk{ position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:var(--au-green); color:var(--au-bg); font-size:.6875rem; display:flex; align-items:center; justify-content:center }
.au-rail-bar{ height:2px; border-radius:100px; background:var(--au-surface-2); margin-top:5px; position:relative; overflow:hidden }
.au-rail-bar>i{ position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--au-green) }
.au-rail-item.cur .au-rail-bar>i{ background:var(--au-gold); box-shadow:0 0 8px rgba(201,162,74,.7) }
.au-rail-name{ font:400 6.5px 'Space Mono',monospace; letter-spacing:.06em; color:var(--au-muted); text-transform:uppercase; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58px }
.au-rail-item.cur .au-rail-name{ color:var(--au-gold) }

/* ---- tabela de séries do player (aprovada: futuras em fantasma tracejado) ---- */
.au-setrow{ display:flex; align-items:center; gap:8px; padding:7px 2px; min-height:44px; border-bottom:1px solid var(--au-line-soft); background:none; border-left:none; border-right:none; border-top:none; width:100%; cursor:pointer; text-align:left }
.au-setrow:last-child{ border-bottom:none }
.au-setrow .no{ width:18px; font:400 .75rem 'Space Mono',monospace; color:var(--au-faint); text-align:center; flex:0 0 auto }
.au-setrow .tgt{ flex:1.3; font:400 .75rem/1.35 'Sora',sans-serif; color:var(--au-muted); min-width:0 }
.au-setrow .cell{ flex:1; border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:7px 0; text-align:center; font:400 .9375rem 'Sora',sans-serif; color:var(--au-text); min-height:32px }
.au-setrow .ck{ width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:.8125rem; flex:0 0 auto; color:transparent }
.au-setrow.done .cell{ border-color:transparent; background:var(--au-surface); color:var(--au-faint) }
.au-setrow.done .ck{ background:var(--au-green); border-color:var(--au-green); color:var(--au-bg) }
.au-setrow.cur .no{ color:var(--au-gold) }
.au-setrow.cur .cell{ border-color:rgba(201,162,74,.45); box-shadow:0 0 14px -8px rgba(201,162,74,.6) }
.au-setrow.cur .ck{ border-color:rgba(201,162,74,.6) }
.au-setrow.fut .cell{ border:1px dashed rgba(255,255,255,.12); color:var(--au-faint); font-style:italic }
.au-setrow.fut .ck{ border-style:dashed; opacity:.5 }
.au-setrow.fut .tgt,.au-setrow.fut .no{ opacity:.55 }

/* ---- login (porta de entrada) — luz vinda de cima, preto Aurum ---- */
#loginView{ background:radial-gradient(90% 40% at 50% 0%, var(--au-surface), var(--au-bg) 70%) }

/* ---- acessibilidade ----
   Foco de teclado NÃO usa ouro: ouro já significa "selecionado/agora" no
   app (.au-seg>.on, .au-dot.gold) e quem navega por teclado não conseguia
   distinguir foco de seleção. Anel claro, neutro. */
:focus-visible{ outline:2px solid var(--au-text); outline-offset:2px }

/* Reduced-motion segue a régua aprovada: MANTÉM o fade, CORTA o
   deslocamento. O kill-switch antigo (transition-duration:.01ms em tudo)
   matava também os cross-fades — que a HIG manda preservar — e não
   neutralizava o transform do press (o botão continuava dando um salto
   seco). Agora: animações longas param, o press não desloca, e a folha
   entra por opacidade em vez de subir. */
/* ---- O PLAYER DE VÍDEO (dono 2026-09-03) ----
   Ver js/core/video-player.js. Botão central de 72px (fio de luz, sem
   fill), some enquanto roda; fio de progresso em ouro de 3px; botão de som
   de 44px. Só opacity/transform animam. */
.au-video{ position:relative; width:100%; line-height:0; background:var(--au-bg); overflow:hidden; cursor:pointer }
.au-video video{ width:100%; max-height:100%; display:block; background:var(--au-bg) }
.au-video-play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; border:1px solid rgba(239,237,232,.45); background:rgba(11,10,9,.35); color:var(--au-text); display:grid; place-items:center; padding:0; cursor:pointer; opacity:1; transition:opacity 240ms var(--au-ease), transform var(--au-dur-press) var(--au-ease) }
.au-video-play:active{ transform:scale(.94) }
.au-video.playing .au-video-play{ opacity:0; transition-delay:500ms; pointer-events:none }
.au-video-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(239,237,232,.12) }
.au-video-bar-fill{ display:block; height:100%; background:var(--au-gold) }
.au-video-mute{ position:absolute; right:8px; bottom:12px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(11,10,9,.45); color:var(--au-text-soft); display:grid; place-items:center; padding:0; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease) }
.au-video-mute:active{ transform:scale(.92) }

@media (prefers-reduced-motion: reduce){
  .au-video-play{ transition:none }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  button:active, [role="button"]:active, .au-press:active,
  .au-btn:active:not(:disabled), .au-ghost:active,
  .home-card:active, .home-card-cta:active{ transform:none !important }
  .modal{ animation:auFadeIn 200ms linear both !important }
  .modal-backdrop{ animation:auFadeIn 200ms linear both !important }
}

/* [HIG · acessibilidade] O iPhone tem TRÊS ajustes de acessibilidade
   visual, não um. O app só respondia ao "Reduzir Movimento" — quem liga
   "Aumentar Contraste" ou "Reduzir Transparência" nos Ajustes não via
   diferença nenhuma. A diretriz é explícita: se o padrão não entrega o
   contraste, o app precisa PELO MENOS entregar um esquema de contraste
   maior quando o ajuste do sistema estiver ligado.
   Nada disso muda o app no estado padrão — só acende com o ajuste ligado,
   então a APPLE VERSION continua intacta pra quem não usa. */

/* Aumentar Contraste: a rampa de cinza se aproxima do texto cheio e as
   linhas (hoje quase invisíveis, 7% de branco) ganham corpo. */
@media (prefers-contrast: more){
  :root{
    --au-muted:#c6c2b8;      /* 7,2:1 → 11,5:1 */
    --au-faint:#b0aba1;      /* 5,1:1 →  8,9:1 */
    --au-text-soft:#efede8;
    --au-line:rgba(255,255,255,.28);
    --au-line-soft:rgba(255,255,255,.18);
    --au-gold-kicker:#c9a24a; /* 5,9:1 → 8,5:1 */
  }
  .au-chip, .au-ghost, .au-card{ border-color:rgba(255,255,255,.34) }
}

/* Reduzir Transparência: superfície fica opaca e o blur sai. Um vidro
   sobre conteúdo em movimento é justamente o que esse ajuste existe pra
   remover — manter o blur aqui seria ignorar o pedido do usuário. */
@media (prefers-reduced-transparency: reduce){
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
  .au-sheet, .au-sheet-up, .modal-content, .modal-fullscreen,
  #bottomNav, #coachNav{ background:var(--au-surface) !important }
  .modal-backdrop, .hub-inj-sheet-backdrop{ background:rgba(5,5,4,.94) !important }
}

/* ══ A GRADE DO CICLO — porta CICLO do hub (js/screens/coach-ciclo.js) ══
   [dono 2026-08-31] periodização não-linear.

   As cargas são os tokens --au-load-* (luminância, nunca matiz novo). O
   OURO aqui é só da semana ABERTA: é o "agora" da régua de cor, e é o
   único uso de ouro da tela. */
.cic{ display:flex; flex-direction:column; gap:18px; padding:16px 0 }

/* ── legenda ── */
.cic-legenda{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center }
.cic-leg{
  display:inline-flex; align-items:center; gap:6px;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--au-faint);
}
.cic-sw{
  width:14px; height:14px; border-radius:3px; flex:none;
  border:1px solid var(--au-line); background:transparent;
}
.cic-sw.cic-pesado{ background:var(--au-load-heavy) }
.cic-sw.cic-moderado{ background:var(--au-load-mod) }
.cic-sw.cic-leve{ background:var(--au-load-light) }

/* ── a grade ── */
.cic-grade{ display:flex; flex-direction:column; gap:2px }
.cic-cab{ display:flex; align-items:center; gap:10px; padding:0 0 4px }
.cic-cab .cic-rot{ visibility:hidden }
.cic-cel-cab{
  flex:1; text-align:center;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.1em; color:var(--au-faint);
}

/* A LINHA É UM BOTÃO SÓ — nunca botão dentro de botão (a lição do
   executor): as células são estáticas e quem seleciona é a linha. */
.cic-linha{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:44px; padding:6px 8px;
  background:none; border:none; border-radius:8px; cursor:pointer;
  border-left:2px solid transparent;
  transition:background var(--au-dur) var(--au-ease), border-color var(--au-dur) var(--au-ease);
}
.cic-linha.on{ background:var(--au-surface-2); border-left-color:var(--au-gold) }
.cic-linha:active{ transform:scale(.99) }
.cic-rot{ flex:none; width:96px; text-align:left; display:flex; flex-direction:column; gap:1px }
/* O NOME DA SEMANA QUEBRA, NUNCA CORTA. Quem o escreve é o coach ("Semana
   3 · deload", "Choque"), e o fiscal pegou justamente esse: precisava de
   119px numa coluna de 86. Cortar o que ELE escreveu é a mesma classe do
   "4…" no lugar de "40 kg" — mesma decisão que a prévia do recado da Home
   já tinha tomado em 21/08. A fase (Base/Build/Peak) segue com reticências:
   ali o texto é do app, curto e conhecido. */
.cic-sem{
  font:400 var(--au-fs-xs)/1.25 'Sora',sans-serif; color:var(--au-text-soft);
  overflow-wrap:anywhere;
}
.cic-linha.on .cic-sem{ color:var(--au-text) }
.cic-fase{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--au-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cic-dias{ display:flex; gap:3px; flex:1; min-width:0 }
.cic-cel{
  position:relative; flex:1; height:30px; border-radius:4px;
  border:1px solid var(--au-line-soft); background:transparent;
}
.cic-cel.cic-pesado{ background:var(--au-load-heavy); border-color:transparent }
.cic-cel.cic-moderado{ background:var(--au-load-mod); border-color:transparent }
.cic-cel.cic-leve{ background:var(--au-load-light); border-color:transparent }
/* o ponto da marcação à mão: sem ele o coach não sabe quais dias ele já
   corrigiu e quais continuam sendo conta do app. */
.cic-mao{
  position:absolute; top:3px; right:3px; width:4px; height:4px;
  border-radius:50%; background:var(--au-gold);
}

/* ── volume por músculo ── */
.cic-vol{ display:flex; flex-direction:column; gap:7px;
  border-top:1px solid var(--au-line); padding-top:16px }
.cic-vol-ref{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint);
  margin:2px 0 8px;
}
.cic-vol-linha{ display:flex; align-items:center; gap:10px; min-height:22px }
.cic-vol-nome{
  flex:none; width:84px;
  font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-text-soft);
}
.cic-vol-trilho{
  position:relative; flex:1; height:8px; border-radius:4px;
  background:var(--au-line-soft); overflow:hidden;
}
/* a FAIXA de referência é fundo, nunca borda de erro: passar dela não é
   defeito (as meta-regressões de 2025 não acham platô claro). */
.cic-vol-faixa{
  position:absolute; top:0; bottom:0;
  background:rgba(245,243,238,.09);
}
.cic-vol-barra{
  position:absolute; left:0; top:0; bottom:0; border-radius:4px;
  background:var(--au-muted);
}
.cic-vol-barra.dentro{ background:var(--au-text-soft) }
.cic-vol-n{
  flex:none; width:34px; text-align:right;
  font:400 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-muted);
}
.cic-vol-resto{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-orange);
  margin:8px 0 0;
}

/* ── [dono 04/09] as sub-abas, a moldura da linha e a faixa da semana ── */
.cic-abas{ margin:-4px 0 2px }
/* A LINHA VIROU MOLDURA COM DOIS BOTÕES IRMÃOS (a linha, e o "TREINO ›"
   da linha aberta) — nunca botão dentro de botão. */
.cic-linha-wrap{ display:flex; align-items:center; gap:4px }
.cic-linha-wrap .cic-linha{ flex:1; min-width:0 }
.cic-ir{ flex:none; color:var(--au-gold); white-space:nowrap; padding:12px 6px }
/* a faixa da semana (sub-aba TREINO): setas · nome · os sete dias · as
   mini-barras do ciclo · a volta pra VISÃO GERAL. Uma linha só, 44px+. */
.cic-faixa{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--au-line); border-radius:14px; padding:6px 8px 6px 2px;
}
.cic-faixa-seta{ flex:none; font:400 20px/1 'Sora',sans-serif; color:var(--au-text-soft) }
.cic-faixa-seta:disabled{ opacity:.3; cursor:default }
.cic-faixa-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.cic-faixa-t b{ font:300 var(--au-fs-l)/1.2 'Sora',sans-serif; color:var(--au-text); overflow-wrap:anywhere }
.cic-faixa-t span{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-faint);
}
.cic-faixa-dias{ display:flex; gap:3px; flex:none }
.cic-faixa-dias .cic-cel{ flex:none; width:20px; height:20px }
.cic-faixa-mini{ display:flex; align-items:flex-end; gap:3px; height:28px; flex:none }
.cic-faixa-mini i{ display:block; width:12px; border-radius:2px 2px 0 0; background:var(--au-load-mod); min-height:0 }
.cic-faixa-mini i.desc{ background:var(--au-load-light) }
.cic-faixa-mini i.on{ background:var(--au-gold) }
.cic-faixa-ver{ flex:none; color:var(--au-gold); white-space:nowrap; padding:12px 6px }
/* NO HUB ESTREITO a faixa fica com o essencial: setas, nome e os sete dias
   — as mini-barras e o link cabem na sub-aba ao lado. Quem decide é a
   largura do HUB (container `hubcorpo`, coach-desktop.css), não a da
   janela: em 1280px com a lista aberta o hub tem 408px, e uma regra por
   janela deixaria o link e a seta 79px pra fora (medido, dirigindo). */
@container hubcorpo (max-width:639px){
  .cic-faixa-mini, .cic-faixa-ver{ display:none }
  .cic-faixa-dias .cic-cel{ width:14px; height:14px }
  /* a linha de fase · padrão · mês · carga é texto do app, curto e
     conhecido: no estreito ela corta com reticências em vez de virar
     quatro linhas (a mesma regra da `.cic-fase` da grade). O nome da
     semana, que é do coach, continua quebrando. */
  .cic-faixa-t span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* ── estado vazio ── */
/* [dono 2026-09-03] o estado vazio virou a grade com a semana PREVISTA:
   mesma composição da grade cheia (.cic), só sem o painel de volume. A
   linha prevista não é botão — sem :active e sem cursor de mão. */
.cic-vazio .cic-nota{ font:400 var(--au-fs)/1.5 'Sora',sans-serif; color:var(--au-muted); margin:0 }
.cic-linha-prevista{ cursor:default }
.cic-linha-prevista .cic-sem{ color:var(--au-text) }

/* ══ CARGA INTERNA — bloco da porta CICLO (coach-ciclo-carga.js) ═══════
   [dono 2026-08-31] a planilha "CONTROLE DE CARGA DE TREINO" adaptada.
   Moldura própria de propósito: as semanas AQUI são de calendário e as
   da grade acima são da jornada — desenhá-las com o mesmo peso sugeriria
   que as linhas se correspondem, e elas não se correspondem. */
.cig{
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--au-line); padding-top:16px;
}
.cig-ref, .cig-espera{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint); margin:2px 0 6px;
}

/* os três números da semana atual */
.cig-resumo{ display:flex; gap:10px }
.cig-cel{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;
  padding:10px 12px; border-radius:10px; background:var(--au-surface-2);
}
.cig-num{
  font:200 var(--au-fs-t-s)/1 'Sora',sans-serif; color:var(--au-text);
  font-variant-numeric:tabular-nums;
}
.cig-sub{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--au-faint);
  overflow-wrap:anywhere;
}

/* uma barra por semana */
.cig-lista{ display:flex; flex-direction:column; gap:5px; margin-top:4px }
.cig-linha{ display:flex; align-items:center; gap:10px; min-height:20px }
.cig-quando{
  flex:none; width:52px;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.08em;
  color:var(--au-faint); text-transform:uppercase;
}
.cig-trilho{
  position:relative; flex:1; height:8px; border-radius:4px;
  background:var(--au-line-soft); overflow:hidden;
}
.cig-barra{
  position:absolute; left:0; top:0; bottom:0; border-radius:4px;
  background:var(--au-muted);
}
/* a semana ATUAL é a única acesa: é o "agora" da régua de cor, e o ouro
   desta tela já é da semana aberta na grade — aqui a distinção é
   luminância, não um segundo ouro disputando o olho. */
.cig-linha.atual .cig-barra{ background:var(--au-text-soft) }
.cig-linha.atual .cig-quando{ color:var(--au-text-soft) }
.cig-ua{
  flex:none; width:44px; text-align:right;
  font:400 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-muted);
  font-variant-numeric:tabular-nums;
}

/* esta semana vs. o de costume */
.cig-razao{
  display:flex; flex-direction:column; gap:5px; margin-top:6px;
  padding-top:12px; border-top:1px solid var(--au-line-soft);
}
.cig-razao-linha{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.cig-razao-txt{
  flex:1; min-width:0;
  font:400 var(--au-fs-xs)/1.4 'Sora',sans-serif; color:var(--au-text-soft);
}
.cig-nota{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint); margin:2px 0 0;
}
/* o que ficou fora da conta — cobre, como todo aviso deste app */
.cig-fora{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-orange); margin:6px 0 0;
}

/* ══ GRÁFICO DO CICLO — barras por semana (coach-ciclo-grafico.js) ═════
   [dono 2026-09-02] a vista do slide da aula: training load por semana.
   O OURO é da semana SELECIONADA e de mais ninguém — é a mesma seleção
   da grade embaixo, então continua sendo UM uso de ouro, não um segundo. */
.cgr{ display:flex; flex-direction:column; gap:10px }
.cgr-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.cgr-padroes{ display:flex; gap:6px }
.cgr-chip{ min-width:56px; padding:0 12px }
.cgr-chip.on{ border-color:var(--au-gold); color:var(--au-gold) }

/* as faixas de bloco — a linha de cima do slide */
.cgr-faixas{ display:flex; gap:3px }
.cgr-faixa{
  flex:1; text-align:center; padding:3px 0; border-radius:4px;
  background:var(--au-line-soft);
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em;
  color:var(--au-faint); white-space:nowrap; overflow:hidden;
}

/* o plot */
.cgr-plot{ display:flex; align-items:flex-end; gap:3px; height:132px }
.cgr-col{
  flex:1; min-width:0; height:100%; padding:0; border:none; background:none;
  display:flex; flex-direction:column; align-items:stretch; gap:4px; cursor:pointer;
}
.cgr-col:active{ transform:scale(.97) }
.cgr-haste{ flex:1; display:flex; align-items:flex-end; min-height:0 }
.cgr-barra{
  display:block; width:100%; border-radius:3px 3px 0 0;
  background:var(--au-load-mod);
  transition:background var(--au-dur) var(--au-ease);
}
/* a semana de DESCARGA é mais apagada: o padrão diz que ela carrega
   menos, e a cor acompanha a intenção sem depender da altura. */
.cgr-col.desc .cgr-barra{ background:var(--au-load-light) }
.cgr-col.on .cgr-barra{ background:var(--au-gold) }
.cgr-x{
  flex:none; text-align:center;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; color:var(--au-faint);
}
.cgr-col.on .cgr-x{ color:var(--au-gold) }

.cgr-nota{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint); margin:0;
}
/* divergência do padrão: cobre, como todo aviso deste app — e nunca
   vermelho, porque sair do padrão não é erro. */
.cgr-diverge{
  display:flex; flex-direction:column; gap:3px;
  padding:10px 12px; border-radius:10px; background:var(--au-surface-2);
}
.cgr-diverge p{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-orange); margin:0;
}
.cgr-diverge .cgr-diverge-nota{ color:var(--au-faint); margin-top:3px }

/* ── quantas semanas o ciclo tem (dono 2026-09-02) ── */
.cgr-semanas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cgr-qtd{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-faint);
}
.cgr-mais, .cgr-menos{ min-width:44px; padding:0; font-size:var(--au-fs-l) }
.cgr-menos[disabled]{ opacity:.35; cursor:default }
.cgr-trava{
  font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-faint);
}
/* A BARRA SOZINHA NÃO PODE OCUPAR A TELA INTEIRA (o dono viu isso no
   print: 1 semana virava um bloco de ouro de 1140px). O `flex:1` estica
   pra preencher; o teto de 64px mantém a barra com CARA de barra, e o
   gráfico começa a fazer sentido já na primeira semana. */
.cgr-col{ max-width:64px }
.cgr-plot{ justify-content:flex-start }
/* de qual semana são os três números, quando não é a corrente */
.cig-dequal{
  font:400 var(--au-fs-xs)/1.4 'Sora',sans-serif; color:var(--au-faint); margin:0 0 4px;
}
/* a faixa que fecha um mês ganha um traço a mais de luz — é o padrão que
   o dono usa, e ele lê "MÊS" antes de contar semana. */
.cgr-faixa.mes{ background:rgba(245,243,238,.10); color:var(--au-text-soft) }
.cgr-explica{
  font:400 var(--au-fs-xs)/1.4 'Sora',sans-serif; color:var(--au-faint); margin:0;
}

/* ══ PUXAR PRA ATUALIZAR (js/core/puxar-pra-atualizar.js) ══════════════
   [dono 2026-09-02] o gesto que faltava pra pegar versão nova num PWA
   instalado, onde não há barra de endereço nem Cmd+R. */
.pxa-ind{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 4px); left:50%;
  transform:translateX(-50%); z-index:400;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--au-dur) var(--au-ease), transform var(--au-dur) var(--au-ease);
}
.pxa-anel{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--au-line); border-top-color:var(--au-muted);
  display:block;
}
/* pronto pra soltar: o anel vira ouro — é o "agora" da régua de cor */
.pxa-ind.pronto .pxa-anel{ border-color:var(--au-gold-dim); border-top-color:var(--au-gold) }
.pxa-ind.girando .pxa-anel{ animation:pxaGira .7s linear infinite }
@keyframes pxaGira{ to{ transform:rotate(360deg) } }

.pxa-selo{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); left:50%;
  transform:translateX(-50%) translateY(-8px); z-index:401;
  padding:7px 14px; border-radius:999px;
  background:var(--au-surface-2); border:1px solid var(--au-line);
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-text-soft);
  opacity:0; pointer-events:none;
  transition:opacity var(--au-dur) var(--au-ease), transform var(--au-dur) var(--au-ease);
}
.pxa-selo.on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ── ANEL DE ESPERA (03/09/2026) — o "está vindo" do app ─────────────
   Nasceu na folha de pagamento (o esqueleto invisível de 7% de branco não
   dizia nada); é a mesma família do anel do puxar-pra-atualizar, só que
   pra qualquer espera de rede. Só transform anima. 28px, sem cor nova:
   trilho na linha do app, arco em text-soft. */
.au-anel{
  display:inline-block; width:28px; height:28px; border-radius:50%;
  border:2px solid var(--au-line); border-top-color:var(--au-text-soft);
}
.au-anel--girando{ animation:auGira .8s linear infinite }
@keyframes auGira{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .au-anel--girando{ animation:none } }

/* reduced-motion: o anel não gira, mas o gesto e o selo continuam */
@media (prefers-reduced-motion: reduce){
  .pxa-ind.girando .pxa-anel{ animation:none }
  .pxa-ind, .pxa-selo{ transition:opacity var(--au-dur) var(--au-ease) }
}

/* =======================================================================
   MINIATURA DO EXERCÍCIO — ver o movimento, não só o nome (dono 23/09)
   A peça que o editor usa nos TRÊS lugares em que se prescreve. O que é
   canônico aqui é a MOLDURA (borda, raio, recorte); o TAMANHO é do lugar,
   como `.au-btn` e `.au-ghost` já fazem com altura.
   Ver js/core/exercicio-miniatura.js.
   ==================================================================== */
.au-exthumb{
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--au-line);
  background:var(--au-surface-2); overflow:hidden; flex:none;
  object-fit:cover; color:var(--au-faint); font:300 18px 'Sora',sans-serif;
  /* quem recebe o toque é o botão em volta: sem isso a imagem come o clique */
  pointer-events:none;
}
.au-exthumb--m{ width:48px; height:64px }
.au-exthumb--p{ width:36px; height:48px }
.au-exthumb--sem{ background:none; border-style:dashed; border-color:var(--au-faint) }
.au-exthumb video{ width:100%; height:100%; object-fit:cover; display:block }

/* O ALVO É 44, A IMAGEM É MENOR. Área invisível não resolve — o fiscal
   mede a caixa do próprio elemento (a lição do ± de 13/08). */
.au-exthumb-btn{
  flex:none; display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0;
  background:none; border:none; cursor:pointer;
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-exthumb-btn:active{ transform:scale(.95) }
.au-exthumb-btn:focus-visible{ outline:1px solid var(--au-gold); outline-offset:2px; border-radius:10px }
.au-exthumb-btn--m{ min-width:48px }

/* A CAMADA — acima da folha da biblioteca do editor (4600), porque é de
   dentro dela que o toque nasce. */
.au-exvideo{
  position:fixed; inset:0; z-index:4700; background:rgba(5,5,4,.92);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation:auFadeIn 200ms linear both;
}
.au-exvideo-quadro{ width:min(100%,420px); max-height:82vh; aspect-ratio:3/4 }
.au-exvideo-quadro .au-video{ width:100%; height:100%; border-radius:14px; overflow:hidden }
.au-exvideo-yt{ width:100%; aspect-ratio:16/9 }
.au-exvideo-yt iframe{ width:100%; height:100%; border:0; border-radius:14px }
.au-exvideo-nome{
  position:absolute; left:16px; right:72px; bottom:22px;
  font:300 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text);
  text-shadow:0 2px 14px rgba(0,0,0,.85); pointer-events:none;
}
.au-exvideo-x{
  position:absolute; top:14px; right:14px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.2); color:var(--au-text);
  font-size:20px; line-height:1; cursor:pointer; padding:0;
}
@media (prefers-reduced-motion: reduce){ .au-exvideo{ animation:none } }

/* ── O SELETOR DE ÂNGULO (dono 2026-09-25, mockup exercicio-dois-angulos A)
   Ao lado do ✕, no topo do vídeo. UMA peça pros dois lugares que tocam o
   vídeo pra ver (executor do atleta e camada do editor): `angulosSeletorHTML`
   no core. Cada botão tem 44 de alvo; a pílula acesa é o ::before, recuado
   4px, pra o alvo não encolher junto com o desenho. Sem ouro: o ouro da
   tela cheia é a barra do progresso. */
.au-angulos{
  display:flex; height:44px; border-radius:22px;
  /* a linha é sombra por dentro, não `border`: a borda comia 2px e os
     botões saíam com 42 (o fiscal acusou na cena nova) */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); background:rgba(20,18,16,.45);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.au-angulo{
  position:relative; min-width:44px; height:44px; padding:0 12px; border:0; background:none; cursor:pointer;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--au-muted); transition:transform 120ms cubic-bezier(.22,1,.36,1), color 160ms;
}
.au-angulo::before{
  content:""; position:absolute; inset:4px; border-radius:18px; background:transparent;
  transition:background 160ms cubic-bezier(.22,1,.36,1); z-index:-1;
}
.au-angulo{ z-index:0 }
.au-angulo.on{ color:var(--au-text) }
.au-angulo.on::before{ background:rgba(245,243,238,.14) }
.au-angulo:active{ transform:scale(.97) }
.au-angulo:focus-visible{ outline:2px solid var(--au-text-soft); outline-offset:-4px; border-radius:18px }
/* o selinho da miniatura do executor: "este exercício tem N ângulos" */
.au-angulos-conta{
  position:absolute; left:3px; top:3px; min-width:15px; height:15px; padding:0 3px; border-radius:4px;
  background:rgba(11,10,9,.72); color:var(--au-text-soft); pointer-events:none;
  font:400 var(--au-fs-mono-xs)/15px 'Space Mono',monospace; text-align:center;
}
.au-exvideo .au-angulos{ position:absolute; top:14px; left:14px }