/* ==========================================================================
   Painel da Afilya.

   Tema claro por padrao, escuro por escolha. Toda cor passa por variavel: o
   modo escuro redefine os tokens e nada mais precisa saber que ele existe.
   A escolha fica no navegador da pessoa; sem escolha, segue o sistema.
   ========================================================================== */

:root{
  --marca:#14356E; --marca2:#1B4489; --marca-suave:#EAEEF7; --marca-linha:#C7D3E9;
  --dado:#3A66B8;
  --tx:#0F1424; --tx2:#3E4759; --mu:#5B6478; --fa:#8992A4;
  --bg:#F6F7FA; --sup:#FFFFFF; --sup2:#FAFBFC; --linha:#E3E6ED; --linha2:#D3D8E2;
  --ok:#067647; --ok-bg:#ECFDF3; --al:#B54708; --al-bg:#FFFAEB;
  --pe:#B42318; --pe-bg:#FEF3F2;
  --lateral:#FFFFFF; --lateral-tx:#3E4759; --lateral-on:#14356E; --lateral-on-bg:#EAEEF7;
  --sombra:0 1px 2px rgba(16,24,40,.05);
  --sombra2:0 4px 16px -6px rgba(16,24,40,.16);
  --r:10px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tile:#F4F6F9; --tile-a:#EAF0FB;
}
:root[data-tema="escuro"]{
  --marca:#7FA8F0; --marca2:#9CBCF5; --marca-suave:#1B2740; --marca-linha:#2C3B5A;
  --dado:#7FA8F0;
  --tx:#E8ECF4; --tx2:#B6BECD; --mu:#8C96A8; --fa:#6B7488;
  --bg:#0E1219; --sup:#161B24; --sup2:#1A2029; --linha:#252C38; --linha2:#323A48;
  --ok:#5CD69A; --ok-bg:#10241A; --al:#F0A24B; --al-bg:#2A1E0E;
  --pe:#F58884; --pe-bg:#2A1413;
  --lateral:#121720; --lateral-tx:#A7B0C0; --lateral-on:#CFE0FF; --lateral-on-bg:#1D2839;
  --tile:#1C222D; --tile-a:#1B2740;
  --sombra:0 1px 2px rgba(0,0,0,.4);
  --sombra2:0 6px 20px -6px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marca:#7FA8F0; --marca2:#9CBCF5; --marca-suave:#1B2740; --marca-linha:#2C3B5A;
    --dado:#7FA8F0;
    --tx:#E8ECF4; --tx2:#B6BECD; --mu:#8C96A8; --fa:#6B7488;
    --bg:#0E1219; --sup:#161B24; --sup2:#1A2029; --linha:#252C38; --linha2:#323A48;
    --ok:#5CD69A; --ok-bg:#10241A; --al:#F0A24B; --al-bg:#2A1E0E;
    --pe:#F58884; --pe-bg:#2A1413;
    --lateral:#121720; --lateral-tx:#A7B0C0; --lateral-on:#CFE0FF; --lateral-on-bg:#1D2839;
    --tile:#1C222D; --tile-a:#1B2740;
  --sombra:0 1px 2px rgba(0,0,0,.4);
    --sombra2:0 6px 20px -6px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--f);background:var(--bg);color:var(--tx);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.oculto{display:none!important}

/* ---------------- estrutura ---------------- */
#app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}

aside{background:var(--lateral);border-right:1px solid var(--linha);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;
  font-size:16px;font-weight:700;letter-spacing:-.025em;color:var(--tx)}
.mtile{width:28px;height:28px;border-radius:8px;background:var(--marca);
  display:flex;align-items:center;justify-content:center;flex:none}
.grupo{padding:8px 10px 2px}
.grupo h5{margin:10px 8px 6px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fa);font-weight:700}
.item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;
  background:none;color:var(--lateral-tx);font-size:13.5px;font-weight:500;
  padding:8px 10px;border-radius:8px;margin-bottom:1px}
.item:hover{background:var(--sup2);color:var(--tx)}
.item.on{background:var(--lateral-on-bg);color:var(--lateral-on);font-weight:600}
.item .pt{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.item[disabled]{opacity:.42;cursor:default}
.item[disabled]:hover{background:none;color:var(--lateral-tx)}
.item .breve{margin-left:auto;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fa);font-weight:700}
.rodape-lat{margin-top:auto;padding:12px 10px;border-top:1px solid var(--linha)}

main{min-width:0;display:flex;flex-direction:column}
.topo{display:flex;align-items:center;gap:12px;padding:12px 22px;background:var(--sup);
  border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20}
.seletor{display:flex;align-items:center;gap:9px;background:var(--sup2);
  border:1px solid var(--linha);border-radius:9px;padding:6px 10px;font-size:13px;font-weight:600}
.seletor select{border:none;background:none;color:var(--tx);font:inherit;font-weight:600;
  outline:none;cursor:pointer;max-width:220px}
.sinal{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.sinal.demo{background:var(--al)}
.acoes-topo{margin-left:auto;display:flex;align-items:center;gap:8px}
.ic{width:34px;height:34px;border-radius:9px;border:1px solid var(--linha);background:var(--sup);
  color:var(--mu);display:flex;align-items:center;justify-content:center}
.ic:hover{color:var(--tx);border-color:var(--linha2)}

.conteudo{padding:24px 22px 56px;max-width:1320px;width:100%}
.cabeca{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cabeca h1{margin:0;font-size:23px;letter-spacing:-.025em;font-weight:700}
.cabeca p{margin:4px 0 0;color:var(--mu);font-size:13.5px}
.cabeca .dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.btn{border:1px solid var(--linha2);background:var(--sup);color:var(--tx);
  padding:8px 15px;border-radius:9px;font-size:13.5px;font-weight:600}
.btn:hover{border-color:var(--marca);color:var(--marca)}
.btn.cheio{background:var(--marca);border-color:var(--marca);color:#fff}
.btn.cheio:hover{background:var(--marca2);border-color:var(--marca2);color:#fff}
.btn:disabled{opacity:.5;cursor:default}

/* ---------------- blocos ---------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--linha);
  border-radius:12px;overflow:hidden;background:var(--sup);margin-bottom:18px}
.kpi{padding:14px 16px;border-left:1px solid var(--linha);border-top:1px solid var(--linha)}
.kpi:nth-child(4n+1){border-left:none}
.kpi:nth-child(-n+4){border-top:none}
.kpi label{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fa);font-weight:700}
.kpi b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;margin-top:3px}
.kpi.q b{color:var(--al)}
.kpi .d{font-size:11px;color:var(--mu);margin-top:2px}

.abas{display:flex;gap:2px;border-bottom:1px solid var(--linha);margin-bottom:18px;overflow-x:auto}
.aba{border:none;background:none;color:var(--mu);font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 15px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.aba:hover{background:var(--sup2)}
.aba:hover{color:var(--tx)}
.aba.on{color:var(--marca);border-bottom-color:var(--marca)}

.grade{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.painel{background:var(--sup);border:1px solid var(--linha);border-radius:12px;
  box-shadow:var(--sombra);overflow:hidden}
.painel > .cab{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--linha)}
.painel > .cab h2{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.painel > .corpo{padding:14px 16px}
.chip{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;
  border-radius:5px;background:var(--sup2);color:var(--mu);border:1px solid var(--linha);font-weight:700}

.cartao{border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:9px;
  background:var(--sup)}
.cartao:last-child{margin-bottom:0}
.cartao .l1{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;flex-wrap:wrap}
.cartao .v{font-size:15px;font-weight:700;letter-spacing:-.02em}
.cartao .v.g{color:var(--ok)} .cartao .v.r{color:var(--pe)} .cartao .v.a{color:var(--al)}
.cartao h3{margin:0 0 5px;font-size:13.5px;font-weight:700}
.cartao .acao{font-size:12.5px;color:var(--tx2);background:var(--sup2);
  border-left:2px solid var(--marca);border-radius:0 7px 7px 0;padding:8px 11px;margin:7px 0}
.cartao .msg{font-size:12.5px;color:var(--tx2);background:var(--marca-suave);
  border-radius:8px;padding:9px 11px;margin-top:7px;font-style:italic}
.cartao .pe{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
.cartao .sub{font-size:11.5px;color:var(--mu)}
.mini{border:1px solid var(--linha);background:var(--sup);color:var(--mu);
  padding:5px 11px;border-radius:7px;font-size:12px;font-weight:600}
.mini:hover{color:var(--ok);border-color:var(--ok)}

.funil{display:flex;flex-direction:column;gap:8px}
.fr{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--mu)}
.fl{width:82px;flex:none}
.ft{flex:1;height:20px;border-radius:5px;background:var(--sup2);overflow:hidden;
  border:1px solid var(--linha)}
.fb{display:block;height:100%;background:var(--marca)}
.fb.d{background:var(--linha2)}
.fn{width:46px;text-align:right;flex:none;font-size:12.5px;font-weight:700;color:var(--tx)}

.linha{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linha)}
.linha:last-child{border-bottom:none}
.linha .n{font-weight:600;font-size:13px}
.linha .s{font-size:11.5px;color:var(--mu)}
.linha .val{margin-left:auto;font-weight:700;font-size:13.5px}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fa);
  font-weight:700;padding:9px 11px;background:var(--sup2);border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:9px 11px;border-bottom:1px solid var(--linha);color:var(--tx2);white-space:nowrap}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td .cr{font-weight:700;color:var(--tx);font-size:13px}
td .sub{display:block;font-size:10.5px;color:var(--fa)}
.tw{border:1px solid var(--linha);border-radius:10px;overflow-x:auto;background:var(--sup)}

.selo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:99px}
.selo.g{background:var(--ok-bg);color:var(--ok)}
.selo.a{background:var(--al-bg);color:var(--al)}
.selo.r{background:var(--pe-bg);color:var(--pe)}

.vazio{text-align:center;padding:44px 20px;color:var(--mu)}
.vazio h3{margin:0 0 6px;font-size:16px;color:var(--tx)}
.vazio p{margin:0 auto 18px;max-width:46ch;font-size:13.5px}

form.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  align-items:end}
form.filtros label{display:block;font-size:11px;color:var(--mu);font-weight:600;margin-bottom:4px}
form.filtros input,form.filtros select{width:100%;padding:8px 10px;border:1px solid var(--linha);
  border-radius:8px;background:var(--sup);color:var(--tx);font:inherit;font-size:13px}
form.filtros .checks{display:flex;gap:14px;align-items:center;font-size:12.5px;color:var(--tx2)}
form.filtros .checks label{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px}

@media(max-width:1080px){
  #app{grid-template-columns:1fr}
  aside{position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center;
    border-right:none;border-bottom:1px solid var(--linha)}
  aside .grupo h5,.rodape-lat{display:none}
  .grupo{display:flex;gap:4px;padding:8px}
  .item{white-space:nowrap}
  .grade{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  /* com duas colunas a borda tem que seguir a nova linha, nao a de quatro */
  .kpi{border-left:1px solid var(--linha);border-top:1px solid var(--linha)}
  .kpi:nth-child(2n+1){border-left:none}
  .kpi:nth-child(-n+2){border-top:none}
  .kpi:nth-child(3),.kpi:nth-child(4){border-top:1px solid var(--linha)}
  .cabeca .dir{flex-wrap:wrap}
  .kpi{border-left:none;border-top:1px solid var(--linha)}
  .kpi:nth-child(-n+2){border-top:none}
  .kpi:nth-child(even){border-left:1px solid var(--linha)}
}

/* Faixa de acao persistente enquanto a loja nao esta conectada. O painel se
   mostra com dado de demonstracao em vez de travar numa tela de configuracao:
   a pessoa entende o que compra antes de autorizar. */
.chamada{display:flex;align-items:flex-start;gap:14px;background:var(--al-bg);
  border:1px solid var(--al);border-radius:12px;padding:14px 16px;margin-bottom:20px}
.chamada .ci{width:22px;height:22px;border-radius:50%;background:var(--al);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;margin-top:1px}
.chamada b{font-size:14px;display:block}
.chamada p{margin:3px 0 0;font-size:13px;color:var(--tx2);max-width:74ch}
.chamada .btn{margin-left:auto;flex:none;white-space:nowrap}
.chamada .fechar{border:none;background:none;color:var(--mu);font-size:20px;line-height:1;
  padding:0 2px;flex:none}
.chamada .fechar:hover{color:var(--tx)}
@media(max-width:760px){.chamada{flex-wrap:wrap}.chamada .btn{margin-left:0;width:100%;text-align:center}}

/* Cartao de criador na descoberta. Foto, faixa de GMV, divisao entre live e
   video e o porque de estar na lista. O que a API nao da e miniatura de video,
   entao nao fingimos ter. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.cc{border:1px solid var(--linha);border-radius:14px;background:var(--sup);padding:16px;
  transition:border-color .16s,box-shadow .16s}
.cc:hover{border-color:var(--linha2);box-shadow:var(--sombra2)}
.cc header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.cc .av{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--marca-suave);color:var(--marca);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:15px;text-decoration:none}
.cc .ci{min-width:0;flex:1}
.cc .l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* O apelido e a porta para o perfil no TikTok: e o primeiro que a pessoa quer ver. */
.cc .hd{display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:700;
  color:var(--tx);text-decoration:none}
.cc .hd:hover{color:var(--marca);text-decoration:underline}
.cc .hd svg{opacity:0;transition:opacity .14s}
.cc:hover .hd svg{opacity:.55}
.cc .bio{font-size:12.5px;color:var(--mu);line-height:1.45;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc .nota{flex:none;font-size:12px;font-weight:700;color:var(--marca);
  background:var(--marca-suave);border:1px solid var(--marca-linha);border-radius:6px;padding:2px 8px}
.tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;
  background:var(--sup2);color:var(--mu);border:1px solid var(--linha);white-space:nowrap}
.tag.live{background:var(--pe-bg);color:var(--pe);border-color:transparent;
  display:inline-flex;align-items:center;gap:4px}
.tag.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pe)}
.tag.sub{background:var(--ok-bg);color:var(--ok);border-color:transparent}

/* Bloco de numero no formato do concorrente: caixa cinza, valor grande no
   centro, rotulo pequeno embaixo. Sem borda, que e o que deixa a grade calma. */
.cc .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cc .t{background:var(--tile);border-radius:10px;padding:10px 6px;text-align:center;min-width:0}
.cc .t.a{background:var(--tile-a)}
.cc .t b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .t span{display:block;font-size:11px;color:var(--mu);margin-top:2px;line-height:1.25}
.cc footer{display:flex;align-items:center;gap:8px;justify-content:space-between;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--linha);flex-wrap:wrap}
.cc footer .sub{font-size:11.5px;color:var(--mu)}

/* ---------------- descoberta: busca, filtros e resultado ---------------- */
.busca{margin-bottom:12px}
.busca form{display:flex;align-items:center;gap:10px;background:var(--sup);
  border:1px solid var(--linha2);border-radius:12px;padding:8px 10px 8px 14px;
  box-shadow:var(--sombra)}
.busca form:focus-within{border-color:var(--marca)}
.busca svg{color:var(--fa);flex:none}
.busca input{flex:1;border:none;background:none;color:var(--tx);font:inherit;font-size:14.5px;
  outline:none;min-width:0}
.busca input::placeholder{color:var(--fa)}

.rapidos,.sugeridos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rapidos .rot,.sugeridos .rot{font-size:11.5px;font-weight:700;color:var(--mu);margin-right:2px}
.rapidos select{border:1px solid var(--linha);background:var(--sup);color:var(--tx);
  font:inherit;font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:99px;cursor:pointer}
.rapidos select:hover{border-color:var(--linha2)}
.rapidos .cx{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--tx2);border:1px solid var(--linha);background:var(--sup);padding:6px 12px;
  border-radius:99px;cursor:pointer}
.chipf{border:1px dashed var(--linha2);background:none;color:var(--mu);font-size:12.5px;
  font-weight:600;padding:6px 12px;border-radius:99px}
.chipf:hover{border-color:var(--marca);color:var(--marca);border-style:solid}
.chipf.on{background:var(--marca-suave);border-color:var(--marca-linha);color:var(--marca);border-style:solid}

.resumo{display:flex;align-items:center;gap:12px;margin:16px 0 12px;flex-wrap:wrap}
.resumo #chipDesc{font-size:13px;font-weight:600;color:var(--tx2)}
.resumo .dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.resumo select{border:1px solid var(--linha);background:var(--sup);color:var(--tx);font:inherit;
  font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer}
.visao{display:flex;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
.vb{border:none;background:var(--sup);color:var(--mu);padding:7px 9px;display:flex}
.vb.on{background:var(--marca-suave);color:var(--marca)}

.paginacao{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.paginacao .sub{font-size:12.5px;color:var(--mu)}

/* visao em lista: o mesmo cartao, deitado */
.cards.lista{grid-template-columns:1fr}
.cards.lista .cc{display:grid;grid-template-columns:minmax(230px,1fr) 2.4fr minmax(150px,auto);
  gap:18px;align-items:center}
.cards.lista .cc header{margin:0}
.cards.lista .cc .tiles{grid-template-columns:repeat(6,1fr)}
.cards.lista .cc footer{border:none;margin:0;padding:0;flex-direction:column;
  align-items:flex-end;gap:5px;text-align:right}
@media(max-width:900px){.cards.lista .cc{grid-template-columns:1fr}}

/* ------------------------------- painel: abas e cartoes de metrica ------- */
.cabeca .dir{display:flex;align-items:center;gap:10px}
.cabeca .dir select{border:1px solid var(--linha);background:var(--sup);color:var(--tx);
  font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer}

.kpi .l{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kpi label{display:flex;align-items:center;gap:5px}
.ajuda{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border:1px solid var(--linha2);border-radius:50%;font-size:9.5px;font-weight:700;color:var(--fa);cursor:help}
.dt{font-size:12px;font-weight:700;color:var(--fa);white-space:nowrap}
.dt.sobe{color:var(--ok)}
.dt.cai{color:var(--pe)}

/* ------------------------------------------- painel de mais filtros ------ */
.btn.mais{border-style:dashed}
.btn.mais.on{border-style:solid;border-color:var(--marca-linha);background:var(--marca-suave);
  color:var(--marca)}
.btn .cont{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 4px;margin-left:5px;border-radius:99px;background:var(--marca);color:#fff;font-size:10.5px}

body.travado{overflow:hidden}
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.mfundo{position:absolute;inset:0;background:rgba(9,14,26,.5)}
.mcaixa{position:relative;width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--sup);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra2)}
.mcaixa header{display:flex;align-items:flex-start;gap:16px;padding:20px 22px 16px;
  border-bottom:1px solid var(--linha)}
.mcaixa header h2{font-size:17px;letter-spacing:-.02em}
.mcaixa header p{font-size:12.5px;color:var(--mu);margin-top:3px}
.mcaixa header .ic{margin-left:auto}
.mcorpo{padding:18px 22px;overflow:auto}
.mcorpo section + section{margin-top:22px;padding-top:20px;border-top:1px solid var(--linha)}
.mcorpo h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fa);
  font-weight:700;margin-bottom:12px}
.mcorpo h3 small{text-transform:none;letter-spacing:0;font-weight:600;color:var(--fa);
  font-size:11px;margin-left:6px}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.mg > label{display:block;font-size:12.5px;font-weight:600;color:var(--tx2)}
.mg > label.larga{grid-column:1/-1}
.mg small{font-weight:500;color:var(--fa);margin-left:4px}
.par{display:flex;align-items:center;gap:8px;margin-top:6px}
.par span{font-size:12px;color:var(--fa)}
.mg input,.mg select{width:100%;min-width:0;border:1px solid var(--linha);border-radius:8px;
  background:var(--sup);color:var(--tx);font:inherit;font-size:13px;padding:8px 10px}
.mg select[multiple]{margin-top:6px;padding:6px}
.mg input:focus,.mg select:focus{outline:none;border-color:var(--marca)}
.mcaixa footer{display:flex;align-items:center;gap:10px;padding:14px 22px;
  border-top:1px solid var(--linha)}
.mcaixa footer .dir{margin-left:auto;display:flex;gap:10px}
@media(max-width:760px){
  .modal{padding:0}
  .mcaixa{max-height:100vh;height:100%;border-radius:0;border:none;width:100%}
  .mg{grid-template-columns:1fr}
}

/* --------------------------------------------- foto e videos do criador -- */
.cc .av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.cc .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.cc .vd{position:relative;display:block;aspect-ratio:9/13;border-radius:10px;overflow:hidden;
  background:var(--tile);text-decoration:none}
.cc .vd img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.cc .vd:hover img{transform:scale(1.04)}
.cc .vd .pl{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;background:rgba(16,20,30,.55);backdrop-filter:blur(2px)}
.cc .vd .pl::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.cc .vd em{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(16,20,30,.62);border-radius:5px;padding:2px 6px}
.cards.lista .cc .vids{display:none}

/* barra de paginas */
.paginacao{flex-wrap:wrap}
.paginacao .pg{min-width:32px;height:32px;padding:0 8px;border:1px solid transparent;
  border-radius:8px;background:none;color:var(--tx2);font:inherit;font-size:13px;font-weight:600}
.paginacao .pg:hover{background:var(--sup2);border-color:var(--linha)}
.paginacao .pg.on{background:var(--marca);border-color:var(--marca);color:#fff}
.paginacao .retic{color:var(--fa);padding:0 2px}

/* ------------------------------------------------ ficha do criador ------ */
.cc{cursor:pointer}
.cc:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.gvt{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end}
.gvtc{position:relative;width:min(520px,100%);height:100%;display:flex;flex-direction:column;
  background:var(--sup);border-left:1px solid var(--linha);box-shadow:var(--sombra2)}
.gvtc header{display:flex;align-items:flex-start;gap:14px;padding:18px 20px 15px;
  border-bottom:1px solid var(--linha)}
.gvtc header h2{font-size:17px;letter-spacing:-.02em}
.gvtc header p{font-size:12.5px;color:var(--mu);margin-top:2px}
.gvtc header .ic{margin-left:auto}
.gvtb{padding:18px 20px 28px;overflow:auto}
.gvtb h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fa);
  font-weight:700;margin:20px 0 8px}
.gvtb h3:first-child{margin-top:0}
.perfilTT{display:block;width:100%;height:220px;border:1px solid var(--linha);border-radius:12px;
  background:var(--sup2)}
.lf{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 2px;border-bottom:1px solid var(--linha);font-size:13px;color:var(--tx2)}
.lf:last-of-type{border-bottom:none}
.lf b{font-size:13.5px;color:var(--tx)}
.pq{margin:0;padding-left:18px}
.pq li{font-size:12.5px;color:var(--tx2);line-height:1.6}
.gvtb .vids{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
@media(max-width:560px){.gvtc{width:100%;border-left:none}}

/* ==========================================================================
   Passe de densidade.

   O que fazia a tela parecer gerada: canto muito redondo, sombra em tudo,
   numero em peso leve desalinhado entre linhas e ar demais entre blocos. Um
   painel operacional e lido em varredura vertical, entao numero alinha por
   coluna, borda de 1px separa melhor que sombra, e o raio grande so atrapalha
   a leitura de tabela. Isto vem depois de tudo de proposito: e um passe por
   cima, para ficar obvio no diff o que e desenho e o que e estrutura.
   ========================================================================== */

:root{ --r:8px }

/* Todo numero e tabular. Sem isto a coluna dança a cada digito. */
b,strong,td,th,.num,.kpi b,.lf b,.cc .t b{font-variant-numeric:tabular-nums}

.painel,.kpis,.cc,.mcaixa,.busca form{border-radius:10px}
.painel,.kpis,.cc,.busca form{box-shadow:none}
.cc:hover{box-shadow:none;border-color:var(--marca-linha)}
.cc .t,.mg input,.mg select,.paginacao .pg,.rapidos select,.rapidos .cx,.btn{border-radius:7px}
.chipf,.tag,.chip,.selo,.cont{border-radius:5px}
.cc .av{border-radius:7px}          /* quadrado arredondado le como avatar de sistema */
.cc .vd{border-radius:7px}

/* Cabecalho de bloco mais baixo e mais firme. */
.painel .cab{padding-top:11px;padding-bottom:11px}
.painel h2{font-size:13px;letter-spacing:-.01em}

/* Metrica: rotulo menor, numero menor e mais pesado, respiro menor. */
.kpi{padding:12px 14px}
.kpi label{font-size:9.5px;letter-spacing:.08em}
.kpi b{font-size:19px;font-weight:750;margin-top:4px;letter-spacing:-.02em}
.kpi .d{font-size:10.5px;margin-top:3px}
.dt{font-size:11px}

/* Tabela em densidade de operacao. */
.tw table{font-size:12.5px}
.tw th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fa);
  font-weight:700;padding:7px 10px}
.tw td{padding:8px 10px}
.tw tr:hover td{background:var(--sup2)}

/* Aviso de loja: faixa fina, nao cartaz. */
.chamada{gap:11px;padding:10px 14px;border-radius:8px;align-items:center;
  background:var(--sup);border-color:var(--linha2)}
.chamada .ci{width:18px;height:18px;font-size:11px;margin-top:0;background:var(--al)}
.chamada b{font-size:13px;display:inline}
.chamada p{display:inline;margin:0 0 0 6px;font-size:12.5px;color:var(--mu)}
.chamada .txt{min-width:0}

/* Barra lateral: item mais baixo, marcador discreto. */
.item{padding-top:6px;padding-bottom:6px;font-size:13px;border-radius:7px}
.grupo{font-size:9.5px;letter-spacing:.09em}