/* ============================================================
   EU SOU VIP — página pública do perfil (v2)
   Visual clean/Apple: tipografia de sistema, cards suaves, botões cápsula.
   Templates: claro · escuro · royal · aurora
   Layout (por usuário): bt- (botão) · al- (alinhamento) · av- (avatar)
   Cor de destaque: --acc (definida inline pelo perfil.php)
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  color:var(--texto);
  background:var(--fundo);
  transition:background .3s ease;
}
h1,h2,h3{letter-spacing:-.02em}

/* ---------- Paletas dos templates ---------- */
body.tpl-claro  { --fundo:#f2f2f7; --texto:#1d1d1f; --card:#ffffff;  --borda:#e4e4ea; --mut:#86868b; --sombra:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04); }
body.tpl-escuro { --fundo:#0c0c0f; --texto:#f5f5f7; --card:#1c1c1f;  --borda:#2c2c30; --mut:#98989f; --sombra:0 1px 2px rgba(0,0,0,.3); }
body.tpl-royal  { --fundo:#0a0a0d; --texto:#f7f3e6; --card:#191812;  --borda:#3a3320; --mut:#b3a98c; --sombra:0 1px 2px rgba(0,0,0,.4); background:radial-gradient(800px 380px at 50% -120px,rgba(212,175,55,.16),transparent 65%),#0a0a0d; }
body.tpl-aurora { --fundo:#f3ecfb; --texto:#241a2e; --card:#ffffff;  --borda:#e0d7ef; --mut:#847a92; --sombra:0 1px 3px rgba(90,40,140,.08),0 12px 32px rgba(120,80,180,.14); background:linear-gradient(160deg,#fde3ee 0%,#e3e1ff 50%,#d9f6e6 100%); background-attachment:fixed; }

/* ---------- Estrutura ---------- */
.perfil{max-width:620px;margin:0 auto;padding:64px 22px 48px;display:flex;flex-direction:column;align-items:center}
/* layout esquerda */
body.al-esquerda .perfil{align-items:flex-start;padding-left:28px;padding-right:28px}
body.al-esquerda .nome,body.al-esquerda .bio,body.al-esquerda .titulo-vip{align-self:flex-start;text-align:left}
body.al-esquerda .links{align-self:stretch}
body.al-esquerda .rodape-perfil{align-items:flex-start}

/* ---------- Avatar ---------- */
.avatar-pos{position:relative}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:var(--sombra);border:1px solid var(--borda)}
.avatar.letra{display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:700;
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc),white 18%),color-mix(in srgb,var(--acc),black 12%));
  color:#fff;letter-spacing:0}
body.av-quadrado .avatar{border-radius:24px}

/* ---------- Exclusivo do CRIADOR (nunca existe em outro perfil) ---------- */
.coroa{position:absolute;right:-8px;top:-14px;font-size:34px;line-height:1;
  filter:drop-shadow(0 0 10px rgba(212,175,55,.9));animation:flutua 3s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-4px) rotate(-6deg)}}
.selo-criador{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding:6px 18px;border-radius:999px;color:#171200;
  background:linear-gradient(120deg,#f7e08a,#d4af37 55%,#e8c766);
  box-shadow:0 0 22px rgba(212,175,55,.4)}
body.tpl-criador{--fundo:#050507;--texto:#f7f3e6;--card:#15120b;--borda:#4a3d1a;--mut:#c4b78e;--sombra:0 0 26px rgba(212,175,55,.08);
  background:radial-gradient(1100px 520px at 50% -180px,rgba(212,175,55,.20),transparent 62%),
             radial-gradient(720px 340px at 110% 110%,rgba(184,134,11,.10),transparent 60%),#050507}
body.tpl-criador .nome{background:linear-gradient(120deg,#f7e08a,#d4af37 55%,#e8c766);-webkit-background-clip:text;background-clip:text;color:transparent}
body.tpl-criador .avatar{border:2px solid rgba(212,175,55,.85);box-shadow:0 0 0 7px rgba(212,175,55,.12),0 0 40px rgba(212,175,55,.35)}
body.tpl-criador .link{background:linear-gradient(180deg,#1a160d,#14110c);border:1px solid rgba(212,175,55,.42)}
body.tpl-criador .link:hover{border-color:#f2d98a;box-shadow:0 0 28px rgba(212,175,55,.22)}
body.tpl-criador .rodape-perfil .marca{color:#e8c766}

/* ---------- Nome / selo / bio ---------- */
.nome{margin:18px 0 8px;font-size:25px;font-weight:700;text-align:center;letter-spacing:-.02em}
.titulo-vip{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
  color:#1a1407;background:linear-gradient(135deg,#f7d873,color-mix(in srgb,var(--acc),#d4af37 40%));}
.bio{text-align:center;font-size:15px;line-height:1.6;max-width:470px;margin:14px 0 4px;color:var(--texto);opacity:.94}

/* ---------- Links (cards suaves) ---------- */
.links{width:100%;max-width:420px;display:flex;flex-direction:column;gap:11px;margin:24px 0 8px}
.link{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;font-weight:500;font-size:14px;text-decoration:none;color:var(--texto);
  background:var(--card);border:1px solid var(--borda);box-shadow:var(--sombra);
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.link .seta{opacity:.45;font-size:14px;transition:transform .15s ease}
.link:hover{border-color:var(--acc);transform:translateY(-1px)}
.link:hover .seta{opacity:.9;transform:translate(2px,-2px);color:var(--acc)}
.link:active{transform:scale(.985)}
/* formatos de botão */
body.bt-capsula .link{border-radius:999px}
body.bt-redondo .link{border-radius:16px}
body.bt-quadrado .link{border-radius:7px}
.sem-links{text-align:center;font-size:14px;color:var(--mut)}

/* ---------- Rodapé ---------- */
.rodape-perfil{width:100%;text-align:center;margin-top:36px;display:flex;flex-direction:column;gap:8px;align-items:center}
.rodape-perfil .marca{font-weight:700;font-size:13.5px;letter-spacing:.4px;text-decoration:none;color:var(--texto);opacity:.85}
.rodape-perfil .marca:hover{opacity:1}
.denunciar{background:none;border:0;font-size:11.5px;cursor:pointer;color:var(--mut);text-decoration:underline}
.denunciar:hover{color:var(--texto)}

/* ---------- Modal de denúncia (clean) ---------- */
.modal-denuncia{border:0;border-radius:20px;padding:0;max-width:420px;width:92%;
  background:#fff;color:#1d1d1f;box-shadow:0 30px 90px rgba(0,0,0,.25)}
.modal-denuncia::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.modal-denuncia form{padding:26px}
.modal-denuncia h3{margin:0 0 4px;font-size:18px;letter-spacing:-.01em}
.modal-denuncia .dica{color:#86868b;font-size:13px;margin:0 0 16px}
.modal-denuncia label{display:block;font-size:12px;font-weight:600;margin-bottom:12px;color:#48484a}
.modal-denuncia input,.modal-denuncia select,.modal-denuncia textarea{width:100%;margin-top:5px;padding:11px 12px;
  border-radius:12px;border:1px solid #d9d9de;background:#f7f7f9;color:#1d1d1f;font-size:14px;font-family:inherit;box-sizing:border-box;outline:none}
.modal-denuncia input:focus,.modal-denuncia select:focus,.modal-denuncia textarea:focus{border-color:#d4af37}
.modal-denuncia .acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.modal-denuncia .acoes button{padding:10px 18px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:13px;background:#f0f0f2;color:#48484a}
.modal-denuncia .acoes .enviar{background:#1d1d1f;color:#fff}
.modal-denuncia .acoes .enviar:hover{background:#000}

.denuncia-ok{background:#eaf7ee;border:1px solid #b7e4c6;color:#1f7a3d;padding:12px 16px;border-radius:14px;font-size:14px;font-weight:500}

/* 404 usa o template claro */
body.tpl-claro{--fundo:#f2f2f7;--texto:#1d1d1f;--card:#fff;--borda:#e4e4ea;--mut:#86868b;--sombra:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04)}

@media (max-width:520px){
  .perfil{padding:44px 16px 34px}
  body.al-esquerda .perfil{padding-left:20px;padding-right:20px}
}