.feed-wrap { max-width: 640px; margin: 0 auto; padding: 40px 16px 60px; }
  .feed-composer { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 24px; background: var(--card-bg, #fff); }
  .feed-composer textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 15px; font-family: inherit; resize: none; min-height: 60px; overflow: hidden; }
  .feed-composer-photos img { cursor: grab; }
  .feed-composer-photos img.dragging { opacity: 0.4; }
  .feed-composer-photos .feed-photo-thumb { position: relative; display: inline-block; }
  .feed-photo-thumb-remove { position: absolute; top: -6px; right: -6px; background: #C0392B; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; line-height: 1; }
  .feed-photo-uploading-spinner { position: absolute; inset: 0; border-radius: 8px; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; }
  .feed-photo-uploading-spinner::after { content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: feed-spin 0.7s linear infinite; }
  @keyframes feed-spin { to { transform: rotate(360deg); } }
  #feedComposerPostBtn:disabled { opacity: 0.5; cursor: not-allowed; }
  .feed-composer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
  .feed-composer-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .feed-composer-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
  .feed-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; background: var(--card-bg, #fff); }
  @keyframes feed-card-highlight-pulse { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--pf-purple, #4B3FD1); } }
  .feed-card-highlight { animation: feed-card-highlight-pulse 2s ease; }
  .feed-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .feed-card-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--border); flex-shrink: 0; }
  .feed-card-avatar-fallback { width: 42px; height: 42px; border-radius: 50%; background: var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--muted); }
  .feed-card-who { display: flex; flex-direction: column; }
  .feed-card-name { font-weight: 600; font-size: 14.5px; }
  .feed-card-name a { color: inherit; text-decoration: none; }
  .feed-card-name a:hover { text-decoration: underline; }
  .feed-card-meta { font-size: 12.5px; color: var(--muted); }
  .feed-card-title { font-size: 16px; font-weight: 700; margin: 4px 0 6px; }
  .feed-card-body { font-size: 14.5px; line-height: 1.5; white-space: pre-line; }
  .feed-readmore-link { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #4B3FD1; text-decoration: none; }
  .feed-readmore-link:hover { text-decoration: underline; }
  .feed-checkin-others-toggle { background: none; border: none; color: #4B3FD1; font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0; font-family: inherit; }
  .feed-checkin-others-toggle:hover { text-decoration: underline; }
  .feed-tagged-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
  .feed-tagged-modal { background: var(--card-bg, #fff); border-radius: 12px; padding: 14px; width: 100%; max-width: 320px; max-height: 70vh; overflow-y: auto; }
  .feed-tagged-modal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }
  .feed-tagged-modal-close { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0; }
  .feed-tagged-modal-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; text-decoration: none; color: inherit; border-radius: 8px; }
  .feed-tagged-modal-row:hover { background: var(--hover-bg, rgba(0,0,0,0.04)); }
  .feed-tagged-modal-row span { font-weight: 600; font-size: 14px; }
  .feed-card-photos { margin-top: 10px; border-radius: 8px; overflow: hidden; }
  .feed-card-photos img { display: block; width: 100%; object-fit: cover; }
  .feed-photos-1 img { max-height: 420px; }
  .feed-photos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .feed-photos-2 img { height: 260px; }
  .feed-photos-3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4px; }
  .feed-photos-3 > img { height: 100%; }
  .feed-photos-3-side { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
  .feed-photos-3-side img, .feed-photos-3 > img { height: 260px; }
  .feed-photos-3-side img { height: 128px; }
  .feed-photos-4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
  .feed-photos-4 img { height: 150px; }
  .feed-photo-overlay-tile { position: relative; }
  .feed-photo-overlay-tile img { height: 150px; }
  .feed-photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
  .feed-card-cover { width: 100%; border-radius: 8px; margin-top: 10px; max-height: 360px; object-fit: cover; }
  /* Check-in selfies are usually portrait (phone held upright), so the landscape-ish
     360px cap above crops them down to a thin horizontal sliver of the middle of the
     photo — a taller, portrait-shaped frame keeps far more of the shot visible. */
  .feed-card-checkin .feed-card-cover { max-height: 520px; aspect-ratio: 4 / 5; object-fit: cover; }
  .feed-card-footer { margin-top: 10px; display: flex; justify-content: flex-end; }
  .feed-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
  /* Platform cards (tips / questions / notices written by the site itself — see feed_cards.sql).
     Same frame as every other card, tinted lavender so they read as "from the site" rather than from a member. */
  .feed-card-platform { background: #F8F7FE; border-color: #D8D3F3; }
  .feed-card-avatar-platform { width: 42px; height: 42px; border-radius: 50%; background: #EDEAFB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .feed-card-avatar-platform img { width: 24px; height: 24px; display: block; }
  .feed-badge-card { background: #EDEAFB; color: #4B3FD1; padding: 2px 8px; border-radius: 999px; }
  .feed-card-hide-btn { margin-left: auto; align-self: flex-start; background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 6px; font-family: inherit; }
  .feed-card-hide-btn:hover { background: #EDEAFB; color: var(--dark); }
  .feed-empty { text-align: center; color: var(--muted); padding: 60px 20px; }
  .feed-empty a { color: #2E86C1; }
  .feed-btn-outline { background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--dark); display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
  .feed-btn-outline:hover { background: var(--bg-hero); }
  .feed-btn-pill { background: #EDEAFB; border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #4B3FD1; font-family: inherit; }
  .feed-btn-pill.active { background: #4B3FD1; color: #fff; }
  .feed-tag-suggestion { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
  .feed-tag-suggestion:hover { background: var(--bg-hero); }
  .feed-tag-suggestion .sub { font-size: 11.5px; color: var(--muted); }
  .feed-tag-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-hero); border-radius: 999px; padding: 3px 10px 3px 4px; }
  .feed-tag-chip .remove { cursor: pointer; font-weight: 700; }
  .feed-card-tagline { font-size: 13px; color: var(--muted); margin: -2px 0 8px; }
  .feed-edit-form { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; }
  .feed-edit-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 14.5px; font-family: inherit; resize: none; overflow: hidden; }
  .feed-edit-btn:hover, .feed-delete-btn:hover { text-decoration: underline; }
  .feed-reaction-summary { font-size: 13px; color: var(--muted); margin-top: 10px; }
  .feed-action-bar { display: flex; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
  .feed-reaction-btn { border: 1px solid transparent; background: none; border-radius: 999px; padding: 6px 10px; font-size: 15px; cursor: pointer; line-height: 1; }
  .feed-reaction-btn:hover { background: var(--bg-hero); }
  .feed-reaction-btn.active { background: #EDEAFB; }
  .feed-comments { margin-top: 8px; }
  .feed-comment-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
  .feed-comment-row .feed-card-avatar, .feed-comment-row .feed-card-avatar-fallback { width: 30px; height: 30px; font-size: 11px; }
  .feed-comment-bubble { background: var(--bg-hero); border-radius: 14px; padding: 7px 12px; font-size: 13.5px; display: inline-block; }
  .feed-comment-author { font-weight: 600; color: inherit; text-decoration: none; font-size: 13px; }
  .feed-comment-meta { font-size: 11.5px; color: var(--muted); margin: 2px 0 0 12px; }
  .feed-comment-delete { cursor: pointer; margin-left: 8px; }
  .feed-comment-delete:hover { text-decoration: underline; }
  .feed-comment-reply-btn { cursor: pointer; font-weight: 600; }
  .feed-comment-reply-btn:hover { text-decoration: underline; }
  .feed-view-all-comments-btn { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
  .feed-view-all-comments-btn:hover { text-decoration: underline; }
  .feed-comment-view-replies { font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 4px 0; margin-left: 38px; }
  .feed-comment-view-replies:hover { text-decoration: underline; }
  /* Connector lines — each level of nesting draws its own trunk running
     down the left of its direct replies, with each reply's avatar
     branching off it via a small curved elbow — same visual idea as
     Facebook's reply threads, compounding naturally with real nesting
     depth since every level is its own independent container. */
  .feed-comment-replies-container { position: relative; margin-left: 22px; padding-left: 16px; }
  .feed-comment-replies-container::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 15px; width: 2px; background: var(--border);
  }
  .feed-comment-reply-row { position: relative; }
  .feed-comment-reply-row::before {
    content: ""; position: absolute; left: -16px; top: -8px; width: 14px; height: 23px;
    border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 10px;
  }
  .feed-comment-composer { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .feed-replying-to { flex-basis: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
  .feed-reply-cancel { cursor: pointer; font-weight: 700; padding: 0 4px; }
  .feed-comment-input { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid var(--border); border-radius: 16px; padding: 7px 14px; font-size: 13.5px; font-family: inherit; }
  .feed-comment-send-btn { flex-shrink: 0; border: none; background: #2E86C1; color: #fff; border-radius: 14px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .feed-comment-send-btn:disabled { opacity: 0.5; cursor: default; }
  .feed-shared-embed { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 8px; text-decoration: none; color: inherit; }
  .feed-shared-embed:hover { background: var(--bg-hero); }
  .feed-shared-embed .feed-card-avatar, .feed-shared-embed .feed-card-avatar-fallback { width: 32px; height: 32px; }
  .feed-share-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
  .feed-share-modal { background: var(--card-bg, #fff); border-radius: 12px; padding: 18px; max-width: 480px; width: 100%; }
  .feed-share-modal textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; font-family: inherit; resize: vertical; min-height: 60px; margin: 10px 0; }
  .feed-share-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .feed-load-more { display: block; margin: 20px auto 0; }
  .feed-reaction-summary { cursor: pointer; }
  .feed-reaction-summary:hover { text-decoration: underline; }
  .feed-reactions-modal { background: var(--card-bg, #fff); border-radius: 12px; padding: 0; max-width: 380px; width: 100%; max-height: 70vh; display: flex; flex-direction: column; }
  .feed-reactions-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .feed-reactions-modal-close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
  .feed-reactions-modal-list { overflow-y: auto; padding: 8px 0; }
  .feed-reactions-modal-row { display: flex; align-items: center; gap: 10px; padding: 8px 18px; }
  .feed-reactions-modal-row .feed-card-avatar, .feed-reactions-modal-row .feed-card-avatar-fallback { width: 34px; height: 34px; }
  .feed-reactions-modal-emoji { margin-left: auto; font-size: 15px; }


/* Photo lightbox */
.feed-card-photos img, img.feed-card-cover { cursor: zoom-in; }
a img.feed-card-cover { cursor: pointer; }
.feed-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; }
.feed-lightbox-img { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.feed-lightbox button { position: absolute; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 28px; line-height: 1; cursor: pointer; }
.feed-lightbox button:hover { background: rgba(255,255,255,.3); }
.feed-lightbox-close { top: 16px; right: 16px; }
.feed-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.feed-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }