/* Creators' area, 9-stage screen (docs/59). Mobile first, light mode, soft beet red and green. No CDN. */
:root {
  --fundo: #fbf7f4;
  --cartao: #ffffff;
  --texto: #2d2326;
  --suave: #6f6266;
  --borda: #e6dcd8;
  --beterraba: #a8325e;
  --beterraba-claro: #f7e4eb;
  --verde: #3f8f5a;
  --verde-claro: #e3f2e7;
  --amarelo-claro: #fff6dc;
  --sombra: 0 2px 10px rgba(80, 30, 50, 0.08);
  --raio: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 150px; /* room for the fixed bar */
}
header { background: var(--beterraba); color: #fff; padding: 14px 16px 10px; }
header h1 { margin: 0; font-size: 1.15rem; font-weight: 700; }
main { max-width: 980px; margin: 0 auto; padding: 0 16px; }
h2 { font-size: 1.25rem; margin: 22px 0 8px; }
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
p { margin: 6px 0; }
.suave { color: var(--suave); font-size: 0.95rem; }

/* stage bar */
.barra { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--borda); scrollbar-width: thin; }
.barra button {
  flex: 0 0 auto; min-width: 40px; height: 40px; border-radius: 20px; border: 2px solid var(--borda);
  background: #fff; color: var(--suave); font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.barra button.feita { background: var(--verde-claro); border-color: var(--verde); color: var(--verde); }
.barra button.atual { background: var(--beterraba); border-color: var(--beterraba); color: #fff; }
.barra button.vendo { outline: 3px solid #f2b8cb; outline-offset: 1px; }
.barra button:disabled { opacity: 0.45; cursor: default; }
.rotulo-etapa { max-width: 980px; margin: 10px auto 0; padding: 0 16px; font-weight: 700; color: var(--beterraba); }

.agora { background: var(--beterraba-claro); border-left: 5px solid var(--beterraba); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.agora b { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--beterraba); }
.aviso { background: var(--amarelo-claro); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.ok-msg { background: var(--verde-claro); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.erro { background: #fde4e4; color: #8a1c1c; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }

/* stage 1: type buttons */
.tipos { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.tipo {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: var(--raio);
  border: 2px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); cursor: pointer; font: inherit; color: inherit;
}
.tipo .ic { font-size: 2rem; }
.tipo strong { display: block; font-size: 1.1rem; }
.tipo.sel { border-color: var(--beterraba); background: var(--beterraba-claro); }
textarea {
  width: 100%; min-height: 220px; padding: 14px; border-radius: 12px; border: 2px solid var(--borda); background: #fff;
  font: 16px/1.5 ui-monospace, Consolas, monospace; color: var(--texto); resize: vertical;
}
textarea:focus { outline: none; border-color: var(--beterraba); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 10px 0; }
.card {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--raio); border: 3px solid transparent; background: var(--cartao); box-shadow: var(--sombra); font: inherit; color: inherit;
}
.card .foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f1e9e6; display: block; }
.card.cenario .foto { aspect-ratio: 16 / 10; }
.card .voz { width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #efe6f3; font-size: 3rem; }
.card .voz small { font-size: 0.9rem; color: var(--suave); }
.card .corpo { padding: 10px 12px 12px; }
.card .nome { font-weight: 700; font-size: 1.05rem; }
.card .papel { font-size: 0.9rem; color: var(--suave); }
.card .restr { font-size: 0.85rem; margin-top: 6px; color: #7a3b52; }
.card .porque { font-size: 0.88rem; margin-top: 6px; background: var(--verde-claro); border-radius: 8px; padding: 6px 8px; }
.card.sel { border-color: var(--verde); }
.card.sel::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 17px;
  background: var(--verde); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.selo { position: absolute; top: 8px; left: 8px; background: var(--beterraba); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: 0.78rem; font-weight: 700; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }

/* buttons */
.btn { border: 2px solid var(--beterraba); background: #fff; color: var(--beterraba); border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.btn.peq { padding: 5px 10px; font-size: 0.9rem; }
.btn.verde { border-color: var(--verde); color: var(--verde); }
.btn.on-verde { background: var(--verde); color: #fff; border-color: var(--verde); }
.btn.on-verm { background: var(--beterraba); color: #fff; }
.principal {
  width: 100%; border: 0; border-radius: 14px; padding: 15px; background: var(--beterraba); color: #fff;
  font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(168, 50, 94, 0.3);
}
.principal:disabled { background: #c9a9b5; box-shadow: none; cursor: default; }

/* pointers (stages 6 and 7) */
.lista { list-style: none; padding: 0; margin: 8px 0; }
.item { background: var(--cartao); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 14px; margin: 10px 0; border-left: 5px solid var(--borda); }
.item.aceito { border-left-color: var(--verde); }
.item.recusado { border-left-color: #c9a9b5; opacity: 0.8; }
.item .num { font-weight: 700; color: var(--beterraba); margin-right: 6px; }
details.porque-mais { margin-top: 6px; font-size: 0.9rem; color: var(--suave); }
details.porque-mais summary { cursor: pointer; color: var(--beterraba); font-weight: 600; }
.troca { font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; background: #faf3f0; border-radius: 8px; padding: 6px 8px; margin: 4px 0; white-space: pre-wrap; }

/* tables */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); font-size: 0.93rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
th { background: var(--beterraba-claro); color: var(--beterraba); }
td.n { text-align: right; white-space: nowrap; }

/* prompts */
.bloco { background: #fff; border-radius: 12px; box-shadow: var(--sombra); margin: 12px 0; overflow: hidden; }
.bloco .topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--verde-claro); font-weight: 700; }
.bloco pre { margin: 0; padding: 12px; white-space: pre-wrap; word-break: break-word; font: 14px/1.45 ui-monospace, Consolas, monospace; max-height: 320px; overflow: auto; }

/* fixed bottom bar */
.fixo { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--borda); padding: 10px 16px 8px; z-index: 5; }
.fixo .dentro { max-width: 980px; margin: 0 auto; }
.fixo .info { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--suave); margin-top: 6px; }
.fixo .rodape { text-align: center; font-size: 0.82rem; color: var(--beterraba); margin-top: 4px; }
.link { background: none; border: 0; color: var(--beterraba); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; padding: 0; }

/* thinking overlay */
.pensando { position: fixed; inset: 0; background: rgba(251, 247, 244, 0.88); display: none; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.pensando.on { display: flex; }
.pensando .caixa { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px; max-width: 420px; text-align: center; }
.roda { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; border: 5px solid var(--beterraba-claro); border-top-color: var(--beterraba); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  .tipos { grid-template-columns: repeat(3, 1fr); }
  .tipo { flex-direction: column; text-align: center; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, 1fr); } }

/* Score 0–10 card (docs/59 §Nota 0–10): green ≥ 7, yellow 5–6.9, red < 5. */
.nota-card { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--raio); padding: 14px; margin: 12px 0; background: var(--cartao); box-shadow: var(--sombra); border-left: 8px solid var(--borda); }
.nota-card.verde { border-left-color: var(--verde); }
.nota-card.amar { border-left-color: #d9a400; }
.nota-card.verm { border-left-color: #c0392b; }
.nota-num { font-size: 2.6rem; font-weight: 800; line-height: 1; min-width: 76px; text-align: center; }
.nota-card.verde .nota-num { color: var(--verde); }
.nota-card.amar .nota-num { color: #a87d00; }
.nota-card.verm .nota-num { color: #c0392b; }
.nota-txt { flex: 1; min-width: 0; }
.nota-txt p { margin: 4px 0; }
.crit { list-style: none; padding: 0; margin: 8px 0; }
.crit li { border-top: 1px solid var(--borda); padding: 8px 0; }
.crit .pts { display: inline-block; min-width: 64px; text-align: center; border-radius: 10px; padding: 1px 8px; font-size: 0.85rem; font-weight: 700; background: var(--borda); }
.crit .pts.p2 { background: var(--verde-claro); color: var(--verde); }
.crit .pts.p1 { background: var(--amarelo-claro); color: #8a6500; }
.crit .pts.p0 { background: #fde4e4; color: #8a1c1c; }
.crit .sug { background: var(--verde-claro); border-radius: 8px; padding: 6px 8px; margin: 6px 0 0; font-size: 0.92rem; }
@media (max-width: 480px) { .nota-num { font-size: 2.1rem; min-width: 60px; } }

/* Live preview "Ver como está ficando" (docs/59 §Prévia ao vivo): fixed button + modal over the current stage. */
.pv-abrir { position: fixed; right: 16px; bottom: 132px; z-index: 6; border: 0; border-radius: 24px; padding: 10px 16px; background: var(--verde); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 3px 12px rgba(63, 143, 90, 0.35); cursor: pointer; }
.pv-abrir[hidden], .pv-modal[hidden] { display: none; }
.pv-modal { position: fixed; inset: 0; z-index: 8; background: rgba(45, 35, 38, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
.pv-caixa { background: var(--fundo); border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; max-width: 860px; padding: 14px 16px 20px; margin: auto 0; }
.pv-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pv-cab h2 { margin: 4px 0; }
body.pv-preso { overflow: hidden; }
.pv-card { background: var(--cartao); border-radius: 12px; box-shadow: var(--sombra); padding: 12px 14px; margin: 10px 0; border-left: 5px solid var(--verde); }
.pv-card.amarelo { border-left-color: #d9a400; }
.pv-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pv-linha { padding: 1px 0; }
.pv-linha.falada { color: #7a3b52; }
.pv-quem { margin: 8px 0 4px; font-size: 0.95rem; }
.pessoa { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.mini { width: 28px; height: 28px; border-radius: 14px; object-fit: cover; background: #efe6f3; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; flex: 0 0 auto; }
.pv-selo { display: inline-block; margin-left: 6px; border-radius: 10px; padding: 1px 8px; font-size: 0.78rem; font-weight: 700; background: var(--beterraba-claro); color: var(--beterraba); }
.pv-selo.seu { background: var(--verde-claro); color: var(--verde); }
.pv-fala { padding: 6px 0; border-top: 1px dashed var(--borda); }
.pv-aviso { background: var(--amarelo-claro); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 0.93rem; }
.pv-troca { background: #faf3f0; border-radius: 12px; padding: 10px; margin-top: 8px; }
.pv-troca .cards { grid-template-columns: repeat(3, 1fr); }
.pv-modos { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.pv-modo { font-size: 0.95rem; }
@media (min-width: 640px) { .pv-troca .cards { grid-template-columns: repeat(5, 1fr); } }

/* Tela para leigos (docs/59, owner 24/out): 5 steps with names, the big "do this now" sentence, the score's cover. */
.barra button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 4px; }
.barra .pn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; background: rgba(0, 0, 0, 0.06); }
.barra .pnome { font-size: 0.88rem; white-space: nowrap; }
.agora { font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--texto); }
.dica { background: var(--verde-claro); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.exemplos .exemplo { background: #fff; border-radius: 10px; padding: 8px 10px; margin: 8px 0; box-shadow: var(--sombra); }
.exemplos pre { white-space: pre-wrap; font: 14px/1.4 ui-monospace, Consolas, monospace; margin: 6px 0; color: var(--texto); }
.capa { margin: 8px 0 18px; }
.capa h3 { margin-top: 16px; }
.nota-frase { font-size: 1.15rem; display: block; }
table.pesou th { background: #fff; color: var(--texto); width: 42%; font-weight: 600; }
.fortes, .sugs, .fora { margin: 6px 0; padding-left: 20px; }
.fortes li, .sugs li, .fora li { margin: 6px 0; }
.sugs .suave { display: block; }
.fora li { color: var(--suave); }
.detalhe-nota { margin-top: 14px; }
.capa-acoes { margin-top: 12px; }
.nota-mini { border-left: 5px solid var(--borda); padding: 6px 10px; background: #fff; border-radius: 8px; font-size: 0.95rem; }
.nota-mini.verde { border-left-color: var(--verde); }
.nota-mini.amar { border-left-color: #d9a400; }
.nota-mini.verm { border-left-color: #c0392b; }
.custo { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credito { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; }
.credito > span { display: block; height: 100%; background: var(--verde); }
.credito.passou > span { background: #d9a400; }
.credito.esgotou > span { background: #c0392b; }
.credito-aviso { background: var(--amarelo-claro); border-radius: 8px; padding: 6px 10px; margin-top: 6px; font-size: 0.88rem; }
/* Song card line by line (owner, 24/out): who sings each line beside it, the echo below, the "Sugestão" block. */
.pv-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--borda); }
.pv-l.eco { padding-left: 22px; color: #8a4b00; border-top: 0; }
.pv-l.falada .pv-txt { color: #7a3b52; }
.pv-txt { flex: 1; min-width: 0; }
.pv-txt.tocavel { cursor: pointer; text-decoration: underline dotted; }
.pv-txt.marcada { background: #ffe7c7; border-radius: 6px; padding: 0 4px; }
.pv-quem-btn { flex: 0 0 auto; display: inline-flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; max-width: 55%; background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 2px 6px; font: inherit; font-size: 0.85rem; cursor: pointer; color: inherit; }
span.pv-quem-btn { cursor: default; }
.btn.laranja { border-color: #d9822b; color: #b5651d; }
.btn.laranja.cheio { background: #f28c28; border-color: #f28c28; color: #fff; }
.pv-sug { background: var(--verde-claro); border-radius: 10px; padding: 8px 10px; margin-top: 8px; font-size: 0.93rem; }
.pv-sug.eco { background: #fff1e0; }
.mini.sem { font-size: 0.8rem; }
/* Distribution of voices (owner, 24/out): automatic until "Aceitar esta distribuição". */
.pv-dist { background: #fff; border-radius: 10px; padding: 8px 12px; margin: 8px 0; box-shadow: var(--sombra); }
.pv-dist.ok { background: var(--verde-claro); box-shadow: none; }
.sem-voz { color: #8a6500; font-weight: 700; }
.pv-quem-btn.falta { border-color: #d9a400; background: var(--amarelo-claro); }
/* Row of icons beside each line (owner, 24/out): one character or "Todos"; green flag = the motor's suggestion. */
.pv-icones { display: flex; gap: 4px; flex: 0 1 auto; max-width: 60%; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.pv-ic { position: relative; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: #efe6f3; cursor: pointer; opacity: 0.35; filter: grayscale(0.8); }
.pv-ic img, .pv-ic .sem { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.pv-ic.on { opacity: 1; filter: none; border-color: var(--beterraba); }
.pv-ic .bandeira, .bandeira.solta { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 2px 6px 6px 0; background: var(--verde); border: 1px solid #fff; }
.bandeira.solta { position: static; display: inline-block; vertical-align: middle; }
.pv-ic .tag-off { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 0.55rem; background: #6f6266; color: #fff; border-radius: 4px; padding: 0 2px; }
.pv-todas { flex: 0 0 auto; border: 1px solid var(--borda); background: #fff; border-radius: 8px; cursor: pointer; font-size: 0.95rem; padding: 2px 6px; }
/* "Concordo" and the split screen of the AI version (owner, 24/out). */
.concordo { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.concordo input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }
.tag-concordo { font-size: 0.78rem; color: var(--verde); font-weight: 700; margin-left: auto; }
.sugs li.destaque { background: #fff1e0; border-radius: 8px; padding: 4px; }
.ajustes-ia { background: #fff; border-radius: var(--raio); padding: 10px 14px; box-shadow: var(--sombra); margin: 12px 0; }
.comparar { background: #fff; border-radius: var(--raio); padding: 10px 12px; box-shadow: var(--sombra); margin: 12px 0; }
.cmp-lados { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .cmp-lados { grid-template-columns: 1fr 1fr; } }
.cmp-lado h3 { margin-top: 6px; }
.mini-capa .nota-num { font-size: 1.8rem; min-width: 56px; }
.cmp-secao { margin: 8px 0; }
.cmp-l { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 3px 4px; border-radius: 6px; }
.cmp-l.mudou { background: #fff1c2; cursor: pointer; }
.cmp-l.eco { padding-left: 22px; color: #8a4b00; }
.cmp-txt { flex: 1; min-width: 0; }
.cmp-porque { flex-basis: 100%; margin: 4px 0 0; font-size: 0.9rem; background: var(--verde-claro); border-radius: 6px; padding: 4px 8px; }
.rostos { display: inline-flex; gap: 2px; }
.rostos img, .rostos .sem { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #efe6f3; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; }
/* Home screen "Minhas ideias" (owner, 24/out): cards on the phone, the columns become lines of the card. */
body.inicio .barra, body.inicio .rotulo-etapa, body.inicio .pv-abrir { display: none; }
header .voltar { color: #fff; font-size: 0.95rem; margin-bottom: 4px; }
.ini-nome input, .ini-filtros input, .ini-filtros select, .linha-acoes input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); }
.ini-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.ini-filtros #ini-q { grid-column: 1 / -1; }
@media (min-width: 760px) { .ini-filtros { grid-template-columns: 2fr repeat(5, 1fr); } .ini-filtros #ini-q { grid-column: auto; } }
.ini-lista { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .ini-lista { grid-template-columns: 1fr 1fr; } }
.ini-card { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; }
.ini-card h3 { margin: 0 0 6px; }
.ini-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; font-size: 0.92rem; }
.ini-card dt { color: var(--suave); }
.ini-card dd { margin: 0; }
.ini-rostos img, .ini-rostos .sem { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 2px; vertical-align: middle; }
.sem-nota { font-weight: 800; padding: 0 6px; border-radius: 8px; }
.sem-nota.verde { background: var(--verde-claro); color: var(--verde); }
.sem-nota.amar { background: var(--amarelo-claro); color: #8a6500; }
.sem-nota.verm { background: #fde4e4; color: #8a1c1c; }
.ini-menu { margin-top: 4px; }
.versao-capa { margin: 10px 0; }
.versao-capa .escondido { display: none; }
.principal.amarelo { background: #d9a400; color: #2d2326; box-shadow: 0 3px 12px rgba(217, 164, 0, 0.3); }
/* Version tabs (owner bug 24/out): big, with the score; the one on screen is the one every button acts on. */
.abas-versoes { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.aba-versao { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--borda); background: #fff; cursor: pointer; }
.aba-versao.ativa { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); }
/* Corrections of 24/out (three reviewers): button above the fixed bar, disabled looks disabled, phone layout. */
.fixo .pv-abrir { position: absolute; right: 16px; bottom: calc(100% + 10px); }
body.inicio #acoes-sessao { display: none; }
.barra { position: relative; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.contador { font-size: 0.85rem; color: var(--suave); text-align: right; margin: 4px 0 0; }
.contador.passou { color: #8a1c1c; font-weight: 700; }
.bloco-label { display: block; margin-top: 8px; }
#pv-corpo.ocupado { opacity: 0.6; pointer-events: none; }
.texto-ia details.em-linha { display: inline-block; margin: 0; }
.troca.saiu { background: #fde4e4; }
.troca.entrou { background: var(--verde-claro); }
.pv-icones { flex-wrap: wrap; overflow: visible; justify-content: flex-end; }
.pv-txt.tocavel:focus { outline: 2px solid var(--beterraba); border-radius: 6px; }
@media (max-width: 520px) {
  .pv-l { flex-wrap: wrap; justify-content: flex-start; }
  .pv-l .pv-txt { flex: 1 1 100%; }
  .pv-l .pv-icones { max-width: 100%; justify-content: flex-start; }
  .pv-l.eco .pv-icones { padding-left: 0; }
  table.tempos thead { display: none; }
  table.tempos, table.tempos tbody, table.tempos tr, table.tempos td { display: block; width: 100%; }
  table.tempos tr { border-bottom: 2px solid var(--borda); padding: 6px 0; }
  table.tempos td { border: 0; padding: 2px 10px; text-align: left; }
  table.tempos td.n { text-align: left; }
  table.tempos td::before { content: attr(data-r) ": "; font-weight: 700; color: var(--beterraba); }
}
.texto-equipe { margin: 0; padding: 6px 12px; }
.texto-equipe pre { padding: 8px 0; }
/* Split screen aligned by content; "no version" panel (owner 24/out). */
.cmp-secao.nova { background: var(--verde-claro); border-radius: 8px; padding: 4px 6px; }
.cmp-secao.sumiu { background: #f0eeee; color: var(--suave); border-radius: 8px; padding: 4px 6px; }
.tag-secao { font-size: 0.78rem; font-weight: 700; color: var(--suave); }
.cmp-secao.nova .tag-secao { color: var(--verde); }
.sem-versao { background: var(--amarelo-claro); border-radius: var(--raio); padding: 12px 14px; margin: 12px 0; box-shadow: var(--sombra); }
.tag-novo { display: inline-block; background: var(--verde); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 0.75rem; font-weight: 700; margin-right: 4px; vertical-align: 1px; }
.ajustes-ia .lista.sugs { padding-left: 0; }
/* Simple path (owner 24/out): one number, a board of dots, at most 3 buttons; "modo avançado" link in the footer. */
body.simples #acoes-sessao, body.simples .pv-abrir, body.simples .credito-aviso { display: none !important; }
.fixo .modo { text-align: center; margin-top: 2px; }
.fixo .modo .link { color: var(--suave); font-size: 0.78rem; }
.nota-grande { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin: 12px 0; text-align: center; border-top: 6px solid var(--borda); }
.nota-grande.verde { border-top-color: var(--verde); }
.nota-grande.amar { border-top-color: #d9a400; }
.nota-grande.verm { border-top-color: #c0392b; }
.nota-grande .nota-num { font-size: 3.4rem; min-width: 0; }
.nota-grande.verde .nota-num { color: var(--verde); }
.nota-grande.amar .nota-num { color: #a87d00; }
.nota-grande.verm .nota-num { color: #c0392b; }
.nota-grande .nota-frase { display: block; font-size: 1.15rem; margin-top: 6px; }
.nota-grande.lendo b { display: block; font-size: 1.15rem; }
.quadro { list-style: none; padding: 0; margin: 10px 0; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); }
.quadro li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--borda); }
.quadro li:first-child { border-top: 0; }
.bola { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 4px; background: #c9c3c3; }
.bola.verde { background: var(--verde); }
.bola.amar { background: #e0b100; }
.bola.verm { background: #c0392b; }
.dobrado { font-size: 0.75rem; font-weight: 700; color: var(--beterraba); background: var(--beterraba-claro); border-radius: 8px; padding: 0 6px; }
.fazer { margin: 6px 0 12px; padding-left: 20px; }
.fazer li { margin: 6px 0; }
.versao-simples .vs-secao { background: var(--cartao); border-radius: 12px; box-shadow: var(--sombra); padding: 8px 12px; margin: 8px 0; }
.vs-l { padding: 3px 4px; border-radius: 6px; }
.vs-l.mudou { background: #fff3c4; cursor: pointer; }
.vs-porque { display: block; font-size: 0.9rem; background: var(--verde-claro); border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.so-ver .btn, .so-ver .pv-todas, .so-ver .pv-sug, .so-ver .bloco, .so-ver h3, .so-ver > p.ok-msg, .so-ver .pv-ic:not(.on), .so-ver .porque-mais { display: none !important; }
.so-ver .pv-ic { pointer-events: none; }
.so-ver > p.suave, .so-ver .pv-topo .suave, .so-ver .pv-dist, .so-ver > p.aviso { display: none !important; }
.ini-card.tocavel { cursor: pointer; }
.ini-card.tocavel:focus { outline: 3px solid var(--beterraba-claro); }
.so-ver .pv-txt > .suave, .so-ver .pv-aviso { display: none !important; }
/* QA of the simple path (24/out): footer ≤ 90 px and opaque, the modal with only the lines, legend, help under the name. */
body.simples .fixo { background: #fff; padding: 8px 16px 6px; }
body.simples .fixo .info { display: none; }
body.simples .fixo .principal { padding: 12px; }
body.simples .fixo .rodape, body.simples .fixo .modo { display: inline; font-size: 0.75rem; }
body.simples .fixo .dentro { text-align: center; }
body.simples .fixo .rodape::after { content: " · "; color: var(--suave); }
body.simples .pv-caixa > p.suave { display: none; }
.legenda { background: var(--verde-claro); border-radius: 10px; padding: 6px 10px; font-size: 0.92rem; }
.modal-simples .pv-todas, .modal-simples .pv-topo .suave, .modal-simples > p.suave, .modal-simples > p.ok-msg, .modal-simples .bloco, .modal-simples h3,
.modal-simples .pv-sug, .modal-simples .pv-gesto, .modal-simples .pv-txt > .suave, .modal-simples .pv-card > p.suave, .modal-simples .pv-aviso, .modal-simples .porque-mais, .modal-simples .pv-quem { display: none !important; }
.ini-nome .ajuda { display: block; font-size: 0.82rem; margin-top: 2px; }
.ini-nome input { width: 100%; max-width: 340px; display: block; }
body.simples .fixo .rodape { display: none; }
body.simples .fixo .principal { padding: 10px; font-size: 1.05rem; }
body.simples .fixo .modo { display: block; margin-top: 2px; line-height: 1.2; }
body.simples .credito { display: none !important; }
/* AI version, simple (owner 23/out): the tap hint stands out; an open line shows why, how it was, and "Voltar esta linha". */
.vs-dica { display: flex; gap: 10px; align-items: center; background: #fff3c4; border: 2px solid #e0b100; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 1.05rem; color: #5c4300; }
.vs-dedo { flex: 0 0 auto; display: inline-flex; color: #b88a00; }
.vs-l.mudou.aberta { outline: 2px solid #e0b100; }
.vs-era { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.9rem; color: var(--suave); margin-top: 4px; overflow-wrap: anywhere; }
.vs-era > span { flex: 1 1 180px; min-width: 0; }
.vs-voltar { flex: 0 0 auto; }
.vs-l.voltou { background: none; cursor: pointer; border-left: 3px solid var(--borda); padding-left: 8px; }
.vs-l.tirada { color: var(--suave); }
.vs-mini { font-size: 0.85rem; }