/* ---------------------------------------------------------------------------
   safadas.com — folha única do sistema visual.

   Os valores vêm de DESIGN.md, que por sua vez foi escrito a partir das telas
   construídas na F4.1. Arquivo servido, e não CSS embutido em cada página: o
   host não tem shell (ADR-0011), então não há passo de build para juntar nada,
   e um arquivo estático ainda é cacheável enquanto o HTML não é.

   Mobile-first. O padrão é o celular e as consultas só acrescentam para cima.
   --------------------------------------------------------------------------- */

:root{
  --ground:#17120F; --surface:#231D19; --surface-2:#1C1714; --surface-3:#30261D;
  --field:#221C18; --surface-on-field:#191411;
  --line:#56483B; --line-soft:#342D27; --line-hard:#3F372F;
  --gold:#B98835; --gold-bright:#F8B230; --gold-text:#E5B762;
  --gold-mid:#BC7E20; --gold-deep:#A74D01;

  /* Tingidos do quente do fundo, nunca branco com alfa. Branco a 26% dava
     2,15:1. Medido, não estimado: pior caso 4,92:1. */
  --ink:#fff; --ink-2:#D2CBC1; --ink-3:#A39A8E; --ink-4:#948A81;

  /* Cor semântica separada do acento: ouro é dinheiro e ação, perigo é perigo. */
  --ok:#4FBF7B; --alerta:#E8A33D; --perigo:#E2564B;

  --wash-3:rgba(255,255,255,.03); --wash-5:rgba(255,255,255,.05); --wash-8:rgba(255,255,255,.08);

  --metal:linear-gradient(161deg,rgba(255,233,134,.88) 0%,var(--gold-mid) 62%,var(--gold-deep) 100%);
  --corner-glow:linear-gradient(160deg,rgba(0,0,0,0) 88%,rgb(235 144 0/.2)),
                linear-gradient(350deg,rgba(0,0,0,0) 65%,rgb(235 144 0/.2) 97%);
  --top-sheen:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(248,178,48,.1) 100%);

  --r:12px; --r-xs:4px;
  --shadow:0 32px 68px rgba(0,0,0,.3); --shadow-s:0 5px 40px rgba(0,0,0,.16);
  --container:1265px;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --display:"Poppins","Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* Superfícies do navegador. É o sinal mais barato de que a página foi
   construída em vez de montada, e o que mais se esquece. */
::selection{background:var(--gold-deep);color:#fff}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:var(--r-xs)}
input,textarea{caret-color:var(--gold-bright)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--surface-2)}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid var(--surface-2)}
*::-webkit-scrollbar-thumb:hover{background:var(--gold)}

h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.025em;line-height:1.1}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ln{display:block}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Degradê branco para ouro: assinatura da referência pinada. Para no gold-mid
   porque a cauda #A74D01 mede 2,94:1 sobre a superfície. */
.gold{background:linear-gradient(to right,rgba(255,233,134,.92),var(--gold-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.pular{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface);
  color:var(--ink);padding:12px 18px;border:1px solid var(--gold);border-radius:0 0 var(--r) 0}
.pular:focus{left:0}

.wrap{max-width:var(--container);margin:0 auto;padding:0 18px}

/* ---------------------------------------------------------------- material */
.plate{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);background-image:var(--corner-glow)}
.plate::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--top-sheen);opacity:.55}
.plate>*{position:relative}

/* Chapa de imagem. Não existe fotografia no sistema porque não existe creator
   cadastrada, e inventar rosto numa plataforma adulta é dano à imagem de quem
   se pareça com ele. A chapa vazia é o estado real, e carrega a hierarquia. */
.chapa{position:relative;background:
    repeating-linear-gradient(135deg,rgba(185,136,53,.05) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,var(--surface-3),var(--surface-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.chapa svg{width:24px;height:24px;color:var(--gold);opacity:.5}
/* A foto de verdade ocupa a mesma caixa que a chapa cinza ocupava, e recorta
 * em vez de deformar: o design pede 4/5 e as fotos chegam em qualquer
 * proporcao. */
img.chapa.foto{display:block;width:100%;height:auto;object-fit:cover;background:transparent}
.chapa em{font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}

/* ----------------------------------------------------------------- botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:0 20px;border-radius:99px;border:0;cursor:pointer;font-family:var(--sans);
  font-size:13px;font-weight:700;letter-spacing:-.01em;
  transition:filter .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1),background .18s}
.btn svg{width:15px;height:15px;flex:none}
.btn-metal{background:var(--metal);color:#2A1B05;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn-metal:hover{filter:brightness(1.09);transform:translateY(-1px)}
.btn-ghost{background:var(--wash-5);color:var(--ink);border:1px solid var(--line-hard)}
.btn-ghost:hover{background:var(--wash-8);border-color:var(--line)}
.btn-sm{min-height:44px;padding:0 15px;font-size:12.5px}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.7);transform:none}

/* ----------------------------------------------------------------- casca */
header.topo{position:sticky;top:0;z-index:50;background:rgba(23,18,15,.84);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.barra{display:flex;align-items:center;gap:24px;height:64px}
.marca{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;
  font-size:17px;letter-spacing:-.03em;min-height:44px}
/* O simbolo da marca fica fora do fluxo: ele so guarda a definicao, e quem
   desenha e o `<use>`. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.marca-icone{width:26px;height:26px;display:block;flex:none}
header nav{display:none;gap:22px;font-size:13px;font-weight:600;color:var(--ink-2)}
header nav a{display:inline-flex;align-items:center;min-height:44px}
header nav a:hover{color:var(--gold-text)}
.barra .dir{margin-left:auto;display:flex;gap:10px;align-items:center}
.idade{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--gold-text);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:3px 7px}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:99px;
  background:var(--wash-5);border:1px solid var(--line-hard);color:var(--ink);cursor:pointer}
.menu-btn svg{width:19px;height:19px}
#menu[hidden]{display:none}
#menu{border-top:1px solid var(--line-soft);background:var(--surface-2);padding:8px 0 14px}
#menu ul{list-style:none;margin:0;padding:0 18px;display:grid}
#menu a{display:flex;align-items:center;min-height:52px;font-weight:600;font-size:15px;
  border-bottom:1px solid var(--line-soft)}
#menu li:last-child a{border-bottom:0}

footer.rodape{border-top:1px solid var(--line-soft);padding:40px 0 40px;color:var(--ink-3);font-size:13px}
.rodape .grade{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:30px}
.rodape h2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px;font-family:var(--sans)}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.rodape li a{display:inline-flex;align-items:center;min-height:44px}
.rodape a:hover{color:var(--gold-text)}
.legal{border-top:1px solid var(--line-soft);padding-top:20px;display:flex;gap:14px;
  flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------- migalhas */
.migalhas{padding:16px 0 0;font-size:12.5px;color:var(--ink-3)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.migalhas li::after{content:"/";margin-left:8px;color:var(--ink-4)}
.migalhas li:last-child::after{content:""}
.migalhas a:hover{color:var(--gold-text)}
.migalhas [aria-current]{color:var(--ink-2)}

/* -------------------------------------------------------- perfil público */
.perfil{padding:20px 0 56px}
.cabeca{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;box-shadow:var(--shadow)}
.cabeca .chapa{aspect-ratio:4/5;border-bottom:1px solid var(--line)}
.cabeca .chapa svg{width:40px;height:40px;opacity:.6}
.cabeca .corpo{padding:22px}
.nome{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nome h1{font-size:clamp(26px,7vw,40px)}
.selo-ver{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2A1B05;
  background:var(--metal);border-radius:99px;padding:4px 9px}
.linha-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:99px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--wash-3);
  border:1px solid var(--line-soft)}
.tag:hover{border-color:var(--line);color:var(--ink)}
.bio{color:var(--ink-2);font-size:15px;margin-top:16px;max-width:68ch}

/* Os canais são a AÇÃO da página. O produto é meio de caminho, não destino:
   quem chegou do Google veio para sair daqui. Ficam acima de tudo mais. */
.canais{display:grid;gap:10px;margin-top:20px}
.canal{display:flex;align-items:center;gap:13px;min-height:60px;padding:10px 16px;
  border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);
  transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1)}
.canal:hover{border-color:var(--gold);transform:translateY(-1px)}
.canal .ic{width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line-soft);color:var(--gold-text)}
.canal .ic svg{width:16px;height:16px}
.canal b{display:block;font-size:14.5px}
.canal span{font-size:12.5px;color:var(--ink-3)}
.canal .seta{margin-left:auto;color:var(--ink-3);flex:none}
.canal .seta svg{width:17px;height:17px}
.canal.principal{border-color:var(--gold)}

.aviso-nreiv{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border-radius:var(--r);background:var(--wash-3);border:1px dashed var(--line)}
.aviso-nreiv svg{width:16px;height:16px;color:var(--gold-bright);flex:none;margin-top:2px}
.aviso-nreiv p{font-size:12.5px;color:var(--ink-3)}
.aviso-nreiv a{color:var(--gold-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.bloco{margin-top:32px}
.bloco h2{font-size:19px;margin-bottom:14px}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.galeria .item{overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface)}
.galeria .chapa{aspect-ratio:4/5}

.vazio{padding:30px 22px;text-align:center}
.vazio p{color:var(--ink-3);font-size:13.5px;max-width:44ch;margin:0 auto}

.nota{font-family:var(--mono);font-size:12px;color:var(--ink-4);margin-top:14px}

/* ------------------------------------------------- daqui para cima só soma */
@media(min-width:600px){
  .wrap{padding:0 24px}
  .rodape .grade{grid-template-columns:1fr 1fr;gap:32px}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .cabeca .corpo{padding:28px}
}
@media(min-width:860px){
  header nav{display:flex}
  .menu-btn{display:none}
  .perfil{padding:24px 0 76px}
  .cabeca{grid-template-columns:360px 1fr}
  .cabeca .chapa{aspect-ratio:4/5;border-right:1px solid var(--line);border-bottom:0}
  .cabeca .corpo{padding:32px 34px}
  .canais{grid-template-columns:1fr 1fr}
  .galeria{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1080px){
  .rodape .grade{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .galeria{grid-template-columns:repeat(5,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* -------------------------------------------------------- artigo -------- */
.artigo{padding:24px 0 56px;max-width:760px}
.artigo-cabeca{margin-bottom:28px}
.artigo-cabeca h1{font-size:clamp(28px,7vw,42px);margin-bottom:14px;text-wrap:balance}
.artigo-cabeca .lead{color:var(--ink-2);font-size:17px;line-height:1.5;text-wrap:balance}
.rascunho{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:28px;
  border-style:dashed}
.rascunho svg{width:16px;height:16px;color:var(--gold-bright);flex:none;margin-top:2px}
.rascunho p{font-size:12.5px;color:var(--ink-3)}
.bloco-texto{margin-bottom:30px}
.bloco-texto h2{font-size:20px;margin-bottom:12px}
/* Medida de 65 a 75 caracteres. Linha mais longa que isso faz o olho perder o
   comeco da seguinte, e a pessoa releva relendo. */
.bloco-texto p{color:var(--ink-2);font-size:15.5px;line-height:1.65;max-width:68ch;margin-bottom:12px}
.bloco-texto p:last-child{margin-bottom:0}
.fecho{padding:28px 26px;margin:36px 0 30px;text-align:center}
.fecho h2{font-size:20px;margin-bottom:8px}
.fecho p{color:var(--ink-2);margin-bottom:18px}
.relacionadas h2{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;font-family:var(--sans)}
.relacionadas ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.relacionadas li a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-text);
  font-weight:600;font-size:14.5px}
.relacionadas li a:hover{text-decoration:underline;text-underline-offset:3px}
@media(min-width:860px){ .artigo{padding:28px 0 76px} }

/* ---------------------------------------------------------- busca -------- */
.busca{display:flex;align-items:center;gap:10px;max-width:620px;margin:0 auto 26px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;
  padding:6px 6px 6px 16px;box-shadow:var(--shadow-s);
  transition:border-color .2s,box-shadow .2s}
.busca:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(185,136,53,.14)}
.busca svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.busca input{flex:1;min-width:0;background:0;border:0;outline:0;color:var(--ink);
  font-family:var(--sans);font-size:15px;padding:11px 0;min-height:44px}
.busca input::placeholder{color:var(--ink-3)}
.busca input::-webkit-search-cancel-button{filter:invert(.6)}

/* ------------------------------------------------------------- hub -------- */
.hub{padding:24px 0 56px}
.hub-cabeca{max-width:62ch;margin:0 auto 26px;text-align:center}
.hub-cabeca h1{font-size:clamp(28px,7vw,44px);margin-bottom:12px;text-wrap:balance}
.hub-cabeca p{color:var(--ink-2);font-size:15px;text-wrap:balance}
.hub-cabeca .conta{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:12px;display:block}

.verticais{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.verticais a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;
  font-size:13px;font-weight:700;color:var(--ink-3);background:var(--wash-3);
  border:1px solid var(--line-soft);transition:.15s}
.verticais a:hover{color:var(--ink);border-color:var(--line)}
.verticais a[aria-current="page"]{background:var(--metal);color:#2A1B05;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.card:hover{transform:translateY(-3px);border-color:var(--gold)}
.card .chapa{aspect-ratio:4/5;border-bottom:1px solid var(--line)}
.card .chapa svg{width:20px;height:20px}
.card .chapa em{font-size:10px}
.card .corpo{padding:12px 13px 13px}
.card .nm{font-weight:700;font-size:14px;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.card .sb{font-size:12.5px;color:var(--ink-3);margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.paginacao{display:flex;justify-content:center;margin-top:32px}
.hub-vazio{padding:44px 24px;text-align:center}

@media(min-width:600px){ .cards{grid-template-columns:repeat(3,1fr);gap:16px} }
@media(min-width:860px){ .cards{grid-template-columns:repeat(4,1fr)} .hub{padding:28px 0 76px} }
@media(min-width:1080px){ .cards{grid-template-columns:repeat(5,1fr)} }

/* ------------------------------------------------------- telas de conta
 *
 * Formulario sem JavaScript, pela mesma razao da busca na F4.7: tela que so
 * responde a script some para quem esta em conexao ruim, e este publico opera
 * no celular.
 */
.wrap.conta { max-width: 460px; }

.conta .plate { padding: 28px 24px; }

.conta h1 { margin: 0 0 8px; font-size: 24px; }

.conta-intro { margin: 0 0 20px; opacity: .75; }
.conta-passos { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 6px; }

.conta-erro {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(180, 40, 40, .12);
    border-left: 3px solid #b42828;
    border-radius: 8px;
}

.conta-form label {
    display: block;
    margin: 16px 0 6px;
    font-size: 13px;
    opacity: .8;
}

.conta-form input[type="email"],
.conta-form input[type="password"],
.conta-form input[type="date"] {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}

.conta-form input:focus {
    outline: 2px solid var(--gold-text, #d8b26a);
    outline-offset: 1px;
}

.conta-dica { display: block; margin-top: 5px; font-size: 12px; opacity: .6; }

.conta-campo-erro { display: block; margin-top: 5px; font-size: 12px; color: #ff9b9b; }

/* Alvo de toque com area de sobra: um checkbox obrigatorio que erra o toque no
 * celular e um cadastro que nao completa. */
.conta-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.conta-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }

.conta-botao {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 13px 16px;
    font: inherit;
    font-weight: 600;
    color: #17110a;
    background: var(--gold-text, #d8b26a);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.conta-rodape { margin: 20px 0 0; font-size: 14px; opacity: .8; }

/* ---------------------------------------------------- documentos legais
 *
 * Coluna estreita de proposito: texto de acordo e lido, nao escaneado, e linha
 * longa e onde a leitura desiste.
 */
.wrap.legal { max-width: 720px; }

.legal .plate { padding: 32px 28px; }

.legal h1 { margin: 0 0 6px; }

.legal-versao { margin: 0 0 28px; font-size: 13px; opacity: .6; }

.legal-impressao {
    margin-left: 8px;
    padding: 2px 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    background: rgba(255, 255, 255, .06);
    border-radius: 5px;
}

.legal-corpo { line-height: 1.7; }

.legal-corpo h2 { margin: 36px 0 12px; font-size: 20px; }
.legal-corpo h3 { margin: 26px 0 10px; font-size: 16px; }
.legal-corpo p  { margin: 0 0 16px; }
.legal-corpo ul { margin: 0 0 16px; padding-left: 22px; }
.legal-corpo li { margin-bottom: 7px; }

.legal-corpo hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* Tabela rola sozinha. Larga dentro de celular, ela empurraria a pagina toda. */
.legal-tabela { overflow-x: auto; margin: 0 0 20px; }

.legal-tabela table { width: 100%; border-collapse: collapse; font-size: 14px; }

.legal-tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    vertical-align: top;
}

.legal-tabela tr:first-child td { font-weight: 600; opacity: .85; }

.legal-outros {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    padding: 0 28px;
    font-size: 14px;
}

/* -------------------------------------------------------- painel da creator */
.wrap.painel { max-width: 780px; }

.painel-topo { margin-bottom: 24px; }
.painel-topo h1 { margin: 0 0 4px; }
.painel-conta { margin: 0; font-size: 14px; opacity: .6; }

.painel-aviso {
    margin: 0 0 20px;
    padding: 12px 14px;
    background: rgba(216, 178, 106, .12);
    border-left: 3px solid var(--gold-text, #d8b26a);
    border-radius: 8px;
    font-size: 14px;
}

.painel-vazio { padding: 32px 28px; text-align: center; }
.painel-vazio h2 { margin: 0 0 12px; font-size: 20px; }
.painel-vazio p { margin: 0 0 12px; opacity: .8; }

.painel-botao { display: inline-block; width: auto; padding: 13px 28px; text-decoration: none; }

.painel-perfis { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.painel-perfil { padding: 22px 24px; }

.painel-perfil-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.painel-perfil-topo h2 { margin: 0; font-size: 18px; }

.painel-estado {
    padding: 3px 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, .07);
    border-radius: 999px;
    white-space: nowrap;
}

/* Publicado ganha cor; rascunho fica neutro de proposito, porque a maioria dos
 * perfis vai estar em rascunho e um painel todo colorido nao destaca nada. */
.painel-estado-published { background: rgba(90, 170, 110, .18); }
.painel-estado-suspended { background: rgba(180, 40, 40, .18); }

.painel-endereco {
    margin: 6px 0 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    opacity: .65;
}

.painel-pronto { margin: 0; font-size: 14px; color: #8fd6a3; }
.painel-falta  { margin: 0 0 6px; font-size: 14px; opacity: .8; }

.painel-pendencias { margin: 0; padding-left: 20px; font-size: 14px; opacity: .75; }
.painel-pendencias li { margin-bottom: 4px; }

/* O e-mail de quem esta logado, no cabecalho. Discreto e truncado: e
 * identificacao, nao conteudo, e em tela estreita ele nao pode empurrar o
 * botao para fora. */
.conta-logada {
    max-width: 22ch;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .7;
}

@media (max-width: 720px) {
    .conta-logada { display: none; }
}

/* As palavras da creator, em linha, com o estado colado em cada uma. */
.painel-tags{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px;padding:0;list-style:none}
.painel-tags li{display:flex;flex-direction:column;gap:2px}
.painel-tags .conta-dica{margin:0;font-size:11px}

/* As categorias, em coluna com a caixa de marcar colada no nome. Grade de duas
 * colunas em tela larga, porque a lista tende a crescer. */
.painel-categorias{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:10px}
.painel-categorias label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.painel-categorias .conta-dica{margin-left:24px}
@media (min-width:720px){.painel-categorias{grid-template-columns:1fr 1fr}}

/* As fotos da mesa de trabalho. Grade pequena: aqui a foto e para reconhecer
 * qual e qual, e nao para admirar. */
.painel-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:12px;margin:0;padding:0;list-style:none}
.painel-fotos li{display:flex;flex-direction:column;gap:6px}
.painel-fotos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
    border:1px solid rgba(255,255,255,.14);border-radius:8px}
.painel-foto-vazia{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;
    font-size:11px;text-align:center;opacity:.55;border:1px dashed rgba(255,255,255,.2);
    border-radius:8px;padding:6px}

/* A saida do painel fica no topo, discreta: e acao rara e nao disputa com o
 * que a pessoa veio fazer. */
.painel-sair { margin-top: 10px; }
.painel-sair button {
    padding: 6px 12px;
    font-size: 13px;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    cursor: pointer;
}

/* Aviso nao e pendencia, e a tela precisa deixar isso obvio sem depender de
 * ler o texto: barra lateral discreta, e nunca a cor de erro. */
.painel-avisos {
    margin-top: 14px;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, .18);
}

.painel-mais { margin-top: 22px; font-size: 14px; }

/* O prefixo do endereco fica colado no campo: ver "safadas.com/" antes de
 * digitar e o que faz a pessoa entender o que esta escolhendo. */
.painel-slug { display: flex; align-items: stretch; }

.painel-slug span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 13px;
    opacity: .6;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    white-space: nowrap;
}

.painel-slug input { border-radius: 0 8px 8px 0; }

.conta-form select {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}

/* ------------------------------------------------ mesa de trabalho do perfil */
.painel-voltar { margin: 0 0 16px; font-size: 14px; }

.painel-topo h1 a,
.painel-perfil-topo h2 a { color: inherit; text-decoration: none; }

.painel-perfil-topo h2 a:hover { text-decoration: underline; }

.painel-abrir { margin: 14px 0 0; font-size: 14px; }

.painel-ok {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: rgba(90, 170, 110, .14);
    border-left: 3px solid #5aaa6e;
    border-radius: 8px;
    font-size: 14px;
}

.painel-bloco { margin-bottom: 18px; padding: 22px 24px; }
.painel-bloco h2 { margin: 0 0 10px; font-size: 18px; }

.painel-explica { margin: 0 0 16px; font-size: 14px; opacity: .75; }

.painel-vazio-bloco { margin: 0 0 18px; font-size: 14px; opacity: .55; }

.painel-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }

.painel-lista > li {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border-radius: 10px;
}

.painel-lista-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.painel-tag {
    padding: 2px 8px;
    font-size: 11px;
    background: rgba(255, 255, 255, .07);
    border-radius: 999px;
    white-space: nowrap;
}

/* As acoes de um item quebram em coluna no celular: tres botoes lado a lado
 * num aparelho estreito viram tres alvos de toque grudados. */
.painel-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 12px;
}

.painel-acao { display: flex; flex-direction: column; gap: 4px; }

.painel-acao label { margin: 0; font-size: 12px; opacity: .7; }

.painel-acao input[type="date"] { padding: 8px 10px; font-size: 14px; }

.painel-acao button {
    padding: 9px 14px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    cursor: pointer;
    min-height: 40px;
}

.painel-acao button:hover { background: rgba(255, 255, 255, .13); }

.conta-form textarea {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    resize: vertical;
}

/* --------------------------------------------- fila de revisao de perfil */
.admin-resumo { margin: 0 0 18px; font-size: 14px; opacity: .75; }

.admin-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.admin-fila-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.admin-item {
    padding: 18px 20px;
    background: rgba(255, 255, 255, .03);
    border-radius: 10px;
}

.admin-item-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.admin-item-endereco { margin: 8px 0 0; font-size: 13px; }
.admin-item-linha    { margin: 10px 0 0; font-size: 14px; opacity: .85; }
.admin-item-desde    { margin: 8px 0 0; font-size: 12px; opacity: .55; }

.admin-decisao { margin-top: 16px; }

.admin-decisao-form label { display: block; margin: 0 0 5px; font-size: 12px; opacity: .7; }

.admin-decisao-form textarea,
.admin-decisao-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}
.admin-decisao-form textarea { resize: vertical; min-height: 68px; }

/* Os dois botoes lado a lado, e o de recusa SEM cor de alarme: devolver para
 * rascunho e trabalho normal de revisao, nao punicao. */
.admin-decisao-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.admin-decisao-botoes button {
    padding: 10px 16px;
    min-height: 42px;
    font: inherit;
    font-size: 14px;
    color: #17110a;
    background: var(--gold-text, #d8b26a);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.admin-botao-recusa {
    color: inherit !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
}

/* Campo de arquivo: o padrao do navegador some no fundo escuro e o alvo de
 * toque fica pequeno demais no celular. */
.conta-form input[type="file"] {
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: 8px;
    cursor: pointer;
}

.conta-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    cursor: pointer;
}

/* Filtro das filas de moderacao: uma linha so, e quebra no celular. */
.admin-filtro {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
    font-size: 14px;
}

.admin-filtro label { opacity: .7; }

.admin-filtro select {
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
}

.admin-filtro button {
    padding: 8px 14px;
    min-height: 38px;
    font: inherit;
    font-size: 14px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    cursor: pointer;
}

.admin-subtitulo { margin: 32px 0 12px; font-size: 16px; opacity: .9; }
.admin-subtitulo:first-child { margin-top: 0; }

/* ------------------------------------------------------------- auditoria */
.admin-trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.admin-linha {
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border-radius: 10px;
    font-size: 14px;
}

.admin-linha-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.admin-acao {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--gold-text, #d8b26a);
}

.admin-quando { font-size: 12px; opacity: .5; white-space: nowrap; }

.admin-linha-quem   { margin: 8px 0 0; opacity: .8; }
.admin-linha-motivo { margin: 8px 0 0; }

/* Ator do sistema fica visualmente diferente de pessoa: confundir os dois faz
 * alguem procurar responsavel onde nao ha. */
.admin-sistema { opacity: .6; font-style: italic; }

.admin-linha-mudou {
    margin: 10px 0 0;
    padding: 8px 10px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, .25);
    border-radius: 6px;
}

/* Quem tem papel e nao cadastrou o segundo fator: o papel nao vale, e a tela
 * precisa dizer, senao alguem acha que ja deu acesso e nao deu. */
.admin-sem-mfa {
    background: rgba(216, 178, 106, .2) !important;
    color: var(--gold-text, #d8b26a);
}

/* ---------------------------------------------- opcoes de select no escuro
 *
 * O painel de opcoes de um `select` e desenhado pelo sistema, e no Windows ele
 * pinta o fundo de branco. As opcoes herdavam `color: inherit`, que aqui e
 * claro, entao davam texto branco em fundo branco: so a linha selecionada
 * aparecia, e as outras ficavam invisiveis.
 *
 * A cor precisa ser explicita nas duas pontas, e nao herdada.
 */
.conta-form select option,
.admin-filtro select option {
    color: #f2ece2;
    background-color: #1c1710;
}

/* O botao de conferir o endereco fica discreto: ele e opcional, e competir com
 * o botao de criar perfil faria a pessoa parar no passo do meio. */
.painel-conferir {
    margin-top: 8px;
    padding: 8px 14px;
    min-height: 38px;
    font: inherit;
    font-size: 13px;
    color: inherit;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    cursor: pointer;
    align-self: flex-start;
}

.painel-conferir:hover { background: rgba(255, 255, 255, .13); }

.painel-livre {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #8fd6a3;
}

/* O link principal e o que a pagina publica destaca. */
.painel-principal {
    background: rgba(216, 178, 106, .2) !important;
    color: var(--gold-text, #d8b26a);
}

/* O campo de corrigir endereco e largo: URL nao cabe em campo curto, e cortar o
 * que a pessoa esta conferindo e o oposto do que a acao serve. */
.painel-acao input[type="url"] { min-width: 260px; padding: 8px 10px; font-size: 14px; }

/* Desde quando a pessoa tem acesso ao perfil. Nota de rodape da linha, e nao
 * informacao de primeira leitura: a titular olha o e-mail e o papel. */
.painel-desde { margin: 8px 0 0; font-size: 12px; opacity: .55; }

/* O grupo de categorias da denuncia.
 *
 * Radio e nao select de proposito: quem esta denunciando conteudo intimo
 * proprio precisa LER as opcoes, e a explicacao de cada uma, sem abrir menu.
 * Select esconde a lista atras de um clique e some com a ajuda. */
.conta-grupo {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
}

.conta-grupo legend { padding: 0 6px; font-size: 13px; opacity: .8; }

.conta-radio {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    cursor: pointer;
}

.conta-radio:last-child { margin-bottom: 0; }

.conta-radio input[type="radio"] { margin-top: 3px; flex: none; }

.conta-radio strong { display: block; font-weight: 600; }

.conta-radio .conta-dica { margin-top: 2px; }

/* O link de denuncia no fim da pagina de perfil.
 *
 * Discreto de proposito: nao compete com os canais da creator, que sao o
 * objetivo da pagina. Mas fica NA pagina, e nao so no rodape do site, porque
 * quem precisa dele esta olhando um perfil especifico. */
.rodape-denuncia {
    margin: 34px 0 0;
    font-size: 13px;
    opacity: .55;
}

.rodape-denuncia a { color: inherit; }

/* O relato da denuncia dentro do caso.
 *
 * Aparece inteiro, e nao resumido: quem decide precisa ler o que foi
 * denunciado. Uma fila que mostra so a categoria faz a pessoa abrir o perfil e
 * adivinhar o que incomodou, e adivinhar e como decisao de moderacao vira
 * sorteio. */
.admin-relato {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 2px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
    border-radius: 0 8px 8px 0;
}

.admin-relato p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; }

/* A gravidade do caso, em cor. Critico e o que ja saiu do ar sozinho. */
.admin-sev-critical { background: rgba(214, 92, 92, .22) !important; color: #f0a3a3; }
.admin-sev-high     { background: rgba(216, 178, 106, .2) !important; color: var(--gold-text, #d8b26a); }

/* O bloco de moderacao na mesa da creator.
 *
 * Borda em ambar e nao em vermelho: e informacao seria, e nao erro dela. A
 * pessoa que abre essa tela ja sabe que algo aconteceu, e um bloco vermelho
 * gritando nao acrescenta nada alem de susto. */
.painel-moderacao {
    border-color: rgba(216, 178, 106, .35);
}

.painel-moderacao h2 { color: var(--gold-text, #d8b26a); }

/* A vitrine paga. Lista numerada e enxuta: a posicao E a informacao, e card
 * grande com foto competiria com a descoberta organica, que e o oposto do que
 * o PRD pede ao separar patrocinado de organico. */
.vitrine { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 10px; }

.vitrine > li {
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--line-soft, rgba(255, 255, 255, .08));
    border-radius: 10px;
}

.vitrine-posicao {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--gold-text, #d8b26a);
    min-width: 22px;
}

.vitrine-quem { flex: 1 1 240px; }
.vitrine-quem a { font-weight: 600; }
.vitrine-chamada { display: block; font-size: 13px; opacity: .65; margin-top: 2px; }
.vitrine-valor { font-family: var(--mono); font-size: 13px; opacity: .8; margin-left: auto; }

/* A tela de pagamento. O valor exato e o endereco sao para COPIAR, e a fonte
 * mono existe para isso: em fonte proporcional, 0 e O ficam parecidos, e quem
 * digita errado paga um valor que nao corresponde a pedido nenhum. */
.pagamento { padding: 18px 20px; margin: 18px 0; }
.pagamento-rotulo { margin: 14px 0 4px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .6; }
.pagamento-rotulo:first-child { margin-top: 0; }
.pagamento-valor { margin: 0; font-family: var(--mono); font-size: 26px; font-weight: 700;
  color: var(--gold-text, #d8b26a); word-break: break-all; }
.pagamento-valor span { font-size: 15px; opacity: .7; margin-left: 6px; }
.pagamento-endereco { margin: 0; }
.pagamento-endereco code { font-family: var(--mono); font-size: 14px; word-break: break-all;
  display: block; padding: 8px 10px; background: rgba(255, 255, 255, .04); border-radius: 8px; }
.pagamento-prazo { margin: 0; font-family: var(--mono); font-size: 14px; }