.friends-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 12px 0 20px;
}
.friends-heading > div > span {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.friends-heading h1 {
  font-size: 38px;
  margin: 8px 0;
}
.friends-heading p,
.friends-rule {
  color: var(--muted);
}
.friends-rule {
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}
.friend-filters {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin: 24px 0;
}
.friends label {
  display: grid;
  gap: 7px;
  font-size: 14px;
}
.friends input,
.friends select,
.friends textarea {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--white);
  color: inherit;
  font: inherit;
}
.friends select {
  width: 100%;
}
.friends button:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: inherit;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  min-height: 40px;
}
.friends .button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.friend-list {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.friend-list:empty {
  display: none;
}
.friend-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: var(--white);
}
.friend-list .friend-row:nth-child(even) {
  background: #f0f6f2;
}
.friend-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.friend-person {
  width: 130px;
  flex-shrink: 0;
  overflow-wrap: anywhere;
}
.friend-person span {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}
.friend-person small {
  font-size: 11px;
  display: block;
}
.friend-topic {
  flex: 1;
  min-width: 0;
}
.friend-topic h2 {
  font-size: 17px;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.friend-topic p {
  font-size: 12px;
  color: var(--muted);
  margin: 5px 0;
}
.friend-topic small {
  display: block;
  color: var(--rust);
  font-size: 12px;
}
.friend-map {
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.friend-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.friends .friend-chat {
  background: var(--green) !important;
  color: var(--white) !important;
  border-color: var(--green) !important;
}
.friend-photo img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}
.friend-mine {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.friend-mine > h2 {
  font-size: 16px;
}
.friend-mine .friend-row {
  padding: 16px 0;
}
.friend-empty {
  text-align: center;
  color: var(--muted);
  padding: 60px 10px;
}
.friend-empty svg {
  margin: 0 auto 12px;
}
.friend-empty h2 {
  font-size: 21px;
}
.friends-form {
  display: grid;
  gap: 20px;
  max-width: 720px;
  margin: 24px auto;
}
.friends-form h2 {
  font-size: 22px;
}
.friends-form input:not([type='checkbox']),
.friends-form textarea {
  width: 100%;
}
.friends-form fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.friend-interests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.friend-interests label,
.friend-location label,
.friend-admin-toggle {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
}
.friends input[type='checkbox'] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 3px 0;
  padding: 0;
}
.friend-location {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--sage);
  display: grid;
  gap: 12px;
}
.friend-location button {
  justify-self: start;
}
.friend-image-preview img {
  max-height: 180px;
  border-radius: 12px;
}
.friend-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.friend-error {
  background: #fff0ef;
  color: #a52b26;
  padding: 16px;
  border-radius: 12px;
  margin-top: 16px;
}
.friend-notice {
  background: #e6f5ed;
  color: #126b53;
  padding: 16px;
  border-radius: 12px;
  margin-top: 16px;
}
.friends-reports {
  margin-top: 28px;
}
.friends-reports article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 12px 0;
}
.friend-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: #12251c88;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.friend-dialog {
  background: var(--white);
  padding: 24px;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow: auto;
}
.friend-dialog form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}
html[data-theme='dark'] .friend-list .friend-row:nth-child(even) {
  background: #263b2f;
}
@media (max-width: 700px) {
  .friends-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .friend-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
  }
  .friend-avatar {
    width: 44px;
    height: 44px;
  }
  .friend-person {
    width: auto;
  }
  .friend-topic {
    grid-column: 1/3;
  }
  .friend-actions {
    grid-column: 3;
    grid-row: 1/4;
    align-self: center;
  }
  .friend-photo {
    grid-column: 1/3;
  }
  .friend-interests {
    grid-template-columns: repeat(2, 1fr);
  }
  .friend-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .friend-filters label:first-child {
    grid-column: 1/-1;
  }
  .friend-mine {
    padding: 12px;
  }
  .friend-person span {
    font-size: 11px;
  }
  .friend-topic h2 {
    font-size: 16px;
  }
  .friend-actions button {
    max-width: 110px;
  }
}

.friend-dialog {
  border: 1px solid var(--border);
  color: inherit;
  margin: auto;
}
.friend-dialog::backdrop {
  background: #12251c88;
}

.friend-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.friend-basics > label {
  min-width: 0;
}
.friend-basics select {
  min-width: 0;
  width: 100%;
}

/* Consent, privacy note and GPS action share one compact row. */
.friend-location {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
}
.friend-location > label {
  font-size: 12px;
  white-space: nowrap;
  gap: 6px !important;
  align-items: center !important;
}
.friend-location > small {
  font-size: 11px;
  line-height: 1.5;
}
.friend-location > button {
  font-size: 12px !important;
  padding: 8px !important;
  white-space: nowrap;
}
.friend-location .friend-gps-result {
  grid-column: 1/-1;
}
.friend-location input[type='checkbox'] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
}
@media (max-width: 650px) {
  .friend-location {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .friend-location > label {
    white-space: normal;
  }
  .friend-location .friend-gps-result {
    flex-basis: 100%;
  }
}

@media(min-width:901px){.friends-form{max-width:860px}.friend-location>label{font-size:13px}.friend-location>small{font-size:12px;white-space:nowrap}.friend-location>button{font-size:13px!important}}@media(min-width:651px) and (max-width:900px){.friend-location{display:flex;flex-wrap:wrap}.friend-location>label{white-space:normal}.friend-location .friend-gps-result{flex-basis:100%}}

/* Embedded home section reuses the page template and keeps the existing friend form. */
.friends-home{margin:24px 0;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--white);min-width:0}.friends-home .friends-heading h2{font-size:30px;margin:8px 0}.friends-home .friends-form{max-width:none}.friends-home .friend-basics{grid-template-columns:repeat(2,minmax(0,1fr))}.friends-home .friends-form input[type=checkbox]{width:16px;min-width:16px;height:16px;padding:0;margin:0}.friends-home .friend-location>label{min-width:0;white-space:normal}.friends-home .friend-location{display:flex;flex-wrap:wrap}.friends-home .friend-row{min-width:0}.friends-home .friends-form>h2{font-size:22px}@media(max-width:540px){.friends-home{padding:14px}.friends-home .friends-heading{align-items:flex-start;gap:12px;flex-wrap:wrap}.friends-home .friends-heading h2{font-size:26px}.friends-home .friend-basics{grid-template-columns:1fr}.friends-home .friend-interests{grid-template-columns:repeat(2,minmax(0,1fr))}.friends-home .friend-interests label{min-width:0;white-space:normal}}

/* Compact friend cards, actions and filters on the home page. */
.friends-home{padding:18px;margin:18px 0}
.friends-home .friends-heading{gap:16px;padding:0 0 10px;align-items:center}
.friends-home .friends-heading h2{font-size:26px;margin:4px 0;line-height:1.4}
.friends-home .friends-heading p{font-size:13px;line-height:1.6;margin:4px 0 0}
.friends-home .friends-heading>.button{font-size:13px;min-height:40px;padding:9px 14px;line-height:1.5;justify-content:center}
.friends-home .friends-rule{font-size:12px;line-height:1.6;margin:0 0 14px;padding-bottom:12px}
.friends-home .friend-mine{margin:0 0 12px;padding:12px;border-radius:14px;background:#f6faf7;border-color:#d6e5dc}
.friends-home .friend-mine>h2{font-size:13px;margin:0 0 8px;color:var(--green)}
.friends-home .friend-row{display:grid;grid-template-columns:44px minmax(110px,.65fr) minmax(0,2fr);gap:10px 12px;align-items:start;padding:14px;min-width:0}
.friends-home .friend-mine .friend-row{padding:0;background:transparent}
.friends-home .friend-avatar{grid-column:1;grid-row:1;width:44px;height:44px;margin:0}
.friends-home .friend-person{grid-column:2;grid-row:1;width:auto;min-width:0;line-height:1.5;display:flex;flex-wrap:wrap;gap:2px 8px}
.friends-home .friend-person strong{flex-basis:100%;font-size:16px;line-height:1.4}
.friends-home .friend-person span{font-size:12px;margin:0}
.friends-home .friend-person small{font-size:11px}
.friends-home .friend-topic{grid-column:3;grid-row:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px}
.friends-home .friend-topic h2{flex-basis:100%;font-size:17px;line-height:1.4;margin:0}
.friends-home .friend-topic p{flex-basis:100%;font-size:12px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.friends-home .friend-map{display:inline-flex;align-items:center;min-height:26px;font-size:12px;padding:0}
.friends-home .friend-topic small{display:inline-flex;margin:0;padding:1px 8px;border-radius:20px;background:#e6f1e9;color:#236249;font-size:11px;line-height:1.6}
.friends-home .friend-photo{grid-column:3;grid-row:auto;justify-self:start}
.friends-home .friend-photo img{width:72px;height:72px}
.friends-home .friend-actions{grid-column:2/-1;grid-row:auto;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-self:auto;justify-content:flex-start;min-width:0}
.friends-home .friend-actions button{min-height:40px;max-width:none;padding:8px 14px;font-size:12px;line-height:1.45;white-space:normal}
.friends-home .friend-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;margin:16px 0 12px}
.friends-home .friend-filters>label{font-size:12px;gap:5px;min-width:0;grid-column:auto}
.friends-home .friend-filters select{min-width:0;min-height:42px;padding:8px 10px;font-size:14px;border-color:#c4d5cb}
.friends-home .friend-filters>.friend-admin-toggle{grid-column:1/-1;align-items:center}
.friends-home .friends-form{gap:16px;margin:16px 0}
.friends-home .friends-form fieldset{padding:12px}
.friends-home .friend-empty{padding:28px 12px}
html[data-theme=dark] .friends-home .friend-mine{background:#23392d;border-color:#3e5c49}
html[data-theme=dark] .friends-home .friend-topic small{background:#294b38;color:#c2e8d0}
@media(max-width:700px){
 .friends-home .friend-row{grid-template-columns:40px minmax(0,1fr);gap:10px}
 .friends-home .friend-avatar{width:40px;height:40px}
 .friends-home .friend-topic{grid-column:1/-1;grid-row:auto}
 .friends-home .friend-photo{grid-column:1/-1;grid-row:auto}
 .friends-home .friend-actions{grid-column:1/-1;grid-row:auto;display:flex;flex-direction:row;gap:6px;padding-top:8px;border-top:1px solid var(--border)}
 .friends-home .friend-actions button{flex:1 1 0;min-width:0;padding:8px 6px;font-size:12px}
}
@media(max-width:540px){
 .friends-home{padding:12px;margin:14px 0}
 .friends-home .friends-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
 .friends-home .friends-heading>div>span{display:none}
 .friends-home .friends-heading h2{font-size:23px;margin:0 0 4px}
 .friends-home .friends-heading p{font-size:12px;margin:0}
 .friends-home .friends-heading>.button{font-size:12px;max-width:145px;min-height:40px;padding:8px 10px;white-space:normal}
 .friends-home .friends-heading>.button svg{width:16px;flex-shrink:0}
 .friends-home .friends-rule{font-size:11px;margin-bottom:12px;padding-bottom:10px}
 .friends-home .friend-mine{padding:10px;margin-bottom:12px}
 .friends-home .friend-mine>h2{margin-bottom:8px}
 .friends-home .friend-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
 .friends-home .friend-filters>label:first-child{grid-column:1/-1}
 .friends-home .friend-topic h2{font-size:16px}
}

/* One compact owner-post row on tablets and desktops; mobile keeps its stacked card. */
@media(min-width:701px){
 .friends-home .friend-mine .friend-row{grid-template-columns:44px minmax(100px,.65fr) minmax(0,1.25fr) auto;align-items:center;gap:12px}
 .friends-home .friend-mine .friend-actions{grid-column:-2/-1;grid-row:1;align-self:center;flex-wrap:nowrap;gap:6px;justify-content:flex-end}
 .friends-home .friend-mine .friend-actions button{flex:0 1 auto;min-width:0;min-height:40px;padding:8px 10px;line-height:1.4}
 .friends-home .friend-mine .friend-person{align-self:center}
 .friends-home .friend-mine .friend-topic{align-self:center}
 .friends-home .friend-mine .friend-row:has(>.friend-photo){grid-template-columns:44px minmax(100px,.65fr) minmax(0,1.25fr) 56px auto}
 .friends-home .friend-mine .friend-photo{grid-column:4;grid-row:1;align-self:center;justify-self:center}
 .friends-home .friend-mine .friend-photo img{width:56px;height:56px}
}