.yl-elm { margin: 18px 0; position: relative; }
.yl-elm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.yl-elm-title { margin:0; font-size: 20px; letter-spacing: .2px; }
.yl-elm-empty { padding: 14px 16px; border: 1px dashed #3a3a3a33; border-radius: 14px; opacity: .9; }

.yl-elm-grid { display:grid; gap: 14px; }
.yl-elm-cols-1 { grid-template-columns: 1fr; }
.yl-elm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yl-elm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yl-elm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .yl-elm-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yl-elm-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .yl-elm-cols-4, .yl-elm-cols-3, .yl-elm-cols-2 { grid-template-columns: 1fr; }
}

.yl-elm-card {
  border: 1px solid #1f1f1f22;
  border-radius: 18px;
  overflow:hidden;
  background: #0b0b0b0a;
  cursor: pointer;
  outline: none;
}
.yl-elm-card:focus { box-shadow: 0 0 0 2px rgba(156,0,0,.25); }
.yl-elm-photo { aspect-ratio: 1 / 1; background: #0a0a0a0f; }
.yl-elm-photo img { width:100%; height:100%; object-fit: cover; display:block; }
.yl-elm-photo-placeholder { width:100%; height:100%; background: linear-gradient(135deg, #00000010, #00000005); }
.yl-elm-meta { padding: 12px 12px 14px; }
.yl-elm-name { font-weight: 700; font-size: 16px; line-height: 1.2; }
.yl-elm-ig { display:inline-block; margin-top: 6px; font-size: 13px; text-decoration:none; opacity:.9; }
.yl-elm-ig:hover { text-decoration: underline; }

.yl-elm-vote {
  margin-top: 10px;
  width: 100%;
  border: 1px solid #1f1f1f22;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  background: #ffffff;
}
.yl-elm-vote:disabled { opacity: .6; cursor:not-allowed; }

.yl-elm-error { padding: 12px 14px; border: 1px solid #b0000022; border-radius: 14px; }

/* Modal */
.yl-elm-modal { display:none; }
.yl-elm-modal.is-open { display:block; }
.yl-elm-modal-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9998;
}
.yl-elm-modal-card{
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(920px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  z-index: 9999;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.yl-elm-modal-close{
  position: absolute; right: 10px; top: 8px;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  font-size: 28px; line-height: 38px;
  cursor:pointer;
}
.yl-elm-modal-body{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 18px;
}
@media (max-width: 720px){
  .yl-elm-modal-body{ grid-template-columns: 1fr; }
}
.yl-elm-modal-photo{ border-radius: 16px; overflow:hidden; background:#0a0a0a0f; aspect-ratio: 1/1; }
.yl-elm-modal-photo img{ width:100%; height:100%; object-fit: cover; display:block; }
.yl-elm-modal-name{ font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.yl-elm-modal-links a{ display:inline-block; margin-right: 10px; text-decoration:none; font-weight: 700; }
.yl-elm-modal-bio{ margin-top: 10px; opacity:.9; white-space: pre-wrap; }
.yl-elm-modal-actions{ margin-top: 14px; }
.yl-elm-modal-msg{ margin-top: 10px; font-weight: 700; }