/* hiro.games/friends, on top of settings.css (the same cards and buttons). */
.fr .fr-list { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.fr-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.fr-row .face { border-radius: 12px; }
.fr-who { min-width: 0; }
.fr-who a, .fr-who b { display: block; overflow: hidden; color: #f2f3f5; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.fr-who a:hover { text-decoration: underline; }
.fr-who small { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--mist); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.fr-who small.on::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.16); }
.fr-who small.fr-in { color: #b9e8cb; }
.fr-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fr-acts .st-btn { height: 38px; padding: 0 14px; font-size: 14px; }
.fr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-sub { margin: 14px 0 6px; color: var(--mist); font: 600 12px var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.fr-link { padding: 0; border: 0; background: none; color: #93c9ea; font: inherit; cursor: pointer; text-decoration: underline; }
.fr-foot { margin-top: 12px; }
.fr-add .st-inline input { flex: 1; min-width: 0; }
.fr-empty { padding: 6px 2px; color: var(--mist); }
@media (max-width: 560px) {
  .fr-row { grid-template-columns: 40px minmax(0, 1fr); }
  .fr-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .fr-add .st-inline { flex-wrap: wrap; }
  .fr-add .st-inline input { flex: 1 1 100%; }
  .fr-add .st-inline .st-btn { flex: 1 1 auto; }
}
.fr-found { margin-top: 10px; }