/* ════════════════════════════════════════════════════════
   FLEAUX — Shared design system
   Used by all redesigned pages (home, profile, etc.)
   ════════════════════════════════════════════════════════ */

:root {
  --fx-paper:#fbf9f4; --fx-paper-deep:#f4f0e6; --fx-surface:#fff;
  --fx-line:#ebe4d4; --fx-line-soft:#f1ebdd;
  --fx-ink:#1c1814; --fx-ink-2:#4a3f33; --fx-ink-3:#8b7d6a; --fx-ink-4:#b5a994;
  --fx-warm:#c2410c; --fx-warm-deep:#7c2d12; --fx-warm-soft:#fef3ec; --fx-warm-bg:#fdf6ee;
  --fx-flow-1:#c2410c; --fx-flow-2:#ea580c;
  --fx-success:#65a30d; --fx-danger:#b91c1c;
  --fx-r-sm:8px; --fx-r:14px; --fx-r-lg:20px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--fx-ink); background: var(--fx-paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ─── Wordmark ─── */
.fx-wordmark {
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 26px; letter-spacing: -0.02em;
  color: var(--fx-ink); display: inline-block; line-height: 1;
}
.fx-wordmark span { color: var(--fx-warm); }

/* ─── Top bar ─── */
.fx-top {
  border-bottom: 1px solid var(--fx-line);
  padding: 16px 28px;
  display: flex; align-items: center; gap: 24px;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(251,249,244,0.92);
}
.fx-search { flex: 1; max-width: 420px; position: relative; }
.fx-search input {
  width: 100%;
  background: var(--fx-paper-deep);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 10px 16px 10px 40px;
  font-family: inherit; font-size: 14px; color: var(--fx-ink);
  transition: all 0.2s ease;
}
.fx-search input:focus {
  outline: none; background: var(--fx-surface);
  border-color: var(--fx-line);
  box-shadow: 0 0 0 4px var(--fx-warm-soft);
}
.fx-search input::placeholder { color: var(--fx-ink-4); }
.fx-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--fx-ink-3);
}
.fx-top-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fx-icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fx-ink-2); cursor: pointer; position: relative;
  transition: all 0.18s ease;
}
.fx-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.75; }
.fx-icon-btn:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-icon-btn .fx-pulse {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fx-warm);
  box-shadow: 0 0 0 2px var(--fx-paper);
}
.fx-icon-btn .fx-pulse::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: var(--fx-warm); opacity: 0.4;
  animation: fx-pulse 2s ease-out infinite;
}
@keyframes fx-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ─── Avatar ─── */
.fx-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fx-flow-1), var(--fx-flow-2));
  flex-shrink: 0; display: block;
  background-size: cover; background-position: center;
}
.fx-avatar.xs { width: 28px; height: 28px; }
.fx-avatar.sm { width: 36px; height: 36px; }
.fx-avatar.md { width: 44px; height: 44px; }
.fx-avatar.lg { width: 80px; height: 80px; }
.fx-avatar.xl { width: 120px; height: 120px; }
.fx-avatar.with-ring {
  box-shadow: 0 0 0 2px var(--fx-paper), 0 0 0 3px var(--fx-line);
}

/* ─── Shell layout ─── */
.fx-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px; padding: 32px;
  max-width: 1280px; margin: 0 auto;
  align-items: start;
}
.fx-shell.fx-shell-three {
  grid-template-columns: 240px minmax(0, 600px) 300px;
}

/* ─── Side rails ─── */
.fx-side { position: sticky; top: 96px; }
.fx-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; color: var(--fx-ink-3);
  margin: 0 12px 12px;
}
.fx-nav { list-style: none; padding: 0; margin: 0 0 28px; }
.fx-nav li a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: var(--fx-r-sm);
  color: var(--fx-ink-2); font-size: 14.5px; font-weight: 500;
  transition: all 0.15s ease; position: relative;
}
.fx-nav li a svg { width: 19px; height: 19px; stroke-width: 1.75; }
.fx-nav li a:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-nav li.active a { background: var(--fx-warm-soft); color: var(--fx-warm-deep); }
.fx-nav li.active a::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--fx-warm); border-radius: 0 3px 3px 0;
}

/* ─── Cards & containers ─── */
.fx-card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-r-lg);
  padding: 24px;
}

/* ─── Buttons ─── */
.fx-btn {
  background: var(--fx-ink); color: var(--fx-paper);
  /* Transparent border reserves the pixel: hover/focus may RECOLOR it but
     never add it — adding a border on hover resizes the button and makes
     the whole row jump. */
  border: 1px solid transparent; padding: 10px 22px; border-radius: 100px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.fx-btn:hover { background: var(--fx-warm-deep); }
.fx-btn:disabled { background: var(--fx-ink-4); cursor: not-allowed; transform: none; }
.fx-btn svg { width: 16px; height: 16px; stroke-width: 2; }

.fx-btn-secondary {
  background: var(--fx-paper-deep);
  color: var(--fx-ink);
}
.fx-btn-secondary:hover {
  background: var(--fx-surface);
  border-color: var(--fx-line);
}

.fx-btn-warm {
  background: var(--fx-warm);
  color: var(--fx-paper);
}
.fx-btn-warm:hover {
  background: var(--fx-warm-deep);
}

/* ─── Chips (rank badges) ─── */
.fx-chip {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 100px;
  background: var(--fx-warm-soft); color: var(--fx-warm-deep);
  display: inline-flex; align-items: center; gap: 4px;
}
.fx-chip svg { width: 11px; height: 11px; stroke-width: 2; }
.fx-chip.tier-famous      { background: #fef9c3; color: #854d0e; }
.fx-chip.tier-influencer  { background: #fdf2f8; color: #9d174d; }
.fx-chip.tier-trendsetter { background: #f5f3ff; color: #5b21b6; }
.fx-chip.tier-buzzing     { background: #eff6ff; color: #1e40af; }
.fx-chip.tier-poppin      { background: #ecfdf5; color: #047857; }
.fx-chip.tier-popular     { background: #f0fdf4; color: #166534; }
.fx-chip.tier-member      { background: var(--fx-paper-deep); color: var(--fx-ink-2); }

/* ─── Form elements ─── */
.fx-input, .fx-textarea, .fx-select {
  width: 100%;
  background: var(--fx-paper-deep);
  border: 1px solid transparent;
  border-radius: var(--fx-r);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--fx-ink);
  transition: all 0.15s ease;
}
.fx-input:focus, .fx-textarea:focus, .fx-select:focus {
  outline: none;
  background: var(--fx-surface);
  border-color: var(--fx-line);
  box-shadow: 0 0 0 4px var(--fx-warm-soft);
}
.fx-input::placeholder, .fx-textarea::placeholder {
  color: var(--fx-ink-4);
}
.fx-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.fx-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7d6a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}
.fx-field { margin-bottom: 20px; }
.fx-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-ink-2);
  margin-bottom: 8px;
}
.fx-field-hint {
  font-size: 12.5px;
  color: var(--fx-ink-3);
  margin-top: 6px;
  line-height: 1.4;
}

/* ─── Tabs ─── */
.fx-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--fx-line);
  margin-bottom: 24px;
  overflow: auto hidden;              /* was: overflow-x: auto; */
  -webkit-overflow-scrolling: touch;
}
.fx-tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fx-ink-3);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
  text-decoration: none;
  display: inline-block;
}
.fx-tab:hover { color: var(--fx-ink); }
.fx-tab.active {
  color: var(--fx-warm-deep);
  font-weight: 600;
}
.fx-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 12px; right: 12px;
  height: 2px;
  background: var(--fx-warm);
  border-radius: 2px 2px 0 0;
}
.fx-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: var(--fx-paper-deep);
  border-radius: 100px;
  font-size: 11.5px;
  color: var(--fx-ink-3);
  font-weight: 500;
}
.fx-tab.active .fx-tab-count {
  background: var(--fx-warm-soft);
  color: var(--fx-warm-deep);
}

/* ─── Empty states ─── */
.fx-empty {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-r-lg);
  padding: 48px 32px; text-align: center;
}
.fx-empty-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--fx-warm-soft); color: var(--fx-warm);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.fx-empty-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }
.fx-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--fx-ink); }
.fx-empty p { font-size: 14.5px; color: var(--fx-ink-3); margin: 0; line-height: 1.5; }
.fx-empty p a { color: var(--fx-warm); font-weight: 600; }

/* ─── Alerts / messages ─── */
.fx-alert {
  padding: 12px 16px;
  border-radius: var(--fx-r);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fx-alert svg { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; margin-top: 1px; }
.fx-alert-error {
  background: #fef2f2;
  color: var(--fx-danger);
}
.fx-alert-success {
  background: #f0fdf4;
  color: #166534;
}
.fx-alert-info {
  background: var(--fx-warm-soft);
  color: var(--fx-warm-deep);
}

/* ─── Responsive ─── */
@media (max-width: 980px) {
  .fx-shell {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px; padding: 24px;
  }
  .fx-shell.fx-shell-three {
    grid-template-columns: 200px minmax(0, 1fr) 280px;
  }
}
@media (max-width: 900px) {
  .fx-shell.fx-shell-three {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .fx-side.fx-side-right { display: none; }
}
@media (max-width: 700px) {
  .fx-top { padding: 12px 16px; gap: 12px; }
  .fx-search { display: none; }
  .fx-shell, .fx-shell.fx-shell-three {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 0;
  }
  .fx-side { display: none; }
  .fx-card { padding: 18px; border-radius: var(--fx-r); }
}

/* ════════════════════════════════════════════════════════════════
   Post-extras: kebab menus + inline edit for posts/comments
   ════════════════════════════════════════════════════════════════ */

.fx-post-kebab {
  margin-left: 6px;
}
.fx-post-kebab svg {
  width: 16px; height: 16px;
}

.fx-comment-kebab {
  position: absolute;
  top: 6px; right: 6px;
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--fx-ink-3);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}
.fx-comment:hover .fx-comment-kebab,
.fx-comment-kebab:focus { opacity: 1; }
.fx-comment-kebab:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-comment-kebab svg { width: 14px; height: 14px; display: block; }

.fx-kebab-menu {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-r-sm);
  box-shadow: 0 6px 24px rgba(28, 24, 20, 0.15);
  padding: 6px;
  min-width: 140px;
  z-index: 1000;
  display: flex; flex-direction: column;
}
.fx-kebab-item {
  background: transparent; border: none;
  text-align: left; padding: 8px 12px;
  font-family: inherit; font-size: 13.5px;
  color: var(--fx-ink); border-radius: 6px;
  cursor: pointer;
}
.fx-kebab-item:hover { background: var(--fx-paper-deep); }
.fx-kebab-danger { color: #c0392b; }
.fx-kebab-danger:hover { background: #fce9e6; }

.fx-edit-wrap {
  margin: 8px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fx-edit-area {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 14.5px; line-height: 1.5;
  padding: 12px 14px; border-radius: var(--fx-r);
  border: 1px solid var(--fx-line);
  background: var(--fx-paper-deep);
  color: var(--fx-ink); resize: vertical;
  min-height: 80px;
}
.fx-edit-area:focus {
  outline: none; background: var(--fx-surface);
  border-color: var(--fx-warm);
}

.fx-comment-edit {
  margin: 2px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fx-edit-area-sm {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 14px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--fx-line);
  background: var(--fx-surface);
  color: var(--fx-ink); resize: vertical;
  min-height: 48px;
}
.fx-edit-area-sm:focus { outline: none; border-color: var(--fx-warm); }

.fx-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.fx-edit-cancel, .fx-edit-save {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 100px;
  cursor: pointer; border: none;
}
.fx-edit-cancel {
  background: transparent; color: var(--fx-ink-3);
}
.fx-edit-cancel:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-edit-save {
  background: var(--fx-warm); color: white;
}
.fx-edit-save:hover { background: var(--fx-warm-deep); }

/* ════════════════════════════════════════════════════════════════
   Save modal + Saved-list rendering
   ════════════════════════════════════════════════════════════════ */

.fx-save-btn svg { width: 17px; height: 17px; }
.fx-save-btn.fx-saved { color: var(--fx-warm); }
.fx-save-btn.fx-saved:hover { background: var(--fx-warm-soft); }

.fx-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(28, 24, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fx-fade-in 0.15s ease;
}
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fx-modal {
  background: var(--fx-surface);
  border-radius: var(--fx-r-lg);
  box-shadow: 0 24px 48px rgba(28, 24, 20, 0.25);
  width: 100%; max-width: 460px;
  max-height: 85vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.fx-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--fx-line);
  display: flex; align-items: center; justify-content: space-between;
}
.fx-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fx-ink); }
.fx-modal-close {
  background: transparent; border: none;
  font-size: 24px; line-height: 1;
  color: var(--fx-ink-3); cursor: pointer;
  padding: 0 4px;
}
.fx-modal-close:hover { color: var(--fx-ink); }

.fx-modal-body {
  padding: 12px 20px;
  overflow-y: auto;
  flex: 1; min-height: 0;
}

.fx-save-note {
  font-size: 13px; color: var(--fx-ink-3);
  padding: 14px 4px;
  text-align: center;
}

.fx-save-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--fx-r-sm);
  cursor: pointer; transition: background 0.12s ease;
}
.fx-save-list-row:hover { background: var(--fx-paper-deep); }
.fx-save-list-cb {
  width: 18px; height: 18px; accent-color: var(--fx-warm);
  cursor: pointer; margin: 0;
}
.fx-save-list-name { flex: 1; font-size: 14px; color: var(--fx-ink); }
.fx-save-list-default {
  font-size: 10.5px; font-weight: 600;
  color: var(--fx-ink-3);
  background: var(--fx-paper-deep);
  padding: 2px 6px; border-radius: 100px;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fx-save-list-vis {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fx-save-list-private { background: var(--fx-paper-deep); color: var(--fx-ink-3); }
.fx-save-list-public  { background: var(--fx-warm-soft);  color: var(--fx-warm); }
.fx-save-list-count {
  font-size: 12px; color: var(--fx-ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 24px; text-align: right;
}

.fx-new-list-form {
  display: flex; gap: 8px; margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--fx-line-soft);
}
.fx-new-list-name {
  flex: 1; font-family: inherit; font-size: 13.5px;
  padding: 7px 11px; border-radius: var(--fx-r-sm);
  border: 1px solid var(--fx-line);
  background: var(--fx-paper);
}
.fx-new-list-name:focus { outline: none; border-color: var(--fx-warm); }
.fx-new-list-vis {
  font-family: inherit; font-size: 13px;
  padding: 7px 8px; border-radius: var(--fx-r-sm);
  border: 1px solid var(--fx-line);
  background: var(--fx-surface);
}
.fx-new-list-add {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--fx-line);
  background: var(--fx-surface); color: var(--fx-ink);
  cursor: pointer;
}
.fx-new-list-add:hover:not(:disabled) { background: var(--fx-paper-deep); }
.fx-new-list-add:disabled { opacity: 0.5; cursor: not-allowed; }

.fx-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--fx-line);
  display: flex; gap: 10px; justify-content: flex-end;
}
.fx-modal-cancel, .fx-modal-save {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 18px; border-radius: 100px;
  cursor: pointer; border: none;
}
.fx-modal-cancel {
  background: transparent; color: var(--fx-ink-3);
}
.fx-modal-cancel:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-modal-save {
  background: var(--fx-warm); color: white;
}
.fx-modal-save:hover:not(:disabled) { background: var(--fx-warm-deep); }
.fx-modal-save:disabled { background: var(--fx-ink-4); cursor: not-allowed; }

/* ──── Saved tab on profile / user pages ──── */
.fx-saved-lists-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.fx-saved-list-chip {
  font-size: 13px; font-weight: 500;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--fx-line);
  background: var(--fx-surface); color: var(--fx-ink-3);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.fx-saved-list-chip:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-saved-list-chip.active {
  background: var(--fx-warm); color: white;
  border-color: var(--fx-warm);
}
.fx-saved-list-chip-count {
  margin-left: 6px;
  font-size: 11px; font-weight: 600; opacity: 0.7;
}
.fx-saved-empty {
  text-align: center; padding: 40px 20px;
  color: var(--fx-ink-3);
}

/* ──── Search results page ──── */
.fx-search-page-section {
  margin-bottom: 28px;
}
.fx-search-page-section-head {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fx-ink-3);
  margin-bottom: 10px;
}
.fx-search-result-card {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-r);
  padding: 14px 18px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease;
}
.fx-search-result-card:hover { border-color: var(--fx-warm); }
.fx-search-result-title {
  font-size: 14.5px; font-weight: 600; color: var(--fx-ink);
}
.fx-search-result-sub {
  font-size: 12.5px; color: var(--fx-ink-3); margin-top: 2px;
}

/* ──── Threaded comment replies ──── */
.fx-comment.fx-comment-reply {
  margin-left: 36px;  /* indent reply relative to parent */
  margin-top: -4px;   /* visually tighter to its parent */
}
.fx-comment-replies-wrap {
  /* container that .fx-comment-reply elements get appended into */
  margin-left: 36px;
}
.fx-reply-link {
  font-size: 11.5px; font-weight: 500;
  color: var(--fx-ink-3); cursor: pointer;
  margin-left: 8px;
  text-decoration: none;
}
.fx-reply-link:hover { color: var(--fx-warm); }
.fx-reply-form {
  display: flex; gap: 10px; align-items: flex-end;
  margin: 8px 0 12px 36px;
}
.fx-reply-form .fx-comment-input { font-size: 13.5px; min-height: 36px; }

/* Hide the Reply link on already-nested replies — replies stay one level deep. */
.fx-comment.fx-comment-reply .fx-reply-link { display: none; }

/* ════════════════════════════════════════════════════════════════
   FleauxDialog — themed alert / confirm / report
   Reuses .fx-modal-overlay / .fx-modal / .fx-modal-head/body/foot
   from the save modal. Below are the dialog-specific additions.
   ════════════════════════════════════════════════════════════════ */

.fx-dialog { max-width: 420px; }
.fx-dialog-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--fx-ink); }
.fx-dialog-body { padding: 16px 20px 4px; }
.fx-dialog-message {
  margin: 0 0 8px;
  font-size: 14.5px; line-height: 1.5; color: var(--fx-ink-2);
  white-space: pre-wrap;
}
.fx-dialog-foot { padding-top: 14px; padding-bottom: 14px; }

/* Danger variant of the primary save/confirm button (used for delete confirms) */
.fx-modal-save.fx-modal-danger {
  background: #c0392b;
}
.fx-modal-save.fx-modal-danger:hover:not(:disabled) {
  background: #962d22;
}

/* Report dialog */
.fx-report-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  margin: 10px 0 16px;
}
.fx-report-reason {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--fx-r-sm);
  cursor: pointer;
  font-size: 13.5px; color: var(--fx-ink);
  transition: background 0.12s ease;
}
.fx-report-reason:hover { background: var(--fx-paper-deep); }
.fx-report-reason input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--fx-warm);
  margin: 0; cursor: pointer;
}
.fx-report-details-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--fx-ink-3);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fx-report-details {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13.5px; line-height: 1.45;
  padding: 10px 12px; border-radius: var(--fx-r-sm);
  border: 1px solid var(--fx-line);
  background: var(--fx-paper);
  color: var(--fx-ink);
  resize: vertical; min-height: 64px; max-height: 160px;
}
.fx-report-details:focus { outline: none; border-color: var(--fx-warm); }

@media (max-width: 520px) {
  .fx-report-reasons { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   Infinite scroll
   ════════════════════════════════════════════════════════════════ */

.fx-feed-container {
  /* No layout change vs. the original inline feed; just a container so the
     sentinel has a parent and the JS can read data-feed-offset. */
}
.fx-feed-sentinel {
  min-height: 60px;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-feed-loading {
  font-size: 13px;
  color: var(--fx-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fx-feed-loading::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--fx-line);
  border-top-color: var(--fx-warm);
  border-radius: 50%;
  animation: fx-spin 0.7s linear infinite;
}
@keyframes fx-spin {
  to { transform: rotate(360deg); }
}
.fx-feed-end {
  font-size: 13px;
  color: var(--fx-ink-3);
  font-style: italic;
  padding: 4px 16px;
}
.fx-feed-load-btn {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  color: var(--fx-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 100px;
  cursor: pointer;
}
.fx-feed-load-btn:hover { background: var(--fx-paper-deep); }

/* ════════════════════════════════════════════════════════════════
   Keyboard shortcuts: focused-post highlight + help overlay
   ════════════════════════════════════════════════════════════════ */

article.fx-post.fx-kbd-focus {
  box-shadow: 0 0 0 2px var(--fx-warm);
  outline: none;
  scroll-margin-top: 80px;  /* keep below the sticky topbar when scrolled to */
}

.fx-kbd-help {
  background: var(--fx-surface);
  border-radius: var(--fx-r-lg);
  padding: 24px 28px;
  box-shadow: 0 24px 48px rgba(28, 24, 20, 0.25);
  max-width: 420px;
  width: 100%;
}
.fx-kbd-help h3 {
  margin: 0 0 16px;
  font-size: 17px; font-weight: 700; color: var(--fx-ink);
}
.fx-kbd-help dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  margin: 0;
}
.fx-kbd-help dt {
  display: inline-flex;
  gap: 4px;
}
.fx-kbd-help kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  padding: 3px 8px;
  background: var(--fx-paper-deep);
  border: 1px solid var(--fx-line);
  border-radius: 6px;
  color: var(--fx-ink);
  box-shadow: 0 1px 0 var(--fx-line);
  line-height: 1;
}
.fx-kbd-help dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--fx-ink-2);
  align-self: center;
}
.fx-kbd-help-hint {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--fx-line-soft);
  font-size: 12px;
  color: var(--fx-ink-3);
}

/* ════════════════════════════════════════════════════════
   DARK MODE
   Activated by `data-theme="dark"` on <html>. Theme is set
   inline in <head> before any paint to prevent FOUC.

   Strategy: override the existing CSS custom properties.
   ~90% of the design system flows through these vars so the
   override handles the bulk of the work.

   Hardcoded chip colors (tier-poppin, tier-buzzing, etc.) are
   intentionally preserved \u2014 they're brand-coded and read fine
   on dark backgrounds with their colored bg + colored text.

   Specific overrides are listed AFTER the var redefinition for
   the few places that hardcoded a light-mode color (error alerts,
   the danger kebab hover, etc.).
   ════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* Paper stack: warm-tinted darks rather than pure black */
  --fx-paper:       #13110e;   /* page background */
  --fx-paper-deep:  #1a1714;   /* slightly elevated (inputs, search bar) */
  --fx-surface:     #1f1b16;   /* cards, modals */

  /* Lines: subtle warm-tinted borders */
  --fx-line:        #332e25;
  --fx-line-soft:   #29241d;

  /* Ink: inverted scale, warm-tinted text */
  --fx-ink:         #f4f0e6;   /* primary \u2014 high contrast */
  --fx-ink-2:       #c9bfa9;   /* secondary */
  --fx-ink-3:       #8b7d6a;   /* tertiary (timestamps, hints) */
  --fx-ink-4:       #6e6353;   /* quaternary (very dim) */

  /* Warm accent: KEEP the orange. It's the brand and pops on dark. */
  --fx-warm:        #e8590c;   /* slightly brighter for dark-bg contrast */
  --fx-warm-deep:   #ea580c;   /* hover/active */
  --fx-warm-soft:   #3a2418;   /* subtle warm bg (e.g. focus ring) */
  --fx-warm-bg:     #2a1b12;   /* warm card / banner bg */

  /* Flow gradients */
  --fx-flow-1:      #e8590c;
  --fx-flow-2:      #f97316;

  /* Status colors: more saturated for dark-bg legibility */
  --fx-success:     #84cc16;
  --fx-danger:      #ef4444;
}

/* ─── Top bar: backdrop-filter blur uses an explicit color value, override ─── */
html[data-theme="dark"] .fx-top {
  background: rgba(19, 17, 14, 0.92);
}

/* ─── Error alert background was hardcoded; pick a dark-friendly red ─── */
html[data-theme="dark"] .fx-alert-error {
  background: #2a1414;
}

/* ─── Kebab danger hover was hardcoded pale-pink; use darker red wash ─── */
html[data-theme="dark"] .fx-kebab-danger:hover {
  background: #3a1818;
}

/* ─── Danger modal save button hover \u2014 the bold red still works on dark.
       Original is `background: #962d22` which is fine; no override needed. ─── */

/* ─── Engagement-tier chips: hardcoded by design (brand). They read OK on
       dark because each has a saturated bg + dark text; the bg becomes the
       dominant signal. Leaving as-is. If desired later, we can re-tone
       each chip for dark mode specifically. ─── */

/* ─── Image rendering: dim user-content images slightly so they don't
       blow out against the dark page. Subtle \u2014 ~5% reduction. ─── */
html[data-theme="dark"] img:not(.fx-avatar):not([data-no-dim]) {
  filter: brightness(0.92);
}

/* ─── Form inputs: ensure their explicit bg follows the theme ─── */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color-scheme: dark;
}

/* ─── Scrollbar: subtle dark scrollbar (webkit only) ─── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--fx-paper); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--fx-line); border-radius: 6px;
  border: 3px solid var(--fx-paper);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--fx-ink-4); }

/* ────────────────────────────────────────────────────────
   Theme toggle button (lives in topbar)
   ──────────────────────────────────────────────────────── */
.fx-theme-toggle {
  background: transparent;
  border: 1px solid var(--fx-line);
  color: var(--fx-ink-2);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.fx-theme-toggle:hover {
  background: var(--fx-paper-deep);
  border-color: var(--fx-ink-4);
}
.fx-theme-toggle svg { width: 18px; height: 18px; }
.fx-theme-toggle .fx-theme-icon-light { display: inline; }
.fx-theme-toggle .fx-theme-icon-dark  { display: none; }
.fx-theme-toggle .fx-theme-icon-auto  { display: none; }
html[data-theme="dark"] .fx-theme-toggle .fx-theme-icon-light { display: none; }
html[data-theme="dark"] .fx-theme-toggle .fx-theme-icon-dark  { display: inline; }
/* Auto mode wins regardless of resolved dark/light: hide both light & dark
   icons and show the auto icon. Same specificity prefix as the dark rules
   so source order resolves the tie. */
html .fx-theme-toggle[data-mode="auto"] .fx-theme-icon-light,
html .fx-theme-toggle[data-mode="auto"] .fx-theme-icon-dark { display: none; }
html .fx-theme-toggle[data-mode="auto"] .fx-theme-icon-auto { display: inline; }

/* ─── Visibility badges (Public / Circle / Only me): the light-mode
       palette is pale-pastel; on dark we use darker tinted bgs with
       brighter text. Originally defined in home.php inline style;
       overriding here so every page picks them up. ─── */
html[data-theme="dark"] .fx-vis-public  { background: #14291f; color: #84cc16; }
html[data-theme="dark"] .fx-vis-circle  { background: #2a1f0d; color: #fbbf24; }
html[data-theme="dark"] .fx-vis-only_me { background: #2a1818; color: #ef4444; }

/* ─── Media: post image grids, composer attachments, profile banner ─── */
.fx-post-imgs {
  display: grid; gap: 6px; margin: 10px 0 4px;
  border-radius: 12px; overflow: hidden;
}
.fx-post-imgs.count-1 { grid-template-columns: 1fr; }
.fx-post-imgs.count-2 { grid-template-columns: 1fr 1fr; }
.fx-post-imgs.count-3 { grid-template-columns: 1fr 1fr; }
.fx-post-imgs.count-3 .fx-post-img:first-child { grid-column: 1 / -1; }
.fx-post-imgs.count-4 { grid-template-columns: 1fr 1fr; }
.fx-post-img { display: block; background: var(--fx-paper-deep); }
.fx-post-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  max-height: 420px;
}
.fx-post-imgs.count-1 .fx-post-img img { max-height: 520px; object-fit: contain; background: var(--fx-paper-deep); }

.fx-photo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px; cursor: pointer;
  color: var(--fx-ink-3); font-size: 13.5px; border: 1px solid var(--fx-line);
  background: transparent; transition: background .12s ease, color .12s ease;
}
.fx-photo-btn:hover { background: var(--fx-paper-deep); color: var(--fx-ink); }
.fx-photo-btn svg { width: 17px; height: 17px; }
.fx-photo-strip { display: flex; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
/* author display:flex would defeat the hidden attribute without this */
.fx-photo-strip[hidden] { display: none; }
.fx-photo-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--fx-line);
}

.fx-banner-edit { margin-top: 18px; }
.fx-banner-preview {
  width: 100%; aspect-ratio: 3 / 1; border-radius: 12px;
  background: var(--fx-paper-deep) center / cover no-repeat;
  border: 1px solid var(--fx-line); margin: 8px 0 10px;
}
.fx-banner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fx-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fx-ink-2); cursor: pointer; }

/* ─── Lightbox overlay ─── */
.fx-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12, 10, 8, .92);
  display: none; align-items: center; justify-content: center;
}
.fx-lightbox.open { display: flex; }
.fx-lb-figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.fx-lb-img {
  max-width: 92vw; max-height: 82vh;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.fx-lb-cap { color: #e8e2d8; font-size: 14px; margin-top: 12px; line-height: 1.4; }
.fx-lb-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer; opacity: .8; z-index: 2;
}
.fx-lb-close:hover { opacity: 1; }
.fx-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border: none; color: #fff;
  font-size: 22px; width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; transition: background .12s ease; z-index: 2;
}
.fx-lb-nav:hover { background: rgba(255,255,255,.18); }
.fx-lb-prev { left: 18px; }
.fx-lb-next { right: 18px; }
.fx-lb-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #cfc8bc; font-size: 13px; letter-spacing: .04em;
}
@media (max-width: 640px) {
  .fx-lb-nav { width: 40px; height: 40px; font-size: 18px; }
  .fx-lb-prev { left: 8px; } .fx-lb-next { right: 8px; }
}

/* ─── Composer thumbs: remove ✕ + context menu ─── */
.fx-photo-thumb-wrap { position: relative; display: inline-block; }
.fx-photo-x {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(20, 16, 12, .85); color: #fff;
  font-size: 15px; line-height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: background .12s ease, transform .12s ease;
}
.fx-photo-x:hover { background: #b3261e; transform: scale(1.08); }

.fx-ctx-menu {
  position: fixed; z-index: 1200; display: none;
  min-width: 160px; padding: 6px;
  background: var(--fx-surface); border: 1px solid var(--fx-line);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.fx-ctx-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; border-radius: 7px;
  background: none; cursor: pointer;
  font-size: 13.5px; color: var(--fx-ink);
}
.fx-ctx-item:hover { background: var(--fx-paper-deep); }
.fx-ctx-danger { color: #b3261e; font-weight: 500; }
.fx-ctx-danger:hover { background: rgba(179, 38, 30, .09); }

/* ─── Post editor: image removal + visibility ─── */
.fx-edit-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.fx-edit-img { position: relative; }
.fx-edit-img img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--fx-line);
  transition: opacity .12s ease, filter .12s ease;
}
.fx-edit-img.marked img { opacity: .35; filter: grayscale(.8); }
.fx-edit-img.marked::after {
  content: "Removing"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: #fff; background: rgba(179, 38, 30, .92);
  padding: 3px 8px; border-radius: 6px; pointer-events: none;
}
.fx-edit-img .fx-photo-x { z-index: 2; }
/* Editable audience pill: the header badge becomes the control in edit mode */
.fx-vis-badge.fx-vis-editing {
  cursor: pointer; user-select: none;
  outline: 1.5px dashed var(--fx-warm);
  outline-offset: 2px; border-radius: 100px;
  transition: background .12s ease;
}
.fx-vis-badge.fx-vis-editing:hover { background: var(--fx-paper-deep); }
.fx-evis-chev { width: 12px; height: 12px; margin-left: 2px; }

.fx-evis-menu {
  position: fixed; z-index: 1200;
  min-width: 230px; padding: 6px;
  background: var(--fx-surface); border: 1px solid var(--fx-line);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.16);
}
.fx-evis-opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 11px; border: none; border-radius: 8px;
  background: none; cursor: pointer; color: var(--fx-ink);
}
.fx-evis-opt:hover { background: var(--fx-paper-deep); }
.fx-evis-opt.selected { background: var(--fx-paper-deep); }
.fx-evis-opt.selected .fx-evis-label { color: var(--fx-warm); }
.fx-evis-opt svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--fx-ink-2); }
.fx-evis-txt { display: flex; flex-direction: column; gap: 1px; }
.fx-evis-label { font-size: 13.5px; font-weight: 600; }
.fx-evis-desc { font-size: 12px; color: var(--fx-ink-3); }

/* ─── Online presence ring ─── */
/* Green ring around the avatar of a member who is online and active.
   Layered so it composes with .with-ring on profile headers: paper gap,
   then the status color. */
.fx-avatar.fx-online {
  box-shadow:
    0 0 0 2px var(--fx-paper),
    0 0 0 4px #16a34a;
}
.fx-avatar.xl.fx-online, .fx-avatar.lg.fx-online {
  box-shadow:
    0 0 0 3px var(--fx-paper),
    0 0 0 6px #16a34a;
}
html[data-theme="dark"] .fx-avatar.fx-online {
  box-shadow:
    0 0 0 2px var(--fx-paper),
    0 0 0 4px #22c55e;
}
html[data-theme="dark"] .fx-avatar.xl.fx-online,
html[data-theme="dark"] .fx-avatar.lg.fx-online {
  box-shadow:
    0 0 0 3px var(--fx-paper),
    0 0 0 6px #22c55e;
}

/* ─── Messages overhaul: modal, member picker, ctx separator ─── */
.fx-conv-header-btns { display: flex; gap: 8px; }

/* fx-dlg: native <dialog> overlays (top layer — immune to ancestor
   transforms AND to the legacy .fx-modal component owned by dialogs.js,
   whose max-width:460px was left-pinning these before the rename). */
dialog.fx-dlg {
  border: none; padding: 0; background: transparent;
  max-width: none; max-height: none; overflow: visible;
}
dialog.fx-dlg::backdrop { background: rgba(12, 10, 8, .5); }
.fx-dlg-panel {
  width: min(440px, 92vw); max-height: 82vh;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--fx-surface); border: 1px solid var(--fx-line);
  border-radius: 16px; padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.fx-dlg-head { display: flex; align-items: center; justify-content: space-between; }
.fx-dlg-head h3 { margin: 0; font-size: 17px; }
.fx-dlg-x {
  border: none; background: none; color: var(--fx-ink-3);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.fx-dlg-x:hover { color: var(--fx-ink); }
.fx-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; }

.fx-picker-list {
  flex: 1; min-height: 180px; overflow-y: auto;
  border: 1px solid var(--fx-line); border-radius: 10px; padding: 4px;
}
.fx-picker-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 8px 10px;
  border: none; border-radius: 8px; background: none;
  cursor: pointer; color: var(--fx-ink);
}
.fx-picker-row:hover { background: var(--fx-paper-deep); }
.fx-picker-row.selected { background: var(--fx-warm-soft); }
.fx-picker-name { font-weight: 600; font-size: 14px; }
.fx-picker-user { color: var(--fx-ink-3); font-size: 12.5px; }
.fx-picker-check { margin-left: auto; color: var(--fx-warm); font-weight: 700; }
.fx-picker-empty { padding: 26px 12px; text-align: center; color: var(--fx-ink-3); font-size: 13.5px; }
.fx-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-picker-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--fx-warm-soft); color: var(--fx-warm-deep);
  border-radius: 100px; padding: 4px 6px 4px 11px;
  font-size: 12.5px; font-weight: 600;
}
.fx-picker-chip button {
  border: none; background: none; cursor: pointer;
  color: inherit; font-size: 15px; line-height: 1; padding: 0 3px;
}
.fx-ctx-sep { height: 1px; background: var(--fx-line); margin: 5px 6px; }

/* ─── Away presence ring (recently active, ~30 min) ─── */
.fx-avatar.fx-away {
  box-shadow:
    0 0 0 2px var(--fx-paper),
    0 0 0 4px #d97706;
}
.fx-avatar.xl.fx-away, .fx-avatar.lg.fx-away {
  box-shadow:
    0 0 0 3px var(--fx-paper),
    0 0 0 6px #d97706;
}
html[data-theme="dark"] .fx-avatar.fx-away {
  box-shadow:
    0 0 0 2px var(--fx-paper),
    0 0 0 4px #f59e0b;
}
html[data-theme="dark"] .fx-avatar.xl.fx-away,
html[data-theme="dark"] .fx-avatar.lg.fx-away {
  box-shadow:
    0 0 0 3px var(--fx-paper),
    0 0 0 6px #f59e0b;
}

/* ─── Default avatar (site-wide fallback) ─── */
/* Every avatar circle carries the platform default image at the stylesheet
   layer; members with a real avatar override it via the inline
   background-image their markup already sets, so no per-page code is needed.
   ⚠ Keep this URL in sync with FX_DEFAULT_AVATAR in includes/config.php —
   both change together when the custom media domain is connected. */
.fx-avatar,
.fx-notif-avatar,
.fx-mention-avatar {
  background-image: url('https://pub-a0f4169fc1cc437e96b793040bf2056f.r2.dev/defaults/default-avatar.png');
  background-size: cover;
  background-position: center;
}


/* ─── Custom-theme derived shades ─── */
/* A member's theme sets four roles (background, surface, text, accent), but
   the UI runs on many DERIVED shades — muted labels, hairlines, wells. When
   a custom theme is active (body.fx-themed on profile pages), derive every
   one of those from the member's own colors, so "muted" always means "their
   text faded toward their background" and stays readable on any palette.
   This also replaces the previously mismatched --fx-paper-deep on themed
   pages. Percentage = how much of the first color survives the mix. */
body.fx-themed {
  --fx-ink-2:      color-mix(in srgb, var(--fx-ink) 82%, var(--fx-paper));
  --fx-ink-3:      color-mix(in srgb, var(--fx-ink) 62%, var(--fx-paper));
  --fx-ink-4:      color-mix(in srgb, var(--fx-ink) 44%, var(--fx-paper));
  --fx-line:       color-mix(in srgb, var(--fx-ink) 16%, var(--fx-paper));
  --fx-line-soft:  color-mix(in srgb, var(--fx-ink) 10%, var(--fx-paper));
  --fx-paper-deep: color-mix(in srgb, var(--fx-ink)  7%, var(--fx-paper));
  --fx-warm-soft:  color-mix(in srgb, var(--fx-warm) 14%, var(--fx-paper));
  --fx-warm-bg:    color-mix(in srgb, var(--fx-warm)  7%, var(--fx-paper));
  --fx-warm-deep:  color-mix(in srgb, var(--fx-warm) 72%, var(--fx-ink));
}


/* ─── Dialog theme armor ─── */
/* Floating utility overlays — report, confirm, alert (dialogs.js) and the
   save-to-list modal (post-extras.js) — must stay readable no matter what
   colors a member's profile theme sets on <body>. Keyed on the BASE
   overlay class so every dynamically-created .fx-modal-overlay is armored;
   re-declaring the full token set stops custom-property inheritance dead.
   Values mirror :root / dark exactly; keep in sync if the core palettes
   change. (Page-native fx-dlg modals are separate and stay page-styled.) */
.fx-modal-overlay {
  --fx-paper:#fbf9f4; --fx-paper-deep:#f4f0e6; --fx-surface:#fff;
  --fx-line:#ebe4d4; --fx-line-soft:#f1ebdd;
  --fx-ink:#1c1814; --fx-ink-2:#4a3f33; --fx-ink-3:#8b7d6a; --fx-ink-4:#b5a994;
  --fx-warm:#c2410c; --fx-warm-deep:#7c2d12; --fx-warm-soft:#fef3ec; --fx-warm-bg:#fdf6ee;
  --fx-flow-1:#c2410c; --fx-flow-2:#ea580c;
}
html[data-theme="dark"] .fx-modal-overlay {
  --fx-paper:#13110e; --fx-paper-deep:#1a1714; --fx-surface:#1f1b16;
  --fx-line:#332e25; --fx-line-soft:#29241d;
  --fx-ink:#f4f0e6; --fx-ink-2:#c9bfa9; --fx-ink-3:#8b7d6a; --fx-ink-4:#6e6353;
  --fx-warm:#e8590c; --fx-warm-deep:#ea580c; --fx-warm-soft:#3a2418; --fx-warm-bg:#2a1b12;
  --fx-flow-1:#e8590c; --fx-flow-2:#f97316;
}