:root{
  --roxo:#6D28D9; --roxo-claro:#8B5CF6; --roxo-fraco:#F3EEFF;
  --texto:#1B1633; --texto-fraco:#6B6785; --linha:#E7E3F3;
  --fundo:#F7F5FC; --branco:#fff;
  --verde:#0E9F6E; --vermelho:#D93636; --ambar:#B45309;
  --sombra:0 1px 2px rgba(27,22,51,.06), 0 8px 24px rgba(27,22,51,.06);
  --raio:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer; border:0; border-radius:10px; padding:9px 14px; background:var(--roxo); color:#fff; font-weight:600}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button.secundario{background:var(--branco); color:var(--texto); border:1px solid var(--linha)}
button.perigo{background:var(--vermelho)}
button.fantasma,a.fantasma{background:transparent; color:var(--texto-fraco); padding:6px 10px; font-size:14px; font-weight:600; border-radius:10px; text-decoration:none; display:inline-block}
button.fantasma:hover,a.fantasma:hover{background:var(--roxo-fraco); color:var(--roxo)}
button:disabled{opacity:.5; cursor:not-allowed}
input,select,textarea{font:inherit; color:var(--texto); border:1px solid var(--linha); border-radius:10px; padding:9px 12px; background:var(--branco); outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--roxo-claro); box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.oculto{display:none !important}

/* ---------- login ---------- */
.tela-login{min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 20% -10%, #EDE4FF 0%, var(--fundo) 60%)}
.card-login{background:var(--branco); padding:32px; border-radius:20px; box-shadow:var(--sombra); width:min(400px,100%); display:flex; flex-direction:column; gap:14px}
.card-login .marca{color:var(--roxo); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
.card-login h1{margin:0; font-size:24px}
.card-login .sub{margin:0 0 6px; color:var(--texto-fraco); font-size:14px}
.card-login label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--texto-fraco)}
.card-login button{margin-top:6px; padding:12px}
.erro{color:var(--vermelho); font-size:13px; min-height:18px}

/* ---------- topo ---------- */
.topo{display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--branco); border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:20}
.menu-btn{display:none; background:transparent; color:var(--texto); font-size:20px; padding:4px 8px}
.titulo{display:flex; align-items:center; gap:10px; white-space:nowrap}
.tag-marca{background:var(--roxo-fraco); color:var(--roxo); font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em}
.metricas{display:flex; gap:18px; margin-left:auto; font-size:13px; color:var(--texto-fraco)}
.metricas b{display:block; font-size:18px; color:var(--texto); line-height:1.2}
.metricas .destaque b{color:var(--roxo)}
.acoes-topo{display:flex; align-items:center; gap:10px}
.sync-info{font-size:12px; color:var(--texto-fraco)}
.usuario{font-size:13px; color:var(--texto-fraco); display:flex; align-items:center; gap:8px}

/* ---------- layout ---------- */
.corpo{display:grid; grid-template-columns:320px 1fr; height:calc(100dvh - 61px)}
.lateral{border-right:1px solid var(--linha); background:var(--branco); overflow-y:auto}
.lateral-topo{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-fraco); position:sticky; top:0; background:var(--branco); z-index:2}
.mini{font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:5px; cursor:pointer}
.lista-ads{padding:0 10px 20px; display:flex; flex-direction:column; gap:6px}
.item-ad{display:flex; gap:10px; padding:9px; border-radius:12px; cursor:pointer; align-items:center; border:1px solid transparent; text-align:left; background:transparent; color:inherit; font-weight:400}
.item-ad:hover{background:var(--roxo-fraco)}
.item-ad.ativo{background:var(--roxo-fraco); border-color:#DCCFFB}
.item-ad img,.item-ad .semfoto{width:54px; height:54px; border-radius:9px; object-fit:cover; flex:0 0 54px; background:#EDE9F8}
.semfoto{display:grid; place-items:center; color:var(--texto-fraco); font-size:11px}
.item-ad .info{min-width:0; flex:1}
.item-ad .nome{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item-ad .meta{font-size:11px; color:var(--texto-fraco); display:flex; gap:8px; margin-top:3px; align-items:center}
.bolha{background:var(--roxo); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700}
.bolha.zero{background:#EDE9F8; color:var(--texto-fraco)}
.pausado{font-size:10px; color:var(--ambar); font-weight:700}

/* ---------- painel ---------- */
.painel{overflow-y:auto; padding:18px 22px 60px}
.barra-filtros{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:14px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{background:var(--branco); color:var(--texto-fraco); border:1px solid var(--linha); font-size:13px; padding:7px 13px; font-weight:600}
.chip.ativo{background:var(--roxo); color:#fff; border-color:var(--roxo)}
.filtros-dir{display:flex; gap:8px}
.filtros-dir input{min-width:230px}
.contexto{display:flex; gap:14px; align-items:center; background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:12px 14px; margin-bottom:14px; box-shadow:var(--sombra)}
.contexto img{width:64px; height:64px; border-radius:10px; object-fit:cover}
.contexto .c-nome{font-weight:700}
.contexto .c-meta{font-size:12px; color:var(--texto-fraco); margin-top:2px}
.contexto a{color:var(--roxo); font-size:12px; font-weight:600; text-decoration:none}

.lista-comentarios{display:flex; flex-direction:column; gap:12px}
.comentario{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:14px 16px; box-shadow:var(--sombra); position:relative}
.comentario.destacado{border-color:#F3C6C6; background:#FFFBFB}
/* resposta dentro da thread de alguém: recuada e com um trilho na lateral */
.comentario.aninhado{margin-left:34px; border-left:3px solid #DCCFFB; border-radius:10px}
.comentario.aninhado::before{content:"↳"; position:absolute; margin-left:-26px; margin-top:4px; color:var(--texto-fraco); font-size:15px}
.comentario.alheio{background:#FDFCF7; border-color:#EFE3C4}
.selo.hierarquia{background:#E9E7F2; color:#4B4763}
.aviso-alheio{margin-top:10px; font-size:12.5px; color:#8A6412; background:#FEF6E0; border-radius:9px; padding:8px 11px}
.aviso-alheio b{color:#6B4C08}
.c-topo{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--roxo-claro),var(--roxo)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; flex:0 0 32px}
.c-user{font-weight:700; font-size:14px}
.c-quando{font-size:12px; color:var(--texto-fraco)}
.selo{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px; background:#EDE9F8; color:var(--roxo)}
.selo.suporte{background:#FEF0E7; color:#B45309}
.selo.ataque{background:#FDE8E8; color:var(--vermelho)}
.selo.compra{background:#E6F6EF; color:var(--verde)}
.selo.duvida{background:#E8F0FE; color:#1D4ED8}
.selo.elogio{background:#F3EEFF; color:var(--roxo)}
.selo.plataforma{background:#F1F0F6; color:var(--texto-fraco)}
.selo.oculto-selo{background:#FEF3C7; color:#92400E}
.c-pai{margin-top:9px; font-size:12px; color:var(--texto-fraco); background:#F8F7FC; border-radius:8px; padding:6px 10px}
.c-texto{margin:10px 0 0; white-space:pre-wrap; word-break:break-word}
.c-ad{font-size:11px; color:var(--texto-fraco); margin-top:8px}
.thread{margin:12px 0 0; padding-left:14px; border-left:2px solid var(--linha); display:flex; flex-direction:column; gap:8px}
.thread .r{font-size:13px}
.thread .r .quem{font-weight:700; color:var(--roxo)}
.thread .r .quem.terceiro{color:var(--texto)}
.thread .r .assinatura{color:var(--texto-fraco); font-size:11px; margin-left:6px}
.c-acoes{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center}
.c-acoes .espaco{flex:1}
.responder-area{margin-top:12px; display:none; flex-direction:column; gap:8px}
.responder-area.aberta{display:flex}
.responder-area textarea{min-height:76px; resize:vertical}
.sugestao{font-size:12px}
.sugestao .carregando{color:var(--texto-fraco)}
.sug-topo{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.sug-selo{background:var(--roxo-fraco); color:var(--roxo); font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:999px}
.sug-selo.revisar{background:#FEF3C7; color:#92400E}
.sug-selo.voz{background:#E8F0FE; color:#1D4ED8}
.sug-alerta{color:#92400E; font-weight:600}
.sug-motivo{color:var(--texto-fraco); line-height:1.45}
.assinatura-aviso{font-size:12px; color:var(--texto-fraco); background:#F6F4FC; border-radius:9px; padding:7px 11px}
.assinatura-aviso.alerta{background:#FEF6E7; color:#92400E}
.assinatura-aviso b{color:inherit}
.macros{display:flex; gap:6px; flex-wrap:wrap}
.macro{background:var(--roxo-fraco); color:var(--roxo); border:0; font-size:12px; padding:5px 10px; font-weight:600}
.linha-envio{display:flex; gap:8px; align-items:center}
.vazio{text-align:center; color:var(--texto-fraco); padding:60px 20px}
.vazio .emoji{font-size:34px; display:block; margin-bottom:8px}

/* ---------- toast e modal ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#1B1633; color:#fff; padding:11px 18px; border-radius:12px; font-size:14px; z-index:60; box-shadow:0 8px 30px rgba(0,0,0,.2)}
.toast.erro-toast{background:var(--vermelho)}
.modal{position:fixed; inset:0; background:rgba(27,22,51,.45); display:grid; place-items:center; z-index:70; padding:20px}
.modal-caixa{background:var(--branco); border-radius:16px; padding:24px; width:min(420px,100%)}
.modal-caixa h3{margin:0 0 8px}
.modal-caixa p{margin:0 0 18px; color:var(--texto-fraco); white-space:pre-wrap}
.modal-acoes{display:flex; gap:10px; justify-content:flex-end}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .corpo{grid-template-columns:1fr}
  .lateral{position:fixed; top:61px; bottom:0; left:0; width:290px; z-index:30; transform:translateX(-102%); transition:transform .22s ease; box-shadow:0 10px 40px rgba(27,22,51,.18)}
  .lateral.aberta{transform:none}
  .menu-btn{display:block}
  .metricas{gap:12px; font-size:11px}
  .metricas b{font-size:15px}
  .metricas .esconde-mobile{display:none}
  .painel{padding:14px}
  .filtros-dir{width:100%}
  .filtros-dir input{flex:1; min-width:0}
  .sync-info{display:none}
}


/* ---------- abas e depoimentos ---------- */
.abas{display:flex;gap:6px;margin-right:auto}
.aba{background:transparent;color:var(--texto-fraco);border:1px solid transparent;
  font-size:14px;font-weight:700;padding:7px 14px}
.aba.ativo{background:var(--roxo-fraco);color:var(--roxo)}
.grade-depo{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.depo{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.depo .shot{width:100%;display:block;background:#000;cursor:zoom-in}
.depo .pe{display:flex;gap:8px;align-items:center;padding:10px 12px;flex-wrap:wrap}
.depo .quem{font-weight:700;font-size:13px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.selo.forte{background:#E6F6EF;color:var(--verde)}
.selo.bom{background:#F3EEFF;color:var(--roxo)}
.selo.uso{background:#F1F0F6;color:var(--texto-fraco)}
.depo a.btn{font-size:12px;font-weight:700;color:var(--roxo);text-decoration:none;
  background:var(--roxo-fraco);padding:5px 10px;border-radius:8px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;
  z-index:80;padding:24px;cursor:zoom-out}
.lightbox img{max-width:min(1000px,94vw);max-height:88vh;border-radius:10px}