:root{
  --bg:#0d0d0e;          /* fundo */
  --card:#c9970fcb;        /* cartão */
  --muted:#daa520;       /* texto secundário dourado escuro */
  --fg:#e0e0e0;          /* texto principal cinza claro */
  --accent:#eeb822;      /* ciano */
  --accent-2:#b3ce1e;    /* roxo */
  --radius:24px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0; 
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--fg); 
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(167,139,250,.12), transparent 60%),
    radial-gradient(1000px 700px at 10% 110%, rgba(34,211,238,.12), transparent 60%),
    var(--bg);
  display:grid; 
  place-items:center; 
  padding:24px;
}

.card{
  width:min(680px,100%); 
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); 
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35); 
  padding:28px; 
  backdrop-filter: blur(10px);
}

.header{
  display:flex; 
  gap:18px; 
  align-items:center
}

.avatar{
  width:88px; 
  height:88px; 
  border-radius:50%; 
  overflow:hidden; 
  flex:0 0 auto;
  border:2px solid rgba(255,255,255,.12);
}

.avatar img{
  width:100%; 
  height:100%; 
  object-fit:cover
}

h1{
  margin:0; 
  font-size:1.8rem; 
  letter-spacing:.2px
}

.bio{
  margin:.25rem 0 0; 
  color:var(--muted)
}

.grid{
  margin-top:22px; 
  display:grid; 
  grid-template-columns:1fr; 
  gap:12px;
}

@media (min-width:560px){ 
  .grid{ 
    grid-template-columns:1fr 1fr; 
  } 
}

.btn{
  display:flex; 
  align-items:center; 
  gap:12px; 
  padding:14px 16px; 
  text-decoration:none; 
  color:var(--fg);
  border:1px solid rgba(255,255,255,.08); 
  border-radius:16px; 
  background:rgba(255,255,255,.03);
  transition:transform .08s ease, border-color .2s ease, background .2s ease;
}

.btn:hover{ 
  transform:translateY(-1px); 
  border-color:rgba(255,255,255,.18); 
  background:rgba(255,255,255,.06); 
}

.btn span{ 
  font-weight:600; 
}

.tag{ 
  font-size:.8rem; 
  color:var(--muted) 
}

.icon{ 
  width:22px; 
  height:22px; 
  flex:0 0 auto 
}

.footer{ 
  margin-top:20px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  color:var(--muted); 
  font-size:.9rem 
}

.badge{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:8px 12px; 
  border-radius:999px; 
  border:1px dashed rgba(255,255,255,.14); 
}

.accent{ 
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); 
  -webkit-background-clip:text; 
  background-clip:text; 
  color:transparent; 
  font-weight:700 
}

.divider{ 
  height:1px; 
  background:linear-gradient(90deg,transparent, rgba(255,255,255,.15), transparent); 
  margin:16px 0 
}

.notice{ 
  margin-top:8px; 
  font-size:.85rem; 
  color:var(--muted) 
}