:root{
      --ft-primary:#111827;
      --ft-muted:#6b7280;
      --ft-accent:#ffc107;   /* amarelo Favoritudo */
      --ft-border:#e5e7eb;
      --ft-bg:#ffffff;
    }
    body{background:#f8fafc;color:var(--ft-primary);}
    .profile-card{background:var(--ft-bg);border:1px solid var(--ft-border);border-radius:1rem;}
    .count-pill{font-weight:600;}
    .btn-follow{background:var(--ft-accent);border-color:var(--ft-accent);color:#111;}
    .btn-follow:hover{filter:brightness(0.95)}
    .subtle{color:var(--ft-muted);}

/* Avatar Hex com borda amarela externa */
.hex{
  --hex-border: 4px;
  --hex-color: #ffc107; /* amarelo Favoritudo */
  width:112px;           /* sm/md/lg ajustam isso */
  aspect-ratio:1/1;
  position:relative;
  display:inline-block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}
.princ{
  --hex-border: 10px;
}
/* borda fora do recorte */
.hex::before{
  content:"";
  position:absolute; inset: calc(var(--hex-border) * -1);
  background: var(--hex-color);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  pointer-events:none;
  z-index:0;
}
/* imagem recortada no topo */
.hex img{
  position:relative; z-index:1;
  width:100%; height:100%; display:block; object-fit:cover;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}
/* tamanhos */
.hex.sm{ width:48px } .hex.md{ width:64px } .hex.lg{ width:128px }



/* Tabs do perfil */
.profile-tabs .nav-link {
  color: #000 !important;            /* texto sempre preto */
  border-radius: 999px;
  outline: none !important;
  box-shadow: none !important;       /* tira aquela borda azul */
  transition: background .2s ease, color .2s ease;
  
}

/* Quando passa o mouse */
.profile-tabs .nav-link:hover {
  background: #e0a800;              /* amarelo escuro */
  color: #000 !important;           /* mantém texto preto */
}

/* Quando está ativa */
.profile-tabs .nav-link.active {
  background: #000;                 /* fundo preto */
  color: #fff !important;           /* texto branco */
}


    /* Cards de conteúdo */
    .post-card, .user-card, .badge-card{
      border:1px solid var(--ft-border);
      background:var(--ft-bg);
      border-radius:1rem;
      background-color: white;
	  margin: 3px;
    }
    .post-thumb{
      width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:.75rem;
      background:#ddd;
    }
    .stat-chip{
      display:inline-flex;align-items:center;gap:.35rem;
      padding:.35rem .6rem;border:1px solid var(--ft-border);
      border-radius:999px;font-size:.9rem;color:#374151;background:#fff;
    }
    .link-clean{color:inherit;text-decoration:none}
    .link-clean:hover{color:inherit;text-decoration:underline}
	
	/* Hex p/ emoji */
/* hex de emoji (como já combinamos) */
.hex-emoji{
  --hex-size:72px; --hex-border:8px; --hex-color:#ffc107; --hex-bg:#fff8db;
  width:var(--hex-size); aspect-ratio:1/1; position:relative; display:inline-grid; place-items:center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));
}
.hex-emoji::before{
  content:""; position:absolute; inset:calc(var(--hex-border)*-1); background:var(--hex-color);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
}
.hex-emoji>.hex-emoji__inner{
  position:relative; z-index:1; width:100%; height:100%; display:grid; place-items:center; background:var(--hex-bg);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
}
.hex-emoji .emoji{ font-size:calc(var(--hex-size)*.5); line-height:1 }

/* títulos */
.badge-title-top{ font-size:1.125rem; }   /* “Criador” */
.badge-title-bottom{ font-size:1.25rem; } /* “Iniciante” */


/* Hex p/ emoji */
.hex-emoji-p{
  --hex-size:72px; --hex-border:8px; --hex-color:#C0C0C0; --hex-bg:#D9D9D9;
  width:var(--hex-size); aspect-ratio:1/1; position:relative; display:inline-grid; place-items:center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.08));
}
.hex-emoji-p::before{
  content:""; position:absolute; inset:calc(var(--hex-border)*-1); background:var(--hex-color);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
}
.hex-emoji-p>.hex-emoji__inner-p{
  position:relative; z-index:1; width:100%; height:100%; display:grid; place-items:center; background:var(--hex-bg);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0% 50%);
}
.hex-emoji-p .emoji-p{ font-size:calc(var(--hex-size)*.5); line-height:1 }



/* mobile refinado */
@media (max-width:576.98px){
  .hex-emoji{ --hex-size:60px }
  .hex-emoji-p{ --hex-size:60px }
  .badge-head{ gap:.5rem }
  .badge-title-top{ font-size:1rem }
  .badge-title-bottom{ font-size:1.125rem }
}




/* mobile refinado */
@media (max-width:576.98px){
  .hex-emoji{ --hex-size:60px }
  .badge-head{ gap:.5rem }
  .badge-title-top{ font-size:1rem }
  .badge-title-bottom{ font-size:1.125rem }
}