/* Dotti Studio — a lei visual.
 *
 * A paleta e' a do YouTube, que e' onde o aluno passa o dia: as superficies do
 * escuro (#0F0F0F -> #181818 -> #212121), o vermelho da marca, e o azul de link.
 * Duas regras que nasceram de medicao, nao de gosto:
 *   - #FF0000 so' em traco e icone. Texto branco sobre vermelho puro da' 4,0:1,
 *     abaixo do minimo legivel; o que e' preenchido com texto usa #CC0000.
 *   - marca e estado sao coisas diferentes. Se "acento" e "erro" forem a mesma
 *     cor, "acesso cortado" fica igual a "botao principal".
 */

/* A ESCALA DO TEXTO, num botão só.
 *
 * Todo tamanho de texto virou `rem`, então esta linha controla a tela inteira.
 * Antes eram 97 valores em `px` espalhados: mexer na escala significava editar
 * 97 lugares — ou, na prática, não mexer.
 *
 * 17.5px porque o dono disse que "parece tudo muito pequeno, não dá para
 * enxergar direito". A base era 15px e os rótulos em mono chegavam a **8,5px**,
 * menor que letra miúda de contrato. Além da escala, nenhum texto fica abaixo
 * de 11,5px equivalentes: 32 regras estavam abaixo disso e subiram ao piso,
 * porque escalar proporcionalmente manteria o minúsculo minúsculo.
 *
 * Para ajustar depois é esta linha, e só ela. */
html { font-size: 17.5px; }

:root {
  --void:   #0f0f0f;
  --sup:    #181818;
  --sup2:   #212121;
  --sup3:   #2a2a2a;
  --linha:  #303030;
  --linha2: #3f3f3f;
  --texto:  #f1f1f1;
  --texto2: #aaaaaa;
  --texto3: #717171;

  --marca:       #ff0000;
  --marca-2:     #cc0000;
  --marca-txt:   #ff5c52;
  --sobre-marca: #ffffff;
  --azul:        #3ea6ff;
  --ok:          #3ea55c;
  --amarelo:     #ffb300;
  --erro:        #ff4e45;

  --display: "Bahnschrift", "DIN Alternate", "Roboto Condensed", ui-sans-serif, system-ui, sans-serif;
  --corpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --r: 10px;

  /* A largura da coluna de leitura do feed, num lugar só.
     Ela aparecia em DOIS: `max-width: 720px` no `.feed` e `45rem` na coluna do
     grid. 45rem dá 787px, então sobravam 67px de vazio dentro da própria
     coluna — o mesmo defeito, em escala menor, do vazio de 629px entre o feed
     e as pessoas. Dois números para a mesma medida sempre divergem. */
  --col-leitura: 41rem;
  --col-pessoas: 23rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --void:   #f9f9f9;
    --sup:    #ffffff;
    --sup2:   #f2f2f2;
    --sup3:   #e8e8e8;
    --linha:  #e0e0e0;
    --linha2: #c9c9c9;
    --texto:  #0f0f0f;
    --texto2: #606060;
    --texto3: #909090;
    --marca:       #cc0000;
    --marca-2:     #a30000;
    --marca-txt:   #cc0000;
    --azul:        #065fd4;
    --ok:          #1e8e3e;
    --amarelo:     #946200;
    --erro:        #cc0000;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--void);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--azul); }

/* ---------------------------------------------------------------- porta -- */

.porta { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
@media (max-width: 900px) { .porta { grid-template-columns: 1fr; } .vitrine { display: none; } }

.vitrine {
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--marca) 14%, transparent), transparent 55%),
    radial-gradient(90% 80% at 88% 92%, color-mix(in srgb, var(--azul) 12%, transparent), transparent 55%),
    var(--sup2);
  border-right: 1px solid var(--linha);
  padding: 44px 42px; display: flex; flex-direction: column; gap: 28px;
  /* O conteúdo tem largura de LEITURA (15ch, 42ch, 46ch — e isso está certo,
   * linha longa demais cansa). O que estava errado era o resto: a coluna tem
   * ~775 px, o texto ocupava ~300 e ficava colado à esquerda, com um vazio à
   * direita do tamanho do próprio conteúdo. Centrar a coluna de leitura dentro
   * do painel resolve sem mexer na medida da linha. */
  justify-content: center; align-items: flex-start;
  position: relative; overflow: hidden;
}
.vitrine > * { width: 100%; max-width: 48ch; margin-inline: auto; }
.vitrine .grade {
  position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px),
                    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.vitrine > * { position: relative; }
.frase {
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08; letter-spacing: .01em; max-width: 15ch;
}
.frase b { color: var(--marca-txt); font-weight: inherit; }
.apoio { color: var(--texto2); max-width: 42ch; }

/* Era `margin: auto 0 0`, que empurrava a lista para o rodapé e abria ~350 px
 * de nada entre ela e o texto acima. Com o painel inteiro centrado (acima), os
 * três blocos ficam juntos e o vazio se distribui em cima e embaixo — que é
 * onde vazio não parece defeito. */
/* `margin-block-start`, não o atalho `margin`: o atalho zera também o
 * `margin-inline: auto` que centra a coluna, e a lista fugia para a borda
 * esquerda enquanto o resto ficava centrado. Vi isso na tela depois de trocar,
 * não no código. */
.oquetem { margin-block-start: 8px; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.oquetem li { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.oquetem .p { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .18em; text-transform: uppercase; color: var(--marca-txt); padding-top: 3px; }
.oquetem .d { font-size: 0.8438rem; color: var(--texto2); line-height: 1.45; }
@media (max-width: 1040px) { .oquetem li { grid-template-columns: 1fr; gap: 4px; } }

.formulario {
  padding: 44px 42px; display: flex; flex-direction: column; justify-content: center;
  gap: 20px; max-width: 460px; width: 100%; margin: 0 auto;
}
.formulario h1 { font-family: var(--display); font-size: 1.5625rem; letter-spacing: .01em; font-weight: 600; }
.dica { color: var(--texto3); font-size: 0.8125rem; }

/* ---------------------------------------------------------------- marca -- */

.marca { display: flex; align-items: center; gap: 10px; }
.marca .selo {
  width: 30px; height: 30px; border-radius: 8px; background: #0f0f0f;
  border: 1px solid var(--linha2); display: grid; place-items: center; flex: none;
}
.marca .nome { font-family: var(--display); font-size: 1.1875rem; letter-spacing: .02em; line-height: 1; }
.marca .nome span { display: block; font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .26em; color: var(--texto3); margin-top: 4px; }

/* ---------------------------------------------------------------- campos -- */

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto3); }
.campo input {
  background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 11px 13px; font-size: 0.875rem; width: 100%;
}
.campo input:focus { outline: none; border-color: var(--azul); background: var(--sup3); }
.campo .ajuda { font-size: 0.7188rem; color: var(--texto3); }

.linha-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.7812rem; flex-wrap: wrap; }
.link { background: none; border: none; padding: 0; color: var(--azul); cursor: pointer; font-size: 0.7812rem; text-decoration: underline; text-underline-offset: 2px; }
.divisor { display: flex; align-items: center; gap: 12px; color: var(--texto3); font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .16em; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.btn {
  border: 1px solid var(--linha2); background: var(--sup2); color: var(--texto);
  padding: 11px 14px; border-radius: 8px; font-size: 0.875rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.btn:hover:not(:disabled) { background: var(--sup3); }
.btn.pri { background: var(--marca-2); border-color: var(--marca-2); color: var(--sobre-marca); font-weight: 650; }
.btn.pri:hover:not(:disabled) { background: var(--marca); border-color: var(--marca); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn:focus-visible, .link:focus-visible, input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------------------------------------------------------------- avisos -- */

.aviso {
  border: 1px solid var(--linha); border-left: 3px solid var(--azul);
  background: var(--sup2); border-radius: 8px; padding: 11px 13px;
  font-size: 0.7812rem; color: var(--texto2);
}
.aviso b { color: var(--texto); }
.aviso.erro   { border-left-color: var(--erro); }
.aviso.ok     { border-left-color: var(--ok); }
.aviso.espera { border-left-color: var(--amarelo); }

/* ------------------------------------------------------------- aguardando -- */

.centro { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.cartao {
  background: var(--sup); border: 1px solid var(--linha); border-radius: 14px;
  padding: 32px; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 18px;
}
.cartao h1 { font-family: var(--display); font-size: 1.6875rem; font-weight: 600; letter-spacing: .01em; }
.cartao p { color: var(--texto2); font-size: 0.9062rem; }
.selo-estado {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor;
}
.selo-estado .pt { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.selo-estado.espera { color: var(--amarelo); }
.selo-estado.cortado { color: var(--erro); }
.passos { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linha); padding-top: 16px; }
.passo { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 0.8438rem; color: var(--texto2); }
.passo .n { font-family: var(--mono); font-size: 0.7188rem; color: var(--marca-txt); padding-top: 2px; }

/* ------------------------------------------------------------ casca do app -- */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .lateral { display: none; } }

.lateral {
  background: var(--sup2); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
}
.lateral .marca { padding: 4px 8px 18px; }
.grupo { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .18em; text-transform: uppercase; color: var(--texto3); padding: 14px 10px 6px; }
.item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px;
  color: var(--texto2); cursor: pointer; border: none; background: transparent; width: 100%;
  text-align: left; font-size: 0.8438rem; position: relative;
}
.item:hover { background: var(--sup3); color: var(--texto); }
.item.on { background: var(--sup3); color: var(--texto); font-weight: 600; }
.item.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--marca); border-radius: 0 3px 3px 0; }
.item .ic { width: 16px; flex: none; color: var(--texto3); }
.item.on .ic { color: var(--marca); }
.item .n { margin-left: auto; font-family: var(--mono); font-size: 0.7188rem; background: var(--marca-2); color: var(--sobre-marca); border-radius: 999px; padding: 0 6px; font-weight: 700; }
.item .tag { margin-left: auto; font-family: var(--mono); font-size: 0.7188rem; padding: 1px 5px; border-radius: 4px; background: var(--sup); border: 1px solid var(--linha2); color: var(--texto3); }
.lateral .rodape { margin-top: auto; border-top: 1px solid var(--linha); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.plano-card { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; }
.plano-card .l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plano-card .nomeplano { font-family: var(--display); font-size: 0.875rem; letter-spacing: .02em; }
.plano-card .prazo { font-size: 0.7188rem; color: var(--texto3); }

.topo {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  border-bottom: 1px solid var(--linha); background: var(--sup); position: sticky; top: 0; z-index: 5;
}
.busca { flex: 1; max-width: 520px; position: relative; }
.busca input { width: 100%; background: var(--sup2); border: 1px solid var(--linha); border-radius: 999px; padding: 9px 16px; font-size: 0.8438rem; }
.busca input:focus { outline: none; border-color: var(--linha2); background: var(--sup3); }
.topo .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--sup3); border: 1px solid var(--linha2); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; color: inherit; cursor: pointer; }
.avatar:hover { border-color: var(--texto3); }

/* UMA LARGURA DE LEITURA PARA A TELA INTEIRA.
   Sem teto, o conteudo virava 2060px num monitor de 2311: os tiles ficavam com
   500px cada, o ranking (que tinha teto proprio de 66rem) parecia um bloco
   solto no meio da pagina, e a grade de canais esparramava. Tres larguras
   diferentes empilhadas — foi isso que o dono chamou de feio, e ele estava
   certo. Uma medida so', centrada, e os tres blocos passam a comecar e
   terminar no mesmo lugar.
   96rem (~1680px) e' o menor valor em que a grade de canais ainda faz 3
   colunas e a tabela do ranking respira: medido, nao estimado. */
.conteudo { padding: 22px 24px 60px; display: flex; flex-direction: column; gap: 22px; background: var(--void); }
.conteudo > * { width: 100%; max-width: 96rem; margin-inline: auto; }
.cabeca { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.cabeca h1 { font-family: var(--display); font-size: 1.6875rem; font-weight: 600; letter-spacing: .01em; }
.cabeca .sub { color: var(--texto3); font-size: 0.8125rem; margin-top: 3px; }
.cabeca .acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.tile { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; }
.tile .rot { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto3); }
.tile .val { font-family: var(--display); font-size: 1.875rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .pe { font-size: 0.7188rem; color: var(--texto3); }

.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r); background: var(--sup); }
table { border-collapse: collapse; width: 100%; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto3); background: var(--sup2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--sup2); }
td .peq { display: block; font-size: 0.7188rem; color: var(--texto3); }

.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7188rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linha2); color: var(--texto2); background: var(--sup2); }
.chip .pt { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.chip.espera { color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 45%, transparent); }
.chip.mau { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); }

.btn.pequeno { padding: 5px 10px; font-size: 0.75rem; border-radius: 7px; }
.btn.sec { background: var(--sup2); border-color: var(--linha2); color: var(--texto2); }
.btn.sec:hover:not(:disabled) { background: var(--sup3); color: var(--texto); }
.btn.perigo { border-color: color-mix(in srgb, var(--erro) 45%, transparent); color: var(--erro); background: transparent; }
select.sel { background: var(--sup2); border: 1px solid var(--linha); border-radius: 7px; padding: 5px 8px; font-size: 0.7812rem; }
.vazio { border: 1px dashed var(--linha2); border-radius: var(--r); padding: 22px; text-align: center; color: var(--texto3); font-size: 0.8438rem; }
.papeis-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pchip { font-family: var(--mono); font-size: 0.7188rem; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--linha2); color: var(--texto3); cursor: pointer; background: transparent; }
.pchip.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* ------------------------------------------------------------ chaves de api -- */

.chaves-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 13px; }
.chave-card {
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 15px; display: flex; flex-direction: column; gap: 10px;
}
.chave-card.ok    { border-left: 3px solid var(--ok); }
.chave-card.ruim  { border-left: 3px solid var(--erro); }
.chave-card.vazia { border-left: 3px solid var(--linha2); }
.ch-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ch-nome { font-family: var(--display); font-size: 1.125rem; letter-spacing: .02em; display: flex; align-items: baseline; gap: 8px; }
.ch-topo .chip { margin-left: auto; }
.peq4 { font-family: var(--mono); font-size: 0.7188rem; color: var(--texto3); }
.chave-card input {
  background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 9px 12px; font-family: var(--mono); font-size: 0.7812rem; width: 100%;
}
.chave-card input:focus { outline: none; border-color: var(--azul); }

/* --------------------------------------------------------------- vagas -- */
/* As duas vagas de máquina do robô. Grade de QUANTIDADE, então `auto-fill`:
   a regra da casa é não cravar contagem — se um dia o plano tiver três, a
   tela acompanha sem alterar CSS. */
.vagas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 13px; align-items: start; }
.vaga-card { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.vaga-topo { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.vaga-num {
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--linha2); border-radius: 8px;
  color: var(--texto3); font-family: var(--mono); font-size: 0.8125rem;
}
.vaga-topo b { font-size: 0.9062rem; }
.vaga-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* O código aparece UMA vez: campo largo e selecionável de propósito, porque
   a alternativa é a pessoa transcrever 40 caracteres à mão. */
.codigo-linha { display: flex; gap: 8px; margin-top: 9px; }
.codigo-novo {
  flex: 1; min-width: 0;
  background: var(--sup); border: 1px solid var(--linha2); border-radius: 8px;
  padding: 8px 10px; color: var(--texto);
  font-family: var(--mono); font-size: 0.7812rem;
}

/* -------------------------------------------------------------- canais -- */
/* Grade de QUANTIDADE usa auto-fill, nunca contagem fixa: com 2 canais num
   monitor largo, `repeat(3, …)` deixa um terco da tela vazio de proposito. */
/* O mínimo estava em `px` e não acompanhou o texto, que ficou 17% maior — o
 * cartão apertava o conteúdo. Em `rem` ele cresce junto. `align-items: start`
 * para um cartão alto não esticar os vizinhos. */

.add-canal { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.add-canal .linha3 { display: grid; grid-template-columns: 2fr 1.2fr 1fr; gap: 8px; }
@media (max-width: 780px) { .add-canal .linha3 { grid-template-columns: 1fr; } }
.add-canal input { background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 12px; font-size: 0.8438rem; width: 100%; }
.add-canal input:focus { outline: none; border-color: var(--azul); }

.previa { display: flex; align-items: center; gap: 11px; background: var(--sup2); border: 1px solid var(--linha); border-left: 3px solid var(--ok); border-radius: 8px; padding: 9px 12px; }
.previa img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; }
.previa .nome { font-family: var(--display); font-size: 1.0rem; letter-spacing: .02em; }
.semfoto { display: grid; place-items: center; background: var(--sup3); color: var(--texto3); }

/* Com tres acoes no cartao, o nome do canal virava "Roy St…". O nome e' o que a
   pessoa procura; quem cede espaco sao os botoes, descendo de linha. */

/* Era `repeat(4, 1fr)`, quatro colunas fixas. Com o texto maior os rótulos
 * ("VIEWS 30 D", "COMENT./MIL VIEWS") deixaram de caber e quebravam em duas
 * linhas, desalinhando os números. `auto-fit` com um mínimo deixa a grade
 * decidir quantas colunas cabem — 4 numa tela larga, 2 numa estreita, e o
 * rótulo nunca parte no meio. Grade de quantidade usa auto-fit, não contagem
 * fixa: a contagem certa depende da largura, que o CSS conhece e eu não. */

/* "Sem base" e' estado de primeira classe e tem de PARECER diferente de um
   numero — se fosse so' um traco, leria-se como zero. */
.sembase { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .06em; color: var(--amarelo); border: 1px dashed color-mix(in srgb, var(--amarelo) 45%, transparent); border-radius: 5px; padding: 1px 6px; align-self: flex-start; cursor: help; }

.vid { display: grid; grid-template-columns: 92px 1fr; gap: 10px; text-decoration: none; color: inherit; border-radius: 8px; padding: 3px; }
.vid:hover { background: var(--sup2); }
.vid .capa { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: var(--sup3); }
.vid .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid .dur { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.82); color: #fff; font-family: var(--mono); font-size: 0.7188rem; padding: 0 3px; border-radius: 3px; }
.vtxt { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.vt { font-size: 0.8125rem; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vm { font-size: 0.7188rem; color: var(--texto3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- feed -- */
/* Coluna estreita de proposito: linha longa demais cansa a leitura, e feed e'
   texto corrido. 720px e' ~90 caracteres na fonte do corpo. */
.feed { display: flex; flex-direction: column; gap: 12px; max-width: var(--col-leitura); }
/* Dentro do feed de três colunas quem manda é a COLUNA, não o `.feed`. Dois
   tetos para a mesma coisa é o defeito que já custou 67px de vazio aqui. */
.feed-duplo .feed { max-width: none; }
.escrever { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.esc-linha { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: start; }
.escrever textarea { background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; font-size: 0.875rem; width: 100%; resize: vertical; line-height: 1.5; }
.escrever textarea:focus { outline: none; border-color: var(--azul); }

.retrato { width: 38px; height: 38px; border-radius: 999px; background: var(--sup3); border: 1px solid var(--linha2); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; object-fit: cover; flex: none; color: var(--texto2); }
.retrato.peq { width: 28px; height: 28px; font-size: 0.7188rem; }

.post { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.post.fixado { border-color: color-mix(in srgb, var(--marca) 40%, var(--linha)); }
.p-topo { display: flex; align-items: center; gap: 11px; }
.p-quem { min-width: 0; flex: 1; }
.p-nome { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.p-quando { font-size: 0.7188rem; color: var(--texto3); }
.tirar { background: none; border: none; color: var(--texto3); cursor: pointer; font-size: 0.9375rem; padding: 2px 6px; border-radius: 6px; }
.tirar:hover { color: var(--erro); background: var(--sup2); }
.p-txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9062rem; line-height: 1.55; }
.p-img { max-width: 100%; border-radius: 8px; display: block; }

/* O selo NAO usa a cor da marca: marca e' o produto, selo e' autoridade. Se
   fossem a mesma cor, "Suporte" leria-se como enfeite do Dotti Studio. */
.selo-papel { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }
.selo-suporte   { color: var(--azul); }
.selo-professor { color: var(--amarelo); }
.selo-admin     { color: var(--ok); }

.p-acoes { display: flex; gap: 6px; border-top: 1px solid var(--linha); padding-top: 9px; }
.curtir { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--texto3); cursor: pointer; font-size: 0.7812rem; padding: 4px 9px; border-radius: 7px; }
.curtir:hover { background: var(--sup2); color: var(--texto); }
/* O coração aceso usa o vermelho da casa — a estrela amarela saiu junto com
   a metáfora de 'favoritar'. */
.curtir.on { color: var(--marca-txt); }
.curtir .ic { font-size: 0.875rem; line-height: 1; }

/* --- os comentários, abertos embaixo da publicação ------------------------ */
.bloco-cmts { border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.cmts { display: flex; flex-direction: column; gap: 12px; }
.cmts:empty { display: none; }
.cmt { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
/* A resposta anda para a direita UMA vez só. A thread é rasa de propósito —
   nível dentro de nível vira escada que some na margem do celular. */
.cmt-resposta { margin-inline-start: 30px; }
.cmt-corpo { min-width: 0; }
.cmt-topo { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.8125rem; }
.cmt-quando { font-size: 0.7188rem; color: var(--texto3); }
/* O coração fica na PONTA da linha do nome, como no Instagram: perto do que
   ele curte, longe do texto que se está lendo. */
.cmt-curtir { margin-inline-start: auto; background: none; border: 0; cursor: pointer; color: var(--texto3); font-size: 0.9375rem; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.cmt-curtir:hover { color: var(--texto); }
/* `--marca-txt` e não uma cor nova: o vermelho já é a cor da casa, e inventar
   um segundo vermelho só para o coração faria os dois brigarem no mesmo card.
   Ela existe nos dois temas (claro e escuro) — cor nova teria de nascer duas
   vezes ou ficaria ilegível em um deles. */
.cmt-curtir.on { color: var(--marca-txt); }
.cmt-para { font-size: 0.75rem; color: var(--azul); margin-block-start: 2px; }
.cmt-txt { font-size: 0.8438rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-block-start: 2px; }
.cmt-editado { font-size: 0.6875rem; color: var(--texto3); }
.cmt-editado:empty { display: none; }
.cmt-acoes { display: flex; align-items: center; gap: 12px; margin-block-start: 3px; }
.cmt-conta { font-size: 0.75rem; color: var(--texto3); }
.cmt-conta:empty { display: none; }
.cmt-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--texto3); }
.cmt-link:hover { color: var(--texto); text-decoration: underline; }
.cmt-alvo { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--azul); }
.linha-cmt { display: flex; gap: 8px; }
.linha-cmt input { flex: 1; background: var(--sup2); border: 1px solid var(--linha); border-radius: 999px; padding: 9px 15px; font-size: 0.8125rem; }
.linha-cmt input:focus { outline: none; border-color: var(--azul); }

/* --- a coluna das pessoas ------------------------------------------------- */
/* O FEED EM TRÊS COLUNAS, CENTRADO — as medidas são as do protótipo, copiadas
   e não estimadas: atalhos 240, publicações 660, gente 280, gap 18, teto 1240.
   `justify-content: center` é o que impede o defeito que o dono apontou: com a
   grade colada à esquerda, num monitor de 1984px sobrava um vazio enorme de um
   lado e a coluna de gente ia parar contra a borda.
   As laterais somem por ordem de importância — primeiro a da direita, depois a
   da esquerda. A do meio nunca sai: é o assunto. */
.feed-duplo { display: grid; grid-template-columns: 240px minmax(0, 660px) 280px;
  gap: 18px; align-items: start; justify-content: center; margin: 0 auto; max-width: 1240px; }
@media (max-width: 87.5rem) { .feed-duplo { grid-template-columns: 240px minmax(0, 660px); }
  .feed-duplo > .pessoas { display: none; } }
@media (max-width: 65.625rem) { .feed-duplo { grid-template-columns: minmax(0, 1fr); }
  .feed-duplo > .atalhos { display: none; } }
/* Padding curto nas colunas laterais. O `.cartao` usa 32px de cada lado — bom
   para um cartão de 660px, ruinoso num de 280: sobravam 150px para o nome e
   "Admin Master de Teste" (148px) cortava. Medido. */
.atalhos, .pessoas { position: sticky; top: 58px; padding: 14px; }

/* Os atalhos: o próprio perfil no topo, e os lugares para onde se vai daqui. */
.atalhos { padding: 10px; display: flex; flex-direction: column; gap: 1px; }
.pes-lista { margin-inline: -4px; }
.atalho { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; background: none; border: 0; color: inherit; text-align: start; width: 100%; }
.atalho:hover { background: var(--sup2); }
.atalho .ic { width: 22px; text-align: center; color: var(--texto3); font-size: 1rem; flex: none; }
.atalho b { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoas { position: sticky; top: 58px; display: flex; flex-direction: column; gap: 4px; }
.pes-titulo { font-weight: 700; font-size: 0.875rem; }
.pes-sub { font-size: 0.75rem; color: var(--texto3); margin-block-end: 6px; }
.pes-lista { display: flex; flex-direction: column; gap: 4px; }
/* Foto à esquerda; nome, estado e botão EMPILHADOS à direita — como no
   protótipo. Com os três na mesma linha o nome ficava com ~135px e cortava
   ("Admin Master de Tes"); empilhado ele recebe a largura inteira do cartão. */
.pes { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 9px; }
.pes:hover { background: var(--sup2); }
.pes-quem { flex: none; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.pes-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pes-nome { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-size: 0.8125rem; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; text-align: start; }
.pes-nome:hover { text-decoration: underline; }
.pes-estado { font-size: 0.6875rem; color: var(--texto3); }
.pes-botao { flex: none; border-radius: 7px; border: 1px solid var(--linha); padding: 5px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: var(--sup2); color: var(--texto); margin-block-start: 2px; }
.pes-botao:hover { border-color: var(--texto3); }
/* "Adicionar" e "Aceitar" CONVIDAM: botão cheio. "Solicitado" e "Amigos" são
   ESTADO — contorno, sem cor, para não competirem pelo olho. É a mesma divisão
   do protótipo (`primary` × `ghost`). */
.pes-botao.pri { background: var(--marca-2); border-color: var(--marca-2); color: var(--sobre-marca); }
.pes-botao.pri:hover { filter: brightness(1.12); }
/* "Solicitado" e "Amigos" são ESTADO, não convite: precisam ser legíveis e não
   podem competir com "Adicionar" pelo olho. */
.pes-botao.fraco { background: none; color: var(--texto3); }

/* ----------------------------------------------------------- bate-papo -- */
/* Altura fixa em vez de crescer com o conteudo: a rolagem tem de ser DENTRO da
   lista de mensagens. Deixar a pagina rolar faz a caixa de escrever fugir da
   tela justamente quando a pessoa vai responder. */
.chat { display: grid; grid-template-columns: 300px 1fr; gap: 12px; height: 520px; min-height: 420px; }  /* a altura real e' medida no chat.js */
@media (max-width: 900px) { .chat { grid-template-columns: 1fr; height: auto; } }

.ch-esq { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
.ch-busca { padding: 10px; border-bottom: 1px solid var(--linha); }
.ch-busca input { width: 100%; background: var(--sup2); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px; font-size: 0.8125rem; }
.ch-busca input:focus { outline: none; border-color: var(--azul); }
.ch-lista { overflow-y: auto; flex: 1; }

.ch-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--linha); padding: 10px 12px; cursor: pointer; }
.ch-item:hover { background: var(--sup2); }
.ch-item.on { background: var(--sup3); }
.ch-item.on::before { content: ""; position: absolute; }
.ch-txt { min-width: 0; flex: 1; }
.ch-l1 { display: flex; align-items: center; gap: 6px; font-size: 0.8438rem; }
.ch-l1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-quando { margin-left: auto; font-size: 0.7188rem; color: var(--texto3); flex: none; }
.ch-previa { font-size: 0.75rem; color: var(--texto3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bolinha { font-family: var(--mono); font-size: 0.7188rem; font-weight: 700; background: var(--marca-2); color: var(--sobre-marca); border-radius: 999px; padding: 0 6px; flex: none; }

.ch-palco { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
.ch-palco > .vazio { margin: auto; border: none; }
.conversa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cv-topo { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--linha); flex: none; }

.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 3px; min-height: 0; }

/* Separador de dia: uma etiqueta no meio da linha. Sem ele, conversa de
   semanas vira um bloco só e ninguém sabe quando cada coisa foi dita. */
.dia { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--texto3); font-size: 0.7188rem; }
.dia::before, .dia::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.dia span { background: var(--sup2); border: 1px solid var(--linha); border-radius: 999px; padding: 2px 10px; }

/* Agrupamento por autor: o retrato e o nome só na PRIMEIRA do bloco. Repetir
   os dois em cada linha transforma três frases seguidas em três cartões. */
.linha-msg { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: end; }
.linha-msg.minha { grid-template-columns: 1fr; justify-items: end; }
.linha-msg .vago { width: 28px; }
.linha-msg.minha .vago { display: none; }
.quem { font-size: 0.7188rem; color: var(--texto2); margin: 6px 0 2px; }
.bolha { max-width: 100%; width: fit-content; background: var(--sup2); border: 1px solid var(--linha); border-radius: 12px 12px 12px 4px; padding: 7px 12px; }
.bolha.minha { background: color-mix(in srgb, var(--azul) 16%, var(--sup2)); border-color: color-mix(in srgb, var(--azul) 30%, var(--linha)); border-radius: 12px 12px 4px 12px; margin-left: auto; }
.linha-msg > div:last-child { min-width: 0; max-width: 72%; }
.b-txt { font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.b-hora { font-size: 0.7188rem; color: var(--texto3); margin: 1px 3px 0; font-variant-numeric: tabular-nums; }
.linha-msg.minha .b-hora { text-align: right; }

/* A bolinha de presenca mora num involucro, nao no <img>: elemento vazio nao
   tem onde pendurar `::after`, entao um pseudo-elemento em <img> nao aparece. */
.com-ponto { position: relative; display: inline-flex; flex: none; }
.com-ponto::after { content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 999px; background: var(--texto3); border: 2px solid var(--sup); }
.com-ponto.on::after { background: var(--ok); }
.ch-previa.apagada { color: var(--texto3); font-style: italic; }

.cv-escrever { display: flex; gap: 8px; align-items: flex-end; padding: 11px 14px; border-top: 1px solid var(--linha); flex: none; }
.cv-escrever textarea { flex: 1; background: var(--sup2); border: 1px solid var(--linha); border-radius: 14px; padding: 9px 14px; font-size: 0.875rem; resize: none; line-height: 1.45; max-height: 140px; }
.cv-escrever textarea:focus { outline: none; border-color: var(--azul); }

/* ------------------------------------------------------------------ robo -- */
.baixar { background: var(--sup); border: 1px solid var(--linha); border-left: 3px solid var(--marca); border-radius: var(--r); padding: 15px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.baixar .btn { margin-left: auto; }
.bx-titulo { font-family: var(--display); font-size: 1.125rem; letter-spacing: .02em; }

/* ------------------------------------------------- titulos e miniaturas -- */
.guardados { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.guardado { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 12px; display: grid; grid-template-columns: 108px 1fr; gap: 12px; }
.guardado.usado { border-left: 3px solid var(--ok); }
.guardado:not(:has(.g-capa)) { grid-template-columns: 1fr; }
.g-capa { width: 108px; aspect-ratio: 16/9; object-fit: cover; border-radius: 7px; background: var(--sup3); }
.g-corpo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.g-texto { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.g-nota { font-size: 0.7812rem; color: var(--texto2); border-left: 2px solid var(--linha2); padding-left: 8px; }
.g-acoes { display: flex; gap: 4px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.g-acoes .tirar { margin-left: auto; }
.g-acoes a.curtir { text-decoration: none; }

/* O formato do titulo e' MEDIDO (numero na frente, palavras, caixa alta), entao
   os selos sao neutros: cor de estado aqui sugeriria "bom" e "ruim", e nada
   nesta tela sabe qual dos dois formatos funciona no canal da pessoa. */
.formato { display: flex; gap: 5px; flex-wrap: wrap; }
.selo-f { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--linha2); color: var(--texto2); }
.selo-f.lista { color: var(--azul); border-color: color-mix(in srgb, var(--azul) 40%, transparent); }
.selo-f.documentario { color: var(--texto2); }
.selo-f.apagado { border-color: transparent; color: var(--texto3); }

/* -------------------------------------------------------- miniaturas -- */
/* Grade a esquerda, previa GRANDE a direita e pegajosa: a pessoa passa os olhos
   pela grade e a previa acompanha sem rolar junto. E' a forma do produto
   anterior, e ela funciona porque miniatura se julga no TAMANHO em que aparece. */
.th-tela { display: grid; grid-template-columns: minmax(420px, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .th-tela { grid-template-columns: 1fr; } .th-lado { position: static !important; } }

.th-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; max-width: 760px; }
/* `display:flex` de uma CLASSE vence o `[hidden]` do navegador — regra de autor
   ganha da folha do agente. Sem esta linha a barra da aba "URL" aparece junto
   com a de busca, nas duas abas. Mesmo defeito que o banner de conexao ja' teve
   neste repo: elemento "escondido" que continua ocupando a tela. */
.th-linha[hidden] { display: none; }
/* `>` e nao descendente: o checkbox "so' em ascensao" mora DENTRO de um label
   nesta mesma linha, e a regra generica dava a ele `flex:1; min-width:240px` —
   uma caixinha de 13px esticada por 240px, com o texto longe do quadrado. */
.th-linha > input { flex: 1; min-width: 240px; background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 13px; font-size: 0.8438rem; }
.th-linha > input:focus { outline: none; border-color: var(--azul); }
.th-linha label { flex: none; white-space: nowrap; }
.th-linha input[type="checkbox"] { flex: none; min-width: 0; width: auto; accent-color: var(--marca); }

.vtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vtab { background: var(--sup2); border: 1px solid var(--linha); color: var(--texto2); border-radius: 999px; padding: 7px 14px; font-size: 0.8125rem; cursor: pointer; }
.vtab:hover { background: var(--sup3); color: var(--texto); }
.vtab.on { background: var(--sup3); color: var(--texto); border-color: var(--linha2); font-weight: 600; }

.th-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; align-content: start; }
.th-item { background: none; border: none; padding: 0; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: inherit; }
.th-item.guardada { cursor: default; }
.th-capa { position: relative; border-radius: 9px; overflow: hidden; background: var(--sup3); aspect-ratio: 16/9; }
.th-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-item:hover .th-capa { outline: 2px solid var(--marca); outline-offset: 1px; }
.th-capa .dur { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.82); color: #fff; font-family: var(--mono); font-size: 0.7188rem; padding: 1px 4px; border-radius: 4px; }
.th-marca { position: absolute; top: 5px; left: 5px; background: var(--ok); color: #fff; font-size: 0.7188rem; width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; }
.th-tirar { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.65); border-radius: 6px; }
.th-meta { min-width: 0; }
.th-t { font-size: 0.7812rem; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-v { font-size: 0.7188rem; color: var(--texto3); font-variant-numeric: tabular-nums; }

.th-lado { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px; position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
.th-lado-titulo { font-family: var(--display); font-size: 1.0625rem; letter-spacing: .02em; }
.th-previa { aspect-ratio: 16/9; border-radius: 9px; background: var(--sup2); border: 1px solid var(--linha); display: grid; place-items: center; overflow: hidden; }
.th-grande { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-lado a.btn { text-decoration: none; }

/* ------------------------------------------------- escolha do modelo de IA -- */
.modelo-escolha { display: flex; flex-direction: column; gap: 5px; }
.modelo-escolha > label { font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto3); }
.linha-modelo { display: flex; gap: 6px; align-items: center; }
.linha-modelo input { flex: 1; min-width: 0; }
.linha-modelo .btn { flex: none; }

/* --------------------------------------------------------------- formula -- */
.formula { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 12px 14px; max-width: 900px; }
.formula > summary { cursor: pointer; font-weight: 650; font-size: 0.875rem; }
.formula-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.formula-grade label { display: block; font-family: var(--mono); font-size: 0.7188rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto3); margin-bottom: 3px; }
.formula-grade input { width: 100%; background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 11px; font-size: 0.8125rem; }
.formula-grade input:focus { outline: none; border-color: var(--azul); }

/* ---------------------------------------------------------------- perfil -- */
.perfil-cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.perfil-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.perfil-foto { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; background: var(--sup3); border: 1px solid var(--linha2); flex: none; display: grid; place-items: center; font-family: var(--display); font-size: 1.625rem; color: var(--texto2); }
.perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; }
.perfil-cartao textarea { background: var(--sup2); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 12px; font-size: 0.875rem; width: 100%; resize: vertical; line-height: 1.5; }
.perfil-cartao textarea:focus { outline: none; border-color: var(--azul); }

.esc-previa { position: relative; max-width: 320px; }
.esc-previa img { width: 100%; border-radius: 8px; display: block; }
.esc-previa .tirar { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,.7); border-radius: 6px; color: #fff; }

/* ------------------------------------------------- anexo no bate-papo -- */
.b-img { max-width: 260px; width: 100%; border-radius: 8px; display: block; margin-bottom: 4px; }
.b-audio { display: block; max-width: 260px; margin-bottom: 4px; }
.anexo-previa { position: relative; max-width: 220px; margin: 0 14px 8px; }
.anexo-previa img { width: 100%; border-radius: 8px; display: block; }
.anexo-previa.audio { max-width: 300px; }
.anexo-previa .tirar { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); border-radius: 6px; color: #fff; }
.cv-escrever .btn.pequeno { padding: 6px 9px; }

/* ----------------------------------------------------------- reacoes -- */
.reacoes { display: flex; gap: 4px; align-items: center; margin-top: 3px; position: relative; }
.reacao { background: var(--sup2); border: 1px solid var(--linha2); border-radius: 999px; padding: 1px 7px; font-size: 0.75rem; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.reacao.minha { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 16%, var(--sup2)); }
.reacao .n { font-size: 0.7188rem; color: var(--texto2); font-variant-numeric: tabular-nums; }
/* O botao de reagir so' aparece no hover da linha: seis emojis embaixo de cada
   mensagem poluiriam a conversa inteira. */
.reagir-abrir { background: none; border: none; color: var(--texto3); cursor: pointer; font-size: 0.8125rem; padding: 0 4px; opacity: 0; transition: opacity .12s; }
.linha-msg:hover .reagir-abrir { opacity: 1; }
.reagir-menu { position: absolute; bottom: 100%; left: 0; z-index: 3; display: flex; gap: 2px; background: var(--sup); border: 1px solid var(--linha2); border-radius: 999px; padding: 3px 5px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.reagir-menu[hidden] { display: none; }
.reagir-op { background: none; border: none; font-size: 1.0rem; cursor: pointer; padding: 2px 3px; border-radius: 6px; }
.reagir-op:hover { background: var(--sup3); }
.reagir-op.on { background: color-mix(in srgb, var(--azul) 22%, transparent); }

/* --- a barra de Mensagens, flutuando no canto ----------------------------- */
/* Ela vive colada no `<body>`, por cima de qualquer tela. `position: fixed` e
   não `sticky`: a conversa não pode rolar junto com o que está atrás dela. */
#dock { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dk-bolha { display: flex; align-items: center; gap: 10px; background: var(--sup); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 14px 8px 16px; cursor: pointer; color: var(--texto); box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: 0.875rem; font-weight: 600; }
.dk-bolha:hover, .dk-bolha.on { border-color: var(--linha2); background: var(--sup2); }
.dk-ico { position: relative; display: flex; font-size: 1rem; line-height: 1; }
/* O número só existe quando é maior que zero — badge com "0" é ruído fixo. */
.dk-n { display: none; position: absolute; top: -8px; right: -10px; background: var(--marca); color: var(--sobre-marca); border-radius: 999px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.625rem; font-weight: 700; align-items: center; justify-content: center; }
.dk-n.tem { display: flex; }
.dk-caras { display: flex; }
.dk-cara { width: 26px; height: 26px; border-radius: 999px; margin-inline-start: -8px; border: 2px solid var(--sup); object-fit: cover; background: var(--sup3); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; }
.dk-cara:first-child { margin-inline-start: 0; }
.dk-mais { color: var(--texto3); letter-spacing: 1px; }
/* Na tela estreita sobra só o ícone: a barra não pode comer a largura do que
   está por baixo dela. */
@media (max-width: 40rem) { .dk-txt, .dk-caras, .dk-mais { display: none; } .dk-bolha { padding: 11px; } }

/* `display: flex` numa regra de classe VENCE o `[hidden] { display: none }`
   que o navegador aplica — então o painel nascia visível e vazio, um retângulo
   preto no canto da tela em toda visita. O atributo estava lá e o JS o
   respeitava; quem mentia era o CSS. Vale para qualquer elemento que se
   esconda por `hidden` e ganhe `display` numa classe. */
.dk-painel[hidden] { display: none; }
.dk-painel { width: min(23rem, calc(100vw - 36px)); height: min(30rem, calc(100vh - 120px)); background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: 0 12px 40px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
.dk-topo { display: flex; align-items: center; gap: 4px; padding: 9px 8px 9px 14px; border-bottom: 1px solid var(--linha); }
.dk-titulo { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-x { background: none; border: 0; color: var(--texto3); cursor: pointer; font-size: 0.9375rem; padding: 4px 7px; border-radius: 7px; }
.dk-x:hover { background: var(--sup2); color: var(--texto); }
.dk-lista { flex: 1; overflow-y: auto; }
.dk-item { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--linha); padding: 10px 13px; cursor: pointer; text-align: start; color: inherit; }
.dk-item:hover { background: var(--sup2); }
.dk-txt2 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-nome { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-previa { font-size: 0.75rem; color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O painel de conversa é o MESMO da tela cheia. Aqui ele só recebe a altura
   que sobrou — sem isso ele cresce e empurra a caixa de escrever para fora. */
.dk-conversa { flex: 1; min-height: 0; display: flex; }
.dk-conversa > * { flex: 1; min-height: 0; height: auto; }

/* --- o perfil de alguém --------------------------------------------------- */
/* Um botão que não parece botão: o alvo de clique precisa existir para o
   teclado e para o leitor de tela, mas o nome tem de continuar sendo texto. */
.so-alvo { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: start; display: inline-flex; }
.nome-link { font-weight: 700; }
.nome-link:hover { text-decoration: underline; }

/* A MESMA largura de leitura do `.feed` (720px), não o teto de 520 do
   `.cartao`. Com dois valores diferentes o cabeçalho do perfil ficava mais
   estreito que as publicações logo abaixo dele, e a coluna parecia quebrada no
   meio. Uma tela, uma largura. */
.pf-topo { padding: 0; overflow: hidden; max-width: var(--col-leitura); }
.pf-secao, .pf-topo + * { max-width: var(--col-leitura); }
.pf-capa { height: 8.5rem; background: linear-gradient(120deg, color-mix(in srgb, var(--marca) 22%, var(--sup2)), var(--sup2)); background-size: cover; background-position: center; }
.pf-cabeca { display: flex; align-items: flex-end; gap: 16px; padding: 0 20px 14px; flex-wrap: wrap; }
/* A foto sobe por cima da capa — é o desenho que toda rede social usa, e ele
   resolve sozinho o problema de a capa e o nome disputarem a mesma faixa. */
.pf-cabeca > .com-ponto { margin-block-start: -2.6rem; }
.pf-cabeca .retrato.gr { width: 5.6rem; height: 5.6rem; font-size: 1.75rem; border: 4px solid var(--sup); }
.pf-quem2 { flex: 1; min-width: 12rem; padding-block-start: 12px; }
.pf-nome2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 700; }
.pf-sobre2 { margin-block-start: 5px; font-size: 0.8438rem; color: var(--texto2); max-width: 52ch; }
.pf-acoes2 { display: flex; gap: 8px; align-items: center; padding-block-end: 3px; }
.pf-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 4px 18px; padding: 12px 20px 18px; border-top: 1px solid var(--linha); }
.pf-item { display: flex; gap: 10px; align-items: center; font-size: 0.8125rem; color: var(--texto2); padding: 4px 0; }
.pf-item .ic { color: var(--texto3); flex: none; }
.pf-secao { font-size: 1rem; font-weight: 700; margin-block-start: 18px; margin-block-end: -4px; }

/* O envelope ao lado do botão de amizade: a outra metade da legenda. */
.pes-msg { flex: none; background: none; border: 1px solid var(--linha); border-radius: 8px; padding: 4px 8px; cursor: pointer; color: var(--texto3); font-size: 0.75rem; }
.pes-msg:hover { color: var(--texto); border-color: var(--texto3); }

/* --- a barra do compositor ------------------------------------------------ */
.esc-barra { display: flex; gap: 8px; align-items: center; }
/* Verde no contorno, como no protótipo: "Imagem" é uma escolha OPCIONAL antes
   de publicar, não o gesto principal. Contorno em vez de preenchimento é o que
   separa os dois sem inventar uma segunda cor de marca. */
.btn.imagem { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); background: transparent; }
.btn.imagem:hover:not(:disabled) { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

.emoji-caixa { position: relative; display: inline-flex; }
.emoji-abre { font-size: 0.9375rem; line-height: 1; }
.emoji-palheta { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
/* `display: grid` numa classe vence o `[hidden]` do navegador — é o mesmo
   defeito que deixou o painel de Mensagens nascer aberto e vazio. */
.emoji-palheta[hidden] { display: none; }
.emoji-um { background: none; border: 0; cursor: pointer; font-size: 1.125rem; line-height: 1; padding: 5px; border-radius: 7px; }
.emoji-um:hover { background: var(--sup2); }

/* --- o resultado da busca, embaixo da caixa ------------------------------- */
.busca-painel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: 0 12px 34px rgba(0,0,0,.45); max-height: 26rem; overflow-y: auto; padding: 6px; }
/* `[hidden]` precisa vencer o `display` da classe — terceira vez que este
   arquivo tropeça nisso (painel de Mensagens, paleta de emoji, e agora aqui). */
.busca-painel[hidden] { display: none; }
.busca-grupo + .busca-grupo { margin-block-start: 4px; border-top: 1px solid var(--linha); padding-block-start: 4px; }
.busca-titulo { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto3); padding: 6px 9px 3px; }
.busca-item { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 7px 9px; border-radius: 8px; cursor: pointer; text-align: start; color: inherit; }
.busca-item:hover { background: var(--sup2); }
.busca-foto { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: none; background: var(--sup3); }
.busca-foto.vazia { display: grid; place-items: center; color: var(--texto3); font-size: 0.8125rem; }
.busca-txt { min-width: 0; display: flex; flex-direction: column; }
.busca-t1 { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-t2 { font-size: 0.6875rem; color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-vazio { padding: 14px 12px; font-size: 0.8125rem; color: var(--texto3); }

/* Numero alinha a' DIREITA, e isto e' o que faz a coluna se ler de relance:
   91k / 51k / 37k / 5k com a unidade no mesmo lugar compara sozinho. A' esquerda,
   o olho tem de medir a largura de cada um antes de comparar. `tabular-nums`
   completa: sem ele o "1" e' mais estreito que o "8" e as casas dancam. */
/* O cabecalho segue o corpo: rotulo a' esquerda sobre numero a' direita e' o
   desalinho classico de tabela mal feita. */
/* Na linha, o rótulo some quando o cabeçalho já diz — menos ruído repetido 10
   vezes. Ele volta na tela estreita, onde as colunas quebram e o cabeçalho
   deixa de valer. */

@media (max-width: 60rem) {
}

/* --- meus canais: a lista de administração -------------------------------- */
/* Esta tela ADMINISTRA; quem mostra desempenho é o Painel. Ela era um grid de
   cartões com os mesmos números e os mesmos vídeos do Painel, e três botões no
   canto — depois da reforma do Painel, as duas diziam a mesma coisa. Linha,
   não cartão: a pergunta aqui é "o que eu tenho", e lista responde isso mais
   rápido que cartão. */
.mc-lista { display: flex; flex-direction: column; gap: 8px; }
.mc-linha { display: grid; grid-template-columns: 40px minmax(9rem, 1fr) minmax(0, 2fr) auto;
  gap: 14px; align-items: center; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--r); padding: 12px 15px; }
.mc-linha:hover { border-color: var(--linha2); }
.mc-foto { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: var(--sup3); }
.mc-foto.vazia { display: grid; place-items: center; color: var(--texto3); }
.mc-quem { min-width: 0; }
.mc-nome { font-family: var(--display); font-size: 1.0625rem; letter-spacing: .01em; color: var(--texto);
  text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-nome:hover { color: var(--azul); text-decoration: underline; }
.mc-sub { font-size: 0.7188rem; color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Os fatos que ajudam a DECIDIR o que fazer com o canal — não o desempenho
   dele. Separador em vez de colunas: são frases, de larguras diferentes. */
.mc-fatos { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.75rem; color: var(--texto2); min-width: 0; }
.mc-fatos > span { display: inline-flex; align-items: center; gap: 4px; }
.mc-fatos > span + span::before { content: "·"; color: var(--texto3); margin-inline-end: 6px; }
.mc-estado.ok { color: var(--texto); }
.mc-parcial { color: var(--amarelo); }
.mc-acoes { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 62rem) {
  .mc-linha { grid-template-columns: 40px minmax(0, 1fr); }
  .mc-fatos, .mc-acoes { grid-column: 1 / -1; }
  .mc-acoes { justify-content: flex-start; }
}

/* ============================================================== o PAINEL ==
 *
 * Forma escolhida pelo dono entre três mockups ("A — Tabelão"): tudo numa tela,
 * sem rolar. Totais em cima, canais como LINHAS de uma tabela com as dez
 * medidas lado a lado, miniaturas no rodapé.
 *
 * Tabela ganhou de cartão por duas razões: comparar canal com canal é a
 * pergunta principal e tabela responde de relance; e ela cresce sem esforço —
 * com quinze canais continuam sendo quinze linhas.
 */

/* O espaçamento entre os blocos do Painel vive AQUI, no contêiner, e não em
   margem de cada peça: margem por peça soma, colapsa e some quando um bloco é
   omitido. Sem esta regra o `alvo` nascia `display:block` sem gap e a faixa do
   cabeçalho da tabela encostava nos tiles — as colunas ficavam certas ao pixel
   e mesmo assim a tela lia como desalinhada. */
.pn { display: flex; flex-direction: column; gap: 20px; }

.pn-topo { display: flex; justify-content: flex-end; }
.pn-jan { display: flex; gap: 6px; align-items: center; }
.pn-j { background: var(--sup2); border: 1px solid var(--linha); color: var(--texto3);
  border-radius: 999px; padding: 5px 13px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.pn-j:hover { color: var(--texto); }
.pn-j.on { background: var(--sup3); color: var(--texto); border-color: var(--linha2); }

.pn-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
.pn-to { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pn-to .r { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texto3); }
.pn-to .v { font-family: var(--display); font-size: 1.75rem; line-height: 1;
  font-variant-numeric: tabular-nums; }
.pn-to .p { font-size: 0.625rem; font-weight: 700; }

/* A tabela rola sozinha na horizontal quando as onze colunas não cabem — o
   corpo da página nunca rola de lado. */
.pn-rol { overflow-x: auto; }
.pn-tab { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
/* Esta tabela NÃO usa a pele global de `th, td` (lá em cima): ali o `th` tem
   fundo cheio e as duas pontas ganham `border-bottom`. Aqui isso virava uma
   faixa cinza de canto vivo atravessando a tela — encostada em nada, porque
   todo o resto da página é cartão arredondado — e um filete DOBRADO entre as
   linhas (o de baixo de uma somado ao de cima da seguinte).
   O cabeçalho aqui é rótulo, não barra: as linhas do corpo já separam sozinhas. */
.pn-tab th { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto3); font-weight: 400;
  padding: 0 10px 8px; text-align: start; white-space: nowrap;
  background: none; border-bottom: 0; }
/* Número alinha à direita: 91k / 51k / 37k / 5k com a unidade no mesmo lugar
   compara sozinho. À esquerda, o olho mede a largura antes de comparar. */
.pn-tab th.num, .pn-tab td.num { text-align: end; font-family: var(--mono);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-tab td { padding: 11px 10px; border-top: 1px solid var(--linha); border-bottom: 0;
  vertical-align: middle; }
.pn-tab tbody tr:hover { background: var(--sup); }
.pn-tab .forte { font-family: var(--display); font-size: 1.0625rem; }
.pn-tab .nd { color: var(--texto3); }
.pn-tab .su { color: var(--ok); }
.pn-tab .de { color: var(--erro); }

.pn-tab .pos { width: 3.4rem; text-align: center; }
.pn-tab .pos span { font-family: var(--display); font-size: 1.25rem; line-height: 1;
  color: var(--texto2); display: block; font-variant-numeric: tabular-nums; }
.pn-tab tbody tr:first-child .pos span { color: var(--marca-txt); }
.mov { font-family: var(--mono); font-size: 0.625rem; font-weight: 700; font-style: normal; }
.mov.su { color: var(--ok); }
.mov.de { color: var(--erro); }
.mov.nv { color: var(--azul); }
.mov.ig { color: var(--texto3); }

.pn-ca { display: flex; align-items: center; gap: 10px; background: none; border: 0;
  padding: 0; cursor: pointer; color: inherit; text-align: start; min-width: 11rem; }
.pn-ca b { font-family: var(--display); font-size: 0.9375rem; letter-spacing: .01em; display: block; }
.pn-ca:hover b { color: var(--azul); }
.pn-ca i { font-size: 0.6875rem; color: var(--texto3); font-style: normal; }
.pn-av { width: 34px; height: 34px; border-radius: 999px; object-fit: cover;
  background: var(--sup3); flex: none; }
.pn-av.vaz { display: grid; place-items: center; color: var(--texto3); }

/* O título fica mais perto das miniaturas do que da tabela — ele pertence ao
   que vem DEPOIS dele. Equidistante, o olho não sabe a qual bloco ele se refere. */
.pn-sec { font-family: var(--display); font-size: 1.0625rem; letter-spacing: .01em;
  margin-block-start: 12px; margin-block-end: -6px; }
/* O rodapé mistura os canais e ordena por publicação: a pergunta aqui é "o que
   saiu", não "de quem saiu" — o canal vira etiqueta embaixo do título. */
/* Colunas em número FIXO por faixa, e todas divisoras de 8 — que é quantas
   miniaturas o rodapé mostra. Com `auto-fit` a conta dava 7 numa tela larga e
   a 8ª ficava sozinha numa segunda linha, que é o que se lê como bagunça.
   Aqui a última linha ou está cheia ou não existe. */
.pn-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
@media (min-width: 44rem) { .pn-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 100rem) { .pn-minis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.pn-mini { display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: inherit; min-width: 0; }
.pn-cap { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 7px;
  overflow: hidden; background: var(--sup3); }
.pn-cap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-mini:hover .pn-cap { outline: 2px solid var(--marca-txt); outline-offset: 1px; }
.pn-dd { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.85); color: #fff;
  font-family: var(--mono); font-size: 0.625rem; padding: 1px 4px; border-radius: 3px; }
.pn-tt { font-size: 0.75rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.pn-mini:hover .pn-tt { color: var(--azul); }
.pn-tp { font-family: var(--mono); font-size: 0.625rem; color: var(--texto3);
  display: flex; align-items: center; gap: 5px; }
.pn-pt { width: 15px; height: 15px; border-radius: 999px; object-fit: cover; flex: none; }