/* Camarim: direção visual "Sala escura" (docs/interface-design/sistema.md, 07/10/2026). Substitui o tema "camarim/cinema".
   Grafite neutro, o vídeo é o herói, UMA cor de destaque por tela, texto na fonte do aparelho, títulos em Playfair Display (local, OFL).
   Regra do Pacto: o fundo (canvas, z-index 0) fica ATRÁS do conteúdo (z-index 2); nenhum filtro, mistura ou desfoque em img e video. */
@font-face { font-family: 'Playfair'; src: url('/web/fonts/PlayfairDisplay-latin-var.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root, :root[data-tema="escuro"] {
  --fundo: #121114;
  --superficie: #1A191D;      /* cartões */
  --superficie-2: #232227;    /* campos, botão secundário, chips */
  --superficie-3: #2C2B31;    /* pressionado, trilhas */
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .16);
  --texto: #F2F0F4;
  --texto-2: #B6B3BE;
  --texto-3: #908D99;
  --tinta: #F2F0F4;           /* botão monocromático (quando a cor já está em outro lugar da tela) */
  --tinta-texto: #121114;
  --destaque: #CF3A66;        /* a UMA cor: ação principal */
  --destaque-texto: #FFFFFF;
  --destaque-suave: #EE6A90;  /* preenchimento de barra e ícone sobre fundo escuro */
  --atencao: #E9B24F;         /* só aviso do Pacto (resumo único) */
  --atencao-fundo: #372E24;
  --ok: #7FD1A8;              /* só o ícone de "Tudo certo" */
  --erro: #F08A82;
  --scrim: rgba(0, 0, 0, .55);
  --sombra-folha: 0 -10px 40px rgba(0, 0, 0, .45);
  --grao: .035;
  --bola-borda: transparent;   /* bolinha branca do slider: no claro ganha contorno (3:1) */
  --controle: #908D99;         /* contorno de controles desligados (interruptor, círculo do seletor): 3:1 */
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --fundo: #F5F3F0; --superficie: #FFFFFF; --superficie-2: #EEEBE7; --superficie-3: #E4E0DB;
  --linha: rgba(28, 26, 31, .09); --linha-forte: rgba(28, 26, 31, .18);
  --texto: #1C1A1F; --texto-2: #5A5760; --texto-3: #66636D;
  --tinta: #1C1A1F; --tinta-texto: #FFFFFF;
  --destaque: #C8325F; --destaque-texto: #FFFFFF; --destaque-suave: #C8325F;
  --atencao: #7A4B00; --atencao-fundo: #FBECD1; --ok: #1E7A52; --erro: #B3261E;
  --scrim: rgba(28, 26, 31, .38); --sombra-folha: 0 -10px 40px rgba(28, 26, 31, .16); --grao: .03;
  --bola-borda: #5A5760; --controle: #77737F;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --fundo: #F5F3F0; --superficie: #FFFFFF; --superficie-2: #EEEBE7; --superficie-3: #E4E0DB;
    --linha: rgba(28, 26, 31, .09); --linha-forte: rgba(28, 26, 31, .18);
    --texto: #1C1A1F; --texto-2: #5A5760; --texto-3: #66636D; --tinta: #1C1A1F; --tinta-texto: #FFFFFF;
    --destaque: #C8325F; --destaque-texto: #FFFFFF; --destaque-suave: #C8325F;
    --atencao: #7A4B00; --atencao-fundo: #FBECD1; --ok: #1E7A52; --erro: #B3261E;
    --scrim: rgba(28, 26, 31, .38); --sombra-folha: 0 -10px 40px rgba(28, 26, 31, .16); --grao: .03; --bola-borda: #5A5760; --controle: #77737F; color-scheme: light;
  }
}
:root {
  --fonte: system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Playfair', 'Iowan Old Style', Georgia, serif;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;   /* grade de 4 */
  --margem: 20px;
  --raio-campo: 12px; --raio-cartao: 16px; --raio-folha: 24px; --raio-botao: 14px;
  --suave: cubic-bezier(.2, .7, .2, 1); --t-toque: 120ms; --t-estado: 220ms; --t-tela: 360ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 16px/24px var(--fonte); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.cheio { fill: currentColor; stroke: none; }
.oculto { display: none !important; }

/* fundo (canvas parallax: atrás de tudo, nunca sobre vídeo nem rosto) */
#fundo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity .6s ease; }
html.fundo-recuado #fundo { opacity: .35; }
.pagina { position: relative; z-index: 2; }

/* ---------- tipografia */
.display { font: 500 34px/40px var(--titulo); letter-spacing: -.2px; margin: 0; }
.h1 { font: 500 28px/34px var(--titulo); letter-spacing: -.1px; margin: 0; }     /* título de tela: o único momento expressivo */
.h2 { font: 600 17px/24px var(--fonte); margin: 0; }
.corpo { font-size: 16px; line-height: 24px; }
.pequeno { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.legenda { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .2px; color: var(--texto-2); }
.t2 { color: var(--texto-2); } .t3 { color: var(--texto-3); }
.numero-grande { font: 400 72px/72px var(--titulo); letter-spacing: -1px; }
.secao { margin: var(--e6) 0 var(--e3); display: flex; align-items: baseline; justify-content: space-between; }
.secao .h2 { color: var(--texto); }

/* ---------- botões: um cheio por tela */
.botao { display: flex; align-items: center; justify-content: center; gap: var(--e2); width: 100%; height: 52px; border-radius: var(--raio-botao); font-weight: 600; font-size: 16px; transition: transform var(--t-toque) var(--suave), background var(--t-toque); }
.botao:active { transform: scale(.98); }
.botao.principal { background: var(--destaque); color: var(--destaque-texto); }
.botao.tinta { background: var(--tinta); color: var(--tinta-texto); }
.botao.secundario { background: var(--superficie-2); color: var(--texto); }
.botao.texto { background: none; color: var(--texto-2); height: 44px; width: auto; padding: 0 var(--e4); }
.botao.pequeno-b { height: 40px; width: auto; padding: 0 var(--e4); font-size: 15px; border-radius: 12px; }
.botao[disabled], .botao.desligado { opacity: .4; }
.barra-acao { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 390px; bottom: 0; z-index: 5; padding: var(--e3) var(--margem) 28px; display: flex; gap: var(--e3);
  background: linear-gradient(to top, var(--fundo) 70%, transparent); }
.barra-acao .secundario { width: 96px; }

/* ---------- cartão */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: var(--e4); }
.cartao.sem-padding { padding: 0; overflow: hidden; }
.linha-lista { display: flex; align-items: center; gap: var(--e3); min-height: 56px; padding: var(--e3) var(--e4); }
.linha-lista + .linha-lista { border-top: 1px solid var(--linha); }
.linha-lista .meio { flex: 1; min-width: 0; }
.linha-lista .meio .pequeno { margin-top: 2px; }
.linha-lista .fim { color: var(--texto-3); }
.valor { color: var(--texto-2); text-align: right; }

/* ---------- vídeo (herói): sem nada por cima do rosto */
.video { position: relative; margin: 0 auto; border-radius: var(--raio-cartao); overflow: hidden; background: #000; }
.video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-controle { display: flex; align-items: center; gap: var(--e3); margin: var(--e3) auto 0; }
.video-controle .trilha { flex: 1; height: 4px; border-radius: 2px; background: var(--superficie-3); position: relative; }
.video-controle .trilha i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--texto); }
.video-controle .tempo { font-size: 13px; color: var(--texto-2); min-width: 78px; text-align: right; }
.video-controle .botao-icone { width: 36px; height: 36px; background: var(--superficie-2); }

/* ---------- tira de takes */
.tira { display: flex; gap: var(--e2); overflow-x: auto; padding: 4px var(--margem) var(--e2); margin: 0 calc(var(--margem) * -1); scrollbar-width: none; }
.tira::-webkit-scrollbar { display: none; }
.take { flex: none; width: 56px; text-align: center; }
.take .quadro { width: 56px; height: 100px; border-radius: 10px; overflow: hidden; background: var(--superficie-2); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--t-estado); }
.take .quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.take .n { margin-top: var(--e2); font-size: 12px; line-height: 16px; color: var(--texto-2); display: flex; align-items: center; justify-content: center; gap: 4px; }
.take .d { font-size: 11px; line-height: 14px; color: var(--texto-3); }
.take.atual .quadro { outline-color: var(--texto); }
.take.atual .n { color: var(--texto); font-weight: 600; }
.take .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--atencao); }   /* o único marcador por take: ponto sob a imagem, nunca sobre ela */
.acoes-take { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e3); }
.acoes-take .botao { width: auto; height: 40px; padding: 0 var(--e3); font-size: 15px; border-radius: 12px; }
.acoes-take .botao svg { width: 18px; height: 18px; }

/* ---------- chips (neutros, no máximo 2 por take) */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--superficie-2); color: var(--texto-2); font-size: 12px; font-weight: 500; letter-spacing: .1px; white-space: nowrap; }

/* ---------- avisos */
.resumo { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 48px; padding: var(--e2) var(--e4); border-radius: var(--raio-cartao); text-align: left; font-weight: 600; font-size: 15px; }
.resumo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.resumo.atencao .chev { margin-left: auto; }
.resumo.ok { background: var(--superficie); border: 1px solid var(--linha); color: var(--texto); }
.resumo.ok svg:first-child { color: var(--ok); }
.avisos-lista { margin-top: var(--e2); border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--linha); overflow: hidden; }
.aviso { padding: var(--e4); }
.aviso + .aviso { border-top: 1px solid var(--linha); }
.aviso b { display: block; font-weight: 600; }
.aviso .pequeno { margin-top: 2px; }
.aviso .links { display: flex; gap: var(--e4); margin-top: var(--e3); font-size: 15px; font-weight: 600; }
.aviso .links span { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-forte); }
.dicas { margin-top: var(--e3); border-radius: var(--raio-cartao); border: 1px solid var(--linha); }
.dicas > .cab { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 0 var(--e4); color: var(--texto-2); font-weight: 500; font-size: 15px; }
.dicas > .cab .chev { margin-left: auto; }
.dicas .item { padding: var(--e3) var(--e4); border-top: 1px solid var(--linha); font-size: 14px; line-height: 20px; color: var(--texto-2); }

/* ---------- seletor (uma escolha): contorno de tinta, nunca de cor */
.opcao { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 64px; padding: var(--e3) var(--e4); border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--linha); text-align: left; transition: border-color var(--t-estado); }
.opcao + .opcao { margin-top: var(--e2); }
.opcao .meio { flex: 1; min-width: 0; }
.opcao .meio b { display: block; font-weight: 600; }
.opcao .marca-sel { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--linha-forte); display: grid; place-items: center; flex: none; }
.opcao.sel { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.opcao.sel .marca-sel { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.opcao.sel .marca-sel svg { width: 14px; height: 14px; stroke-width: 2.6; }
.opcao:not(.sel) .marca-sel svg { display: none; }
.opcao.fechada { opacity: .5; }
.grade-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.grade-tipos .opcao { margin: 0; min-height: 56px; padding: var(--e3); }
.grade-tipos .opcao svg.i { color: var(--texto-2); }
.grade-tipos .opcao.sel svg.i { color: var(--texto); }
.grade-tipos .opcao b { font-size: 15px; }
.interruptor { width: 51px; height: 31px; border-radius: 16px; background: var(--superficie-3); position: relative; flex: none; transition: background var(--t-estado); }
.interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform var(--t-estado) var(--suave); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.interruptor.on { background: var(--texto-2); }
.interruptor.on::after { transform: translateX(20px); }

/* ---------- slider e barra de progresso: neutros; só o progresso de trabalho usa a cor */
.slider { position: relative; height: 44px; display: flex; align-items: center; }
.slider .trilha { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--superficie-3); }
.slider .preench { position: absolute; left: 0; height: 4px; border-radius: 2px; background: var(--texto-2); width: calc(12px + (100% - 24px) * var(--v) / 100); }
.slider .bola { position: absolute; top: 10px; left: calc(12px + (100% - 24px) * var(--v) / 100); width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); border: 1px solid var(--linha-forte); }
.slider-rotulos { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-2); }
.progresso { height: 4px; border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.progresso i { display: block; height: 100%; border-radius: 2px; background: var(--destaque-suave); transition: width .6s var(--suave); }
.passos { display: flex; gap: 6px; padding: 0 var(--margem); margin-bottom: var(--e5); }
.passos i { flex: 1; height: 3px; border-radius: 2px; background: var(--superficie-3); }
.passos i.feito { background: var(--texto-2); } .passos i.atual { background: var(--texto); }

/* ---------- miniaturas e envio */
.grade-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.mini { position: relative; aspect-ratio: 9 / 14; border-radius: 12px; overflow: hidden; background: var(--superficie-2); }
.mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini .envio { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.mini .envio i { display: block; height: 100%; background: var(--destaque-suave); }
.soltar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e2); min-height: 120px; border-radius: var(--raio-cartao); border: 1.5px dashed var(--linha-forte); color: var(--texto-2); text-align: center; }
.campo { width: 100%; min-height: 52px; padding: var(--e3) var(--e4); border-radius: var(--raio-campo); background: var(--superficie-2); border: 1px solid transparent; color: var(--texto); }
.campo.area { min-height: 168px; line-height: 24px; }
.campo::placeholder { color: var(--texto-3); }
.antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.antes-depois figure { margin: 0; text-align: center; } .antes-depois img { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 12px; }
.antes-depois figcaption { margin-top: 6px; font-size: 13px; color: var(--texto-2); }

/* ---------- folha (sheet) */
.scrim { position: fixed; inset: 0; z-index: 8; background: var(--scrim); }
.folha { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 390px; bottom: 0; z-index: 9; background: var(--superficie); border-radius: var(--raio-folha) var(--raio-folha) 0 0; box-shadow: var(--sombra-folha); padding: var(--e2) var(--margem) 28px; border-top: 1px solid var(--linha); }
.folha .alca { width: 36px; height: 5px; border-radius: 3px; background: var(--linha-forte); margin: 0 auto var(--e4); }
.folha .cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e4); }
.folha .cabeca .h1 { font-size: 24px; line-height: 30px; }

/* ---------- movimento: uma entrada suave por tela; nada quando o usuário pede menos movimento */
@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.entra { animation: entra var(--t-tela) var(--suave) both; }
@media (prefers-reduced-motion: reduce) { .entra { animation: none; } * { transition-duration: .01ms !important; } }

/* Playfair tem números "de texto" por padrão (o 4 desce da linha): nos títulos usamos números alinhados */
.display, .h1, .numero-grande, .marca { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* =====================================================================================================================
   Aplicação (o que o app usa além dos tokens e componentes do sistema). Sem brilho, sem vidro, sem filtro em imagem ou vídeo.
   ===================================================================================================================== */
html { background: var(--fundo); }
body { min-height: 100vh; overflow-x: hidden; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a { color: inherit; }
.pagina { position: relative; z-index: 2; width: 100%; max-width: 600px; margin: 0 auto; min-height: 100vh; padding-bottom: 128px; }
.pagina.larga { max-width: 1160px; }
.pagina.sem-barra { padding-bottom: 48px; }
.topo { padding: 0 var(--e3); }
.topo .espaco { flex: 1; }
.topo .lado { min-width: 44px; display: flex; justify-content: flex-end; font-size: 13px; color: var(--texto-2); padding-right: 6px; white-space: nowrap; }
.topo .titulo-pequeno { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.marca { text-decoration: none; color: var(--texto); }
.botao { text-decoration: none; cursor: pointer; }
a.botao { display: flex; }
.conteudo { padding: 0 var(--margem); }
.sub { margin: var(--e2) 0 var(--e5); font-size: 16px; line-height: 24px; color: var(--texto-2); }
.centro { text-align: center; }
.mt8 { margin-top: var(--e2); } .mt12 { margin-top: var(--e3); } .mt16 { margin-top: var(--e4); } .mt24 { margin-top: var(--e5); } .mt32 { margin-top: var(--e6); }

/* barra de ação (rodapé) e folha: centradas sem transform, para a animação de entrada não brigar */
.barra-acao { left: 0; right: 0; transform: none; margin: 0 auto; width: 100%; max-width: 600px; }
.barra-acao .secundario, .barra-acao .botao.secundario { width: 112px; flex: none; }
.scrim { animation: aparece var(--t-estado) ease both; }
.folha { left: 0; right: 0; transform: none; margin: 0 auto; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; animation: sobe var(--t-tela) var(--suave) both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 800px) { .folha { inset: 0; margin: auto; height: fit-content; max-height: min(88vh, 780px); border-radius: var(--raio-folha); border: 1px solid var(--linha); } }
.folha .cabeca { position: sticky; top: 0; background: var(--superficie); padding-top: var(--e2); margin-top: calc(var(--e2) * -1); z-index: 1; }

/* linha de lista clicável */
button.linha-lista, a.linha-lista { width: 100%; text-align: left; color: inherit; text-decoration: none; background: none; }
.linha-lista .meio .t { font-weight: 600; }
.linha-lista .fim svg { display: block; }

/* início */
.hero { padding: var(--e7) 0 var(--e6); }
.hero .sub { margin: var(--e3) 0 28px; }
.item-video .mini-capa { width: 44px; aspect-ratio: 9 / 14; flex: none; border-radius: 8px; overflow: hidden; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-3); }
.item-video .mini-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.item-video .meio .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-video .progresso { margin-top: var(--e2); width: 140px; }
.vazio-msg { padding: var(--e5) var(--e4); text-align: center; color: var(--texto-2); }

/* passos do novo vídeo */
.opcao { font-size: 16px; cursor: pointer; color: var(--texto); }
.opcao[disabled] { opacity: .5; cursor: default; }
.grade-tipos .opcao { min-height: 56px; }
.nota { display: flex; gap: var(--e2); margin-top: var(--e4); font-size: 14px; line-height: 20px; color: var(--texto-2); }
.nota svg.i { width: 18px; height: 18px; margin-top: 1px; }
.campo-rotulo { display: block; margin: var(--e4) 0 var(--e2); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--texto-2); }
input.campo, textarea.campo { display: block; font-size: 16px; }
textarea.campo { resize: vertical; min-height: 168px; font-family: var(--fonte); }
.campo:focus { outline: 2px solid var(--texto); outline-offset: 1px; }
.soltar { cursor: pointer; padding: var(--e5); transition: border-color var(--t-estado); }
.soltar.sobre { border-color: var(--texto); }
.soltar b { color: var(--texto); font-weight: 600; }
.grade-mini .item { min-width: 0; }
.grade-mini .item .tirar { display: block; width: 100%; height: 36px; font-size: 13px; color: var(--texto-2); }
.grade-mini .item .nome { font-size: 12px; line-height: 16px; margin-top: 4px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini.enviando { display: grid; place-items: center; color: var(--texto-3); font-size: 13px; }
.mini .envio { background: var(--superficie-3); }
.antes-depois { margin: 0 auto; max-width: 340px; }
.valor { font-variant-numeric: tabular-nums; }
.linha-lista .valor { max-width: 55%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* controles nativos refeitos: slider neutro e interruptor */
input[type=range].desliza { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --v: 50; }
.desliza::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--texto-2) calc(var(--v) * 1%), var(--superficie-3) calc(var(--v) * 1%)); }
.desliza::-moz-range-track { height: 4px; border-radius: 2px; background: var(--superficie-3); }
.desliza::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--texto-2); }
.desliza::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 1px solid var(--linha-forte); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.desliza::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--linha-forte); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.rotulo-duplo { display: flex; justify-content: space-between; font-size: 16px; }
.rotulo-duplo .valor { color: var(--texto-2); }
button.interruptor { display: block; border: 0; padding: 0; cursor: pointer; }
button.interruptor:focus-visible { outline-offset: 3px; border-radius: 16px; }

/* vídeo da revisão: nada por cima da imagem; controles abaixo */
.video { width: 280px; aspect-ratio: 9 / 16; max-width: 100%; }
.video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.video-controle { width: 280px; max-width: 100%; }
.video-controle .botao-icone { flex: none; }
.video-controle input[type=range] { flex: 1; min-width: 0; height: 36px; }
.video-controle .tempo { min-width: 74px; }
.video-take { display: block; width: 100%; max-height: 62vh; border-radius: var(--raio-cartao); background: #000; }
.video-take-caixa { display: flex; justify-content: center; }
.info-video { margin-top: var(--e2); font-size: 14px; line-height: 20px; color: var(--texto-2); text-align: center; }

/* revisão */
.revisao-grade { display: block; }
.revisao-grade .coluna-video { display: flex; flex-direction: column; align-items: center; margin-top: var(--e4); }
.takes-lista, .so-desk { display: none; }
.take { background: none; padding: 0; border: 0; color: inherit; }
.take .quadro { outline-width: 2px; }
.take .check { color: var(--texto-3); display: inline-flex; }
.take .check svg { width: 12px; height: 12px; stroke-width: 2.4; }
.take .ponto { flex: none; }
.take-detalhe { margin-top: var(--e2); }
.take-detalhe .cab { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.take-detalhe p { margin: var(--e2) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.link { display: inline; font-size: 15px; font-weight: 600; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linha-forte); padding: 0; min-height: 0; }
.aviso .links .link { margin-right: var(--e4); }
.aviso .links { flex-wrap: wrap; }
.aviso .titulo { display: block; font-weight: 600; }
.escolhido-nota { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--e2); font-size: 13px; color: var(--texto-3); }
.escolhido-nota svg { width: 14px; height: 14px; }
.mais-linhas { display: grid; gap: 0; }
.acoes-take .botao.secundario { background: var(--superficie-3); }
.dicas > .cab { width: 100%; text-align: left; }
.dicas .item { color: var(--texto-2); }
.tecnico { margin-top: var(--e4); }
.tecnico pre { white-space: pre-wrap; font: 12px/18px ui-monospace, Consolas, monospace; color: var(--texto-2); background: var(--superficie-2); padding: var(--e3); border-radius: var(--raio-campo); max-height: 260px; overflow: auto; margin: 0; }
.bloco-musica { margin-top: var(--e5); }
.resumo { cursor: pointer; }
.resumo.ok { cursor: default; }
.resumo svg.i { width: 22px; height: 22px; }
.faixa-mudou { margin-top: var(--e3); font-size: 14px; line-height: 20px; color: var(--texto-2); }

@media (min-width: 900px) {
  .pagina.larga .conteudo { padding: 0; }
  .pagina.larga .topo { padding: 0; height: 72px; }
  .revisao-grade { display: grid; grid-template-columns: 380px minmax(0, 560px); gap: 48px; align-items: start; justify-content: center; }
  .revisao-grade .coluna-video { position: sticky; top: 16px; margin-top: 0; }
  .video { width: 340px; }
  .video-controle { width: 340px; }
  .tira, .so-celular, .take-detalhe.so-celular { display: none !important; }
  .takes-lista, .so-desk { display: block; }
  .takes-lista .linha-lista { cursor: pointer; }
  .takes-lista .linha-lista.sel { background: var(--superficie-2); }
  .takes-lista .acoes { display: flex; gap: var(--e2); }
  .takes-lista .botao { background: var(--superficie-3); width: auto; height: 40px; padding: 0 var(--e3); font-size: 15px; border-radius: 12px; }
  .takes-lista .nota-take { padding: 0 var(--e4) var(--e3); font-size: 14px; line-height: 20px; color: var(--texto-2); }
  .takes-lista .linha-wrap + .linha-wrap { border-top: 1px solid var(--linha); }
  .takes-lista .linha-wrap .linha-lista + .linha-lista { border-top: 0; }
  .takes-lista .linha-wrap.sel { background: var(--superficie-2); }
  .so-desk-botao { width: 240px; }
  .barra-acao.so-celular { display: none; }
}
.linha-wrap { display: block; }

/* progresso */
.progresso-tela { padding-top: 96px; text-align: center; }
.progresso-tela .numero-grande span { font-size: 36px; color: var(--texto-2); }
.progresso-tela .progresso { margin: var(--e5) 24px 0; height: 4px; }
.progresso-tela .etapas { margin-top: var(--e7); text-align: left; }
.etapa { display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding: 0 var(--e4); color: var(--texto-3); font-size: 15px; }
.etapa + .etapa { border-top: 1px solid var(--linha); }
.etapa .marca-etapa { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.etapa .marca-etapa svg { width: 16px; height: 16px; stroke-width: 2.2; }
.etapa.ok { color: var(--texto-2); }
.etapa.rodando { color: var(--texto); font-weight: 600; }
.etapa.rodando .marca-etapa::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto); }
.etapa.erro { color: var(--texto); }

/* exportar */
.arquivo-cartao { display: flex; gap: var(--e4); align-items: center; }
.arquivo-cartao .mini { width: 56px; aspect-ratio: 9 / 14; flex: none; border-radius: 10px; }
.capas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.capas a { display: block; padding: 3px; border-radius: 14px; border: 1px solid var(--linha); background: var(--superficie); text-decoration: none; }
.capas a .mini { border-radius: 11px; }
.contagem { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-2); }
.contagem.estourou, .validacao .problema { color: var(--erro); }
.validacao { margin-top: var(--e3); display: grid; gap: var(--e2); font-size: 14px; line-height: 20px; color: var(--texto-2); }
.passo-musica { white-space: pre-wrap; font: inherit; color: var(--texto-2); margin: 0; font-size: 14px; line-height: 20px; }
.lista-simples { margin: var(--e2) 0 0; padding-left: 20px; color: var(--texto-2); font-size: 14px; line-height: 20px; }
.lista-simples li + li { margin-top: 4px; }
.ganchos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.ganchos .botao { font-weight: 500; max-width: 100%; height: auto; min-height: 40px; padding: var(--e2) var(--e3); text-align: left; }

/* erro (neutro, sem vermelho) */
.erro-tela { padding-top: 72px; text-align: center; }
.erro-tela .icone-erro { width: 64px; height: 64px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; margin: 0 auto var(--e5); color: var(--texto-2); }
.erro-tela .icone-erro svg { width: 30px; height: 30px; }

/* trocar take e música (folhas) */
.folha .sub-folha { margin: calc(var(--e2) * -1) 0 var(--e4); font-size: 15px; line-height: 22px; color: var(--texto-2); }
.opcao.com-mini { padding: 10px var(--e4) 10px 10px; }
.opcao .mini-op { width: 48px; aspect-ratio: 9 / 14; flex: none; border-radius: 8px; overflow: hidden; background: var(--superficie-2); }
.opcao .mini-op img { display: block; width: 100%; height: 100%; object-fit: cover; }
.opcao-ver { margin: 4px 0 0 58px; }
.tocar-musica { width: 40px; height: 40px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; flex: none; color: var(--texto); }
.tocar-musica svg { width: 20px; height: 20px; }
.folha .botao { margin-top: var(--e4); }
.folha .botao.texto { margin-top: var(--e2); }
.folha .nota-folha { margin: var(--e3) 0 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.rot-secao { margin: var(--e4) 0 var(--e2); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--texto-2); }
.emocoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.emocoes button { height: 40px; padding: 0 var(--e4); border-radius: 20px; background: var(--superficie-2); color: var(--texto); font-size: 15px; font-weight: 500; border: 1px solid transparent; }
.emocoes button[aria-pressed="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }

/* aviso passageiro */
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 112px; z-index: 20; max-width: min(92vw, 420px); background: var(--tinta); color: var(--tinta-texto); border-radius: var(--raio-botao); padding: 12px 16px; font-size: 15px; font-weight: 600; text-align: center; animation: entra var(--t-estado) var(--suave) both; }

@media (prefers-reduced-motion: reduce) { .folha, .scrim, .toast { animation: none; } }

/* ajustes finais da aplicação */
.conteudo .passos { padding: 0; }
.grade-tipos .opcao .marca-sel { display: none; }
.grade-tipos .opcao.fechada.sel { border-color: var(--texto); }
.opcao .meio { text-align: left; }
.opcao.com-mini { align-items: center; }
.pagina.larga .topo .titulo-pequeno { }
@media (min-width: 900px) { .pagina.larga .topo .titulo-pequeno { visibility: hidden; } }

/* cabeçalho (voltou da moldura dos wireframes) */
.topo { display: flex; align-items: center; height: 56px; gap: var(--e2); }
.topo .titulo-pequeno { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: var(--texto-2); }
.botao-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--texto); transition: background var(--t-toque); flex: none; }
.botao-icone:active { background: var(--superficie-2); }
.marca { display: flex; align-items: center; gap: var(--e2); flex: 1; padding-left: var(--e2); font: 500 22px/1 var(--titulo); letter-spacing: .2px; }
.marca svg { width: 22px; height: 22px; color: var(--texto-2); }
.conteudo { padding: 0 var(--margem); }

/* revisão no celular: o resumo do Pacto vem ANTES do vídeo; no computador volta para a coluna da direita */
.revisao-grade { display: flex; flex-direction: column; }
.revisao-grade .coluna-lista { display: contents; }
.revisao-grade .resumo-box { order: -1; margin-top: var(--e1); }
.contagem { white-space: nowrap; }
@media (min-width: 900px) {
  .revisao-grade { display: grid; }
  .revisao-grade .coluna-lista { display: block; }
  .revisao-grade .resumo-box { order: 0; margin-top: 0; }
}

/* =====================================================================================================================
   Revisão de arte (08/10/2026, docs/interface-design/critica.md): alvos de toque de 44 px, contraste de controles (3:1), links que parecem links,
   respiro nas áreas seguras do iPhone, topo alinhado ao conteúdo no computador.
   ===================================================================================================================== */
/* controles: contorno visível quando desligados (interruptor, círculo do seletor); bolinha do slider com contorno no claro */
.interruptor { box-shadow: inset 0 0 0 1.5px var(--controle); }
.interruptor.on { box-shadow: none; }
.opcao .marca-sel { border-color: var(--controle); }
.desliza::-webkit-slider-thumb { border: 2px solid var(--bola-borda); }
.desliza::-moz-range-thumb { border: 2px solid var(--bola-borda); }
.desliza::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--texto-2) calc(var(--v) * 1%), var(--superficie-3) calc(var(--v) * 1%)); box-shadow: inset 0 0 0 1px var(--linha); }
.slider-rotulos, .antes-depois figcaption { font-size: 14px; }

/* "Só organizo" (Estímulo): apagado sem perder a leitura (antes 50% de opacidade = contraste 3,1) */
.opcao.fechada { opacity: 1; border-style: dashed; }
.opcao.fechada .meio b, .opcao.fechada .pequeno { color: var(--texto-2); }

/* links de texto (Ver o trecho, Trocar, Está bom...): sublinhado legível e área de toque de 44 px sem mudar o desenho */
.link { text-decoration-color: var(--texto-3); text-decoration-thickness: 1.5px; padding: 12px 0; margin: -12px 0; position: relative; }
.aviso .links { gap: 0 var(--e5); align-items: center; }
.aviso .links .link { margin-right: 0; }
.opcao-ver { padding: 12px 0; margin: -4px 0 0 70px; }

/* alvos de toque: nada abaixo de 44 px */
.acoes-take .botao, .takes-lista .botao { height: 44px; }
.video-controle .botao-icone { width: 44px; height: 44px; }
.video-controle input[type=range] { height: 44px; }
.grade-mini .item .tirar { height: 44px; }
.tocar-musica { width: 44px; height: 44px; }
.ganchos .botao { min-height: 44px; }

/* pequenos textos: nada menor que 12 px */
.take .d { font-size: 12px; line-height: 16px; }
.take .n { font-size: 13px; }
.aviso-forte { font-size: 14px; line-height: 20px; color: var(--texto-2); margin: var(--e2) 0 0; }

/* a mudança pendente mora logo abaixo do vídeo que ela diz estar velho */
.coluna-video .faixa-mudou { display: flex; gap: var(--e2); align-items: flex-start; width: 280px; max-width: 100%; margin-top: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--linha); color: var(--texto); font-size: 14px; line-height: 20px; }
.coluna-video .faixa-mudou svg { width: 18px; height: 18px; margin-top: 1px; color: var(--texto-2); }
@media (min-width: 900px) { .coluna-video .faixa-mudou { width: 340px; } }

/* áreas seguras do iPhone (barra de início e entalhe) e altura real da tela */
body { min-height: 100vh; min-height: 100dvh; }
.pagina { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(128px + env(safe-area-inset-bottom)); }
.pagina.sem-barra { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.barra-acao { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
.folha { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
.toast { bottom: calc(112px + env(safe-area-inset-bottom)); }
.topo { padding-left: max(var(--e3), env(safe-area-inset-left)); padding-right: max(var(--e3), env(safe-area-inset-right)); }

/* computador: o cabeçalho acompanha a largura do conteúdo, não as bordas da janela */
@media (min-width: 900px) {
  .pagina.larga .topo, .pagina.larga .conteudo { max-width: 1028px; margin: 0 auto; padding: 0 var(--margem); }   /* 988 de conteúdo + 2 x 20; a 900 px ainda sobra respiro */
  .pagina.larga .topo .botao-icone:first-child { margin-left: -10px; }
  .pagina.larga .topo .botao-icone:last-child { margin-right: -10px; }
}
.link { min-width: 44px; }
.acoes-take .botao { min-width: 44px; justify-content: center; }
.emocoes button { height: 44px; }

/* entre 600 e 900 px (tablet em pé) a revisão continua uma coluna só, na largura do celular, em vez de esticar os cartões */
.pagina.larga { max-width: 600px; }
@media (min-width: 900px) { .pagina.larga { max-width: 1160px; } }
html.com-folha, html.com-folha body { overflow: hidden; }
html { scrollbar-gutter: stable; }
a.marca { min-height: 44px; }

/* =====================================================================================================================
   Acesso pelo celular (Passo 2 da fase 2, 09/10/2026): tela do PIN, PC desligado/fora de alcance, status do PC, envio em partes.
   Mesmas regras de calma: uma cor por tela, nada sobre vídeo, texto de erro só no campo.
   ===================================================================================================================== */
.login { max-width: 360px; margin: 0 auto; padding-top: max(12vh, 56px); }
.login-marca { width: 64px; height: 64px; margin: 0 auto var(--e4); border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; color: var(--texto-2); }
.login-marca svg { width: 30px; height: 30px; }
.login .sub { margin-bottom: var(--e5); }
.campo.pin { text-align: center; font-size: 22px; line-height: 28px; }
.campo.pin:not(:placeholder-shown) { letter-spacing: 8px; }
.erro-linha { min-height: 20px; margin: var(--e2) 0 var(--e3); color: var(--erro); text-align: center; }
.erro-linha:empty { margin-bottom: var(--e3); }
.campo.pin:disabled { opacity: .5; }

.status-pc { display: block; margin: var(--e4) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-2); text-align: center; }
.ponto-pc { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--texto-3); }
.ponto-pc.ok { background: var(--ok); }
.faixa-envio { display: block; margin-top: var(--e3); text-align: center; font-size: 14px; line-height: 20px; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--texto-3); padding: 12px 0; }

.faixa-offline { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; background: var(--tinta); color: var(--tinta-texto); }

.envio-controles { display: flex; gap: var(--e2); align-items: center; margin-top: var(--e3); }
.envio-controles .botao { width: auto; }
.item-envio .rot-envio { padding: 0 4px; text-align: center; line-height: 16px; }
.item-envio[data-estado="sem-conexao"] .rot-envio, .item-envio[data-estado="erro"] .rot-envio { color: var(--texto); }
.mini.enviando .envio { height: 4px; }
.mini.enviando .envio i { transition: width .25s linear; }

/* =====================================================================================================================
   Briefing do vídeo (10/10/2026): "Conta pra mim o que é esse vídeo". Mesma calma: neutro, uma cor só (o botão principal), escolhido = contorno de tinta + visto.
   Gravar não pisca nem pulsa: o relógio andando já diz que está gravando.
   ===================================================================================================================== */
textarea.briefing-texto { min-height: 132px; line-height: 24px; }
.briefing-audio { margin-top: var(--e2); }
.briefing-audio .botao + .pequeno { margin-top: var(--e2); }
.briefing-audio label.botao.texto { margin-top: var(--e2); cursor: pointer; }
.briefing-audio label.botao.texto svg.i { width: 18px; height: 18px; }
.briefing-audio label.botao.secundario { margin-top: var(--e2); cursor: pointer; }
.briefing-audio label.botao.secundario svg.i { width: 18px; height: 18px; }
.passos-audio { margin: var(--e3) 0 0; padding-left: 20px; color: var(--texto-2); }
.passos-audio li { margin-top: 4px; }
.guardar-audio { margin-top: var(--e3); padding: var(--e2) 0; border-top: 1px solid var(--linha); }
.aviso-audio { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--texto); font-weight: 500; }
.gravador { display: flex; flex-direction: column; align-items: stretch; gap: var(--e3); padding: var(--e5) var(--e4); border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--linha); }
.gravador .pequeno { margin: 0; text-align: center; }
.gravador .botao.texto { margin: 0 auto; }
.tempo-grav { text-align: center; font-family: var(--titulo); font-weight: 400; font-size: 48px; line-height: 52px; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1; color: var(--texto); }
.estado-audio { margin: 0; text-align: center; color: var(--texto); font-weight: 500; }
.entendi .entendi-fixo { display: flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e1, 4px); color: var(--texto); font-weight: 600; }
.entendi .entendi-fixo svg.i { color: var(--texto-2); width: 18px; height: 18px; }
.entendi .opcao { min-height: 56px; margin-top: var(--e2); }
.entendi .opcao .meio b { font-weight: 500; }
.duas-escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.duas-escolhas .botao[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--texto); }
.briefing-citacao { margin: 0 0 var(--e2); padding-left: var(--e3); border-left: 2px solid var(--linha-forte); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-tema { display: flex; gap: var(--e2); margin: 0 0 var(--e3); font-size: 14px; line-height: 20px; color: var(--texto-2); }
.nota-tema svg.i { width: 18px; height: 18px; margin-top: 1px; flex: none; }

/* =====================================================================================================================
   Tela de música (09/10/2026): três caminhos num painel só. Mesmas regras: neutro, escolhido = contorno de tinta + visto, nada de cor,
   nada sobre vídeo. A cor do botão principal continua sendo a única da tela.
   ===================================================================================================================== */
.abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--superficie-2); border-radius: 16px; }
.abas button { min-height: 44px; padding: 0 4px; border-radius: 12px; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--texto-2); transition: background var(--t-estado), color var(--t-estado); }
.abas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.musica-corpo { margin-top: var(--e4); transition: opacity var(--t-estado); }
.musica-corpo.apagado { opacity: .45; }
.intro-aba { margin: 0 0 var(--e3); }
.faixa-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-cartao); padding: 0 var(--e4) var(--e4); transition: border-color var(--t-estado); }
.faixa-cartao + .faixa-cartao { margin-top: var(--e2); }
.faixa-cartao.sel { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.faixa-escolher { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 64px; padding: var(--e3) 0 var(--e2); text-align: left; color: var(--texto); }
.faixa-escolher .meio { flex: 1; min-width: 0; display: block; }
.faixa-escolher .meio b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.faixa-escolher .meio .pequeno { display: block; margin-top: 2px; }
.faixa-marca { display: block; margin-bottom: 2px; }
.faixa-cartao .marca-sel { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--controle); display: grid; place-items: center; flex: none; }
.faixa-cartao.sel .marca-sel, .sem-musica.sel .marca-sel { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.faixa-cartao .marca-sel svg, .sem-musica .marca-sel svg { width: 14px; height: 14px; stroke-width: 2.6; }
.faixa-cartao:not(.sel) .marca-sel svg, .sem-musica:not(.sel) .marca-sel svg { display: none; }
.sem-musica .marca-sel { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--controle); display: grid; place-items: center; flex: none; }
.sem-musica.sel { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.faixa-porque { margin: 0 0 var(--e2); }
.credito { margin: var(--e2) 0 0; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.aviso-musica { color: var(--texto); font-weight: 500; }
.previa-caixa { margin-top: var(--e3); }
.previa { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 16px 0 12px; border-radius: 22px; background: var(--superficie-2); color: var(--texto); font-size: 14px; font-weight: 600; }
.previa svg { width: 18px; height: 18px; }
.previa-barra { height: 3px; margin-top: var(--e2); border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.previa-barra i { display: block; height: 100%; width: 0; background: var(--texto-2); }
.links-busca { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.links-busca a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--superficie-2); color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: none; }
.links-busca a svg { width: 16px; height: 16px; }
.soltar-musica { min-height: 132px; }
.soltar-musica svg.i { width: 28px; height: 28px; color: var(--texto-2); }
.erro-texto { margin: var(--e2) 0 0; color: var(--texto); }
.nota-atencao { margin-top: 0; margin-bottom: var(--e3); color: var(--texto); }
.musica-painel .rot-secao { margin-top: var(--e5); }
.musica-painel .opcao { margin-top: var(--e2); }
.musica-painel .campo { min-height: 48px; }
.estudo-nota { background: var(--superficie); }
.musica-painel { padding-bottom: var(--e5); }
.musica-painel .estudo-nota { margin: var(--e2) 0; }

/* o botão principal da folha de música fica à vista enquanto a lista rola */
.folha { --pad-baixo: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
.folha .barra-folha { position: sticky; bottom: calc(var(--pad-baixo) * -1); margin: var(--e4) calc(var(--margem) * -1) 0; padding: var(--e3) var(--margem) var(--pad-baixo); background: linear-gradient(to top, var(--superficie) 72%, transparent); z-index: 2; }
.folha .barra-folha .botao { margin-top: 0; }