/* Grid */
.msd-grid {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap: 16px;
}

/* Card */
.msd-card {
  position: relative;
  background: #180F2A;
  border-radius: 7px !important;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.msd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.45);
}

/* Foto */
.msd-photo {
  display: block;
  aspect-ratio: 1/1;
  background: #0e0d12;
  position: relative;
}
.msd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Online dot */
.msd-online {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #17151f;
  background: #777;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
}
.msd-online.on { background: #22c55e; }   /* verde */
.msd-online.off { background: #777; }

/* Badges */
.msd-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(3px);
}
.badge-verified { background:#0ea5e9; }
.badge-vip { background:#f59e0b; }
.badge-diamond { background:#8b5cf6; }
.badge-type { background:#334155; }

/* Body */
.msd-body { padding: 10px 12px 12px; color: #e7e7ee; }
.msd-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.2;
}
.msd-name a { color: #fff; text-decoration: none; }
.msd-age { font-size: 13px; color: #cbd5e1; }
.msd-meta { font-size: 12px; color: #a8a8bb; display: flex; gap: 10px; }

/* Actions */
.msd-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.msd-action {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: #222032;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, transform .12s ease;
}
.msd-action:hover { background: #2d2b40; transform: translateY(-1px); }

/* Barra de filtros */
.msd-filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:8px 0 16px; padding:8px; background:#180F2A;
  border:1px solid rgba(255,255,255,.06); border-radius:7px;
}
.msd-filters .msd-input{
  background:#1f1c2e; color:#e9e9f4; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:8px 10px;
}
.msd-filters .msd-check{
  display:flex; align-items:center; gap:6px; color:#c9c9de; font-size:14px;
  background:#1f1c2e; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
}
.msd-filters input[type=checkbox]{ accent-color:#8b5cf6; }