/* ===================== 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 ---------- */
.pf-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.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)); }
.pf-fx, .pf-cursor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.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 (↔) ── */
[data-badge-rotate="slide"] .pf-badge.br-out  { animation: br-slide-out .32s cubic-bezier(.4,0,.2,1) forwards; }
[data-badge-rotate="slide"] .pf-badge.br-in   { animation: br-slide-in  .32s cubic-bezier(.4,0,.2,1) forwards; opacity: 1; }
[data-badge-rotate="slide"] .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: 32px; height: 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); }

/* ---------- 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; }

/* ---------- 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; }

/* ---------- 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: #e0162b; 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, #e0162b); 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: #e0162b; }
@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-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; inset: -10%; 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; }
.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 .pf-ov { background:
  linear-gradient(transparent 60%, rgba(var(--accent-rgb), .18)),
  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); mix-blend-mode: screen; animation: pf-cyber 8s linear infinite; }
@keyframes pf-cyber { to { background-position: 0 0, 60px 0, 0 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(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(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 DE VISUALIZAÇÕES (num canto do card) ===================== */
.pf-card.has-count-b { padding-bottom: calc(var(--pad-b, 0px) + 44px); }
.pf-card.has-count-t { padding-top: calc(var(--pad-t, 0px) + 40px); }
.L-cartao .pf-card, .L-moderno .pf-card { --pad-b: 24px; --pad-t: 30px; }
.L-moderno .pf-card { --pad-b: 18px; --pad-t: 26px; }
.L-sleek .pf-card { --pad-b: 22px; }
.L-sleek .pf-card.has-count-t { padding-top: 0; }
.L-sleek .pf-card.has-count-t .pf-count { top: 10px; }
.L-cartao.has-banner .pf-card.has-count-t { padding-top: 30px; }
.pf-count {
  position: absolute; z-index: 6; 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-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; }
.L-centro .pf-count.pos-bl { left: 0; } .L-centro .pf-count.pos-br { right: 0; }
.L-centro .pf-count.pos-tl { left: 0; } .L-centro .pf-count.pos-tr { right: 0; }
.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(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; }
}

/* ===================== BLOCO VALORANT ===================== */
.pf-valorant {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(var(--int-rgb, var(--text-rgb)), var(--int-a, .06));
  border: 1px solid rgba(var(--text-rgb), .1);
  min-height: 60px;
}
.val-game { display: flex; flex-shrink: 0; color: var(--accent); opacity: .7; }
.val-game svg { width: 22px; height: 22px; }
.val-loading, .val-err { font-size: 13px; color: rgba(var(--text-rgb), .45); }
.val-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.val-who { font-size: 13px; font-weight: 600; color: rgba(var(--text-rgb), .55); line-height: 1; }
.val-tag { font-weight: 400; opacity: .6; font-size: 11px; margin-left: 2px; }
.val-rank { display: flex; align-items: center; gap: 8px; }
.val-rank-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.val-rank-name { font-size: 15px; font-weight: 700; color: var(--text); }
.val-rr { font-size: 12px; color: var(--accent); font-weight: 600; }
.val-peak { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.val-peak-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .4; }
.val-peak-img { width: 18px; height: 18px; object-fit: contain; }
.val-peak-name { font-size: 11px; color: rgba(var(--text-rgb), .5); font-weight: 500; }
/* quando intbg está ativo, o bloco valorant já ganha o bg pelo seletor .has-intbg */
.has-intbg .pf-valorant { background: rgba(var(--int-rgb), var(--int-a, .1)); }

/* ===================== 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 */
/* No desktop (>= 860px): avatar + bio + blocos left | blocos right */
.pf-card-twocol { max-width: 1100px; padding: 0; background: transparent !important; box-shadow: none !important; border: none !important; }
.pf-card-twocol .pf-bg { display: none; }

.pf-twocol-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-items: flex-start;
}

.pf-twocol-left {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-twocol-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Coluna esquerda: tem card visual próprio */
.pf-twocol-left {
  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;
}

/* Coluna direita: blocos com seus próprios estilos */
.pf-twocol-right .pf-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Desktop: 2 colunas lado a lado */
@media (min-width: 860px) {
  .pf-card-twocol .pf-stage {
    padding: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .pf-twocol-wrap {
    flex-direction: row;
    gap: 20px;
    max-width: 1100px;
    width: 100%;
  }

  .pf-twocol-left {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
  }

  .pf-twocol-right {
    flex: 1;
    min-width: 0;
  }
}

/* Tablet intermediário */
@media (min-width: 600px) and (max-width: 859px) {
  .pf-card-twocol .pf-stage { padding: 16px; }
  .pf-twocol-wrap { gap: 14px; }
}

/* No layout duas colunas, os blocos do lado direito ficam dentro de cards */
.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;
}

/* Coluna esquerda: cabeçalho centralizado igual aos outros layouts */
.pf-card-twocol .pf-twocol-left .pf-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.pf-card-twocol .pf-twocol-left .pf-id {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pf-card-twocol .pf-twocol-left .pf-bio {
  text-align: center;
}

/* Links na esquerda ficam em coluna */
.pf-card-twocol .pf-twocol-left .pf-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Blocos de largura inteira no modo 2 colunas */
.pf-card-twocol .pf-blk.w-full { width: 100%; }

/* ===== GAMES BLOCK ===== */
.pf-games { width: 100%; }

/* Tab bar */
.games-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 2px;
}
.games-tab {
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  color: rgba(255,255,255,.45);
  background: transparent;
  border: none;
  transition: color .15s, background .15s;
  user-select: none;
}
.games-tab:hover { color: rgba(255,255,255,.75); }
.games-tab.active {
  color: #fff;
  background: rgba(255,255,255,.07);
}

/* Panels */
.games-panels { position: relative; }
.games-panel { display: none; }
.games-panel.active { display: block; }

/* Loading / error states */
.games-loading {
  text-align: center;
  padding: 24px 0;
  color: rgba(255,255,255,.4);
  font-size: .82rem;
}
.gm-err {
  text-align: center;
  padding: 16px 0;
  color: rgba(255,80,80,.8);
  font-size: .82rem;
}

/* Summary card (clickable) */
.gm-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .15s;
}
.gm-summary:hover { background: rgba(255,255,255,.08); }

.gm-rank-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.gm-rank-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.gm-rank-info { display: flex; flex-direction: column; gap: 2px; }
.gm-player { font-size: .95rem; font-weight: 700; }
.gm-tag { font-size: .72rem; color: rgba(255,255,255,.4); }
.gm-rank-name { font-size: .8rem; color: rgba(255,255,255,.7); }
.gm-rr { font-size: .72rem; color: rgba(255,255,255,.4); }
.gm-peak { font-size: .7rem; color: rgba(255,255,255,.35); margin-top: 2px; }

.gm-sep {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

.gm-top-agent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gm-agent-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,.05);
}
.gm-agent-info { display: flex; flex-direction: column; gap: 2px; }
.gm-agent-name { font-size: .82rem; font-weight: 600; }
.gm-agent-stats { font-size: .72rem; color: rgba(255,255,255,.45); }

.gm-hint {
  margin-left: auto;
  font-size: .68rem;
  color: rgba(255,255,255,.25);
  white-space: nowrap;
}

/* CS2 / LoL simple stat grid */
.gm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.gm-stat {
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.gm-stat-val { font-size: .95rem; font-weight: 700; }
.gm-stat-lbl { font-size: .65rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; }

/* ===== GAMES MODAL ===== */
.games-modal-ov {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: gm-ov-in .15s ease;
}
@keyframes gm-ov-in { from { opacity: 0; } to { opacity: 1; } }

.games-modal {
  background: #131318;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: gm-modal-in .18s ease;
}
@keyframes gm-modal-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.games-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.games-modal-rank-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.games-modal-title { font-size: 1rem; font-weight: 700; }
.games-modal-sub { font-size: .78rem; color: rgba(255,255,255,.45); margin-top: 2px; }
.games-modal-close {
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: none;
  color: rgba(255,255,255,.6);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 28px;
  text-align: center;
  transition: background .15s;
  flex-shrink: 0;
}
.games-modal-close:hover { background: rgba(255,255,255,.12); }

.games-modal-body {
  overflow-y: auto;
  padding: 14px 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.games-modal-section-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 8px;
}

/* Modal: level badge */
.gm-modal-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .82rem;
  font-weight: 600;
}

/* Modal: header info */
.games-modal-header-info { flex: 1; min-width: 0; }
.gm-modal-tag { opacity: .4; font-weight: 400; }
.games-modal-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.gm-modal-peak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: rgba(255,255,255,.45);
}
.gm-modal-peak img { width: 18px; height: 18px; object-fit: contain; }
.gm-modal-peak span { color: rgba(255,255,255,.65); font-weight: 600; }
.gm-modal-level-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
}

/* Modal: top agents */
.gm-modal-agents { display: flex; flex-direction: column; gap: 6px; }
.gm-modal-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 8px 10px;
  transition: background .12s;
}
.gm-modal-agent:hover { background: rgba(255,255,255,.07); }
.gm-modal-agent.top { background: rgba(255,200,50,.06); border: 1px solid rgba(255,200,50,.12); }
.gm-modal-agent-rank {
  width: 22px;
  font-size: .85rem;
  text-align: center;
  flex-shrink: 0;
}
.gm-modal-agent img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.gm-modal-agent-info { flex: 1; min-width: 0; }
.gm-modal-agent-name { font-size: .84rem; font-weight: 700; }
.gm-modal-agent-stats { font-size: .71rem; color: rgba(255,255,255,.4); margin-top: 1px; }
.gm-modal-agent-wr {
  font-size: .75rem;
  font-weight: 700;
  color: color-mix(in srgb, rgba(80,200,120,1) calc(var(--wr, 50%)), rgba(255,255,255,.4));
  flex-shrink: 0;
}

/* Modal: recent matches */
.gm-modal-matches { display: flex; flex-direction: column; gap: 5px; }
.gm-modal-match {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.gm-modal-match:hover { background: rgba(255,255,255,.06); }
.gm-modal-match.gm-win { border-left-color: rgba(80,200,120,.6); }
.gm-modal-match.gm-loss { border-left-color: rgba(220,70,70,.55); }

/* duas imagens lado a lado: agente + mapa */
.gm-modal-match-agents { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.gm-modal-match-agent-img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}
.gm-modal-match-map-img {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  opacity: .55;
}
.gm-modal-match-info { flex: 1; min-width: 0; }
.gm-modal-match-map { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-modal-match-agent-name { font-size: .69rem; color: rgba(255,255,255,.4); margin-top: 1px; }
.gm-match-time { color: rgba(255,255,255,.3); }
.gm-modal-match-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.gm-modal-match-kda {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
}
.gm-kda-sep { color: rgba(255,255,255,.25); margin: 0 1px; }
.gm-kda-d { color: rgba(230,80,80,.85); }
.gm-modal-match-acs { font-size: .68rem; color: rgba(255,255,255,.35); }
.gm-modal-match-result { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.gm-win .gm-modal-match-result { color: rgba(80,200,120,.85); }
.gm-loss .gm-modal-match-result { color: rgba(220,70,70,.85); }

/* ── Dashboard: preview do card Games ── */
.gm-db-preview {
  margin-top: 14px;
  min-height: 48px;
}
.gm-db-preview-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin: 0 0 8px;
}
.gm-db-preview-empty,
.gm-db-preview-loading,
.gm-db-preview-err {
  display: block;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  padding: 8px 0;
}
.gm-db-preview-err { color: rgba(255,80,80,.7); }

/* Level badge inline */
.gm-level {
  display: inline-block;
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  margin-left: 6px;
}