.jewel-intro { color: var(--text-muted); font-size: 13.5px; margin: 0 0 12px; max-width: 900px; }
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 12px; }
.jfam { padding: 10px 12px; }
.jfam-title { font-size: 15px; margin: 0 0 6px; }
.jfam-title small { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: 4px; }
.jrows { display: grid; gap: 4px; }
.jrow { display: grid; grid-template-columns: 32px 56px 1fr auto; gap: 8px; align-items: center; font-size: 13px;
  padding: 3px 0; border-top: 1px solid var(--border); }
.jrow:first-child { border-top: 0; }
.jrow img { width: 32px; height: 32px; object-fit: contain; }
.jrow .stars { color: var(--gold); font-size: 11px; letter-spacing: -1px; }
.jsrc { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.jsrc .src { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); cursor: help; }
.jsrc .src small { color: var(--text-faint); }
@media (max-width: 520px) { .jrow { grid-template-columns: 28px 1fr; } .jrow .stars { grid-column: 2; } .jrow .jfx, .jrow .jsrc { grid-column: 1 / -1; justify-content: flex-start; } }