@media (max-width: 560px) {
  .account-summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .coin-balance {
    text-align: left;
  }

  .account-summary .secondary-button {
    width: 100%;
  }
}

.friends-panel {
  margin-top: 16px;
  padding-top: 17px;
  border-top: 1px solid #c9d1dc;
}

.friends-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.friends-panel .eyebrow { margin-bottom: 3px; }
.friends-panel h2 { margin: 0; font-size: 19px; }
.friends-count {
  display: grid;
  min-width: 31px;
  min-height: 31px;
  place-items: center;
  border-radius: 99px;
  color: #fff;
  background: #315ce6;
  font-size: 13px;
  font-weight: 900;
}
.friends-panel-hint { margin: 10px 0 0; color: #52637d; font-size: 13px; line-height: 1.45; }
.friends-group { display: grid; gap: 8px; margin-top: 13px; }
.friends-group:empty { display: none; }
.friends-group h3 { margin: 0 0 1px; font-size: 13px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #c9d1dc; border-radius: 12px; background: #fff; }
.friend-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.friend-row-actions button { min-height: 33px; padding: 5px 9px; border-radius: 9px; font-size: 12px; font-weight: 850; }
.friend-accept { border: 0; color: #fff; background: #19794f; }
.friend-reject, .friend-remove { border: 1px solid #b7c0ce; color: #344054; background: #fff; }
body.dark .friends-panel { border-color: #3b4b62; }
body.dark .friends-panel-hint { color: #b2c0d5; }
body.dark .friend-row { border-color: #42526b; background: #182337; }
body.dark .friend-reject, body.dark .friend-remove { border-color: #52637d; color: #edf2ff; background: #22314a; }

.profile-photo-editor {display:grid; justify-items:center; gap:12px; padding:20px 0; margin-bottom:16px; border-bottom:1px solid var(--border, #dce3ef)}
.profile-photo-editor h2 {margin:0; font-size:20px}
.profile-photo-preview,.profile-photo-placeholder {width:112px; height:112px; border-radius:50%; object-fit:cover}
.profile-photo-placeholder {display:grid; place-items:center; background:#e6edff; color:#304fa3; font-size:40px; font-weight:800}
.profile-photo-actions {display:flex; justify-content:center; flex-wrap:wrap; gap:10px}
.profile-photo-note {font-size:13px; line-height:1.5; text-align:center; margin:0}
#profilePhotoMessage {font-size:14px; line-height:1.5; margin:0; text-align:center}
.summary-photo {width:52px; height:52px; border-radius:50%; object-fit:cover}
.profile-photo-editor [hidden], #summaryPhoto[hidden] {display:none !important}