/* ===================== PERFIL PÚBLICO ===================== */
.pf {
  position: fixed; inset: 0; overflow: hidden auto; isolation: isolate;
  color: var(--text); background: var(--bg);
  font-family: var(--font), 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.pf.is-preview { position: absolute; border-radius: inherit; }
.pf * { box-sizing: border-box; }
.pf button { font: inherit; color: inherit; }

/* ---------- fundo ---------- */
/* contain:strict isola o fundo numa stacking context própria: repaints do fundo
   não invalidam o layout da página, e vice-versa. */
.pf-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: strict; }
.pf:not(.is-preview) .pf-bg { position: fixed; }
.pf-bg img, .pf-bg video { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(var(--bg-blur)); transform: scale(calc(1 + var(--bg-blur) / 300)); }
.pf-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--bg-dim)); }
/* will-change:transform promove os canvas de efeito para layers de composição
   independentes — o browser não repinta o resto da página quando o canvas muda. */
.pf-fx, .pf-cursor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
.pf-fx { z-index: 1; }
.pf-cursor { z-index: 60; }
.pf:not(.is-preview) .pf-fx, .pf:not(.is-preview) .pf-cursor { position: fixed; }

/* ---------- overlays de textura ---------- */
.pf-ov { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pf:not(.is-preview) .pf-ov { position: fixed; }
.ov-grao .pf-ov, .ov-vhs .pf-ov::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .14; animation: pf-grain .5s steps(4) infinite;
}
.ov-vhs .pf-ov::before { content: ''; position: absolute; inset: -40px; }
.ov-scanlines .pf-ov, .ov-vhs .pf-ov::after { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.ov-vhs .pf-ov::after { content: ''; position: absolute; inset: 0; animation: pf-roll 6s linear infinite; }
.ov-vinheta .pf-ov { background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%); }
.ov-vhs .pf-card { animation: pf-chroma 3.5s infinite steps(1); }
@keyframes pf-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-12px, 8px); } 50% { transform: translate(9px, -10px); } 75% { transform: translate(-6px, -4px); } }
@keyframes pf-roll { to { background-position: 0 300px; } }
@keyframes pf-chroma { 0%, 88%, 100% { filter: none; } 90% { filter: drop-shadow(2px 0 0 rgba(255, 0, 80, .6)) drop-shadow(-2px 0 0 rgba(0, 220, 255, .6)); } 94% { filter: drop-shadow(-1px 0 0 rgba(255, 0, 80, .5)) drop-shadow(1px 0 0 rgba(0, 220, 255, .5)); } }

/* ---------- palco e card ---------- */
.pf-stage { container-type: inline-size; container-name: pf; position: relative; z-index: 3; min-height: 100%; display: grid; place-items: center; padding: 64px 16px; }
.pf-card { position: relative; width: min(460px, 100%); text-align: center; transition: transform .2s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }

/* Cartão de vidro (fakecrime / feds) */
.L-cartao .pf-card, .L-moderno .pf-card {
  padding: 30px 28px 24px;
  background: rgba(var(--card-rgb), var(--card-a));
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  border: 1px solid rgba(var(--text-rgb), var(--border-a));
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
}
/* Moderno: largo, avatar à esquerda (guns "modern") */
.L-moderno .pf-card { width: min(700px, 100%); text-align: left; padding: 26px 28px 18px; }
.L-moderno .pf-head { display: flex; flex-direction: row; align-items: center; gap: 22px; }
.L-moderno .pf-id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.L-moderno .pf-namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.L-moderno .pf-bio, .L-moderno .pf-type { margin: 0; text-align: left; max-width: none; }
.L-moderno .pf-links { justify-content: flex-start; }
.L-moderno .pf-info { justify-content: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(var(--text-rgb), .07); }
.L-moderno .pf-av { width: 100px; height: 100px; }
.L-moderno .pf-name { font-size: 34px; }

.glow-card .pf-card { box-shadow: 0 0 50px -8px rgba(var(--glow-card-rgb, var(--accent-rgb)), .55), 0 0 0 1px rgba(var(--glow-card-rgb, var(--accent-rgb)), .3); }
.card-tilt .pf-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, .07), transparent 40%);
}
.card-flutuar.is-in .pf-card { animation: pf-float 6s ease-in-out infinite; }
.card-pulso.is-in .pf-card { animation: pf-pulse 3.2s ease-in-out infinite; }
@keyframes pf-float { 50% { transform: translateY(-12px); } }
@keyframes pf-pulse { 50% { transform: scale(1.018); } }

.border-girando .pf-card::after, .border-pulsante .pf-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.L-centro.border-girando .pf-card::after, .L-centro.border-pulsante .pf-card::after { inset: -24px -28px; border-radius: 24px; }
.border-girando .pf-card::after { background: conic-gradient(from var(--ang, 0deg), transparent 0 55%, var(--accent) 78%, #fff 82%, transparent 92%); animation: pf-spin 3.5s linear infinite; }
.border-pulsante .pf-card::after { background: var(--accent); animation: pf-bpulse 2.2s ease-in-out infinite; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes pf-spin { to { --ang: 360deg; } }
@keyframes pf-bpulse { 50% { opacity: .2; } }

/* ---------- cabeçalho ---------- */
.pf-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pf-av { position: relative; width: 112px; height: 112px; flex: none; }
.pf-av img, .pf-initial {
  width: 100%; height: 100%; border-radius: var(--av-radius); object-fit: cover; display: grid; place-items: center;
  background: rgba(var(--text-rgb), .08); font-size: 44px; font-weight: 600; color: var(--text);
  box-shadow: 0 0 0 2px rgba(var(--text-rgb), .1), 0 10px 40px -10px rgba(0, 0, 0, .8);
}
.pf-status { position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid #0b0b0b; display: none; }
.pf-status:not([hidden]) { display: block; }
.s-online { background: #23a55a; } .s-idle { background: #f0b232; } .s-dnd { background: #f23f43; } .s-offline { background: #80848e; }

.pf-id { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pf-name { position: relative; margin: 0; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.glow-name .pf-name { text-shadow: 0 0 16px rgba(var(--glow-name-rgb, var(--text-rgb)), .55); }

/* selos em pílula (guns) */
.pf-badges { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 4px 7px; border-radius: 999px; background: rgba(var(--text-rgb), .07); border: 1px solid rgba(var(--text-rgb), .06); }
.pf-namerow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.badge-style-plain .pf-badges { padding: 0; background: transparent; border-color: transparent; }
.badge-style-tiles .pf-badges { gap: 6px; padding: 0; background: transparent; border-color: transparent; }
.badge-style-tiles .pf-badge { border: 1px solid rgba(var(--text-rgb), .12); border-radius: 8px; background: rgba(var(--text-rgb), .08); }
.pf-badge { position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: var(--b); outline: none; border-radius: 6px; }
.pf-badge[hidden] { display: none; }
.pf-badge svg { width: 15px; height: 15px; }

/* ── Badge rotation carousel ── */
/* Quando rotação ativa: todos os badges ficam em posição absoluta no mesmo slot,
   o wrapper tem tamanho fixo para não mudar de tamanho durante a troca */
[data-badge-rotate] {
  position: relative;
  overflow: hidden;
  /* largura e altura fixas ao tamanho de um badge (+padding) */
  width: 38px;
  height: 30px;
  flex-wrap: nowrap;
  padding: 0;
}
[data-badge-rotate] .pf-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  /* todos invisíveis por padrão quando rotação ativa */
  opacity: 0;
  pointer-events: none;
}
[data-badge-rotate] .pf-badge[aria-hidden="true"] { opacity: 0; pointer-events: none; }
[data-badge-rotate] .pf-badge.br-active { opacity: 1; pointer-events: auto; transform: none; }

/* ── Slide (↔) ── */
/* Modo letreiro: a coleção inteira fica visível e desliza em laço
   (sai por um lado, volta pelo outro — translateX -50% com 2 cópias) */
[data-badge-rotate="slide"].br-marquee {
  width: auto;
  max-width: 100%;
  height: 30px;
  padding: 4px 7px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.br-track {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  animation: br-marquee var(--br-dur, 5s) linear infinite;
}
[data-badge-rotate="slide"].br-marquee .pf-badge,
[data-badge-rotate="slide"].br-marquee .pf-badge[aria-hidden="true"] {
  position: static;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 1 !important;
  pointer-events: auto;
}
@keyframes br-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Slide clássico (um a um) — mantido caso algo use o carrossel antigo */
[data-badge-rotate="slide"]:not(.br-marquee) .pf-badge.br-out  { animation: br-slide-out .32s cubic-bezier(.4,0,.2,1) forwards; }
[data-badge-rotate="slide"]:not(.br-marquee) .pf-badge.br-in   { animation: br-slide-in  .32s cubic-bezier(.4,0,.2,1) forwards; opacity: 1; }
[data-badge-rotate="slide"]:not(.br-marquee) .pf-badge.br-active { animation: none; opacity: 1; transform: none; }

@keyframes br-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}
@keyframes br-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Fade (✦) ── */
[data-badge-rotate="fade"] .pf-badge.br-out  { animation: br-fade-out .32s ease forwards; }
[data-badge-rotate="fade"] .pf-badge.br-in   { animation: br-fade-in  .32s ease forwards; opacity: 1; }

@keyframes br-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.7); }
}
@keyframes br-fade-in {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Flip (⟳) ── */
[data-badge-rotate="flip"] { perspective: 120px; }
[data-badge-rotate="flip"] .pf-badge.br-out  { animation: br-flip-out .32s ease-in forwards; }
[data-badge-rotate="flip"] .pf-badge.br-in   { animation: br-flip-in  .32s ease-out forwards; opacity: 1; }

@keyframes br-flip-out {
  from { opacity: 1; transform: rotateY(0deg); }
  to   { opacity: 0; transform: rotateY(-90deg); }
}
@keyframes br-flip-in {
  from { opacity: 0; transform: rotateY(90deg); }
  to   { opacity: 1; transform: rotateY(0deg); }
}
.glow-badges .pf-badge svg { filter: drop-shadow(0 0 5px var(--glow-badges, var(--b))); }
.pf-badge:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

/* tooltips */
.pf em[role=tooltip] {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; font: 500 12.5px/1 'Outfit', system-ui, sans-serif; font-style: normal;
  color: #fff; background: rgba(12, 12, 14, .92); border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 10;
}
.pf-badge:hover em, .pf-badge:focus-visible em, .links-icones .pf-link:hover em, .links-icones .pf-link:focus-visible em { opacity: 1; transform: translate(-50%, 0); }
.links-botoes em[role=tooltip] { display: none; }

/* ---------- texto ---------- */
.pf-bio { margin: 14px auto 0; max-width: 40ch; font-size: 15.5px; line-height: 1.55; color: rgba(var(--text-rgb), .78); overflow-wrap: anywhere; }
.pf-bio strong { color: var(--text); font-weight: 600; }
.pf-type { margin: 8px auto 0; min-height: 1.5em; font-size: 15px; color: rgba(var(--text-rgb), .92); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: pf-blink 1s steps(1) infinite; }
@keyframes pf-blink { 50% { opacity: 0; } }
.t-glow { text-shadow: 0 0 12px rgba(var(--accent-rgb), .9); color: var(--text); }
.t-shake { display: inline-block; animation: pf-shake .35s infinite; }
.t-rainbow, .fx-arco-iris { background: linear-gradient(90deg, #ff5e7e, #ffb547, #e8ff6a, #4fe3a5, #5bb8ff, #b48bff, #ff5e7e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-rain 4s linear infinite; }
@keyframes pf-rain { to { background-position: -200% 0; } }
@keyframes pf-shake { 25% { transform: translate(1px, -1px) rotate(1deg); } 75% { transform: translate(-1px, 1px) rotate(-1deg); } }

/* infos: views, local, uid */
.pf-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 14px; font-size: 13px; font-weight: 500; color: rgba(var(--text-rgb), .72); }
.pf-info span { display: inline-flex; align-items: center; gap: 5px; }
.pf-info svg { width: 14px; height: 14px; }
.pf-info .sep { width: 1px; height: 12px; background: rgba(var(--text-rgb), .2); }
/* linha do topo (localização/relógio em modo "infos") — sempre junto do nome, nunca no canto */
.pf-info-top { margin-top: 10px; }
.pf-info-top span { position: relative; }
.pf-corner { position: sticky; bottom: 18px; z-index: 4; width: max-content; margin-left: 22px; }
.pf-corner .pf-info { margin: 0; justify-content: flex-start; }
.L-cartao .pf-info { margin-top: 12px; }

/* × pequeno nos itens da linha do topo (prévia) */
.pf-hl-x-mini {
  position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; padding: 0;
  border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; z-index: 5;
  background: rgba(0, 0, 0, .7); color: #fff; opacity: 1;
}
.pf-hl-x-mini:hover { background: #b91c1c; }
.pf-hl-x-mini svg { width: 9px; height: 9px; }

/* ---------- efeitos de nome ---------- */
.glow-name .fx-arco-iris, .glow-name .fx-fogo, .glow-name .fx-ouro, .glow-name .fx-gradiente { text-shadow: none; }
.fx-arco-iris { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .25)); }
.fx-gradiente { background: linear-gradient(90deg, var(--text), var(--accent), var(--text)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-rain 5s linear infinite; filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .45)); }
.fx-neon { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--accent), 0 0 26px var(--accent), 0 0 50px var(--accent) !important; animation: pf-flicker 5s infinite; }
@keyframes pf-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
.fx-onda span { display: inline-block; animation: pf-wave 1.6s ease-in-out infinite; }
@keyframes pf-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
.fx-glitch { animation: pf-gl-skew 3s infinite steps(1); }
.fx-glitch::before, .fx-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.fx-glitch::before { color: #ff2e63; transform: translate(-2px, 0); clip-path: inset(0 0 60% 0); animation: pf-gl1 2.2s infinite steps(2); mix-blend-mode: screen; }
.fx-glitch::after { color: #08f7fe; transform: translate(2px, 0); clip-path: inset(55% 0 0 0); animation: pf-gl2 1.8s infinite steps(2); mix-blend-mode: screen; }
@keyframes pf-gl1 { 0% { clip-path: inset(0 0 70% 0); } 25% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 1px); } 50% { clip-path: inset(70% 0 5% 0); } 75% { clip-path: inset(10% 0 80% 0); transform: translate(2px, -1px); } }
@keyframes pf-gl2 { 0% { clip-path: inset(60% 0 0 0); } 33% { clip-path: inset(20% 0 50% 0); transform: translate(3px, 0); } 66% { clip-path: inset(80% 0 2% 0); transform: translate(-2px, 1px); } }
@keyframes pf-gl-skew { 0%, 92%, 100% { transform: none; } 94% { transform: skewX(8deg); } 96% { transform: skewX(-6deg); } }
.fx-brilho .spark { position: absolute; width: 10px; height: 10px; pointer-events: none; transform: translate(-50%, -50%); animation: pf-spark .9s ease-out forwards; }
.fx-brilho .spark::before { content: ''; position: absolute; inset: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes pf-spark { from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); } 40% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(90deg); } }
.fx-fogo { background: linear-gradient(0deg, #ff3d00, #ff9100 45%, #ffe57f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 -2px 8px rgba(255, 110, 0, .65)); animation: pf-fire 1.2s ease-in-out infinite alternate; }
@keyframes pf-fire { to { filter: drop-shadow(0 -4px 14px rgba(255, 60, 0, .85)); } }
.fx-ouro { background: linear-gradient(110deg, #a8741a 0%, #f8e08e 30%, #fff6d2 45%, #c9932b 60%, #f6d77a 80%, #a8741a 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-gold 3.5s linear infinite; }
@keyframes pf-gold { to { background-position: -250% 0; } }

/* ---------- links ---------- */
.pf-links { margin-top: 20px; }
.links-icones { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.links-botoes { display: grid; gap: 8px; }
.pf-link { position: relative; display: flex; align-items: center; gap: 12px; color: var(--icon); text-decoration: none; border: 0; background: none; cursor: pointer; border-radius: 12px; outline: none; transition: transform .18s, background .18s; }
.pf-link:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.links-icones .pf-link { padding: 6px; }
.links-icones .pf-link:hover { transform: translateY(-3px) scale(1.06); }
.links-botoes .pf-link { padding: 13px 16px; background: rgba(var(--text-rgb), .06); border: 1px solid rgba(var(--text-rgb), .06); color: var(--text); text-align: left; }
.links-botoes .pf-link:hover { background: rgba(var(--text-rgb), .1); }
.pf-ico { display: grid; place-items: center; width: var(--icon-sz, 32px); height: var(--icon-sz, 32px); color: var(--brand); flex: none; }
.links-botoes .pf-ico { width: 22px; height: 22px; }
.pf-ico svg { width: 100%; height: 100%; }
.mono-icons .pf-ico { color: var(--icon); }
.glow-icons .pf-ico { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--glow-icons, var(--brand)) 75%, transparent)); }
.glow-icons.mono-icons .pf-ico { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--glow-icons, var(--icon)) 75%, transparent)); }
.pf-lbl { flex: 1; font-size: 15px; font-weight: 500; }
.pf-go { width: 16px; height: 16px; opacity: .45; }

/* ---------- discord (estilo fakecrime) ---------- */
.pf-discord { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); text-align: left; display: grid; gap: 10px; }
.pf-discord[hidden] { display: none; }
.dc-user, .dc-act { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dc-user > div, .dc-act > div { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.dc-user b, .dc-act b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-user span, .dc-act span { font-size: 13px; color: rgba(var(--text-rgb), .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-av { position: relative; flex: none; width: 48px; height: 48px; }
.dc-av img { width: 100%; height: 100%; border-radius: 50%; }
.dc-dot { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #111; }
.dc-act { padding-top: 10px; border-top: 1px solid rgba(var(--text-rgb), .07); }
.dc-act img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.dc-prog { display: block; height: 3px; margin-top: 7px; border-radius: 3px; background: rgba(var(--text-rgb), .15); overflow: hidden; }
.dc-prog i { display: block; height: 100%; background: var(--text); }

/* ---------- spotify ao vivo (escutando agora) ---------- */
.pf-spotify { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); text-align: left; display: grid; gap: 10px; }
.pf-spotify[hidden] { display: none; }
.sp-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #1DB954; }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: #1DB954; box-shadow: 0 0 0 0 rgba(29, 185, 84, .6); animation: sp-pulse 1.6s infinite; }
@keyframes sp-pulse { 70% { box-shadow: 0 0 0 8px rgba(29, 185, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 185, 84, 0); } }
.sp-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-row img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.sp-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.sp-meta b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-meta span { font-size: 13px; color: rgba(var(--text-rgb), .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-prog { display: block; height: 3px; margin-top: 7px; border-radius: 3px; background: rgba(var(--text-rgb), .15); overflow: hidden; }
.sp-prog i { display: block; height: 100%; background: #1DB954; }

/* ---------- botão de volume (canto, como guns/feds) ---------- */
.pf-vol { position: absolute; top: 16px; left: 16px; z-index: 30; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border-radius: 12px; background: rgba(15, 15, 17, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .08); }
.pf:not(.is-preview) .pf-vol { position: fixed; }
.pf-volbtn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; cursor: pointer; color: #fff !important; }
.pf-volbtn svg { width: 18px; height: 18px; }
.pf-vol input { width: 0; opacity: 0; margin: 0; accent-color: var(--accent); transition: width .2s, opacity .2s, margin .2s; }
.pf-vol:hover input, .pf-vol:focus-within input { width: 90px; opacity: 1; margin-right: 8px; }
.pf-vol-slider { display: contents; }

/* ---------- players ---------- */
.pf-music:empty { display: none; }
.pf-player { position: relative; margin-top: 18px; text-align: left; overflow: hidden; }
.pf-player button { display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--text); border-radius: 50%; }
.pf-player button:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pl-cover { flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(var(--text-rgb), .1); color: rgba(var(--text-rgb), .7); }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; }
.pl-cover svg { width: 40%; height: 40%; }
.pl-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pl-meta b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-meta span { font-size: 12.5px; color: rgba(var(--text-rgb), .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pl-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); }
.pl-mini .pl-cover { width: 44px; height: 44px; }
.pl-line { display: block; height: 3px; margin-top: 7px; border-radius: 3px; background: rgba(var(--text-rgb), .14); overflow: hidden; }
.pl-fill { display: block; height: 100%; width: 0; background: var(--text); transition: width .25s linear; }
.pl-ctrl { display: flex; gap: 2px; }
.pl-ctrl button { width: 34px; height: 34px; }
.pl-ctrl svg { width: 17px; height: 17px; }
.pl-mini .pl-play { background: var(--text); color: rgb(var(--card-rgb)); }
.pl-mini .pl-play svg { width: 15px; height: 15px; }

/* completo: capa desfocada no fundo + letra (haunt) */
.pl-completo { padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--text-rgb), .08); background: rgba(20, 20, 22, .6); }
.pl-backdrop { position: absolute; inset: -30px; z-index: -1; background: center/cover; filter: blur(30px) saturate(1.4) brightness(.55); }
.pl-top { display: flex; align-items: center; gap: 14px; }
.pl-completo .pl-cover { width: 58px; height: 58px; }
.pl-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgba(var(--text-rgb), .65); }
.pl-row button { width: 30px; height: 30px; flex: none; }
.pl-row button svg { width: 17px; height: 17px; }
.pl-row .pl-play { width: 34px; height: 34px; background: var(--text); color: #111; }
.pl-row .pl-play svg { width: 15px; height: 15px; }
.pl-seek { flex: 1; min-width: 0; height: 14px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.pl-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--text) var(--p, 0%), rgba(var(--text-rgb), .2) var(--p, 0%)); }
.pl-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(var(--text-rgb), .2); }
.pl-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--text); }
.pl-seek::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--text); }
.pl-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }
.pl-lyrics { margin-top: 14px; text-align: center; }
.pl-lyrics[hidden] { display: none; }
.pl-lyrics p { margin: 0; overflow-wrap: anywhere; }
.ly-now { font-size: 17px; font-weight: 600; color: var(--text); min-height: 1.4em; }
.ly-now.in { animation: pf-lyric .35s ease both; }
.ly-next { margin-top: 4px !important; font-size: 14px; color: rgba(var(--text-rgb), .4); min-height: 1.3em; }
@keyframes pf-lyric { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.pl-viz { display: block; width: 100%; height: 36px; margin-top: 12px; }
.pl-viz[hidden] { display: none; }

/* ondas (wavelength) */
.pl-ondas { padding: 10px 12px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); }
.pl-wv-wrap { display: flex; align-items: center; gap: 10px; }
.pl-wv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-wv-info b   { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-wv-info span { font-size: 11.5px; color: rgba(var(--text-rgb), .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-wv-bar { position: relative; height: 32px; margin-top: 4px; }
.pl-wvcanvas { display: block; width: 100%; height: 100%; border-radius: 4px; }
.pl-wv-bar .pl-seek { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.pl-ondas .pl-play { width: 34px; height: 34px; flex: none; background: var(--text); color: rgb(var(--card-rgb)); border-radius: 50%; }
.pl-ondas .pl-play svg { width: 15px; height: 15px; }
.pl-ondas .pl-next { width: 28px; height: 28px; flex: none; opacity: .6; }
.pl-ondas .pl-next svg { width: 15px; height: 15px; }

/* letreiro (marquee) */
.pl-letreiro { padding: 10px 14px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); }
.pl-mq-wrap { display: flex; align-items: center; gap: 10px; }
.pl-mq-track { flex: 1; min-width: 0; overflow: hidden; }
.pl-mq-inner { display: inline-flex; gap: 12px; white-space: nowrap; font-size: 13.5px; font-weight: 500; animation: pl-marquee 12s linear infinite; }
.pl-mq-inner:hover { animation-play-state: paused; }
.pl-mq-inner .pl-title  { opacity: 1; }
.pl-mq-inner .pl-mq-sep { opacity: .4; }
.pl-mq-inner .pl-artist { opacity: .55; font-weight: 400; }
@keyframes pl-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pl-letreiro .pl-line { display: block; height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(var(--text-rgb), .12); overflow: hidden; }
.pl-letreiro .pl-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.pl-letreiro .pl-play { width: 32px; height: 32px; flex: none; background: var(--text); color: rgb(var(--card-rgb)); border-radius: 50%; }
.pl-letreiro .pl-play svg { width: 14px; height: 14px; }
.pl-letreiro .pl-next { width: 26px; height: 26px; flex: none; opacity: .6; }

/* ---------- entrada ---------- */
.pf:not(.is-in) .pf-card, .pf:not(.is-in) .pf-corner { opacity: 0; }
.pf.is-in .pf-corner { animation: pf-in-fade .8s .3s ease both; }
.pf.is-in.enter-fade .pf-card { animation: pf-in-fade .8s ease both; }
.pf.is-in.enter-pop .pf-card { animation: pf-in-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.pf.is-in.enter-desfoque .pf-card { animation: pf-in-blur 1s ease both; }
.pf.is-in.enter-subir .pf-card { animation: pf-in-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-flip .pf-card { animation: pf-in-flip .9s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-nenhuma .pf-card { opacity: 1; }
.card-flutuar.is-in .pf-card { animation: pf-in-fade .8s ease both, pf-float 6s .8s ease-in-out infinite !important; }
.card-pulso.is-in .pf-card { animation: pf-in-fade .8s ease both, pf-pulse 3.2s .8s ease-in-out infinite !important; }
@keyframes pf-in-fade { from { opacity: 0; } }
@keyframes pf-in-pop { from { opacity: 0; transform: scale(.85); } }
@keyframes pf-in-blur { from { opacity: 0; filter: blur(20px); transform: scale(1.05); } }
@keyframes pf-in-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes pf-in-flip { from { opacity: 0; transform: perspective(900px) rotateX(35deg) translateY(30px); } }

/* ---------- tela de entrada ---------- */
.pf-gate {
  position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; width: 100%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  color: #fff; font: 600 17px/1 var(--font), 'Outfit', sans-serif; transition: opacity .7s, backdrop-filter .7s;
}
.pf:not(.is-preview) .pf-gate { position: fixed; }
.pf-gate span { position: relative; text-shadow: 0 0 14px rgba(255, 255, 255, .45); }
.gate-simples span { animation: pf-breathe 2.4s ease-in-out infinite; }
.gate-colchetes span::before { content: '[ '; } .gate-colchetes span::after { content: ' ]'; }
.gate-colchetes span { animation: pf-breathe 2.4s ease-in-out infinite; }
.pf-gate:focus-visible span { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 4px; }
.pf-gate.out { opacity: 0; pointer-events: none; }
@keyframes pf-breathe { 50% { opacity: .5; } }
.gate-glitch span::before, .gate-glitch span::after { content: attr(data-text); position: absolute; inset: 0; }
.gate-glitch span::before { color: #ff2e63; transform: translate(-2px); clip-path: inset(0 0 55% 0); animation: pf-gl1 1.6s infinite steps(2); }
.gate-glitch span::after { color: #08f7fe; transform: translate(2px); clip-path: inset(50% 0 0 0); animation: pf-gl2 1.3s infinite steps(2); }
.gate-digitando span { overflow: hidden; white-space: nowrap; border-right: 2px solid #fff; width: 0; animation: pf-typing 2.4s steps(24) infinite alternate; }
@keyframes pf-typing { to { width: 100%; } }

.pf-toast { position: absolute; left: 50%; bottom: 26px; z-index: 70; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 999px; background: rgba(15, 15, 17, .92); border: 1px solid rgba(255, 255, 255, .08); color: #fff; font: 500 14px 'Outfit', sans-serif; opacity: 0; transition: .25s; pointer-events: none; }
.pf:not(.is-preview) .pf-toast { position: fixed; }
.pf-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- celular ---------- */
@container pf (max-width: 600px) {
  .pf-name { font-size: 32px; }
  .L-cartao .pf-card { padding: 26px 18px 20px; }
  .L-moderno .pf-card { text-align: center; padding: 24px 18px 16px; }
  .L-moderno .pf-head { flex-direction: column; gap: 12px; }
  .L-moderno .pf-id, .L-moderno .pf-namerow { align-items: center; justify-content: center; }
  .L-moderno .pf-bio, .L-moderno .pf-type { text-align: center; }
  .L-moderno .pf-links, .L-moderno .pf-info { justify-content: center; }
}
@media (max-width: 600px) { .pf-corner { float: none; margin-left: 0; left: 0; right: 0; display: flex; justify-content: center; } }
.is-preview .pf-stage { padding: 48px 14px; }

/* ===== v3: selos, banner, sleek, efeitos novos ===== */
.pf-badges[hidden] { display: none; }
.pf-badge svg, .pf-badge img { width: 18px; height: 18px; display: block; }
.pf-badge.is-img img { width: 20px; height: 20px; object-fit: contain; }
.glow-badges .pf-badge.is-img img { filter: drop-shadow(0 0 4px var(--glow-badges, rgba(255, 255, 255, .35))); }
.mono-badges .pf-badge { color: var(--text) !important; }
.mono-badges .pf-badge svg { filter: drop-shadow(0 0 4px var(--glow-badges, rgba(var(--text-rgb), .6))) !important; }
.mono-badges .pf-badge svg [fill="#fff"] { fill: rgb(var(--card-rgb)); }
.mono-badges .pf-badge.is-img img { filter: none; }
.pf-badge { width: 24px; height: 24px; }

/* banner */
.pf-banner { position: relative; margin: -30px -28px 0; height: 140px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.pf-banner img, .pf-banner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(var(--card-rgb), .7)); }
.L-cartao.has-banner .pf-head { margin-top: -56px; position: relative; z-index: 1; }
.L-moderno .pf-banner { margin: -26px -28px 18px; height: 120px; }

/* Sleek: card com banner e avatar sobreposto à esquerda (guns) */
.L-sleek .pf-card {
  width: min(520px, 100%); padding: 0 0 22px; text-align: left; overflow: hidden;
  background: rgba(var(--card-rgb), var(--card-a)); backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  border: 1px solid rgba(var(--text-rgb), var(--border-a)); border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
}
.L-sleek .pf-banner { margin: 0; height: 150px; border-radius: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), .08)); }
.L-sleek:not(.has-banner) .pf-card::before { content: ''; display: block; height: 110px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .5), rgba(var(--accent-rgb), .05)); }
.L-sleek .pf-head { flex-direction: row; align-items: flex-end; gap: 16px; margin-top: -48px; padding: 0 24px; position: relative; z-index: 1; }
.L-sleek .pf-av { width: 96px; height: 96px; }
.L-sleek .pf-av img, .L-sleek .pf-initial { box-shadow: 0 0 0 5px rgb(var(--card-rgb)), 0 10px 30px -8px rgba(0, 0, 0, .8); }
.L-sleek .pf-id { align-items: flex-start; padding-bottom: 6px; }
.L-sleek .pf-namerow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.L-sleek .pf-name { font-size: 28px; }
.L-sleek .pf-bio, .L-sleek .pf-type { text-align: left; margin-left: 24px; margin-right: 24px; max-width: none; }
.L-sleek .pf-info { justify-content: flex-start; margin: 14px 24px 0; }
.L-sleek .pf-links, .L-sleek .pf-discord, .L-sleek .pf-music { margin-left: 24px; margin-right: 24px; }
.L-sleek .links-icones { justify-content: flex-start; }
.L-sleek.border-girando .pf-card::after, .L-sleek.border-pulsante .pf-card::after { inset: 0; }

/* card */
.card-zoom .pf-card:hover { transform: scale(1.035); }
.card-parallax .pf-card, .card-magnetico .pf-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.card-parallax .pf-bg { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }

/* nomes */
.fx-contorno { color: transparent; -webkit-text-stroke: 1.4px var(--text); text-shadow: none !important; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .7)); }
.fx-borrado { animation: pf-fuzzy 2.8s ease-in-out infinite; }
@keyframes pf-fuzzy { 0%, 100% { filter: blur(0); letter-spacing: 0; } 45% { filter: blur(2.5px); letter-spacing: .04em; } 55% { filter: blur(0); } }
.fx-tremer span { display: inline-block; animation: pf-jitter .18s infinite; }
@keyframes pf-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(.8px, -.8px) rotate(1deg); } 50% { transform: translate(-.8px, .6px); } 75% { transform: translate(.5px, .8px) rotate(-1deg); } }
.fx-quicar span { display: inline-block; animation: pf-bounce 1.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes pf-bounce { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-10px) scaleY(1.06); } 35% { transform: translateY(0) scaleY(.92); } }
.fx-sangue { color: #3478ff; text-shadow: 0 0 14px rgba(224, 22, 43, .7), 0 2px 0 #6b0010 !important; }
.fx-sangue .drip { position: absolute; top: 82%; width: 4px; height: 0; border-radius: 0 0 4px 4px; background: linear-gradient(#b3001b, #3478ff); animation: pf-drip 4.5s ease-in infinite; }
.fx-sangue .drip::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 8px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #3478ff; }
@keyframes pf-drip { 0% { height: 0; opacity: 1; } 60% { height: var(--len, 18px); opacity: 1; } 100% { height: var(--len, 18px); opacity: 0; } }

/* tela de entrada */
.pf-gate { display: grid; place-items: center; align-content: center; gap: 10px; }
.gate-sub { font: 400 13px/1.3 'Outfit', sans-serif; color: rgba(255, 255, 255, .55); letter-spacing: .02em; }
.gate-blackout { background: #000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.gate-img { max-width: min(260px, 70vw); max-height: min(200px, 40vh); width: auto; height: auto; border-radius: 10px; object-fit: contain; pointer-events: none; }
.gate-onda .gate-t i { display: inline-block; font-style: normal; animation: pf-wave 1.4s ease-in-out infinite; }
.gate-fontes .gate-t { font-size: 22px; min-width: 10ch; transition: none; }

/* v4: brilhinhos no nome, entradas novas */
.pf-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pf-sparkles i { position: absolute; display: block; animation: pf-spark 1.1s ease-in-out forwards; }
.pf-sparkles svg { width: 100%; height: 100%; display: block; }
@keyframes pf-spark { 0% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1) rotate(60deg); opacity: 1; } 100% { transform: scale(0) rotate(140deg); opacity: 0; } }
.pf.is-in.enter-quicar .pf-card { animation: pf-in-bounce .9s cubic-bezier(.28, .84, .42, 1) both; }
.pf.is-in.enter-balancar .pf-card { animation: pf-in-wobble .9s ease both; }
.pf.is-in.enter-girar .pf-card { animation: pf-in-spin .8s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-esquerda .pf-card { animation: pf-in-left .7s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-direita .pf-card { animation: pf-in-right .7s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-descer .pf-card { animation: pf-in-down .7s cubic-bezier(.2, .8, .2, 1) both; }
.pf.is-in.enter-afastar .pf-card { animation: pf-in-zoomout .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pf-in-bounce { 0% { opacity: 0; transform: translateY(-60px); } 50% { opacity: 1; transform: translateY(10px); } 70% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes pf-in-wobble { 0% { opacity: 0; transform: scale(.9); } 30% { opacity: 1; transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } 100% { transform: none; } }
@keyframes pf-in-spin { from { opacity: 0; transform: rotate(-200deg) scale(.4); } to { opacity: 1; transform: none; } }
@keyframes pf-in-left { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes pf-in-right { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes pf-in-down { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
@keyframes pf-in-zoomout { from { opacity: 0; transform: scale(1.35); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.pf-deco { background: none !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120% !important; height: 120% !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; z-index: 2; object-fit: contain; }

/* ===================== v5: cores por efeito, efeitos novos ===================== */
.has-name-color .pf-name { color: var(--name-color); }
/* cor escolhida pra efeitos que tinham cor fixa */
.has-nfx .fx-neon { text-shadow: 0 0 4px #fff, 0 0 12px var(--nfx), 0 0 26px var(--nfx), 0 0 50px var(--nfx) !important; }
.fx-glitch::before { color: var(--nfx, #ff2e63); }
.fx-glitch::after { color: var(--nfx2, #08f7fe); }
.has-nfx .fx-fogo { background-image: linear-gradient(0deg, var(--nfx), var(--nfx2, #ffe57f)); filter: drop-shadow(0 -2px 8px rgba(var(--nfx-rgb), .65)); }
.has-nfx .fx-ouro { background-image: linear-gradient(110deg, var(--nfx) 0%, #fff 40%, var(--nfx2, var(--nfx)) 60%, #fff 85%, var(--nfx) 100%); }
.has-nfx .fx-sangue { color: var(--nfx); text-shadow: 0 0 14px rgba(var(--nfx-rgb), .7), 0 2px 0 rgba(0, 0, 0, .5) !important; }
.has-nfx .fx-sangue .drip, .has-nfx .fx-sangue .drip::after { background: var(--nfx); }
.has-nfx .fx-gradiente { background-image: linear-gradient(90deg, var(--nfx2, var(--text)), var(--nfx), var(--nfx2, var(--text))); filter: drop-shadow(0 0 12px rgba(var(--nfx-rgb), .45)); }
.has-nfx .fx-contorno { -webkit-text-stroke-color: var(--nfx2, var(--text)); filter: drop-shadow(0 0 8px rgba(var(--nfx-rgb), .7)); }
.has-nfx .fx-brilho .spark::before { background: var(--nfx2, #fff); filter: drop-shadow(0 0 4px var(--nfx)); }
.has-nfx .fx-arco-iris { filter: drop-shadow(0 0 10px rgba(var(--nfx-rgb), .6)); }

/* nome: novos */
.fx-reflexo { background: linear-gradient(110deg, var(--nfx2, var(--text)) 35%, #fff 48%, var(--nfx, var(--accent)) 52%, var(--nfx2, var(--text)) 65%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-shine 3s linear infinite; text-shadow: none !important; }
@keyframes pf-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.fx-piscar { animation: pf-flash 1.6s steps(1) infinite; color: var(--nfx, inherit); }
@keyframes pf-flash { 0%, 60% { opacity: 1; } 61%, 70% { opacity: .15; } 71%, 80% { opacity: 1; } 81%, 88% { opacity: .2; } 89% { opacity: 1; } }
.fx-pulsar span { display: inline-block; animation: pf-pulse-l 1.8s ease-in-out infinite; }
@keyframes pf-pulse-l { 0%, 100% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.18); color: var(--nfx, var(--accent)); text-shadow: 0 0 14px var(--nfx, var(--accent)); } }
.fx-virar span { display: inline-block; animation: pf-flipl 3.2s ease-in-out infinite; backface-visibility: visible; }
@keyframes pf-flipl { 0%, 70%, 100% { transform: rotateY(0); } 80% { transform: rotateY(180deg); color: var(--nfx, var(--accent)); } 90% { transform: rotateY(360deg); } }
.fx-letreiro { overflow: hidden; white-space: nowrap; max-width: 100%; min-width: 0; contain: inline-size; align-self: stretch; justify-self: stretch; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-letreiro .mq { display: inline-flex; animation: pf-marquee 7s linear infinite; }
@keyframes pf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fx-holografico { background: linear-gradient(120deg, #ff9ff3, #a0e7ff, #c3ffb0, #fff6a5, #ffb5e8, #a0e7ff); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pf-holo 4s ease infinite; filter: drop-shadow(0 0 8px rgba(160, 231, 255, .55)); text-shadow: none !important; }
@keyframes pf-holo { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.fx-cromado { background: linear-gradient(180deg, #fff 0%, #d8d8d8 40%, #6b6b6b 52%, #f1f1f1 60%, #9a9a9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(255, 255, 255, .25)); text-shadow: none !important; }
.has-nfx .fx-cromado { background-image: linear-gradient(180deg, #fff 0%, var(--nfx) 45%, rgba(0, 0, 0, .6) 52%, var(--nfx) 62%, #fff 100%); }
.fx-chamas, .fx-flores { position: relative; }
.fx-chamas .flame { position: absolute; bottom: 30%; width: var(--sz); height: var(--sz); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff6c2, var(--nfx, #ff8a00) 45%, var(--nfx2, #ff2b00) 80%, transparent); filter: blur(.5px); animation: pf-flame 1s ease-out forwards; mix-blend-mode: screen; }
@keyframes pf-flame { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), -46px) scale(.2); } }
.fx-flores .petal { position: absolute; top: 40%; width: var(--sz); height: calc(var(--sz) * .7); border-radius: 80% 0 80% 0; pointer-events: none; background: var(--nfx, #ffb7d0); box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .35); animation: pf-petal 3s ease-in forwards; }
@keyframes pf-petal { from { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), 70px) rotate(260deg); } }

/* fundo em gradiente */
.has-grad { background: linear-gradient(var(--bg-angle), var(--bg), var(--bg2)); }

/* estilos de card */
.cs-vidro .pf-card { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .14) !important; backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px -20px rgba(0, 0, 0, .6) !important; }
.cs-contorno .pf-card { background: transparent !important; backdrop-filter: none !important; border: 1.5px solid rgba(var(--accent-rgb), .7) !important; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .15), inset 0 0 40px -20px rgba(var(--accent-rgb), .6) !important; }
.cs-transparente .pf-card { background: transparent !important; backdrop-filter: none !important; border-color: transparent !important; box-shadow: none !important; }
.cs-aurora .pf-card { background: linear-gradient(140deg, rgba(var(--accent-rgb), .22), rgba(var(--card-rgb), var(--card-a)) 45%, rgba(var(--accent-rgb), .12)) !important; background-size: 200% 200% !important; animation: pf-aurora-card 9s ease-in-out infinite; }
@keyframes pf-aurora-card { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
.cs-holografico .pf-card { background: linear-gradient(125deg, rgba(255, 159, 243, .14), rgba(160, 231, 255, .12), rgba(195, 255, 176, .1), rgba(255, 246, 165, .12)) !important; background-size: 300% 300% !important; animation: pf-holo 8s ease infinite; border: 1px solid rgba(255, 255, 255, .2) !important; }
.L-centro.cs-vidro .pf-card, .L-centro.cs-contorno .pf-card, .L-centro.cs-aurora .pf-card, .L-centro.cs-holografico .pf-card { padding: 30px 28px 24px; border-radius: var(--radius); }

/* bordas novas + cor própria */
.border-girando .pf-card::after { background: conic-gradient(from var(--ang, 0deg), transparent 0 55%, var(--bfx, var(--accent)) 78%, #fff 82%, transparent 92%); }
.border-pulsante .pf-card::after { background: var(--bfx, var(--accent)); }
.border-arco-iris .pf-card::after, .border-neon .pf-card::after, .border-tracejada .pf-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.border-arco-iris .pf-card::after { background: conic-gradient(from var(--ang, 0deg), #ff5e7e, #ffb547, #e8ff6a, #4fe3a5, #5bb8ff, #b48bff, #ff5e7e); animation: pf-spin 4s linear infinite; }
.border-neon .pf-card::after { background: var(--bfx, var(--accent)); filter: drop-shadow(0 0 6px var(--bfx, var(--accent))) drop-shadow(0 0 16px var(--bfx, var(--accent))); animation: pf-flicker 6s infinite; }
.border-tracejada .pf-card { outline: 2px dashed var(--bfx, var(--accent)); outline-offset: 6px; }
.border-tracejada .pf-card::after { display: none; }

/* Elétrica: raios que piscam na borda */
.border-eletrica .pf-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: var(--bfx, var(--accent));
  filter: drop-shadow(0 0 3px var(--bfx, var(--accent))) drop-shadow(0 0 8px var(--bfx, var(--accent)));
  animation: pf-electric 1.6s steps(1) infinite;
}
@keyframes pf-electric {
  0%   { opacity: 1;    clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 3px var(--bfx, var(--accent))) drop-shadow(0 0 10px var(--bfx, var(--accent))) brightness(1.4); }
  8%   { opacity: .15; }
  10%  { opacity: 1;    filter: drop-shadow(0 0 2px var(--bfx, var(--accent))) drop-shadow(0 0 20px var(--bfx, var(--accent))) brightness(2); }
  12%  { opacity: .5; }
  15%  { opacity: 1;    filter: drop-shadow(0 0 4px var(--bfx, var(--accent))) drop-shadow(0 0 14px var(--bfx, var(--accent))) brightness(1.6); }
  40%  { opacity: 1;    filter: drop-shadow(0 0 2px var(--bfx, var(--accent))) drop-shadow(0 0 8px var(--bfx, var(--accent)));  }
  41%  { opacity: .2; }
  43%  { opacity: 1;    filter: drop-shadow(0 0 3px var(--bfx, var(--accent))) drop-shadow(0 0 18px var(--bfx, var(--accent))) brightness(1.9); }
  80%  { opacity: 1;    filter: drop-shadow(0 0 3px var(--bfx, var(--accent))) drop-shadow(0 0 10px var(--bfx, var(--accent))); }
  82%  { opacity: .3; }
  84%  { opacity: 1;    filter: drop-shadow(0 0 2px var(--bfx, var(--accent))) drop-shadow(0 0 22px var(--bfx, var(--accent))) brightness(2.1); }
  100% { opacity: 1;    filter: drop-shadow(0 0 3px var(--bfx, var(--accent))) drop-shadow(0 0 10px var(--bfx, var(--accent))); }
}

/* Brilho suave: halo difuso constante */
.border-brilho-suave .pf-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: var(--bfx, var(--accent));
  filter: drop-shadow(0 0 8px var(--bfx, var(--accent))) drop-shadow(0 0 20px var(--bfx, var(--accent)));
  animation: pf-softglow 3s ease-in-out infinite;
}
@keyframes pf-softglow {
  0%, 100% { opacity: .75; filter: drop-shadow(0 0 6px var(--bfx, var(--accent))) drop-shadow(0 0 16px var(--bfx, var(--accent))); }
  50%       { opacity: 1;   filter: drop-shadow(0 0 10px var(--bfx, var(--accent))) drop-shadow(0 0 28px var(--bfx, var(--accent))); }
}

.L-centro.border-arco-iris .pf-card::after, .L-centro.border-neon .pf-card::after { inset: -24px -28px; border-radius: 24px; }

/* texturas novas */
.ov-crt .pf-ov { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .7) 100%), repeating-linear-gradient(to bottom, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); animation: pf-crt 0.12s steps(2) infinite; }
@keyframes pf-crt { 50% { opacity: .9; } }
.ov-crt .pf-card { text-shadow: 1px 0 rgba(255, 0, 60, .35), -1px 0 rgba(0, 200, 255, .35); }
/* ov-cyberpunk: usa transform:translate no pseudo-elemento em vez de background-position
   para que a animação rode na GPU sem forçar repaint a cada frame. */
.ov-cyberpunk .pf-ov { background: linear-gradient(transparent 60%, rgba(var(--accent-rgb), .18)); mix-blend-mode: screen; overflow: hidden; }
.ov-cyberpunk .pf-ov::before {
  content: ''; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb), .12) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(0, 220, 255, .08) 0 1px, transparent 1px 60px);
  background-size: 60px 100%, 100% 60px;
  will-change: transform;
  animation: pf-cyber 8s linear infinite; }
@keyframes pf-cyber { to { transform: translate(60px, 60px); } }
.ov-cruzes .pf-ov { background-image: radial-gradient(circle, transparent 0, transparent 100%); }
.ov-cruzes .pf-ov::before, .ov-cruzes .pf-ov::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
  background-size: 1px 9px, 9px 1px; background-repeat: no-repeat;
  background-position: 20% 30%, calc(20% - 4px) calc(30% + 4px); }
.ov-cruzes .pf-ov { background-image:
  linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
  linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
  linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 2px 14px, 14px 2px, 2px 10px, 10px 2px, 2px 12px, 12px 2px; background-repeat: no-repeat;
  background-position: 12% 22%, calc(12% - 6px) calc(22% + 6px), 82% 18%, calc(82% - 4px) calc(18% + 4px), 70% 78%, calc(70% - 5px) calc(78% + 5px);
  animation: pf-cross 2.4s steps(1) infinite; }
.ov-cruzes .pf-ov::before, .ov-cruzes .pf-ov::after { background-position: 30% 70%, calc(30% - 4px) calc(70% + 4px); animation: pf-cross 1.7s steps(1) infinite reverse; }
.ov-cruzes .pf-ov::after { background-position: 90% 55%, calc(90% - 4px) calc(55% + 4px); animation-duration: 2.9s; }
@keyframes pf-cross { 0%, 45% { opacity: 1; } 46%, 60% { opacity: 0; } 61% { opacity: .7; } }
.ov-cor .pf-ov { background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05) 50%, rgba(var(--accent-rgb), .25)); mix-blend-mode: color; }
.ov-poeira .pf-ov { background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 30% 80%, rgba(255, 255, 255, .4), transparent), radial-gradient(1px 1px at 60% 40%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 85% 70%, rgba(255, 255, 255, .45), transparent), radial-gradient(2px 2px at 75% 15%, rgba(255, 255, 255, .3), transparent), radial-gradient(1px 1px at 45% 60%, rgba(255, 255, 255, .4), transparent);
  background-size: 300px 300px; animation: pf-dust 30s linear infinite; }
@keyframes pf-dust { to { background-position: 300px -300px, -300px 300px, 300px 300px, -300px -300px, 300px 0, 0 300px; } }

/* tela de entrada: cor, desfoque e estilos novos */
.pf-gate { backdrop-filter: blur(var(--gate-blur, 22px)); -webkit-backdrop-filter: blur(var(--gate-blur, 22px)); }
.pf-gate { color: var(--gfx, #fff); }
.pf-gate span { text-shadow: 0 0 14px rgba(var(--gfx-rgb, 255, 255, 255), .45); }
.gate-glitch span::before { color: var(--gfx, #ff2e63); }
.gate-neon .gate-t { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--gfx, var(--accent)), 0 0 28px var(--gfx, var(--accent)), 0 0 52px var(--gfx, var(--accent)); animation: pf-flicker 4s infinite; }
.gate-pulso .gate-t { animation: pf-heart 1.3s ease-in-out infinite; }
@keyframes pf-heart { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 28% { transform: scale(1.04); } }
.gate-piscando .gate-t { animation: pf-flash 1.4s steps(1) infinite; }

/* saída da tela de entrada (transições) */
.pf-gate.out { transition: opacity .7s, transform .8s cubic-bezier(.7, 0, .3, 1), clip-path .8s cubic-bezier(.7, 0, .3, 1), filter .7s, backdrop-filter .7s; }
.exit-aproximar .pf-gate.out { transform: scale(1.6); }
.exit-subir .pf-gate.out { transform: translateY(-100%); opacity: 1; }
.exit-cortina .pf-gate.out { clip-path: inset(0 50% 0 50%); opacity: 1; }
.exit-desfocar .pf-gate.out { filter: blur(20px); }
.exit-desligar-tv .pf-gate.out { animation: pf-tvoff .55s cubic-bezier(.7, 0, .3, 1) forwards; opacity: 1; }
@keyframes pf-tvoff { 0% { transform: scale(1, 1); filter: brightness(1); } 45% { transform: scale(1, .006); filter: brightness(4); } 75% { transform: scale(.4, .006); filter: brightness(6); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }
.exit-desligar-tv.is-in .pf-card, .exit-cortina.is-in .pf-card { animation-delay: .25s; }

/* ===== banner sempre do tamanho exato do card (cartão e moderno) ===== */
.L-cartao .pf-card { --pt: 30px; --px: 28px; padding: var(--pt) var(--px) 24px; }
.L-moderno .pf-card { --pt: 26px; --px: 28px; padding: var(--pt) var(--px) 18px; }
.L-cartao .pf-banner, .L-moderno .pf-banner {
  margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 0; width: auto; max-width: none;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.L-moderno .pf-banner { margin-bottom: 18px; }
@container pf (max-width: 600px) {
  .L-cartao .pf-card { --pt: 26px; --px: 18px; padding: var(--pt) var(--px) 20px; }
  .L-moderno .pf-card { --pt: 24px; --px: 18px; padding: var(--pt) var(--px) 16px; }
}

/* denunciar perfil */
.pf-report { position: absolute; right: 14px; bottom: 14px; z-index: 30; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(15, 15, 17, .45); color: rgba(255, 255, 255, .45); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color .15s, background .15s; }
.pf:not(.is-preview) .pf-report { position: fixed; }
.pf-report:hover, .pf-report:focus-visible { color: #fff; background: rgba(15, 15, 17, .8); }
.pf-report svg { width: 15px; height: 15px; }
.pf-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 14px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pf-modal-box { width: min(440px, 100%); max-height: calc(100dvh - 28px); overflow: auto; display: grid; gap: 12px; padding: 20px; border-radius: 18px; background: #121114; border: 1px solid rgba(255, 255, 255, .1); color: #fff; font: 14px/1.45 'Outfit', system-ui, sans-serif; text-align: left; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.pf-modal-box h3 { margin: 0; font-size: 18px; font-weight: 600; }
.pf-modal-sub { margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; }
.pf-reasons { display: grid; gap: 4px; }
.pf-reasons label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.pf-reasons label:hover { background: rgba(255, 255, 255, .05); }
.pf-reasons input { accent-color: var(--accent); }
.pf-field { display: grid; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.pf-field textarea { resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: #0b0a0c; color: #fff; font: inherit; }
.pf-modal-err { margin: 0; min-height: 0; color: #ff6b7a; font-size: 13px; }
.pf-modal-err:empty { display: none; }
.pf-modal-err a { color: #fff; }
.pf-modal-acts { display: flex; justify-content: flex-end; gap: 8px; }
.pf-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: 600 14px 'Outfit', sans-serif; cursor: pointer; }
.pf-btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .15); }
.pf-btn:disabled { opacity: .6; cursor: default; }

/* ===================== HIGHLIGHTS, RELÓGIO, STACK, PROJETOS, SETUP ===================== */
.pf-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin-top: 18px;
  width: 100%;
}
.pf-highlights .pf-discord {
  grid-column: 1 / -1;
  margin-top: 0;
}
.pf-loc-card, .pf-clock {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(var(--text-rgb), .05);
  border: 1px solid rgba(var(--text-rgb), .07);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: transform .2s, border-color .2s;
}
.pf-loc-card:hover, .pf-clock:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), .35);
}
.loc-label, .clock-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(var(--text-rgb), .6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.loc-label svg, .clock-label svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.loc-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock-time {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: .02em;
}
.clock-date {
  font-size: 12px;
  color: rgba(var(--text-rgb), .65);
  font-weight: 500;
}

/* interações da prévia: × para remover, alça para arrastar e reordenar */
.pf-hl-card { position: relative; }
.pf-hl-card .pf-hl-x {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; opacity: 1; transition: background .15s;
}
.pf-hl-card .pf-hl-x:hover { background: #b91c1c; }
.pf-hl-card .pf-hl-x svg { width: 12px; height: 12px; }
.pf-hl-card .pf-hl-grip {
  position: absolute; top: 6px; left: 6px; z-index: 5;
  width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: rgba(var(--text-rgb), .8);
  cursor: grab; opacity: 1;
}
.pf-hl-card .pf-hl-grip:active { cursor: grabbing; }
.pf-hl-card.pf-hl-dragging { opacity: .55; box-shadow: 0 0 0 2px var(--accent); }
.is-preview .pf-loc-card, .is-preview .pf-clock { transition: transform .2s, border-color .2s; }
.is-preview .pf-loc-card:hover, .is-preview .pf-clock:hover { transform: translateY(-1px); }

/* hora na linha de informações */
.pf-info-clock b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Seções gerais */
.pf-section {
  margin-top: 20px;
  text-align: left;
  width: 100%;
}
.pf-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pf-section-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.pf-section-icon svg {
  width: 16px;
  height: 16px;
}
.pf-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Stack de skills */
.pf-stack {
  padding: 16px;
  border-radius: 14px;
  background: rgba(var(--text-rgb), .05);
  border: 1px solid rgba(var(--text-rgb), .07);
}
.stack-categories {
  display: grid;
  gap: 14px;
}
.stack-cat-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--text-rgb), .75);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.stack-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--text-rgb), .08);
  border: 1px solid rgba(var(--text-rgb), .08);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: background .18s, transform .18s, border-color .18s;
}
.stack-tag:hover {
  background: rgba(var(--text-rgb), .15);
  border-color: rgba(var(--accent-rgb), .35);
  transform: translateY(-2px);
}

/* Projetos */
.proj-grid {
  display: grid;
  gap: 14px;
}
.proj-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 190px;
  border: 1px solid rgba(var(--text-rgb), .1);
  background: rgba(var(--text-rgb), .05);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
}
.proj-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55);
}
.proj-bg {
  position: absolute;
  inset: 0;
}
.proj-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.proj-card:hover .proj-bg img {
  transform: scale(1.04);
}
.proj-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.95) 100%);
}
.proj-info {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  gap: 6px;
}
.proj-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.proj-desc {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.4;
}
.proj-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  transition: filter .15s, transform .15s;
}
.proj-link:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}
.proj-link svg {
  width: 13px;
  height: 13px;
}

/* Setup de periféricos */
.pf-setup {
  padding: 16px;
  border-radius: 14px;
  background: rgba(var(--text-rgb), .05);
  border: 1px solid rgba(var(--text-rgb), .07);
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
  gap: 12px;
}
.setup-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--text-rgb), .05);
  border: 1px solid rgba(var(--text-rgb), .06);
  text-align: center;
  transition: background .18s, transform .18s, border-color .18s;
}
.setup-item:hover {
  background: rgba(var(--text-rgb), .1);
  border-color: rgba(var(--accent-rgb), .35);
  transform: translateY(-2px);
}
.setup-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  background: rgba(var(--text-rgb), .07);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--dim);
}
.setup-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.setup-img svg {
  width: 28px;
  height: 28px;
  color: var(--dim);
}
.setup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.setup-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup-cat {
  font-size: 11px;
  color: rgba(var(--text-rgb), .55);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
}


/* ===================== BLOCOS DO CARD (aba Layout) ===================== */
.pf-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; width: 100%; }
.pf-blk { grid-column: 1 / -1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.pf-blk.w-half { grid-column: auto; }
@container pf (max-width: 360px) { .pf-blk.w-half { grid-column: 1 / -1; } }
.pf-blk > * { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.pf-blk:has(> .pf-discord[hidden]:only-child) { display: none; }
.pf-blk > .pf-loc-card, .pf-blk > .pf-clock { flex: 1; }
.pf-blk.blk-info .pf-info { margin: 0; }
.pf-blk.blk-links .pf-links { margin: 0; }
.L-sleek .pf-blocks { padding: 0 24px; width: auto; }
.L-moderno .blk-info .pf-info { justify-content: flex-start; padding-top: 0; border-top: 0; }
@container pf (max-width: 600px) { .L-moderno .blk-info .pf-info { justify-content: center; } }
.L-sleek .blk-info .pf-info { justify-content: flex-start; }
.loc-val { white-space: normal; overflow-wrap: anywhere; }
.stack-cat-ic { font-style: normal; margin-right: 6px; }

/* Contador preso à tela, independente da altura e das animações do card. */
.pf-count {
  position: fixed; z-index: 35; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--cc, rgba(var(--text-rgb), .8)); opacity: var(--co, 1);
  background: rgba(var(--text-rgb), .06); border: 1px solid rgba(var(--text-rgb), .08);
}
.pf-count svg { width: 15px; height: 15px; flex: none; }
.pf.is-preview > .pf-count { position: absolute; }
.pf-count-emoji { font-style: normal; font-size: 14px; }
.pf-count-lbl { font-weight: 500; opacity: .75; }
.pf-count.pos-bl { left: 14px; bottom: 12px; } .pf-count.pos-br { right: 14px; bottom: 12px; }
.pf-count.pos-tl { left: 14px; top: 12px; } .pf-count.pos-tr { right: 14px; top: 12px; }
.pf:has(> .pf-count.pos-br) > .pf-report { bottom: 52px; }
.pf:has(> .pf-count.pos-tl) > .pf-vol { top: 52px; }
.pf-count.c-neon { color: var(--cc, var(--accent)); background: rgba(var(--cc-rgb, var(--accent-rgb)), .1); border-color: rgba(var(--cc-rgb, var(--accent-rgb)), .55); box-shadow: 0 0 14px rgba(var(--cc-rgb, var(--accent-rgb)), .35), inset 0 0 10px rgba(var(--cc-rgb, var(--accent-rgb)), .15); }
.pf-count.c-vidro { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-count.c-custom { background: rgba(var(--cc-rgb, var(--text-rgb)), .1); border-color: rgba(var(--cc-rgb, var(--text-rgb)), .3); }
.pf-count.nobox { background: none !important; border-color: transparent !important; box-shadow: none !important; padding: 0; height: auto; backdrop-filter: none; }
.pf-count.glow { text-shadow: 0 0 10px var(--cc, var(--accent)); }
.pf-count.glow svg { filter: drop-shadow(0 0 6px var(--cc, var(--accent))); }

/* ===================== BRILHO: cor própria de cada parte + intensidade ===================== */
.glow-name .pf-name { text-shadow: 0 0 calc(16px * var(--gi, 1)) rgba(var(--glow-name-rgb, var(--text-rgb)), min(1, calc(.55 * var(--gi, 1)))); }
.glow-card .pf-card { box-shadow: 0 0 calc(50px * var(--gi, 1)) calc(-8px * var(--gi, 1)) rgba(var(--glow-card-rgb, var(--accent-rgb)), min(1, calc(.55 * var(--gi, 1)))), 0 0 0 1px rgba(var(--glow-card-rgb, var(--accent-rgb)), .3); }
.glow-icons .pf-ico { filter: drop-shadow(0 0 calc(6px * var(--gi, 1)) color-mix(in srgb, var(--glow-icons, var(--brand)) 75%, transparent)); }
.glow-icons.mono-icons .pf-ico { filter: drop-shadow(0 0 calc(7px * var(--gi, 1)) color-mix(in srgb, var(--glow-icons, var(--icon)) 75%, transparent)); }
.glow-badges .pf-badge svg { filter: drop-shadow(0 0 calc(5px * var(--gi, 1)) var(--glow-badges, var(--b))); }
.glow-badges .pf-badge.is-img img { filter: drop-shadow(0 0 calc(4px * var(--gi, 1)) var(--glow-badges, rgba(255, 255, 255, .45))); }
.mono-badges .pf-badge { color: var(--badge-color, var(--text)) !important; }
.mono-badges .pf-badge svg { filter: drop-shadow(0 0 calc(4px * var(--gi, 1)) var(--glow-badges, var(--badge-color, rgba(var(--text-rgb), .6)))) !important; }
.mono-badges:not(.glow-badges) .pf-badge svg { filter: none !important; }

/* tipografia, cores extras e sombras */
.pf-name { font-family: var(--sec-name-font, var(--font)); font-size: calc(38px * var(--sec-name-size, var(--name-scale, 1))); font-weight: var(--sec-name-weight, var(--name-weight, 600)); letter-spacing: calc(-.01em + var(--name-ls, 0px)); }
.L-moderno .pf-name { font-size: calc(34px * var(--sec-name-size, var(--name-scale, 1))); }
.L-sleek .pf-name { font-size: calc(28px * var(--sec-name-size, var(--name-scale, 1))); }
@container pf (max-width: 600px) { .pf-name { font-size: calc(32px * var(--sec-name-size, var(--name-scale, 1))); } }
.name-upper .pf-name, .tr-upper .pf-name { text-transform: uppercase; }
.tr-lower .pf-name { text-transform: lowercase; }
.tr-title .pf-name { text-transform: capitalize; }
.dec-under .pf-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.dec-strike .pf-name { text-decoration: line-through; }
.name-italic .pf-name, .sec-name-italic .pf-name { font-style: italic; }
.pf-bio { font-family: var(--sec-bio-font, var(--font)); font-size: calc(15.5px * var(--sec-bio-size, var(--bio-scale, 1))); font-weight: var(--sec-bio-weight, inherit); }
.sec-bio-italic .pf-bio { font-style: italic; }
.has-bio-color .pf-bio { color: var(--bio-color); }
/* nome em gradiente (cor do nome -> segunda cor) */
.has-name-grad .pf-name { background: linear-gradient(90deg, var(--name-color, var(--text)), var(--name2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* contorno do texto no nome */
.has-outline .pf-name { -webkit-text-stroke: var(--name-outline, 0) var(--name-outline-color, rgba(0, 0, 0, .55)); }
/* sombra do texto no nome (combina com o brilho, se os dois estiverem ligados) */
.nsh-soft .pf-name { text-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.nsh-strong .pf-name { text-shadow: 0 3px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .7); }
.glow-name.nsh-soft .pf-name { text-shadow: 0 0 calc(16px * var(--gi, 1)) rgba(var(--glow-name-rgb, var(--text-rgb)), min(1, calc(.55 * var(--gi, 1)))), 0 2px 6px rgba(0, 0, 0, .55); }
.glow-name.nsh-strong .pf-name { text-shadow: 0 0 calc(16px * var(--gi, 1)) rgba(var(--glow-name-rgb, var(--text-rgb)), min(1, calc(.55 * var(--gi, 1)))), 0 3px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .7); }
/* fonte das integrações por seção + fundo dos cards internos (Discord, casamento, contador de dias…) */
.pf-loc-card, .pf-clock, .pf-discord, .pf-marriage, .pf-daycounter { font-family: var(--sec-int-font, var(--font)); }
.sec-int-italic .pf-loc-card, .sec-int-italic .pf-clock, .sec-int-italic .pf-discord, .sec-int-italic .pf-marriage, .sec-int-italic .pf-daycounter { font-style: italic; }
.has-intbg .pf-loc-card, .has-intbg .pf-clock, .has-intbg .pf-discord, .has-intbg .pf-marriage, .has-intbg .pf-daycounter .day-item { background: rgba(var(--int-rgb), var(--int-a, .1)); }
.has-border-color.L-cartao .pf-card, .has-border-color.L-moderno .pf-card, .has-border-color.L-sleek .pf-card { border-color: rgba(var(--border-rgb), max(var(--border-a), .35)); }
.sh-avatar .pf-av img, .sh-avatar .pf-initial { box-shadow: 0 14px 36px -6px rgba(0, 0, 0, .85), 0 0 0 2px rgba(var(--text-rgb), .1); }
.sh-card .pf-card { box-shadow: 0 40px 90px -16px rgba(0, 0, 0, .8) !important; }
.sh-card.glow-card .pf-card { box-shadow: 0 0 calc(50px * var(--gi, 1)) calc(-8px * var(--gi, 1)) rgba(var(--glow-card-rgb, var(--accent-rgb)), .55), 0 40px 90px -16px rgba(0, 0, 0, .8) !important; }

/* ===================== EDIÇÃO NA PRÉVIA DO PAINEL ===================== */
.is-editable .pf-blk, .is-editable .pf-info [data-hl], .is-editable .pf-count { cursor: pointer; }
.is-editable .pf-blk { border-radius: 14px; outline: 1px dashed transparent; outline-offset: 4px; transition: outline-color .15s; }
.is-editable .pf-blk:hover { outline-color: rgba(var(--accent-rgb), .45); }
.is-editable .pf-blk.is-sel { outline: 2px solid var(--accent); }
.is-editable .pf-info [data-hl] { position: relative; border-radius: 6px; }
.is-editable .pf-info [data-hl]:hover, .is-editable .pf-count:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .5); }
.is-editable .is-sel:not(.pf-blk) { box-shadow: 0 0 0 2px var(--accent); }
.pf-blk.is-drag { opacity: .5; }
.pf-edit-bar {
  position: absolute; z-index: 30; top: -14px; right: 6px; display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 10px; background: #111014; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
  font: 500 12px 'Outfit', system-ui, sans-serif; color: #fff; cursor: default;
}
.pf-info .pf-edit-bar, .pf-count .pf-edit-bar { top: -32px; right: 50%; transform: translateX(50%); }
.pf-edit-bar button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: #e4e4e7; cursor: pointer; }
.pf-edit-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.pf-edit-bar button:disabled { opacity: .3; cursor: default; }
.pf-edit-bar button[data-act=remove] { color: #ff6b7a; }
.pf-edit-bar button[data-act=remove]:hover { background: #b91c1c; color: #fff; }
.pf-edit-bar button svg { width: 15px; height: 15px; }
.pf-edit-bar button b { font-size: 13px; font-weight: 700; }
.pf-edit-grip { width: 22px; height: 26px; display: grid; place-items: center; cursor: grab; color: #a1a1aa; font-size: 15px; touch-action: none; }
.pf-edit-grip:active { cursor: grabbing; }
/* caixinha atrás de cada rede */
.link-box .links-icones { gap: 8px; }
.link-box .links-icones .pf-link { padding: 9px; background: rgba(var(--text-rgb), .07); border: 1px solid rgba(var(--text-rgb), .1); }
.link-box .links-icones .pf-link:hover { background: rgba(var(--text-rgb), .12); border-color: rgba(var(--accent-rgb), .45); }
.link-box .links-icones .pf-ico { width: 26px; height: 26px; }
/* letreiro: o nome rola dentro da largura do card, sem empurrar o layout */
.pf-id:has(.fx-letreiro) { flex: 1 1 auto; min-width: 0; align-self: stretch; }
.pf-namerow:has(.fx-letreiro) { align-self: stretch; min-width: 0; max-width: 100%; }
.pf-namerow > .fx-letreiro { flex: 1 1 auto; }

/* ---------- galeria ---------- */
.pf-gallery .gal-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.pf-gallery .gal-grid.gal-n1 { grid-template-columns: 1fr; }
.pf-gallery .gal-grid.gal-n2 { grid-template-columns: repeat(2, 1fr); }
.pf-gallery .gal-grid.gal-n4 { grid-template-columns: repeat(2, 1fr); }
.pf-gallery .gal-item { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, .04); border: 1px solid var(--pf-line, rgba(255, 255, 255, .08)); }
.pf-gallery .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
a.gal-item:hover img { transform: scale(1.05); }
.pf-gallery .gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 7px; font-size: 12.5px; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); line-height: 1.25; }
@media (max-width: 420px) { .pf-gallery .gal-grid, .pf-gallery .gal-grid.gal-n4 { grid-template-columns: repeat(2, 1fr); } }

/* menção na bio ({{@nome}}) e bandeira do país */
.pf-bio .bio-mention { color: var(--accent); font-weight: 600; text-decoration: none; }
.pf-bio .bio-mention:hover { text-decoration: underline; }
.pf-info-flag { display: inline-flex; align-items: center; gap: 5px; }
.pf-info-flag .pf-flag { font-size: 15px; line-height: 1; }

/* ---------- casamento ---------- */
.pf-marriage { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .08); text-decoration: none; color: var(--text); transition: transform .2s, border-color .2s; text-align: left; width: 100%; }
.pf-marriage:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .4); }
.pf-marriage .mar-emoji { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .5)); flex: none; }
.pf-marriage .mar-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: rgba(var(--text-rgb), .1); display: grid; place-items: center; border: 2px solid rgba(var(--accent-rgb), .5); }
.pf-marriage .mar-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-marriage .mar-ini { font-weight: 700; font-size: 18px; color: var(--text); }
.pf-marriage .mar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-marriage .mar-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-marriage .mar-sub { font-size: 12.5px; color: rgba(var(--text-rgb), .72); }
.pf-marriage .mar-sub b { color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-marriage .mar-date { font-size: 11px; color: rgba(var(--text-rgb), .45); }

/* ---------- contador de dias ---------- */
.pf-daycounter .day-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); }
.pf-daycounter .day-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 12px 10px; border-radius: 12px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .08); }
.pf-daycounter .day-emoji { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.pf-daycounter .day-count { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.pf-daycounter .day-unit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(var(--text-rgb), .55); }
.pf-daycounter .day-label { font-size: 13px; font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }
.pf-daycounter .day-sub { font-size: 11px; color: rgba(var(--text-rgb), .45); }

/* ===================== animação de revelação (elementos entram em sequência) ===================== */
.pf-reveal .pf-head, .pf-reveal .pf-bio, .pf-reveal .pf-blk { opacity: 0; }
.pf-reveal.is-in .pf-head, .pf-reveal.is-in .pf-bio, .pf-reveal.is-in .pf-blk { animation: pf-reveal-in .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--rd, 0s); }
@keyframes pf-reveal-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* ===================== card pulsa no ritmo da música ===================== */
.pf-pulse .pf-card { filter: drop-shadow(0 0 calc(46px * var(--beat, 0)) rgba(var(--accent-rgb), calc(.6 * var(--beat, 0)))); will-change: filter; }
.pf-pulse .pf-av { transform: scale(var(--beat-s, 1)); transition: transform .05s linear; }

/* ===================== LAYOUT: ESQUERDA ===================== */
/* Card de vidro + tudo alinhado à esquerda */
.L-esquerda .pf-card {
  padding: 30px 28px 24px;
  background: rgba(var(--card-rgb), var(--card-a));
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  border: 1px solid rgba(var(--text-rgb), var(--border-a));
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
  text-align: left;
}
.L-esquerda .pf-head { align-items: flex-start; }
.L-esquerda .pf-namerow { justify-content: flex-start; }
.L-esquerda .pf-bio, .L-esquerda .pf-type { text-align: left; }
.L-esquerda .pf-links { justify-content: flex-start; }
.L-esquerda .links-icones { justify-content: flex-start; }
.L-esquerda .pf-info { justify-content: flex-start; }
.L-esquerda .pf-blocks { text-align: left; }
.L-esquerda .pf-int { justify-content: flex-start; }
.L-esquerda .pf-blk-title { text-align: left; }
.L-esquerda .pf-marriage { text-align: left; }
/* mantém pad-b/t iguais ao cartão para o contador de visitas */
.L-esquerda .pf-card { --pad-b: 24px; --pad-t: 30px; }
@container pf (max-width: 600px) {
  .L-esquerda .pf-card { padding: 26px 18px 20px; --pt: 26px; --px: 18px; }
}
/* glow e bordas animadas herdam do cartão */
.L-esquerda.border-girando .pf-card::after, .L-esquerda.border-pulsante .pf-card::after { inset: -24px -28px; border-radius: 24px; }
.L-esquerda.border-arco-iris .pf-card::after, .L-esquerda.border-neon .pf-card::after { inset: -24px -28px; border-radius: 24px; }
.has-border-color.L-esquerda .pf-card { border-color: rgba(var(--border-rgb), max(var(--border-a), .35)); }
/* banner */
.L-esquerda .pf-card { --pt: 30px; --px: 28px; }
.L-esquerda .pf-banner {
  margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) 0; width: auto; max-width: none;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.L-esquerda.has-banner .pf-head { margin-top: 18px; }

/* ===================== LAYOUT: TERMINAL ===================== */
/* Janela de terminal: barra de título com 3 bolinhas, fonte mono, alinhamento esquerdo */
.L-terminal .pf-card {
  width: min(480px, 100%);
  padding: 0 0 22px;
  text-align: left;
  background: rgba(11, 14, 19, .96);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  border: 1px solid rgba(var(--text-rgb), .12);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255,255,255,.04);
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}
/* barra de título com bolinhas via gradiente (sem ::before para não conflitar com efeitos) */
.L-terminal .pf-stage::before {
  display: none; /* placeholder — a barra é desenhada pelo pseudo abaixo */
}
.L-terminal .pf-card::before {
  content: '';
  display: block;
  height: 38px;
  background:
    /* vermelho */ radial-gradient(circle 6px at 20px 19px, #ff5f56 100%, transparent 100%),
    /* amarelo */ radial-gradient(circle 6px at 40px 19px, #ffbd2e 100%, transparent 100%),
    /* verde */   radial-gradient(circle 6px at 60px 19px, #27c93f 100%, transparent 100%),
    /* fundo da barra */ linear-gradient(rgba(255,255,255,.04) 0%, rgba(255,255,255,.04) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  flex-shrink: 0;
}
.L-terminal .pf-head { padding: 18px 24px 0; align-items: flex-start; }
.L-terminal .pf-namerow { justify-content: flex-start; }
/* prompt verde antes do nome */
.L-terminal .pf-name::before { content: '~/'; color: var(--accent); font-size: .65em; font-weight: 400; opacity: .8; }
.L-terminal .pf-bio, .L-terminal .pf-type { text-align: left; margin: 0 24px; font-size: 13px; line-height: 1.7; color: rgba(var(--text-rgb), .8); }
.L-terminal .pf-bio::before { content: '# '; color: var(--accent); opacity: .6; font-size: .85em; }
.L-terminal .pf-links, .L-terminal .pf-discord, .L-terminal .pf-music { margin-left: 24px; margin-right: 24px; }
.L-terminal .links-icones { justify-content: flex-start; }
.L-terminal .pf-info { justify-content: flex-start; margin: 12px 24px 0; }
.L-terminal .pf-blocks { padding: 0 24px; width: auto; }
.L-terminal .pf-blk-title { text-align: left; }
.L-terminal .pf-int { justify-content: flex-start; }
.L-terminal .pf-marriage { text-align: left; }
/* remove padding do cartão de vidro; usa pad-b para contador de visitas */
.L-terminal .pf-card { --pad-b: 22px; }
/* borda neon e efeitos de borda herdam corretamente */
.L-terminal.border-girando .pf-card::after, .L-terminal.border-pulsante .pf-card::after { inset: 0; }
.L-terminal.border-arco-iris .pf-card::after, .L-terminal.border-neon .pf-card::after { inset: 0; }
.has-border-color.L-terminal .pf-card { border-color: rgba(var(--border-rgb), max(var(--border-a), .35)); }
@container pf (max-width: 600px) {
  .L-terminal .pf-card { font-size: 13px; }
  .L-terminal .pf-head, .L-terminal .pf-bio, .L-terminal .pf-type,
  .L-terminal .pf-links, .L-terminal .pf-info, .L-terminal .pf-blocks { padding-left: 16px; padding-right: 16px; margin-left: 0; margin-right: 0; }
  .L-terminal .pf-blocks { padding: 0 16px; }
}


/* ===================== LAYOUT: COMPACTO ===================== */
.L-compacto .pf-card {
  padding: 18px 20px;
}
.L-compacto .pf-head {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.L-compacto .pf-av {
  width: 72px !important;
  height: 72px !important;
  flex: none;
}
.L-compacto .pf-id {
  align-items: flex-start;
}
.L-compacto .pf-namerow { justify-content: flex-start; }
.L-compacto .pf-bio {
  text-align: left;
  margin-top: 10px;
}
/* border effect override */
.L-compacto .pf-card::after { display: none !important; }

/* ===================== LAYOUT: BANNER ===================== */
.L-banner .pf-card {
  padding: 0;
  overflow: hidden;
}
.L-banner .pf-banner {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  /* o card tem padding 0: sem margem negativa, o banner fica contido no card */
  margin: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.L-banner .pf-banner-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--brand) 0%, transparent 100%);
  opacity: .35;
}
.L-banner .pf-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px 8px;
  margin-top: -50px;
  position: relative;
}
.L-banner .pf-av {
  width: 100px !important;
  height: 100px !important;
  box-shadow: 0 4px 16px #0008;
}
.L-banner .pf-links-wrap { padding: 0 16px 20px; }
.L-banner .pf-bio { padding: 0 16px; text-align: center; }
/* border effect override */
.L-banner .pf-card::after { display: none !important; }

/* ===================== LAYOUT: INGRESSO ===================== */
.L-ingresso .pf-card {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.L-ingresso .pf-card::before {
  content: '× INGRESSO × BILHETE × TICKET ×';
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  opacity: .9;
}
.L-ingresso .pf-head {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px 20px 12px;
}
.L-ingresso .pf-av {
  width: 72px !important;
  height: 72px !important;
  flex: none;
}
.L-ingresso .pf-id { align-items: flex-start; }
.L-ingresso .pf-namerow { justify-content: flex-start; }
.L-ingresso .pf-bio {
  text-align: left;
  margin: 0 20px 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
}
.L-ingresso .pf-card::after {
  content: '';
  display: block;
  height: 20px;
  background: radial-gradient(circle at 50% 0, var(--bg, #18181b) 6px, transparent 6px) repeat-x;
  background-size: 20px 20px;
  position: static;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
  opacity: 1;
  pointer-events: none;
  bottom: auto;
  inset: auto;
}
.L-ingresso .pf-links-wrap { padding: 0 16px 6px; }

/* ===================== LAYOUT: RETRO (Desktop 95) ===================== */
.L-retro .pf-card {
  background: #c0c0c0 !important;
  border-radius: 0 !important;
  border: 2px solid #fff !important;
  box-shadow: inset -2px -2px #808080, inset 2px 2px #dfdfdf, 4px 4px 0 #000 !important;
  padding: 0;
  overflow: hidden;
}
.L-retro .pf-card::before {
  content: '■ Perfil de Usuário';
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background: #000080;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  letter-spacing: .02em;
}
.L-retro .pf-card::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 8px;
  width: 54px;
  height: 14px;
  background:
    linear-gradient(#c0c0c0,#c0c0c0) 0 0/16px 14px no-repeat,
    linear-gradient(#c0c0c0,#c0c0c0) 19px 0/16px 14px no-repeat,
    linear-gradient(#c0c0c0,#c0c0c0) 38px 0/16px 14px no-repeat;
  border-width: 1px; border-style: solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1;
  pointer-events: none;
}
.L-retro .pf-head {
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 14px 8px;
  gap: 10px;
}
.L-retro .pf-av {
  border-radius: 0 !important;
  border: 2px inset #808080 !important;
}
.L-retro .pf-name, .L-retro .pf-bio {
  font-family: 'Courier New', monospace;
  color: #000 !important;
}
.L-retro .pf-bio { padding: 0 14px 10px; text-align: left; }
.L-retro .pf-links-wrap { padding: 0 12px 12px; }
.L-retro .pf-link {
  border-radius: 0 !important;
  border: 2px solid !important;
  border-color: #fff #808080 #808080 #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
}
.L-retro .pf-link:hover { border-color: #808080 #fff #fff #808080 !important; }

/* ===================== LAYOUT: PASSAPORTE ===================== */
.L-passaporte .pf-card {
  padding: 0;
  overflow: hidden;
  background: #1e3a8a !important;
}
.L-passaporte .pf-card::before {
  content: 'PERFIL DE USUÁRIO  ◆  USER PROFILE  ◆  PROFIL';
  display: block;
  padding: 10px 16px;
  background: #0a2463;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
}
.L-passaporte .pf-head {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px 12px;
  text-align: left;
}
.L-passaporte .pf-av {
  width: 82px !important;
  height: 104px !important;
  border-radius: 4px !important;
  flex: none;
}
.L-passaporte .pf-id { align-items: flex-start; }
.L-passaporte .pf-namerow { justify-content: flex-start; }
.L-passaporte .pf-bio {
  text-align: left;
  margin: 0 20px 10px;
  font-size: .8em;
  opacity: .75;
}
.L-passaporte .pf-card::after {
  content: '';
  display: block;
  position: static;
  width: 100%;
  height: 36px;
  background: #f5f0e8;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1;
  pointer-events: none;
  margin-top: 8px;
}
.L-passaporte .pf-links-wrap { padding: 0 16px 16px; }

/* responsive overrides for all new layouts */
@container pf (max-width: 360px) {
  .L-compacto .pf-av { width: 56px !important; height: 56px !important; }
  .L-banner .pf-banner, .L-banner .pf-banner-placeholder { height: 140px; }
  .L-ingresso .pf-av { width: 56px !important; height: 56px !important; }
  .L-passaporte .pf-av { width: 64px !important; height: 82px !important; }
}

/* ===================== TAMANHO DOS ÍCONES ===================== */
/* Tamanhos: sm=22px  md=32px(padrão)  lg=40px  xl=50px */
:root { --ics-sm:22px; --ics-md:32px; --ics-lg:40px; --ics-xl:50px; }

/* ===================== FORMA E TAMANHO DO AVATAR ===================== */
/* Tamanhos: sm=72px  md=112px(padrão)  lg=140px  xl=170px */
:root { --avs-sm:72px; --avs-md:112px; --avs-lg:140px; --avs-xl:170px; }

/* aplicar tamanho quando a classe está no pf-stage */
.av-sm .pf-av { width: 72px;  height: 72px;  }
.av-lg .pf-av { width: 140px; height: 140px; }
.av-xl .pf-av { width: 170px; height: 170px; }
/* layout moderno tem tamanho próprio — respeitar */
.L-moderno.av-sm .pf-av { width: 72px;  height: 72px;  }
.L-moderno.av-lg .pf-av { width: 140px; height: 140px; }
.L-moderno.av-xl .pf-av { width: 170px; height: 170px; }

/* === FORMAS === */
/* padrão (circle): controlado por --av-radius existente */

/* quadrado */
.av-square .pf-av img,
.av-square .pf-initial { border-radius: 12px !important; }

/* squircle: raio grande que cria o "super-elipse" */
.av-squircle .pf-av img,
.av-squircle .pf-initial { border-radius: 35% !important; }

/* hexágono: clip-path em vez de border-radius */
.av-hexagon .pf-av img,
.av-hexagon .pf-initial {
  border-radius: 0 !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* a decoração de avatar (deco) deve seguir a mesma forma */
.av-square .pf-deco   { border-radius: 12px !important; }
.av-squircle .pf-deco { border-radius: 35% !important; }
.av-hexagon .pf-deco  { border-radius: 0 !important; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* ===================== FILTROS DE AVATAR ===================== */
/* SVG inline filter para efeito dithered (pontilhado B&W) — referenciado via url(#dither-filter) */
.avf-dithered .pf-av img,
.avf-dithered .pf-initial {
  filter: grayscale(1) contrast(1.2) url(#pf-dither);
}
.avf-pb .pf-av img,
.avf-pb .pf-initial {
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}
.avf-sepia .pf-av img,
.avf-sepia .pf-initial {
  filter: sepia(0.85) contrast(1.05);
}
.avf-neon .pf-av img,
.avf-neon .pf-initial {
  filter: saturate(2.5) hue-rotate(10deg) contrast(1.2) brightness(1.1) drop-shadow(0 0 8px var(--accent));
}

/* ===================== GALERIA COM DESTAQUE ===================== */
.gal-has-featured { grid-template-columns: repeat(3, 1fr); }
.gal-has-featured .gal-featured {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}
@media (max-width: 420px) {
  .gal-has-featured .gal-featured { aspect-ratio: 4 / 3; }
}

/* layout sleek: o ring que envolve o avatar precisa acompanhar a forma */
.L-sleek.av-square .pf-av img,
.L-sleek.av-square .pf-initial   { box-shadow: 0 0 0 5px rgb(var(--card-rgb)), 0 10px 30px -8px rgba(0,0,0,.8); border-radius: 12px !important; }
.L-sleek.av-squircle .pf-av img,
.L-sleek.av-squircle .pf-initial  { box-shadow: 0 0 0 5px rgb(var(--card-rgb)), 0 10px 30px -8px rgba(0,0,0,.8); border-radius: 35% !important; }

/* ===================== LAYOUT DUAS COLUNAS ===================== */
/* No mobile: tudo numa coluna só, igual aos outros layouts */
/* ===================== LAYOUT: DUAS COLUNAS ===================== */
/* Card transparente, sem card visual — as colunas têm seus próprios fundos */
.pf-card-twocol {
  width: 100% !important;        /* sobrescreve width: min(460px, 100%) do .pf-card */
  max-width: 1600px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.pf-card-twocol .pf-bg { display: none; }

/* Stage no modo duas colunas: permite o card se expandir */
.L-duascol .pf-stage {
  padding: 20px 16px;
  align-items: flex-start;
}

/* Mobile (padrão): empilha coluna esquerda em cima, direita embaixo */
.pf-twocol-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Coluna esquerda: card visual */
.pf-twocol-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: rgba(var(--card-rgb), calc(var(--card-opacity) * 0.01));
  backdrop-filter: blur(calc(var(--card-blur) * 1px));
  -webkit-backdrop-filter: blur(calc(var(--card-blur) * 1px));
  border: calc(var(--card-border) * 0.5px) solid rgba(255,255,255,.08);
  border-radius: calc(var(--card-radius) * 1px);
  padding: 24px 20px;
}

.pf-twocol-left .pf-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pf-twocol-left .pf-id { display: flex; flex-direction: column; align-items: center; }
.pf-twocol-left .pf-bio { text-align: center; }
.pf-twocol-left .pf-links { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* Coluna direita: blocos flutuantes */
.pf-twocol-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-twocol-right .pf-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* Cada bloco da direita tem seu próprio card */
.pf-twocol-right .pf-blk {
  background: rgba(var(--card-rgb), calc(var(--card-opacity) * 0.01));
  backdrop-filter: blur(calc(var(--card-blur) * 1px));
  -webkit-backdrop-filter: blur(calc(var(--card-blur) * 1px));
  border: calc(var(--card-border) * 0.5px) solid rgba(255,255,255,.08);
  border-radius: calc(var(--card-radius) * 1px);
  overflow: hidden;
}

/* Desktop (>= 860px): lado a lado */
@container pf (min-width: 812px) {

  .pf-twocol-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(28px, 5cqw, 80px);
  }

  /* Esquerda: sidebar fixa ~280px */
  .pf-twocol-left {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
  }

  /* Direita: ocupa o resto */
  .pf-twocol-right {
    flex: 1;
    min-width: 0;
  }
}

.L-duascol .pf-stage { padding: 64px clamp(16px, 6vw, 96px); }
.is-preview.L-duascol .pf-stage { padding: 24px 14px; }
@media (max-width: 600px) { .L-duascol .pf-stage { padding: 24px 16px; } }
.pf-twocol-left, .pf-twocol-right, .pf-blk { min-width: 0; }
.pf-twocol-left > .pf-blocks, .pf-twocol-right > .pf-blocks { margin-top: 0; }
@container pf (max-width: 811px) {
  .pf-card-twocol .pf-blk.w-half { grid-column: 1 / -1; }
}
.pf-gallery .gal-item.gal-shape-wide { aspect-ratio: 16 / 9; }
.pf-gallery .gal-item.gal-shape-portrait { aspect-ratio: 3 / 4; }
.pf-gallery .gal-item.gal-shape-original { aspect-ratio: auto; align-self: start; }
.pf-gallery .gal-shape-original img { height: auto; }
.pf-gallery .gal-fit-contain img { object-fit: contain; }

/* Tablet intermediário */
@container pf (min-width: 568px) and (max-width: 811px) {
  .pf-twocol-wrap { gap: 14px; }
}

.pf-card-twocol .pf-blk.w-full { width: 100%; }

/* ===================== FORMA E TAMANHO DO AVATAR ===================== */

/* Composição visual em fluxo */
.pf-composition-zone { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; }
.pf-composition-zone:empty { display:none; }
.pf-composition-zone > [data-layout-id] { grid-column:1 / -1; }
.pf-composition-zone > .w-half { grid-column:auto; }
.pf-blocks > [data-layout-id].w-full { grid-column:1 / -1; }
.pf-composed-name { grid-column:1 / -1; }
.pf-composition-zone:not(:empty) { margin-bottom:12px; }
.pf-count.pf-count-inline { position:static !important; inset:auto; translate:none !important; width:max-content; max-width:100%; flex:none; }
.pf-namerow > .pf-count-inline { margin:0 4px; }
.pf-gallery .gal-grid[class] { grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--gallery-size,180px)),1fr)); }
@container pf (min-width:812px) { .profile-right .pf-twocol-wrap { flex-direction:row-reverse; } }
@container pf (max-width:811px) { .pf-composition-zone > .w-half { grid-column:1 / -1; } }
.is-layout-editor [data-layout-id] { cursor:grab; touch-action:none; }
.is-layout-editor .layout-selected { outline:2px solid var(--accent); outline-offset:4px; }
.is-layout-editor .layout-dragging { opacity:.45; cursor:grabbing; }
.is-layout-editor .layout-drop { outline:3px dashed var(--accent); outline-offset:5px; }
.is-layout-editor [data-layout-zone]:empty { display:grid; min-height:36px; border:1px dashed rgba(var(--text-rgb),.18); border-radius:8px; }
.is-layout-editor [data-layout-zone]:empty::after { content:'+'; opacity:.4; align-self:center; }

/* Mesma grade e os mesmos espaços no editor e no perfil público. */
.pf-gallery,.gallery-surface { container-type:inline-size; container-name:gallery; }
.pf-gallery .gal-grid[class],.gallery-board { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:row; align-items:start; }
.pf-gallery .gal-grid[class] > .gal-item,.gallery-board > .gallery-photo { grid-column:span var(--gal-span,4); min-width:0; }
@container gallery (max-width:480px) {
  .pf-gallery .gal-grid[class] > .gal-item,.gallery-board > .gallery-photo { grid-column:span var(--gal-mobile-span,6); }
}

/* Itens livres usam coordenadas do perfil; no celular voltam ao fluxo. */
.pf-relative-group { display:flex; gap:10px; align-items:center; justify-content:center; min-width:0; max-width:100%; grid-column:1 / -1; }
.pf-relative-group.horizontal { flex-direction:row; flex-wrap:wrap; }
.pf-relative-group.vertical { flex-direction:column; }
.pf-relative-group > [data-layout-id] { flex-shrink:0; max-width:100%; }
.pf-relative-group > .pf-blk { flex-shrink:1; }
.pf-free-layer { position:absolute; top:0; left:0; width:100%; z-index:5; pointer-events:none; }
.pf-free-layer > .pf-free-item { position:absolute !important; margin:0 !important; max-width:100%; pointer-events:auto; box-sizing:border-box; }
.pf-free-mobile .pf-free-layer { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 16px 0; }
.pf-free-mobile .pf-free-layer > .pf-free-item { position:relative !important; inset:auto !important; width:auto !important; max-width:100%; }
.pf-free-mobile .pf-free-layer > .pf-blk { width:100% !important; }
.layout-free-ghost { position:absolute; z-index:70; border:2px dashed var(--accent); background:rgba(var(--accent-rgb),.12); border-radius:8px; pointer-events:none; }
.is-layout-editor .layout-drop[data-drop-edge=before] { border-left:4px solid var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=after] { border-right:4px solid var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=above] { border-top:4px solid var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=below] { border-bottom:4px solid var(--accent); }

/* A aparência da foto acompanha a foto quando ela sai da galeria. */
.pf [data-gallery-id] { position:relative; display:block; overflow:hidden; border-radius:12px; aspect-ratio:1; background:rgba(255,255,255,.04); }
.pf [data-gallery-id] img { display:block; width:100%; height:100%; object-fit:cover; }
.pf [data-gallery-id].gal-featured { aspect-ratio:16 / 7; }
.pf [data-gallery-id].gal-shape-wide { aspect-ratio:16 / 9; }
.pf [data-gallery-id].gal-shape-portrait { aspect-ratio:3 / 4; }
.pf [data-gallery-id].gal-shape-original { aspect-ratio:auto; }
.pf [data-gallery-id].gal-shape-original img { height:auto; }
.pf [data-gallery-id].gal-fit-contain img { object-fit:contain; }
.is-layout-editor .layout-drop[data-drop-edge=before] { border-left:0; box-shadow:inset 4px 0 var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=after] { border-right:0; box-shadow:inset -4px 0 var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=above] { border-top:0; box-shadow:inset 0 4px var(--accent); }
.is-layout-editor .layout-drop[data-drop-edge=below] { border-bottom:0; box-shadow:inset 0 -4px var(--accent); }

/* Conteúdo do perfil não força os cards a ultrapassarem a tela. */
.pf-stage,.pf-head,.pf-namerow,.pf-badges,.pf-section,.pf-section-head,.pf-blocks,.pf-links,.pf-info { min-width:0; max-width:100%; }
.pf-card { min-width:0; }
.pf-head > *,.pf-section > *,.pf-section-head > *,.pf-info > span { min-width:0; }
.pf-bio,.pf-type,.pf-info span,.stack-tag,.stack-cat-title,.pf-section-title,.proj-title,.proj-desc,.setup-cat { overflow-wrap:anywhere; }
.stack-tag { min-width:0; max-width:100%; white-space:normal; }
.setup-item,.proj-card { min-width:0; max-width:100%; }
.pf img,.pf video { max-width:100%; }
.pf-link { max-width:100%; min-width:0; }
.pf-link .pf-lbl { min-width:0; overflow-wrap:anywhere; }

/* Tooltips escondidos não devem aumentar a largura rolável do perfil. */
.pf-badge em,.links-icones .pf-link em { display:none; width:max-content; max-width:min(240px,80cqw); white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
.pf-badge:hover em,.pf-badge:focus-visible em,.links-icones .pf-link:hover em,.links-icones .pf-link:focus-visible em { display:block; }

/* Icon links occupy only their icon and stay centered in every profile layout. */
.pf .pf-links.links-icones { flex-direction: row; justify-content: center; align-items: center; }
.pf .links-icones > .pf-link { flex: 0 0 auto; width: max-content; justify-content: center; }

/* Brief welcome highlight for the owner and supporter badges. */
.pf .pf-badge.badge-intro { z-index: 11; }
.pf .pf-badge.badge-intro em[role=tooltip] { display: block; opacity: 1; transform: translate(-50%, 0); border-color: color-mix(in srgb, var(--b) 45%, transparent); box-shadow: 0 4px 20px color-mix(in srgb, var(--b) 18%, transparent); animation: badge-intro-pop .3s ease-out both; }
@keyframes badge-intro-pop { from { opacity: 0; transform: translate(-50%, 5px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pf .pf-badge.badge-intro em[role=tooltip] { animation: none; transition: none; } }

/* Keep the slider collapsed until interaction, including on touch devices. */
@media (hover: none), (pointer: coarse) {
  .pf .pf-vol input { min-height: 28px; touch-action: none; }
  .pf .pf-vol:hover input, .pf .pf-vol:focus-within input { width: 120px; opacity: 1; margin-right: 8px; }
}

/* ── Worlds no perfil: o personagem 3D no cenário do dono (worlds-card.js) ── */
.pf-worlds { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .08); text-align: left; isolation: isolate; }
.pfw-stage { position: relative; width: 100%; aspect-ratio: 16 / 11; background: radial-gradient(120% 90% at 50% 100%, rgba(var(--accent-rgb), .14), transparent 60%), rgba(0, 0, 0, .25); }
.pf-blk.w-half .pfw-stage { aspect-ratio: 4 / 5; }
.pfw-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .6s ease; }
.pf-worlds.is-ready .pfw-stage canvas { opacity: 1; }
.pfw-load { position: absolute; inset: 0; display: grid; place-items: center; }
.pfw-load i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--text-rgb), .18); border-top-color: rgba(var(--accent-rgb), .9); animation: pfw-spin .9s linear infinite; }
@keyframes pfw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pfw-load i { animation: none; } }
.pfw-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); color: #fff; font-size: 12px; pointer-events: none; }
.pfw-tag { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pfw-scene { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfw-pair { margin-left: auto; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; opacity: .92; }
.pfw-pair:hover { opacity: 1; text-decoration: underline; }
.pfw-ph { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 18px 20px 44px; text-align: center; color: var(--text); }
.pfw-ph b { font-size: 15px; }
.pfw-ph span { font-size: 12.5px; opacity: .7; max-width: 300px; margin: 0 auto; line-height: 1.45; }
.pf-blk:has(> .pf-worlds) { min-width: 0; }

/* ---------- like de profil ---------- */
.pf-like { position: absolute; left: 14px; bottom: 14px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(15,15,17,.45); color: rgba(255,255,255,.6); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 13px/1 Outfit, sans-serif; transition: color .15s, background .15s, transform .12s; }
.pf:not(.is-preview) .pf-like { position: fixed; }
.pf-like:hover, .pf-like:focus-visible { color: #ff5c8a; background: rgba(15,15,17,.8); transform: translateY(-1px); }
.pf-like svg { width: 15px; height: 15px; fill: none; }
.pf-like.is-liked { color: #ff5c8a; border-color: rgba(255,92,138,.35); }
.pf-like.is-liked svg { fill: currentColor; }
.pf-like:disabled { opacity: .6; cursor: default; transform: none; }

/* ---------- questions anonymes ---------- */
.pf-qa { padding: 16px 18px; }
.pf-qa-t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--text, #eaf3ff); }
.pf-qa-t svg { width: 16px; height: 16px; opacity: .8; }
.pf-qa-form { display: flex; gap: 8px; }
.pf-qa-in { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); color: inherit; font: 400 13px/1.3 Outfit, sans-serif; outline: none; transition: border-color .15s; }
.pf-qa-in:focus { border-color: var(--accent, #3478FF); }
.pf-qa-send { padding: 10px 14px; border-radius: 10px; border: 0; background: var(--accent, #3478FF); color: #fff; font: 600 13px/1 Outfit, sans-serif; cursor: pointer; transition: filter .15s; }
.pf-qa-send:hover { filter: brightness(1.15); }
.pf-qa-list { margin-top: 14px; display: grid; gap: 10px; }
.pf-qa-item { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.pf-qa-q { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
.pf-qa-a { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.45; }

/* ---------- carte météo ---------- */
.pf-weather { padding: 14px 16px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); display: flex; flex-direction: column; gap: 6px; text-align: left; transition: transform .2s, border-color .2s; }
.pf-weather:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .35); }
.pf-weather .wx-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(var(--text-rgb), .6); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pf-weather .wx-label svg { width: 14px; height: 14px; color: var(--accent); }
.pf-weather .wx-main { display: flex; align-items: center; gap: 10px; }
.pf-weather .wx-icon { font-size: 26px; line-height: 1; }
.pf-weather .wx-temp { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-weather .wx-city { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-weather .wx-desc { font-size: 12px; color: rgba(var(--text-rgb), .65); }
.pf-widget { padding: 14px 16px; border-radius: 14px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); display: flex; flex-direction: column; gap: 8px; text-align: left; text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.pf-widget:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .35); }
.pf-widget .wx-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(var(--text-rgb), .6); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pf-widget .wx-label svg { width: 14px; height: 14px; color: var(--accent); }
.pf-wid-body { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-wid-info { display: flex; flex-direction: column; min-width: 0; }
.pf-wid-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-wid-sub { font-size: 12px; color: rgba(var(--text-rgb), .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-gh-av { width: 42px; height: 42px; border-radius: 50%; flex: none; border: 2px solid rgba(var(--accent-rgb), .4); object-fit: cover; background: rgba(var(--text-rgb), .08); }
.pf-mc-av { height: 52px; width: auto; flex: none; image-rendering: pixelated; }
.pf-wid-stats { display: flex; gap: 10px; font-size: 12px; color: rgba(var(--text-rgb), .65); font-variant-numeric: tabular-nums; }
.pf-wid-stats b, .pf-wid-stats span { color: rgba(var(--text-rgb), .8); }
.pf-fx { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.pf-poll, .pf-gb { padding: 16px 18px; border-radius: 16px; background: rgba(var(--text-rgb), .05); border: 1px solid rgba(var(--text-rgb), .07); display: flex; flex-direction: column; gap: 12px; }
.pf-poll-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.pf-poll-opts { display: flex; flex-direction: column; gap: 8px; }
.pf-poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(var(--text-rgb), .1); background: rgba(var(--text-rgb), .04); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; transition: border-color .15s; }
.pf-poll-opt:hover { border-color: rgba(var(--accent-rgb), .5); }
.pf-poll-t { position: relative; z-index: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(var(--accent-rgb), .18); transition: width .4s ease; }
.pf-poll-p { position: relative; z-index: 1; font-size: 12px; color: rgba(var(--text-rgb), .7); font-variant-numeric: tabular-nums; }
.pf-poll-n { color: rgba(var(--text-rgb), .55); font-size: 11px; }
.pf-gb-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
.pf-gb-item { display: flex; gap: 10px; align-items: flex-start; }
.pf-gb-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; background: rgba(var(--text-rgb), .1); }
.pf-gb-txt { min-width: 0; }
.pf-gb-txt b { font-size: 12px; color: var(--accent); display: block; }
.pf-gb-txt p { margin: 2px 0 0; font-size: 13px; color: var(--text); word-break: break-word; }
.pf-gb-empty { margin: 0; font-size: 12px; color: rgba(var(--text-rgb), .55); text-align: center; padding: 8px; }