.vanity-main { padding: 96px 0 48px; }
.vanity-hero { text-align: center; margin-bottom: 32px; }
.vanity-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px; }
.vanity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.vanity-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vanity-card .uname { font-size: 1.35rem; font-weight: 700; color: #f5d78e; }
.vanity-card .tier { font-size: 12px; text-transform: uppercase; opacity: .7; }
.vanity-card .price { font-size: 1.1rem; }
.vanity-card .btn { margin-top: auto; }
.vanity-msg { text-align: center; margin-top: 20px; min-height: 1.2em; }
.vanity-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; z-index: 99;
}
.vanity-modal.hidden { display: none; }
.vanity-modal-box {
  width: min(420px, 92vw); background: #1a1410; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 22px;
}
.vanity-modal-box input {
  width: 100%; padding: 12px; margin: 12px 0; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.15); background: #0f0c0a; color: #fff;
  font-size: 1rem;
}
.vanity-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }