/* Resenha: grafite, pílula branca e verde-limão.
   Nada de desfoque nem efeito animado pesado: o programa precisa ser leve. */

:root {
  --fundo-0: #09090b;
  --fundo-1: #0f0f12;
  --fundo-2: #141418;
  --superficie: #1b1b21;
  --superficie-2: #23232b;
  --superficie-3: #2d2d37;
  --linha: rgba(255, 255, 255, 0.06);
  --linha-forte: rgba(255, 255, 255, 0.11);
  --texto: #f2f2f5;
  --texto-2: #b6b6c1;
  --texto-3: #7d7d8a;
  --limao: #bef343; /* o lima da marca Concord (15/10) */
  --limao-escuro: #1d2607;
  --limao-texto: #0d1200;
  --limao-letra: #bef343; /* o limão quando é letra (no tema claro ele escurece) */
  --vermelho: #ff5c61;
  --vermelho-fundo: #3a1517;
  --ao-vivo: #ff3b47;
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 16px;
  --sombra: 0 12px 40px rgba(0, 0, 0, 0.45);
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo-0);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--limao); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: #8ec5ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic.pequeno { width: 16px; height: 16px; }
.ic.mini { width: 14px; height: 14px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* grade de fundo (a mesma do painel): só em telas vazias */
.grade {
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
}

/* ---------- botões ---------- */

.pilula {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #09090b;
  border-radius: 999px; padding: 10px 20px;
  font-weight: 650; letter-spacing: -0.01em;
  transition: transform 0.08s, background 0.12s;
}
.pilula:hover:not(:disabled) { background: #e9e9ee; }
.pilula:active:not(:disabled) { transform: scale(0.98); }
.pilula.limao { background: var(--limao); color: var(--limao-texto); }
.pilula.limao:hover:not(:disabled) { background: #d4ff4a; }
.pilula.escura { background: var(--superficie-2); color: var(--texto); }
.pilula.escura:hover:not(:disabled) { background: var(--superficie-3); }
.pilula.perigo { background: var(--vermelho); color: #fff; }
.pilula.pequena { padding: 6px 14px; font-size: 13px; }

.botao-icone {
  width: 32px; height: 32px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 8px; color: var(--texto-2);
  transition: background 0.12s, color 0.12s;
}
.botao-icone:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.botao-icone.desligado { color: var(--vermelho); }
.botao-icone.desligado:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.botao-icone.ligado { color: var(--limao-letra); }

/* ---------- telas de entrada ---------- */

.tela-cheia {
  height: 100%;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(198, 244, 50, 0.07), transparent 70%),
    var(--fundo-0);
  position: relative;
}
.tela-cheia::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 20%, transparent 75%);
  pointer-events: none;
}
.cartao-entrada {
  position: relative;
  width: min(400px, 100%);
  background: rgba(20, 19, 27, 0.92);
  border: 1px solid var(--linha-forte);
  border-radius: 22px;
  padding: 32px 28px 28px;
  display: grid; gap: 16px;
  box-shadow: var(--sombra);
}
.cartao-entrada h1 { margin: 0; font-size: 26px; letter-spacing: -0.03em; line-height: 1.15; }
.cartao-entrada .sub { margin: -8px 0 4px; color: var(--texto-3); }
.cartao-entrada .pilula { margin-top: 4px; padding: 12px; }
.campo { display: grid; gap: 8px; color: var(--texto-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.campo input, .campo select {
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; color: var(--texto);
  background: var(--fundo-0); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  padding: 11px 12px; width: 100%;
}
.campo input:focus, .campo select:focus { border-color: rgba(198, 244, 50, 0.5); outline: none; }
.aviso-campo { margin: -6px 0 0; min-height: 1.2em; color: #ff9a9d; font-size: 13px; }
.cores { display: flex; gap: 10px; flex-wrap: wrap; }
.cor {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px;
}
.cor[aria-checked="true"] { outline-color: #fff; }
.previa-perfil { display: flex; justify-content: flex-start; }

/* ---------- avatar ---------- */

.avatar {
  flex: none; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; line-height: 1;
  position: relative;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.1s;
  user-select: none;
}
.falando .avatar, .avatar.falando { box-shadow: 0 0 0 2px var(--fundo-1), 0 0 0 4px var(--limao); }

/* ---------- o programa: 4 colunas ---------- */

.app {
  height: 100%;
  display: grid;
  grid-template-columns: 72px 252px minmax(0, 1fr) 236px;
  background: var(--fundo-0);
}

.trilho {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0;
  background: var(--fundo-0);
}
.trilho-item { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; position: relative; }
.trilho-item img { width: 44px; height: 44px; border-radius: 14px; }
.trilho-item.ativo::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: #fff;
}
.trilho-separador { width: 32px; height: 2px; border-radius: 2px; background: var(--superficie-2); margin: 2px 0; }
.trilho-acao {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fundo-2); color: var(--texto-3);
  transition: border-radius 0.15s, background 0.15s, color 0.15s;
}
.trilho-acao:hover { border-radius: 14px; background: var(--limao); color: var(--limao-texto); }
.trilho-espaco { flex: 1; }

.lateral {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--fundo-1);
  border-radius: 14px 0 0 0;
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
}
.lateral-topo {
  height: 52px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--linha);
  text-align: left;
}
.lateral-topo:hover { background: rgba(255, 255, 255, 0.02); }

.lista-canais { flex: 1; overflow-y: auto; padding: 12px 8px; }
.categoria {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 8px 6px;
  color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.categoria:first-child { padding-top: 2px; }
.categoria .botao-icone { width: 22px; height: 22px; border-radius: 6px; }
.categoria .botao-icone .ic { width: 15px; height: 15px; }

.canal {
  width: 100%; height: 34px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; margin: 1px 0;
  border-radius: var(--raio-p);
  color: var(--texto-3); text-align: left;
  position: relative;
}
.canal .ic { width: 18px; height: 18px; opacity: 0.8; }
.canal-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.canal:hover { background: var(--superficie); color: var(--texto-2); }
.canal.aberto { background: var(--superficie-2); color: var(--texto); }
.canal.nao-lido { color: var(--texto); }
.canal.nao-lido .canal-nome { font-weight: 700; }
.canal.nao-lido::before {
  content: ""; position: absolute; left: -8px; top: 12px; width: 4px; height: 10px;
  border-radius: 0 4px 4px 0; background: #fff;
}
.contador {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.canal.na-sala { color: var(--texto); }
.canal.na-sala .ic { color: var(--limao-letra); opacity: 1; }

.na-voz { padding: 2px 0 6px 28px; display: grid; gap: 1px; }
.membro-voz {
  height: 30px; display: flex; align-items: center; gap: 8px;
  padding: 0 8px; border-radius: var(--raio-p);
  color: var(--texto-2); font-size: 13.5px;
}
.membro-voz:hover { background: var(--superficie); }
.membro-voz .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-voz.falando .nome { color: var(--texto); }
.estados { display: flex; align-items: center; gap: 4px; color: var(--texto-3); }
.estados .ic { width: 14px; height: 14px; }
.estados .ic.vermelho { color: var(--vermelho); }
.ao-vivo {
  background: var(--ao-vivo); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 4px; line-height: 1.2;
}

/* conexão de voz e eu, no pé da coluna */
.painel-voz {
  flex: none; margin: 0 8px; padding: 10px 10px 8px;
  border-top: 1px solid var(--linha);
  display: grid; gap: 8px;
}
.painel-voz-linha { display: flex; align-items: center; gap: 8px; }
.painel-voz-status { flex: 1; min-width: 0; }
.painel-voz-titulo { display: flex; align-items: center; gap: 6px; color: var(--limao-letra); font-weight: 700; font-size: 13px; }
.painel-voz-titulo.conectando { color: #f5c542; }
.painel-voz-sala { color: var(--texto-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-voz-sala button { color: inherit; }
.painel-voz-sala button:hover { color: var(--texto); text-decoration: underline; }
.painel-voz-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.painel-voz-botoes button {
  height: 32px; border-radius: 8px; background: var(--superficie);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--texto-2); font-size: 13px; font-weight: 600;
}
.painel-voz-botoes button:hover { background: var(--superficie-2); color: var(--texto); }
.painel-voz-botoes button.ligado { background: var(--limao); color: var(--limao-texto); }
.painel-voz-botoes button.perigo:hover { background: var(--vermelho-fundo); color: var(--vermelho); }

.painel-eu {
  flex: none; height: 58px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 10px;
  background: #0c0b11;
}
.painel-eu-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 8px; text-align: left; }
.painel-eu-quem:hover { background: var(--superficie); }
.painel-eu-nome { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-eu-sub { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-eu-textos { min-width: 0; }

/* ---------- área principal ---------- */

.principal {
  min-width: 0; min-height: 0;
  background: var(--fundo-2);
  border-top: 1px solid var(--linha);
  display: flex;
}
.vista { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cabecalho {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--linha);
}
.cabecalho .ic { color: var(--texto-3); }
.cabecalho-titulo { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cabecalho-sub { color: var(--texto-3); font-size: 13px; padding-left: 10px; border-left: 1px solid var(--linha-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-espaco { flex: 1; }

/* ---------- conversa de texto ---------- */

.mensagens { flex: 1; overflow-y: auto; padding: 16px 0 8px; display: flex; flex-direction: column; }
.mensagens-recheio { margin-top: auto; }
.comeco { padding: 24px 20px 16px; }
.comeco-icone {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--superficie-2); margin-bottom: 12px;
}
.comeco-icone .ic { width: 34px; height: 34px; }
.comeco h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: -0.02em; }
.comeco p { margin: 0; color: var(--texto-3); }
.carregar-mais { align-self: center; margin: 8px; }

.divisor-dia {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 20px 6px;
  color: var(--texto-3); font-size: 12px; font-weight: 600;
}
.divisor-dia::before, .divisor-dia::after { content: ""; flex: 1; height: 1px; background: var(--linha-forte); }

.mensagem {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px;
  padding: 2px 20px 2px 16px; position: relative;
}
.mensagem:hover { background: rgba(255, 255, 255, 0.025); }
.mensagem.cabeca { margin-top: 14px; padding-top: 4px; }
.mensagem .avatar { grid-row: span 2; margin-top: 2px; }
.mensagem-topo { display: flex; align-items: baseline; gap: 8px; }
.mensagem-autor { font-weight: 650; }
.mensagem-hora { color: var(--texto-3); font-size: 11.5px; }
.hora-lateral {
  grid-column: 1; text-align: right; color: var(--texto-3); font-size: 10.5px;
  padding-top: 3px; visibility: hidden;
}
.mensagem:hover .hora-lateral { visibility: visible; }
.mensagem-texto { grid-column: 2; white-space: pre-wrap; overflow-wrap: anywhere; color: #e4e4ea; }
.mensagem.enviando .mensagem-texto { color: var(--texto-3); }
.mensagem.falhou .mensagem-texto { color: #ff9a9d; }
.mensagem.me-chamou { background: rgba(198, 244, 50, 0.06); box-shadow: inset 2px 0 0 var(--limao); }
.mencao { background: rgba(198, 244, 50, 0.16); color: var(--limao-letra); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.reenviar { color: #ff9a9d; text-decoration: underline; margin-left: 6px; font-size: 12px; }

.compositor { flex: none; padding: 0 16px 6px; }
.caixa-texto {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 12px; padding: 4px 6px 4px 14px;
}
.caixa-texto:focus-within { border-color: var(--linha-forte); }
.caixa-texto textarea {
  flex: 1; resize: none; border: 0; outline: none; background: transparent;
  padding: 10px 0; max-height: 40vh; line-height: 1.45; color: var(--texto);
}
.caixa-texto textarea::placeholder { color: var(--texto-3); }
.caixa-texto .botao-icone { margin-bottom: 2px; }
.digitando { height: 22px; padding: 2px 18px 0; color: var(--texto-3); font-size: 12px; }
.digitando b { color: var(--texto-2); }

/* ---------- sala de voz (o palco) ---------- */

.palco { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0c0b12; }
.palco-corpo { flex: 1; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }

.grade-pessoas {
  flex: 1; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-content: center;
}
.grade-pessoas.poucos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 420px)); justify-content: center; }
.quadro {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--raio-g); overflow: hidden;
  display: grid; place-items: center;
  background: var(--superficie);
  border: 1px solid var(--linha);
  transition: box-shadow 0.1s;
}
.quadro.falando { box-shadow: inset 0 0 0 2px var(--limao); }
.quadro.falando .avatar { box-shadow: 0 0 0 3px #0c0b12, 0 0 0 6px var(--limao); }
.quadro-nome {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.62); border-radius: 8px;
  padding: 4px 8px; font-size: 13px; font-weight: 600;
  max-width: calc(100% - 20px);
}
.quadro-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-topo { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; align-items: center; }
.quadro .ao-vivo { position: absolute; left: 10px; top: 10px; }
.quadro-assistir { position: absolute; inset: auto 0 15% 0; display: flex; justify-content: center; }
.quadro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.quadro.tela-minha video { object-fit: cover; opacity: 0.35; }
.quadro-volume {
  position: absolute; right: 10px; bottom: 10px;
  display: none; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.62); border-radius: 8px; padding: 4px 8px;
}
.quadro:hover .quadro-volume { display: flex; }
.quadro-volume input { width: 90px; accent-color: var(--limao); }

.foco { flex: 1; min-height: 260px; display: flex; }
.foco .quadro { flex: 1; aspect-ratio: auto; border-radius: var(--raio-g); }
.foco .quadro-topo .botao-icone { background: rgba(0, 0, 0, 0.55); color: #fff; }
.faixa { flex: none; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.faixa .quadro { width: 200px; flex: none; }
.faixa .quadro .avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
.faixa .quadro-assistir { display: none; }
.faixa .quadro.clicavel { cursor: pointer; }

.vazio {
  flex: 1; display: grid; place-items: center; text-align: center;
  border-radius: var(--raio-g); border: 1px dashed var(--linha-forte);
  color: var(--texto-3); padding: 24px;
}
.vazio h3 { margin: 0 0 6px; color: var(--texto); font-size: 18px; letter-spacing: -0.01em; }
.vazio p { margin: 0 0 16px; }

.controles {
  flex: none; display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 12px 16px 6px;
}
.controle {
  height: 48px; min-width: 48px; padding: 0 14px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--superficie-2); color: var(--texto);
  font-weight: 600; transition: background 0.12s;
}
.controle:hover:not(:disabled) { background: var(--superficie-3); }
.controle.desligado { background: var(--vermelho-fundo); color: var(--vermelho); }
.controle.ligado { background: var(--limao); color: var(--limao-texto); }
.controle.desligar { background: var(--vermelho); color: #fff; padding: 0 18px; }
.controle.desligar:hover { background: #ff7579; }
.grupo-controle { display: inline-flex; }
.grupo-controle .controle:first-child { border-radius: 999px 0 0 999px; padding-right: 12px; }
.grupo-controle .controle:last-child { border-radius: 0 999px 999px 0; padding: 0 12px 0 8px; min-width: 0; border-left: 1px solid rgba(0, 0, 0, 0.25); }
.consumo { flex: none; text-align: center; color: var(--texto-3); font-size: 11.5px; padding: 2px 16px 10px; font-variant-numeric: tabular-nums; min-height: 1.6em; }

/* ---------- membros ---------- */

.membros {
  background: var(--fundo-1);
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
  overflow-y: auto; padding: 16px 8px;
}
.membro {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--raio-p);
}
.membro:hover { background: var(--superficie); }
.membro .avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #3ddc84; border: 3px solid var(--fundo-1);
}
.membro-nome { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-sub { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membro-textos { min-width: 0; }

/* ---------- menus, janelas e avisos ---------- */

.camada { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.camada > * { pointer-events: auto; }
.menu {
  position: fixed; min-width: 220px;
  background: #17151f; border: 1px solid var(--linha-forte);
  border-radius: 12px; padding: 6px; box-shadow: var(--sombra);
  display: grid; gap: 2px;
}
.menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--texto-2);
}
.menu button:hover { background: var(--limao); color: var(--limao-texto); }
.menu button .ic { width: 18px; height: 18px; }
.menu .menu-detalhe { margin-left: auto; color: inherit; opacity: 0.6; font-size: 12px; }
.menu hr { border: 0; border-top: 1px solid var(--linha); margin: 4px 2px; }
.fundo-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.66);
  display: grid; place-items: center; padding: 24px;
}
.modal {
  width: min(460px, 100%);
  background: #14131b; border: 1px solid var(--linha-forte);
  border-radius: 18px; box-shadow: var(--sombra);
  display: grid; gap: 16px; padding: 22px;
}
.modal h2 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.modal p { margin: 0; color: var(--texto-3); }
.modal .aviso-campo { margin: -6px 0 0; color: #ff9a9d; }
.modal-pe { display: flex; justify-content: flex-end; gap: 8px; }
.tipos { display: grid; gap: 8px; }
.tipo {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 12px; background: var(--superficie); border: 1px solid transparent; text-align: left;
}
.tipo[aria-checked="true"] { border-color: var(--limao); background: var(--limao-escuro); }
.tipo .ic { color: var(--texto-2); }
.tipo b { display: block; }
.tipo small { color: var(--texto-3); }
.linha-copiar { display: flex; gap: 8px; }
.linha-copiar input {
  flex: 1; min-width: 0; background: var(--fundo-0); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); padding: 10px 12px; color: var(--texto-2);
}

/* ajustes: janela grande com menu do lado */
.ajustes {
  width: min(760px, 100%); height: min(560px, calc(100vh - 48px));
  background: #14131b; border: 1px solid var(--linha-forte); border-radius: 18px;
  box-shadow: var(--sombra); display: grid; grid-template-columns: 200px 1fr; overflow: hidden;
}
.ajustes-menu { background: var(--fundo-1); padding: 18px 10px; display: grid; align-content: start; gap: 2px; }
.ajustes-menu h3 { margin: 0 8px 8px; color: var(--texto-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.ajustes-menu button { text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--texto-2); font-weight: 500; }
.ajustes-menu button:hover { background: var(--superficie); color: var(--texto); }
.ajustes-menu button.aberto { background: var(--superficie-2); color: var(--texto); }
.ajustes-corpo { padding: 22px 26px; overflow-y: auto; display: grid; align-content: start; gap: 18px; position: relative; }
.ajustes-corpo h2 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.ajustes-fechar { position: absolute; right: 14px; top: 14px; }
.chave {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.chave b { display: block; font-weight: 600; }
.chave small { color: var(--texto-3); }
.interruptor {
  width: 40px; height: 24px; border-radius: 99px; flex: none;
  background: var(--superficie-3); position: relative; transition: background 0.15s;
}
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
}
.interruptor[aria-checked="true"] { background: var(--limao); }
.interruptor[aria-checked="true"]::after { transform: translateX(16px); background: var(--limao-texto); }
.medidor { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.medidor div { height: 100%; width: 0; background: var(--limao); transition: width 0.08s linear; }
.sobre p { color: var(--texto-2); margin: 0 0 10px; }

.avisos { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; pointer-events: none; }
.aviso {
  background: #1c1a25; border: 1px solid var(--linha-forte); border-radius: 12px;
  padding: 10px 16px; box-shadow: var(--sombra); font-size: 13.5px; max-width: min(520px, 90vw);
  pointer-events: auto;
}
.aviso.erro { border-color: rgba(255, 92, 97, 0.45); }
.aviso.ok { border-color: rgba(198, 244, 50, 0.45); }

.faixa-conexao {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 70;
  background: #f5c542; color: #1c1500; font-weight: 700; font-size: 12.5px;
  padding: 4px 14px; border-radius: 0 0 10px 10px;
}

.carregando { flex: 1; display: grid; place-items: center; color: var(--texto-3); }
a.pilula, a.pilula:hover { text-decoration: none; }
.dica-instalar {
  flex: none; margin: 0 8px 8px; display: flex; align-items: center; gap: 4px;
  background: var(--limao-escuro); border: 1px solid rgba(198, 244, 50, 0.25); border-radius: 10px; padding: 4px 4px 4px 10px;
}
.dica-instalar-texto { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--limao-letra); font-weight: 600; font-size: 13px; text-align: left; padding: 6px 0; }
.dica-instalar .botao-icone { width: 26px; height: 26px; }
.instalar { width: min(560px, 100%); }
.instalar-cartoes { display: grid; gap: 10px; }
.instalar-cartao {
  display: grid; gap: 8px; justify-items: start;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px;
}
.instalar-cartao.seu { border-color: rgba(198, 244, 50, 0.45); }
.instalar-cartao p { margin: 0; color: var(--texto-3); font-size: 13.5px; }
.instalar-topo { display: flex; align-items: center; gap: 8px; }
.instalar-seu { font-size: 11px; font-weight: 700; color: var(--limao-texto); background: var(--limao); border-radius: 99px; padding: 1px 8px; }
.instalar-passos { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--texto-2); font-size: 13px; }
.instalar-dica { color: var(--texto-2) !important; }
.selo-ruim { background: rgba(245, 197, 66, 0.9); color: #1c1500; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.so-celular { display: none; }

/* ---------- telas menores ---------- */

@media (max-width: 1100px) {
  .app { grid-template-columns: 72px 240px minmax(0, 1fr); }
  .membros { display: none; }
  /* O botão de quem está online abre a lista por cima, como uma gaveta.
     Fica abaixo da camada dos menus e janelas (50). */
  .app.com-membros .membros {
    display: block; position: fixed; top: 0; right: 0; bottom: 0;
    width: min(240px, 80vw); z-index: 40;
    border-top: 0; box-shadow: var(--sombra);
  }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .trilho { display: none; }
  .lateral { border-radius: 0; }
  .controle span { display: none; }
  .ajustes { grid-template-columns: 1fr; }
  .ajustes-menu { display: flex; overflow-x: auto; padding: 10px; }
  .ajustes-menu h3 { display: none; }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 0 minmax(0, 1fr); }
  .app.mostrar-canais { grid-template-columns: 82vw 18vw; }
  .lateral { overflow: hidden; }
  .so-celular { display: inline-grid; }
  /* A barra da chamada ganhou os sons e as reações e passou a medir 470px
     numa tela de 390: cortava o microfone e o desligar nas pontas. Botões
     menores cabem numa linha; em tela mais estreita ainda, quebra em duas. */
  .controles { gap: 5px; row-gap: 6px; flex-wrap: wrap; padding: 10px 8px 4px; }
  .controles .controle { height: 40px; min-width: 40px; padding: 0 10px; }
  .controles .controle.desligar { padding: 0 12px; }
  .controles .grupo-controle .controle:first-child { padding-right: 6px; }
  .controles .grupo-controle .controle:last-child { padding: 0 8px 0 5px; }
  /* Com a lista de canais aberta, a sala fica espiando na beirada (18vw)
     e a barra passava por cima da lista. */
  .app.mostrar-canais .principal { overflow: hidden; }
}
@media (min-width: 1101px) {
  .app.sem-membros { grid-template-columns: 72px 252px minmax(0, 1fr); }
  .app.sem-membros .membros { display: none; }
}

/* ---------- página de privacidade e termos ---------- */
body.pagina-texto { overflow: auto; }
.texto-legal { max-width: 720px; margin: 0 auto; padding: 40px 20px 60px; color: var(--texto-2); }
.texto-legal h1 { color: var(--texto); letter-spacing: -0.02em; }
.texto-legal h2 { color: var(--texto); font-size: 18px; margin-top: 28px; }
.texto-legal li { margin: 6px 0; }

/* ---------- foto da conta Google e tela de login ---------- */
.avatar { overflow: visible; }
.avatar-foto { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.botao-google-caixa { min-height: 44px; display: flex; justify-content: center; }
.letra-miuda { font-size: 12.5px; color: var(--texto-3); margin: 0; }
.letra-miuda a { color: var(--texto-2); text-decoration: underline; }
.conta-google { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--superficie); }
.conta-google small { display: block; color: var(--texto-3); }
.conta-google .pilula { margin-left: auto; }

/* ---------- mesa de sons ---------- */
/* 14/10 ("o fato de ter scroll nela não é muito bom"): altura fixa e duas telas,
   a Mesa e o Myinstants, sem barra de rolagem. O que não cabe vira página. */

.modal.mesa {
  width: min(720px, 100%); min-width: 0;
  height: min(600px, calc(100vh - 48px));
  height: min(600px, calc(100dvh - 48px));
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
}
.mesa-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mesa-topo h2 { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.mesa-marca { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--limao); color: var(--limao-texto); box-shadow: 0 0 18px rgba(198, 244, 50, 0.25); }
.mesa-marca .ic { width: 18px; height: 18px; }
.mesa-controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mesa-controles .pilula .ic { width: 13px; height: 13px; }
.mesa-volume { display: flex; align-items: center; gap: 6px; color: var(--texto-3); }
.mesa-volume input { width: 110px; accent-color: var(--limao); }
.mesa-fechar { margin-right: -6px; }
.mesa-abas { align-self: flex-start; }
.segmentado button[aria-selected="true"] { background: var(--superficie-3); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.mesa-abas .ic { width: 15px; height: 15px; }
.mesa-contador {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center;
  background: var(--limao); color: var(--limao-texto); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.mesa-contador:empty { display: none; }

/* As duas telas, lado a lado: a de fora fica escondida do lado. */
.mesa-telas { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mesa-tela {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
}
.mesa-telas[data-tela="mesa"] .tela-site { transform: translateX(calc(100% + 24px)); opacity: 0; }
.mesa-telas[data-tela="site"] .tela-mesa { transform: translateX(calc(-100% - 24px)); opacity: 0; }

/* A grade que vira a página. */
.grade-paginas { flex: 1; min-height: 0; display: grid; gap: 8px; align-content: start; overflow: hidden; touch-action: pan-y; }
.grade-paginas.vazia { display: flex; align-items: center; justify-content: center; }
.grade-paginas.vira-frente > * { animation: pagina-frente 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.grade-paginas.vira-tras > * { animation: pagina-tras 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes pagina-frente { from { opacity: 0; transform: translateX(22px); } }
@keyframes pagina-tras { from { opacity: 0; transform: translateX(-22px); } }
.paginas { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pagina-seta .ic { width: 18px; height: 18px; }
.pagina-seta.carregando { opacity: 0.45; pointer-events: none; }
.pagina-marcas { display: flex; align-items: center; }
.pagina-marca { width: 16px; height: 26px; display: grid; place-items: center; transition: width 0.2s; }
.pagina-marca::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: var(--superficie-3); transition: width 0.2s, background 0.2s; }
.pagina-marca:hover::before { background: var(--texto-3); }
.pagina-marca.atual { width: 28px; }
.pagina-marca.atual::before { width: 20px; background: var(--limao); }
.pagina-numero { padding: 0 6px; font-size: 13px; font-weight: 650; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* Os botões da mesa: cada som com a sua luzinha. */
.som { position: relative; display: flex; min-width: 0; --cor-som: var(--limao); }
.som-tocar {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 30px 0 12px; border-radius: 12px;
  background: var(--superficie-2);
  background: color-mix(in srgb, var(--cor-som) 8%, var(--superficie-2));
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--texto); font-weight: 650; font-size: 13.5px; line-height: 1.2; text-align: left;
  transition: background 0.12s, color 0.12s, transform 0.06s, box-shadow 0.12s;
}
.som-tocar::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-som); box-shadow: 0 0 9px var(--cor-som); }
.som-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.som-tocar:hover:not(:disabled) { background: var(--limao); color: var(--limao-texto); box-shadow: none; }
.som-tocar:hover:not(:disabled)::before { background: var(--limao-texto); box-shadow: none; }
.som-tocar:active:not(:disabled) { transform: scale(0.97); }
.som-tocar:disabled { opacity: 0.55; cursor: default; }
.som.tocou .som-tocar { animation: som-tocou 0.9s ease-out; }
@keyframes som-tocou {
  0% { box-shadow: inset 0 0 0 2px var(--limao), 0 0 24px rgba(198, 244, 50, 0.5); }
  100% { box-shadow: inset 0 0 0 1px var(--linha), 0 0 0 rgba(198, 244, 50, 0); }
}
.som-tirar {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px;
  color: var(--texto-3); opacity: 0; transition: opacity 0.12s;
}
.som:hover .som-tirar, .som-tirar:focus-visible { opacity: 1; }
.som:hover .som-tocar:not(:disabled) ~ .som-tirar { color: var(--limao-texto); }
.som-tirar:hover { background: var(--vermelho-fundo); color: var(--vermelho) !important; }
@media (hover: none) { .som-tirar { opacity: 1; } }
.som-pegar {
  display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px;
  border: 1.5px dashed var(--linha-forte); color: var(--texto-2); font-weight: 650; font-size: 13.5px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.som-pegar:hover { border-color: var(--limao); color: var(--limao-letra); background: var(--limao-escuro); }

.mesa-vazia { display: grid; justify-items: center; gap: 10px; max-width: 360px; padding: 20px; text-align: center; }
.mesa-vazia b { font-size: 16px; }
.mesa-vazia p { font-size: 13.5px; }
.mesa-vazia-icone { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--limao-escuro); color: var(--limao-letra); }
.mesa-vazia-icone .ic { width: 26px; height: 26px; }
.mesa-vazia .pilula .ic, .mesa-pe .ic, .mi-pe .ic, .mi-filtros .campo-lupa .ic { width: 14px; height: 14px; flex: none; }
.mesa-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--superficie); font-size: 13px; }
.mesa-aviso .ic { width: 15px; height: 15px; flex: none; }
.mesa-pe, .mi-pe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 34px; }
.mesa-dica { font-size: 12.5px; color: var(--texto-3); }

/* Campo com o ícone dentro (lupa, link). */
.campo-lupa {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px;
  background: var(--fundo-1); border: 1px solid var(--linha-forte); color: var(--texto-3); cursor: text;
}
.campo-lupa:focus-within { border-color: rgba(198, 244, 50, 0.5); }
.campo-lupa input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; outline: none; color: var(--texto); }
.campo-lupa input::placeholder { color: var(--texto-3); }
.mesa-pe .campo-lupa { width: 210px; }

/* A tela do Myinstants. */
.mi-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mi-abas { display: flex; gap: 6px; }
.mi-aba { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--superficie); color: var(--texto-2); font-size: 13px; font-weight: 650; white-space: nowrap; }
.mi-aba:hover { color: var(--texto); }
.mi-aba[aria-pressed="true"] { background: var(--texto); color: #0c0b11; }
.mi-busca { flex: 1; min-width: 170px; }
.mi-site { width: 34px; height: 34px; }
.mi-item {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 8px; border-radius: 12px;
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); transition: background 0.12s;
}
.mi-item:hover { background: var(--superficie-2); }
.mi-nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.mi-ouvir, .mi-por { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; transition: background 0.12s, color 0.12s, box-shadow 0.12s; }
.mi-ouvir { background: var(--superficie-3); color: var(--texto); }
.mi-ouvir .ic { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; stroke-width: 1.5; }
.mi-ouvir:hover { background: var(--texto); color: #0c0b11; }
.mi-ouvir.tocando { background: var(--limao); color: var(--limao-texto); animation: mi-ouvindo 1.1s ease-in-out infinite; }
@keyframes mi-ouvindo { 50% { box-shadow: 0 0 0 5px rgba(198, 244, 50, 0.2); } }
.mi-por { color: var(--limao-letra); box-shadow: inset 0 0 0 1.5px currentColor; }
.mi-por .ic { width: 16px; height: 16px; }
.mi-por:hover:not(:disabled) { background: var(--limao); color: var(--limao-texto); box-shadow: none; }
.mi-por.feito, .mi-por.feito:disabled { background: var(--limao-escuro); box-shadow: none; opacity: 1; cursor: default; }
.mi-por.baixando:disabled { opacity: 0.6; }
.mi-por.baixando .ic { animation: mi-gira 0.9s linear infinite; }
@keyframes mi-gira { to { transform: rotate(360deg); } }
.mi-item.esqueleto {
  box-shadow: none;
  background: linear-gradient(90deg, var(--superficie) 20%, var(--superficie-2) 50%, var(--superficie) 80%) 0 0 / 220% 100%;
  animation: mi-esqueleto 1.2s linear infinite;
}
@keyframes mi-esqueleto { to { background-position: -220% 0; } }
.mi-colar { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px; }
.mi-colar .campo-lupa { flex: 1; }

html[data-tema="claro"] .mi-aba[aria-pressed="true"], html[data-tema="claro"] .mi-ouvir:hover { color: #fff; }
html[data-tema="claro"] .modal.mesa .campo-lupa { background: var(--fundo-1); }

@media (max-width: 560px) {
  .modal.mesa { height: calc(100vh - 24px); height: calc(100dvh - 24px); padding: 16px; gap: 12px; }
  .mesa-fechar { order: 1; }
  .mesa-controles { order: 2; width: 100%; min-width: 0; flex-wrap: nowrap; }
  .modal.mesa .mesa-so-largo { display: none; }
  .mesa-volume { flex: 1; min-width: 0; }
  .mesa-volume input { width: 100%; min-width: 0; flex: 1; }
  .mesa-abas { align-self: stretch; }
  .mesa-abas button { flex: 1; justify-content: center; }
  .mesa-pe .campo-lupa { flex: 1; width: auto; }
  .mesa-dica { display: none; }
  .mi-abas { width: 100%; }
  .mi-aba { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mesa-tela { transition: none; }
  .grade-paginas > *, .som.tocou .som-tocar, .mi-ouvir.tocando, .mi-item.esqueleto, .mi-por.baixando .ic { animation: none !important; }
}

/* ---------- perfil "tipo Nitro": nome, decoração, status, cartão ---------- */

.mensagem-foto { grid-row: span 2; margin-top: 2px; align-self: start; border-radius: 50%; }
.mensagem-autor { font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensagem-autor:hover .nome-estilo { text-decoration: underline; }
.membro, .membro-voz { cursor: pointer; }

/* O nome no estilo da pessoa. A animação só roda no cartão e com o mouse em cima. */
.nome-estilo.efeito-solido { color: var(--c1); }
.nome-estilo.efeito-degrade, .nome-estilo.efeito-arcoiris, .nome-estilo.efeito-brilho {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nome-estilo.efeito-degrade { background-image: linear-gradient(90deg, var(--c1), var(--c2)); }
.nome-estilo.efeito-neon { color: #fff; text-shadow: 0 0 3px var(--c1), 0 0 8px var(--c1), 0 0 14px var(--c2); }
.nome-estilo.efeito-arcoiris {
  background-image: linear-gradient(90deg, #ff5c61, #ffb347, #ffe66d, #7cf29a, #6ad5ff, #9b8cff, #ff7ad9, #ff5c61);
  background-size: 200% 100%; animation: nome-desliza 4s linear infinite paused;
}
.nome-estilo.efeito-brilho {
  background-image: linear-gradient(100deg, var(--c1) 35%, #fff 50%, var(--c2) 65%);
  background-size: 260% 100%; background-position: 100% 0; animation: nome-brilha 2.8s ease-in-out infinite paused;
}
.nome-estilo.animar, .membro:hover .nome-estilo, .mensagem:hover .nome-estilo,
.membro-voz:hover .nome-estilo, .painel-eu-quem:hover .nome-estilo, .quadro:hover .nome-estilo { animation-play-state: running; }
@keyframes nome-desliza { to { background-position: -200% 0; } }
@keyframes nome-brilha { to { background-position: 0% 0; } }

/* Decoração em volta da foto: parada nas listas, mexe com o mouse em cima ou no cartão. */
.enfeite {
  position: absolute; left: 50%; top: 50%; width: 140%; height: 140%;
  transform: translate(-50%, -50%); pointer-events: none; overflow: visible; z-index: 1;
}
.enfeite * { animation-play-state: paused !important; }
.animar .enfeite *, .avatar:hover .enfeite *, .membro:hover .enfeite *, .mensagem:hover .enfeite *,
.quadro:hover .enfeite *, .decoracao:hover .enfeite * { animation-play-state: running !important; }
.e-chama { transform-box: fill-box; transform-origin: 50% 100%; animation: e-chama 0.7s ease-in-out infinite alternate; }
@keyframes e-chama { from { transform: scaleY(0.82); opacity: 0.85; } to { transform: scaleY(1.12); opacity: 1; } }
.e-pulsar { animation: e-pulsar 1.4s ease-in-out infinite alternate; }
@keyframes e-pulsar { from { opacity: 0.5; } to { opacity: 1; } }
.e-girar { transform-box: view-box; transform-origin: 70px 70px; animation: e-girar 9s linear infinite; }
@keyframes e-girar { to { transform: rotate(360deg); } }
.e-flutuar { animation: e-flutuar 1.6s ease-in-out infinite alternate; }
@keyframes e-flutuar { to { transform: translateY(-4px); } }
.e-piscar { animation: e-piscar 2.4s linear infinite; }
@keyframes e-piscar { 0%, 64%, 100% { opacity: 1; } 70% { opacity: 0.15; } 76% { opacity: 1; } 82% { opacity: 0.35; } }
.e-balancar { transform-box: fill-box; transform-origin: 50% 100%; animation: e-balancar 1.8s ease-in-out infinite alternate; }
@keyframes e-balancar { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .enfeite *, .nome-estilo { animation: none !important; } }

/* Bolinha do status: verde, amarela (ausente), vermelha (não perturbe), vazada (invisível). */
.membro .avatar::after { content: none; }
.avatar[data-status]::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; z-index: 2;
  width: 11px; height: 11px; border-radius: 50%;
  background: #3ddc84; border: 3px solid var(--fundo-1);
}
.avatar[data-status="ausente"]::after { background: #f5b83d; }
.avatar[data-status="naoperturbe"]::after { background: #ff5c61; }
.avatar[data-status="invisivel"]::after { background: var(--fundo-1); box-shadow: inset 0 0 0 2.5px #7d7d8a; }

/* O cartão de perfil. */
.cartao-perfil {
  width: 300px; max-width: calc(100vw - 16px); border-radius: 18px; overflow: hidden;
  background: #14131b; border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
}
.cartao-perfil.flutuante { position: fixed; }
.cartao-perfil.com-tema { background: linear-gradient(165deg, var(--t1), var(--t2)); }
.cartao-capa { height: 106px; background-size: cover; background-position: center; }
.cartao-foto { position: relative; height: 42px; }
.cartao-foto .avatar { position: absolute; top: -46px; left: 22px; box-shadow: 0 0 0 6px #14131b; }
.cartao-perfil.com-tema .cartao-foto .avatar { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55); }
.cartao-foto .avatar[data-status]::after { width: 18px; height: 18px; border-width: 4px; border-color: #14131b; right: 0; bottom: 0; }
.cartao-corpo { margin: 4px 10px 10px; padding: 12px 14px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.42); display: grid; gap: 6px; }
.cartao-nome { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.cartao-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.cartao-status .bolinha { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cartao-bio { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; color: var(--texto); }
.cartao-sala { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.cartao-editar { justify-self: start; margin-top: 6px; }

/* O editor do perfil (Ajustes). */
.editor-perfil { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.editor-campos { display: grid; gap: 16px; min-width: 0; }
.editor-lado { position: sticky; top: 0; }
.editor-pe { display: flex; justify-content: flex-end; }
.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.linha-botoes select, .editor-campos textarea, .editor-campos select {
  height: 34px; padding: 0 10px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); color: var(--texto); font-size: 13px;
}
.editor-campos textarea { height: auto; padding: 8px 10px; resize: vertical; font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.linha-botoes input[type="color"] { width: 38px; height: 34px; padding: 2px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); cursor: pointer; }
.marcar { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 13px; }
.campo-titulo { display: flex; justify-content: space-between; }
.contador { color: var(--texto-3); font-weight: 500; text-transform: none; }
.decoracoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; text-transform: none; letter-spacing: 0; }
.decoracao {
  display: grid; justify-items: center; gap: 8px; padding: 14px 4px 8px; border-radius: 12px;
  background: var(--superficie); border: 1px solid transparent; color: var(--texto-2);
}
.decoracao small { font-size: 11px; font-weight: 500; }
.decoracao:hover { background: var(--superficie-2); }
.decoracao[aria-checked="true"] { border-color: var(--limao); color: var(--texto); }
/* No perfil a janela de ajustes precisa de mais espaço: os campos e a prévia do cartão lado a lado. */
.ajustes { width: min(1000px, 100%); height: min(700px, calc(100vh - 48px)); }
@media (max-width: 1050px) {
  .editor-perfil { grid-template-columns: 1fr; }
  .editor-lado { position: static; order: -1; justify-self: center; }
}

/* Instalar no Mac: a linha do Terminal. */
.instalar-comando {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px;
  background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--limao-letra);
  font: 12px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.instalar-mais > summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.instalar-mais > * + * { margin-top: 8px; }

/* ---------- chat: anexos, resposta, reações, editar, apagar ---------- */

.mensagem-corpo { grid-column: 2; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.mensagem-corpo > * { grid-column: 1; }
.mensagem-corpo > .mensagem-texto { justify-self: stretch; }
.editada { color: var(--texto-3); font-size: 11px; }
.mensagem.destaque { background: rgba(198, 244, 50, 0.12); transition: background 0.4s; }
.mensagem-acoes {
  position: absolute; right: 16px; top: -14px; z-index: 3;
  display: none; gap: 2px; padding: 2px; border-radius: 10px;
  background: #17151f; border: 1px solid var(--linha-forte); box-shadow: var(--sombra);
}
.mensagem:hover .mensagem-acoes, .mensagem-acoes:focus-within { display: flex; }
.mensagem-acoes .botao-icone { width: 30px; height: 28px; }
.mensagem-acoes .perigo:hover { color: var(--vermelho); background: var(--vermelho-fundo); }
/* No celular (sem mouse): as ações só na mensagem tocada (antes ficavam embaixo de todas). */
@media (hover: none) {
  .mensagem-acoes { display: none !important; }
  .mensagem.tocada .mensagem-acoes { position: static; display: flex !important; grid-column: 2; justify-self: start; box-shadow: none; margin-top: 4px; }
  .mensagem.tocada { background: rgba(255, 255, 255, 0.035); }
}

.resposta {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  color: var(--texto-3); font-size: 12.5px; text-align: left;
}
.resposta b { color: var(--texto-2); flex: none; }
.resposta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resposta:hover span { color: var(--texto-2); }

.anexos { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.anexo-imagem img { display: block; max-width: min(400px, 100%); max-height: 300px; border-radius: 10px; background: var(--superficie); }
.anexo-video { display: block; max-width: min(460px, 100%); max-height: 320px; border-radius: 10px; background: #000; }
.anexo-audio { display: grid; gap: 4px; color: var(--texto-3); }
.anexo-audio audio { width: min(320px, 70vw); height: 36px; }
.anexo-arquivo {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: min(360px, 100%);
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--texto);
}
.anexo-arquivo:hover { text-decoration: none; background: var(--superficie-2); }
.anexo-arquivo span { display: grid; min-width: 0; }
.anexo-arquivo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; color: #8ec5ff; }
.anexo-arquivo small { color: var(--texto-3); }

.reacoes { display: flex; flex-wrap: wrap; gap: 4px; }
.reacao {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px;
  border-radius: 8px; background: var(--superficie); border: 1px solid transparent; font-size: 14px;
}
.reacao small { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.reacao:hover { border-color: var(--linha-forte); }
.reacao.minha { background: rgba(198, 244, 50, 0.14); border-color: rgba(198, 244, 50, 0.5); }
.reacao.minha small { color: var(--limao-letra); }
.reacao.adicionar { color: var(--texto-3); opacity: 0; }
.mensagem:hover .reacao.adicionar { opacity: 1; }

.escolher-emoji {
  position: fixed; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra);
}
.escolher-emoji.da-chamada { grid-template-columns: repeat(6, 40px); }
.escolher-emoji button { height: 34px; border-radius: 8px; font-size: 20px; line-height: 1; }
.escolher-emoji.da-chamada button { height: 40px; font-size: 24px; }
.escolher-emoji button:hover { background: var(--superficie-2); transform: scale(1.12); }

textarea.editando {
  width: 100%; min-height: 38px; padding: 8px 10px; resize: vertical;
  background: var(--fundo-1); border: 1px solid rgba(198, 244, 50, 0.45); border-radius: 10px; outline: none;
}
.dica-editar { display: block; color: var(--texto-3); font-size: 11.5px; margin-top: 2px; }

.faixa-resposta, .faixa-anexos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 12px;
  background: var(--fundo-1); border: 1px solid var(--linha); color: var(--texto-2); font-size: 13px;
}
.faixa-resposta span { flex: 1; }
.anexo-pendente {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px;
  max-width: 240px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--superficie-2);
}
.anexo-pendente.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.anexo-pendente small { color: var(--texto-3); flex: none; }
.anexo-barra { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--limao); transition: width 0.2s; }
.caixa-texto > .botao-icone:first-child { margin-left: -4px; }

#vista-texto.soltando::after {
  content: "Solte pra mandar"; position: absolute; inset: 12px; z-index: 20;
  display: grid; place-items: center; border-radius: 16px;
  border: 2px dashed var(--limao); background: rgba(9, 9, 11, 0.82);
  color: var(--limao-letra); font-size: 18px; font-weight: 700; pointer-events: none;
}
#vista-texto { position: relative; }

/* Emoji voando na chamada: só sobe e some. */
.quadro, .palco-corpo { position: relative; }
.emoji-voando {
  position: absolute; bottom: 14%; z-index: 6; font-size: 36px; line-height: 1;
  pointer-events: none; animation: voar 2.2s ease-out forwards;
}
@keyframes voar {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  15% { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -150px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .emoji-voando { animation-duration: 1.2s; } }

/* ---------- piscadas (os winks do MSN) e o "chamar a atenção" ---------- */

.piscada { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none; }
.piscada svg { width: min(72vmin, 520px); height: auto; overflow: visible; animation: pz-entrar 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.piscada.saindo svg { animation: pz-sair 0.35s ease-in forwards; }
@keyframes pz-entrar { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pz-sair { to { transform: scale(0.6); opacity: 0; } }

.pz-texto { transform-box: fill-box; transform-origin: center; animation: pz-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both; }
@keyframes pz-pop { from { transform: scale(0); } to { transform: scale(1); } }
.pz-pulsar { animation: pz-pulsar 0.45s ease-in-out 6 alternate; }
@keyframes pz-pulsar { to { transform: scale(1.12); } }
.pz-subir { animation: pz-subir 1.6s ease-out both; }
@keyframes pz-subir {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { transform: translateY(-10px) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}
.pz-bater { animation: pz-bater 1.8s ease-in-out both; }
@keyframes pz-bater {
  0% { transform: scale(0.9); } 10% { transform: scale(1.15); } 20% { transform: scale(1); }
  32% { transform: scale(1.22); } 45% { transform: scale(1); } 85% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pz-estourar { animation: pz-estourar 1.2s ease-out 1.6s both; }
@keyframes pz-estourar { from { transform: translateY(0) scale(0.3); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-170px) scale(1.5); opacity: 0; } }
.pz-bomba { animation: pz-tremer 0.12s linear 12 alternate, pz-sumir 0.12s linear 1.45s forwards; }
@keyframes pz-tremer { from { transform: translate(-3px, 1px) rotate(-1.5deg); } to { transform: translate(3px, -1px) rotate(1.5deg); } }
@keyframes pz-sumir { to { opacity: 0; } }
.pz-faisca { animation: pz-faisca 0.15s linear infinite alternate; }
@keyframes pz-faisca { from { transform: scale(0.7) rotate(0deg); } to { transform: scale(1.25) rotate(30deg); } }
.pz-explosao { opacity: 0; animation: pz-explodir 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) 1.45s both; }
@keyframes pz-explodir { 0% { transform: scale(0.1); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.pz-balancar { animation: pz-balancar 0.3s ease-in-out infinite alternate; }
@keyframes pz-balancar { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.pz-lagrima { transform-box: fill-box; animation: pz-lagrima 0.6s ease-in infinite; }
@keyframes pz-lagrima { from { transform: translateY(0); opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
.pz-acenar { animation: pz-acenar 0.35s ease-in-out infinite alternate; }
@keyframes pz-acenar { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
.pz-piscar { animation: pz-piscar 0.35s steps(2) infinite; }
@keyframes pz-piscar { 50% { opacity: 0; } }
.pz-voar { animation: pz-voar 2.8s ease-in-out both; }
@keyframes pz-voar { 0% { transform: translateX(-380px); } 35%, 65% { transform: translateX(0); } 100% { transform: translateX(420px); } }
.pz-flutuar { animation: pz-flutuar 0.6s ease-in-out infinite alternate; }
@keyframes pz-flutuar { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
.pz-barriga { animation: pz-barriga 0.4s ease-in-out infinite alternate; }
@keyframes pz-barriga { from { transform: scale(1, 1); } to { transform: scale(1.04, 0.97); } }
.pz-espatula { animation: pz-espatula 0.5s ease-in-out infinite alternate; }
@keyframes pz-espatula { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }
.pz-balao { animation: pz-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s both; }
.pz-passos { animation: pz-passos 0.8s ease-in-out infinite alternate; }
@keyframes pz-passos { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.pz-gingar { animation: pz-gingar 0.4s ease-in-out infinite alternate; }
@keyframes pz-gingar { from { transform: scale(1.08, 0.92) rotate(-6deg); } to { transform: scale(0.94, 1.06) rotate(6deg); } }

.app.tremendo { animation: tremer 0.6s linear; }
@keyframes tremer {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-9px, 2px); }
  20%, 40%, 60%, 80% { transform: translate(9px, -2px); }
}

/* A piscada na conversa, como no MSN: "fulano mandou uma piscada: Ver de novo". */
.aviso-piscada { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--texto-2); font-size: 13.5px; }
.aviso-piscada b { color: var(--texto); }
.aviso-piscada button { color: #8ec5ff; text-decoration: underline; }
.aviso-piscada.atencao { color: #ffb36b; font-weight: 600; }

.escolher-piscada {
  position: fixed; width: 300px; padding: 10px; display: grid; gap: 8px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra);
}
.escolher-piscada .pilula { justify-content: center; }

/* O Procura squad (16/10): a página do Início com o mural de quem procura
   gente pra jogar. A cara de cada jogo é uma cor e um emoji (--cor-jogo). */
.inicio-pagina { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sq2-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 32px; display: grid; align-content: start; gap: 16px; }
.sq2-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 18px;
  background: radial-gradient(70% 120% at 100% 0%, rgba(97, 65, 197, 0.55), transparent 60%), repeating-linear-gradient(-58deg, transparent 0 90px, rgba(255, 255, 255, 0.03) 90px 91px), var(--superficie);
  border: 1px solid var(--linha-forte);
}
.sq2-hero-texto { display: grid; gap: 8px; max-width: 54ch; }
.sq2-hero h1 { margin: 0; font: 700 clamp(26px, 3.4vw, 34px)/1.05 var(--fonte-marca); letter-spacing: -0.04em; color: var(--texto); }
.sq2-hero p { margin: 0; color: var(--texto-2); font-size: 14px; }
.sq2-hero-selo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 99px; background: rgba(190, 243, 67, 0.12); color: var(--limao-letra); font-size: 12px; font-weight: 700; }
.sq2-ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--limao); animation: sq2-pulso 1.8s ease-out infinite; }
@keyframes sq2-pulso { 0% { box-shadow: 0 0 0 0 rgba(190, 243, 67, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(190, 243, 67, 0); } 100% { box-shadow: 0 0 0 0 rgba(190, 243, 67, 0); } }
.sq2-hero-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; background: var(--limao); color: #10150a; font: 700 15px var(--fonte-marca); letter-spacing: -0.01em; }
.sq2-hero-botao:hover, .sq2-topo-botao:hover { filter: brightness(1.06); }
.sq2-filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sq2-filtro { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--linha); color: var(--texto-2); font-size: 13px; font-weight: 600; }
.sq2-filtro b { padding: 0 6px; border-radius: 99px; background: var(--superficie-3); color: var(--texto); font-size: 11.5px; }
.sq2-filtro:hover { color: var(--texto); border-color: var(--linha-forte); }
.sq2-filtro.ativo { background: var(--texto); color: var(--fundo-0); border-color: transparent; }
.sq2-filtro.ativo b { background: rgba(127, 127, 127, 0.25); color: inherit; }
.sq2-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sq2-cartao { --cor-jogo: #8b7cf6; position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); overflow: hidden; }
.sq2-cartao::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--cor-jogo); }
.sq2-cartao::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 0% 0%, color-mix(in srgb, var(--cor-jogo) 16%, transparent), transparent 70%); pointer-events: none; }
.sq2-cartao > * { position: relative; z-index: 1; }
.sq2-cartao.meu { border-color: rgba(190, 243, 67, 0.5); }
.sq2-cartao-topo { display: flex; align-items: center; gap: 12px; }
.sq2-cartao-emoji { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--cor-jogo) 22%, var(--superficie-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-jogo) 40%, transparent); }
.sq2-cartao-jogo { flex: 1; min-width: 0; display: grid; }
.sq2-cartao-jogo b { color: var(--texto); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq2-cartao-jogo span { color: var(--texto-2); font-size: 13px; }
.sq2-meu { padding: 3px 8px; border-radius: 99px; background: rgba(190, 243, 67, 0.14); color: var(--limao-letra); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }
.sq2-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sq2-falta { padding: 4px 10px; border-radius: 8px; background: var(--limao); color: #10150a; font: 700 12px var(--fonte-marca); letter-spacing: 0.02em; }
.sq2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); font-size: 12px; font-weight: 600; }
.sq2-chip.agora { color: var(--limao-letra); }
.sq2-recado { margin: 0; padding: 8px 12px; border-left: 3px solid var(--cor-jogo); border-radius: 0 10px 10px 0; background: var(--superficie-2); color: var(--texto); font-size: 13.5px; overflow-wrap: anywhere; }
.sq2-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sq2-autor { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--texto); }
.sq2-autor > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq2-autor small { color: var(--texto-3); font-size: 12px; }
.sq2-topo-botao { flex: none; padding: 8px 18px; border-radius: 10px; background: var(--limao); color: #10150a; font: 700 14px var(--fonte-marca); }
.sq2-quantos { color: var(--texto-2); font-size: 12.5px; }
.sq2-toparam { display: grid; gap: 6px; }
.sq2-pessoa { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--superficie-2); font-size: 13px; }
.sq2-pessoa > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.sq2-vazio { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--texto-2); }
.sq2-vazio b { color: var(--texto); font-size: 16px; }
.sq2-vazio p { margin: 0; }
.sq2-vazio-icone { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: rgba(97, 65, 197, 0.18); color: #b9a6ff; box-shadow: 0 0 40px rgba(97, 65, 197, 0.35); }
.sq2-vazio-icone .ic { width: 30px; height: 30px; }
.sq2-nada { margin: 8px 0; color: var(--texto-2); }
.sq2-form { display: grid; gap: 12px; padding: 18px; border-radius: 16px; background: var(--superficie); border: 1px solid rgba(190, 243, 67, 0.35); }
.sq2-form-topo { display: grid; gap: 2px; }
.sq2-form-topo b { color: var(--texto); font-size: 16px; }
.sq2-form-topo small { color: var(--texto-2); font-size: 12.5px; }
.sq2-rotulo { color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sq2-jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; }
.sq2-jogo { --cor-jogo: #8b7cf6; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); border: 1px solid transparent; color: var(--texto); font-size: 12.5px; font-weight: 600; text-align: left; }
.sq2-jogo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq2-jogo:hover { border-color: var(--linha-forte); }
.sq2-jogo[aria-pressed="true"] { border-color: var(--cor-jogo); background: color-mix(in srgb, var(--cor-jogo) 16%, var(--superficie-2)); }
.sq2-jogo-emoji { font-size: 16px; }
.sq2-campo { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--fundo-1); color: var(--texto); font: inherit; font-size: 13.5px; }
.sq2-hora { width: auto; margin-top: 6px; }
.sq2-duas { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.sq2-bloco { display: grid; gap: 6px; }
.sq2-segmento { display: flex; flex-wrap: wrap; gap: 6px; }
.sq2-segmento button { padding: 7px 12px; border-radius: 10px; background: var(--superficie-2); color: var(--texto-2); font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.sq2-segmento button[aria-pressed="true"] { background: rgba(190, 243, 67, 0.12); color: var(--limao-letra); border-color: rgba(190, 243, 67, 0.45); }
.sq2-passo { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--superficie-2); }
.sq2-passo button { width: 32px; height: 32px; border-radius: 8px; color: var(--texto); font-size: 18px; }
.sq2-passo button:hover { background: var(--superficie-3); }
.sq2-numero { min-width: 26px; text-align: center; color: var(--texto); font: 700 16px var(--fonte-marca); }
.sq2-form-pe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .sq2-corpo { padding: 14px 12px 24px; }
  .sq2-hero { padding: 18px; }
  .sq2-grade, .sq2-duas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sq2-ponto { animation: none; } }

/* O telão da call (16/10): o vídeo em cima dos botões da sala e o painel da fila. */
.telao-tocando { flex: none; display: flex; gap: 12px; align-items: center; margin: 0 16px; padding: 10px; border-radius: 14px; background: #17151f; border: 1px solid var(--linha-forte); }
.telao-lugar { flex: none; width: 356px; max-width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border-radius: 10px; overflow: hidden; background: #000; }
.telao-video { display: block; width: 100%; height: 100%; border: 0; }
.telao-info { min-width: 0; display: grid; gap: 4px; align-content: center; }
.telao-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--limao); }
.telao-titulo { font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.telao-quem { color: var(--texto-2); font-size: 12px; }
.telao-botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.telao-desligada { align-self: center; margin: 0 16px; }
.telao-painel {
  position: fixed; width: 340px; max-width: calc(100vw - 16px); max-height: min(520px, calc(100vh - 32px)); overflow: auto; padding: 14px; display: grid; gap: 10px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra);
}
.telao-painel-topo { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.telao-explica, .telao-vazio { margin: 0; color: var(--texto-2); font-size: 12.5px; }
.telao-form { display: flex; gap: 6px; }
.telao-campo { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.telao-agora { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--superficie); }
.telao-agora small { color: var(--limao); font-weight: 700; font-size: 11.5px; }
.telao-agora span { color: var(--texto-2); font-size: 12px; }
.telao-fila { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: fila; }
.telao-fila li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--superficie); font-size: 12.5px; }
.telao-fila li::before { counter-increment: fila; content: counter(fila); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.telao-fila li span { flex: 1; min-width: 0; display: grid; }
.telao-fila li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; }
.telao-fila li small { color: var(--texto-2); }
.telao-tirar { width: 24px; height: 24px; border-radius: 6px; color: var(--texto-2); font-size: 16px; }
.telao-tirar:hover { background: var(--superficie-2); color: var(--texto); }
.telao-volume, .telao-abaixar { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.telao-volume { flex-direction: column; align-items: stretch; gap: 4px; }
.telao-volume input { width: 100%; accent-color: var(--limao); }
.telao-abaixar input { accent-color: var(--limao); }
@media (max-width: 720px) {
  .telao-tocando { flex-direction: column; align-items: stretch; margin: 0 8px; }
  .telao-lugar { width: 100%; }
}
/* A rádio da call (16/10): a barrinha da música (capa, música, artista e o link do SoundCloud) e o painel da fila. */
.radio-tocando { flex: none; display: grid; margin: 0 16px; padding: 8px 10px; border-radius: 14px; background: #17151f; border: 1px solid var(--linha-forte); }
.radio-linha { display: flex; gap: 10px; align-items: center; min-width: 0; }
.radio-capa { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--superficie); }
.radio-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.radio-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--limao); }
.radio-titulo { color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-titulo:hover { text-decoration: underline; }
.radio-credito, .radio-quem { color: var(--texto-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-credito a, .radio-explica a { color: var(--limao); text-decoration: none; }
.radio-credito a:hover, .radio-explica a:hover { text-decoration: underline; }
.radio-quem { font-size: 11.5px; }
.radio-nota { color: #f5b84b; font-size: 11.5px; }
.radio-botoes { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 46%; }
/* O player escondido continua tocando: fica sem altura, não some da página. */
.radio-lugar { height: 0; overflow: hidden; border-radius: 10px; }
.radio-lugar.aberto { height: 166px; margin-top: 8px; }
.radio-player { display: block; width: 100%; height: 166px; border: 0; }
.radio-desligada { align-self: center; margin: 0 16px; }
.radio-painel {
  position: fixed; width: 360px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 32px)); overflow: auto; padding: 14px; display: grid; gap: 10px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra);
}
.radio-painel-topo { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.radio-explica, .radio-vazio { margin: 0; color: var(--texto-2); font-size: 12.5px; }
.radio-form { display: flex; gap: 6px; }
.radio-campo { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.radio-dinamico { display: grid; gap: 10px; }
.radio-agora { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: var(--superficie); min-width: 0; }
.radio-agora small { color: var(--limao); font-weight: 700; font-size: 11.5px; }
.radio-agora a { color: var(--texto); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-agora a:hover { text-decoration: underline; }
.radio-agora span { color: var(--texto-2); font-size: 12px; }
.radio-fila { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: fila; }
.radio-fila li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--superficie); font-size: 12.5px; }
.radio-fila li::before { counter-increment: fila; content: counter(fila); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.radio-fila li img { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.radio-fila li span { flex: 1; min-width: 0; display: grid; }
.radio-fila li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-weight: 600; }
.radio-fila li small { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-tirar { width: 24px; height: 24px; border-radius: 6px; color: var(--texto-2); font-size: 16px; }
.radio-tirar:hover { background: var(--superficie-2); color: var(--texto); }
.radio-volume, .radio-opcao { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); }
.radio-volume { flex-direction: column; align-items: stretch; gap: 4px; }
.radio-volume input, .radio-opcao input { accent-color: var(--limao); }
.radio-volume input { width: 100%; }
@media (max-width: 720px) {
  .radio-tocando { margin: 0 8px; }
  .radio-linha { flex-wrap: wrap; }
  .radio-info { flex-basis: calc(100% - 60px); }
  .radio-botoes { max-width: none; width: 100%; justify-content: flex-start; }
}
.piscadas-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.piscadas-grade button { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; color: var(--texto-2); font-size: 11px; }
.piscadas-grade button:hover { background: var(--superficie-2); color: var(--texto); }
.piscadas-grade svg { width: 52px; height: 52px; }
.piscadas-grade svg * { animation: none !important; }
.piscadas-grade .pz-explosao { opacity: 0; }

/* ---------- cargos e moderação ---------- */

.nome-pessoa { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; max-width: 100%; }
.nome-pessoa > .nome-estilo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nome-icone { flex: none; font-size: 0.92em; line-height: 1; }
.nome-estilo.efeito-holo {
  background-image: linear-gradient(100deg, #ff9ad5, #b69bff, #7fd6ff, #8ff0c0, #fff3a1, #ff9ad5);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nome-desliza 5s linear infinite paused;
}
.cartao-dono { margin: 0; font-size: 12.5px; font-weight: 700; color: #ffd54f; }
.cartao-cargos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cargo-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07); font-size: 12px; font-weight: 600; color: var(--texto);
}
.cargo-chip .bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--cor-cargo, #7d7d8a); }
.cargo-chip.holo .bolinha, .cargo-bolinha.holo { background: linear-gradient(135deg, #ff9ad5, #7fd6ff, #8ff0c0); }
.cartao-castigo { margin: 0; color: #ffb36b; font-size: 12.5px; font-weight: 600; }
.cartao-moderar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--linha); }

.dica-cargos { font-size: 13px; color: var(--texto-3); margin: 0; }
.cargos-lista, .banidos-lista { display: grid; gap: 6px; }
.cargo-linha { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--superficie); }
.cargo-bolinha { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--cor-cargo, #7d7d8a); }
.cargo-textos { flex: 1; min-width: 0; display: grid; }
.cargo-textos small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-ordem { display: flex; }
.permissoes { display: grid; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.permissoes .marcar { font-size: 13.5px; color: var(--texto); }
.linha-botoes input:not([type]) { height: 34px; width: 64px; padding: 0 10px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); }
.caixa-texto textarea:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- GIFs ---------- */

.botao-gif {
  flex: none; height: 24px; padding: 0 6px; margin: 0 2px 4px; border-radius: 7px;
  border: 1.5px solid var(--texto-3); color: var(--texto-2); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
}
.botao-gif:hover:not(:disabled) { color: var(--texto); border-color: var(--texto-2); }
.escolher-gif {
  position: fixed; width: min(380px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 10px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra);
}
.escolher-gif input { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); outline: none; }
.gifs-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; max-height: 340px; }
.gifs-grade button { border-radius: 8px; overflow: hidden; background: var(--superficie); aspect-ratio: 1; }
.gifs-grade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gifs-situacao { margin: 0; color: var(--texto-3); font-size: 13px; }
.giphy { color: var(--texto-3); font-size: 10.5px; text-align: right; }
.anexo-gif img { display: block; max-width: min(300px, 100%); height: auto; border-radius: 10px; background: var(--superficie); }

/* ---------- câmera na sala ---------- */
.quadro.com-camera { background: #000 !important; }
.quadro .video-camera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.quadro .video-camera.espelho { transform: scaleX(-1); }
.quadro.com-camera .quadro-nome { z-index: 2; }
/* Os botões da sala: o nome só aparece se couber (26/10, palco.js mede a
   barra). Os botões não encolhem: sem espaço, a barra fica só com os ícones
   (o nome aparece ao parar o mouse em cima) e, se nem assim couber, quebra a
   linha. Antes eles encolhiam e os nomes ficavam um por cima do outro. */
.controles > .controle, .controles > .grupo-controle { flex-shrink: 0; }
.controles.compactos { flex-wrap: wrap; row-gap: 8px; }
.controles.compactos .controle span { display: none; }
.controles.compactos .controle { padding: 0 12px; }
/* A setinha do menu do servidor vira quando o menu está aberto. */
.lateral-topo .ic { transition: transform 0.15s; }
.lateral-topo[aria-expanded="true"] .ic { transform: rotate(180deg); }

/* Caixinha de marcar dentro de um campo: o "input" do campo tem largura cheia,
   e a caixinha empurrava o texto pra fora da janela (visto no "Cargo novo"). */
.campo input[type="checkbox"], .marcar input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; flex: none; accent-color: var(--limao);
}
.marcar { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; text-transform: none; letter-spacing: 0; font-weight: 500; }
.marcar input[type="checkbox"] { margin-top: 1px; }

/* Login no programa do Mac: o botão e a explicação um embaixo do outro (lado a
   lado, o botão virava uma bolinha espremida). */
.botao-google-caixa { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.botao-google-caixa .botao-google { white-space: nowrap; padding: 12px 22px; display: inline-flex; align-items: center; gap: 10px; }
.botao-google-caixa .sub { margin: 0; font-size: 13px; }

/* Quem já entrou e não está agora. */
.membro.offline { opacity: 0.45; }
.membro.offline:hover { opacity: 0.85; }
.avatar[data-status="offline"]::after { background: #5c5c66; }
.cartao-desde { margin: 2px 0 0; color: var(--texto-3); font-size: 12px; }

/* ---------- boas-vindas e primeiros passos ---------- */

.boas-vindas {
  width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  background: #14131b; border: 1px solid var(--linha-forte); border-radius: 22px; box-shadow: var(--sombra);
  padding: 0 26px 22px; display: grid; gap: 16px;
}
.bv-capa {
  margin: 0 -26px; height: 120px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 20%, rgba(198, 244, 50, 0.35), transparent 60%), linear-gradient(135deg, #1d2607, #0f2a2e 60%, #1b1035);
  border-radius: 22px 22px 0 0;
}
.bv-capa img { border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.boas-vindas h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.boas-vindas h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.bv-recado { margin: 0; color: var(--texto-2); font-size: 14.5px; white-space: pre-wrap; }
.bv-rostos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bv-mais { color: var(--texto-3); font-weight: 700; font-size: 13px; }
.bv-passos { display: grid; gap: 6px; }
.bv-passo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--superficie); }
.bv-passo.feito { opacity: 0.6; }
.bv-passo.feito b { text-decoration: line-through; }
.bv-marca { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; color: var(--limao-texto); }
.bv-passo.feito .bv-marca { background: var(--limao); border-color: var(--limao); }
.bv-textos { flex: 1; min-width: 0; display: grid; }
.bv-textos small { color: var(--texto-3); }
.bv-regras ol { margin: 0; padding-left: 20px; color: var(--texto-2); display: grid; gap: 4px; }
.bv-pe { display: flex; justify-content: flex-end; }

.aviso-chegou { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--texto-2); }
.aviso-chegou b { color: var(--texto); }
.ajustes-corpo textarea { width: 100%; padding: 10px 12px; border-radius: var(--raio); background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto); font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; resize: vertical; }

/* ---------- o lote do cardápio de 12/10 à noite ---------- */

/* Temas (Ajustes → Aparência). O escuro é o de sempre, no :root. */
html[data-tema="preto"] {
  --fundo-0: #000; --fundo-1: #050506; --fundo-2: #0a0a0c;
  --superficie: #121215; --superficie-2: #1a1a1f; --superficie-3: #24242b;
}
html[data-tema="cinza"] {
  --fundo-0: #1e1f22; --fundo-1: #2b2d31; --fundo-2: #313338;
  --superficie: #383a40; --superficie-2: #404249; --superficie-3: #4e5058;
  --linha: rgba(255, 255, 255, 0.07); --linha-forte: rgba(255, 255, 255, 0.13);
}
html[data-tema="claro"] {
  --fundo-0: #e4e4ea; --fundo-1: #f0f0f4; --fundo-2: #fafafc;
  --superficie: #ebebf0; --superficie-2: #dfdfe6; --superficie-3: #cfcfd8;
  --linha: rgba(0, 0, 0, 0.08); --linha-forte: rgba(0, 0, 0, 0.14);
  --texto: #14131b; --texto-2: #3c3c46; --texto-3: #6a6a77;
  --limao-escuro: #eaf8c0; --vermelho-fundo: #ffe1e2; --limao-letra: #4a7300;
  color-scheme: light;
}
html[data-tema="claro"] :is(.modal, .ajustes, .cartao-perfil, .boas-vindas, .menu, .escolher-emoji, .escolher-piscada, .escolher-gif, .mensagem-acoes, .aviso) { background: #fff; }
html[data-tema="claro"] .painel-eu { background: var(--fundo-0); }
html[data-tema="claro"] .palco { background: var(--fundo-1); }
html[data-tema="claro"] .mensagem-texto { color: var(--texto); }
html[data-tema="claro"] .cartao-foto .avatar { box-shadow: 0 0 0 6px #fff; }
html[data-tema="claro"] .cartao-foto .avatar[data-status]::after { border-color: #fff; }
html[data-tema="claro"] .cartao-corpo { background: rgba(255, 255, 255, 0.78); }
html[data-tema="claro"] .pilula:not(.limao):not(.escura):not(.perigo) { background: #14131b; color: #fff; }
html[data-tema="claro"] .pilula:not(.limao):not(.escura):not(.perigo):hover:not(:disabled) { background: #2b2b33; }
html[data-tema="claro"] a { color: #1764c9; }
html[data-tema="claro"] .lateral-topo:hover { background: rgba(0, 0, 0, 0.03); }

/* Degradês: o fundo colorido aparece por trás das colunas, que ficam translúcidas. */
html:not([data-degrade="nenhum"]) body { background: var(--degrade, var(--fundo-0)) fixed; }
html:not([data-degrade="nenhum"]) {
  --fundo-0: rgba(6, 6, 10, 0.38); --fundo-1: rgba(8, 8, 12, 0.48); --fundo-2: rgba(12, 12, 16, 0.3);
}
html[data-tema="claro"]:not([data-degrade="nenhum"]) {
  --fundo-0: rgba(255, 255, 255, 0.45); --fundo-1: rgba(255, 255, 255, 0.6); --fundo-2: rgba(255, 255, 255, 0.72);
}
html:not([data-degrade="nenhum"]) .painel-eu { background: rgba(0, 0, 0, 0.25); }
html:not([data-degrade="nenhum"]) .palco { background: rgba(0, 0, 0, 0.25); }
html[data-degrade="aurora"] { --degrade: linear-gradient(135deg, #0b3b45 0%, #134e5e 35%, #1f6b52 70%, #2a2a5c 100%); }
html[data-degrade="por-do-sol"] { --degrade: linear-gradient(135deg, #3a1c5c 0%, #8e2f5a 45%, #d9603b 80%, #f0a04b 100%); }
html[data-degrade="oceano"] { --degrade: linear-gradient(135deg, #061a3a 0%, #0b3d7a 50%, #1a7bb5 100%); }
html[data-degrade="floresta"] { --degrade: linear-gradient(135deg, #0b2416 0%, #1b4d2e 50%, #3f7d3a 100%); }
html[data-degrade="uva"] { --degrade: linear-gradient(135deg, #1e0b3a 0%, #4b1d7a 50%, #8a3fb8 100%); }
html[data-degrade="neon"] { --degrade: linear-gradient(135deg, #12002b 0%, #3a0b6b 40%, #0b6b6b 75%, #39d98a 100%); }
html[data-degrade="cereja"] { --degrade: linear-gradient(135deg, #2b0612 0%, #6b1030 50%, #c2335a 100%); }

/* Aparência nos Ajustes: as amostras de tema e de degradê. */
.opcoes-aparencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.opcao-aparencia { display: grid; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid transparent; background: var(--superficie); color: var(--texto-2); font-size: 12px; }
.opcao-aparencia[aria-checked="true"] { border-color: var(--limao); color: var(--texto); }
.amostra { height: 44px; border-radius: 8px; border: 1px solid var(--linha-forte); }
.temas [data-valor="escuro"] .amostra { background: linear-gradient(90deg, #121214 0 22%, #18181b 22% 48%, #1a1a1e 48%); }
.temas [data-valor="meia-noite"] .amostra { background: radial-gradient(80% 90% at 100% 0%, rgba(97, 65, 197, 0.5), transparent 70%), #09090b; }
.temas [data-valor="preto"] .amostra { background: #000; }
.temas [data-valor="cinza"] .amostra { background: #313338; }
.temas [data-valor="claro"] .amostra { background: #f0f0f4; }
.degrades [data-valor="nenhum"] .amostra { background: repeating-linear-gradient(45deg, var(--superficie-2) 0 6px, var(--superficie) 6px 12px); }
.degrades [data-valor="aurora"] .amostra { background: linear-gradient(135deg, #0b3b45, #1f6b52, #2a2a5c); }
.degrades [data-valor="por-do-sol"] .amostra { background: linear-gradient(135deg, #3a1c5c, #d9603b, #f0a04b); }
.degrades [data-valor="oceano"] .amostra { background: linear-gradient(135deg, #061a3a, #1a7bb5); }
.degrades [data-valor="floresta"] .amostra { background: linear-gradient(135deg, #0b2416, #3f7d3a); }
.degrades [data-valor="uva"] .amostra { background: linear-gradient(135deg, #1e0b3a, #8a3fb8); }
.degrades [data-valor="neon"] .amostra { background: linear-gradient(135deg, #3a0b6b, #0b6b6b, #39d98a); }
.degrades [data-valor="cereja"] .amostra { background: linear-gradient(135deg, #2b0612, #c2335a); }
.degrades [data-valor="proprio"] .amostra { background: conic-gradient(from 200deg, #ff5c61, #f0a04b, #bef343, #39d98a, #1a7bb5, #8a3fb8, #ff5c61); }

/* Atalhos, convites, microfone, emojis e selos (Ajustes). */
.atalhos-lista, .convites-lista { display: grid; gap: 6px; }
.atalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--superficie); }
.atalho b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--texto-2); }
.avisos-situacao { margin: 0; color: var(--texto-2); }
.campo .marcar { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; align-items: flex-start; }
.campo .marcar small { color: var(--texto-3); font-weight: 400; }
.sensibilidade { display: grid; gap: 6px; margin: 0 0 8px 24px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto-2); font-size: 12.5px; }
.sensibilidade input[type="range"] { width: 100%; accent-color: var(--limao); }
.sensibilidade small { color: var(--texto-3); font-weight: 400; }
.nivel-caixa { position: relative; height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.nivel-mic { height: 100%; }
.nivel-mic span { display: block; height: 100%; width: 0; background: var(--limao); transition: width 0.08s linear; }
.nivel-marca { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--vermelho); }
.emojis-gestao { display: grid; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.emojis-gestao input { height: 34px; min-width: 0; padding: 0 10px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); }
.emojis-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-item { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border-radius: 10px; background: var(--superficie); font-size: 12px; color: var(--texto-2); }
.emoji-item img { width: 28px; height: 28px; object-fit: contain; }
.emoji-item .botao-icone { width: 24px; height: 24px; }
.selo-emoji { font-size: 20px; line-height: 1; }
.editor-previa { display: grid; justify-items: center; }

/* Estatísticas. */
.modal.estatisticas { width: min(720px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; }
.modal.estatisticas h3 { margin: 0 0 8px; font-size: 12px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.05em; }
.rankings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ranking { padding: 12px 14px; border-radius: 14px; background: var(--superficie); }
.ranking ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ranking li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ranking p { margin: 0; }
.posicao { width: 24px; text-align: center; flex: none; }
.quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking li b { color: var(--limao-letra); font-variant-numeric: tabular-nums; }
.picos { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 120px; }
.pico { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.pico span { display: block; min-height: 2px; background: var(--limao); border-radius: 4px 4px 2px 2px; }
.pico small { height: 12px; font-size: 10px; color: var(--texto-3); text-align: center; }
.canais-top { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--texto-2); }
.canais-top b { color: var(--texto); }

/* Cartão de perfil: @, recado (com reação), selos e perfil fechado. */
.cartao-arroba { margin: -4px 0 0; color: var(--texto-3); font-size: 12.5px; }
.cartao-recado { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); font-size: 13px; overflow-wrap: anywhere; }
.reagir-recado { display: flex; gap: 1px; flex: none; }
.reagir-recado button { width: 24px; height: 24px; border-radius: 6px; font-size: 14px; }
.reagir-recado button:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.12); }
.cartao-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.selo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 15px; cursor: default; }
.cartao-fechado { margin: 0; color: var(--texto-3); font-size: 12.5px; }

/* Barra lateral: favoritos, som de estúdio e a capa da comunidade. */
.canal-linha { position: relative; }
.canal-linha .canal { padding-right: 32px; }
.estrela-canal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: var(--texto-3); opacity: 0;
}
.canal-linha:hover .estrela-canal, .estrela-canal:focus-visible, .estrela-canal.ligada { opacity: 1; }
.estrela-canal:hover { background: var(--superficie-2); color: var(--texto); }
.estrela-canal.ligada { color: #ffd54f; }
.estrela-canal.ligada .ic { fill: currentColor; }
.etiqueta-estudio { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 5px; background: var(--limao-escuro); color: var(--limao-letra); }
.lateral-topo.com-capa { height: 100px; align-items: flex-end; padding-bottom: 12px; background-size: cover; background-position: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.tela-cheia.com-fundo { background-size: cover; background-position: center; }
.tela-cheia.com-fundo::before { display: none; }
.bv-gente { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chat: emojis da Resenha, mensagem só de emoji, Super Reação, voz, salvar. */
.emoji-proprio { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin: 0 1px; }
.mensagem-texto.so-emoji { font-size: 40px; line-height: 1.2; }
.mensagem-texto.so-emoji .emoji-proprio { width: 48px; height: 48px; vertical-align: -8px; }
.emoji-reacao { width: 18px; height: 18px; object-fit: contain; display: block; }
.escolher-emoji:not(.da-chamada) { display: flex; flex-direction: column; gap: 6px; max-height: min(420px, 70vh); overflow-y: auto; }
.emoji-grade { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; }
.emoji-grade .emoji-reacao { width: 24px; height: 24px; margin: auto; }
.emoji-secao { padding: 2px 4px 0; color: var(--texto-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.escolher-emoji .super-alternar { height: 30px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--texto-2); background: var(--superficie); }
.escolher-emoji .super-alternar:hover { transform: none; background: var(--superficie-2); }
.escolher-emoji .super-alternar[aria-pressed="true"] { background: linear-gradient(90deg, #ffd54f, #ff7ad9, #7c9cff); color: #170b1d; }
.escolher-emoji.modo-super .emoji-grade button:hover { background: rgba(255, 122, 217, 0.2); }
.reacao.super { border-color: rgba(255, 122, 217, 0.65); background: linear-gradient(135deg, rgba(255, 213, 79, 0.18), rgba(255, 122, 217, 0.18), rgba(124, 156, 255, 0.18)); box-shadow: 0 0 10px rgba(255, 122, 217, 0.28); }
.super-explosao { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.super-peca { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 26px; line-height: 30px; text-align: center; object-fit: contain; animation: super-voar 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.super-centro { position: absolute; left: 0; top: 0; width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 60px; line-height: 72px; text-align: center; object-fit: contain; animation: super-centro 1.1s ease-out both; }
@keyframes super-voar {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--giro)); opacity: 0; }
}
@keyframes super-centro {
  0% { transform: scale(0.2); opacity: 0; }
  25% { transform: scale(1.25); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.mensagem-acoes .botao-icone.salva { color: var(--limao-letra); }
.mensagem-acoes .botao-icone.salva .ic { fill: currentColor; }
.digitando-emojis { margin-right: 4px; }
.anexo-voz { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--superficie); color: var(--limao-letra); max-width: 100%; }
.anexo-voz audio { height: 32px; width: min(280px, 60vw); }
.botao-gravar.gravando { color: var(--vermelho); animation: piscar-gravando 1.2s ease-in-out infinite; }
.faixa-gravando { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px 8px 14px; border-radius: 12px; background: var(--vermelho-fundo); font-size: 13px; }
.ponto-gravando { width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); flex: none; animation: piscar-gravando 1s ease-in-out infinite; }
.tempo-gravando { font-variant-numeric: tabular-nums; font-weight: 600; }
@keyframes piscar-gravando { 50% { opacity: 0.35; } }

/* Busca e salvas. */
.modal.modal-lista { width: min(580px, 100%); max-height: calc(100vh - 48px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.modal-lista h2 { display: flex; align-items: center; gap: 8px; }
.campo-busca { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--fundo-1); border: 1px solid var(--linha-forte); outline: none; }
.campo-busca:focus { border-color: rgba(198, 244, 50, 0.5); }
.lista-resultados { display: grid; align-content: start; gap: 6px; overflow-y: auto; min-height: 60px; }
.lista-vazia { margin: 6px 2px; color: var(--texto-3); font-size: 13.5px; }
.resultado-total { color: var(--texto-3); }
.resultado { display: flex; align-items: flex-start; gap: 4px; border-radius: 12px; background: var(--superficie); }
.resultado:hover { background: var(--superficie-2); }
.resultado-ir { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 10px 12px; text-align: left; }
.resultado-topo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.resultado-topo small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultado-texto { color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.resultado-texto mark { background: rgba(198, 244, 50, 0.3); color: var(--texto); border-radius: 3px; padding: 0 1px; }
.resultado-lembrete { display: inline-flex; align-items: center; gap: 4px; color: var(--limao-letra); font-size: 12px; }
.resultado > .botao-icone { margin: 8px 8px 0 0; }
.resultado.apagada { align-items: center; justify-content: space-between; padding: 6px 4px 6px 12px; color: var(--texto-3); font-style: italic; }
.resultado.apagada > .botao-icone { margin: 0; }
.aviso .aviso-acao { margin-left: 10px; padding: 3px 12px; border-radius: 99px; background: var(--limao); color: var(--limao-texto); font-weight: 700; font-size: 12.5px; }

/* Chamar pra sala: a chamada chegando. */
.modal.chamado { width: min(340px, 100%); justify-items: center; text-align: center; }
.modal.chamado .modal-pe { justify-content: center; width: 100%; }
.chamado-foto { border-radius: 50%; animation: chamado-pulsar 1.4s ease-in-out infinite; }
@keyframes chamado-pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 244, 50, 0.5); }
  50% { box-shadow: 0 0 0 14px rgba(198, 244, 50, 0); }
}

/* Palco: miniatura da tela e quem está assistindo a minha. */
.quadro .previa-tela { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; z-index: 0; }
.quadro.com-previa > .avatar, .quadro.com-previa > .com-enfeite { display: none; }
.quadro-nome, .quadro .ao-vivo, .quadro-assistir, .quadro-topo, .quadro-volume { z-index: 1; }
/* "Carregando a tela" (17/10): cobre a imagem borrada do começo, por baixo dos botões do quadro. */
.carregando-tela { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: #0d0d12; }
.carregando-tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.carregando-miolo { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0 16px; text-align: center; color: #fff; }
.carregando-miolo b { font-size: 15px; font-weight: 700; }
.carregando-miolo small { font-size: 12.5px; color: rgba(255, 255, 255, 0.7); }
.carregando-roda { width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.16); border-top-color: var(--limao); animation: mi-gira 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .carregando-roda { animation-duration: 2.4s; } }
.quem-assiste { position: absolute; left: 10px; bottom: 44px; z-index: 1; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .botao-gravar.gravando, .ponto-gravando, .chamado-foto { animation: none; }
}

/* Texto solto dentro de um .campo (que é todo em maiúsculas) volta ao normal. */
.campo p { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--texto-3); }
/* O botãozinho de escolha (modo do microfone) e a régua (sensibilidade) dentro de um .campo. */
.campo input[type="radio"], .marcar input[type="radio"] { width: 16px; height: 16px; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--limao); }
.campo input[type="range"] { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--limao); }
/* O nome do emoji e o do selo precisam de espaço (o campo curto é o do emoji do selo). */
.emojis-gestao .linha-botoes input[maxlength="32"] { width: 190px; }

/* Tela cheia do quadro inteiro (o vídeo com o nome e os botões por cima).
   Regras separadas: navegador que não conhece um dos nomes jogaria fora a regra toda. */
.quadro:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; background: #000 !important; }
.quadro:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; background: #000 !important; }
.quadro:fullscreen video { object-fit: contain; }
.quadro:-webkit-full-screen video { object-fit: contain; }
.quadro:fullscreen .quadro-topo { top: 16px; right: 16px; }
.quadro:-webkit-full-screen .quadro-topo { top: 16px; right: 16px; }

/* Versão e microfone (13/10): quem está numa versão antiga ou sem microfone. */
.faixa-versao {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 69;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 16px);
  padding: 6px 8px 6px 16px; border-radius: 0 0 12px 12px;
  background: #f5c542; color: #1c1500; font-weight: 600; font-size: 13px;
  box-shadow: var(--sombra);
}
.faixa-versao .pilula { background: #1c1500; color: #fff; }
.faixa-versao .pilula:hover:not(:disabled) { background: #3a2e00; }
.etiqueta-versao {
  margin-left: 6px; padding: 1px 6px; border-radius: 6px; flex: none;
  background: rgba(245, 197, 66, 0.16); color: #f5c542; font-size: 10.5px; font-weight: 700;
  white-space: nowrap; vertical-align: middle;
}
html[data-tema="claro"] .etiqueta-versao { color: #8a6500; }
.sem-mic {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 6px; flex: none;
  background: var(--vermelho-fundo); color: var(--vermelho); font-size: 10.5px; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.membro-nome .etiqueta-versao, .membro-nome .sem-mic { margin-left: 4px; }
.aviso-sem-mic {
  display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 10px 12px;
  border-radius: 12px; background: var(--vermelho-fundo); border: 1px solid rgba(255, 92, 97, 0.4);
  color: var(--texto); font-size: 13px;
}
.aviso-sem-mic > .ic { color: var(--vermelho); }
.aviso-sem-mic span { flex: 1; }

/* ---------- O dono da Resenha (13/10): só ele tem, todo mundo vê ----------
   Aura de ouro na foto, nome em ouro, cartão de rei com moldura viva e
   faíscas, fio dourado nas mensagens, quadro dourado quando fala e a
   chegada dele na sala. As animações só correm onde há pouca coisa na tela
   (lista, sala, cartão); no chat, mexem com o mouse em cima. */
@property --angulo-real { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes girar-real { to { transform: rotate(360deg); } }
@keyframes angulo-real { to { --angulo-real: 360deg; } }
@keyframes ouro-correndo { from { background-position: 0 0; } to { background-position: -250% 0; } }

/* A aura: um anel de ouro em volta da foto (só a borda; o centro fica livre). */
.avatar.do-dono::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #7a5a0c, #f5c542, #fff3b0, #f5c542, #b8860b, #fff3b0, #f5c542, #7a5a0c);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 4px rgba(245, 197, 66, 0.55));
}
.membro .avatar.do-dono::before, .membro-voz .avatar.do-dono::before, .quadro .avatar.do-dono::before,
.painel-eu .avatar.do-dono::before, .cartao-perfil .avatar.do-dono::before, .mensagem:hover .avatar.do-dono::before {
  animation: girar-real 5s linear infinite;
}
.falando .avatar.do-dono, .avatar.do-dono.falando { box-shadow: 0 0 0 3px var(--fundo-1), 0 0 0 5px #f5c542, 0 0 16px rgba(245, 197, 66, 0.6); }

/* O nome em ouro (por cima de qualquer cor ou efeito escolhido). */
.nome-estilo.nome-ouro {
  color: transparent !important; text-shadow: none !important;
  background-image: linear-gradient(100deg, #b8860b 0%, #f5c542 20%, #fff6c9 36%, #f5c542 50%, #b8860b 68%, #f5c542 84%, #fff6c9 100%) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  font-weight: 800;
}
html[data-tema="claro"] .nome-estilo.nome-ouro {
  background-image: linear-gradient(100deg, #6b4e00 0%, #a8790a 25%, #d4a017 40%, #a8790a 55%, #6b4e00 75%, #a8790a 100%) !important;
}
.nome-ouro.animar, .membro .nome-ouro, .membro-voz .nome-ouro, .quadro .nome-ouro, .painel-eu .nome-ouro, .mensagem:hover .nome-ouro {
  animation: ouro-correndo 3.2s linear infinite !important;
}

/* O cartão de rei: moldura de ouro que gira, brilho e faíscas na capa, e o selo. */
.cartao-perfil.cartao-real {
  border: 2px solid transparent;
  background:
    linear-gradient(#14131b, #14131b) padding-box,
    conic-gradient(from var(--angulo-real), #7a5a0c, #f5c542, #fff3b0, #f5c542, #7a5a0c, #f5c542, #fff3b0, #7a5a0c) border-box;
  box-shadow: var(--sombra), 0 0 26px rgba(245, 197, 66, 0.28);
  animation: angulo-real 5s linear infinite;
}
.cartao-perfil.cartao-real.com-tema {
  background:
    linear-gradient(165deg, var(--t1), var(--t2)) padding-box,
    conic-gradient(from var(--angulo-real), #7a5a0c, #f5c542, #fff3b0, #f5c542, #7a5a0c, #f5c542, #fff3b0, #7a5a0c) border-box;
}
html[data-tema="claro"] .cartao-perfil.cartao-real:not(.com-tema) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--angulo-real), #7a5a0c, #f5c542, #fff3b0, #f5c542, #7a5a0c, #f5c542, #fff3b0, #7a5a0c) border-box;
}
.cartao-real .cartao-capa { position: relative; overflow: hidden; }
.cartao-real .cartao-capa::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 243, 176, 0.32) 45%, transparent 60%);
  background-size: 250% 100%; animation: ouro-correndo 3.6s linear infinite;
}
.faiscas-reais {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 78%, #fff3b0, transparent 60%),
    radial-gradient(1.6px 1.6px at 32% 40%, #f5c542, transparent 60%),
    radial-gradient(2.2px 2.2px at 54% 85%, #fff6c9, transparent 60%),
    radial-gradient(1.4px 1.4px at 71% 30%, #f5c542, transparent 60%),
    radial-gradient(2px 2px at 88% 66%, #fff3b0, transparent 60%),
    radial-gradient(1.5px 1.5px at 45% 15%, #fff6c9, transparent 60%),
    radial-gradient(1.8px 1.8px at 22% 25%, #f5c542, transparent 60%),
    radial-gradient(1.6px 1.6px at 64% 55%, #fff3b0, transparent 60%);
  animation: faiscas-subindo 4.5s linear infinite;
}
@keyframes faiscas-subindo {
  0% { transform: translateY(18px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { transform: translateY(-26px); opacity: 0; }
}
.selo-real {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 197, 66, 0.2), rgba(184, 134, 11, 0.08));
  border: 1px solid rgba(245, 197, 66, 0.45);
}
.selo-real-coroa { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.65)); }
.selo-real-textos { display: grid; line-height: 1.25; }
.selo-real-textos b { color: #f5c542; font-size: 13.5px; }
.selo-real-textos small { color: var(--texto-2); font-size: 11.5px; }
html[data-tema="claro"] .selo-real-textos b { color: #8a6500; }

/* As mensagens dele: um fio dourado do lado. */
.mensagem.do-dono { box-shadow: inset 2px 0 0 rgba(245, 197, 66, 0.6); }
.mensagem.do-dono:hover { background: rgba(245, 197, 66, 0.05); }

/* O quadro dele na sala: borda de ouro e o brilho dourado quando fala. */
.quadro.do-dono { border-color: rgba(245, 197, 66, 0.45); }
.quadro.do-dono.falando { box-shadow: inset 0 0 0 2px #f5c542, 0 0 22px rgba(245, 197, 66, 0.35); }

/* A chegada do dono na sala. */
.palco { position: relative; }
.chegada-do-dono {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 4px;
  background: radial-gradient(ellipse 60% 45% at center, rgba(0, 0, 0, 0.62), transparent 75%);
  animation: chegada-fundo 2.6s ease-out forwards;
}
@keyframes chegada-fundo { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
.chegada-brilho {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 223, 128, 0.16) 44%, rgba(255, 243, 176, 0.34) 50%, rgba(255, 223, 128, 0.16) 56%, transparent 80%);
  transform: translateX(-100%); animation: chegada-varrer 1.6s ease-out forwards;
}
.chegada-coroa { position: relative; font-size: 64px; line-height: 1; filter: drop-shadow(0 0 18px rgba(245, 197, 66, 0.8)); animation: chegada-coroa 2.6s ease-out forwards; }
.chegada-texto {
  position: relative; font-size: 28px; font-weight: 800; letter-spacing: -0.01em; color: transparent;
  background-image: linear-gradient(100deg, #b8860b, #f5c542, #fff6c9, #f5c542, #b8860b); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: chegada-texto 2.6s ease-out forwards, ouro-correndo 2s linear infinite;
}
@keyframes chegada-varrer { to { transform: translateX(100%); } }
@keyframes chegada-coroa {
  0% { transform: translateY(-30px) scale(0.6); opacity: 0; }
  20% { transform: translateY(0) scale(1.15); opacity: 1; }
  35% { transform: scale(1); }
  80% { opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}
@keyframes chegada-texto {
  0%, 15% { opacity: 0; transform: translateY(10px); }
  30% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar.do-dono::before, .nome-ouro, .cartao-perfil.cartao-real, .faiscas-reais, .cartao-real .cartao-capa::before,
  .chegada-brilho, .chegada-coroa, .chegada-texto, .chegada-do-dono { animation: none !important; }
  .faiscas-reais { opacity: 0.8; }
}

/* =====================================================================
   14/10: servidores, Início (amigos e privado), ligação e o visual novo.
   ===================================================================== */

/* ---------- as fontes (da própria Resenha: igual em todo computador) ---------- */
@font-face { font-family: 'Figtree'; src: url('/fontes/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fontes/bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Resenha Anton'; src: url('/fontes/anton.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Maquina'; src: url('/fontes/special-elite.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Playfair'; src: url('/fontes/playfair.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Resenha Marcador'; src: url('/fontes/permanent-marker.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Gibi'; src: url('/fontes/bangers.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Mono'; src: url('/fontes/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
@font-face { font-family: 'Resenha Caligrafia'; src: url('/fontes/great-vibes.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Fredoka'; src: url('/fontes/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Resenha Pixel'; src: url('/fontes/press-start-2p.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Orbitron'; src: url('/fontes/orbitron.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Resenha Terror'; src: url('/fontes/creepster.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Resenha Monoton'; src: url('/fontes/monoton.woff2') format('woff2'); font-display: swap; }

:root {
  --fonte: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --fonte-titulo: 'Bricolage Grotesque', 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --verde-ligacao: #23a55a;
}
body { font-size: 15px; line-height: 1.45; font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; }
/* Os títulos com a fonte de título (a cara nova). */
.modal h2, .comeco h2, .cartao-entrada h1, .boas-vindas h1, .ajustes-corpo h2, .adicionar-amigo h2, .novo-servidor h2,
.cartao-nome, .lateral-topo, .vazio h3, .amigos-vazio p, .ativos-vazio b, .ligacao h2 {
  font-family: var(--fonte-titulo); letter-spacing: -0.02em;
}
.cartao-entrada h1 { font-size: 30px; font-weight: 800; }
.modal h2 { font-size: 21px; font-weight: 750; }
.comeco h2 { font-size: 30px; font-weight: 800; }
.lateral-topo { font-size: 16px; font-weight: 750; }
.cabecalho-titulo { font-size: 16px; font-weight: 750; }
.canal { height: 36px; font-size: 15px; }
.canal-nome { font-weight: 550; }
.categoria { font-size: 11.5px; letter-spacing: 0.06em; }
.mensagem-texto { font-size: 15.5px; line-height: 1.5; }
.mensagem-autor { font-size: 15px; }
.mensagem-hora { font-size: 12px; }
.membro-nome { font-size: 14.5px; }
.membro-sub { font-size: 12.5px; }
.painel-eu-nome { font-size: 14px; }
.menu button { font-size: 14px; font-weight: 550; }
.pilula { font-weight: 700; }
.aviso { font-weight: 550; }
/* O número vermelho de não lidas (o .contador do perfil, mais abaixo, deixava a letra cinza). */
:is(.canal, .conversa, .aba, .trilho-item) .contador, .contador.vermelho {
  background: var(--vermelho); color: #fff; font-weight: 800; font-size: 11px; text-transform: none;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; line-height: 1;
}

/* ---------- a barra de servidores (como no Discord) ---------- */
.trilho { gap: 8px; padding: 12px 0; overflow: hidden; }
.trilho-servidores { display: flex; flex-direction: column; align-items: center; gap: 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; width: 100%; flex: 0 1 auto; min-height: 0; padding: 2px 0; }
.trilho-servidores::-webkit-scrollbar { display: none; }
.trilho-item {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: var(--superficie); color: var(--texto);
  transition: border-radius 0.18s ease, background 0.18s, color 0.18s;
}
.trilho-item img { width: 48px; height: 48px; border-radius: inherit; object-fit: cover; }
.trilho-item:hover, .trilho-item.ativo { border-radius: 16px; }
.trilho-item:hover:not(.ativo) { background: var(--limao); color: var(--limao-texto); }
.trilho-iniciais { font-family: var(--fonte-titulo); font-weight: 750; font-size: 16px; letter-spacing: -0.02em; line-height: 1; padding: 0 4px; overflow: hidden; white-space: nowrap; max-width: 46px; }
/* A barrinha branca do lado: maior no aberto, média no mouse, pontinho no não lido. */
.trilho-item::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 0;
  border-radius: 0 4px 4px 0; background: var(--texto); transform: translateY(-50%);
  transition: height 0.18s ease;
}
.trilho-item.nao-lido::before { height: 8px; }
.trilho-item:hover::before { height: 20px; }
.trilho-item.ativo::before { height: 40px; top: 50%; bottom: auto; left: -12px; }
.trilho-inicio { background: var(--superficie); }
.trilho-inicio img { width: 48px; height: 48px; padding: 0; }
.trilho-inicio.ativo { background: var(--limao); }
.trilho-selo {
  position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: var(--vermelho); color: #fff; font-size: 11.5px; font-weight: 800;
  display: grid; place-items: center; border: 3px solid var(--fundo-0); line-height: 1;
}
.trilho-na-voz {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde-ligacao); color: #fff; display: grid; place-items: center; border: 3px solid var(--fundo-0);
}
.trilho-na-voz .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.trilho-novo { width: 48px; height: 48px; color: var(--verde-ligacao); background: var(--superficie); }
.trilho-novo:hover { border-radius: 16px; background: var(--verde-ligacao); color: #fff; }
.trilho-separador { width: 32px; height: 2px; flex: none; }

/* ---------- o Início: conversas na coluna, amigos na área principal ---------- */
.procurar-conversa {
  width: 100%; height: 32px; margin: 0 0 10px; padding: 0 10px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--fundo-0); color: var(--texto-3); font-size: 13px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.procurar-conversa:hover { color: var(--texto-2); }
.item-amigos { margin-bottom: 4px; }
.conversa {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 1px 0;
  border-radius: var(--raio-p); color: var(--texto-3); cursor: pointer; position: relative;
}
.conversa:hover { background: var(--superficie); color: var(--texto-2); }
.conversa.aberto { background: var(--superficie-2); color: var(--texto); }
.conversa.nao-lido { color: var(--texto); }
.conversa.nao-lido .conversa-nome { font-weight: 750; }
.conversa-textos { flex: 1; min-width: 0; }
.conversa-nome { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-nome .nome-estilo { color: inherit; }
.conversa-sub { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-sub:empty { display: none; }
.conversa-fechar { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--texto-3); opacity: 0; }
.conversa:hover .conversa-fechar, .conversa-fechar:focus-visible { opacity: 1; }
.conversa-fechar:hover { color: var(--texto); background: var(--superficie-2); }
.lista-vazia { color: var(--texto-3); font-size: 13px; padding: 10px 8px; margin: 0; }

.vista-amigos { background: var(--fundo-2); }
.cabecalho-divisor { width: 1px; height: 24px; background: var(--linha-forte); margin: 0 4px; flex: none; }
.amigos-abas { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.amigos-abas::-webkit-scrollbar { display: none; }
.aba {
  height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--texto-2); font-weight: 650; font-size: 14px; white-space: nowrap;
}
.aba:hover { background: var(--superficie); color: var(--texto); }
.aba.ativa { background: var(--superficie-2); color: var(--texto); }
.aba.adicionar { background: var(--verde-ligacao); color: #fff; }
.aba.adicionar:hover { filter: brightness(1.08); background: var(--verde-ligacao); }
.aba.adicionar.ativa { background: transparent; color: var(--verde-ligacao); }
.amigos-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; }
.amigos-busca { position: relative; margin-bottom: 10px; }
.amigos-busca .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.amigos-filtro {
  width: 100%; height: 36px; padding: 0 36px 0 12px; border-radius: 8px; border: 1px solid var(--linha);
  background: var(--fundo-0); color: var(--texto); font-size: 14.5px;
}
.amigos-filtro:focus { outline: none; border-color: var(--linha-forte); }
.amigos-corpo .categoria { padding: 10px 2px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.amigo {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px;
  border-radius: 10px; border-top: 1px solid var(--linha); cursor: pointer;
}
.amigos-corpo .categoria + .amigo { border-top-color: transparent; }
.amigo:hover { background: var(--superficie); border-top-color: transparent; }
.amigo:hover + .amigo { border-top-color: transparent; }
.amigo-textos { flex: 1; min-width: 0; }
.amigo-nome { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; }
.amigo-nome > .nome-estilo, .amigo-nome > .nome-pessoa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amigo-arroba { color: var(--texto-3); font-weight: 500; font-size: 13px; opacity: 0; transition: opacity 0.12s; white-space: nowrap; }
.amigo:hover .amigo-arroba { opacity: 1; }
.amigo-sub { color: var(--texto-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amigo-acoes { display: flex; gap: 8px; }
.amigo-acao {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fundo-1); color: var(--texto-2); transition: color 0.12s, background 0.12s;
}
.amigo:hover .amigo-acao { background: var(--fundo-0); }
.amigo-acao:hover { color: var(--texto); }
.amigo-acao.verde:hover { color: var(--verde-ligacao); }
.amigo-acao.vermelho:hover { color: var(--vermelho); }
.amigo-acao .ic { width: 18px; height: 18px; }
.amigos-vazio { display: grid; justify-items: center; gap: 12px; padding: 64px 16px; text-align: center; color: var(--texto-3); }
.amigos-vazio-arte { font-size: 64px; line-height: 1; filter: grayscale(0.2); }
.amigos-vazio p { margin: 0; max-width: 380px; font-size: 16px; font-weight: 600; color: var(--texto-2); }
.adicionar-amigo { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); margin-bottom: 8px; }
.adicionar-amigo h2 { margin: 0; font-size: 20px; }
.adicionar-amigo p { margin: 0; color: var(--texto-3); }
.adicionar-linha {
  display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 6px 6px 6px 14px;
  border-radius: 12px; background: var(--fundo-0); border: 1px solid var(--linha-forte);
}
.adicionar-linha:focus-within { border-color: var(--verde-ligacao); }
.adicionar-arroba { color: var(--texto-3); font-weight: 700; }
.adicionar-linha input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--texto); font-size: 16px; padding: 8px 0; }
.adicionar-resultado { min-height: 1.2em; font-size: 13.5px; }
.adicionar-achados { display: grid; gap: 2px; padding: 4px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); }
.adicionar-achado { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.adicionar-achado:hover { background: var(--superficie-2); }
.adicionar-achado .amigo-textos { flex: 1; min-width: 0; display: grid; gap: 1px; }
.adicionar-achado-arroba { color: var(--texto-3); font-size: 12.5px; }
.adicionar-achado-situacao { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.adicionar-achados-vazio { padding: 8px; font-size: 13.5px; }
.adicionar-resultado.ok { color: var(--verde-ligacao); }
.adicionar-resultado.erro { color: #ff9a9d; }

/* O painel da direita no Início: quem está ativo, ou o perfil da pessoa da conversa. */
.painel-titulo { margin: 4px 8px 12px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.ativo-agora { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 8px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); cursor: pointer; }
.ativo-agora:hover { background: var(--superficie-2); }
.ativo-textos { min-width: 0; display: grid; }
.ativo-textos b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ativo-textos small { color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ativos-vazio { padding: 14px 10px; text-align: center; color: var(--texto-3); display: grid; gap: 6px; }
.ativos-vazio b { color: var(--texto); font-size: 15px; }
.ativos-vazio p { margin: 0; font-size: 13px; }
.cartao-perfil.no-painel { width: 100%; max-width: none; box-shadow: none; border: 0; border-radius: 14px; }
.membros:has(.cartao-perfil.no-painel) { padding: 0; }
.membros:has(.cartao-perfil.no-painel) .cartao-perfil { border-radius: 0; min-height: 100%; }

/* Nova conversa. */
.nova-conversa { width: min(440px, 100%); }
.nova-conversa input[type="search"] { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto); font-size: 15px; }
.nova-conversa-lista { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 0 -6px; }
.nova-conversa-pessoa { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-align: left; }
.nova-conversa-pessoa:hover { background: var(--superficie); }
.nova-conversa-nome { flex: 1; min-width: 0; display: grid; font-weight: 650; }
.nova-conversa-nome small { color: var(--texto-3); font-weight: 500; font-size: 12px; }
.etiqueta-amigo { font-size: 11px; font-weight: 700; color: var(--verde-ligacao); border: 1px solid currentColor; border-radius: 99px; padding: 1px 7px; }

/* ---------- a conversa no privado ---------- */
.cabecalho-icone { display: inline-grid; place-items: center; flex: none; }
.cabecalho-icone .avatar[data-status]::after { width: 9px; height: 9px; border-width: 2px; border-color: var(--fundo-2); }
.comeco-privado { display: grid; justify-items: start; gap: 6px; padding-top: 28px; }
.comeco-privado h2 { margin: 6px 0 0; }
.comeco-arroba { color: var(--texto-2) !important; font-size: 17px; font-weight: 600; }
.comeco-botoes { display: flex; gap: 8px; margin-top: 8px; }
.linha-ligacao {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 12px; margin: 2px 0;
  background: var(--superficie); border: 1px solid var(--linha); color: var(--texto-2);
}
.linha-ligacao .ic { color: var(--verde-ligacao); }
.linha-ligacao.perdida .ic { color: var(--vermelho); }
.ligar-de-novo { color: var(--texto); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.ligar-de-novo:hover { color: var(--verde-ligacao); }

/* A ligação em cima da conversa (o palco ocupa a parte de cima). */
.principal { flex-direction: row; }
.principal.com-ligacao { flex-direction: column; }
.principal.com-ligacao > #vista-voz:not([hidden]) { flex: 0 0 auto; height: min(52%, 460px); min-height: 240px; border-bottom: 1px solid var(--linha-forte); }
.principal.com-ligacao > #vista-voz .palco { background: #000; }
.principal.com-ligacao > #vista-voz .grade-pessoas { align-content: center; }
.principal.com-ligacao > #vista-voz .grade-pessoas.poucos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 300px)); }
.principal.com-ligacao > #vista-voz .palco-corpo { padding: 12px; }
.principal.com-ligacao > #vista-voz .quadro { max-height: 100%; }
.principal.com-ligacao > #vista-texto { flex: 1; min-height: 0; }
.principal.com-ligacao > #vista-texto > .cabecalho { display: none; }

/* Quem ainda não atendeu: foto apagada e ondas. */
.quadro.chamando { opacity: 0.85; }
.quadro.chamando .avatar { filter: grayscale(0.5) brightness(0.8); }
.chamando-foto, .ligacao-foto { position: relative; display: grid; place-items: center; }
.ligacao-onda {
  position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--verde-ligacao);
  animation: onda-ligacao 1.8s ease-out infinite; pointer-events: none;
}
.ligacao-onda.dois { animation-delay: 0.9s; }
@keyframes onda-ligacao { from { transform: scale(0.85); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }

/* A janela de quem está recebendo a ligação. */
.modal.ligacao { width: min(320px, 100%); justify-items: center; text-align: center; gap: 10px; padding: 32px 22px 26px; background: radial-gradient(120% 80% at 50% 0%, rgba(35, 165, 90, 0.18), transparent 60%), #14131b; }
.modal.ligacao h2 { font-size: 24px; margin-top: 10px; }
.modal.ligacao p { font-size: 14px; }
.ligacao-foto { margin: 6px 0; }
.ligacao-botoes { display: flex; gap: 22px; margin-top: 14px; }
.ligacao-botao { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform 0.1s, filter 0.12s; }
.ligacao-botao:hover { filter: brightness(1.1); transform: scale(1.06); }
.ligacao-botao .ic { width: 24px; height: 24px; }
.ligacao-botao.atender { background: var(--verde-ligacao); animation: atender-pulsa 1.4s ease-in-out infinite; }
.ligacao-botao.video { background: #3b82f6; }
.ligacao-botao.recusar { background: var(--vermelho); }
@keyframes atender-pulsa { 50% { box-shadow: 0 0 0 8px rgba(35, 165, 90, 0.22); } }

/* Os botões do privado no cartão de perfil. */
.cartao-acoes { display: grid; gap: 8px; margin-top: 8px; }
.cartao-privado { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cartao-privado .pilula.limao { flex: 1; }
.botao-icone.redondo { width: 34px; height: 34px; border-radius: 50%; background: var(--superficie-2); color: var(--texto); }
.botao-icone.redondo:hover { background: var(--verde-ligacao); color: #fff; }
.cartao-acoes .cartao-moderar { margin: 0; }

/* ---------- criar ou entrar num servidor ---------- */
.novo-servidor { width: min(440px, 100%); }
.novo-servidor-corpo, .novo-servidor-form { display: grid; gap: 14px; }
.novo-servidor h2 { text-align: center; font-size: 24px; }
.novo-servidor-corpo > p, .novo-servidor-form > p:not(.aviso-campo):not(.letra-miuda) { text-align: center; }
.modelos { display: grid; gap: 8px; }
.modelo {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: var(--superficie); border: 1px solid var(--linha); transition: background 0.12s, border-color 0.12s;
}
.modelo:hover { background: var(--superficie-2); border-color: var(--linha-forte); }
.modelo-emoji { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--fundo-0); flex: none; }
.modelo-textos { flex: 1; min-width: 0; display: grid; }
.modelo-textos b { font-size: 15.5px; }
.modelo-textos small { color: var(--texto-3); font-size: 12.5px; }
.modelo-seta { transform: rotate(-90deg); color: var(--texto-3); }
.novo-servidor-ou { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 13px; font-weight: 650; }
.novo-servidor-ou::before, .novo-servidor-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha-forte); }
.novo-servidor .pilula.escura { justify-self: stretch; }
.novo-icone-linha { display: flex; justify-content: center; }
.novo-icone {
  width: 84px; height: 84px; border-radius: 50%; border: 2px dashed var(--texto-3); color: var(--texto-2);
  display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; overflow: hidden; position: relative;
}
.novo-icone:hover { border-color: var(--limao); color: var(--limao-letra); }
.novo-icone small { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.novo-icone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.letra-miuda code { font-size: 12px; background: var(--fundo-0); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.campo-largo { flex: 1; min-width: 200px; }

/* ---------- polimento geral ---------- */
.lateral { background: var(--fundo-1); }
.lateral-topo { height: 52px; }
.cabecalho { height: 52px; box-shadow: 0 1px 0 var(--linha); border-bottom: 0; }
.mensagem.cabeca { margin-top: 16px; }
.caixa-texto { border-radius: 14px; background: var(--superficie); }
.caixa-texto textarea { font-size: 15.5px; }
.menu { border-radius: 14px; padding: 6px; }
.menu button.perigo { color: var(--vermelho); }
.menu button.perigo:hover { background: var(--vermelho); color: #fff; }
.modal { border-radius: 20px; padding: 24px; }
.fundo-modal { background: rgba(0, 0, 0, 0.72); }
.cartao-nome { font-size: 21px; }
.membros .categoria { padding-top: 16px; }
.app.no-inicio .lateral-topo { cursor: default; }
.app.no-inicio .lateral-topo .ic { display: none; }

html[data-tema="claro"] .modal.ligacao { background: radial-gradient(120% 80% at 50% 0%, rgba(35, 165, 90, 0.16), transparent 60%), #fff; }
html[data-tema="claro"] .principal.com-ligacao > #vista-voz .palco { background: #101014; }
html[data-tema="claro"] .trilho-item:hover:not(.ativo), html[data-tema="claro"] .trilho-inicio.ativo { color: var(--limao-texto); }

@media (prefers-reduced-motion: reduce) {
  .ligacao-onda, .ligacao-botao.atender { animation: none !important; }
}

/* Celular: a barra de servidores vem junto com a coluna dos canais (a gaveta). */
@media (max-width: 720px) {
  .app { grid-template-columns: 72px 220px minmax(0, 1fr); }
  .trilho { display: flex; }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 0 0 minmax(0, 1fr); }
  .app.mostrar-canais { grid-template-columns: 68px minmax(0, calc(82vw - 68px)) 18vw; }
  .trilho { overflow: hidden; }
  .app:not(.mostrar-canais) .trilho { visibility: hidden; }
  .amigos-corpo { padding: 12px 14px 20px; }
  .amigo-acao { width: 32px; height: 32px; }
  .principal.com-ligacao > #vista-voz:not([hidden]) { height: 44%; min-height: 200px; }
}
.linha-botoes .campo-largo input:not([type]) { width: 100%; height: 38px; font-size: 15px; }

/* Celular: o título do topo numa linha só, e menos botões no topo da conversa. */
.cabecalho-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixa-texto textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  #vista-texto .cabecalho .botao-icone[title="Buscar mensagens"], #vista-texto .cabecalho .botao-icone[title="Salvas e lembretes"] { display: none; }
  #vista-texto .cabecalho .cabecalho-sub { display: none; }
  .cabecalho { gap: 6px; padding: 0 10px; }
}
html[data-tema="claro"] .trilho-item:not(.ativo):not(:hover), html[data-tema="claro"] .trilho-novo:not(:hover) { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* ---------- salas privadas, limite de pessoas e ajustes do canal (14/10) ---------- */
/* O cadeado em cima do ícone do canal privado (como no Discord). */
.icone-canal { position: relative; display: inline-grid; place-items: center; flex: none; }
.icone-canal > .ic:first-child { opacity: 0.8; }
.ic.cadeado-mini {
  position: absolute; right: -4px; bottom: -3px; width: 11px; height: 11px; stroke-width: 2.6;
  color: var(--texto-2); background: var(--fundo-1); border-radius: 3px; padding: 1px;
}
.canal.aberto .ic.cadeado-mini { background: var(--superficie-2); }
.cabecalho-icone.icone-canal .ic.cadeado-mini { background: var(--fundo-2); }
/* O contador da sala com limite: "02 | 03". */
.lotacao {
  margin-left: auto; display: inline-flex; align-items: stretch; flex: none;
  border-radius: 6px; overflow: hidden; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; border: 1px solid var(--linha-forte);
}
.lotacao span { padding: 3px 5px; color: var(--texto-2); }
.lotacao span:first-child { background: var(--superficie-2); color: var(--texto); }
.lotacao span:last-child { background: var(--fundo-0); }
.lotacao.lotada { border-color: rgba(255, 92, 97, 0.5); }
.lotacao.lotada span:first-child { background: var(--vermelho); color: #fff; }
.canal.cheia { opacity: 0.75; }
.canal-linha.com-engrenagem .canal { padding-right: 58px; }
.engrenagem-canal {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: var(--texto-3); opacity: 0;
}
.canal-linha:hover .engrenagem-canal, .engrenagem-canal:focus-visible { opacity: 1; }
.engrenagem-canal:hover { background: var(--superficie-2); color: var(--texto); }
/* Com mouse em cima, o contador abre espaço pra engrenagem e a estrela. */
.canal-linha:hover .lotacao { visibility: hidden; }

/* Criar canal e ajustes do canal. */
.criar-canal, .ajustes-canal { width: min(480px, 100%); }
.criar-canal-form, .criar-canal-corpo, .ajustes-canal-corpo { display: grid; gap: 14px; }
.criar-canal h2 .ic, .ajustes-canal h2 .ic { vertical-align: -3px; color: var(--texto-2); }
.linha-privado {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--linha);
}
.linha-privado-icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--fundo-0); color: var(--texto-2); flex: none; }
.linha-privado-textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linha-privado-textos b { font-size: 15px; }
.linha-privado-textos small { color: var(--texto-3); font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.limite { display: grid; gap: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.limite-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.limite-ficha {
  height: 32px; min-width: 40px; padding: 0 12px; border-radius: 99px;
  background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--texto-2); font-weight: 700; font-size: 13.5px;
}
.limite-ficha:hover { color: var(--texto); border-color: var(--texto-3); }
.limite-ficha.ligada { background: var(--limao); border-color: var(--limao); color: var(--limao-texto); }
.limite-outro { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 13px; }
.limite-outro input { width: 72px; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto); font-size: 14px; }
.acesso { display: grid; gap: 8px; }
.acesso input[type="search"] { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto); font-size: 14.5px; }
.acesso-lista { max-height: min(44vh, 360px); overflow-y: auto; display: grid; gap: 2px; margin: 0 -6px; padding: 0 2px; }
.acesso-titulo { padding: 10px 8px 4px; color: var(--texto-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.acesso-linha { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-align: left; color: var(--texto-2); }
.acesso-linha:hover:not(:disabled) { background: var(--superficie); color: var(--texto); }
.acesso-linha:disabled { cursor: default; opacity: 0.8; }
.acesso-linha.marcado { color: var(--texto); }
.acesso-caixa {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--texto-3); flex: none;
  display: grid; place-items: center; color: var(--limao-texto);
}
.acesso-linha.marcado .acesso-caixa { background: var(--limao); border-color: var(--limao); }
.acesso-caixa .ic { stroke-width: 3.2; }
.acesso-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.acesso-linha small { color: var(--texto-3); font-size: 12px; }
.acesso-linha .cargo-bolinha { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.acesso-resumo { margin: 0; color: var(--texto-3); font-size: 12.5px; }
.ajustes-canal-abas { display: flex; gap: 6px; border-bottom: 1px solid var(--linha); padding-bottom: 10px; }
.ajustes-canal-conteudo { display: grid; gap: 14px; min-height: 160px; }
.ajustes-canal .modal-pe { align-items: center; }
.ajustes-canal-apagar { margin-right: auto; }

/* ---------- as configurações, repaginadas (14/10: "pra ficar mais bonito e agradável") ----------
   Tela inteira, como a do Discord: o menu do lado, a página no meio (em
   cartões) e o X com o "ESC" no canto. O que precisa salvar vai na barra de
   baixo. Leve: nada de desfoque, só cor, borda e um deslizar curto. */
.config {
  position: fixed; inset: 0; z-index: 45;
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 820px) minmax(84px, 1fr);
  background: var(--fundo-2);
  animation: config-entra 0.16s ease-out;
}
@keyframes config-entra { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }
.config-lado { background: var(--fundo-1); display: flex; justify-content: flex-end; overflow-y: auto; border-right: 1px solid var(--linha); }
.config-lado-dentro { width: 244px; min-height: 100%; padding: 56px 12px 28px 16px; display: flex; flex-direction: column; gap: 18px; }
.config-menu { display: grid; gap: 2px; }
.config-grupo { display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px; color: var(--texto-3); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; min-width: 0; }
.config-grupo:first-child { padding-top: 0; }
.config-grupo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-grupo .ic { width: 14px; height: 14px; flex: none; }
.config-grupo-icone { width: 18px; height: 18px; border-radius: 6px; flex: none; object-fit: cover; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto); font-size: 10px; font-weight: 800; letter-spacing: 0; }
.config-menu hr { border: 0; height: 1px; background: var(--linha); margin: 10px 10px 2px; }
.config-item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: 9px;
  color: var(--texto-2); font-size: 14.5px; font-weight: 550; text-align: left; transition: background 0.12s, color 0.12s;
}
.config-item .ic { width: 18px; height: 18px; color: var(--texto-3); transition: color 0.12s; }
.config-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-item:hover { background: var(--superficie); color: var(--texto); }
.config-item:hover .ic { color: var(--texto-2); }
.config-item[aria-current="page"] { background: var(--superficie-2); color: var(--texto); }
.config-item[aria-current="page"] .ic { color: var(--limao-letra); }
.config-item.perigo, .config-item.perigo .ic { color: var(--vermelho); }
.config-item.perigo:hover { background: var(--vermelho-fundo); }
.config-rodape { margin-top: auto; padding: 0 10px; color: var(--texto-3); font-size: 12px; }

.config-coluna { position: relative; min-width: 0; min-height: 0; }
.config-conteudo { position: absolute; inset: 0; overflow-y: auto; padding: 56px 40px 128px; }
.config-pagina { max-width: 740px; display: grid; gap: 18px; }
.config-topo-celular { display: none; }
.config-canto { padding: 56px 0 0 18px; }
.config-fechar { display: grid; justify-items: center; gap: 6px; color: var(--texto-3); }
.config-fechar .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; border: 2px solid var(--linha-forte); transition: background 0.12s, border-color 0.12s, color 0.12s; }
.config-fechar small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; }
.config-fechar:hover { color: var(--texto); }
.config-fechar:hover .ic { background: var(--superficie-2); border-color: var(--texto-3); }

.config-cabecalho h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.config-cabecalho p { margin: 6px 0 0; color: var(--texto-3); font-size: 14.5px; max-width: 64ch; }

.cartao-config { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 18px 20px; display: grid; gap: 16px; min-width: 0; align-content: start; }
.cartao-config-topo { display: grid; gap: 4px; }
.cartao-config-topo h3 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.cartao-config-topo p { margin: 0; color: var(--texto-3); font-size: 13.5px; }
.texto-ajuda { margin: 0; color: var(--texto-3); font-size: 13px; }
.lista-vazia { margin: 0; color: var(--texto-3); font-size: 13.5px; }

/* Uma linha de ajuste: o que é do lado esquerdo, o controle do direito. */
.linha-config { display: flex; align-items: center; gap: 14px; padding: 12px 0; min-width: 0; }
.linha-config + .linha-config { border-top: 1px solid var(--linha); }
.linha-config:first-child { padding-top: 0; }
.linha-config:last-child { padding-bottom: 0; }
.linha-config-textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.linha-config-textos b { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.linha-config-textos small { color: var(--texto-3); font-size: 13px; line-height: 1.4; }
.linha-config-icone { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-2); }
.linha-config.perigo .linha-config-textos b { color: var(--vermelho); }
.linha-config > .linha-botoes { justify-content: flex-end; }

/* Os campos. */
.campo-config { display: grid; gap: 8px; min-width: 0; }
.campo-config-rotulo { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.campo-config-ajuda { color: var(--texto-3); font-size: 12.5px; }
.campo-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campo-titulo .contador { font-weight: 600; color: var(--texto-3); font-size: 12px; }
/* :where() deixa essa regra fraca de propósito: qualquer ajuste mais específico ganha dela. */
.config :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]), select, textarea) {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px;
  background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto);
  font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 400;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.config :where(textarea) { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.config :where(select) {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7d8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.config :is(input, select, textarea):focus { outline: none; border-color: rgba(198, 244, 50, 0.55); box-shadow: 0 0 0 3px rgba(198, 244, 50, 0.14); }
.config :is(input, select, textarea):disabled { opacity: 0.55; cursor: not-allowed; }
.config input[type="color"] { width: 42px; height: 42px; padding: 3px; flex: none; border-radius: 10px; background: var(--fundo-0); border: 1px solid var(--linha-forte); cursor: pointer; }
.config input[type="color"]:disabled { opacity: 0.4; }
.config input[type="range"] { width: 100%; accent-color: var(--limao); }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.campo-com-prefixo { position: relative; }
.campo-com-prefixo > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); font-weight: 700; pointer-events: none; }
.config .campo-com-prefixo input { padding-left: 30px; }
.linha-recado { display: flex; gap: 8px; min-width: 0; }
.config .linha-recado > input:not(.campo-emoji) { flex: 1; min-width: 0; }
.config .linha-recado > select { width: auto; flex: none; }
.config .linha-recado > .pilula { flex: none; }
.config .campo-emoji { width: 64px; flex: none; text-align: center; padding: 0 6px; }
.config .campo-emoji::placeholder { opacity: 0.35; } /* o emoji de exemplo não pode parecer escolhido */
.config .cores { display: flex; flex-wrap: wrap; gap: 8px; }
.cor.pequena { width: 22px; height: 22px; }

/* O status: as quatro bolinhas. */
.escolha-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.escolha-status button {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; min-width: 0;
  background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto-2); font-weight: 600; font-size: 14px; white-space: nowrap;
}
.escolha-status button[aria-checked="true"] { border-color: var(--limao); color: var(--texto); background: var(--limao-escuro); }
.bolinha-status { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Escolha entre poucas opções, lado a lado. */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fundo-0); border: 1px solid var(--linha-forte); justify-self: start; }
.segmentado button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; color: var(--texto-2); font-weight: 650; font-size: 14px; transition: background 0.12s, color 0.12s; }
.segmentado button:hover { color: var(--texto); }
.segmentado button[aria-checked="true"] { background: var(--superficie-3); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

/* A barra de "salvar alterações". */
.barra-salvar {
  position: absolute; left: 40px; right: 40px; bottom: 24px; max-width: 740px; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px;
  background: var(--fundo-0); border: 1px solid var(--linha-forte); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  animation: barra-sobe 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.barra-salvar-texto { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; }
.barra-salvar-desfazer { color: var(--texto-2); font-weight: 650; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.barra-salvar-desfazer:hover { color: var(--texto); text-decoration: underline; }
.barra-salvar.treme { animation: treme 0.38s; background: var(--vermelho-fundo); border-color: rgba(255, 92, 97, 0.55); }
@keyframes barra-sobe { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes treme {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* As permissões: o controle de três posições (✗ / ✓), como no Discord. */
.triplo { display: inline-flex; flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--linha-forte); background: var(--fundo-0); }
.triplo button { width: 34px; height: 30px; display: grid; place-items: center; color: var(--texto-3); transition: background 0.12s, color 0.12s; }
.triplo button + button { border-left: 1px solid var(--linha-forte); }
.triplo button .ic { stroke-width: 2.6; }
.triplo button:hover:not(:disabled) { color: var(--texto); background: var(--superficie-2); }
.triplo button.negar[aria-checked="true"] { background: #da373c; color: #fff; }
.triplo button.padrao[aria-checked="true"] { background: var(--superficie-3); color: var(--texto); }
.triplo button.permitir[aria-checked="true"] { background: #23a55a; color: #fff; }
.triplo button:disabled { cursor: not-allowed; opacity: 0.5; }
.grupo-permissoes { display: grid; }
.grupo-permissoes + .grupo-permissoes { margin-top: 10px; }
.grupo-permissoes h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.grupo-permissoes .linha-config:first-of-type { padding-top: 0; }
.grupo-permissoes .linha-config.perigo .linha-config-textos b { color: var(--vermelho); }
.grupos-permissoes { display: grid; gap: 18px; }
.busca-e-acao { display: flex; gap: 10px; align-items: center; }
.config .busca-e-acao input { flex: 1; }
.aviso-config { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(245, 184, 61, 0.1); border: 1px solid rgba(245, 184, 61, 0.3); color: #f5c76a; font-size: 13.5px; }
html[data-tema="claro"] .aviso-config { color: #8a5a00; }

/* Permissões avançadas do canal: cargos e pessoas na esquerda, o que cada um pode na direita. */
.avancadas { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.avancadas-alvos { display: grid; gap: 2px; position: sticky; top: 0; }
.avancadas-alvos-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px 8px; color: var(--texto-3); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.avancadas-alvos-topo .botao-icone { width: 28px; height: 28px; }
.alvo { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; color: var(--texto-2); font-weight: 600; font-size: 14px; text-align: left; min-width: 0; }
.alvo:hover { background: var(--superficie-2); color: var(--texto); }
.alvo[aria-current="true"] { background: var(--superficie-3); color: var(--texto); }
.alvo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alvo-conta { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--fundo-0); color: var(--texto-3); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.avancadas-lista { display: grid; gap: 14px; min-width: 0; }
.avancadas-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.avancadas-lista-topo b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avancadas-lista-topo small { color: var(--texto-3); }
.cargo-bolinha.todos { width: 22px; height: 22px; display: grid; place-items: center; background: var(--superficie-3); color: var(--texto-2); }
.fichas-acesso { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acesso { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border-radius: 99px; background: var(--fundo-0); border: 1px solid var(--linha-forte); font-weight: 600; font-size: 13.5px; max-width: 100%; }
.ficha-acesso > span:not(.cargo-bolinha) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-acesso .cargo-bolinha { width: 12px; height: 12px; margin-left: 4px; }
.ficha-acesso button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-3); flex: none; }
.ficha-acesso button:hover { background: var(--vermelho-fundo); color: var(--vermelho); }
.regua { display: grid; gap: 4px; }
.regua-marcas { display: flex; justify-content: space-between; color: var(--texto-3); font-size: 11.5px; }
.regua-valor { color: var(--limao-letra); font-size: 13px; }
.modal.modal-escolher { width: min(480px, 100%); max-height: calc(100vh - 48px); grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.modal-escolher input[type="search"] { height: 40px; padding: 0 12px; border-radius: 10px; background: var(--fundo-0); border: 1px solid var(--linha-forte); color: var(--texto); }
.modal-escolher .acesso-lista { max-height: 50vh; }

/* Cargos: a lista na esquerda, o cargo aberto na direita. */
.cargos-tela { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.cargos-coluna { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 12px; display: grid; gap: 4px; position: sticky; top: 0; }
.cargos-coluna-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 8px 6px; }
.cargos-coluna-topo b { font-size: 13px; color: var(--texto-2); }
.cargos-coluna-lista { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; }
.cargos-coluna hr { border: 0; height: 1px; background: var(--linha); margin: 6px 4px; }
.cargos-coluna .texto-ajuda { padding: 6px 6px 0; font-size: 12px; }
.cargo-item { position: relative; display: flex; align-items: center; border-radius: 9px; min-width: 0; }
.cargo-item:hover { background: var(--superficie-2); }
.cargo-item[aria-current="true"] { background: var(--superficie-3); }
.cargo-item-abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 8px; color: var(--texto-2); font-weight: 600; font-size: 14px; text-align: left; }
.cargo-item[aria-current="true"] .cargo-item-abrir { color: var(--texto); }
.cargo-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-item small { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cargo-item-ordem { display: none; gap: 2px; padding-right: 4px; }
.cargo-item-ordem .botao-icone { width: 24px; height: 24px; }
.cargo-item:hover .cargo-item-ordem, .cargo-item:focus-within .cargo-item-ordem { display: flex; }
.cargo-item:hover .cargo-item-abrir small, .cargo-item:focus-within .cargo-item-abrir small { display: none; }
@media (hover: none) { .cargo-item[aria-current="true"] .cargo-item-ordem { display: flex; } }
.cargo-editor { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 18px 20px; display: grid; gap: 16px; min-width: 0; }
.cargo-editor-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.cargo-editor-topo h3 { margin: 0; font-size: 17px; font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-editor-topo h3 span { color: var(--texto-2); }
.cargo-editor-corpo { display: grid; gap: 16px; min-width: 0; }
.abas-config { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin: 0 -20px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.abas-config::-webkit-scrollbar { display: none; }
.aba-config { padding: 10px 10px; color: var(--texto-3); font-weight: 650; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.aba-config:hover { color: var(--texto-2); }
.aba-config.ativa { color: var(--texto); border-bottom-color: var(--limao); }
.escolha-cor { display: grid; gap: 12px; }
.cores-cargo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cargo-previa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fundo-0); border: 1px solid var(--linha); flex-wrap: wrap; }
.cargo-previa-linha { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cargo-previa-linha small { display: block; color: var(--texto-3); font-size: 12px; font-weight: 500; }
.lista-pessoas-config { display: grid; gap: 2px; }
.pessoa-config { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-weight: 600; }
.pessoa-config:hover { background: var(--superficie-2); }
.pessoa-config > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* O servidor: o ícone grande, a capa e o fundo. */
.servidor-identidade { display: flex; gap: 18px; align-items: center; }
.servidor-icone-grande { width: 88px; height: 88px; border-radius: 26px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--superficie-3); font-family: var(--fonte-titulo); font-size: 34px; font-weight: 800; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.servidor-icone-grande img { width: 100%; height: 100%; object-fit: cover; }
.servidor-identidade-campos { flex: 1; min-width: 0; display: grid; gap: 10px; }
.previa-imagem { height: 120px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: var(--texto-3); font-size: 13px; border: 1px solid var(--linha); background: repeating-linear-gradient(45deg, var(--superficie-2) 0 8px, var(--superficie) 8px 16px); }
.previa-imagem img { width: 100%; height: 100%; object-fit: cover; }

/* Emojis e selos em ladrilhos. */
.grade-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.emoji-tile { position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 12px; background: var(--fundo-0); border: 1px solid var(--linha); color: var(--texto-2); font-size: 12px; min-width: 0; }
.emoji-tile img { width: 40px; height: 40px; object-fit: contain; }
.emoji-tile .selo-emoji { font-size: 30px; line-height: 40px; }
.emoji-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-tile .botao-icone { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; opacity: 0; }
.emoji-tile:hover .botao-icone, .emoji-tile .botao-icone:focus-visible { opacity: 1; }
@media (hover: none) { .emoji-tile .botao-icone { opacity: 1; } }

/* Atalhos: a tecla com cara de tecla. */
.tecla { min-width: 44px; padding: 6px 12px; border-radius: 9px; background: var(--fundo-0); border: 1px solid var(--linha-forte); border-bottom-width: 3px; font: 600 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--texto); white-space: nowrap; flex: none; }
.tecla:hover { border-color: var(--texto-3); }
.tecla.gravando { border-color: var(--limao); color: var(--limao-letra); }
.tecla.fixa { cursor: default; color: var(--texto-2); }

/* Avisos, voz e o resto. */
.situacao-avisos { display: flex; align-items: center; gap: 14px; }
.situacao-avisos p { margin: 0; color: var(--texto-2); }
.situacao-icone { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-3); }
.situacao-avisos.ligado .situacao-icone { background: var(--limao-escuro); color: var(--limao-letra); }
.teste-mic { display: flex; align-items: center; gap: 14px; }
.teste-mic .medidor { flex: 1; height: 10px; }
.config .sensibilidade { margin: 0; }
.config .tipos-tela .tipo { background: var(--fundo-0); border: 1px solid var(--linha); }
.config .tipos-tela .tipo[aria-checked="true"] { border-color: var(--limao); background: var(--limao-escuro); }
.config .opcoes-aparencia { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.config .opcao-aparencia { display: grid; gap: 8px; padding: 8px; border-radius: 14px; background: var(--fundo-0); border: 2px solid transparent; color: var(--texto-2); font-weight: 600; text-align: left; }
.config .opcao-aparencia:hover { border-color: var(--linha-forte); }
.config .opcao-aparencia[aria-checked="true"] { border-color: var(--limao); color: var(--texto); }
.config .opcao-aparencia small { font-size: 13px; padding: 0 2px; }
.config .amostra { height: 64px; border-radius: 9px; display: grid; grid-template-columns: 16px 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 8px; }
.config .amostra i { display: block; border-radius: 4px; background: rgba(255, 255, 255, 0.13); }
.config .amostra i:first-child { grid-row: 1 / 3; }
.config .amostra i:last-child { width: 60%; }
.config .temas [data-valor="claro"] .amostra i { background: rgba(0, 0, 0, 0.12); }
.config .editor-perfil { gap: 18px; }
@media (min-width: 900px) {
  .config .editor-perfil { grid-template-columns: minmax(0, 1fr) 280px; }
  .config .editor-lado { position: sticky; top: 0; order: 0; justify-self: stretch; }
}
.config .editor-campos { gap: 18px; }
.config .editor-lado { top: 0; }
.config .decoracoes { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.config .decoracao { background: var(--fundo-0); border: 2px solid transparent; }
.config .decoracao[aria-checked="true"] { border-color: var(--limao); }
.config .linha-copiar input { height: 42px; }
.sobre { display: flex; gap: 16px; align-items: flex-start; }
.sobre-marca { border-radius: 14px; flex: none; }
.sobre p:last-child { margin-bottom: 0; }

/* Salas: o que a sala trava (permissões avançadas). */
.trava-voz { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--vermelho); color: #fff; flex: none; }
.trava-voz .ic { width: 11px; height: 11px; stroke-width: 2.6; }
:is(.botao-icone, .controle).travado { position: relative; }
:is(.botao-icone, .controle).travado::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 2px var(--fundo-1); }
.canal.trancada { opacity: 0.55; }
.canal.trancada:hover { opacity: 0.8; }
.canal.soltar-aqui { background: var(--limao-escuro); box-shadow: inset 0 0 0 1px var(--limao); }
.membro-voz[draggable="true"] { cursor: grab; }
.relogio-lento { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 26px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; align-self: center; }

/* Tema claro: cartões brancos sobre o cinza. */
html[data-tema="claro"] .config { background: var(--fundo-1); }
html[data-tema="claro"] .config-lado { background: var(--fundo-0); }
html[data-tema="claro"] :is(.cartao-config, .cargos-coluna, .cargo-editor) { background: #fff; }
html[data-tema="claro"] .config :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) { background-color: var(--fundo-1); }
html[data-tema="claro"] :where(.config) :where(.segmentado, .triplo, .tecla, .ficha-acesso, .escolha-status button, .emoji-tile, .cargo-previa, .opcao-aparencia, .decoracao) { background-color: var(--fundo-1); }
html[data-tema="claro"] .barra-salvar { background: #fff; }
/* Com degradê (Ajustes → Aparência) as colunas do app ficam translúcidas pra
   cor aparecer por trás. A tela de configurações cobre o app: ela pinta o
   próprio degradê embaixo, senão o app aparecia através dela (14/10: "tá com
   fundo transparente, daí fica poluído"). E a barra de salvar é sempre sólida. */
html:not([data-degrade="nenhum"]) .config { background: linear-gradient(var(--fundo-2), var(--fundo-2)), var(--degrade) fixed; }
html:not([data-degrade="nenhum"]):not([data-tema="claro"]) .barra-salvar { background: #0c0b11; }
/* O vermelho do "treme" vale em qualquer tema (o fundo sólido acima, e o do claro, ganhavam dele). */
.config .barra-salvar.treme { background: var(--vermelho-fundo) !important; }

/* Telas menores. */
@media (max-width: 1100px) {
  .config { grid-template-columns: 232px minmax(0, 1fr) 72px; }
  .config-lado { justify-content: stretch; }
  .config-lado-dentro { width: 100%; padding-left: 12px; }
  .config-conteudo { padding: 48px 28px 128px; }
  .barra-salvar { left: 28px; right: 28px; }
  .cargos-tela { grid-template-columns: 200px minmax(0, 1fr); }
  .avancadas { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cargos-tela, .avancadas { grid-template-columns: 1fr; }
  .cargos-coluna, .avancadas-alvos { position: static; }
}
@media (max-width: 700px) {
  .config { grid-template-columns: 1fr; }
  .config-canto { position: fixed; top: 8px; right: 8px; padding: 0; z-index: 3; }
  .config-fechar small { display: none; }
  .config-fechar .ic { width: 34px; height: 34px; padding: 7px; background: var(--fundo-1); }
  .config-lado { border-right: 0; justify-content: stretch; }
  .config-lado-dentro { padding: 20px 12px 32px; }
  .config-item { min-height: 44px; font-size: 15.5px; }
  .config-coluna { display: none; }
  .config.mostrando .config-lado { display: none; }
  .config.mostrando .config-coluna { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .config-topo-celular { display: flex; align-items: center; gap: 4px; padding: 8px 56px 8px 6px; border-bottom: 1px solid var(--linha); background: var(--fundo-1); min-height: 52px; }
  .config-topo-celular b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .config-conteudo { position: static; overflow-y: auto; min-height: 0; padding: 18px 14px 128px; }
  .config-cabecalho h2 { font-size: 22px; }
  .cartao-config, .cargo-editor { padding: 16px; border-radius: 14px; }
  .abas-config { margin: 0 -16px; padding: 0 10px; }
  .barra-salvar { left: 10px; right: 10px; bottom: 10px; padding: 10px 10px 10px 14px; flex-wrap: wrap; }
  .barra-salvar-texto { flex-basis: 100%; font-size: 13.5px; }
  .barra-salvar .pilula { margin-left: auto; }
  .duas-colunas { grid-template-columns: 1fr; }
  .escolha-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-recado { flex-wrap: wrap; }
  .config .linha-recado > select { width: 100%; }
  .servidor-identidade { flex-direction: column; align-items: flex-start; }
  .avancadas-alvos { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .avancadas-alvos-topo { padding: 0; flex: none; }
  .avancadas-alvos-topo span { display: none; }
  .alvo { flex: none; background: var(--fundo-0); border: 1px solid var(--linha); }
  .linha-config { flex-wrap: wrap; }
  .linha-config:has(.triplo) { flex-wrap: nowrap; }
  .sobre { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .config, .barra-salvar, .barra-salvar.treme { animation: none; }
}

/* A tela de entrar: colar o link de convite ali mesmo (14/10). */
.link-convite { color: var(--limao-letra); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.link-convite:hover { color: var(--texto); }
#colar-convite:empty { display: none; }

/* O nome dourado que brilha (o do dono), liberado pra todo mundo como efeito
   "Ouro brilhante" (14/10). Brilha nas listas, na sala e no palco; na conversa,
   com o mouse em cima (como o do dono). */
.nome-estilo.efeito-ouro {
  color: transparent; text-shadow: none; font-weight: 800;
  background-image: linear-gradient(100deg, #b8860b 0%, #f5c542 20%, #fff6c9 36%, #f5c542 50%, #b8860b 68%, #f5c542 84%, #fff6c9 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  animation: ouro-correndo 3.2s linear infinite paused;
}
html[data-tema="claro"] .nome-estilo.efeito-ouro {
  background-image: linear-gradient(100deg, #6b4e00 0%, #a8790a 25%, #d4a017 40%, #a8790a 55%, #6b4e00 75%, #a8790a 100%);
}
.efeito-ouro.animar, .membro .efeito-ouro, .membro-voz .efeito-ouro, .quadro .efeito-ouro, .painel-eu .efeito-ouro, .mensagem:hover .efeito-ouro, .cartao-perfil .efeito-ouro {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) { .nome-estilo.efeito-ouro { animation: none; } }

/* Arrastar alguém pra outra sala: onde dá pra soltar, acende. */
.na-voz.soltar-aqui, .palco-corpo.soltar-aqui { outline: 2px dashed var(--limao); outline-offset: -4px; border-radius: 12px; background-color: rgba(198, 244, 50, 0.06); }

/* ---------- Concord (15/10): a marca, o teste de 24h e o começo ---------- */

@font-face { font-family: 'Adventor'; src: url('/fontes/adventor-bold.otf') format('opentype'); font-weight: 500 900; font-display: swap; }
:root { --violeta: #4c2daa; --fonte-marca: 'Adventor', 'Century Gothic', 'Figtree', sans-serif; }

/* Telas de entrar: o símbolo da marca e o brilho violeta no fundo. */
.tela-cheia:not(.com-fundo) { background: radial-gradient(60% 55% at 90% -5%, rgba(97, 65, 197, 0.45), transparent 70%), var(--fundo-0); }
.cartao-entrada .marca-concord { width: 64px; height: 64px; border-radius: 0; filter: drop-shadow(0 0 22px rgba(190, 243, 67, 0.25)); }
.cartao-entrada h1 { font-family: var(--fonte-marca); letter-spacing: -0.035em; }
.aceite-login { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 14px; color: var(--texto-2); cursor: pointer; line-height: 1.45; }
.aceite-login input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--limao); flex: none; }
.aceite-login a { color: var(--limao-letra); }

/* O contador do teste: desde 26/10 um cartão no pé da coluna da esquerda
   (antes ficava pendurado no alto, por cima das abas e dos botões). */
.faixa-teste {
  flex: none; margin: 8px 8px 0; padding: 11px 12px 12px; border-radius: 12px;
  display: grid; gap: 7px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(97, 65, 197, 0.35), transparent 70%), #121019;
  border: 1px solid rgba(97, 65, 197, 0.5);
  color: var(--texto-2); font-size: 12.5px;
}
.faixa-teste[hidden] { display: none; }
.faixa-teste-cima { display: flex; align-items: center; gap: 6px; min-width: 0; }
.faixa-teste-texto { color: var(--texto); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-teste-falta { margin-left: auto; color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.faixa-teste-tempo { font: 700 24px/1 var(--fonte-mono, ui-monospace), monospace; font-variant-numeric: tabular-nums; color: var(--limao); letter-spacing: 0.01em; }
.faixa-teste-barra { display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.faixa-teste-barra i { display: block; height: 100%; border-radius: inherit; background: var(--limao); transition: width 1s linear; }
.faixa-teste.acabando .faixa-teste-tempo { color: #ff7a57; }
.faixa-teste.acabando .faixa-teste-barra i { background: #ff7a57; }
.faixa-teste-botao { width: 100%; padding: 8px 12px; border-radius: 9px; background: var(--limao); color: #10150a; font: 700 13px var(--fonte-marca); letter-spacing: -0.01em; }
.faixa-teste-botao:hover { filter: brightness(1.07); }
@media (prefers-reduced-motion: reduce) { .faixa-teste-barra i { transition: none; } }
html[data-tema="claro"] .faixa-teste { background: radial-gradient(120% 90% at 0% 0%, rgba(97, 65, 197, 0.14), transparent 70%), #fff; }
html[data-tema="claro"] .faixa-teste-tempo { color: #4f7a00; }
html[data-tema="claro"] .faixa-teste-barra { background: rgba(0, 0, 0, 0.08); }

/* O começo de quem acabou de criar a conta: o Concord ainda zerado. */
.bvc {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(60% 55% at 92% -5%, rgba(97, 65, 197, 0.55), transparent 70%), repeating-linear-gradient(-58deg, transparent 0 140px, rgba(242, 242, 244, 0.025) 140px 141px), #09090b;
}
.bvc-caixa { width: min(560px, 100%); display: grid; justify-items: center; gap: 16px; text-align: center; }
.bvc-simbolo { width: 88px; height: 88px; filter: drop-shadow(0 0 34px rgba(190, 243, 67, 0.3)); }
.bvc-passos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto-3); }
.bvc-passos li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
.bvc-passos li.feito { background: #1b2410; color: var(--limao); }
.bvc-passos li.feito::before { content: '✓ '; }
.bvc-passos li.agora { background: #1c1538; color: #b9a6ff; }
.bvc h1 { margin: 6px 0 0; font: 700 clamp(32px, 6vw, 46px)/1.04 var(--fonte-marca); letter-spacing: -0.045em; text-wrap: balance; }
.bvc-sub { margin: 0; color: var(--texto-2); font-size: 17px; max-width: 44ch; }
.bvc-teste { margin: 0; color: var(--limao-letra); font-weight: 600; font-size: 14px; }
.bvc-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.bvc-botao { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 12px; background: var(--limao); color: #10150a; font: 700 16px var(--fonte-marca); letter-spacing: -0.01em; }
.bvc-botao:hover { filter: brightness(1.06); }
.bvc-botao.secundario { background: #1c1538; color: var(--texto); box-shadow: inset 0 0 0 1px #3a2a78; }
.bvc-depois { margin-top: 4px; color: var(--texto-3); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
html[data-tema="claro"] .bvc { background: radial-gradient(60% 55% at 92% -5%, rgba(97, 65, 197, 0.35), transparent 70%), #f2f2f4; }
html[data-tema="claro"] .bvc-botao.secundario { background: #ece7ff; color: #2a1d63; box-shadow: inset 0 0 0 1px #c9bdf5; }
/* "Isso aqui tu já conhece": a aula de 20 segundos, com a piscada pro app azul. */
.bvc-aula { width: 100%; display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(185, 166, 255, 0.18); text-align: left; }
.bvc-aula-titulo { margin: 0; color: var(--texto-2); font-size: 15px; }
.bvc-aula-titulo b { color: var(--texto); }
.bvc-aula-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bvc-aula-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--texto-2); }
.bvc-aula-lista .ic { flex: none; margin-top: 2px; color: #b9a6ff; }
.bvc-aula-pe { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-3); }
html[data-tema="claro"] .bvc-aula { background: #fff; box-shadow: inset 0 0 0 1px #ddd5fb; }
html[data-tema="claro"] .bvc-aula-lista .ic { color: #6141c5; }

/* ---------- Concord: o violeta na plataforma (15/10) ----------
   Ele: "implementa esse roxo, esse violeta, dentro da plataforma". A receita é
   a do moodboard dele, com as cores tiradas do próprio arquivo: preto profundo
   + presença violeta + energia lima. O lima continua sendo o botão de ação e o
   que está ligado; o violeta é o que está escolhido, o botão de segunda opção,
   os menus e o brilho no canto (o mesmo do ícone). O brilho é um degradê
   parado: nada de desfoque nem animação, o programa continua leve. */
:root {
  --violeta-vivo: #6141c5;
  --violeta-letra: #b9a6ff;
  --violeta-botao: #302348;     /* o "Saiba mais" do moodboard */
  --violeta-botao-2: #3b2b58;
  --violeta-borda: #574279;
  --violeta-chip: #2e2344;      /* o "Em destaque" */
  --violeta-escolhido: rgba(97, 65, 197, 0.28);
  --violeta-passando: rgba(97, 65, 197, 0.12);
  --violeta-foco: rgba(150, 120, 255, 0.6);
  --limao-escuro: #2a3718;      /* o "Confirmado" */
  --fonte-titulo: var(--fonte-marca);
}
/* O escuro puxado pro violeta, como os cartões do moodboard (#14141A, borda
   #27242D). Desde 20/10 é o tema "Meia-noite"; o padrão é o do Discord (no fim). */
html[data-tema="meia-noite"] {
  --fundo-1: #0f0e14;
  --fundo-2: #131219;
  --superficie: #1a1822;
  --superficie-2: #23202d;
  --superficie-3: #2e2a3b;
  --linha: rgba(226, 218, 255, 0.065);
  --linha-forte: rgba(226, 218, 255, 0.12);
  --texto: #f2f2f4;
  --texto-2: #bdbac8;
  --texto-3: #8c8996;
}
html[data-tema="claro"] {
  --violeta-letra: #4c2daa;
  --violeta-botao: #ece7ff;
  --violeta-botao-2: #e0d7ff;
  --violeta-borda: #cdc2f6;
  --violeta-chip: #ece7ff;
  --violeta-escolhido: rgba(76, 45, 170, 0.13);
  --violeta-passando: rgba(76, 45, 170, 0.06);
  --violeta-foco: rgba(76, 45, 170, 0.5);
}
::selection { background: rgba(97, 65, 197, 0.6); color: #fff; }

/* Os títulos na letra da logo (a geométrica dele), mais juntinha como no moodboard. */
.modal h2, .comeco h2, .boas-vindas h1, .ajustes-corpo h2, .adicionar-amigo h2, .novo-servidor h2, .cartao-nome,
.lateral-topo, .vazio h3, .ligacao h2, .cabecalho-titulo, .config-cabecalho h2, .painel-titulo {
  font-family: var(--fonte-titulo); letter-spacing: -0.03em;
}
.trilho-iniciais { letter-spacing: -0.01em; }

/* O brilho violeta no canto de cima, à direita: na conversa e na lista de
   membros, como se fosse um só. Só nos temas escuros sem degradê. */
html[data-degrade="nenhum"][data-tema="meia-noite"] .principal {
  background: radial-gradient(46% 52% at 100% 0%, rgba(97, 65, 197, 0.2), rgba(76, 45, 170, 0.06) 48%, transparent 78%), var(--fundo-2);
}
html[data-degrade="nenhum"][data-tema="meia-noite"] .membros {
  background: radial-gradient(130% 34% at 100% 0%, rgba(97, 65, 197, 0.34), rgba(76, 45, 170, 0.1) 50%, transparent 82%), var(--fundo-1);
}
html[data-degrade="nenhum"][data-tema="meia-noite"] .palco {
  background: radial-gradient(46% 52% at 100% 0%, rgba(97, 65, 197, 0.16), transparent 75%), #0c0b12;
}
html[data-tema="claro"][data-degrade="nenhum"] .principal {
  background: radial-gradient(46% 52% at 100% 0%, rgba(97, 65, 197, 0.1), transparent 75%), var(--fundo-2);
}
html[data-tema="claro"][data-degrade="nenhum"] .membros {
  background: radial-gradient(130% 34% at 100% 0%, rgba(97, 65, 197, 0.14), transparent 80%), var(--fundo-1);
}

/* A barra de servidores: passou o mouse ou abriu, o quadrado fica violeta;
   a barrinha do lado de quem está aberto é lima. */
.trilho-item:hover:not(.ativo), .trilho-item.ativo { background: var(--violeta); color: #fff; }
.trilho-item.ativo::before { background: var(--limao); }
html[data-tema="claro"] .trilho-item:hover:not(.ativo), html[data-tema="claro"] .trilho-item.ativo, html[data-tema="claro"] .trilho-inicio.ativo { color: #fff; }
/* O Início é o símbolo da marca: lima no escuro, branco no violeta. */
.trilho-inicio { background: var(--superficie); }
.trilho-inicio.ativo, .trilho-inicio:hover:not(.ativo) { background: var(--violeta); }
.trilho-simbolo {
  width: 28px; height: 28px; background: var(--limao); transition: background 0.18s;
  -webkit-mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; mask: url('/marca/concord-simbolo.svg') center / contain no-repeat;
}
.trilho-inicio.ativo .trilho-simbolo, .trilho-inicio:hover .trilho-simbolo { background: #fff; }
html[data-tema="claro"] .trilho-inicio:not(.ativo):not(:hover) .trilho-simbolo { background: var(--violeta); }
/* Criar servidor: o "+" é ação, então é lima. */
.trilho-novo { color: var(--limao-letra); }
.trilho-novo:hover { background: var(--limao); color: var(--limao-texto); }

/* Canais: o aberto fica violeta. A sala de voz em que você está continua lima (é o "ligado"). */
.canal:hover { background: var(--violeta-passando); color: var(--texto); }
.canal.aberto { background: var(--violeta-escolhido); color: var(--texto); }
.canal.aberto .ic { color: var(--violeta-letra); opacity: 1; }
.canal.aberto.na-sala .ic { color: var(--limao-letra); }

/* Menus: a linha do mouse é violeta, como o Discord faz com o azul dele. */
.menu { background: radial-gradient(110% 70% at 100% 0%, rgba(97, 65, 197, 0.16), transparent 70%), #17151f; }
.menu button:hover { background: var(--violeta); color: #fff; }
/* Janelas: o mesmo brilho do canto. */
.modal { background: radial-gradient(85% 50% at 100% 0%, rgba(97, 65, 197, 0.17), transparent 72%), #14131b; }

/* O botão de segunda opção é o "Saiba mais" do moodboard. */
.pilula.escura { background: var(--violeta-botao); color: var(--texto); box-shadow: inset 0 0 0 1px var(--violeta-borda); }
.pilula.escura:hover:not(:disabled) { background: var(--violeta-botao-2); }
html[data-tema="claro"] .pilula.escura { color: #22184f; }

/* O que está escolhido (abas, listas, o item do menu de configurações) é violeta. */
.segmentado button[aria-selected="true"], .mi-aba[aria-pressed="true"] { background: var(--violeta); color: #fff; box-shadow: none; }
.aba.ativa, .config-item[aria-current="page"], .alvo[aria-current="true"], .cargo-item[aria-current="true"] { background: var(--violeta-escolhido); color: var(--texto); }
.config-item[aria-current="page"] .ic { color: var(--violeta-letra); }
.aba-config.ativa { border-bottom-color: var(--violeta-letra); }

/* Onde se escreve: a borda acende em violeta. */
.caixa-texto:focus-within, .campo input:focus, .campo select:focus, .campo-lupa:focus-within, .campo-busca:focus, .amigos-filtro:focus { border-color: var(--violeta-foco); }
.config :is(input, select, textarea):focus { border-color: var(--violeta-foco); box-shadow: 0 0 0 3px rgba(97, 65, 197, 0.2); }

/* Conversa: a mensagem do mouse ganha um fundo violeta bem leve; link é lavanda. */
.mensagem:hover { background: rgba(150, 120, 255, 0.045); }
a { color: var(--violeta-letra); }
html[data-tema="claro"] a { color: #4c2daa; }
a.pilula, html[data-tema="claro"] a.pilula { color: var(--limao-texto); }
a.pilula.escura, html[data-tema="claro"] a.pilula.escura { color: var(--texto); }
.comeco-icone { background: var(--violeta); color: #fff; box-shadow: 0 0 0 6px rgba(97, 65, 197, 0.16); }

/* O aviso de instalar é "em destaque": violeta, não verde. */
.dica-instalar { background: var(--violeta-chip); border-color: var(--violeta-borda); }
.dica-instalar-texto { color: var(--violeta-letra); }
.modelo:hover { background: linear-gradient(var(--violeta-passando), var(--violeta-passando)), var(--superficie-2); border-color: var(--violeta-borda); }
/* Escolhido com contorno (tipo de canal, tema): anel violeta claro, que aparece no escuro. */
:root { --violeta-anel: #8b6cf0; }
html[data-tema="claro"] { --violeta-anel: #4c2daa; }
.tipo[aria-checked="true"], .opcao-aparencia[aria-checked="true"], .config .opcao-aparencia[aria-checked="true"] { border-color: var(--violeta-anel); background: var(--violeta-chip); }
/* Adicionar amigo é ação: lima (o verde de atender ligação fica só na ligação). */
.aba.adicionar, .aba.adicionar:hover { background: var(--limao); color: var(--limao-texto); }
.aba.adicionar.ativa { background: transparent; color: var(--limao-letra); }
.adicionar-linha:focus-within { border-color: var(--violeta-foco); }
/* As configurações em tela cheia: o brilho do canto também. */
html[data-degrade="nenhum"][data-tema="meia-noite"] .config {
  background: radial-gradient(40% 46% at 100% 0%, rgba(97, 65, 197, 0.2), rgba(76, 45, 170, 0.06) 50%, transparent 80%), var(--fundo-2);
}

/* ---------- O Início no jeito do Discord e o contador da call (15/10) ----------
   Ele: "pode deixar a home bem semelhante" (com o print do Discord) e "coloque
   o contador de horas das pessoas que estão na call". */
#topo-inicio { display: none; }
.app.no-inicio #topo-comunidade { display: none; }
.app.no-inicio #topo-inicio { display: flex; padding: 0 10px; cursor: pointer; }
.topo-inicio span {
  flex: 1; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--fundo-0); color: var(--texto-2); font-family: var(--fonte); font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--linha);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-inicio:hover span { color: var(--texto); }
.item-inicio { height: 42px; margin-bottom: 2px; gap: 12px; font-size: 15.5px; }
.item-inicio .ic { width: 22px; height: 22px; opacity: 0.9; }
.item-inicio .canal-nome { font-weight: 600; }
.etiqueta-novo { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--texto); color: var(--fundo-0); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; }
.categoria-dms { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--linha); }
.lista-canais .conversa { height: 44px; }

/* O alto dos amigos: Amigos • Disponível  Todos  [Adicionar amigo] ...  [nova conversa] */
.cabecalho-amigos { gap: 8px; }
.cabecalho-ponto { width: 4px; height: 4px; border-radius: 50%; background: var(--texto-3); margin: 0 4px; flex: none; }
.cabecalho-amigos .cabecalho-espaco { flex: 1; }
.aba { height: 32px; padding: 0 12px; font-size: 15px; }
.aba.adicionar, .aba.adicionar:hover { background: var(--violeta-vivo); color: #fff; }
.aba.adicionar:hover { filter: brightness(1.12); }
.aba.adicionar.ativa { background: transparent; color: var(--violeta-letra); filter: none; }
html[data-tema="claro"] .aba.adicionar.ativa { color: #4c2daa; }

/* O aviso dos bloqueados, a busca com a lupa na esquerda e o "Online — 2". */
.amigos-aviso {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px;
  background: var(--fundo-0); border: 1px solid var(--linha); color: var(--texto-2); font-size: 14px; font-weight: 550;
}
.amigos-aviso .ic { color: var(--texto-3); flex: none; }
.amigos-aviso-link { color: var(--violeta-letra); font-weight: 650; }
.amigos-aviso-link:hover { text-decoration: underline; }
.amigos-busca .ic { left: 12px; right: auto; }
.amigos-filtro { height: 38px; padding: 0 12px 0 38px; border-radius: 10px; font-size: 15px; }
.amigos-contagem { padding: 18px 2px 10px; color: var(--texto-2); font-size: 14px; font-weight: 650; }
.amigos-corpo .amigos-contagem + .amigo { border-top-color: transparent; }
.amigo { padding: 12px 10px; }
.amigo-nome { font-size: 16px; }
.amigo-sub { font-size: 13.5px; margin-top: 1px; }

/* O que a pessoa está fazendo, com o contador da call. */
.atividade-voz { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; color: var(--texto-2); }
.atividade-voz .ic { color: var(--limao-letra); flex: none; }
.atividade-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atividade-ponto { color: var(--texto-3); }
.tempo-call { font-variant-numeric: tabular-nums; white-space: nowrap; }
.atividade-voz .tempo-call { color: var(--limao-letra); font-weight: 650; }
/* Na lista de canais: a sala mostra há quanto tempo tem gente; cada pessoa, o tempo dela. */
.canal .tempo-call.da-sala { margin-left: auto; font-size: 11.5px; font-weight: 650; color: var(--texto-3); }
.canal.na-sala .tempo-call.da-sala { color: var(--limao-letra); }
.canal .tempo-call.da-sala + .lotacao { margin-left: 6px; }
.membro-voz .tempo-call.da-pessoa { font-size: 11px; font-weight: 600; color: var(--texto-3); margin-left: 2px; }
.painel-voz-sala .tempo-call { color: var(--texto-2); font-weight: 600; }
.cabecalho-sub .tempo-call { color: var(--texto-2); font-weight: 650; }

/* ---------- O suporte (15/10) ----------
   A conversa da pessoa com o "Suporte do Concord" e a Caixa do suporte da
   equipe (conversas, vigia e bots). Camada própria, acima até da tela dos
   planos (a que não fecha quando o teste acaba). */
.sp-fundo { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(3, 3, 6, 0.72); }
/* O Nick solto (26/10, ele: "se eu encontro um erro numa página e quero falar
   com o suporte, eu quero explicar o erro que eu tô vendo ali na hora"): uma
   janelinha no canto, sem escurecer nada, e a tela de trás continua usável.
   No celular não cabe do lado: volta a abrir no meio. */
.sp-fundo.solto { background: none; pointer-events: none; place-items: end; padding: 20px; }
.sp-fundo.solto > .sp-janela { pointer-events: auto; height: min(600px, calc(100dvh - 40px)); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--linha-forte); }
@media (max-width: 640px) {
  .sp-fundo.solto { background: rgba(3, 3, 6, 0.72); pointer-events: auto; place-items: center; padding: 16px; }
}
.sp-janela, .cx-janela {
  display: flex; flex-direction: column; width: min(440px, 100%); height: min(640px, calc(100dvh - 32px));
  background: var(--fundo-2); border: 1px solid var(--linha-forte); border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: hidden; color: var(--texto);
}
.cx-janela { width: min(1040px, 100%); height: min(760px, calc(100dvh - 32px)); }
.sp-topo, .cx-topo { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--linha); }
.sp-icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--violeta-chip, #2e2344); color: var(--violeta-letra, #b9a6ff); }
.sp-titulo { display: grid; flex: 1; min-width: 0; }
.sp-titulo small { color: var(--texto-3); font-size: 12px; }
.sp-fechar { width: 34px; height: 34px; flex: none; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); font-size: 24px; line-height: 1; cursor: pointer; }
.sp-fechar:hover { background: var(--superficie-2); color: var(--texto); }
.sp-mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-vazio { margin: auto 0; display: grid; gap: 14px; text-align: center; color: var(--texto-2); }
.sp-prontas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sp-pronta { padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: 99px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; }
.sp-pronta:hover { border-color: var(--violeta-borda, #574279); background: var(--superficie-2); }
.sp-bolha { max-width: 85%; align-self: flex-start; display: grid; gap: 3px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--superficie-2); overflow-wrap: anywhere; }
.sp-bolha.minha { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--violeta-botao, #302348); }
.sp-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--violeta-letra, #b9a6ff); }
.sp-ia { padding: 1px 6px; border-radius: 99px; background: var(--superficie-3); color: var(--texto-3); font-size: 10.5px; font-weight: 600; }
.sp-texto { line-height: 1.45; }
.sp-hora { justify-self: end; font-size: 11px; color: var(--texto-3); }
.sp-sistema { align-self: center; max-width: 92%; margin: 2px 0; padding: 8px 12px; border-radius: var(--raio); background: var(--superficie); color: var(--texto-2); font-size: 12.5px; text-align: center; line-height: 1.45; }
.sp-pe { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.sp-escrever { flex: 1; min-height: 40px; max-height: 140px; resize: none; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 12px; background: var(--superficie); color: var(--texto); font: inherit; line-height: 1.35; }
.sp-escrever:focus { outline: 2px solid var(--violeta-vivo, #6141c5); outline-offset: -1px; }
.sp-mandar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--limao); color: var(--limao-texto); cursor: pointer; }
.sp-mandar:disabled { opacity: 0.5; cursor: default; }

/* A caixa do suporte (a equipe) */
.cx-titulo { white-space: nowrap; }
.cx-abas { display: flex; gap: 4px; margin-left: 8px; overflow-x: auto; }
.cx-aba { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--texto-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cx-aba:hover { background: var(--superficie-2); color: var(--texto); }
.cx-aba.ativa { background: var(--violeta-chip, #2e2344); color: var(--violeta-letra, #b9a6ff); }
.cx-corpo { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.cx-carregando, .cx-vazio { margin: 16px; color: var(--texto-3); }
.cx-duas { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.cx-lista { min-height: 0; overflow-y: auto; border-right: 1px solid var(--linha); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cx-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cx-filtro { padding: 5px 10px; border: 1px solid var(--linha-forte); border-radius: 99px; background: transparent; color: var(--texto-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.cx-filtro.ativo { border-color: var(--violeta-borda, #574279); background: var(--violeta-chip, #2e2344); color: var(--violeta-letra, #b9a6ff); }
.cx-item { display: grid; gap: 4px; padding: 10px; border: 1px solid transparent; border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.cx-item:hover { background: var(--superficie-2); }
.cx-item.aberto { border-color: var(--violeta-borda, #574279); }
.cx-item.esperando { box-shadow: inset 3px 0 0 var(--limao); }
.cx-item-topo { display: flex; justify-content: space-between; gap: 8px; }
.cx-item-topo time { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.cx-item-texto { color: var(--texto-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-item-pe { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-estado, .cx-plano, .cx-novo { padding: 1px 7px; border-radius: 99px; background: var(--superficie-3); color: var(--texto-2); font-size: 11px; font-weight: 600; }
.cx-estado.e-aberta { background: var(--limao-escuro); color: var(--limao-letra); }
.cx-estado.e-precisa-de-voce { background: var(--vermelho-fundo); color: var(--vermelho); }
.cx-novo { background: var(--limao); color: var(--limao-texto); }
.cx-conversa { min-height: 0; display: flex; flex-direction: column; }
.cx-ficha { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--linha); font-size: 13px; color: var(--texto-2); }
.cx-ficha b { color: var(--texto); font-size: 15px; }
.cx-motivo { margin-top: 4px; color: var(--vermelho); font-weight: 600; }
.cx-mensagens { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.cx-msg { display: grid; gap: 3px; max-width: 88%; padding: 8px 11px; border-radius: 12px; background: var(--superficie-2); overflow-wrap: anywhere; line-height: 1.45; }
.cx-msg.de-suporte { align-self: flex-end; background: var(--violeta-botao, #302348); }
.cx-msg.de-nota { align-self: stretch; max-width: none; background: #3a3214; color: #f4e3a1; }
.cx-msg.de-sistema { align-self: center; background: var(--superficie); color: var(--texto-3); font-size: 12.5px; }
.cx-msg-quem { font-size: 11.5px; font-weight: 700; color: var(--texto-3); }
.cx-msg time { justify-self: end; font-size: 11px; color: var(--texto-3); }
.cx-responder { display: grid; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
.cx-escrever, .cx-campo { width: 100%; padding: 9px 11px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; resize: vertical; }
.cx-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-voltar { align-self: flex-start; margin: 8px 12px 0; display: none; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 99px; background: var(--superficie-2); color: var(--texto); font: inherit; cursor: pointer; }
.cx-vigia, .cx-bots { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 12px; }
.cx-vigia h3, .cx-bots h3 { margin: 8px 0 0; font-size: 15px; }
.cx-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cx-cartao { display: grid; gap: 2px; padding: 12px; border-radius: var(--raio); background: var(--superficie); }
.cx-cartao small, .cx-cartao span { color: var(--texto-3); font-size: 12px; }
.cx-cartao b { font-size: 22px; letter-spacing: -0.02em; }
.cx-alertas, .cx-uso, .cx-chaves, .cx-pedidos { display: grid; gap: 6px; }
.cx-alerta { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--raio); background: var(--superficie); border-left: 3px solid var(--texto-3); font-size: 13px; color: var(--texto-2); }
.cx-alerta.n-atencao { border-left-color: #f5b13d; }
.cx-alerta.n-grave { border-left-color: var(--vermelho); }
.cx-alerta-topo { display: flex; justify-content: space-between; gap: 8px; color: var(--texto); }
.cx-alerta-topo time { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.cx-uso-linha, .cx-chave, .cx-pedido { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--raio); background: var(--superficie); font-size: 13px; color: var(--texto-2); }
.cx-uso-linha b, .cx-chave b, .cx-pedido b { color: var(--texto); }
/* A aba Site da Caixa (16/10): a barra de até onde rolaram. */
.cx-barra { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.cx-barra i { display: block; height: 100%; border-radius: inherit; background: var(--limao); }
.cx-chave { grid-template-columns: 1fr auto; align-items: center; }
.cx-chave span { grid-column: 1; }
.cx-chave button { grid-column: 2; grid-row: 1 / span 2; }
.cx-pedido.g-alta { border-left: 3px solid var(--vermelho); }
.cx-pedido.espera { box-shadow: inset 0 0 0 1px var(--limao); }
.cx-pedido-texto { color: var(--texto-3); white-space: pre-wrap; }
.cx-pedido .cx-botoes { margin-top: 6px; }
.cx-resposta { color: var(--limao-letra); }
.cx-explica { margin: 0; color: var(--texto-3); font-size: 13px; line-height: 1.45; }
.cx-form { display: grid; gap: 8px; padding: 12px; border-radius: var(--raio); background: var(--superficie); }
.cx-form button { justify-self: start; }
.cx-marca { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.cx-marca b { color: var(--texto); }
.cx-chave-nova:empty { display: none; }
.cx-chave-nova { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--limao); border-radius: var(--raio); background: var(--limao-escuro); font-size: 13px; }
.cx-chave-nova p { margin: 0; }
.cx-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-copiar code, .cx-explica code { padding: 3px 6px; border-radius: 6px; background: var(--fundo-0); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.cx-gancho { display: grid; gap: 8px; padding: 12px; border-radius: var(--raio); background: var(--superficie); }
.cx-status { font-size: 12.5px; color: var(--texto-2); }
/* Os parceiros (26/10): uma aba por parceiro, o link e os números dele. */
.px-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.px-abas .cx-aba { background: var(--superficie); }
.px-abas .cx-aba.ativa { background: var(--violeta-chip, #2e2344); }
.px-desligado { font-size: 11px; font-weight: 600; color: var(--texto-3); }
.px-parceiro { display: grid; gap: 10px; padding: 14px; border-radius: var(--raio); border: 1px solid var(--linha-forte); }
.px-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.px-topo b { font-size: 18px; color: var(--texto); }
.px-topo span { font-size: 12.5px; color: var(--texto-3); }
.px-link { display: flex; gap: 8px; align-items: center; }
.px-link .cx-campo { flex: 1; min-width: 0; }
.px-link button { flex: none; }
.px-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.px-numero { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--raio); background: var(--superficie); min-width: 0; }
.px-numero small { font-size: 12px; color: var(--texto-3); }
.px-numero b { font-size: 20px; color: var(--texto); font-variant-numeric: tabular-nums; }
.px-numero span { font-size: 12px; color: var(--texto-3); }
.px-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-2); margin-top: 4px; }
.px-alerta { color: var(--vermelho); }
/* A aba Usuários (26/10): a lista de todo mundo e o vitalício de presente. */
.us-busca { display: flex; gap: 8px; }
.us-busca input { flex: 1; min-width: 0; }
.us-busca .us-ordem { width: auto; flex: none; }
.us-n { font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.us-lista { display: grid; gap: 6px; }
.us-pessoa { border-radius: var(--raio); background: var(--superficie); }
.us-pessoa.aberta { outline: 1px solid var(--linha-forte); }
.us-linha { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--raio); }
.us-linha:hover { background: var(--superficie-2); }
.us-quem { flex: 1; min-width: 0; display: grid; gap: 1px; }
.us-quem b, .us-quem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-quem b { color: var(--texto); font-size: 14px; }
.us-quem small, .us-uso small { color: var(--texto-3); font-size: 12px; }
.us-uso { display: grid; justify-items: end; gap: 3px; text-align: right; flex: none; max-width: 48%; }
.us-plano { padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.us-plano.limao { background: rgba(190, 243, 67, 0.14); color: var(--limao-letra); }
.us-plano.violeta { background: var(--violeta-chip, #2e2344); color: var(--violeta-letra, #b9a6ff); }
.us-plano.laranja { background: rgba(255, 138, 92, 0.14); color: #ffa27e; }
.us-plano.cinza { background: var(--superficie-2); color: var(--texto-3); }
.us-detalhe { display: grid; gap: 10px; padding: 4px 12px 12px; }
.us-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.us-info { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; background: var(--fundo-1, rgba(0, 0, 0, 0.2)); font-size: 13px; color: var(--texto); }
.us-info small { color: var(--texto-3); font-size: 11.5px; }
@media (max-width: 560px) {
  .us-uso small { display: none; }
  .us-busca { flex-wrap: wrap; }
  .us-busca .us-ordem { width: 100%; }
}
@media (max-width: 760px) {
  .sp-fundo { padding: 0; }
  .sp-janela, .cx-janela { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .cx-topo { flex-wrap: wrap; }
  .cx-abas { order: 3; width: 100%; margin-left: 0; }
  .cx-duas { grid-template-columns: 1fr; }
  .cx-duas.com-conversa .cx-lista { display: none; }
  .cx-duas:not(.com-conversa) .cx-conversa { display: none; }
  .cx-lista { border-right: 0; }
  .cx-voltar { display: inline-flex; }
}

/* ---------- 16/10 à noite: Em breve aqui dentro, Passe da Tropa, Nick, novidades e tour ---------- */

/* O Em breve, página do Início (antes abria o navegador). */
.eb-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 32px; display: grid; align-content: start; gap: 16px; }
.eb-hero {
  display: grid; gap: 8px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--linha-forte);
  background: radial-gradient(70% 120% at 100% 0%, rgba(190, 243, 67, 0.14), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(97, 65, 197, 0.35), transparent 60%), var(--superficie);
}
.eb-selo { justify-self: start; padding: 4px 10px; border-radius: 99px; background: var(--texto); color: var(--fundo-0); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.eb-hero h1 { margin: 0; max-width: 24ch; font: 700 clamp(24px, 3.2vw, 32px)/1.08 var(--fonte-marca); letter-spacing: -0.04em; color: var(--texto); text-wrap: balance; }
.eb-hero p { margin: 0; max-width: 60ch; color: var(--texto-2); }
.eb-chegou { display: grid; gap: 10px; }
.eb-chegou h2, .eb-subtitulo { margin: 4px 0 0; color: var(--texto-3); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.eb-chegou-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.eb-chegou-item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid rgba(190, 243, 67, 0.25); }
.eb-chegou-item span { grid-row: span 2; font-size: 20px; }
.eb-chegou-item b { color: var(--texto); font-size: 13.5px; }
.eb-chegou-item small { color: var(--texto-2); font-size: 12px; }
.eb-ideias { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.eb-ideia { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); }
.eb-emoji { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--superficie-2); font-size: 22px; }
.eb-texto { min-width: 0; display: grid; gap: 4px; align-content: start; }
.eb-texto h3 { margin: 0; color: var(--texto); font-size: 15.5px; }
.eb-texto p { margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.eb-virou { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px; border-radius: 99px; background: rgba(190, 243, 67, 0.12); color: var(--limao-letra); font-size: 12px; font-weight: 700; }
.eb-votos { grid-column: 1 / -1; display: grid; gap: 8px; }
.eb-botoes { display: flex; gap: 8px; }
.eb-voto { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--superficie-2); color: var(--texto); font-size: 13.5px; font-weight: 650; border: 1px solid transparent; }
.eb-voto b { color: var(--texto-2); font-weight: 700; }
.eb-voto:hover { border-color: var(--linha-forte); }
.eb-voto.marcado { background: rgba(190, 243, 67, 0.14); border-color: rgba(190, 243, 67, 0.55); color: var(--limao-letra); }
.eb-voto.nao.marcado { background: var(--superficie-3); border-color: var(--linha-forte); color: var(--texto); }
.eb-barra { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.eb-barra i { display: block; height: 100%; border-radius: inherit; background: var(--limao); transition: width 0.3s ease; }
.eb-votos small { color: var(--texto-3); font-size: 12px; }
.eb-nota, .eb-carregando { margin: 4px 0 0; color: var(--texto-3); font-size: 12.5px; }
.eb-erro { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--vermelho-fundo); color: var(--texto); }
@media (max-width: 720px) { .eb-corpo { padding: 14px 12px 24px; } .eb-ideias { grid-template-columns: 1fr; } }

/* O Passe da Tropa: o bilhete (um retângulo com os dois recortes do lado). */
.pt-bilhete, .tr-bilhete {
  width: 62px; height: 40px; display: grid; place-items: center; align-content: center; border-radius: 9px; background: var(--limao); color: #10150a; font: 700 15px/1 var(--fonte-marca);
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.pt-bilhete small, .tr-bilhete small { margin-top: 2px; font: 800 8px/1 var(--fonte); letter-spacing: 0.12em; }
.pt-bilhete.usado { background: var(--superficie-3); color: var(--texto-2); }
.pt-bilhete.aberto { background: rgba(190, 243, 67, 0.22); color: var(--limao-letra); }
.pt-bilhete.acabou { opacity: 0.55; }
/* A janela do Passe da Tropa (20/10, "mais clean como no Discord"): no jeito
   do "Convide amigos" do Discord. Título simples com o X, os 5 lugares em
   bolinhas, o link com o Copiar dentro do campo, a lista com linhas e o
   "como funciona" num pé de outra cor. */
.modal.pt-janela { width: min(480px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; gap: 0; padding: 0; border-radius: 12px; background: var(--superficie, #242429); }
.pt-topo { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 12px 20px; background: inherit; }
.pt-topo > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pt-topo h2 { margin: 0; font: 600 20px/1.2 var(--fonte); letter-spacing: -0.01em; color: var(--texto); }
.pt-topo p { margin: 0; color: var(--texto-2); font-size: 14px; }
.pt-fechar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; margin: -4px -2px 0 0; border-radius: 6px; color: var(--texto-3); }
.pt-fechar:hover { background: var(--superficie-2); color: var(--texto); }
.pt-corpo { display: grid; gap: 16px; padding: 4px 20px 0; }
.pt-resumo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; background: var(--fundo-1); }
.pt-resumo-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pt-resumo-texto b { color: var(--texto); font-size: 15px; font-weight: 600; }
.pt-resumo-texto small { color: var(--texto-2); font-size: 13px; line-height: 1.35; }
.pt-janela .pt-bilhetes { display: flex; gap: 6px; flex: none; }
.pt-janela .pt-bilhete { width: 26px; height: 26px; border-radius: 50%; -webkit-mask: none; mask: none; background: var(--superficie-2); color: var(--texto-2); overflow: hidden; }
.pt-janela .pt-bilhete.livre { background: transparent; box-shadow: inset 0 0 0 2px var(--violeta-vivo); }
.pt-janela .pt-bilhete.aberto { background: var(--violeta-escolhido); color: var(--violeta-letra); }
.pt-janela .pt-bilhete.usado .avatar { width: 26px !important; height: 26px !important; }
.pt-janela .pt-bilhete .ic { width: 14px; height: 14px; }
.pt-secao { display: grid; gap: 8px; }
.pt-janela .pt-rotulo { margin: 0; color: var(--texto-2); font: 700 12px/1.3 var(--fonte); letter-spacing: 0.02em; text-transform: uppercase; }
.pt-servidor { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 0; background: var(--fundo-1); color: var(--texto); font: inherit; font-size: 14px; }
.pt-janela .pt-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--violeta-vivo); color: #fff; font: 600 14px var(--fonte); letter-spacing: 0; }
.pt-janela .pt-botao:hover { background: #5235b3; filter: none; }
.pt-campo-link { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 8px; background: var(--fundo-1); }
.pt-link { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--texto); font: 14px var(--fonte); text-overflow: ellipsis; }
.pt-link:focus { outline: none; }
.pt-copiar { flex: none; min-width: 78px; height: 32px; padding: 0 14px; border-radius: 6px; background: var(--violeta-vivo); color: #fff; font-size: 14px; font-weight: 600; }
.pt-copiar:hover { background: #5235b3; }
.pt-copiar.copiado, .pt-copiar.copiado:hover { background: #248046; }
.pt-novo-pe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-novo-pe small { flex: 1 1 200px; color: var(--texto-3); font-size: 12px; line-height: 1.4; }
.pt-novo-botoes { display: flex; gap: 6px; }
.pt-acao { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; background: var(--superficie-2); color: var(--texto); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pt-acao:hover { background: var(--superficie-3); }
.pt-acao.copiado { background: #248046; color: #fff; }
.pt-lista { list-style: none; margin: -8px 0 0; padding: 0; display: grid; }
.pt-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.pt-item:first-child { border-top: 0; }
.pt-item-icone { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--superficie-2); color: var(--texto-2); }
.pt-item-texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pt-item-texto b { color: var(--texto); font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-item-texto small { color: var(--texto-2); font-size: 12.5px; }
.pt-item.convertido small { color: #3ba55c; font-weight: 600; }
.pt-item.acabou { opacity: 0.75; }
.pt-item-acoes { display: flex; align-items: center; gap: 4px; }
.pt-cancelar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--texto-3); }
.pt-cancelar:hover { background: var(--superficie-2); color: var(--texto); }
.pt-janela .pt-explica, .pt-janela .pt-carregando { margin: 0; color: var(--texto-2); font-size: 14px; }
.pt-corpo > :last-child:not(.pt-como) { margin-bottom: 20px; }
@media (max-width: 560px) { .pt-resumo { flex-wrap: wrap; } .pt-resumo-texto { flex-basis: 100%; } .pt-novo-pe { display: grid; } }
.pt-como { margin: 4px -20px 0; padding: 14px 20px 18px 40px; display: grid; gap: 6px; background: var(--fundo-1); border-top: 1px solid var(--linha); color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }
.pt-como li::marker { color: var(--texto-3); font-weight: 700; }
.pt-como b { color: var(--texto-2); font-weight: 600; }
/* a boas-vindas de quem usou o passe */
.modal.pt-boas { width: min(420px, 100%); justify-items: center; text-align: center; gap: 12px; padding: 26px 24px 22px; background: radial-gradient(80% 60% at 50% 0%, rgba(97, 65, 197, 0.45), transparent 70%), #14131b; }
.pt-boas-foto { position: relative; }
.pt-boas-foto .avatar { box-shadow: 0 0 0 4px #14131b, 0 0 0 6px var(--limao); }
.pt-boas-selo { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--limao); color: #10150a; box-shadow: 0 0 0 3px #14131b; }
.pt-boas-selo .ic { width: 16px; height: 16px; }
.pt-boas h2 { font: 700 26px/1.08 var(--fonte-marca); letter-spacing: -0.035em; text-wrap: balance; }
.pt-boas .pt-boas-sub { color: var(--texto-2); font-size: 15px; }
.pt-checks { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; justify-items: start; }
.pt-checks li { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 14px; }
.pt-checks .ic { color: var(--limao-letra); }
.pt-boas .pt-boas-pe { font-size: 12.5px; }
.pt-boas .pt-botao { width: 100%; }
html[data-tema="claro"] .modal.pt-boas { background: radial-gradient(80% 60% at 50% 0%, rgba(97, 65, 197, 0.18), transparent 70%), #fff; }
html[data-tema="claro"] .pt-boas-foto .avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 6px #7fb800; }
html[data-tema="claro"] .pt-boas-selo { box-shadow: 0 0 0 3px #fff; }
/* a boas-vindas do vitalício dado pelo dono e do parceiro (26/10) */
.vt-simbolo { display: block; width: 76px; height: 76px; border-radius: 50%; background: #0b0b0e; box-shadow: 0 0 0 4px #14131b, 0 0 0 6px var(--limao); }
.vt-link { display: flex; gap: 8px; width: 100%; }
.vt-boas .pt-checks li { text-align: left; }
.vt-boas .pt-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--violeta-vivo); color: #fff; font: 600 14px var(--fonte); cursor: pointer; }
.vt-boas .pt-botao:hover { background: #5235b3; }
.vt-link input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; font-size: 14px; }
/* a tela de entrar com o passe */
.pt-login { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left; background: rgba(190, 243, 67, 0.08); border: 1px solid rgba(190, 243, 67, 0.35); }
.pt-login > div:last-child { display: grid; gap: 2px; }
.pt-login b { color: var(--texto); font-size: 14.5px; }
.pt-login small { color: var(--texto-2); font-size: 12.5px; }
.pt-login-foto { position: relative; flex: none; }
.pt-login-selo { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--limao); color: #10150a; }
/* o convite, pra quem pode dar passe */
.convite-passe { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(190, 243, 67, 0.07); border: 1px solid rgba(190, 243, 67, 0.3); }
.convite-passe > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.convite-passe b { color: var(--texto); font-size: 14px; }
.convite-passe small { color: var(--texto-2); font-size: 12.5px; }
.convite-passe-icone { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--limao); color: #10150a; }
/* a faixa do alto, no passe */
.faixa-teste.no-passe { border-color: rgba(190, 243, 67, 0.45); }
.faixa-passe-icone { display: grid; place-items: center; color: var(--limao); }
/* o fim do passe e do teste, dentro da janela de compra (que tem as cores dela, sempre escura) */
.ck-tropa { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(242, 242, 244, 0.1); }
.ck-tropa-fotos { display: flex; align-items: center; flex: none; }
.ck-tropa-dono .avatar { box-shadow: 0 0 0 3px #111016, 0 0 0 5px #bef343; }
.ck-tropa-amigo { margin-left: -10px; }
.ck-tropa-amigo .avatar { box-shadow: 0 0 0 3px #111016; }
.ck-tropa-texto { display: grid; gap: 2px; min-width: 0; }
.ck-tropa-texto b { color: #f2f2f4; font-size: 15px; }
.ck-tropa-texto span { color: #a6a3b4; font-size: 13px; }
.ck-tropa-dica { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #1c1538; color: #d9cfff; font-size: 13.5px; box-shadow: inset 0 0 0 1px #3a2a78; }
.ck-tropa-dica .ic { flex: none; margin-top: 1px; color: #bef343; }
.ck-tropa-dica b { color: #fff; }
.ck-tropa-dica.erro { background: rgba(255, 90, 54, 0.12); color: #ffb3a1; box-shadow: none; }
@media (max-width: 480px) { .ck-tropa { flex-direction: column; text-align: center; } }

/* O Nick: o suporte do Concord, fixo nas mensagens diretas. */
.nick-foto { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #6141c5, #2a1a66 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.nick-foto img { display: block; filter: drop-shadow(0 0 6px rgba(190, 243, 67, 0.35)); }
.selo-nick { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--limao); color: #10150a; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; }
.conversa-nick { margin-bottom: 4px; }
.conversa-nick .conversa-nome { display: flex; align-items: center; }
.sp-janela.com-nick { width: min(480px, 100%); }
.sp-janela.com-nick .sp-titulo b { display: flex; align-items: center; font-size: 16px; }
.sp-bolha.nick { max-width: 92%; }
.sp-bolha.nick .sp-texto p { margin: 0 0 6px; }
.sp-bolha.nick .sp-texto p:last-child { margin-bottom: 0; }
.sp-bolha.nick > .nv-item-botao { margin-top: 6px; }
.sp-bolha.novidade { border: 1px solid rgba(190, 243, 67, 0.3); gap: 6px; }
.sp-novidade { padding: 1px 6px; border-radius: 6px; background: rgba(190, 243, 67, 0.16); color: var(--limao-letra); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; }
.sp-novidade-titulo { font: 700 16px var(--fonte-marca); letter-spacing: -0.02em; color: var(--texto); }

/* A janela "O Concord atualizou" e os itens de cada novidade (que também aparecem na conversa com o Nick). */
.modal.nv-janela { width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; gap: 12px; padding: 0 0 20px; }
.nv-janela > :not(.nv-faixa) { margin-inline: 22px; }
.nv-faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -10px; padding: 18px 22px 30px; border-radius: 18px 18px 0 0; background: radial-gradient(90% 140% at 100% 0%, rgba(97, 65, 197, 0.6), transparent 60%), radial-gradient(60% 120% at 0% 0%, rgba(190, 243, 67, 0.14), transparent 60%); }
.nv-chip { padding: 5px 12px; border-radius: 99px; background: var(--limao); color: #10150a; font: 700 12.5px var(--fonte-marca); letter-spacing: -0.01em; }
.nv-faixa time { color: var(--texto-2); font-size: 12.5px; }
.nv-de { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; }
.nv-de b { color: var(--texto); }
.nv-janela h2 { font: 700 clamp(24px, 4vw, 30px)/1.06 var(--fonte-marca); letter-spacing: -0.04em; text-wrap: balance; }
.nv-janela .nv-abertura { color: var(--texto-2); font-size: 14.5px; }
.nv-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nv-item { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); }
.nv-item-icone { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: rgba(97, 65, 197, 0.22); color: #c9b8ff; }
.nv-item:first-child .nv-item-icone { background: var(--limao); color: #10150a; }
.nv-item-texto { min-width: 0; display: grid; gap: 3px; align-content: start; }
.nv-item-texto b { color: var(--texto); font-size: 14.5px; }
.nv-item .nv-item-texto p { margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.nv-item-botao { justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 9px; background: var(--superficie-3); color: var(--texto); font-size: 13px; font-weight: 650; }
.nv-item-botao:hover { background: var(--limao); color: #10150a; }
.nv-janela .nv-fechamento, .nv-janela .nv-mais { color: var(--texto-2); font-size: 13.5px; }
.nv-pe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.nv-itens.compacto .nv-item { padding: 10px; background: var(--superficie-3); border: 0; }
.nv-itens.compacto .nv-item-icone { width: 30px; height: 30px; border-radius: 9px; }
.nv-itens.compacto .nv-item-icone .ic { width: 16px; height: 16px; }
.nv-itens.compacto .nv-item-botao { background: var(--superficie-2); }
html[data-tema="claro"] .nv-item-icone { color: #4c2daa; }

/* O tour do Concord: sete telinhas com um desenho feito das peças do próprio Concord. */
.tour-fundo { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px; background: rgba(3, 3, 6, 0.72); }
.tour-janela { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; display: grid; border-radius: 22px; background: #121117; border: 1px solid var(--linha-forte); box-shadow: var(--sombra); }
html[data-tema="claro"] .tour-janela { background: #fff; }
.tour-pular { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); color: #e8e8ee; font-size: 13px; font-weight: 600; }
.tour-pular:hover { background: rgba(0, 0, 0, 0.55); }
.tour-desenho {
  height: 220px; display: grid; place-items: center; padding: 24px; overflow: hidden; border-radius: 22px 22px 0 0;
  background: radial-gradient(70% 120% at 100% 0%, rgba(97, 65, 197, 0.6), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(190, 243, 67, 0.12), transparent 60%), repeating-linear-gradient(-58deg, transparent 0 90px, rgba(255, 255, 255, 0.035) 90px 91px), #0f0d18;
}
.tour-corpo { display: grid; gap: 8px; padding: 20px 24px 6px; }
.tour-passo { color: var(--limao-letra); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.tour-titulo { margin: 0; font: 700 26px/1.08 var(--fonte-marca); letter-spacing: -0.035em; color: var(--texto); text-wrap: balance; }
.tour-texto { margin: 0; min-height: 4.5em; color: var(--texto-2); font-size: 15px; line-height: 1.5; }
.tour-extra:empty { display: none; }
.tour-acao { padding: 8px 14px; border-radius: 10px; background: var(--limao); color: #10150a; font: 700 14px var(--fonte-marca); }
.tour-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px 22px; }
.tour-pontos { display: flex; gap: 6px; }
.tour-ponto { width: 8px; height: 8px; border-radius: 99px; background: var(--superficie-3); transition: width 0.2s, background 0.2s; }
.tour-ponto.ativo { width: 22px; background: var(--limao); }
.tour-botoes { display: flex; gap: 8px; }
.tr-app { display: flex; gap: 8px; width: 290px; height: 160px; padding: 10px; border-radius: 16px; background: #141418; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-trilho { display: grid; align-content: start; gap: 8px; }
.tr-srv { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #23232b; color: #e8e8ee; font: 700 14px var(--fonte-marca); }
.tr-srv.ativo { background: var(--violeta); box-shadow: 0 0 0 2px #bef343; }
.tr-srv.mais { color: #bef343; border-radius: 50%; }
.tr-canais { flex: 1; display: grid; align-content: start; gap: 4px; padding: 6px; border-radius: 10px; background: #0f0f12; }
.tr-canal { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; color: #9b9ba8; font-size: 12px; }
.tr-canal.voz { color: #bef343; background: rgba(190, 243, 67, 0.08); }
.tr-na-sala { display: flex; gap: 4px; padding-left: 22px; }
.tr-pessoa { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px #0f0f12; }
.tr-pessoa:first-child { box-shadow: 0 0 0 2px #0f0f12, 0 0 0 4px #bef343; }
.tr-controles { display: flex; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #141418; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-botao { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #23232b; color: #e8e8ee; }
.tr-botao.ligado { background: #bef343; color: #10150a; }
.tr-botao.sair { background: #ff5c61; color: #fff; }
.tr-junto { display: grid; gap: 10px; width: 280px; }
.tr-telao { position: relative; height: 104px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #2a1a66, #0f0d18); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-telao small { position: absolute; left: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; color: #bef343; font-size: 11px; font-weight: 700; }
.tr-play { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #14131b; }
.tr-radio { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #141418; color: #e8e8ee; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-radio > span:nth-child(2) { flex: 1; display: grid; }
.tr-radio b { font-size: 12.5px; }
.tr-radio small { color: #9b9ba8; font-size: 11px; }
.tr-radio .ic { color: #bef343; }
.tr-capa { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #ff7a1a, #a35cf0); }
.tr-mesa { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; }
.tr-som { width: 64px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: #141418; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.4); }
.tr-som:nth-child(2) { background: #bef343; }
.tr-squad { width: 280px; display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: #141418; border-top: 3px solid #f5a524; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-squad-topo { display: flex; align-items: center; gap: 10px; color: #f2f2f5; }
.tr-squad-topo b { flex: 1; font-size: 14px; }
.tr-jogo { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(245, 165, 36, 0.2); font-size: 20px; }
.tr-falta { padding: 3px 8px; border-radius: 7px; background: #bef343; color: #10150a; font: 700 11px var(--fonte-marca); }
.tr-squad-pe { display: flex; align-items: center; justify-content: space-between; color: #9b9ba8; font-size: 12px; }
.tr-topo { padding: 6px 14px; border-radius: 9px; background: #bef343; color: #10150a; font: 700 13px var(--fonte-marca); }
.tr-bilhetes { display: flex; gap: 8px; }
.tr-bilhete.usado { background: #2d2d37; color: #b6b6c1; }
.tr-convite { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #141418; color: #e8e8ee; font: 12.5px var(--fonte-mono, ui-monospace), monospace; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.tr-copiar { padding: 4px 10px; border-radius: 8px; background: #bef343; color: #10150a; font: 700 12px var(--fonte-marca); }
.tr-nick { display: flex; align-items: flex-end; gap: 10px; }
.tr-balao { display: grid; gap: 2px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #23232b; color: #f2f2f5; font-size: 13px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.tr-balao b { color: #b9a6ff; font-size: 12px; }
@media (max-width: 480px) { .tour-desenho { height: 180px; } .tr-app { transform: scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .tour-ponto, .eb-barra i { transition: none; } }

.etiqueta-novo.lima { min-width: 20px; text-align: center; background: var(--limao); color: #10150a; }

/* ajustar a foto e a capa antes de subir (corte.js, 16/10): arrastar, zoom e centralizar */
.modal.ct-janela { width: auto; max-width: 100%; justify-items: center; }
.modal.ct-janela h2, .modal.ct-janela p { justify-self: stretch; }
.modal.ct-janela p { max-width: 400px; }
.ct-palco {
  position: relative; overflow: hidden; border-radius: 12px; background: #0b0b10;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
}
.ct-palco.arrastando { cursor: grabbing; }
.ct-palco:focus-visible { box-shadow: 0 0 0 2px var(--limao); }
.ct-imagem {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  pointer-events: none; -webkit-user-drag: none;
}
/* O que fica de fora do recorte escurece; na foto, o recorte é o círculo do avatar. */
.ct-mascara { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); }
.ct-palco.redondo .ct-mascara { border-radius: 50%; box-shadow: 0 0 0 999px rgba(5, 5, 9, 0.62), inset 0 0 0 2px rgba(255, 255, 255, 0.75); }
.ct-controles { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 400px; color: var(--texto-3); }
.ct-controles .ic { flex: none; width: 18px; height: 18px; }
.ct-zoom { flex: 1; min-width: 0; accent-color: var(--limao); }
.modal.ct-janela .modal-pe { justify-self: stretch; }

/* O aviso do dono na conversa do Nick (17/10): só o texto, com as quebras de linha dele. */
.sp-bolha.aviso-do-dono .sp-texto { white-space: pre-line; }
.sp-bolha.novidade > p.sp-texto { margin: 0; }
.cx-pedido > p.cx-pedido-texto { margin: 0; }


/* ---------- Cara de Discord (20/10) ----------
   Ele, com os prints do vsync (um Discord com tudo liberado): "quero que busque
   melhorias no concord para ficar com mais cara de discord (...) vamo deixar com
   cara de discord real mesmo". O tema padrão (Escuro) passa a ser o do Discord
   de 2025: cinzas em camadas (a barra de servidores mais escura, a lista de
   canais no meio, a conversa um tom acima), sem o brilho violeta no canto,
   título na mesma letra do texto. A marca fica nos botões: lima é ação e
   "ligado", violeta é o que passa o mouse na barra e nos menus. O preto
   violeta de antes continua como o tema "Meia-noite". */
html[data-tema="escuro"][data-degrade="nenhum"] {
  --fundo-0: #121214;
  --fundo-1: #18181b;
  --fundo-2: #1a1a1e;
}
html[data-tema="escuro"] {
  --superficie: #242429;
  --superficie-2: #2c2c31;
  --superficie-3: #38383e;
  --linha: rgba(255, 255, 255, 0.06);
  --linha-forte: rgba(255, 255, 255, 0.1);
  --texto: #f2f3f5;
  --texto-2: #b5bac1;
  --texto-3: #949ba4;
  --violeta-passando: rgba(255, 255, 255, 0.045);
  --violeta-escolhido: rgba(255, 255, 255, 0.085);
  --violeta-botao: #2c2c31;
  --violeta-botao-2: #36363c;
  --violeta-borda: transparent;
  --violeta-chip: #242429;
  --fonte-titulo: var(--fonte);
}
html[data-tema="escuro"] :is(.modal h2, .comeco h2, .boas-vindas h1, .ajustes-corpo h2, .adicionar-amigo h2, .novo-servidor h2, .cartao-nome, .lateral-topo, .vazio h3, .ligacao h2, .cabecalho-titulo, .config-cabecalho h2, .painel-titulo) {
  font-weight: 750; letter-spacing: -0.01em;
}
/* O texto da conversa no cinza claro do Discord, e a mensagem do mouse um tom acima. */
html[data-tema="escuro"] .mensagem-texto { color: #dbdee1; }
html[data-tema="escuro"] .mensagem:hover { background: rgba(255, 255, 255, 0.025); }
html[data-tema="escuro"] .palco { background: #000; }
/* Canal aberto: cinza, não violeta (a sala em que você está continua lima). */
html[data-tema="escuro"] .canal.aberto .ic { color: var(--texto); }
html[data-tema="escuro"] .canal { color: var(--texto-3); }
html[data-tema="escuro"] .canal:hover, html[data-tema="escuro"] .canal.aberto { color: var(--texto); }
/* Janelas, menus e a caixa de escrever: superfícies lisas com borda fina. */
html[data-tema="escuro"] .modal { background: #1d1d22; box-shadow: 0 0 0 1px var(--linha-forte), 0 20px 60px rgba(0, 0, 0, 0.6); }
html[data-tema="escuro"] .menu { background: #232328; box-shadow: 0 0 0 1px var(--linha-forte), 0 12px 32px rgba(0, 0, 0, 0.5); }
html[data-tema="escuro"] .caixa-texto { background: #222327; border-color: var(--linha); }
html[data-tema="escuro"] .pilula.escura { box-shadow: none; }
html[data-tema="escuro"] .modelo { background: #242429; border-color: var(--linha); }
html[data-tema="escuro"] .modelo:hover { background: #2c2c31; border-color: var(--linha-forte); }
/* O painel de quem você é: um cartão flutuando no pé da lista, como no Discord novo. */
html[data-tema="escuro"] .painel-eu { margin: 0 8px 8px; border-radius: 10px; background: #232328; box-shadow: 0 0 0 1px var(--linha); }
html[data-tema="escuro"] .trilho-inicio { background: var(--superficie); }

/* O "Crie um servidor" (20/10), no jeito do Discord: título no meio, "Criar
   o meu" em cima, os modelos embaixo do título pequeno, e o "Já tem um
   convite?" num rodapé de outra cor, colado no pé da janela. */
.novo-servidor.com-pe { padding-bottom: 0; overflow: hidden; }
.novo-servidor-topo { display: grid; gap: 6px; text-align: center; }
.novo-servidor-topo p { margin: 0; color: var(--texto-2); font-size: 15px; line-height: 1.4; }
.novo-servidor .modelos { max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.novo-servidor .modelo { min-height: 58px; padding: 0 14px 0 12px; border-radius: 10px; }
.modelo-icone { width: 34px; height: 34px; display: grid; place-items: center; font-size: 24px; flex: none; }
.modelo-icone.criar { border-radius: 50%; background: var(--violeta-vivo); color: #fff; width: 30px; height: 30px; margin: 0 2px; }
.modelo-icone.criar .ic { width: 18px; height: 18px; }
.modelo-nome { flex: 1; min-width: 0; font-size: 16px; font-weight: 650; }
.modelos-titulo { margin: 8px 0 0; text-align: center; color: var(--texto-3); font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.novo-servidor-pe { margin: 4px -24px 0; padding: 18px 24px 22px; display: grid; gap: 10px; justify-items: center; background: var(--fundo-1); border-top: 1px solid var(--linha); }
.novo-servidor-pe h3 { margin: 0; font-size: 20px; font-weight: 750; }
.novo-servidor-pe .pilula { width: 100%; justify-content: center; border-radius: 8px; }

/* A lista de canais no jeito do Discord (20/10): a categoria dobra ("Canais
   de texto ⌄", sem caixa alta), o convidar aparece no canal com o mouse em
   cima, o convidar do lado do nome do servidor, e o cartão "Andamento da
   configuração" do dono de servidor novo. */
.lateral { position: relative; }
.categoria { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; padding: 16px 6px 4px 4px; }
.categoria-titulo { display: inline-flex; align-items: center; gap: 2px; color: var(--texto-3); font: inherit; min-width: 0; }
.categoria-titulo:hover { color: var(--texto); }
.categoria-seta { width: 14px; height: 14px; transition: transform 0.15s; }
.categoria.dobrada .categoria-seta { transform: rotate(-90deg); }
.convidar-canal {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: var(--texto-3); opacity: 0;
}
.canal-linha.com-engrenagem .convidar-canal { right: 58px; }
.canal-linha.com-convite .canal { padding-right: 58px; }
.canal-linha.com-convite.com-engrenagem .canal { padding-right: 84px; }
.canal-linha:hover .convidar-canal, .convidar-canal:focus-visible { opacity: 1; }
.convidar-canal:hover { background: var(--superficie-2); color: var(--texto); }
#topo-comunidade { justify-content: flex-start; gap: 6px; padding-right: 52px; }
#topo-comunidade #nome-comunidade { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-convidar { position: absolute; top: 12px; right: 10px; width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--texto-2); z-index: 2; }
.topo-convidar:hover { background: var(--superficie); color: var(--texto); }
.app.no-inicio .topo-convidar { display: none; }

.andamento { position: relative; margin: 0 0 6px; border-radius: 10px; background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linha); }
.andamento-corpo { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 30px 10px 10px; text-align: left; border-radius: 10px; }
.andamento-corpo:hover { background: var(--superficie-2); }
.andamento-roda {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--limao) var(--andamento, 0deg), var(--superficie-3) 0);
  -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px); mask: radial-gradient(circle, transparent 10px, #000 11px);
}
.andamento-textos { display: grid; min-width: 0; }
.andamento-textos b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.andamento-textos small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.andamento-fechar { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; color: var(--texto-3); }
.andamento-fechar:hover { color: var(--texto); background: var(--superficie-3); }

/* O "Bem-vindo(a) a …" do servidor novo, no começo do primeiro canal. */
.boas-vindas-servidor { display: grid; justify-items: center; gap: 10px; padding: 48px 16px 28px; text-align: center; }
.boas-vindas-servidor h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.boas-vindas-servidor > p { margin: 0 0 8px; max-width: 46ch; color: var(--texto-2); font-size: 14px; }
.passos { width: min(440px, 100%); display: grid; gap: 8px; }
.passo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 10px; background: var(--superficie); text-align: left; font-weight: 600; font-size: 14.5px; }
.passo:hover { background: var(--superficie-2); }
.passo-icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fundo-1); color: var(--texto-2); flex: none; }
.passo-icone .ic { width: 18px; height: 18px; }
.passo-texto { flex: 1; min-width: 0; }
.passo-seta { transform: rotate(-90deg); color: var(--texto-3); }
.passo.feito { opacity: 0.6; }
.passo.feito .passo-icone { background: var(--limao); color: var(--limao-texto); }
.passo.feito .passo-texto { text-decoration: line-through; text-decoration-color: var(--texto-3); }

/* A busca no alto do chat, numa caixinha (20/10, como no Discord), e a coroa do dono. */
.busca-topo {
  width: 168px; height: 28px; margin: 0 2px 0 6px; padding: 0 8px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px; background: var(--fundo-0); color: var(--texto-3); font-size: 13px; font-weight: 500;
  transition: width 0.18s;
}
.busca-topo:hover { color: var(--texto-2); }
.busca-topo:focus-visible { width: 220px; }
.busca-topo-texto { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .busca-topo { width: 32px; height: 32px; padding: 0; justify-content: center; background: transparent; }
  .busca-topo-texto { display: none; }
}
.membro-coroa { margin-left: 4px; font-size: 13px; line-height: 1; flex: none; }

/* Os amigos no jeito do Discord (20/10): "Adicionar amigo" verde, as abas
   cinzas e o símbolo do Concord grande no vazio (o mascote). */
.aba.adicionar, .aba.adicionar:hover { background: #248046; color: #fff; filter: none; border-radius: 6px; }
.aba.adicionar:hover { background: #1a6334; }
.aba.adicionar.ativa { background: transparent; color: #2dc770; }
.aba { border-radius: 6px; font-weight: 600; }
html[data-tema="escuro"] .aba.ativa { background: var(--superficie-2); color: var(--texto); }
.amigos-vazio-arte.simbolo {
  width: 120px; height: 120px; margin: 0 auto 6px; background: var(--violeta-vivo);
  -webkit-mask: url('/marca/concord-simbolo.svg') center / contain no-repeat; mask: url('/marca/concord-simbolo.svg') center / contain no-repeat;
}

/* O "Personalize o seu tema" (20/10): as cores, a intensidade e a faixa de prévia. */
.editor-tema { display: grid; gap: 12px; max-width: 420px; }
.tema-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tema-amostra { width: 44px; height: 40px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linha-forte); flex: none; }
.tema-seletor { width: 64px; height: 56px; margin: -8px; border: 0; padding: 0; background: none; cursor: pointer; }
.tema-hex-caixa { flex: 1; min-width: 140px; height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; background: var(--fundo-0); box-shadow: inset 0 0 0 1px var(--linha-forte); color: var(--texto-3); font-family: var(--fonte-mono, ui-monospace), monospace; }
.tema-hex { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--texto); font: inherit; text-transform: uppercase; }
.tema-cores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tema-cor { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.tema-cor.escolhida { box-shadow: 0 0 0 2px var(--fundo-2), 0 0 0 4px var(--texto); }
.tema-mais { height: 32px; padding: 0 12px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--linha-forte); border: 1px dashed transparent; }
.tema-mais:hover { color: var(--texto); background: var(--superficie); }
.tema-controle { justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; }
.tema-valor { font-weight: 600; text-transform: none; color: var(--texto-3); }
.tema-intensidade { width: 100%; accent-color: var(--violeta-vivo); }
.tema-previa { height: 10px; border-radius: 99px; }

/* ---------- As configurações no jeito do Discord novo (20/10) ----------
   Ele: "deixar mais bonito e sem cara de vibe coding", com os prints do vsync.
   Uma janela grande no meio, o fundo escurecido atrás; o menu do lado com
   quem você é e a busca; a página com uma barra no alto (o nome dela e o X);
   as partes da página separadas por uma linha fina, sem caixa em volta;
   botões retos (o principal violeta, o outro cinza) e o interruptor verde. */
.config {
  display: grid; place-items: center; grid-template-columns: none;
  background: rgba(0, 0, 0, 0.72); padding: 4vh 4vw;
  animation: config-fundo 0.14s ease-out;
}
@keyframes config-fundo { from { opacity: 0; } to { opacity: 1; } }
.config-janela {
  width: min(1180px, 100%); height: min(860px, 100%);
  display: grid; grid-template-columns: 252px minmax(0, 1fr);
  border-radius: 12px; overflow: hidden; background: var(--fundo-2);
  box-shadow: 0 0 0 1px var(--linha-forte), 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: config-entra 0.18s ease-out;
}
.config-lado { justify-content: stretch; border-right: 1px solid var(--linha); background: var(--fundo-1); }
.config-lado-dentro { width: 100%; padding: 14px 10px 18px; gap: 10px; }
.config-eu { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; text-align: left; min-width: 0; }
.config-eu:hover { background: var(--superficie); }
.config-eu-textos { display: grid; min-width: 0; }
.config-eu-textos b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.config-eu-textos small { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-3); font-size: 12.5px; }
.config-eu-textos small .ic { width: 12px; height: 12px; }
.config-busca-caixa { position: relative; display: flex; align-items: center; }
.config-busca-caixa .ic { position: absolute; left: 10px; color: var(--texto-3); pointer-events: none; }
.config .config-busca { width: 100%; height: 34px; padding: 0 10px 0 30px; border-radius: 8px; background: var(--fundo-0); border: 1px solid var(--linha); font-size: 14px; }
.config-menu { gap: 1px; }
.config-grupo { padding: 14px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.config-grupo:first-child { padding-top: 4px; }
.config-menu hr { margin: 8px 6px 0; }
.config-item { min-height: 36px; border-radius: 6px; font-size: 15px; font-weight: 500; }
.config-item[aria-current="page"] { background: var(--violeta-escolhido); color: var(--texto); }
.config-item[aria-current="page"] .ic { color: var(--texto); }
.config-rodape { padding: 0 8px; font-size: 11.5px; }
.config-coluna { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.config-barra { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px 0 22px; border-bottom: 1px solid var(--linha); }
.config-barra-titulo { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.config-voltar { display: none; }
.config-fechar.botao-icone { display: grid; width: 32px; height: 32px; border-radius: 6px; color: var(--texto-2); }
.config-fechar.botao-icone .ic { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 0; }
.config-fechar.botao-icone:hover { background: var(--superficie); color: var(--texto); }
.config-conteudo { position: relative; inset: auto; padding: 32px 40px 120px; }
.config-pagina { max-width: 680px; margin: 0 auto; gap: 0; }
.config-cabecalho { padding-bottom: 20px; }
.config-cabecalho h2 { font-family: var(--fonte); font-size: 24px; font-weight: 750; letter-spacing: -0.01em; }
.config-cabecalho p { font-size: 14px; color: var(--texto-2); }
/* As partes da página: sem caixa, uma linha fina entre elas. */
.cartao-config { background: none; border: 0; border-top: 1px solid var(--linha); border-radius: 0; padding: 24px 0; gap: 16px; }
.config-cabecalho + .cartao-config { border-top: 0; padding-top: 4px; }
.cartao-config-topo h3 { font-size: 16px; font-weight: 700; }
.cartao-config-topo p { font-size: 14px; color: var(--texto-2); line-height: 1.4; }
.campo-config-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto-2); }
.config :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]), select, textarea) {
  background: var(--fundo-0); border: 1px solid var(--linha); border-radius: 8px;
}
.config :is(input, select, textarea):focus { border-color: var(--violeta-vivo); box-shadow: 0 0 0 1px var(--violeta-vivo); }
.config input[type="range"] { accent-color: var(--violeta-vivo); }
/* Botões: retos, como no Discord. O principal é violeta, o de segunda opção cinza. */
.config .pilula { border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.config .pilula.pequena { padding: 7px 12px; font-size: 13.5px; }
.config .pilula:not(.escura):not(.perigo):not(.limao) { background: var(--violeta-vivo); color: #fff; }
.config .pilula:not(.escura):not(.perigo):not(.limao):hover:not(:disabled) { background: #5235b3; }
.config .pilula.limao { background: var(--violeta-vivo); color: #fff; }
.config .pilula.limao:hover:not(:disabled) { background: #5235b3; }
.config .pilula.escura { background: var(--superficie-2); color: var(--texto); box-shadow: none; }
.config .pilula.escura:hover:not(:disabled) { background: var(--superficie-3); }
.config .pilula:active:not(:disabled) { transform: none; }
/* O interruptor verde do Discord. */
.interruptor { width: 40px; height: 24px; background: #72767d; }
.interruptor::after { top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.interruptor[aria-checked="true"] { background: #23a55a; }
.interruptor[aria-checked="true"]::after { background: #fff; }
.segmentado { border-radius: 8px; background: var(--fundo-0); border-color: var(--linha); }
.segmentado button { border-radius: 6px; }
/* A barra de salvar, como a do Discord: escura, com o botão verde. */
.barra-salvar { left: 50%; right: auto; transform: translateX(-50%); width: min(680px, calc(100% - 48px)); bottom: 20px; border-radius: 10px; background: #111214; }
.barra-salvar.treme { transform: translateX(-50%); }
.botao-salvar { padding: 8px 16px; border-radius: 6px; background: #248046; color: #fff; font-weight: 600; font-size: 14px; }
.botao-salvar:hover:not(:disabled) { background: #1a6334; }
@media (max-width: 700px) {
  .config { padding: 0; place-items: stretch; }
  .config-janela { width: 100%; height: 100%; border-radius: 0; grid-template-columns: 1fr; box-shadow: none; }
  .config-voltar { display: grid; }
  .config-coluna { display: none; }
  .config.mostrando .config-coluna { display: grid; }
  .config-conteudo { padding: 20px 16px 120px; }
  .config-barra { padding: 0 8px; }
}

/* Voz e vídeo (20/10), no jeito do Discord: o teste com a barra (e a linha da
   sensibilidade por cima), o volume com o número do lado e o perfil de
   entrada em linhas com a bolinha de escolher. */
.teste-voz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.teste-voz .pilula { flex: none; }
.medidor-voz-caixa { flex: 1; min-width: 200px; position: relative; display: grid; align-items: center; height: 28px; }
.medidor-voz { position: relative; height: 10px; border-radius: 99px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--superficie-3) 0 3px, transparent 3px 6px); }
.medidor-voz-nivel { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(90deg, #23a55a 0 3px, transparent 3px 6px); transition: width 0.06s linear; }
.medidor-voz-marca { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; }
.config input[type="range"].sensibilidade-barra { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; opacity: 0; cursor: ew-resize; }
.barra-com-valor { display: flex; align-items: center; gap: 12px; }
.barra-com-valor input { flex: 1; min-width: 0; }
.valor-barra { min-width: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.texto-ajuda { color: var(--texto-3); font-size: 12.5px; line-height: 1.45; }
.perfis-entrada { display: grid; gap: 8px; }
.perfil-entrada { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; background: var(--superficie); text-align: left; box-shadow: inset 0 0 0 1px transparent; }
.perfil-entrada:hover { background: var(--superficie-2); }
.perfil-entrada[aria-checked="true"] { background: var(--violeta-escolhido); box-shadow: inset 0 0 0 1px var(--violeta-vivo); }
.perfil-entrada-textos { flex: 1; min-width: 0; display: grid; gap: 2px; }
.perfil-entrada-textos b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; }
.perfil-entrada-textos small { color: var(--texto-2); font-size: 13px; line-height: 1.4; }
.radio-bolinha { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--texto-3); }
.perfil-entrada[aria-checked="true"] .radio-bolinha { box-shadow: inset 0 0 0 5px var(--violeta-vivo); background: #fff; }
.selo-recomendado { padding: 1px 7px; border-radius: 4px; background: #248046; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

/* O perfil mais limpo (20/10): o escolhido é violeta (lima é ação, não escolha),
   o status em duas colunas sem cortar o nome, o contador do "Sobre mim" em
   cinza (era o vermelho de mensagem nova) e o rótulo "Prévia" em cima do cartão. */
.config :is(.decoracao, .opcao-aparencia)[aria-checked="true"] { border-color: var(--violeta-vivo); box-shadow: inset 0 0 0 1px var(--violeta-vivo); background: var(--violeta-escolhido); }
.config .decoracao, .config .opcao-aparencia { border-radius: 8px; }
.config .escolha-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config .escolha-status button { border-radius: 8px; border-color: var(--linha); background: var(--superficie); }
.config .escolha-status button:hover { background: var(--superficie-2); }
.config .escolha-status button[aria-checked="true"] { border-color: var(--violeta-vivo); background: var(--violeta-escolhido); color: var(--texto); }
.config .campo-titulo .contador { min-width: 0; height: auto; padding: 0; margin-left: auto; background: none; color: var(--texto-3); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.config .campo-titulo { display: flex; align-items: center; gap: 8px; }
.config .editor-lado { display: grid; gap: 8px; }
.config .editor-lado::before { content: 'Prévia'; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto-2); }

/* O painel de transmitir a tela (26/10): qualidade, som e "Escolher a tela". */
.tt-painel {
  position: fixed; width: min(380px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto;
  display: grid; gap: 10px; padding: 14px;
  background: #17151f; border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra);
  color: var(--texto-2); font-size: 13px;
}
.tt-topo { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 15px; }
.tt-topo .ic { color: var(--limao-letra); }
.tt-rotulo { margin: 2px 0 -4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.tt-qualidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.tt-qualidade { display: grid; gap: 2px; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie); text-align: left; color: var(--texto-2); font: inherit; cursor: pointer; }
.tt-qualidade b { display: flex; align-items: center; gap: 4px; color: var(--texto); font-size: 13px; }
.tt-qualidade small { font-size: 11px; color: var(--texto-3); line-height: 1.3; }
.tt-qualidade:hover:not(:disabled) { border-color: var(--linha-forte); }
.tt-qualidade.escolhida { border-color: var(--limao); background: rgba(190, 243, 67, 0.08); }
.tt-qualidade:disabled { opacity: 0.55; cursor: not-allowed; }
.tt-som { display: grid; gap: 8px; padding: 10px 11px; border-radius: 10px; background: var(--superficie); }
.tt-som-linha { display: flex; align-items: center; gap: 10px; }
.tt-som-linha > .ic { color: var(--texto-2); flex: none; }
.tt-som-textos { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tt-som-textos b { color: var(--texto); font-size: 14px; }
.tt-som-textos small { color: var(--texto-3); font-size: 12px; }
.tt-chave { flex: none; position: relative; width: 42px; height: 24px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, 0.16); cursor: pointer; transition: background 0.15s; }
.tt-chave i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.tt-chave.ligada { background: var(--limao); }
.tt-chave.ligada i { transform: translateX(18px); background: #10150a; }
.tt-dica { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-2); }
.tt-dica.alerta, .tt-permissao .alerta { color: #ffb59a; }
.tt-permissao { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--linha); }
.tt-permissao small { font-size: 12px; line-height: 1.4; color: var(--texto-3); }
.tt-permissao .ok { color: var(--limao-letra); }
.tt-pedir { justify-self: start; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linha-forte); background: transparent; color: var(--texto); font: 600 12.5px var(--fonte); cursor: pointer; }
.tt-pedir:hover { background: var(--superficie-2); }
.tt-medidor { display: grid; gap: 4px; }
.tt-medidor-barra { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tt-medidor-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--limao) 0 70%, #ffd34d 85%, #ff7a57); transition: width 0.08s linear; }
.tt-medidor-texto { font-size: 11.5px; color: var(--texto-3); }
.tt-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--limao); color: #10150a; font: 700 14px var(--fonte-marca); cursor: pointer; }
.tt-botao:hover { filter: brightness(1.06); }
.tt-botao.parar { background: var(--vermelho); color: #fff; }
html[data-tema="claro"] .tt-painel { background: #fff; }
html[data-tema="claro"] .tt-chave { background: rgba(0, 0, 0, 0.16); }
@media (prefers-reduced-motion: reduce) { .tt-chave, .tt-chave i, .tt-medidor-barra i { transition: none; } }