* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #111; color: #eee; min-height: 100vh; }
.container { max-width: 800px; margin: 0 auto; padding: 1rem; }
header { background: #1a1a2e; padding: .7rem 1rem; display: flex; flex-wrap: wrap; row-gap: .5rem; justify-content: space-between; align-items: center; }
header a { color: #7eb8f7; text-decoration: none; font-weight: bold; font-size: 1.2rem; }
nav { display: flex; align-items: center; flex-wrap: wrap; }
nav a { color: #aaa; text-decoration: none; margin-left: 1rem; }
nav a:hover { color: #eee; }
/* Ação primária ganha peso de botão; "Recuperar"/"Sair" ficam discretos ao
   lado — sem isso os três links do nav competem pelo mesmo peso visual e
   quebram em 3 linhas soltas no celular (ver print original). Aditivo às
   regras genéricas acima (usadas por login/upload/recording/etc. sem essas
   classes) — não pode substituí-las. */
nav a.nav-cta { color: #fff; background: #4a90e2; font-weight: 600; font-size: .85rem; padding: .45rem .9rem; border-radius: 6px; margin-left: .75rem; }
nav a.nav-cta:hover { color: #fff; }
nav a.nav-link { color: #888; font-size: .8rem; margin-left: .9rem; }
nav a.nav-link:hover { color: #ccc; }
.card { background: #1e1e2e; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.2rem; border-radius: 6px; border: none; cursor: pointer; font-size: 1rem; }
.btn-primary { background: #4a90e2; color: #fff; }
.btn-secondary { background: #333; color: #eee; }
.btn-success { background: #27ae60; color: #fff; }
.btn-danger { background: #c0392b; color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input:not([type="checkbox"]), select { width: 100%; padding: .6rem; border-radius: 6px; border: 1px solid #444; background: #2a2a3e; color: #eee; margin: .4rem 0; font-size: 1rem; }
label { display: block; margin-top: .8rem; color: #aaa; font-size: .9rem; }
/* Pill suave em vez de fundo sólido saturado — o selo de status não deve
   competir em peso com o título da gravação (era o elemento mais forte do
   card no design anterior, invertendo a hierarquia). */
.status-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .01em; border: 1px solid transparent; }
.status-done { background: rgba(39,174,96,.15); color: #4ade80; border-color: rgba(39,174,96,.35); }
.status-failed { background: rgba(192,57,43,.15); color: #f87171; border-color: rgba(192,57,43,.35); }
.status-rendering { background: rgba(230,126,34,.15); color: #fb923c; border-color: rgba(230,126,34,.35); }
.status-ready { background: rgba(41,128,185,.15); color: #7eb8f7; border-color: rgba(41,128,185,.35); }
.status-default { background: rgba(255,255,255,.08); color: #aaa; border-color: rgba(255,255,255,.15); }
.progress-track { background: #333; border-radius: 4px; height: 12px; overflow: hidden; margin: .4rem 0; }
.progress-fill { background: #4a90e2; height: 100%; border-radius: 4px; transition: width .3s ease; }
.error { color: #e74c3c; margin: .5rem 0; font-size: .9rem; }
.success { color: #27ae60; margin: .5rem 0; font-size: .9rem; }
.confidence-good { color: #27ae60; }
.confidence-ok { color: #e67e22; }
.confidence-low { color: #e74c3c; }
.recordings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
a.recording-card { display: block; text-decoration: none; color: inherit; padding: 0; margin: 0; overflow: hidden; }
.thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #2a2a3e; }
.thumb-placeholder { display: flex; align-items: center; justify-content: center; }
.thumb-icon { width: 40px; height: 40px; color: #7eb8f7; }
.icon-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-faded { opacity: .4; }
.btn-spinner { width: 16px; height: 16px; margin-right: .4rem; vertical-align: -3px; }
.card-body { padding: .9rem 1rem; }
.card-title { font-size: 1.02rem; font-weight: 600; display: block; }
.card-title + .status-badge { margin-top: .4rem; }
/* Duas linhas de meta com pesos diferentes: expiração é acionável (o usuário
   pode precisar baixar/publicar antes que o arquivo suma), tamanhos em GB
   são só curiosidade de bastidor — não deviam ter o mesmo destaque. */
.card-meta { color: #aaa; font-size: .85rem; margin-top: .5rem; }
.card-meta-primary { color: #ccc; font-size: .8rem; margin-top: .5rem; }
.card-meta-secondary { color: #777; font-size: .75rem; margin-top: .15rem; }
.expiry-expired { color: #f87171; }
.option-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.option-checkbox { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.option-checkbox input[type="checkbox"] { flex-shrink: 0; }
.clip-controls { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.clip-field-row { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Filho direto (>), não descendente: sem isso o "-10s" — primeiro filho da
   .clip-nudge-row — também casaria com a regra, ganharia flex:1 e esticaria,
   ficando maior que os outros cinco nudges. */
.clip-field-row > .btn:first-child { flex: 1; }
/* Os 4 botões de nudge (-5/-1/+1/+5) ocupam uma linha própria abaixo do
   campo, em vez de disputar espaço com ele. flex:1 faz cada um esticar pra
   dividir a largura igualmente — com só 4 (antes eram 6, incluindo ±10s)
   sobra espaço de sobra pra virarem alvos de toque confortáveis em vez de
   ficarem espremidos. */
.clip-nudge-row { display: flex; flex-wrap: wrap; gap: .3rem; flex-basis: 100%; }
.clip-nudge-row > .btn { flex: 1; }
.clip-download-btn { width: 100%; }
/* Player fixo no topo (spec 2026-09-06). A classe .sticky-player só é aplicada
   quando a lista de melhores momentos está em cena — ver renderUI. O fundo
   sólido é obrigatório: sem ele os cards aparecem por baixo ao rolar. */
.player-bar { padding: .5rem 0; }
.player-bar.sticky-player { position: sticky; top: 0; z-index: 10; background: #111; }
/* Teto de altura do player fixo. O vídeo é 16:9 na largura do container, então
   tem altura fixa (~432px) independente da janela — em viewport baixo (celular
   deitado, laptop com janela reduzida) ele passava a ocupar a tela inteira e
   deixava a lista de lances inalcançável em qualquer posição de scroll. 60vh
   não muda nada em tela normal (teto de 480px contra 432px naturais): só entra
   quando a altura da janela é o fator limitante.
   Não adiante tentar `width`/`max-width`/`margin` aqui: renderUI monta o
   <video> com style inline (`width:100%`), que vence folha de estilo por
   especificidade. O encolhimento vem do letterboxing — a caixa mantém a
   largura e o quadro 16:9 se encaixa dentro dela, com as tarjas pintadas pelo
   `background:#000` do próprio inline. */
.player-bar.sticky-player video { max-height: 60vh; display: block; }
.moment-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-top: .8rem; }
/* Coluna travada na largura do card e linhas com altura do conteúdo: quando
   o vizinho de linha é mais alto (ex: tem a faixa de lance colado), a grade
   da lista estica este card — sem align-content:start a altura extra ia pra
   linha da miniatura, que por ter aspect-ratio 16:9 crescia também em
   largura, estourava o card e o overflow:hidden cortava o checkbox e os
   botões da direita. */
.moment-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border-radius: 8px; background: #262638; border: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.moment-excluded { opacity: .45; }
.btn-icon { background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: #ccc; cursor: pointer; font-size: 1rem; padding: .3rem .5rem; min-height: 36px; }
.moment-thumb-wrap { position: relative; aspect-ratio: 16 / 9; cursor: pointer; display: block; background: #1a1a2e; }
.moment-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; font-size: 1.3rem; line-height: 1; }
.moment-chip { position: absolute; top: .3rem; background: rgba(0,0,0,.55); color: #eee; border-radius: 4px; padding: .1rem .35rem; font-size: .75rem; line-height: 1.3; }
.moment-chip-time { left: .3rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
/* Duração logo abaixo do tempo inicial, sobre a miniatura. Mais discreta de
   propósito (fonte menor, opacidade reduzida) — o tempo inicial continua
   sendo a âncora visual do card, a duração é só complemento. */
.moment-chip-duration { top: 1.5rem; left: .3rem; font-size: .65rem; opacity: .75; }
.moment-chip-toggle { right: .3rem; border: none; cursor: pointer; min-width: 36px; min-height: 36px; }
.moment-info { display: flex; flex-direction: column; gap: .2rem; padding: .4rem .5rem; min-width: 0; }
.moment-duration { display: inline-flex; align-items: baseline; gap: .2rem; color: #aaa; font-size: .85rem; min-width: 0; max-width: 100%; }
/* Rótulo e pessoa (ver momentLabelMarkup/momentPersonMarkup) são o próprio
   texto clicável — sem ícone de lápis separado. O sublinhado tracejado é a
   única pista visual de que é editável (sem hover no celular pra descobrir
   de outra forma), e continua sendo um <button> real (não <span> com
   onclick) pra preservar foco por teclado e leitor de tela. */
.moment-label-editable, .moment-person-editable {
  background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit;
  border-bottom: 1px dashed rgba(255,255,255,.35); cursor: pointer;
}
.moment-duration .moment-label-editable { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
/* A tesoura (ajustar corte) mudou de linha — antes disputava espaço com
   duração+rótulo, agora compartilha a linha da pessoa (texto normalmente
   curto: "+ pessoa" ou um nome), que sobra espaço à direita. */
.moment-person-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 1.2rem; }
/* Arquivar + ajustar corte lado a lado na linha da pessoa. */
.moment-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.moment-actions .btn-icon { padding: .3rem .4rem; }
/* Nome comprido ("Domenico") + dois botões não cabem no card estreito do
   celular — o nome encolhe com reticências em vez de empurrar os botões
   pra fora do card. */
.moment-person-row .moment-person-editable { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-person-row #momentPersonInput { min-width: 0; }
.moment-person-editable { color: #aaa; font-size: .8rem; }
.moment-person-editable.moment-person-empty { color: #777; }
.moment-card.selected { grid-column: 1 / -1; border-color: #4a90e2; background: rgba(74, 144, 226, 0.12); }
/* Feedback de "último lance tocado" (ver playMomentInPlayer) — cor verde pra
   não colidir semanticamente com o azul de .selected (que significa "sendo
   editado agora"), já que os dois estados podem coexistir no mesmo card. */
.moment-card.playing { border-color: #27ae60; }
/* Faixa de lance sobreposto/colado ao próximo (spec 2026-10-01). Vermelho
   = sobreposição (o trecho comum sairia duplicado no reel); neutro = só
   colado (convite pra mesclar e evitar o cross-dissolve no meio). */
.moment-adjacent { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .5rem; font-size: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.moment-adjacent-overlap { background: rgba(231, 76, 60, .18); color: #f5b7b1; }
.moment-adjacent-touching { background: rgba(255,255,255,.04); color: #aaa; }
.moment-adjacent-merge { flex-shrink: 0; background: none; border: 1px solid currentColor; border-radius: 4px; color: inherit; font-size: .75rem; padding: .15rem .45rem; cursor: pointer; min-height: 28px; }
.moment-adjacent-merge:disabled { opacity: .4; cursor: wait; }
/* Filtro por pessoa + resumo (item 8) — barra de chips acima da lista de
   melhores momentos. A linha de contagem/duração (.moments-summary) mora na
   player-bar desde a spec 2026-10-01 — ver regra logo abaixo. */
.person-filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.chip { background: #262638; color: #ccc; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; }
.chip.active { border-color: #4a90e2; background: rgba(74, 144, 226, 0.18); color: #fff; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.moments-summary { color: #aaa; font-size: .85rem; margin: .4rem 0 0; }
/* Resumo dentro da player-bar sticky (spec 2026-10-01) — colado no vídeo. */
.player-bar .moments-summary { margin: .35rem 0 0; color: #ccc; }

/* Turnos no leme — subseção do card "Melhores momentos" (ver
   docs/superpowers/specs/2026-09-15-turnos-leme-design.md). Linhas
   sempre editáveis (sem modo de edição separado) — lista curta o
   suficiente pra não precisar do padrão click-to-edit usado nos
   lances. */
.helm-shifts-section { margin: .8rem 0 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.helm-shifts-section h4 { margin: 0 0 .5rem; font-size: .95rem; color: #ccc; }
/* Recolhida (spec 2026-10-01): só a linha-resumo, que é o próprio botão. */
.helm-shifts-section.collapsed { margin-bottom: .6rem; padding-bottom: .6rem; }
.helm-shifts-section.collapsed h4 { margin: 0; }
.helm-shifts-toggle { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.shift-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
/* Escopados sob .shift-row (2 classes) de propósito — precisam vencer a
   regra global `input:not([type="checkbox"])` (style.css, seção de
   formulários), que tem especificidade maior que uma única classe (seletor
   de atributo conta como classe) e sobrescrevia width/margin/padding aqui,
   fazendo o campo de tempo esticar pra 100% e espremer o de pessoa. */
.shift-row .shift-time-input { flex: 0 0 5.5rem; width: 5.5rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.shift-row .shift-person-input { flex: 1; min-width: 0; }
.shift-row .shift-time-input, .shift-row .shift-person-input { background: #222; color: #eee; border: 1px solid #555; border-radius: 4px; padding: .3rem .4rem; font-size: .85rem; margin: 0; }

/* Cabeçalho de página (título + dado de uso em segundo plano) e header do
   app não tinham nenhum breakpoint — a versão >640px ganha um pouco mais
   de respiro; abaixo disso o layout de coluna única já é o default acima. */
.page-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0; flex-wrap: wrap; gap: .3rem 1rem; }
.page-head h2 { margin: 0; }
.usage-line { color: #666; font-size: .8rem; }
/* Celular: card de melhores momentos com menos padding — a lista em 2
   colunas precisa de cada pixel de largura. */
@media (max-width: 639px) {
  #bestMomentsCard { padding: .8rem; }
  .moment-list { gap: .5rem; }
}
@media (min-width: 640px) {
  header { padding: 1rem; }
  .usage-line { font-size: .85rem; }
}

/* Seletor de fonte de vento (card ready_to_render): cada opção é um card
   clicável inteiro, borda azul no escolhido. O radio continua lá dentro
   (teclado/leitor de tela) — os resets abaixo desfazem a regra global
   `input:not([type="checkbox"])` (width:100%, padding, margin), que esticava
   o radio até a largura toda e jogava o texto pra longe da bolinha. */
.wind-option { display: block; margin: 0; cursor: pointer; color: #ddd; font-size: .9rem; background: #262638; border: 2px solid rgba(255,255,255,.1); border-radius: 8px; padding: .6rem; transition: border-color .15s, background .15s; }
.wind-option:hover { border-color: rgba(74,144,226,.5); }
.wind-option:has(input:checked) { border-color: #4a90e2; background: rgba(74,144,226,.12); }
.wind-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.wind-option:has(input:disabled):hover { border-color: rgba(255,255,255,.1); }
.wind-option input[type="radio"] { width: auto; margin: .15rem 0 0; padding: 0; flex-shrink: 0; accent-color: #4a90e2; }
.wind-option-auto { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; }
.wind-options-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.wind-options-row .wind-option { flex: 1; min-width: 180px; }
.wind-option-img { width: 100%; border-radius: 6px; }
.wind-option-loading { display: block; color: #aaa; margin: 0 0 .3rem; }
.wind-option-footer { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.wind-option-title { display: block; color: #eee; font-weight: 600; }
.wind-option-sub { display: block; color: #999; font-size: .8rem; margin-top: .1rem; }