/* Sala de Controle — transplante do front aprovado para o backend real.
 *
 * THESIS: a produção é o objeto central; a tela deixa de ser um formulário
 * corrido com uma barra duplicada e vira uma bancada clara de pedido, fila e
 * entrega. OWN-WORLD: Linhas, grafite sólido, divisores de 1px, vermelho apenas
 * em seleção, progresso e ação. STORY: configurar, acompanhar e consultar sem
 * perder o vínculo com a máquina local. FIRST VIEWPORT: título amplo, quatro
 * leituras reais, formulário dominante e diagnóstico lateral. FORM: extensão
 * fiel da Sala de Controle aprovada; nenhuma capability é inventada.
 * FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
 */

body:has(.robo-raiz) .conteudo {
  background:
    radial-gradient(ellipse 44% 220px at 78% -90px,
      rgba(255, 32, 32, .085), transparent 72%),
    #0f1012;
}

/* Primeira pintura — ocupa o lugar da antiga caixa "Abrindo..." sem fingir
   números. A geometria é a mesma do Robô pronto, então nada salta quando o
   backend termina a leitura. */
.robo-raiz.rl-boot-screen {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  gap: 20px;
}

.rl-boot-screen .rl-metrics {
  margin-top: 0;
}

.rl-boot-card .rl-boot-line,
.rl-boot-workspace .rl-boot-line,
.rl-boot-field {
  display: block;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.085), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: rl-boot-breathe 1.8s ease-in-out infinite;
}

.rl-boot-card .rl-boot-line.is-value { width: 42%; height: 26px; margin-top: 12px; }
.rl-boot-card .rl-boot-line.is-note { width: 68%; height: 10px; margin-top: 9px; }

.rl-boot-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.rl-boot-main,
.rl-boot-side {
  min-height: 430px;
  padding: 32px;
  border: 1px solid var(--rl-line, #2a2d35);
  border-radius: 6px;
  background: rgba(19, 21, 26, .72);
}

.rl-boot-side { min-height: 260px; padding: 18px; }
.rl-boot-workspace .rl-boot-line { width: 64%; height: 12px; margin-bottom: 13px; }
.rl-boot-workspace .rl-boot-line.is-title { width: 34%; height: 18px; }
.rl-boot-workspace .rl-boot-line.is-short { width: 46%; }
.rl-boot-field { width: 100%; height: 42px; margin-top: 28px; border: 1px solid rgba(255,255,255,.035); }
.rl-boot-field.is-large { height: 150px; margin-top: 18px; }

@keyframes rl-boot-breathe {
  0%, 100% { background-position: 100% 0; opacity: .68; }
  50% { background-position: 0 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rl-boot-card .rl-boot-line,
  .rl-boot-workspace .rl-boot-line,
  .rl-boot-field { animation: none; }
}

@media (max-width: 900px) {
  .robo-raiz.rl-boot-screen { width: min(100% - 28px, 1320px); }
  .rl-boot-workspace { grid-template-columns: 1fr; }
  .rl-boot-side { display: none; }
}

.robo-raiz {
  --robot-delight-red: #ff4545;
  --robot-delight-soft: rgba(255, 32, 32, .085);
  --robot-delight-sheen: rgba(255, 255, 255, .036);
  --robot-delight-success: #67d8a5;
}

/* Réplica final — escala e acabamento do simulador aprovado. */
.robo-raiz.pw-page { font-size: 14px; }
.robo-raiz.pw-page .btn { min-height: 40px; padding-inline: 14px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.robo-raiz.pw-page .campo > label,
.robo-raiz.pw-page .campo-ajuste > label,
.robo-raiz.pw-page .lab { font-size: 12px; }
.robo-raiz.pw-page .dica,
.robo-raiz.pw-page .campo .ajuda,
.robo-raiz.pw-page .hint { font-size: 12px; line-height: 1.5; }
.robo-raiz.pw-page .chip { min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none; }

.robo-raiz .cartoes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.robo-raiz .cartao-avatar {
  min-width: 0;
  min-height: 365px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #111319;
}
.robo-raiz .rl-avatar-media { min-height: 185px; position: relative; overflow: hidden; background: #1a1d24; }
.robo-raiz .rl-avatar-media .foto-do-avatar { width: 100%; height: 185px; min-height: 185px; object-fit: cover; }
.robo-raiz .rl-avatar-media div.foto-do-avatar { display: grid; place-items: center; color: #eef0f3; font-size: 22px; font-weight: 720; }
.robo-raiz .rl-avatar-media em { position: absolute; right: 12px; bottom: 10px; padding: 4px 7px; border-radius: 4px; background: rgba(4,5,8,.82); color: #e3e6eb; font-size: 10px; font-style: normal; }
.robo-raiz .cartao-avatar > .corpo { padding: 17px 17px 15px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
.robo-raiz .cartao-avatar .rb-nome { margin: 3px 0 0; color: #f2f3f5; font-size: 16px; font-weight: 680; }
.robo-raiz .cartao-avatar .peq4 { width: 100%; margin: 0; overflow: hidden; color: #8e97a5; font: 11px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
/* MOTOR E RESOLUÇÃO: DE FATO A ESCOLHA (dono, 2026-08-27).
   O `.rl-avatar-facts` (um `<dl>` com "Motor"/"Saída" em texto) saiu junto com
   a `config_fixa` que o alimentava — regra de CSS para classe que nada mais
   renderiza é o começo da deriva entre a folha e a tela.
   A GEOMETRIA É A MESMA de propósito: duas colunas, `margin: auto 0 0` para
   colar no rodapé do cartão, rótulo pequeno acima do valor. O cartão não
   muda de altura nem de ritmo — o que era leitura virou controle no mesmo
   lugar, e o olho de quem já usa a tela não precisa reaprender nada. */
.robo-raiz .rl-avatar-name { width: 100%; min-width: 0; }
.robo-raiz .rl-avatar-name-line { display: flex; align-items: center; gap: 8px; }
.robo-raiz .cartao-avatar .rl-avatar-name h2.rb-nome { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.robo-raiz .rl-avatar-edit-name { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #aeb6c2; cursor: pointer; }
.robo-raiz .rl-avatar-edit-name:hover { color: #f1f3f5; background: #252930; border-color: #343943; }
.robo-raiz .rl-avatar-edit-name svg { width: 18px; height: 18px; }
.robo-raiz .rl-avatar-name-form { display: grid; gap: 10px; width: 100%; }
.robo-raiz .rl-avatar-name-form label { display: grid; gap: 6px; color: #d6dbe3; font-size: 14px; }
.robo-raiz .rl-avatar-name-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid #454c58; border-radius: 6px; background: #15181d; color: #f1f3f5; font: 400 16px/1.4 Geist, Arial, sans-serif; }
.robo-raiz .rl-avatar-name-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.robo-raiz .rl-avatar-name-actions .btn { min-height: 40px; }
.robo-raiz .rl-avatar-name :focus-visible { outline: 2px solid #ff4545; outline-offset: 2px; }
.robo-raiz .rl-avatar-name-input[aria-invalid="true"] { border-color: #ff8a82; }
.robo-raiz .rl-avatar-name-hint, .robo-raiz .rl-avatar-name-feedback { margin: 0; color: #aeb6c2; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.robo-raiz .rl-avatar-name-feedback { margin-top: 6px; }
.robo-raiz .rl-avatar-name [hidden] { display: none; }
@media (pointer: coarse) { .robo-raiz .rl-avatar-edit-name { flex-basis: 44px; width: 44px; height: 44px; } }
.robo-raiz .rl-avatar-config { width: 100%; margin: auto 0 0; padding-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.robo-raiz .rl-avatar-config > div { min-width: 0; }
.robo-raiz .rl-avatar-config label { display: block; margin: 0 0 4px; color: #77808f; font-size: 11px; }
/* `min-height: 34px` e não os 42px do `.campo select`: aqui o seletor divide
   um cartão de 365px com foto, nome, id e rodapé — a altura de formulário
   estouraria o cartão e empurraria o rodapé para fora. O alvo de toque
   continua acima do piso de 32px. */
.robo-raiz .rl-avatar-config .rl-avatar-select {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #15181d;
  color: #f1f3f5;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 620;
}
.robo-raiz .rl-avatar-config .rl-avatar-select:focus-visible {
  outline: 2px solid #ff4545;
  outline-offset: 2px;
  border-color: #ff4545;
}
.robo-raiz .rl-avatar-config .rl-avatar-select:disabled { opacity: .55; }
/* O recado ocupa a largura inteira: ele fala do cartão, não de uma coluna. E
   ele é `hidden` até haver o que dizer — um `<p>` vazio com margem abriria um
   vão permanente entre os seletores e o rodapé, que é a mesma armadilha que o
   `falta.hidden` do diálogo desta tela já documenta. */
.robo-raiz .rl-avatar-config-recado { grid-column: 1 / -1; margin: 2px 0 0; color: #8e97a5; font-size: 11px; }
.robo-raiz .rl-avatar-config-recado.ok { color: #6fd39a; }
.robo-raiz .rl-avatar-config-recado.mau { color: var(--danger-text, #ff8a82); }
.robo-raiz .rl-avatar-footer { min-height: 58px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #292d37; }
.robo-raiz .rl-avatar-footer .btn { min-height: 34px; }
/* "REMOVER" E' BOTAO DE TEXTO, NAO CAIXA. No simulador ele e'
   `danger-text text-button` — `border: 0; background: none` (lab.css:110) —,
   e a razao e' hierarquia: o rodape do cartao tem UMA acao afirmativa
   ("Verificar agora") e uma destrutiva. Com moldura vermelha, a destrutiva
   pesava MAIS que a afirmativa e era a primeira coisa que o olho encontrava
   num cartao cuja funcao e' existir, nao ser apagado. */
.robo-raiz .rl-avatar-footer .btn.perigo {
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger-text, #ff8a82);
  font-weight: 620;
}
.robo-raiz .rl-avatar-footer .btn.perigo:hover:not(:disabled) {
  border: 0;
  background: none;
  color: #ffb0aa;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.robo-raiz .rl-avatar-add { min-height: 365px; align-items: center; justify-content: center; border-style: dashed; background: #0e1015; cursor: pointer; }
.robo-raiz .rl-avatar-add .foto-do-avatar { width: 40px; height: 40px; min-height: 40px; border: 1px solid #3a404b; border-radius: 8px; background: #14171d; color: #ff5b5b; }
.robo-raiz .rl-avatar-add .corpo { flex: 0; align-items: center; text-align: center; }
.robo-raiz .rl-avatar-note { margin-top: 18px; padding: 14px 16px; display: flex; gap: 12px; border: 1px solid #2d3139; border-radius: 6px; background: #111319; }
.robo-raiz .rl-avatar-note > span { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #1d2330; color: #aeb7c5; }
.robo-raiz .rl-avatar-note strong { color: #e7e9ed; font-size: 12px; }
.robo-raiz .rl-avatar-note p { margin: 4px 0 0; color: #8f97a4; font-size: 11px; line-height: 1.5; }
/* A NOTA DE AVISO usa a MESMA caixa da nota neutra, só com a borda e o ícone
   em âmbar. Âmbar e não vermelho: nada está quebrado nem foi perdido — a
   escolha está guardada e passa a valer na atualização. Vermelho aqui leria
   como erro e mandaria o aluno procurar defeito que não existe. */
.robo-raiz .rl-avatar-note.aviso { border-color: #4a3c1d; background: #171410; }
.robo-raiz .rl-avatar-note.aviso > span { background: #3a2f16; color: #e0b954; }
/* A PRÉVIA DA FOTO no diálogo de criar personagem. Ela existe porque o `input
   type=file` sozinho mostra só o nome do arquivo — e a foto é o que decide se
   o rosto vai sair bom. Ver o retrato antes de gastar o crédito é o ponto. */
.robo-raiz .rl-foto-previa { margin-top: 10px; padding: 8px; display: flex; align-items: center; gap: 10px; border: 1px solid #2d3139; border-radius: 6px; background: #15181d; }
.robo-raiz .rl-foto-previa img { width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; }
.robo-raiz .rl-foto-previa span { overflow: hidden; color: #8f97a4; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
/* ══ `display` DE CLASSE VENCE O `[hidden]`, E ISSO APARECEU NA TELA ══════
   A prévia nasce com `hidden` e mesmo assim desenhava — uma caixa vazia com
   borda entre a dica e o aviso, que é o que o dono viu. `[hidden]` é regra do
   navegador (`display: none`) e perde para QUALQUER seletor de classe: a
   linha de cima, com `display: flex`, a anulava.
   Este repositório já pagou por esta mesma família — a `.command-bar` que
   subia 42px por causa de um banner `hidden` que vivia no DOM. Por isso o
   conserto aqui é para TODO elemento do robô, e não só para a prévia: classe
   nova com `display` não volta a ressuscitar um `hidden`. */
.robo-raiz [hidden] { display: none !important; }
/* Dois botões no cabeçalho da tela — antes era um só. */
.robo-raiz .rl-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .robo-raiz .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .robo-raiz .cartoes { grid-template-columns: 1fr; }
  .robo-raiz .cartao-avatar, .robo-raiz .rl-avatar-add { min-height: 0; }
}

body:has(.robo-raiz) .conteudo > * {
  width: min(100%, 1380px);
  max-width: 1380px;
}

/* Algumas telas devolvem primeiro o corpo em leitura, ainda sem título.
 * Só substituir o cabeçalho da casca quando o título próprio já existir. */
body:has(.robo-raiz h1) #conteudo-principal > div > .cabeca {
  display: none;
}

.conteudo .robo-raiz {
  width: 100%;
  max-width: 1380px;
  padding: 18px 28px 54px;
  color: #f5f6f8;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

/* A navegação do Robô agora mora no trilho contextual. */
.robo-raiz > .rb-abas,
.robo-raiz > .rb-abas-nota {
  display: none !important;
}

.rl-top-slot,
.rl-metrics-slot {
  width: 100%;
}

.rl-page-header {
  min-height: 94px;
  margin-bottom: 30px;
  padding: 4px 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  border-bottom: 1px solid rgba(235, 238, 243, .105);
}

.rl-machine-callout {
  min-height: 112px;
  margin-bottom: 18px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(243, 191, 107, .28);
  border-radius: 6px;
  background: #14150f;
}
.rl-machine-callout h2 { margin: 10px 0 0; color: #f1f3f6; font-size: 16px; }
.rl-machine-callout p { max-width: 74ch; margin: 5px 0 0; color: #a5a99d; font-size: 11px; }
.rl-machine-callout .btn { min-height: 42px; flex: 0 0 auto; }

.robo-raiz .rl-version-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3b3f48;
  border-radius: 8px;
  background: #111318;
  box-shadow: 0 24px 80px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.045);
  color: #f2f4f7;
}
.robo-raiz .rl-version-dialog::backdrop {
  background: rgba(4,5,7,.76);
  backdrop-filter: blur(3px);
}
.rl-version-dialog__shell {
  max-height: calc(100vh - 26px);
  max-height: calc(100dvh - 26px);
  margin: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.rl-version-dialog__shell::before {
  content: '';
  width: 154px;
  height: 1px;
  position: absolute;
  inset: 0 auto auto 20px;
  background: linear-gradient(90deg, #f3bf6b, rgba(255,69,69,.5) 66%, transparent);
}
.rl-version-dialog__shell > header {
  flex: 0 0 auto;
  padding: 22px 22px 18px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #2b2f36;
}
.rl-version-dialog__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243,191,107,.24);
  border-radius: 6px;
  background: rgba(243,191,107,.07);
  color: #f3bf6b;
}
.rl-version-dialog__icon svg { width: 20px; height: 20px; }
.rl-version-dialog.is-unknown .rl-version-dialog__shell::before {
  background: linear-gradient(90deg, #777f8b, rgba(255,69,69,.28) 66%, transparent);
}
.rl-version-dialog.is-unknown .rl-version-dialog__icon {
  border-color: rgba(170,176,186,.2);
  background: rgba(170,176,186,.055);
  color: #aab0ba;
}
.rl-version-dialog .rl-dialog-eyebrow {
  margin-bottom: 4px;
  display: block;
  color: #858d99;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rl-version-dialog h2 {
  margin: 0;
  color: #f2f4f7;
  font-size: 20px;
  font-weight: 680;
  line-height: 1.22;
}
.rl-version-dialog__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #1d2024;
  color: #d9dde3;
  font-size: 20px;
  line-height: 1;
}
.rl-version-dialog__close:hover { border-color: #4a505b; background: #24272c; }
.rl-version-dialog__content {
  min-height: 0;
  padding: 21px 22px 23px;
  overflow: auto;
}
.rl-version-dialog__content p {
  margin: 0;
  color: #aeb3bc;
  font-size: 13px;
  line-height: 1.6;
}
.rl-version-dialog__content > small {
  margin-top: 13px;
  display: block;
  color: #858d99;
  font-size: 11px;
  line-height: 1.5;
}
.rl-version-route {
  max-width: 100%;
  min-height: 25px;
  margin-top: 16px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  border: 1px solid #393d45;
  border-radius: 4px;
  background: rgba(255,255,255,.018);
  color: #b9bec7;
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.rl-version-route i { color: #777f8b; font-style: normal; }
.rl-version-route strong { color: #f2f4f7; font-weight: 650; }
.rl-version-dialog__shell > footer {
  flex: 0 0 auto;
  padding: 15px 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #2b2f36;
  background: #0e1014;
}
.robo-raiz.pw-page .rl-version-dialog .btn {
  min-height: 44px;
  text-decoration: none;
}
.robo-raiz.pw-page .rl-version-dialog .btn.sec {
  border-color: #464b55;
  background: #202329;
  color: #f4f5f7;
}
@media (hover: hover) {
  .robo-raiz.pw-page .rl-version-dialog .btn.sec:hover:not(:disabled) {
    border-color: #585e69;
    background: #292c32;
    color: #fff;
  }
}

.rl-page-header::after {
  content: '';
  width: 94px;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background: linear-gradient(90deg, #ff2020 0%, #ff6868 58%, transparent 100%);
  box-shadow: 0 3px 15px rgba(255, 32, 32, .22);
}

.rl-page-header h1 {
  margin: 0;
  color: #fbfbfc;
  font-size: 36px;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.rl-page-header p {
  max-width: 72ch;
  margin: 9px 0 0;
  color: #a9adb5;
  font-size: 14px;
}

.rl-page-actions {
  padding-top: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rl-help {
  width: 40px;
  height: 40px;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #171a1f;
  color: #e8eaee;
  font-weight: 700;
}

.rl-help:hover { background: #20242a; border-color: #4a505b; }

.rl-status {
  min-height: 26px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #39404a;
  border-radius: 999px;
  background: #181b20;
  color: #c4c9d1;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.rl-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.rl-status.good { border-color: rgba(64, 195, 132, .34); background: rgba(40, 150, 100, .10); color: #67d8a5; }
.rl-status.warning { border-color: rgba(243, 191, 107, .34); background: rgba(243, 191, 107, .08); color: #f3bf6b; }
.rl-status.live { border-color: rgba(255, 58, 58, .36); background: rgba(255, 32, 32, .10); color: #ff6868; }

.rl-metrics {
  margin: -2px 0 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #111318;
  overflow: hidden;
}

.rl-metric {
  min-width: 0;
  min-height: 104px;
  padding: 19px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: inset 0 1px var(--robot-delight-sheen);
}

.rl-metric.live {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 32, 32, .032), transparent 62%);
}

.rl-metric.live::before {
  content: '';
  height: 1px;
  position: absolute;
  inset: 0 24% auto;
  background: linear-gradient(90deg, transparent, rgba(255, 69, 69, .72), transparent);
  box-shadow: 0 3px 14px rgba(255, 32, 32, .18);
}

.rl-metric + .rl-metric { border-left: 1px solid #2d3139; }
.rl-metric > span,
.rl-machine-metric .rot {
  margin: 0 0 7px;
  color: #8f97a4;
  font-family: Geist Mono, monospace;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.rl-metric > strong,
.rl-machine-metric .val {
  color: #f5f6f8;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.rl-metric.good > strong { color: #67d8a5; }
.rl-metric.live > strong { color: #fff; }
.rl-metric > small,
.rl-machine-metric .pe {
  margin-top: 7px;
  color: #848c98;
  font-size: 11px;
  line-height: 1.35;
}
.rl-machine-metric .pe.alerta { color: #f3bf6b; }

/* Produzir — mesma estrutura aprovada, agora com os controles reais. */
.rl-produce-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 318px;
  align-items: start;
  gap: 18px;
}

.rl-production-form,
.rl-live-card,
.rl-readiness {
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}

.rl-production-form {
  min-width: 0;
  padding: 28px 30px 0;
  overflow: hidden;
  box-shadow: inset 0 1px var(--robot-delight-sheen);
}

.rl-section-heading { margin-bottom: 26px; }
.rl-section-heading h2,
.rl-readiness h3 {
  margin: 0;
  color: #f1f3f6;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.rl-section-heading p,
.rl-readiness header p {
  max-width: 68ch;
  margin: 6px 0 0;
  color: #9aa2ae;
  font-size: 12px;
}

.robo-raiz .rl-production-form .row {
  margin: 0 0 22px;
  gap: 14px;
}

.robo-raiz .rl-production-form .row.three {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
}

.robo-raiz .campo { min-width: 0; gap: 7px; }
.robo-raiz .campo > label,
.robo-raiz .campo > .lab {
  color: #c7ccd4;
  font-family: Geist, Arial, sans-serif;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.robo-raiz .campo input[type='text'],
.robo-raiz .campo input[type='number'],
.robo-raiz .campo input[type='file'],
.robo-raiz .campo select,
.robo-raiz .campo textarea,
.robo-raiz select.sel,
.robo-raiz .fld {
  min-height: 42px;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #15181d;
  color: #f1f3f5;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
}

.robo-raiz .campo textarea {
  min-height: 214px;
  padding: 13px 14px;
  resize: vertical;
}

.robo-raiz .campo input:focus-visible,
.robo-raiz .campo select:focus-visible,
.robo-raiz .campo textarea:focus-visible,
.robo-raiz .fld:focus-visible {
  outline: 2px solid #ff4545;
  outline-offset: 2px;
  border-color: #ff4545;
}

.robo-raiz .campo .ajuda,
.robo-raiz .dica {
  margin: 0;
  color: #858d99;
  font-size: 10px;
  line-height: 1.45;
}

.rl-preset-row {
  padding: 15px 16px;
  border: 1px solid #2c3038;
  border-radius: 6px;
  background: #101216;
}

.robo-raiz .rb-presets {
  margin-top: 2px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.15fr) auto auto auto;
  gap: 9px;
  align-items: center;
}

.robo-raiz .opcoes-cartao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.robo-raiz .opcao-cartao {
  min-height: 66px;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #14171c;
  color: #eef0f3;
  cursor: pointer;
}

.robo-raiz .opcao-cartao:hover { background: #191c22; border-color: #464c57; }
.robo-raiz .opcao-cartao:has(input:checked) {
  border-color: #ff2020;
  background: rgba(255, 32, 32, .075);
  box-shadow: inset 0 1px rgba(255,255,255,.025), inset 0 -1px rgba(255, 69, 69, .28);
}
.robo-raiz .opcao-cartao input { margin-top: 2px; accent-color: #ff2020; }
.robo-raiz .opcao-cartao span { display: flex; flex-direction: column; gap: 3px; }
.robo-raiz .opcao-cartao b { font-size: 12px; }
.robo-raiz .opcao-cartao small { color: #8e96a2; font-size: 10px; line-height: 1.4; }

.robo-raiz .rb-avancadas {
  margin: 25px 0 0;
  border-top: 1px solid #2d3139;
}
.robo-raiz .rb-avancadas > summary.grp {
  min-height: 68px;
  margin: 0;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  color: #eef0f3;
  letter-spacing: 0;
  text-transform: none;
}
.robo-raiz .rb-avancadas > summary::before { display: none; }
.rl-advanced-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #3a3f48;
  border-radius: 6px;
  color: #ff6868;
  font-size: 17px;
}
.robo-raiz .rb-avancadas > summary > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.robo-raiz .rb-avancadas > summary b { font-size: 12px; }
.robo-raiz .rb-avancadas > summary small { color: #858d99; font-size: 10px; }
.robo-raiz .rb-avancadas > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid #939aa6;
  border-bottom: 1px solid #939aa6;
  transform: rotate(45deg);
}
.robo-raiz .rb-avancadas[open] > summary::after { transform: rotate(225deg); }
.robo-raiz .rb-avancado { padding: 22px 0 8px; border-top: 1px solid #262a31; }

.rl-form-footer {
  min-height: 76px;
  margin: 10px -30px 0;
  padding: 16px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #2d3139;
  background: #101216;
}
.rl-ready { display: flex; align-items: center; gap: 10px; }
.rl-ready > i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(63, 190, 129, .12);
  color: #67d8a5;
  font-style: normal;
}
.rl-ready.warning > i { background: rgba(243, 191, 107, .10); color: #f3bf6b; }
.rl-ready span { display: flex; flex-direction: column; gap: 2px; }
.rl-ready b { color: #edf0f3; font-size: 11px; }
.rl-ready small { color: #858d99; font-size: 10px; }
.rl-form-footer .rb-acoes { margin: 0; }
.rl-form-footer .btn {
  min-height: 42px;
  padding: 0 17px;
  border-color: #464b55;
  border-bottom-color: #ff3434;
  background: linear-gradient(180deg, #272a31 0%, #181a1f 100%);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.095), inset 0 -1px rgba(255,32,32,.38),
    0 8px 22px rgba(0,0,0,.22);
}
.rl-form-footer .btn:hover:not(:disabled) {
  border-color: #5b606a;
  border-bottom-color: #ff5757;
  background: linear-gradient(180deg, #30333a 0%, #1d1f24 100%);
}

.rl-produce-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 20px;
}
.rl-live-card,
.rl-readiness { padding: 20px; }
.rl-live-card {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px var(--robot-delight-sheen);
}
.rl-live-card:not(.empty)::before {
  content: '';
  height: 1px;
  position: absolute;
  inset: 0 20% auto;
  background: linear-gradient(90deg, transparent, rgba(255,69,69,.76), transparent);
  box-shadow: 0 3px 16px rgba(255,32,32,.20);
}
.rl-live-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rl-live-card > header button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #9da4af;
}
.rl-live-card h3 { margin: 16px 0 0; color: #f5f6f8; font-size: 16px; line-height: 1.35; }
.rl-live-progress-value { margin: 28px 0 17px; color: #fff; font-size: 33px; font-weight: 720; letter-spacing: -.035em; }
.rl-live-progress-value small { margin-left: 2px; color: #b5bbc5; font-size: 13px; }
.rl-live-card h4 { margin: 0; color: #d9dde3; font-size: 11px; }
.rl-live-card > p { margin: 4px 0 12px; color: #858d99; font-size: 10px; }
.rl-progress { width: 100%; height: 4px; overflow: hidden; border-radius: 4px; background: #2b2f37; }
.rl-progress i { position: relative; display: block; height: 100%; border-radius: inherit; background: #ff2020; }
.rl-progress i::after,
.robo-raiz .pw-progress-track > span::after {
  content: '';
  width: 18px;
  position: absolute;
  inset: 0 0 0 auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48));
}
.robo-raiz .pw-progress-track > span { position: relative; }
.rl-live-card dl { margin: 16px 0 18px; padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #292d34; }
.rl-live-card dt { color: #858d99; font-size: 9px; }
.rl-live-card dd { margin: 3px 0 0; color: #e5e8ec; font-size: 11px; font-weight: 620; }
.rl-full { width: 100%; min-height: 40px; }
.rl-live-card.empty { min-height: 180px; }
.rl-live-card.empty h3 { margin-top: 24px; }
.rl-live-card.empty p { margin-top: 8px; font-size: 11px; line-height: 1.5; }

.rl-readiness header { margin-bottom: 18px; }
.rl-readiness ul { margin: 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.rl-readiness li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 9px; }
.rl-readiness li { position: relative; }
.rl-readiness li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 13px;
  position: absolute;
  left: 10px;
  top: 23px;
  background: #30343c;
}
.rl-readiness li > i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(64, 195, 132, .11);
  color: #67d8a5;
  font-size: 10px;
  font-style: normal;
  box-shadow: 0 0 0 3px rgba(64,195,132,.035);
}
.rl-readiness li.is-warning > i {
  background: rgba(243,191,107,.10);
  color: #f3bf6b;
  box-shadow: 0 0 0 3px rgba(243,191,107,.025);
}
.rl-readiness li span { display: flex; flex-direction: column; gap: 2px; }
.rl-readiness li b { color: #e8eaee; font-size: 11px; }
.rl-readiness li small { color: #858d99; font-size: 9px; line-height: 1.45; }
.rl-readiness .link { margin-top: 17px; padding: 7px 0; color: #c6cbd3; font-size: 10px; }

/* As demais telas reais mantêm o DOM e os contratos, mas ganham a mesma
 * escala, superfícies e ritmo da bancada aprovada. */
.robo-raiz .cabeca { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #292d34; }
.robo-raiz .cabeca h1 { color: #f7f8fa; font-size: 32px; font-weight: 650; letter-spacing: -.035em; }
.robo-raiz .cabeca .sub { margin-top: 8px; color: #9da4af; font-size: 13px; }
.robo-raiz .card,
.robo-raiz .cartao-avatar,
.robo-raiz .linha-canal,
.robo-raiz .chave-card,
.robo-raiz .custos-plano,
.robo-raiz .rp-lista {
  border-color: #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz .rp-lista { overflow: hidden; }
.robo-raiz .rp-tab th { height: 48px; color: #8c94a0; font-size: 10px; }
.robo-raiz .rp-tab td { padding-top: 18px; padding-bottom: 18px; font-size: 12px; }
.robo-raiz .rp-tab tr + tr td { border-top-color: #292d34; }
.robo-raiz .rb-acompanhar { min-width: 0; }
.robo-raiz .rb-acompanhar > * + * { margin-top: 14px; }
.robo-raiz .rb-acompanhar .rb-topo,
.robo-raiz .rb-acompanhar .rb-log,
.robo-raiz .rb-acompanhar .rb-cobertura {
  border-color: #2d3139;
  background: #121419;
}
.robo-raiz .cartao-avatar { overflow: hidden; }
.robo-raiz .cartao-avatar .foto-do-avatar { min-height: 170px; background: #1a1d23; }
.robo-raiz .chaves-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.robo-raiz .chave-card { padding: 18px; }

/* Máquinas — a operação fica à esquerda; instalação e ajuda, à direita. */
.robo-raiz .rl-machines { display: grid; gap: 20px; min-width: 0; }
.robo-raiz .rl-machines > .rb-maq-cabeca {
  margin: 0;
  padding: 0 0 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #292d34;
}
.robo-raiz .rl-machines > .rb-maq-cabeca h1 {
  margin: 0;
  color: #f7f8fa;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -.035em;
}
.robo-raiz .rl-machines > .rb-maq-cabeca .sub {
  max-width: 72ch;
  margin-top: 8px;
  color: #9da4af;
  font-size: 13px;
  line-height: 1.5;
}
.robo-raiz .rl-machines > .rb-maq-cabeca .rb-maq-conta {
  flex: 0 0 auto;
  min-width: 112px;
  padding: 10px 12px;
  border: 1px solid #30353e;
  border-radius: 6px;
  background: #15181e;
  color: #9da4af;
  text-align: center;
  font-size: 10px;
}
.robo-raiz .rl-machines > .rb-maq-cabeca .rb-maq-conta b { color: #f3f5f7; font-size: 13px; }
.robo-raiz .rl-machines-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr);
  align-items: start;
  gap: 16px;
}
.robo-raiz .rl-machines-main,
.robo-raiz .rl-installer {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz .rl-machines-main { min-height: 410px; padding: 20px; }
.robo-raiz .rl-machines-main > header,
.robo-raiz .rl-installer > header { margin-bottom: 18px; }
.robo-raiz .rl-machines-main h2,
.robo-raiz .rl-installer h2 {
  margin: 12px 0 0;
  color: #f1f3f6;
  font-size: 16px;
  font-weight: 620;
}
.robo-raiz .rl-machines-main header p,
.robo-raiz .rl-installer header p {
  margin: 5px 0 0;
  color: #8f97a3;
  font-size: 11px;
  line-height: 1.5;
}
.robo-raiz .rl-machine-empty {
  min-height: 265px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  border: 1px dashed #343a44;
  border-radius: 6px;
  color: #e3e6ea;
  text-align: center;
}
.robo-raiz .rl-machine-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border: 1px solid #343a44;
  border-radius: 6px;
  color: #ff5b5b;
  background: #171a20;
  font-size: 17px;
}
.robo-raiz .rl-machine-empty b { font-size: 12px; }
.robo-raiz .rl-machine-empty p { max-width: 42ch; margin: 6px 0 0; color: #858d99; font-size: 10px; line-height: 1.5; }
.robo-raiz .rl-installer { padding: 20px; }
.robo-raiz .rl-installer > div:not(.rb-tutorial),
.robo-raiz .rl-installer .rb-tutorial,
.robo-raiz .rl-installer > details { min-width: 0; }
.robo-raiz .rl-installer .rb-plats { margin-top: 0; }
.robo-raiz .rl-installer .baixar { margin-top: 12px; }
.robo-raiz .rl-installer .rb-passos { margin-top: 16px; }
.robo-raiz .rl-installer .rb-maq-ajuda { margin-top: 12px; }
.robo-raiz .rl-installer .rb-maq-ajuda > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
}
.robo-raiz .rl-machines .aviso { margin: 14px 0; }
.robo-raiz .rl-machines .rb-maq-lista { margin: 0; }

@media (max-width: 1180px) {
  .rl-produce-grid { grid-template-columns: 1fr; }
  .rl-produce-side { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); position: static; }
  .robo-raiz .rl-machines-grid { grid-template-columns: 1fr; }
  .robo-raiz .rl-machines-main { min-height: 0; }
}

@media (max-width: 900px) {
  .conteudo .robo-raiz { padding: 22px 20px 46px; }
  .rl-metrics { grid-template-columns: 1fr 1fr; }
  .rl-metric:nth-child(3) { border-left: 0; border-top: 1px solid #2d3139; }
  .rl-metric:nth-child(4) { border-top: 1px solid #2d3139; }
  .robo-raiz .rb-presets { grid-template-columns: 1fr 1fr; }
  .robo-raiz .rb-presets > * { min-width: 0; }
  .robo-raiz .chaves-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .conteudo .robo-raiz { padding: 18px 14px 40px; }
  .rl-page-header { min-height: 0; margin-bottom: 24px; padding-bottom: 20px; flex-direction: column; }
  .rl-page-header::after { margin-top: auto; bottom: 0; }
  .rl-page-header h1 { font-size: 30px; }
  .rl-page-header p { font-size: 13px; }
  .rl-page-actions { width: 100%; justify-content: space-between; }
  .rl-machine-callout { align-items: stretch; flex-direction: column; }
  .rl-machine-callout .btn { width: 100%; }
  .rl-version-dialog__shell > header {
    padding: 19px 17px 16px;
    grid-template-columns: 36px minmax(0, 1fr) 44px;
    gap: 10px;
  }
  .rl-version-dialog__icon { width: 36px; height: 36px; }
  .rl-version-dialog h2 { font-size: 18px; }
  .rl-version-dialog__content { padding: 19px 17px 21px; }
  .rl-version-dialog .rl-version-route { width: 100%; justify-content: flex-start; }
  .rl-version-dialog__shell > footer { padding: 14px 17px 17px; flex-direction: column; }
  .robo-raiz.pw-page .rl-version-dialog .btn { width: 100%; }
  .rl-production-form { padding: 21px 16px 0; }
  .robo-raiz .rl-production-form .row.three,
  .robo-raiz .opcoes-cartao,
  .rl-produce-side { grid-template-columns: 1fr; }
  .robo-raiz .rb-presets { grid-template-columns: 1fr; }
  .robo-raiz .rl-machines > .rb-maq-cabeca { flex-direction: column; }
  .robo-raiz .rl-machines > .rb-maq-cabeca .rb-maq-conta { min-width: 0; }
  .robo-raiz .rl-machines-main,
  .robo-raiz .rl-installer { padding: 16px; }
  .robo-raiz .rp-lista { overflow: visible; border: 0; background: transparent; }
  .robo-raiz .rp-lista .rolagem { overflow: visible; }
  .robo-raiz .rp-tab,
  .robo-raiz .rp-tab tbody { display: block; width: 100%; }
  .robo-raiz .rp-tab thead { display: none; }
  .robo-raiz .rp-tab tr {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #2d3139;
    border-radius: 6px;
    background: #121419;
  }
  .robo-raiz .rp-tab td,
  .robo-raiz .rp-tab td.num,
  .robo-raiz .rp-tab td.rp-fim {
    min-width: 0;
    padding: 13px 14px;
    border: 0;
    border-top: 1px solid #292d34;
    text-align: left;
    white-space: normal;
  }
  .robo-raiz .rp-tab td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: #7f8793;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .robo-raiz .rp-tab td:first-child {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 0;
  }
  .robo-raiz .rp-tab td:nth-child(2) { border-top: 0; }
  .robo-raiz .rp-tab td:last-child { grid-column: 1 / -1; }
  .robo-raiz .rp-tab .rp-acoes { justify-content: flex-start; gap: 7px; }
  .robo-raiz .rp-tab .rp-acao {
    min-height: 44px;
    padding: 7px 9px;
    border: 1px solid #343943;
    border-radius: 6px;
    text-decoration: none;
  }
  .robo-raiz .rp-tab .rp-acao.perigo { border-color: rgba(255, 68, 68, .38); }
  .rl-form-footer { margin-right: -16px; margin-left: -16px; padding: 15px 16px; align-items: stretch; flex-direction: column; }
  .rl-form-footer .rb-acoes,
  .rl-form-footer .btn { width: 100%; }
  .rl-metrics { grid-template-columns: 1fr; }
  .rl-metric + .rl-metric,
  .rl-metric:nth-child(3),
  .rl-metric:nth-child(4) { border-top: 1px solid #2d3139; border-left: 0; }
  .rl-metric { min-height: 92px; }
  .robo-raiz .cabeca h1 { font-size: 28px; }
}

@media (pointer: coarse) {
  .rl-help,
  .rl-full,
  .rl-form-footer .btn,
  .robo-raiz .campo input,
  .robo-raiz .campo select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .robo-raiz *, .robo-raiz *::before, .robo-raiz *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ajustes — reprodução da composição aprovada, ligada ao payload real. */
.robo-raiz.robo-sim-root .rl-config-header {
  min-height: 124px;
  margin-bottom: 26px;
  padding: 12px 0 30px;
}
.robo-raiz.robo-sim-root .rl-config-header::after { bottom: 0; margin-top: 0; }
.robo-raiz.robo-sim-root .rl-config-header h1 { font-size: clamp(31px, 3vw, 42px); }
.robo-raiz.robo-sim-root .rl-config-header p { max-width: 76ch; }

.robo-raiz.robo-sim-root > .note {
  min-height: 0;
  margin: 0 0 26px;
  padding: 12px 15px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root > .note.ok { border-color: #2d3139; background: #121419; }
.robo-raiz.robo-sim-root > .note::before {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(64,195,132,.10);
  color: #67d8a5;
}
.robo-raiz.robo-sim-root .prevoo-titulo { color: #edf0f3; font-size: 12px; font-weight: 650; }
.robo-raiz.robo-sim-root .prevoo-fecho,
.robo-raiz.robo-sim-root .prevoo-porque { color: #8f97a4; font-size: 10px; }

/* Aviso curto ocupa uma linha de verdade. Listas, rótulos e fechos continuam
   alinhados pelo topo e crescem pelo conteúdo, sem altura artificial. */
.robo-raiz.robo-sim-root > .note:not(:has(.prevoo-lista, .prevoo-fecho, .prevoo-rotulo)) {
  align-items: center;
}

.robo-raiz.robo-sim-root .rl-config-section-heading {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.robo-raiz.robo-sim-root .rl-config-section-heading h2 {
  margin: 0;
  color: #f1f3f6;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.robo-raiz.robo-sim-root .rl-config-section-heading .sub {
  max-width: 76ch;
  margin-top: 5px;
  color: #949ca8;
  font-size: 11px;
  line-height: 1.45;
}
.robo-raiz.robo-sim-root .rl-connections-heading { margin-top: 30px; }

.robo-raiz.robo-sim-root .rl-provider-grid {
  display: grid;
  /* QUATRO COLUNAS, COMO O SIMULADOR — e a medicao derruba o que eu tinha
     escrito aqui para justificar duas.

     Eu alegava que a descricao do provedor "tem 8px no mock e 13px aqui", e
     que por isso ela quebraria feio em 4 colunas. Medido no simulador ao vivo
     (localhost:3001 #ajustes, 1440 de janela): `header p` tem **10px** e
     quebra em **tres linhas** (45px de altura) de proposito, dentro de um
     cartao de **251,2px**. A premissa estava errada, e a conclusao caiu junto.

     E o custo das duas colunas nao era estetico: com 489px por cartao o
     conteudo se espalhava para os extremos e sobrava um vazio de **67px** no
     meio de todos eles, com o botao de apagar a **313px** da chave que ele
     apaga. A largura errada nao "estica" um cartao — ela o desmonta.

     `minmax(0, 1fr)` e nao `1fr`: sem o minimo zero uma descricao longa
     empurra a coluna e as quatro deixam de ser iguais.

     `align-items: start` PORQUE O CARTAO TEM DE TERMINAR ONDE O CONTEUDO
     TERMINA. Esticando a fileira ate' o cartao mais alto — que e' o default da
     grade — a sobra no fundo dos outros media 92, 133, 171 e **221px**. As
     descricoes dos nossos provedores tem de 1 a 5 linhas; as do simulador tem
     3 em TODOS, e e' so' por isso que la os cartoes saem iguais sem ninguem
     alinhar nada (medido: `align-items: normal`, rodape com `margin-top: 12px`
     e nunca `auto`). O fundo da fileira fica irregular, e isso e' honesto:
     estes cartoes tem quantidades diferentes de coisa dentro. */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 10px;
}
/* O CARTAO: 15px de recheio e as pecas separadas por 10px, o ritmo medido no
   simulador (header y=16 h=67,5 · status y=93,5 · chave y=136,5 · rodape
   y=182,5). `min-height` SAIU: era ele que criava o vazio, porque forcava uma
   altura que o conteudo nao tinha e o `margin-top:auto` do rodape empurrava o
   resto para longe. Quem iguala a altura da fileira e a propria grade
   (`align-items: stretch` e o default), sem inventar espaco por dentro. */
/* TODOS OS CARTOES COM A MESMA ALTURA (dono: "cards precisam ficar do mesmo
   tamanho"). Sao duas pecas, e nenhuma sozinha resolve:

   `align-items` volta ao default (`stretch`) para a FILEIRA igualar, e o
   `min-height` iguala tambem ENTRE fileiras — sem ele a linha de cima ficava
   em 239 e a de baixo em 313, cada uma coerente consigo mesma e diferente da
   outra. O numero saiu de medir a pagina real, nao de estimativa: topo 42 +
   estado 28 + rodape 49 sao fixos em todo cartao, e o miolo vai de 46 (uma
   linha de chave) a 110 (a nota do Pexels mais o editor aberto).

   O `min-height` e um PISO, nao um teto: um pool com tres chaves passa dele e
   cresce, e a fileira dele cresce junto. Travar em altura fixa esconderia
   chave, que e justamente o dado que a tela existe para mostrar. */
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card {
  min-width: 0;
  min-height: 326px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #141619;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card.falta {
  border-color: rgba(243,191,107,.34);
  background: #15140f;
}
/* O CABEÇALHO ENCOLHE COM A DESCRIÇÃO. Os 64px eram a altura reservada para
   as três linhas dela; sem o parágrafo, o que define a altura é o logo (42).
   Deixar 64 devolveria como espaço vazio exatamente o que a remoção ganhou. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-topo {
  min-height: 42px;
  margin: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  /* CENTRADO, e nao mais no topo. Com a descricao embaixo do nome, o topo
     era o alinhamento certo: os tres itens comecavam na mesma linha e a
     coluna do meio crescia para baixo. Sem ela o cabecalho virou uma LINHA
     de tres itens de alturas diferentes (42, 16,5 e 9), e medido no topo o
     nome ficava com o centro em 10,3 contra os 21 do logo — 11px acima.
     `center` poe os tres no mesmo eixo, que e o que uma linha pede. */
  align-items: center;
  gap: 10px;
}
.robo-raiz.robo-sim-root .rl-provider-logo,
.robo-raiz.robo-sim-root .rl-provider-fallback {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #353a43;
  border-radius: 8px;
  background: #f4f5f7;
}
.robo-raiz.robo-sim-root .rl-provider-logo img {
  width: 78%;
  height: 78%;
  display: block;
  object-fit: contain;
}
.robo-raiz.robo-sim-root .rl-provider-logo.brand-openrouter { border-color: #1d252b; background: #02070a; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-openrouter img,
.robo-raiz.robo-sim-root .rl-provider-logo.brand-groq img,
.robo-raiz.robo-sim-root .rl-provider-logo.brand-69labs img { width: 100%; height: 100%; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-genaipro { background: #08133d; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-genaipro img { width: 94%; height: 94%; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-groq { border-color: #f43e01; background: #f43e01; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-openai { border-color: #dedfdf; background: #f8f8f6; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-pexels { border-color: #2e3338; background: #0a0c0f; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-pexels img { width: 88%; height: 88%; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-pixabay { border-color: #4caf50; background: #4caf50; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-pixabay img { width: 100%; height: 100%; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-69labs { border-color: #e1e3e6; background: #fff; }
.robo-raiz.robo-sim-root .rl-provider-logo.brand-kie { border-color: #d9e3f4; background: #f7faff; }
.robo-raiz.robo-sim-root .rl-provider-fallback {
  background: #20242b;
  color: #c9ced6;
  font: 650 11px/1 Geist Mono, monospace;
}
.robo-raiz.robo-sim-root .ch-identidade { min-width: 0; }
/* `margin: 2px 0 4px` era o respiro ate a descricao, que saiu. Num item
   centrado ela desloca o texto 1px para cima e desalinha do logo. */
.robo-raiz.robo-sim-root .ch-identidade .ch-nome {
  margin: 0;
  color: #f2f4f6;
  font-size: 12px;
  font-weight: 650;
}
.robo-raiz.robo-sim-root .ch-identidade .dica {
  margin: 0;
  color: #8e96a2;
  font-size: 10px;
  line-height: 1.35;
}
.robo-raiz.robo-sim-root .rl-provider-kind {
  color: #8b929e;
  font: 650 8px/1 Geist Mono, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chaves-linhas { margin: 0; }
/* O `min-height: 37px` SAIU e a lista vazia SOME. Ela reservava a altura de
   uma linha de chave mesmo em provedor que nao tem chave nenhuma — e era o
   ultimo vao do cartao depois de matar o `margin-top: auto`: 37px de nada
   entre o chip "Nao configurado" e o campo, exatamente nos tres cartoes em que
   o campo ja' esta' aberto e a acao e' o assunto.
   O `:empty` casa so' quando nao ha' NENHUM filho, que e' o estado real de
   "sem chave guardada" — a lista e' preenchida por `trocar()`. */
.robo-raiz.robo-sim-root .rl-provider-grid .chaves-linhas:empty { display: none; }
/* A LINHA DA CHAVE E' A `.masked-key` DO SIMULADOR, medida: 34px de altura,
   raio 7, recheio `0 8px`, moldura 1px #292d36 sobre #0f1116.

   Eu a tinha tirado da caixa, invocando a regra de "cartao dentro de cartao".
   Estava errado por dois motivos: a instrucao do dono e' que o simulador manda
   na aparencia, e num cartao de 251px esta caixa nao le como cartao aninhado —
   le como CAMPO, que e' o que ela e'. A regra existe contra painel dentro de
   painel, nao contra um campo ter moldura.

   O que motivou tirar (a caixa competindo com a do cartao) era sintoma da
   LARGURA: a 489px ela virava uma faixa vazia atravessando o cartao. */
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha {
  min-height: 34px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #292d36;
  border-radius: 7px;
  background: #0f1116;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha + .chave-linha { margin-top: 6px; }
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha code {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: #858d99;
  font: 500 9px/1 Geist Mono, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha .chip {
  min-height: 23px;
  padding: 3px 7px;
  font-size: 9px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha .peq4 {
  min-width: 0;
  margin-right: auto;
  color: #858d99;
  font: 500 9px/1 Geist Mono, monospace;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha .btn {
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: #ff6868;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor > input {
  width: 100%;
  min-height: 38px;
  margin: 0;
  border: 1px solid #343943;
  border-radius: 6px;
  background: #111318;
  color: #eef0f3;
  font-size: 11px;
}
/* O EDITOR: campo + as duas ações dele, revelados juntos. `[hidden]` sozinho
   não basta porque as regras de layout acima já declaram `display` — e
   `display` de classe vence o `display: none` que o UA dá ao atributo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor[hidden],
.robo-raiz.robo-sim-root .rl-provider-grid .ch-revelar[hidden] { display: none; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* `auto` no RODAPÉ, e não mais nas ações: com cartões de alturas diferentes
   lado a lado é o rodapé que precisa alinhar, para "Pegar a chave" cair na
   mesma linha nos três e a fileira ler como fileira. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* A ASSINATURA VERMELHA SAIU. Medido no simulador, o `.secondary-button` tem
   `box-shadow: none` — e na foto a barra vermelha embaixo do campo lia como
   ESTADO DE ERRO num formulario que nao tinha erro nenhum. O vermelho da casa
   e' de alerta e de acao principal; este botao nao e' nem um nem outro. Os
   valores agora sao os do mock: 11px/680, moldura #303440, fundo #181b22. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes .btn:not(.ch-desistir) {
  min-height: 35px;
  padding: 0 9px;
  border: 1px solid #303440;
  border-radius: 6px;
  background: #181b22;
  box-shadow: none;
  color: #d9dce3;
  font-size: 11px;
  font-weight: 680;
}
.robo-raiz.robo-sim-root .rl-provider-grid .abrir-chave {
  min-height: 30px;
  padding: 4px 0 0;
  display: flex;
  gap: 5px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #aeb4bd;
  font-size: 9px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .abrir-chave .caminho { display: none; }
.robo-raiz.robo-sim-root .rl-provider-note { border-top: 1px solid #292d34; padding-top: 7px; }
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-note summary {
  min-height: 26px;
  gap: 6px;
  color: #8b929e;
  font-size: 9px;
  cursor: pointer;
  list-style: none;
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-note summary::-webkit-details-marker { display: none; }
/* O marcador proprio: um chevron desenhado com borda, que gira ao abrir. Um
   caractere de fonte aqui repetiria o defeito do `x` — glifo fazendo papel de
   icone, com traco que nao casa com o resto. */
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-note summary::after {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
  content: "";
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-note[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-note p { font-size: 9px; line-height: 1.5; }
.robo-raiz.robo-sim-root .rl-provider-note summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: #aeb4bd;
  font-size: 9px;
  cursor: pointer;
}
.robo-raiz.robo-sim-root .rl-provider-note p { margin: 0 0 8px; }

.robo-raiz.robo-sim-root .conexao-heygen {
  min-height: 94px;
  margin: 0 0 10px !important;
  padding: 16px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root .ajustes-grid {
  padding: 22px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root .campo-ajuste input,
.robo-raiz.robo-sim-root .campo-ajuste select,
.robo-raiz.robo-sim-root .campo-ajuste textarea { border-radius: 6px; background: #15181d; }

/* ══ O CAMPO DE ARQUIVO PRECISA SER DESENHADO — o `input[type=file]` não está
   na lista do `robo_telas.css:48-51`, que só cobre `text`, `number`, `select`
   e `textarea`. Sem isto ele herdava fundo e raio e mais nada: ficava sem
   borda, sem padding e com o botão cinza do sistema ao lado do "Nenhum
   arquivo escolhido" — do lado de um campo de texto desenhado, lê-se como
   defeito, e é o que o print mostrava.
   O `::file-selector-button` vira o secundário da casa; o resto da caixa
   copia a geometria do campo de texto, para os dois se alinharem. */
.robo-raiz .campo-ajuste input[type="file"] {
  width: 100%;
  /* Os 4px e o `line-height: 1.45` do botão abaixo saem de MEDIÇÃO, não de
     gosto: com eles a caixa fecha em 41px, que é exatamente a altura do campo
     de texto ao lado (`padding: 9px 11px` + 0.875rem). Um campo de 52 ao lado
     de um de 41 é o que fazia a linha parecer torta. */
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--linha2, #343943);
  border-radius: 8px;
  background: var(--sup2, #15181d);
  color: var(--texto3, #8f97a4);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.robo-raiz .campo-ajuste input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  line-height: 1.45;
  border: 1px solid var(--linha2, #343943);
  border-radius: 6px;
  background: #1d2024;
  color: #d9dde3;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.robo-raiz .campo-ajuste input[type="file"]:hover::file-selector-button { background: #23262b; }
.robo-raiz .campo-ajuste input[type="file"]:focus-visible {
  outline: 2px solid #ff4545;
  outline-offset: 2px;
  border-color: #ff4545;
}

/* Integrações — primeira pintura com a mesma anatomia da tela pronta.
 * O pulso muda apenas opacidade; não há faixa correndo nem brilho chamativo.
 * As formas são decorativas e o estado é anunciado uma única vez no HTML. */
.robo-raiz.robo-sim-root .rl-settings-skeleton {
  min-width: 0;
  contain: layout paint;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-shape {
  display: block;
  flex: none;
  border-radius: 4px;
  background: #292d35;
  opacity: .58;
  animation: rl-settings-skeleton-pulse 1.8s ease-in-out infinite;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-card {
  pointer-events: none;
  user-select: none;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-copy,
.robo-raiz.robo-sim-root .rl-settings-skeleton-connection-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-name { width: min(112px, 76%); height: 11px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-note { width: min(164px, 92%); height: 8px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-kind { width: 42px; height: 8px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-state { width: 90px; height: 25px; border-radius: 999px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-key { width: 100%; height: 34px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-actions {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-button { width: 94px; height: 35px; border-radius: 6px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-link { width: 66px; height: 8px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-connection {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-video-heading { margin-top: 30px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.robo-raiz.robo-sim-root .rl-settings-skeleton-field { min-width: 0; display: grid; gap: 8px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-label { width: 82px; height: 9px; }
.robo-raiz.robo-sim-root .rl-settings-skeleton-control { width: 100%; height: 38px; border-radius: 6px; }
@keyframes rl-settings-skeleton-pulse {
  0%, 100% { opacity: .48; }
  50% { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .robo-raiz.robo-sim-root .rl-settings-skeleton-shape { animation: none; opacity: .6; }
}

/* UM DEGRAU DE TRES QUE O SIMULADOR NAO TEM — e a razao e' que o numero que
   ele fixa nao e' o que importa aqui.

   Ele salta de 4 colunas para 2 em 1240px. Medido no nosso layout, isso leva a
   coluna de 223px (janela 1280) para **409px** (janela 1240): o cartao foi
   desenhado e medido em 251, e a 409 o codigo mascarado e o botao de apagar
   voltam a ficar nos extremos opostos de uma linha larga demais — que e' o
   defeito que esta passada inteira existe para consertar.

   O que se transporta do simulador e' o TAMANHO DO CARTAO, nao o valor do
   ponto de quebra: a barra lateral dele mede 286px e a nossa, 304 (trilho 68 +
   contexto 236), entao a mesma janela da' colunas diferentes nos dois. Com o
   degrau, a coluna fica entre 223 e 288 em toda a faixa, e nunca dobra de
   tamanho de um pixel para o outro. */
@media (max-width: 1240px) {
  .robo-raiz.robo-sim-root .rl-provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .robo-raiz.robo-sim-root .rl-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .robo-raiz.robo-sim-root .rl-provider-grid { grid-template-columns: 1fr; }
  .robo-raiz.robo-sim-root .ajustes-grid { padding: 16px; }
  .robo-raiz.robo-sim-root .rl-settings-skeleton-fields { grid-template-columns: 1fr; }
  .robo-raiz.robo-sim-root .rl-settings-skeleton-connection {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .robo-raiz.robo-sim-root .rl-settings-skeleton-connection > .rl-settings-skeleton-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Avatares — mídia da HeyGen como conteúdo principal, importação em diálogo. */
.robo-raiz.robo-sim-root .rl-page-actions .btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #3a3f48;
  border-radius: 6px;
  background: #24272c;
  color: #fff;
  box-shadow: inset 0 -2px #ef3d32;
}
.robo-raiz.robo-sim-root .rl-avatar-connection {
  min-height: 110px;
  margin-bottom: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root .rl-heygen-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #363b44;
  border-radius: 8px;
  background: #f6f6f5;
}
.robo-raiz.robo-sim-root .rl-heygen-logo img { width: 72%; height: 72%; object-fit: contain; }
.robo-raiz.robo-sim-root .rl-avatar-connection h2 {
  margin: 8px 0 3px;
  color: #f0f2f5;
  font-size: 15px;
  font-weight: 650;
}
.robo-raiz.robo-sim-root .rl-avatar-connection p {
  margin: 0;
  color: #8e96a2;
  font-size: 10px;
}
.robo-raiz.robo-sim-root .rl-avatar-connection > .btn {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #373c45;
  border-radius: 6px;
  background: #1b1e23;
  color: #eef0f3;
}
.robo-raiz.robo-sim-root .grp {
  margin: 22px 0 13px;
  padding-top: 18px;
  border-top: 1px solid #292d34;
  color: #9aa2ae;
  font: 650 10px/1 Geist Mono, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.robo-raiz.robo-sim-root .cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.robo-raiz.robo-sim-root .cartao-avatar {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
  color: inherit;
  text-align: left;
}
.robo-raiz.robo-sim-root .cartao-avatar .foto-do-avatar {
  width: 100%;
  min-height: 205px;
  max-height: 250px;
  margin: 0;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 0;
  background: #1a1d23;
}
.robo-raiz.robo-sim-root .cartao-avatar .corpo { min-height: 138px; padding: 15px 16px; }
.robo-raiz.robo-sim-root .cartao-avatar .rb-nome {
  margin-bottom: 7px;
  color: #f2f4f6;
  font-size: 15px;
  font-weight: 650;
}
.robo-raiz.robo-sim-root .cartao-avatar .peq4 { color: #8c94a0; font-size: 9px; }
.robo-raiz.robo-sim-root .rl-avatar-add {
  min-height: 344px;
  border-style: dashed;
  cursor: pointer;
}
.robo-raiz.robo-sim-root .rl-avatar-add:hover { border-color: #ff4545; background: #16181d; }
.robo-raiz.robo-sim-root .rl-avatar-add .foto-do-avatar {
  color: #ff6868;
  font-size: 30px;
  background: #0f1115;
}
.robo-raiz.robo-sim-root .rl-avatar-empty {
  width: 100%;
  min-height: 180px;
  border: 1px dashed #343a44;
  border-radius: 6px;
  background: #111318;
  color: #b6bcc5;
  cursor: pointer;
}
.robo-raiz.robo-sim-root .rl-avatar-dialog {
  /* MARGIN: AUTO É O QUE CENTRALIZA UM <dialog> MODAL.
     O navegador posiciona o modal com `position: fixed; inset: 0; margin: auto`
     — as quatro âncoras puxam para os quatro lados e a margem automática o
     deixa no meio. O `* { margin: 0 }` do estilo.css (linha 124) apagava essa
     margem, e com `inset: 0` sem margem o diálogo colapsa no canto SUPERIOR
     ESQUERDO. Medido no app: caixa em 0,0 com 760x365 numa janela de 1377x996.
     O véu estava certo o tempo todo (`::backdrop` pintado, `:modal` true) —
     era só a centralização que o reset comia. */
  margin: auto;
  width: min(760px, calc(100vw - 30px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #3a3f48;
  border-radius: 8px;
  background: #15171a;
  color: #f5f6f8;
  box-shadow: 0 30px 80px rgba(0,0,0,.62);
}
.robo-raiz.robo-sim-root .rl-avatar-dialog::backdrop { background: rgba(4,5,7,.76); backdrop-filter: blur(3px); }
.robo-raiz.robo-sim-root .rl-avatar-dialog-shell > header {
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #2d3139;
}
.robo-raiz.robo-sim-root .rl-avatar-dialog h2 { margin: 0; font-size: 18px; }
/* O SOBRETÍTULO CARREGA A MARCA para o título não repetir "HeyGen". Mono,
   versalete e `--faint` são o mesmo tratamento que o `.grp` da tela já usa —
   não é uma voz nova, é a que o Robô fala em todo separador de seção. */
.robo-raiz.robo-sim-root .rl-dialog-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--faint, #8a92a0);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* `:empty` NÃO É DETALHE AQUI: a caixa de resultado existe no DOM o tempo
   todo e só recebe conteúdo quando há o que dizer. Com margem fixa, um `div`
   vazio empurraria os campos 18px para baixo em toda abertura do diálogo —
   um vão sem causa visível, que é como o defeito do `.est-vazio` se
   manifestava. Sem filho, ela não ocupa nada. */
.robo-raiz.robo-sim-root .rl-dialog-saida { margin: 18px 22px 0; }
.robo-raiz.robo-sim-root .rl-dialog-saida:empty { display: none; }
.robo-raiz.robo-sim-root .rl-dialog-intro {
  margin: 18px 22px 0;
  color: #9299a5;
  font-size: 12px;
  line-height: 1.55;
}
.robo-raiz.robo-sim-root .rl-dialog-close { width: 36px; height: 36px; border: 1px solid #343943; border-radius: 6px; background: #1d2024; color: #d9dde3; }
/* `display: grid` DECLARADO AQUI: a classe `row` saiu do JS e era ela que
   ligava a grade (robo_telas.css:462). Sem esta linha os campos empilhariam
   como blocos — parecido, mas sem o `gap`, e as margens do `.campo-ajuste`
   colapsariam de um jeito diferente entre navegadores. */
.robo-raiz.robo-sim-root .rl-avatar-import-grid {
  padding: 16px 22px 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* O BLOCO DE SINCRONIA é a resposta à pergunta "e a foto?" — a única coisa
   deste formulário que a pessoa NÃO preenche. Ele fica entre os campos e o
   rodapé porque é ali que a dúvida aparece: com o botão já à vista. */
.robo-raiz.robo-sim-root .rl-heygen-sync {
  margin: 6px 22px 18px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #111318;
}
.robo-raiz.robo-sim-root .rl-heygen-sync .rl-heygen-logo { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 6px; }
.robo-raiz.robo-sim-root .rl-heygen-sync > span + span { display: grid; gap: 3px; }
.robo-raiz.robo-sim-root .rl-heygen-sync strong { color: #e7e9ed; font-size: 12px; }
.robo-raiz.robo-sim-root .rl-heygen-sync small { color: #8f97a4; font-size: 11px; line-height: 1.45; }
.robo-raiz.robo-sim-root .rl-heygen-sync.is-loading { border-color: rgba(255, 69, 69, .34); }
.robo-raiz.robo-sim-root .rl-heygen-sync.is-loading .rl-heygen-logo { animation: rl-sync-pulso 1.1s ease-in-out infinite; }
@keyframes rl-sync-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) {
  .robo-raiz.robo-sim-root .rl-heygen-sync.is-loading .rl-heygen-logo { animation: none; }
}
.robo-raiz.robo-sim-root .rl-avatar-dialog-shell > .dica { margin: 0 22px 16px !important; }

/* ══ A NOTA DO DIÁLOGO USA A GEOMETRIA DO BLOCO DE SINCRONIA ══════════════
   Ela ocupa o mesmo lugar que o `.rl-heygen-sync` ocupa no diálogo de
   importar — entre os campos e o rodapé, onde a dúvida aparece com o botão já
   à vista — então tem de ter as MESMAS margens. Antes ela reusava o
   `.rl-avatar-note` da PÁGINA, que não tem margem lateral nenhuma: dentro do
   diálogo ele ia de borda a borda enquanto todo o resto respeitava os 22px, e
   era a única coisa desalinhada da tela. Classe da página dentro de diálogo é
   geometria emprestada do contexto errado. */
.robo-raiz.robo-sim-root .rl-dialog-nota {
  margin: 6px 22px 18px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #4a3c1d;
  border-radius: 6px;
  background: #171410;
}
.robo-raiz.robo-sim-root .rl-dialog-nota > span {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 6px; background: #3a2f16; color: #e0b954;
  font-size: 12px; font-weight: 700;
}
.robo-raiz.robo-sim-root .rl-dialog-nota strong { display: block; color: #e7e9ed; font-size: 12px; }
.robo-raiz.robo-sim-root .rl-dialog-nota p { margin: 4px 0 0; color: #8f97a4; font-size: 11px; line-height: 1.5; }
.robo-raiz.robo-sim-root .rl-avatar-dialog-shell > footer {
  padding: 15px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid #2d3139;
  background: #111318;
}

@media (max-width: 900px) {
  .robo-raiz.robo-sim-root .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .robo-raiz.robo-sim-root .rl-avatar-connection { grid-template-columns: 48px 1fr; }
  .robo-raiz.robo-sim-root .rl-avatar-connection > .btn { grid-column: 1 / -1; }
  .robo-raiz.robo-sim-root .cartoes { grid-template-columns: 1fr; }
}

/* Canais — master/detail do simulador, com gravação real no editor. */
.robo-raiz.rc-canais.robo-sim-root > .note {
  min-height: 0;
  margin-bottom: 18px;
  background: #111318;
}
.robo-raiz.rc-canais.robo-sim-root > .note:not(:has(.prevoo-lista, .prevoo-fecho, .prevoo-rotulo)) {
  align-items: center;
}
.robo-raiz.rc-canais .rl-channels-workspace {
  min-height: 610px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid #2d3139;
  border-radius: 6px;
  overflow: hidden;
  background: #121419;
}
.robo-raiz.rc-canais .rl-channel-list {
  min-width: 0;
  border-right: 1px solid #2d3139;
  background: #101216;
}
.robo-raiz.rc-canais .rl-channel-list > header {
  min-height: 50px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2d3139;
  color: #858d99;
  font-size: 10px;
}
.robo-raiz.rc-canais .rl-channel-list > header b {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #20242a;
  color: #b9bec6;
  font-size: 10px;
}
.robo-raiz.rc-canais .rl-channel-item {
  width: 100%;
  min-height: 72px;
  padding: 13px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #292d34;
  background: transparent;
  color: #eef0f3;
  text-align: left;
  cursor: pointer;
}
.robo-raiz.rc-canais .rl-channel-item:hover,
.robo-raiz.rc-canais .rl-channel-item:focus-visible,
.robo-raiz.rc-canais .rl-channel-item.active {
  background: rgba(255,32,32,.07);
  box-shadow: inset 2px 0 #ff2020;
}
.robo-raiz.rc-canais .rl-channel-monogram {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #373c45;
  border-radius: 6px;
  background: #1d2026;
  color: #dce0e5;
  font: 650 10px/1 Geist Mono, monospace;
}
.robo-raiz.rc-canais .rl-channel-item > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.robo-raiz.rc-canais .rl-channel-item b { overflow: hidden; color: #edf0f3; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.robo-raiz.rc-canais .rl-channel-item small { overflow: hidden; color: #858d99; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.robo-raiz.rc-canais .rl-channel-item > i { color: #7f8793; font-size: 17px; font-style: normal; }
.robo-raiz.rc-canais .rl-channel-item.manual { margin-top: auto; }

.robo-raiz.rc-canais .rl-channel-editor {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #121419;
}
.robo-raiz.rc-canais .rl-channel-editor.card {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.robo-raiz.rc-canais .rl-channel-compat { display: none !important; }
.robo-raiz.rc-canais .rl-channel-editor-head {
  min-height: 128px;
  padding: 24px 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #2d3139;
}
.robo-raiz.rc-canais .rl-channel-editor-head > div { min-width: 0; }
.robo-raiz.rc-canais .rl-channel-editor-head > div > span {
  color: #858d99;
  font: 650 9px/1 Geist Mono, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.robo-raiz.rc-canais .rl-channel-editor-head h2 {
  margin: 14px 0 5px;
  color: #f4f5f7;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.03em;
}
.robo-raiz.rc-canais .rl-channel-editor-head p { margin: 0; color: #9098a4; font-size: 10px; }
.robo-raiz.rc-canais .rl-channel-editor-body { flex: 1; min-height: 0; padding: 0; }
.robo-raiz.rc-canais .rc-editor-workspace { min-width: 0; }
.robo-raiz.rc-canais .rc-editor-tabs {
  min-height: 48px;
  padding: 0 26px;
  display: flex;
  align-items: stretch;
  gap: 24px;
  overflow-x: auto;
  border-bottom: 1px solid #2d3139;
  scrollbar-width: thin;
}
.robo-raiz.rc-canais .rc-editor-tabs button {
  min-height: 48px;
  padding: 0;
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #858d99;
  font: 650 11px/1.2 Geist, sans-serif;
  cursor: pointer;
}
.robo-raiz.rc-canais .rc-editor-tabs button:hover { color: #dfe2e7; }
.robo-raiz.rc-canais .rc-editor-tabs button.active { color: #fff; }
.robo-raiz.rc-canais .rc-editor-tabs button.active::after {
  content: '';
  height: 2px;
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  background: #ff2020;
}
.robo-raiz.rc-canais .rc-editor-tabs button:focus-visible {
  outline: 2px solid rgba(255, 70, 70, .8);
  outline-offset: -4px;
}
.robo-raiz.rc-canais .rc-editor-panels { padding: 25px 26px 30px; }
.robo-raiz.rc-canais .rc-editor-panel[hidden] { display: none !important; }
.robo-raiz.rc-canais .rc-editor-panel > .rc-secao:first-child { margin-top: 0; }
.robo-raiz.rc-canais .rl-channel-range-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
}
.robo-raiz.rc-canais .rl-channel-range-field::after { content: none; }
.robo-raiz.rc-canais .rl-channel-range-field input[type="range"] {
  width: 100%;
  min-height: 32px;
  padding: 0;
  accent-color: #ff3b3b;
}
.robo-raiz.rc-canais .rl-channel-range-value {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #343944;
  border-radius: 6px;
  background: #171a1f;
  color: #f3f5f8;
  font: 700 12px/1 Geist, sans-serif;
  font-variant-numeric: tabular-nums;
}
.robo-raiz.rc-canais .rl-channel-editor-body > .aviso { margin: 0 26px 20px; }
.robo-raiz.rc-canais .rl-channel-editor-footer {
  min-height: 68px;
  padding: 13px 26px;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  border-top: 1px solid #2d3139;
  background: #101216;
}
.robo-raiz.rc-canais .rl-channel-danger { justify-self: start; }
.robo-raiz.rc-canais .rl-channel-inheritance {
  color: #747c88;
  font-size: 10px;
  white-space: nowrap;
}
.robo-raiz.rc-canais .rl-channel-editor-footer .btn:not(.pequeno) {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid #3a3f48;
  border-radius: 6px;
  background: #24272c;
  color: #fff;
  box-shadow: inset 0 -2px #ef3d32;
}

@media (max-width: 960px) {
  .robo-raiz.rc-canais .rl-channels-workspace { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .robo-raiz.rc-canais .rl-channels-workspace { display: block; }
  .robo-raiz.rc-canais .rl-channel-list { border-right: 0; border-bottom: 1px solid #2d3139; }
  .robo-raiz.rc-canais .rl-channel-editor-head,
  .robo-raiz.rc-canais .rl-channel-editor-footer { padding-right: 16px; padding-left: 16px; }
  .robo-raiz.rc-canais .rc-editor-tabs { padding: 0 16px; gap: 18px; }
  .robo-raiz.rc-canais .rc-editor-panels { padding: 21px 16px 26px; }
  .robo-raiz.rc-canais .rl-channel-editor-footer { grid-template-columns: 1fr; gap: 10px; }
  .robo-raiz.rc-canais .rl-channel-inheritance { white-space: normal; }
  .robo-raiz.rc-canais .rl-channel-editor-footer .btn { width: 100%; }
}

/* Custos — quatro leituras, planos visuais e tabelas honestas. */
.robo-raiz.robo-sim-root > .sub:first-of-type {
  margin: -8px 0 20px;
  color: #969eaa;
  font-size: 11px;
}
.robo-raiz.robo-sim-root .custos-periodo {
  margin: 0 0 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #111318;
}
.robo-raiz.robo-sim-root .custos-periodo-topo { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.robo-raiz.robo-sim-root .custos-periodo-topo .custos-rot { color: #929aa6; }
.robo-raiz.robo-sim-root .custos-periodo-topo b { color: #eef0f3; font-size: 12px; }
.robo-raiz.robo-sim-root .custos-periodo-topo .dica { display: none; }
.robo-raiz.robo-sim-root .custos-familias { display: flex; align-items: center; gap: 14px; }
.robo-raiz.robo-sim-root .custos-familia { display: flex; align-items: center; gap: 7px; }
.robo-raiz.robo-sim-root .custos-familia .custos-rot { font-size: 8px; white-space: nowrap; }
.robo-raiz.robo-sim-root .custos-pilhas { display: flex; flex-wrap: wrap; gap: 5px; }
.robo-raiz.robo-sim-root .custos-pilhas .chip { min-height: 22px; padding: 3px 7px; font-size: 8px; }

.robo-raiz.robo-sim-root .rb-tiles {
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.robo-raiz.robo-sim-root .rb-tiles > * {
  min-width: 0;
  min-height: 108px;
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root .rb-tiles > *:nth-child(3) { border-color: rgba(255,32,32,.24); }
.robo-raiz.robo-sim-root .rb-tiles .rot { color: #8d95a2; font-size: 9px; }
.robo-raiz.robo-sim-root .rb-tiles .val { margin: 8px 0 5px; color: #f5f6f8; font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.robo-raiz.robo-sim-root .rb-tiles .pe { color: #858d99; font-size: 9px; line-height: 1.35; }
.robo-raiz.robo-sim-root .custos-efetivo { margin: -12px 0 24px; color: #9199a5; }

.robo-raiz.robo-sim-root .custos-grupo {
  margin: 28px 0 13px;
  padding: 0;
  border: 0;
}
.robo-raiz.robo-sim-root .custos-grupo h2 { color: #f1f3f6; font-size: 18px; font-weight: 650; }
.robo-raiz.robo-sim-root .custos-grupo .sub { margin-top: 5px; color: #9098a4; font-size: 10px; }
.robo-raiz.robo-sim-root .custos-planos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.robo-raiz.robo-sim-root .custos-plano {
  min-width: 0;
  padding: 18px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root .custos-plano.falta { border-color: rgba(243,191,107,.34); }
.robo-raiz.robo-sim-root .custos-plano-topo {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.robo-raiz.robo-sim-root .rl-cost-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #363b44;
  border-radius: 8px;
  background: #f5f5f3;
}
.robo-raiz.robo-sim-root .rl-cost-logo img { width: 78%; height: 78%; object-fit: contain; }
.robo-raiz.robo-sim-root .rl-cost-plan-name { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.robo-raiz.robo-sim-root .rl-cost-plan-name b { color: #eef0f3; font-size: 12px; }
.robo-raiz.robo-sim-root .rl-cost-plan-name small { color: #858d99; font-size: 9px; }
.robo-raiz.robo-sim-root .custos-plano-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.robo-raiz.robo-sim-root .custos-plano > .dica { margin-top: 13px; padding: 10px; border-radius: 6px; background: #0f1116; }
.robo-raiz.robo-sim-root .custos-filtros {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px minmax(240px, 1.3fr);
  gap: 10px;
  align-items: end;
  border: 1px solid #2d3139;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #121419;
}
.robo-raiz.robo-sim-root .rb-rolagem,
.robo-raiz.robo-sim-root .custos-tabela { border-color: #2d3139; background: #111318; }

@media (max-width: 1100px) {
  .robo-raiz.robo-sim-root .custos-periodo { align-items: flex-start; flex-direction: column; }
  .robo-raiz.robo-sim-root .custos-familias { flex-wrap: wrap; }
  .robo-raiz.robo-sim-root .rb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .robo-raiz.robo-sim-root .rb-tiles,
  .robo-raiz.robo-sim-root .custos-planos { grid-template-columns: 1fr; }
  .robo-raiz.robo-sim-root .custos-filtros { grid-template-columns: 1fr; }
  .robo-raiz.robo-sim-root .custos-plano-campos { grid-template-columns: 1fr; }
}

/* A última palavra de escala fica aqui para não ser anulada pelos blocos
   históricos acima. */
.conteudo .robo-raiz.pw-page { font-size: 14px; }
.robo-raiz.pw-page .btn { min-height: 40px; padding-inline: 14px; border-radius: 8px; font-size: 13px; font-weight: 650; }
.robo-raiz.pw-page .dica,
.robo-raiz.pw-page .campo .ajuda,
.robo-raiz.pw-page .hint { font-size: 12px; line-height: 1.5; }
.robo-raiz.pw-page .chip { min-height: 25px; padding: 0 9px; border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.robo-raiz .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 14px; }
.robo-raiz .cartao-avatar { min-height: 365px; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; }
.robo-raiz .rl-avatar-media { min-height: 185px; position: relative; overflow: hidden; background: #1a1d24; }
.robo-raiz .rl-avatar-media .foto-do-avatar { width: 100%; height: 185px; min-height: 185px; object-fit: cover; }
.robo-raiz .cartao-avatar > .corpo { padding: 17px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
.robo-raiz .cartao-avatar .rb-nome { margin: 3px 0 0; font-size: 16px; }
.robo-raiz .rl-avatar-add { min-height: 365px; align-items: center; justify-content: center; }
@media (max-width: 980px) { .robo-raiz .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .robo-raiz .cartoes { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .robo-raiz.pw-page .btn,
  .robo-raiz.pw-page .pw-button,
  .robo-raiz.pw-page .rl-avatar-footer .btn { min-height: 44px; }
}

.robo-raiz.robo-sim-root .rl-provider-grid .ch-identidade .ch-nome { font-size: 14px; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-identidade .dica { font-size: 11px; }
.robo-raiz.robo-sim-root .rl-provider-kind { font-size: 10px; }
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card { padding: 20px; border-radius: 6px; }
.robo-raiz.rc-canais .rl-channel-item { min-height: 70px; padding: 12px 15px; }
.robo-raiz.rc-canais .rl-channel-item b { font-size: 13px; }
.robo-raiz.rc-canais .rl-channel-item small { font-size: 11px; }
.robo-raiz.rc-canais .rl-channel-editor-head p { font-size: 12px; }
.robo-raiz.rc-canais .rl-channel-editor-body { padding: 0; }
.robo-raiz.robo-sim-root .rb-tiles > * { min-height: 112px; padding: 18px 20px; border-radius: 6px; }
.robo-raiz.robo-sim-root .rb-tiles .rot { font-size: 11px; }
.robo-raiz.robo-sim-root .rb-tiles .val { font-size: 24px; }
.robo-raiz.robo-sim-root .rb-tiles .pe { font-size: 11px; }
.robo-raiz.robo-sim-root .custos-grupo .sub { font-size: 12px; }
.robo-raiz.robo-sim-root .custos-plano { padding: 20px; border-radius: 6px; }
.robo-raiz.robo-sim-root .rl-cost-plan-name b { font-size: 14px; }
.robo-raiz.robo-sim-root .rl-cost-plan-name small { font-size: 11px; }
.robo-raiz .rl-machines-main,
.robo-raiz .rl-installer { border-radius: 6px; }
.robo-raiz .rl-machines-main h2,
.robo-raiz .rl-installer h2 { font-size: 18px; }
.robo-raiz .rl-machines-main header p,
.robo-raiz .rl-installer header p { font-size: 12px; }
.robo-raiz .rp-compat { display: none !important; }
.robo-raiz.pw-page .campo > label,
.robo-raiz.pw-page .campo-ajuste > label,
.robo-raiz.pw-page .lab { font-size: 12px; }
.robo-raiz .rl-section-heading p,
.robo-raiz .rl-readiness header p,
.robo-raiz .rl-live-card > p,
.robo-raiz .rl-readiness li small,
.robo-raiz .rl-machine-empty p { font-size: 12px; }
.robo-raiz .rl-live-card h4,
.robo-raiz .rl-readiness li b { font-size: 12px; }
.robo-raiz .rl-live-card dt { font-size: 11px; }
.robo-raiz .rl-live-card dd { font-size: 13px; }
.robo-raiz .rl-readiness li { gap: 11px; }
.robo-raiz .rl-readiness .link { font-size: 12px; }

/* Ações principais no acabamento Linhas: metal escuro, reflexo curto e a
   assinatura vermelha na base. Evita o retângulo vermelho chapado que fazia
   qualquer ação parecer um alerta destrutivo. */
.robo-raiz .pw-button-primary,
.robo-raiz .rl-machine-callout .btn {
  border-color: #464b55;
  border-bottom-color: #ff3434;
  background: linear-gradient(180deg, #292c33 0%, #191b20 100%);
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10),
    inset 0 -1px rgba(255,32,32,.40), 0 8px 22px rgba(0,0,0,.22);
}
.robo-raiz .pw-button-primary:hover:not(:disabled),
.robo-raiz .rl-machine-callout .btn:hover:not(:disabled) {
  border-color: #5a606a;
  border-bottom-color: #ff6262;
  background: linear-gradient(180deg, #33363e 0%, #1e2025 100%);
}

.robo-raiz .pw-archive-row {
  position: relative;
  transition: background-color .16s ease, box-shadow .16s ease;
}
.robo-raiz .pw-archive-row:hover {
  background: rgba(255,255,255,.018);
  box-shadow: inset 2px 0 rgba(255,69,69,.56);
}
.robo-raiz .pw-delivery-file.is-ready {
  background: linear-gradient(90deg, rgba(64,195,132,.035), transparent 38%);
  box-shadow: inset 0 -1px rgba(103,216,165,.16);
}

/* -------------------------------------------------------------------------
 * PARIDADE FINAL COM O SIMULADOR APROVADO
 *
 * Esta camada existe porque a folha histórica ainda chega antes com decisões
 * de escala e material que pertenciam às propostas abandonadas. A geometria
 * abaixo foi medida no simulador Linhas: 1320 px de bancada, cabeçalho de
 * 88 px, métricas independentes, raio de 6 px e ação primária grafite com
 * somente o filete vermelho. O backend continua decidindo conteúdo, estados e
 * disponibilidade; aqui não há fixture nem capability inventada.
 * ---------------------------------------------------------------------- */
.robo-raiz {
  --lines-canvas: #0f1012;
  --lines-plane: #141619;
  --lines-surface: #1b1e22;
  --lines-raised: #24272c;
  --lines-hover: #2d3137;
  --lines-rule: rgba(235,238,243,.105);
  --lines-rule-strong: rgba(235,238,243,.19);
  --lines-red: #ff2020;
  --lines-red-deep: #d60000;
  --lines-red-soft: rgba(255,32,32,.09);
  --lines-red-signal: rgba(255,32,32,.18);
  --lines-sheen: rgba(255,255,255,.035);
  --lines-focus: #ff4545;
  --lines-button-accent: #ef3d32;
  --lines-button-accent-hover: #ff5147;
  --lines-success: #67d8a5;
}

body:has(.robo-raiz) .conteudo > * { width: min(100%, 1376px); max-width: 1376px; }
.conteudo .robo-raiz { max-width: 1376px; padding: 18px 28px 54px; }

/* O título do simulador ocupa uma faixa única de 88 px, sem um segundo hero.
 *
 * O TRAÇO VERMELHO É O ÚNICO TRAÇO. `.rl-page-header` (topo deste arquivo) dá
 * um `border-bottom` de largura total a todo cabeçalho, e o `::after` era
 * ancorado em `bottom:-1px` para pousar em cima dele. A tela aprovada não tem
 * esse fio: `.pw-page-heading` (production-workspace.css:36-43) e `.page-header`
 * do laboratório vêm sem borda, e o degradê de 68-112px é a única marca sob o
 * título. Zerado AQUI, dentro da `.robo-raiz`, e não na regra global: o fio é do
 * desenho antigo desta área, mas a regra base é lida por quem não é do Robô. */
.robo-raiz .rl-page-header,
.robo-raiz.robo-sim-root .rl-config-header {
  min-height: 88px;
  margin-bottom: 26px;
  padding: 0;
  gap: 24px;
  border-bottom: 0;
}
/* A CURVA DO TÍTULO É A DA FOLHA APROVADA. Esta regra (0,2,1) vence a
 * `.pw-page-heading h1` (0,1,1) do simulador, então era ela quem mandava — e
 * entregava 36px numa janela de 1440 e 32px em 1280 onde o desenho pede 38.
 * `clamp(30px, 3vw, 38px)` e `-.035em` são os valores de
 * production-workspace.css:45, copiados para o seletor que vence. */
.robo-raiz .rl-page-header h1,
.robo-raiz.robo-sim-root .rl-config-header h1 {
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
/* A DESCRIÇÃO TAMBÉM É A DA FOLHA APROVADA (production-workspace.css:46: 14px,
 * `margin-top:11px`, `--pw-muted`). No real ela é um `<p>`, não o `> span` que
 * o simulador emite, então a regra de lá não casa e valiam os 13px daqui. O
 * ajuste é de valor, não de marcação: trocar a tag mudaria o alvo de toda outra
 * regra que mira `.rl-page-header p`. */
.robo-raiz .rl-page-header p,
.robo-raiz.robo-sim-root .rl-config-header p {
  max-width: 720px;
  margin-top: 11px;
  color: #9ca3b0;
  font-size: 14px;
  line-height: 1.55;
}
.robo-raiz .rl-page-header::after,
.robo-raiz.robo-sim-root .rl-config-header::after {
  width: clamp(68px, 8vw, 112px);
  /* Sem a borda embaixo, o traço pousa no `bottom: 0` do próprio cabeçalho — o
   * `-1px` da regra base existia só para cobrir o fio que acabou de sair. */
  bottom: 0;
  background: linear-gradient(90deg, var(--robot-delight-red), var(--lines-red-signal) 62%, transparent);
  box-shadow: 0 4px 10px var(--lines-red-soft);
}

/* Quatro leituras separadas, como instrumentos — não uma barra duplicada. */
.robo-raiz .rl-metrics {
  margin: -2px 0 28px;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.robo-raiz .rl-metric,
.robo-raiz .rl-metric + .rl-metric,
.robo-raiz .rl-metric:nth-child(3),
.robo-raiz .rl-metric:nth-child(4) {
  min-height: 108px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid #242831;
  border-radius: 6px;
  background: rgba(17,19,25,.72);
  box-shadow: inset 0 1px var(--lines-sheen);
}
.robo-raiz .rl-metric.is-live,
.robo-raiz .rl-metric.live { background: var(--lines-plane); }

/* A bancada principal usa o mesmo 1002 / 300 do simulador em 1320 px. */
.robo-raiz .rl-produce-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.robo-raiz .rl-production-form { padding: 32px; }
.robo-raiz .rl-live-card,
.robo-raiz .rl-readiness { padding: 18px; }

/* Ações primárias: grafite sólido, brilho de um pixel e assinatura vermelha. */
.robo-raiz .pw-button-primary:not(:disabled),
.robo-raiz .rl-machine-callout .btn:not(:disabled),
.robo-raiz.robo-sim-root .rl-page-actions .btn:not(:disabled) {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--lines-button-accent-hover) 42%, transparent);
  border-bottom-color: color-mix(in srgb, var(--lines-button-accent-hover) 42%, transparent);
  background: var(--lines-raised);
  color: #fff !important;
  box-shadow:
    inset 0 -2px var(--lines-button-accent),
    inset 0 1px var(--lines-sheen),
    0 5px 14px color-mix(in srgb, var(--lines-red-deep) 14%, transparent);
}
.robo-raiz .pw-button-primary:disabled,
.robo-raiz .rl-machine-callout .btn:disabled {
  border-color: var(--lines-rule-strong);
  background: var(--lines-raised);
  color: #838994 !important;
  box-shadow: none;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .robo-raiz .pw-button-primary:hover:not(:disabled),
  .robo-raiz .rl-machine-callout .btn:hover:not(:disabled),
  .robo-raiz.robo-sim-root .rl-page-actions .btn:hover:not(:disabled) {
    transform: none;
    border-color: color-mix(in srgb, var(--lines-button-accent-hover) 64%, transparent);
    background: var(--lines-hover);
    box-shadow:
      inset 0 -2px var(--lines-button-accent-hover),
      inset 0 1px var(--lines-sheen),
      0 7px 17px color-mix(in srgb, var(--lines-red-deep) 17%, transparent);
  }
}

/* Integrações: a nota estava fora um wrapper e escapava do acabamento. */
.robo-raiz.robo-sim-root > div > .note,
.robo-raiz.robo-sim-root > div > .note.ok {
  min-height: 0;
  margin: 0 0 26px;
  padding: 12px 15px;
  border: 1px solid #2d3139;
  border-radius: 6px;
  background: #121419;
}
.robo-raiz.robo-sim-root > div > .note::before {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(64,195,132,.10);
  color: var(--lines-success);
}
.robo-raiz.robo-sim-root > div > .note:not(:has(.prevoo-lista, .prevoo-fecho, .prevoo-rotulo)) {
  align-items: center;
}
/* ESTE BLOCO E' O QUE VENCE. Os dois anteriores (linhas ~1085 e ~1818)
   declaram as MESMAS propriedades com outros valores e ficam inertes por
   ordem de cascata — heranca de tres passadas de ajuste de tamanho. Nao os
   apago aqui porque eles tambem servem outras telas; o que importa e' que os
   numeros VIVOS sao estes, e sao os do simulador medido:

     h3   11px      p   10px      em   9px      padding  15px

   `min-height: 266px` SAIU. Era ele o "vazio no meio do cartao": forcava uma
   altura que o conteudo nao tinha, e o `margin-top:auto` do rodape empurrava
   tudo para os extremos. A fileira continua com cartoes de altura igual —
   quem faz isso e' a grade, nao um numero chutado. */
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card {
  padding: 15px;
  border-radius: 6px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-identidade .ch-nome { font-size: 11px; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-identidade .dica { font-size: 10px; }
.robo-raiz.robo-sim-root .rl-provider-kind { font-size: 9px; }

/* Avatares: fotos HeyGen mantêm exatamente a proporção e o ritmo aprovados. */
.robo-raiz.robo-sim-root .cartoes { gap: 14px; }
.robo-raiz.robo-sim-root .cartao-avatar { min-height: 0; border-radius: 6px; }
.robo-raiz.robo-sim-root .cartao-avatar .rl-avatar-media,
.robo-raiz.robo-sim-root .cartao-avatar .foto-do-avatar {
  height: 190px;
  min-height: 190px;
  max-height: 190px;
}
.robo-raiz.robo-sim-root .cartao-avatar .corpo { min-height: 161px; padding: 17px; }
.robo-raiz.robo-sim-root .rl-avatar-footer { min-height: 59px; padding: 12px 17px; }
.robo-raiz.robo-sim-root .rl-avatar-add { min-height: 410px; }

/* Máquinas usa a composição editorial do simulador: estação e instalador
   compartilham o plano, separados por uma única linha. */
.robo-raiz .rl-machines { width: min(100%, 1216px); margin-inline: auto; gap: 0; }
.robo-raiz .rl-machines > .rb-maq-cabeca {
  min-height: 83px;
  margin: 0 0 19px;
  padding: 0 0 15px;
  gap: 32px;
}
.robo-raiz .rl-machines > .rb-maq-cabeca h1 { font-size: 36px; }
.robo-raiz .rl-machines > .rb-maq-cabeca .sub { margin-top: 9px; font-size: 13px; }
.robo-raiz .rl-machines-grid {
  grid-template-columns: minmax(0, 785px) minmax(360px, 431px);
  gap: 0;
}
.robo-raiz .rl-machines-main {
  min-height: 0;
  margin-right: 46px;
  border-radius: 6px;
}
.robo-raiz .rl-installer {
  padding: 0 0 0 46px;
  overflow: visible;
  border: 0;
  border-left: 1px solid var(--lines-rule);
  border-radius: 0;
  background: transparent;
}

/* O mesmo raio contido vale nas superfícies de Canais e Custos. */
.robo-raiz.rc-canais .rl-channels-workspace,
.robo-raiz.rc-canais .rl-channel-editor.card,
.robo-raiz.robo-sim-root .rb-tiles > *,
.robo-raiz.robo-sim-root .custos-plano { border-radius: 6px; }
.robo-raiz.robo-sim-root .rb-tiles > * { padding: 16px 18px; }
.robo-raiz.robo-sim-root .custos-plano { padding: 18px; }

/* Browser surfaces também pertencem ao produto. */
.robo-raiz ::selection { background: rgba(255,32,32,.32); color: #fff; }
.robo-raiz :is(input, textarea) { caret-color: var(--lines-focus); }
.robo-raiz :focus-visible { outline: 2px solid var(--lines-focus); outline-offset: 2px; }
.robo-raiz :is(.pw-event-list, .rb-rolagem, .custos-tabela, textarea) {
  scrollbar-color: #454b55 transparent;
  scrollbar-width: thin;
}

@media (max-width: 1180px) {
  .robo-raiz .rl-produce-grid { grid-template-columns: 1fr; }
  .robo-raiz .rl-machines { max-width: none; }
  .robo-raiz .rl-machines-grid { grid-template-columns: 1fr; gap: 16px; }
  .robo-raiz .rl-machines-main { margin-right: 0; }
  .robo-raiz .rl-installer {
    padding: 20px;
    border: 1px solid #2d3139;
    border-radius: 6px;
    background: #121419;
  }
}

@media (max-width: 700px) {
  .robo-raiz .rl-page-header,
  .robo-raiz.robo-sim-root .rl-config-header { min-height: 0; padding-bottom: 20px; }
  .robo-raiz .rl-page-header h1,
  .robo-raiz.robo-sim-root .rl-config-header h1,
  .robo-raiz .rl-machines > .rb-maq-cabeca h1 { font-size: 28px; }
  .robo-raiz .rl-production-form { padding: 18px 14px 0; }
  .robo-raiz .rl-metrics { grid-template-columns: 1fr; }
}

/* O resumo deve deixar espaço para começar a produzir no telefone.
   Duas colunas preservam os quatro estados e a escala do texto; abaixo de
   360px a coluna única continua acomodando as descrições completas. */
@media (min-width: 360px) and (max-width: 760px) {
  .robo-raiz[data-robo-view="produzir"] .rl-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .robo-raiz[data-robo-view="produzir"] .rl-metrics > .rl-metric {
    padding-inline: 12px;
  }
}

/* A LARGURA QUE MANDA É A DA COLUNA, NÃO A DA JANELA — e esta é a lição que
   sobrevive. O item da máquina era um grid de colunas fixas que não cabiam na
   coluna esquerda: o nome ("DESKTOP-5E76V65") ia a 0px de largura por 204px de
   altura e o texto quebrava letra a letra por cima do resto. Foi o que o dono
   viu. O `estilo.css` já tinha a regra que empilhava (linha 1023), mas atrás
   de um `@media (max-width: …)` — e o defeito acontece em JANELA LARGA: quem
   estreita são o trilho, a barra contextual e a coluna do instalador. Mesmo
   erro de eixo do Painel do canal, mesma correção: perguntar ao container.

   AS REGRAS DE EMPILHAMENTO SAÍRAM DAQUI porque o cartão foi reconstruído
   logo abaixo (`article.rl-station`), e ele já nasce empilhado — header,
   operação, fatos e rodapé, um sob o outro. Medido no app com o contêiner
   forçado a 380px: 0 de overflow, o cartão só cresce em altura. Regra que não
   casa com nenhum elemento não é rede de segurança, é entulho que descreve um
   layout extinto — e foi assim que este arquivo já enganou uma leitura.

   O `container` FICA: `.rb-maq-lista` continua sendo o invólucro real e é o
   ponto de consulta pronto para a próxima regra que precisar da largura da
   coluna. */
.robo-raiz .rl-machines .rb-maq-lista { container: rb-maq / inline-size; }

/* ====================================================================== */
/* A ESTAÇÃO — o cartão da máquina, na forma da tela aprovada             */
/* ====================================================================== */

/* Quatro regiões empilhadas, cada uma com a própria linha: identidade, faixa de
   trabalho, fatos e rodapé. É o que torna o cartão indiferente à largura da
   coluna — o desenho antigo era uma linha de grid com quatro colunas e quebrava
   quando elas não cabiam.
   Os tamanhos NÃO são copiados do lab.css do simulador: lá os rótulos vivem em
   8–9px, e o PRODUCT.md deste produto declara piso de 12px para texto
   funcional. Portei a estrutura e a proporção; a tipografia é a da casa. */
.robo-raiz .rl-station {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--pw-line, #292d37);
  border-radius: var(--linhas-raio, 6px);
  background: var(--pw-surface, #15181d);
}

.robo-raiz .rl-station-header {
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.robo-raiz .rl-station-device {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--pw-line, #292d37);
  border-radius: var(--linhas-raio, 6px);
  background: var(--pw-surface-quiet, #0e1015);
  color: var(--pw-muted, #9ca3b0);
}
.robo-raiz .rl-station-identity { min-width: 0; flex: 1; }
/* A linha do nome quebra para baixo quando o selo não cabe ao lado — nunca
   espreme o nome, que e o unico texto que identifica a maquina. */
.robo-raiz .rl-station-identity > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.robo-raiz .rl-station-identity h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--pw-text, #f3f4f6);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.robo-raiz .rl-station-identity > p {
  margin: 5px 0 0;
  color: var(--pw-muted, #9ca3b0);
  font-size: 13px;
}

/* A faixa de trabalho: o que a máquina está fazendo, e o único controle que
   ela oferece. Duas colunas no largo, empilhadas no estreito. */
.robo-raiz .rl-station-operation {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 16px 24px;
  align-items: start;
  border-top: 1px solid var(--pw-line, #292d37);
}
.robo-raiz .rl-station-now { min-width: 0; display: grid; gap: 3px; }
.robo-raiz .rl-station-now > span {
  color: var(--pw-muted-2, #737b89);
  font: 500 12px/1 var(--mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.robo-raiz .rl-station-now > strong { color: var(--pw-text, #f3f4f6); font-size: 15px; font-weight: 650; }
.robo-raiz .rl-station-now > small { color: var(--pw-muted, #9ca3b0); font-size: 12px; }

.robo-raiz .rl-station-campo { min-width: 0; display: grid; gap: 6px; }
.robo-raiz .rl-station-campo > span { color: var(--pw-muted, #9ca3b0); font-size: 12px; }
.robo-raiz .rl-station-campo > small { color: var(--pw-muted-2, #737b89); font-size: 12px; }
.robo-raiz .rl-station-campo select {
  width: 100%;
  min-height: var(--linhas-altura-controle, 40px);
}

/* Os fatos: quatro colunas que viram duas e depois uma, sem nunca esmagar. */
.robo-raiz .rl-station-facts {
  margin: 0;
  padding: 0;
  display: grid;
  /* 150px e nao 132: a 410px de coluna, 132 dava TRES colunas e a quarta
     descia sozinha, deixando uma celula vazia do tamanho de duas ao lado dela.
     Com 150 cabem duas, e os quatro fatos fecham 2x2 sem buraco. Onde a coluna
     e larga, os quatro voltam para uma linha so. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--pw-line, #292d37);
  border-top: 1px solid var(--pw-line, #292d37);
}
.robo-raiz .rl-station-facts > div { padding: 14px 20px; background: var(--pw-surface, #15181d); }
.robo-raiz .rl-station-facts dt {
  margin: 0 0 5px;
  color: var(--pw-muted-2, #737b89);
  font-size: 12px;
}
.robo-raiz .rl-station-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--pw-text, #f3f4f6);
  font-size: 13px;
  font-weight: 600;
}

.robo-raiz .rl-station-footer {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  border-top: 1px solid var(--pw-line, #292d37);
  background: var(--pw-surface-quiet, #0e1015);
}
.robo-raiz .rl-station-footer > p { margin: 0; color: var(--pw-muted, #9ca3b0); font-size: 12px; }

/* O RODAPÉ GANHOU "ATUALIZAR O ROBÔ" (2026-09-23): o texto e a nota da
   versão à esquerda, as duas ações juntas à direita. Quando o cartão estreita,
   o grupo de botões desce inteiro -- nunca um botão de cada lado. */
.robo-raiz .rl-station-footer-texto { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; }
.robo-raiz .rl-station-footer-texto > p { margin: 0; color: var(--pw-muted, #9ca3b0); font-size: 12px; }
.robo-raiz .rl-station-footer-texto > small { color: var(--pw-muted, #9ca3b0); font-size: 12px; line-height: 1.45; }
.robo-raiz .rl-station-footer-texto > small.rl-station-nota { color: var(--pw-amber, #f2bb5e); }
.robo-raiz .rl-station-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.robo-raiz .rl-station-acoes .btn { max-width: 100%; white-space: normal; text-align: center; }

/* O andamento pertence à estação; atividade e último contato continuam
   visíveis acima, inclusive durante o reinício. */
.robo-raiz .rl-station-update {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-top: 1px solid var(--pw-line, #292d37);
  overflow-wrap: anywhere;
}
.robo-raiz .rl-station-update > strong { color: var(--pw-text, #f3f4f6); font-size: 14px; font-weight: 650; }
.robo-raiz .rl-station-update > p,
.robo-raiz .rl-station-update > small { margin: 0; color: var(--pw-muted, #9ca3b0); font-size: 13px; line-height: 1.5; }
.robo-raiz .rl-station-update.is-error > strong { color: var(--erro, #ff746a); }
.robo-raiz .rl-station-update:focus-visible { outline: 2px solid var(--linhas-foco, #ff4545); outline-offset: -3px; }

/* Máquina muda: a moldura avisa, sem esconder nada. */
.robo-raiz .rl-station.is-muda { border-color: color-mix(in srgb, var(--pw-amber, #f2bb5e) 34%, var(--pw-line, #292d37)); }
.robo-raiz .rl-station.is-muda .rl-station-now > strong { color: var(--pw-amber, #f2bb5e); }

/* No estreito, a faixa de trabalho empilha. Container, não viewport: quem
   estreita este cartão é a coluna do instalador, não a janela. */
@container rb-maq (max-width: 520px) {
  .robo-raiz .rl-station-operation { grid-template-columns: minmax(0, 1fr); }
}

/* O BLOQUEIO DO INSTALADOR — título em cima, motivo embaixo.
   `.robo-raiz .aviso` é `display: flex`, e num aviso de duas partes isso vira
   duas COLUNAS que encolhem: "Sem download agora." quebrava palavra a palavra
   numa faixa estreita com o motivo espremido ao lado. Aqui ele volta a ser
   bloco, que é a forma do `installer-slot-blocked` do simulador. */
.robo-raiz .rl-installer .aviso.rl-bloqueio {
  display: block;
  padding: 15px 17px;
}
.robo-raiz .rl-installer .aviso.rl-bloqueio > strong {
  display: block;
  margin-bottom: 5px;
  color: var(--pw-amber, #f2bb5e);
  font-size: 13px;
  font-weight: 650;
}
.robo-raiz .rl-installer .aviso.rl-bloqueio > p {
  margin: 0;
  color: #bba778;
  font-size: 13px;
  line-height: 1.5;
}

/* AS DUAS AJUDAS PRECISAM PARECER ABRÍVEIS.
   Elas são `<details>`, mas o `summary` estava sem marcador nenhum: na tela
   liam-se como dois textos soltos no fim da coluna, e ninguém clica no que não
   parece clicável. O simulador põe um "+" que vira "−" quando abre. */
.robo-raiz .rl-installer .rb-maq-ajuda {
  border-top: 1px solid var(--pw-line, #292d37);
}
.robo-raiz .rl-installer .rb-maq-ajuda > summary {
  min-height: 46px;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  color: var(--pw-text, #f3f4f6);
  font-size: 13px;
  list-style: none;
}
.robo-raiz .rl-installer .rb-maq-ajuda > summary::-webkit-details-marker { display: none; }
.robo-raiz .rl-installer .rb-maq-ajuda > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--pw-muted, #9ca3b0);
  font: 400 17px/1 var(--mono), monospace;
}
.robo-raiz .rl-installer .rb-maq-ajuda[open] > summary::after { content: "−"; }
.robo-raiz .rl-installer .rb-maq-ajuda > summary:hover { color: #fff; }


/* O BOTAO DE REMOVER A CHAVE E' UM `×` SEM MOLDURA, como no simulador
   (`.masked-key button { border: 0; background: none; color: var(--danger-text) }`).

   Antes era um `btn perigo` com moldura vermelha e a palavra "Remover": pesava
   mais que a propria chave que ele apaga, e nao cabia na linha — medido, ela ia
   a 61px porque chip + valor + botao quebravam em duas linhas num cartao de
   240px. Sem moldura, a linha volta aos 36px declarados logo acima.

   O ALVO DE CLIQUE NAO ENCOLHE: 28x28 e' o minimo confortavel, e o `×` fica
   centrado nele. A cor vermelha e o `title` continuam dizendo o que ele faz. */
.robo-raiz.robo-sim-root .rl-provider-grid .chave-remover {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--danger-text, #ff8a82);
  line-height: 1;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-remover:hover:not(:disabled) {
  border: 0;
  background: rgba(255, 32, 32, .1);
  border-radius: 6px;
  color: #ffb0aa;
}

/* ==========================================================================
   INTEGRAÇÕES — o cartão de provedor, transportado do simulador (2026-08-25)

   Todos os números abaixo saíram de MEDIR `localhost:3001 #ajustes` com o
   Playwright a 1440 de janela, não de estimativa. O ritmo vertical do cartão:

     header  y=16    h=67,5      status  y=93,5   h=33
     chave   y=136,5 h=34        rodapé  y=182,5  h=36    cartão 251,2 x 234,5
   ========================================================================== */

/* A FAIXA DE ESTADO: o veredito do cartão à esquerda, a contagem do pool à
   direita. Ela não existia aqui — o estado morava dentro da linha da chave, e
   num pool de três chaves isso dava três vereditos e nenhum resumo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-estado {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-estado .chip {
  min-height: 27px;
  padding: 6px 9px;
  gap: 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 650;
  white-space: nowrap;
}
/* A contagem do pool encolhe antes do chip: o chip é o veredito e não pode
   quebrar; "3 no pool" reticencia sem perder o número, que vem primeiro. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-pool {
  min-width: 0;
  overflow: hidden;
  color: #8b929e;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O PONTO DE ESTADO DE UMA CHAVE. 6px, dentro da linha dela — é o que permite
   ao pool misto continuar dizendo QUAL chave foi recusada, depois que o
   veredito do cartão subiu para o chip do topo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-ponto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: #6b7280;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-ponto.ok { background: var(--lines-success, #40c384); }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-ponto.mau { background: var(--danger-text, #ff6868); }

/* O motivo da recusa. Vermelho tênue, não o vermelho de alerta: ele explica um
   estado que o ponto já sinalizou, e repetir a intensidade seria alarme duplo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-erro {
  margin: -2px 0 0;
  color: #e08b86;
  font-size: 9px;
  line-height: 1.45;
}

/* O ÍCONE DE APAGAR: 30x30 como no simulador, desenhado por icone('trash').
   O tamanho do traço vem do atributo do SVG, então o que sobra aqui é impedir
   que ele encolha na linha e dar-lhe alvo de clique. A margem negativa devolve
   o recheio lateral da caixa, para o ícone encostar na borda como no mock. */
.robo-raiz.robo-sim-root .rl-provider-grid .chave-remover {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  margin-right: -7px;
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--danger-text, #ff8a82);
  line-height: 1;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-remover svg { width: 14px; height: 14px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .robo-raiz.robo-sim-root .rl-provider-grid .chave-remover:hover:not(:disabled) {
    background: rgba(255, 32, 32, .1);
    color: #ffb0aa;
  }
}

/* O EDITOR: campo mais as duas ações, revelados juntos. O atributo [hidden]
   sozinho não basta porque as regras de layout já declaram display — e um
   display de classe vence o display:none que o UA dá ao atributo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor[hidden],
.robo-raiz.robo-sim-root .rl-provider-grid .ch-revelar[hidden] { display: none; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor > input {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #343943;
  border-radius: 7px;
  background: #0f1116;
  color: #eef0f3;
  font-size: 10px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes { display: flex; gap: 9px; flex-wrap: wrap; }

/* O RODAPÉ do simulador é flex com gap 9 E QUEBRA — a 251px "Trocar chave" e
   "Pegar a chave" não cabem lado a lado, e o mock deixa a segunda descer.
   space-between seria pior: empurraria as duas para as bordas opostas, que é
   exatamente o defeito que a coluna de 489px produzia. */
/* `auto` DE VOLTA, e agora ele nao produz o vao que produzia antes. Naquela
   versao o cartao tinha 489px de largura e a descricao do provedor empurrava
   o conteudo de forma imprevisivel — a sobra chegava a 221px. Hoje o miolo
   varia 64px no pior caso, e o `auto` e o que faz os oito rodapes cairem na
   MESMA linha: sem ele o botao flutuaria a alturas diferentes em cada cartao,
   que e exatamente o que "do mesmo tamanho" nao quer dizer. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Botão secundário do simulador, medido: 11px/680, moldura #303440, raio 6,
   fundo #181b22, texto #d9dce3, recheio 0 9px, altura 35. Sem a assinatura
   vermelha: ela pertence à ação que grava, não à que abre um campo. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-revelar {
  min-height: 35px;
  padding: 0 9px;
  border: 1px solid #303440;
  border-radius: 6px;
  background: #181b22;
  box-shadow: none;
  color: #d9dce3;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: -.01em;
}
@media (hover: hover) and (pointer: fine) {
  .robo-raiz.robo-sim-root .rl-provider-grid .ch-revelar:hover:not(:disabled) {
    border-color: #3a3f4b;
    background: var(--lines-hover, #24272c);
  }
}

/* "Pegar a chave" é o text-button do simulador: 10px/620, #aeb5c2, sem
   moldura. Dentro do rodapé ele perde o respiro de topo que carregava quando
   era o último filho solto do cartão — somar os dois o desalinharia do botão
   ao lado. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape .abrir-chave {
  min-height: 35px;
  padding: 0;
  color: #aeb5c2;
  font-size: 10px;
  font-weight: 620;
}

/* CANCELAR é texto, não um segundo botão com moldura. Ele desfaz algo que
   ainda não aconteceu — dar-lhe o peso de "Trocar e testar" faria a dupla
   parecer uma escolha entre dois caminhos equivalentes, quando um deles é só
   sair. Precisa vencer a regra de .ch-editor-acoes .btn, que tem 5 classes. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes .ch-desistir {
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #aeb5c2;
  font-size: 10px;
  font-weight: 620;
}
@media (hover: hover) and (pointer: fine) {
  .robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes .ch-desistir:hover:not(:disabled) {
    background: var(--lines-hover, #2d3137);
    color: var(--lines-text, #eef0f3);
  }
}

/* A SETA DO LINK PARA DE SER VERMELHA DENTRO DO CARTÃO.
   `robo_telas.css:951` pinta `.abrir-chave .seta` com `var(--red)`, e no
   rodapé do cartão isso produzia um link com o texto cinza e a ponta vermelha
   — o olho ia para a seta, que é a parte que menos informa. No simulador o
   "Onde obter ↗" é de uma cor só. O vermelho da casa aponta ação principal e
   alerta; abrir a página de um provedor não é nenhum dos dois.
   Vale só aqui: em outras telas a seta vermelha é escolha daquelas telas. */
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape .abrir-chave .seta { color: inherit; }

/* ========================================================================== */
/* Custos — réplica do acabamento aprovado no simulador, sobre dados reais.   */
/* ========================================================================== */

.robo-raiz.robo-sim-root[data-robo-view="custos"] {
  --cost-panel: #141619;
  --cost-panel-soft: #111318;
  --cost-line: #2b2f37;
  --cost-line-strong: #383d47;
  --cost-muted: #929aa7;
  --cost-red: #ff3434;
  position: relative;
  container: costs-page / inline-size;
  overflow-x: clip;
}

.robo-raiz.robo-sim-root[data-robo-view="custos"] .rl-config-header {
  min-height: 88px;
  padding-bottom: 19px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .rl-config-header h1 {
  font-size: clamp(30px, 2.4vw, 36px);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .rl-config-header p,
.robo-raiz.robo-sim-root[data-robo-view="custos"] > .sub:first-of-type {
  max-width: 76ch;
  color: #a1a8b3;
  font-size: 12px;
  line-height: 1.55;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] > .sub:first-of-type {
  margin: 0 0 18px;
}

/* Período e legenda ocupam uma única faixa leve; não são outro cartão. */
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo {
  margin: -3px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  border: 0;
  background: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo-topo {
  width: 192px;
  min-width: 192px;
  display: grid;
  align-items: initial;
  gap: 7px;
  position: absolute;
  top: 18px;
  right: 28px;
  z-index: 1;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo-topo .custos-rot {
  color: var(--cost-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo-topo select {
  width: 100%;
  min-height: 39px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--cost-line-strong);
  border-radius: 6px;
  background-color: #15181d;
  color: #eef0f3;
  font: inherit;
  font-size: 12px;
  cursor: default;
  opacity: 1;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familias {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #8b93a0;
  box-shadow: 0 0 0 3px rgba(139, 147, 160, .08);
  content: "";
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia:nth-child(1)::before {
  background: #ff4a4a;
  box-shadow: 0 0 0 3px rgba(255, 52, 52, .1);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia:nth-child(2)::before {
  background: #a98bff;
  box-shadow: 0 0 0 3px rgba(169, 139, 255, .1);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia:nth-child(3)::before {
  background: #58c99b;
  box-shadow: 0 0 0 3px rgba(88, 201, 155, .1);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familia .custos-rot {
  color: #b2b8c1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-pilhas { display: none; }

/* Quatro leituras alinhadas e com a mesma hierarquia do simulador. */
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics {
  margin: 0 0 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics > .custos-metrica {
  min-height: 106px;
  padding: 17px 18px;
  justify-content: center;
  border: 1px solid var(--cost-line);
  border-radius: 6px;
  background: var(--cost-panel);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics > .custos-metrica:nth-child(3) {
  border-color: rgba(255, 52, 52, .26);
  background: linear-gradient(110deg, rgba(255, 52, 52, .055), transparent 50%), var(--cost-panel);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics .rb-rot {
  color: #9aa2ae;
  font-family: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics .rb-val {
  margin: 7px 0 4px;
  color: #f5f6f8;
  font-size: 22px;
  font-weight: 720;
  letter-spacing: -.025em;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics .rb-val.sembase {
  font-size: 18px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics .dica {
  margin: 0;
  color: #8d95a1;
  font-size: 10px;
  line-height: 1.4;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-metricas-erro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-efetivo { display: none; }

.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-grupo {
  margin: 28px 0 13px;
  padding: 0;
  border: 0;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-grupo h2 {
  margin: 0;
  color: #f1f3f6;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.015em;
  text-transform: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-grupo .sub {
  margin-top: 4px;
  color: var(--cost-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Planos: dois cartões baixos, com os números editáveis e o cálculo junto. */
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plans-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card {
  min-width: 0;
  padding: 18px;
  gap: 0;
  border: 1px solid var(--cost-line);
  border-radius: 6px;
  background: var(--cost-panel);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card > .dica:empty {
  display: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card.falta {
  border-color: rgba(243, 191, 107, .34);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider {
  margin-bottom: 15px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider .rl-cost-logo {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider .rl-cost-plan-name b {
  font-size: 13px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider .rl-cost-plan-name small {
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card .chip {
  min-height: 23px;
  padding-inline: 8px;
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-plano-campos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card .campo-ajuste label {
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-card .campo-ajuste input {
  min-height: 38px;
  padding-inline: 11px;
  font-size: 12px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-derivado {
  min-height: 43px;
  margin: 13px 0 0;
  padding: 10px 11px;
  border: 1px solid #252932;
  border-radius: 5px;
  background: #0f1115;
  color: #949ca8;
  font-size: 10px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-derivado b {
  color: #e7e9ed;
  text-align: right;
}

/* Uma única explicação visual substitui a sequência de alertas abertos. */
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura {
  margin-top: 12px;
  padding: 17px 18px;
  border: 1px solid var(--cost-line);
  border-radius: 6px;
  background: var(--cost-panel);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura-titulo h2 {
  margin: 0 0 13px;
  color: #f0f2f5;
  font-size: 15px;
  font-weight: 680;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura li {
  min-width: 0;
  min-height: 74px;
  padding: 11px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid #252932;
  border-radius: 5px;
  background: #111318;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #3a414d;
  border-radius: 999px;
  color: #b7bec8;
  font-size: 10px;
  font-style: normal;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura-alerta i {
  border-color: rgba(255, 105, 88, .44);
  color: #ff8d80;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura-ok i {
  border-color: rgba(88, 201, 155, .42);
  color: #69d5a9;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura p {
  margin: 0;
  color: #9098a5;
  font-size: 10px;
  line-height: 1.5;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura strong {
  display: block;
  margin-bottom: 3px;
  color: #e7e9ed;
  font-size: 11px;
}

/* Tabelas em painéis com rolagem própria: a página nunca cresce por célula. */
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-table-card {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--cost-line);
  border-radius: 6px;
  background: var(--cost-panel-soft);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-video-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-table-card .custos-grupo {
  margin: 0;
  padding: 16px 17px 12px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-scroll-hint {
  display: none;
  padding: 0 17px 11px;
  color: var(--cost-muted);
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros {
  margin: 0;
  padding: 12px 17px;
  display: grid;
  grid-template-columns: 220px 150px;
  align-items: end;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros .campo-ajuste label {
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros input,
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros select {
  min-height: 37px;
  font-size: 11px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros > .dica {
  display: none;
  margin: 0;
  grid-column: 1 / -1;
  color: #858d99;
  font-size: 10px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-table-scroll {
  grid-column: 1 / -1;
  max-width: 100%;
  max-height: 480px;
  margin: 0;
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--cost-line);
  border-radius: 0;
  background: #101216;
  scrollbar-gutter: stable;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-table-scroll:focus-visible {
  outline: 2px solid rgba(255, 52, 52, .72);
  outline-offset: -2px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table {
  width: 100%;
  min-width: 720px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table.wide { min-width: 1450px; }
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
  background: #17191e;
  color: #a0a8b4;
  font-size: 9px;
  line-height: 1.3;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table tbody td,
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table tbody td.custos-vazio {
  min-height: 0;
  padding: 10px 12px;
  color: #c4cad2;
  font-size: 10px;
  line-height: 1.35;
  vertical-align: middle;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table tbody td.custos-vazio {
  color: #747c88;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table tbody td b {
  color: #f1f3f6;
  font-size: 11px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-table tbody td .dica {
  margin-top: 3px;
  font-size: 9px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-provider-card .custos-table-scroll {
  max-height: 360px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-provider-card .vazio {
  min-height: 112px;
  border: 0;
  border-top: 1px solid var(--cost-line);
  border-radius: 0;
}

.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes {
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--cost-line);
  border-radius: 6px;
  background: var(--cost-panel-soft);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes summary {
  min-height: 42px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c9ced6;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes summary::-webkit-details-marker {
  display: none;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes summary::after {
  color: #8e96a3;
  content: "+";
  font-size: 15px;
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes[open] summary::after {
  content: "−";
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes[open] summary {
  border-bottom: 1px solid var(--cost-line);
}
.robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-medicao-detalhes > .aviso {
  margin: 10px 12px;
  min-height: 0;
  padding: 11px 12px;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-metricas-erro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo {
    align-items: stretch;
    flex-direction: column;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo-topo {
    width: min(100%, 260px);
    min-width: 0;
    position: static;
    order: 1;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familias {
    flex-wrap: wrap;
    order: 2;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .plans-grid {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-scroll-hint { display: block; }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-video-card { display: block; }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros > .dica {
    display: block;
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-metricas-erro,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura ul,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-plano-campos {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familias {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .plan-provider > .chip {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* A largura útil muda com trilho, zoom e janela. As consultas do próprio
   conteúdo evitam esperar o viewport ficar minúsculo para reorganizar a tela. */
@container costs-page (max-width: 1000px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-metricas-erro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container costs-page (max-width: 760px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .plans-grid {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-video-card {
    display: block;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-scroll-hint {
    display: block;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-filtros > .dica {
    display: block;
    grid-column: auto;
  }
}

@container costs-page (max-width: 620px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo {
    align-items: stretch;
    flex-direction: column;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-periodo-topo {
    width: min(100%, 260px);
    min-width: 0;
    position: static;
    order: 1;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familias {
    flex-wrap: wrap;
    order: 2;
  }
}

@container costs-page (max-width: 480px) {
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .cost-metrics,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-metricas-erro,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-leitura ul,
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-plano-campos {
    grid-template-columns: 1fr;
  }
  .robo-raiz.robo-sim-root[data-robo-view="custos"] .custos-familias {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* AJUSTES — TRILHOS DOS PROVEDORES
   Todos os cartões usam a mesma anatomia: identidade, estado, credencial,
   ação, explicação do limite e link externo. O conteúdo pode variar sem
   empurrar os controles para alturas diferentes. */
.robo-raiz.robo-sim-root .rl-provider-grid { align-items: stretch; }
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card {
  display: grid;
  grid-template-rows: 42px 28px minmax(46px, auto) minmax(35px, auto) 60px 35px;
  align-items: stretch;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-credencial {
  min-width: 0;
  min-height: 46px;
  display: grid;
  align-items: start;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-credencial > .chaves-linhas,
.robo-raiz.robo-sim-root .rl-provider-grid .ch-credencial > .ch-editor {
  min-width: 0;
  align-self: start;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor { display: block; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-acoes {
  min-width: 0;
  min-height: 35px;
  display: flex;
  align-items: start;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes[hidden] { display: none; }
.robo-raiz.robo-sim-root .rl-provider-grid .ch-suporte {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  overflow: hidden;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite {
  min-width: 0;
  height: 60px;
  padding-top: 7px;
  border-top: 1px solid #292d34;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite strong {
  display: block;
  color: #9ea6b2;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.25;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite p {
  margin: 3px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: #7f8895;
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape {
  min-width: 0;
  min-height: 35px;
  margin-top: 0;
  padding-top: 0;
  flex-wrap: nowrap;
}

/* AJUSTES — CONEXÕES DA CONTA
   HeyGen e YouTube têm fluxos diferentes no backend, mas compartilham a
   mesma moldura e respondem à largura do próprio cartão. */
.robo-raiz.robo-sim-root .rl-account-connections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.robo-raiz.robo-sim-root .rl-account-connection {
  container-type: inline-size;
  min-width: 0;
  min-height: 120px;
  padding: 16px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #2d3139;
  border-radius: 7px;
  background: #121419;
}
.robo-raiz.robo-sim-root .rl-account-connection.is-loading { opacity: .72; }
.robo-raiz.robo-sim-root .rl-account-brand {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #333842;
  border-radius: 10px;
  background: #f7f8fa;
}
.robo-raiz.robo-sim-root .rl-account-brand img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.robo-raiz.robo-sim-root .rl-account-brand.brand-youtube img { width: 80%; height: 80%; }
.robo-raiz.robo-sim-root .rl-account-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
}
.robo-raiz.robo-sim-root .rl-account-status {
  min-height: 25px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #3a3f48;
  border-radius: 999px;
  color: #aeb5c0;
  font-size: 10px;
  font-weight: 650;
}
.robo-raiz.robo-sim-root .rl-account-status i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: #7f8792;
}
.robo-raiz.robo-sim-root .rl-account-status.good {
  border-color: rgba(64,195,132,.28);
  background: rgba(64,195,132,.08);
  color: #66dca6;
}
.robo-raiz.robo-sim-root .rl-account-status.good i { background: #55d99d; }
.robo-raiz.robo-sim-root .rl-account-name {
  color: #f0f2f5;
  font-size: 12px;
  line-height: 1.25;
}
.robo-raiz.robo-sim-root .rl-account-copy p {
  max-width: 48ch;
  margin: 0;
  color: #9099a6;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.robo-raiz.robo-sim-root .rl-account-connection > .btn {
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

/* O YOUTUBE E O DRIVE DIVIDEM AS MESMAS REGRAS, e isso e' deliberado: sao o
   mesmo objeto de tela (marca + titulo + dica + acao) e a unica diferenca e'
   o numero de botoes. Escrever um bloco paralelo para o Drive deixaria os dois
   divergindo no primeiro ajuste -- o defeito que este projeto ja' pagou no
   guard de mundo (Python x JS) e no `worker_releases`. Uma regra, dois donos. */
.robo-raiz.robo-sim-root .rl-youtube-connection,
.robo-raiz.robo-sim-root .rl-drive-connection {
  grid-template-columns: 48px minmax(0, 1fr);
}
.robo-raiz.robo-sim-root .rl-youtube-state,
.robo-raiz.robo-sim-root .rl-drive-state { min-width: 0; }
.robo-raiz.robo-sim-root .rl-youtube-state > .identidade,
.robo-raiz.robo-sim-root .rl-drive-state > .identidade {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 14px;
}
.robo-raiz.robo-sim-root .rl-youtube-state .titulo,
.robo-raiz.robo-sim-root .rl-drive-state .titulo {
  grid-column: 1;
  grid-row: 1;
  color: #f0f2f5;
  font-size: 12px;
}
.robo-raiz.robo-sim-root .rl-youtube-state .dica,
.robo-raiz.robo-sim-root .rl-drive-state .dica {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}
.robo-raiz.robo-sim-root .rl-youtube-state .btn,
.robo-raiz.robo-sim-root .rl-drive-state > .identidade > .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 38px;
  white-space: nowrap;
}
/* ══ AS CONTAS DO YOUTUBE, NUM DISCLOSURE ═══════════════════════════════
   Dono, 2026-09-01: *"precisa ficar mais bonito tipo um botao q desce com
   contas conectadas"* e *"precisa falar qual conta esta conectada"*.

   O DISCLOSURE, e nao uma lista sempre aberta: quem tem UMA conta -- o caso
   de todo aluno hoje -- nao precisa de uma fileira de linhas embaixo do
   cartao, e a fileira de cartoes ao lado ficaria torta porque so' um cresce.
   Fechado, o gatilho e' uma linha; aberto, ele conta o que ha'.

   O BOTAO DE ADICIONAR NAO ENTRA AQUI DENTRO. E' a acao primaria do cartao e
   fica sempre alcancavel, na mesma celula de sempre -- esconder a acao atras
   de um clique e' o oposto do que um painel de Ajustes deve fazer. */
.robo-raiz.robo-sim-root .rl-yt-abre {
  /* COLUNA DO TEXTO, e nao a largura do cartao. Full-width jogava o estado
     ("em uso") a ~700px do e-mail, com um vao vazio no meio: o olho tem de
     atravessar o cartao inteiro para casar duas informacoes que sao a mesma
     linha. O botao de adicionar continua na coluna dele. */
  grid-column: 1;
  justify-self: start;
  margin-top: 7px;
  padding: 5px 9px 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #2d3139;
  border-radius: 999px;
  background: #171a20;
  color: #c8ced8;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s cubic-bezier(.2,.7,.3,1),
              background .18s cubic-bezier(.2,.7,.3,1),
              color .18s cubic-bezier(.2,.7,.3,1);
}
.robo-raiz.robo-sim-root .rl-yt-abre:hover {
  border-color: #3d434e;
  background: #1c2027;
  color: #eef1f5;
}
.robo-raiz.robo-sim-root .rl-yt-abre:focus-visible {
  outline: 2px solid #66dca6;
  outline-offset: 2px;
}
/* A SETA GIRA, e e' o unico movimento do cartao. Ela nasce apontando para
   baixo ("desce"), e sobe quando a lista abre -- o estado do controle fica
   legivel sem ler o rotulo. */
.robo-raiz.robo-sim-root .rl-yt-abre svg {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.robo-raiz.robo-sim-root .rl-yt-abre[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
/* `grid-template-rows: 0fr -> 1fr` anima ate' a altura REAL do conteudo. O
   `max-height` chutado e' o que faz lista curta abrir devagar e lista longa
   cortar no fim. */
.robo-raiz.robo-sim-root .rl-yt-gaveta {
  grid-column: 1;
  /* A MESMA MEDIDA DA DICA (`max-width: 48ch` no `.rl-account-copy p`) --
     duas medidas diferentes na mesma coluna leem como desalinhamento. */
  max-width: 46ch;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .24s cubic-bezier(.2,.7,.3,1);
}
.robo-raiz.robo-sim-root .rl-yt-gaveta.aberta { grid-template-rows: 1fr; }
/* `align-self: start` E `align-content: start` NAO SAO REDUNDANTES aqui, e sem
   os dois a lista fica com 58px por linha onde o conteudo mede 20: o primeiro
   impede a gaveta de ser esticada pela linha do grid do cartao (que cresce ate'
   o `min-height: 120px`), e o segundo impede a lista de distribuir a sobra
   entre as proprias linhas. Medido no navegador antes de escrever isto. */
.robo-raiz.robo-sim-root .rl-yt-gaveta { align-self: start; }
.robo-raiz.robo-sim-root .rl-yt-gaveta > div { overflow: hidden; }
.robo-raiz.robo-sim-root .rl-yt-lista {
  align-content: start;
  margin: 8px 0 2px;
  padding: 4px 0 0;
  display: grid;
  gap: 1px;
  border-top: 1px solid #23272e;
}
.robo-raiz.robo-sim-root .rl-yt-conta {
  padding: 6px 2px;
  display: grid;
  /* QUATRO COLUNAS PARA QUATRO FILHOS. Com tres, o botao de excluir caia numa
     SEGUNDA linha implicita e cada item media 58px onde o conteudo mede 20 --
     invisivel, porque ele so' aparece no hover. Achado medindo no navegador:
     `alturaSemFilhos: 12` provou que a sobra vinha do conteudo, nao de padding. */
  grid-template-columns: 7px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}
.robo-raiz.robo-sim-root .rl-yt-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a505b;
}
.robo-raiz.robo-sim-root .rl-yt-conta.ativa .rl-yt-ponto { background: #55d99d; }
.robo-raiz.robo-sim-root .rl-yt-quem {
  min-width: 0;
  color: #c8ced8;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root .rl-yt-conta.ativa .rl-yt-quem { color: #f0f2f5; }
.robo-raiz.robo-sim-root .rl-yt-estado {
  color: #87909c;
  font-size: 10px;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root .rl-yt-conta.ativa .rl-yt-estado { color: #66dca6; }
.robo-raiz.robo-sim-root .rl-yt-conta.dormindo .rl-yt-estado { color: #d8a657; }
/* O AVISO DA CONTA UNICA. Cor de ATENCAO, nao de erro: nada esta' quebrado --
   e' uma recomendacao, e pintar de vermelho o que funciona ensina o aluno a
   ignorar vermelho. E' o mesmo amarelo do estado "dormindo", que neste cartao
   ja' quer dizer "repare nisto". */
.robo-raiz.robo-sim-root .rl-yt-cuidado {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 2px solid #d8a657;
  background: rgba(216, 166, 87, 0.08);
  border-radius: 0 4px 4px 0;
  color: #c9d1d9;
  font-size: 11px;
  line-height: 1.5;
}
/* A MARCA SOBE PARA O TOPO NESTE CARTAO. Com a gaveta aberta o cartao cresce,
   e um logo centrado verticalmente descola do titulo que ele nomeia -- fica
   flutuando ao lado da lista de contas, que nao e' dele. */
.robo-raiz.robo-sim-root .rl-youtube-connection .rl-account-brand {
  align-self: start;
}

/* EXCLUIR APARECE NO HOVER DA LINHA, e nunca some do teclado: `opacity` a
   zero tiraria o alvo do foco visivel, e quem navega por Tab ficaria clicando
   num botao invisivel. Em telas de toque nao ha' hover, entao ele fica sempre
   visivel la' -- e' o que `hover: hover` separa. */
.robo-raiz.robo-sim-root .rl-yt-tira {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #6b7480;
  cursor: pointer;
  transition: color .15s ease-out, background .15s ease-out;
}
.robo-raiz.robo-sim-root .rl-yt-tira svg { width: 11px; height: 11px; }
.robo-raiz.robo-sim-root .rl-yt-tira:hover {
  background: rgba(226,90,90,.12);
  color: #e8756f;
}
.robo-raiz.robo-sim-root .rl-yt-tira:focus-visible {
  outline: 2px solid #e8756f;
  outline-offset: 1px;
}
.robo-raiz.robo-sim-root .rl-yt-tira[disabled] { opacity: .4; cursor: default; }
@media (hover: hover) {
  .robo-raiz.robo-sim-root .rl-yt-tira { opacity: 0; }
  .robo-raiz.robo-sim-root .rl-yt-conta:hover .rl-yt-tira,
  .robo-raiz.robo-sim-root .rl-yt-tira:focus-visible { opacity: 1; }
}
/* PEDIDO ENVIADO. Quem apaga e' o robo, no proximo claim -- a linha nao some
   na hora, entao ela fica visivelmente EM TRANSITO em vez de parecer que o
   clique nao pegou. */
.robo-raiz.robo-sim-root .rl-yt-conta.saindo {
  opacity: .42;
}
.robo-raiz.robo-sim-root .rl-yt-conta.saindo .rl-yt-quem {
  text-decoration: line-through;
}
.robo-raiz.robo-sim-root .rl-yt-conta.saindo .rl-yt-estado { color: #87909c; }

@media (prefers-reduced-motion: reduce) {
  .robo-raiz.robo-sim-root .rl-yt-tira,
  .robo-raiz.robo-sim-root .rl-yt-gaveta,
  .robo-raiz.robo-sim-root .rl-yt-abre,
  .robo-raiz.robo-sim-root .rl-yt-abre svg { transition: none; }
}

/* CONECTADO TEM DOIS BOTOES ("Trocar a conta" e "Desconectar"). Eles vao num
   invólucro que ocupa a MESMA celula do botao unico -- assim o cartao nao muda
   de altura nem de alinhamento entre um estado e outro, que e' o que faz a
   fileira inteira parecer torta quando so' um card mexe. */
.robo-raiz.robo-sim-root .rl-drive-state .acoes {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.robo-raiz.robo-sim-root .rl-drive-state .acoes .btn {
  min-height: 38px;
  white-space: nowrap;
}
/* A marca do Drive e' SVG embutido, nao um .png em `brands/`: sao tres formas
   chapadas, ela fica nitida em qualquer tela e nao acrescenta um arquivo que
   precisa ser publicado junto para o cartao nao nascer com um quadrado vazio
   -- que foi exatamente como ele nasceu. */
.robo-raiz.robo-sim-root .rl-account-brand.brand-drive svg {
  width: 62%;
  height: 62%;
}
/* O e-mail conectado pode ser longo e NAO pode empurrar o botao para fora. */
.robo-raiz.robo-sim-root .rl-drive-state .dica { overflow-wrap: anywhere; }
/* O link da pasta vive DENTRO da linha do e-mail. `white-space: nowrap` para
   ele nao quebrar no meio ("abrir a / pasta"), que numa coluna estreita e' o
   que mais acontece. */
.robo-raiz.robo-sim-root .rl-drive-state .rl-drive-pasta {
  color: #8ab4f8;
  white-space: nowrap;
  text-decoration: none;
}
.robo-raiz.robo-sim-root .rl-drive-state .rl-drive-pasta:hover {
  text-decoration: underline;
}

/* Fontes reais e o interruptor de cortes mantêm alvos grandes e claros. */
.robo-raiz.robo-sim-root .ajustes-grid .opcoes-caixa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.robo-raiz.robo-sim-root .ajustes-grid .rl-source-option {
  min-height: 34px;
  padding: 7px 10px;
  gap: 7px;
  border: 1px solid #343943;
  border-radius: 7px;
  background: #11141a;
  color: #aeb6c2;
  font-size: 10px;
}
.robo-raiz.robo-sim-root .ajustes-grid .rl-source-option:has(input:checked) {
  border-color: rgba(255,69,69,.45);
  color: #f2f4f7;
}
.robo-raiz.robo-sim-root .ajustes-grid .rl-source-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #ef3d32;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: start;
  align-items: center;
  column-gap: 18px;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado > label { grid-column: 1; grid-row: 1; }
.robo-raiz.robo-sim-root .campo-youtube_ligado > .dica { grid-column: 1; grid-row: 2; }
.robo-raiz.robo-sim-root .campo-youtube_ligado > .rl-toggle { grid-column: 2; grid-row: 1 / span 2; }
.robo-raiz.robo-sim-root .rl-toggle { position: relative; display: inline-flex; cursor: pointer; }
.robo-raiz.robo-sim-root .rl-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.robo-raiz.robo-sim-root .rl-toggle-track {
  width: 38px;
  height: 22px;
  padding: 3px;
  display: flex;
  align-items: center;
  border: 1px solid #3a3f48;
  border-radius: 999px;
  background: #252932;
  transition: border-color .18s ease, background .18s ease;
}
.robo-raiz.robo-sim-root .rl-toggle-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #a4abb5;
  transition: transform .18s cubic-bezier(.22,1,.36,1), background .18s ease;
}
.robo-raiz.robo-sim-root .rl-toggle input:checked + .rl-toggle-track {
  border-color: rgba(239,61,50,.72);
  background: rgba(239,61,50,.62);
}
.robo-raiz.robo-sim-root .rl-toggle input:checked + .rl-toggle-track .rl-toggle-thumb {
  transform: translateX(16px);
  background: #ffe7e5;
}
.robo-raiz.robo-sim-root .rl-toggle input:focus-visible + .rl-toggle-track {
  outline: 2px solid #ff5a51;
  outline-offset: 3px;
}

@container (max-width: 400px) {
  .robo-raiz.robo-sim-root .rl-account-connection > .btn,
  .robo-raiz.robo-sim-root .rl-youtube-state .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .robo-raiz.robo-sim-root .rl-youtube-state > .identidade { grid-template-columns: minmax(0, 1fr); }
  .robo-raiz.robo-sim-root .rl-youtube-state .titulo,
  .robo-raiz.robo-sim-root .rl-youtube-state .dica,
  .robo-raiz.robo-sim-root .rl-youtube-state .btn {
    grid-column: 1;
    grid-row: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .robo-raiz.robo-sim-root .rl-youtube-state .btn {
    min-height: 44px;
    padding-block: 8px;
    white-space: normal;
  }
}

@media (max-width: 620px) {
  .robo-raiz.robo-sim-root .rl-account-connection {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }
  .robo-raiz.robo-sim-root .rl-account-brand { width: 44px; height: 44px; }
  .robo-raiz.robo-sim-root .rl-youtube-connection { grid-template-columns: 44px minmax(0, 1fr); }
}

/* AJUSTES — ESCALA LEGÍVEL DOS PROVEDORES
   Cada cartão precisa acomodar logo, nome e selo sem sobreposição. O piso de
   280px considera a área que sobra depois da lateral, não a janela inteira;
   na bancada de até 1376px cabem no máximo quatro colunas. */
.robo-raiz.robo-sim-root .rl-provider-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-card {
  min-height: 372px;
  container: rl-provider / inline-size;
  padding: 18px;
  grid-template-rows: minmax(46px, auto) 32px minmax(50px, auto) minmax(39px, auto) 82px 39px;
  gap: 11px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-topo {
  min-height: 46px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-logo,
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-fallback {
  width: 46px;
  height: 46px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-identidade .ch-nome {
  font-size: 13px;
  line-height: 1.25;
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-kind {
  min-height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #343943;
  border-radius: 999px;
  background: #101217;
  color: #a5adb9;
  font-size: 9px;
  letter-spacing: .07em;
}
.robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-kind.obrigatoria {
  border-color: rgba(255, 75, 68, .38);
  background: rgba(255, 55, 48, .08);
  color: #ff8e88;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-estado {
  min-height: 32px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-estado .chip {
  min-height: 29px;
  padding: 6px 10px;
  font-size: 10px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-pool,
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha code,
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha .peq4 {
  font-size: 10px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-credencial {
  min-height: 50px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .chave-linha,
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor > input {
  min-height: 38px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 11px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-acoes {
  min-height: 39px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-revelar,
.robo-raiz.robo-sim-root .rl-provider-grid .ch-editor-acoes .btn:not(.ch-desistir) {
  min-height: 38px;
  padding-right: 12px;
  padding-left: 12px;
  font-size: 11px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite {
  height: 82px;
  padding-top: 10px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite strong {
  font-size: 10px;
  line-height: 1.3;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-limite p {
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.45;
  -webkit-line-clamp: 4;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape,
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape .abrir-chave {
  min-height: 39px;
}
.robo-raiz.robo-sim-root .rl-provider-grid .ch-rodape .abrir-chave {
  font-size: 11px;
}

@container rl-provider (max-width: 240px) {
  .robo-raiz.robo-sim-root .rl-provider-grid .ch-topo {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .robo-raiz.robo-sim-root .rl-provider-grid .rl-provider-kind {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .robo-raiz.robo-sim-root .rl-provider-grid .chave-card { min-height: 0; }
}

/* AJUSTES — FORMULÁRIO DO MOTOR
   Cada campo precisa continuar inteiro: rótulo, controle e ajuda ocupam a
   mesma coluna. Duas colunas reproduzem a organização aprovada e impedem que
   selects, selos e o interruptor sejam espremidos num mosaico de quatro. */
.robo-raiz.robo-sim-root .ajustes-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 26px;
  padding: 24px;
}
.robo-raiz.robo-sim-root .ajustes-grid > .campo-ajuste {
  min-width: 0;
  align-self: start;
}
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste > label {
  min-width: 0;
  min-height: 22px;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 5px;
  line-height: 1.4;
}
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste > label .no-padrao {
  min-height: 22px;
  padding: 2px 8px;
  flex: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste input,
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste select {
  min-width: 0;
  min-height: 50px;
  font-size: 14px;
}
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste select {
  padding-right: 38px;
}
.robo-raiz.robo-sim-root .ajustes-grid .campo-ajuste .dica {
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.55;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado > label,
.robo-raiz.robo-sim-root .campo-youtube_ligado > .dica,
.robo-raiz.robo-sim-root .campo-youtube_ligado > .rl-toggle {
  grid-column: auto;
  grid-row: auto;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado > .rl-toggle {
  min-height: 34px;
  margin-top: 3px;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
}
.robo-raiz.robo-sim-root .campo-youtube_ligado .rl-toggle-state {
  color: #c7cdd6;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}
.robo-raiz.robo-sim-root .ajustes-grid .opcoes-caixa {
  align-content: flex-start;
}

@media (max-width: 1180px) {
  .robo-raiz.robo-sim-root .ajustes-grid {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}