/* Local Marketplace - modern mobile-first */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --text: #1c1e21;
  --muted: #65676b;
  --primary: #1877f2;
  --primary-dark: #166fe5;
  --green: #31a24c;
  --red: #e41e3f;
  --border: #dddfe2;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.topbar {
  background: var(--header-bg, var(--surface));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-inner {
  max-width: none;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  min-height: 74px;
}
.topbar .brand { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.nav-toggle { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); z-index: 51; }
.topbar-welcome {
  font-size: 18px;
  font-weight: 700;
  color: var(--title-color, #f26522);
  text-align: center;
  line-height: 1.3;
}
.welcome-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}
.topbar-clock {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
}
.brand { font-weight: 700; font-size: 19px; color: var(--primary); text-decoration: none; }
.nav-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
}
.nav-link:hover { background: var(--bg); }
.nav-link .badge {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  margin-left: 4px;
  vertical-align: middle;
}
.btn-nav {
  background: var(--primary);
  color: #fff !important;
}
.btn-nav:hover { background: var(--primary-dark); }

/* Mobile nav toggle (hamburger) — hidden on desktop, shown on phones */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px;
}
.nav-toggle-bar {
  width: 24px; height: 3px; background: var(--primary); border-radius: 2px;
}

@media (max-width: 860px) {
  .topbar-inner { flex-wrap: wrap; position: relative; }
  .nav-toggle { display: flex; left: 16px; }
  .topbar .brand { left: 66px; height: 48px; }
  .topbar .brand img { height: 48px !important; }
  .nav-link:hover { background: var(--bg); }
}

/* Layout: full-screen sidebar + content */
.layout-wrap {
  flex: 1 0 auto;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding-left: 240px;
}
@media (max-width: 860px) {
  .layout-wrap { padding-left: 0; }
}
/* Chat page: hide category sidebar + full-bleed content */
.layout-wrap.chat-layout { padding-left: 0; }
.layout-wrap.chat-layout .sidebar { display: none; }
.layout-wrap.chat-layout .container { width: 100%; max-width: 100%; display: flex; flex-direction: column; }
.layout-wrap.forums-layout { padding-left: 0; }
.layout-wrap.forums-layout .sidebar { display: none; }
.layout-wrap.forums-layout .container { width: 100%; max-width: 100%; display: flex; flex-direction: column; }
.layout-wrap.forums-layout .forums-wrap { width: 100%; max-width: 1100px; margin: 0 auto; }
/* Chat fills the full remaining screen height */
.layout-wrap.chat-layout .chat-shell {
  flex: 1 1 auto;
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 150px);
  margin-top: 0;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding-top: 118px;
  overflow: hidden;
  z-index: 40;
}
.topnav {
  display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap;
  flex-shrink: 0;
  background: #fdf3ec;
  border: 1px solid rgba(242,101,34,0.18);
  border-radius: var(--radius);
  padding: 3px 8px;
  margin: 6px 12px 10px;
  position: relative;
}
.topnav .nav-link {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.topnav .nav-link:hover { background: var(--bg); }
.topnav .nav-link.active { background: var(--primary); color: #fff; }
.topnav .btn-login,
.topnav .btn-nav {
  text-align: center;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
}
.topnav .btn-login { background: var(--green); color: #fff; }
.topnav .btn-login:hover { background: #2a8740; }
.topnav .btn-nav { background: var(--primary); color: #fff; }
.topnav .btn-nav:hover { background: var(--primary-dark); }

/* Invite link absolutely pinned to the far right of the nav bar, out of the flex flow
   so the centered main links are unaffected. */
.topnav .nav-invite {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary); color: #fff;
  padding: 3px 10px; font-size: 12px; border-radius: 6px;
}
.topnav .nav-invite:hover { background: var(--primary-dark); }
/* On mobile, invite becomes a normal in-flow link so it wraps on its own row
   instead of absolutely overlapping the centered links. Placed AFTER the
   desktop rule so it wins the cascade (equal specificity). */
@media (max-width: 860px) {
  .topnav .nav-invite {
    position: static;
    transform: none;
    margin-left: 4px;
  }
}

/* Settings dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown .dd-caret { font-size: 11px; color: var(--muted); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  padding: 6px;
  z-index: 100;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu .dd-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--text, #1e293b);
}
.nav-dropdown-menu .dd-item:hover { background: var(--bg); }

.sidebar-cats-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.sidebar-divider { border: none; border-top: 1px solid rgba(242,101,34,0.25); margin: 14px 8px 10px; }
.sidebar-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 4px 4px;
  padding: 7px 14px;
  background: #2e9e44;
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(46,158,68,.3);
  transition: background .15s;
}
.sidebar-chat-btn:hover { background: #278a3b; color: #fff; }
.sidebar-auth { background: var(--green); }
.sidebar-auth:hover { background: #2a8740; }
.sidebar-auth-2 { background: var(--primary); margin-top: 4px; }

/* Auth buttons side by side */
.sidebar-auth-row {
  display: flex;
  gap: 8px;
  margin: 12px 4px 4px;
}
.sidebar-auth-row .sidebar-chat-btn {
  flex: 1;
  justify-content: center;
  margin: 0;
  padding: 7px 6px;
  white-space: nowrap;
}
.sidebar-auth-row .sidebar-auth-2 { margin-top: 0; }
.sidebar-auth-2:hover { background: var(--primary-dark); }
.sidebar-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: #a34a12; font-weight: 700; padding: 0 14px 8px;
}
.sidebar-cats { display: flex; flex-direction: column; gap: 2px; }
.sidebar-cats .cat-link {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.sidebar-cats .cat-link:hover { background: var(--bg); color: var(--primary); }

.container {
  flex: 1;
  min-width: 0;
  padding: 24px 28px;
  width: 100%;
}
.footer {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  position: relative;
}
.footer-version {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.7;
}
.footer-links {
  margin-top: 8px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* Legal pages (About / Privacy / Terms) */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 24px;
}
.legal h1 {
  font-size: 28px;
  color: var(--text);
  margin-bottom: 10px;
}
.legal .legal-lede {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
}
.legal h2 {
  font-size: 19px;
  color: var(--text);
  margin: 26px 0 10px;
}
.legal p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 14px;
}
.legal ul {
  margin: 0 0 14px 22px;
}
.legal li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.legal a {
  color: var(--primary);
}
.legal .legal-cta {
  font-size: 15px;
  color: var(--text);
}
.legal .legal-cta a {
  font-weight: 600;
}

.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 15px;
}
.flash-success { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.flash-error { background: #fde7ea; color: #c5221f; border: 1px solid #f5c6cb; }

/* Page title */
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.time-greeting { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 10px; }
.time-greeting #time-greeting { font-weight: 600; color: var(--text); }
.btn-invite { font-size: 12px; font-weight: 600; padding: 3px 10px; margin-left: auto; border-radius: 6px; }

/* Listing grid */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .1s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e9ebee;
  display: block;
}
/* Wishlist heart on cards */
.save-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #999;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  user-select: none;
}
.save-heart.saved { color: #e0245e; }
.save-heart:hover { color: #e0245e; }
.card { position: relative; }
.save-detail-btn.saved { color: #e0245e; border-color: #e0245e; }
.card-body { padding: 10px 12px 14px; }
.card-price { font-size: 18px; font-weight: 700; }
.card-title {
  font-size: 15px;
  color: var(--text);
  margin: 3px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.card-meta { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.card-rating { color: #f5a623; font-weight: 600; }
.saved-search-list { display: flex; flex-direction: column; gap: 10px; }
.saved-search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
@media (max-width: 560px) { .saved-search-item { flex-direction: column; align-items: flex-start; } }
.sold-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  z-index: 2;
}
.card.sold .card-img, .card.sold .card-body { filter: grayscale(1); opacity: .75; }

/* Condition badge on cards — inline, to the right of the price */
.card-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cond-badge {
  display: inline-block;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  vertical-align: 1px;
}
.cond-new { background: #1a7f37; }
.cond-like-new { background: #2f7da6; }
.cond-used { background: #8a6d1a; }
.cond-for-parts { background: #a63d3d; }

/* Public user profile */
.profile-head { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.profile-head .avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; flex-shrink: 0;
  overflow: hidden;
}
.profile-head .avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.badge-admin { font-size: 12px; font-weight: 600; background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.badge-verified { font-size: 12px; font-weight: 600; background: var(--green); color: #fff; padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.profile-meta { color: var(--muted); font-size: 14px; }
.profile-rating { margin-top: 6px; font-size: 15px; }
.profile-rating .stars { color: #f5a623; letter-spacing: 1px; }
.profile-rating .count { color: var(--muted); font-size: 13px; }
.rating-comment { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rating-comment:last-child { border-bottom: none; }
.rating-comment p { margin: 4px 0 0; color: var(--text); }
.rating-row .stars { color: #f5a623; margin-right: 8px; }
.rating-row .muted { font-size: 13px; }

/* Toolbar (search + category) */
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.toolbar input[type=search], .toolbar select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--surface);
  flex: 1;
  min-width: 180px;
}
.toolbar input[type=search]:focus, .toolbar select:focus { outline: none; border-color: var(--primary); }
.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: var(--primary-dark); }
.btn-green { background: var(--green); }
.btn-green:hover { background: #2a8740; }
.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover { background: #e7f0ff; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #c91836; }
.btn-block { width: 100%; text-align: center; }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn:disabled { opacity: .6; cursor: default; }

/* Forms */
.form-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 520px;
  margin: 0 auto;
}
.form-card h1 { font-size: 20px; margin-bottom: 18px; }
.sell-card { max-width: 1100px; }
.sell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.sell-col .field:last-child { margin-bottom: 0; }
.sell-actions { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
@media (max-width: 860px) {
  .sell-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.settings-grid .form-card { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .settings-grid { grid-template-columns: 1fr; }
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
}
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--primary);
  transform: scale(1.2);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); }
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.checkbox-row input[type="checkbox"] {
  transform: scale(1.25);
  margin-top: 1px;
}
.form-error { color: var(--red); font-size: 13px; margin-bottom: 12px; }
.form-alt { text-align: center; font-size: 14px; color: var(--muted); margin-top: 16px; }
.form-alt a { color: var(--primary); font-weight: 600; text-decoration: none; }

/* Photo upload */
.photo-upload {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-slot {
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: #fafbfc;
  color: var(--muted);
  font-size: 30px;
  position: relative;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot .rm {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  z-index: 3;
}
.photo-slot.has-photo { border-style: solid; border-color: var(--primary); }
.photo-slot.removing { opacity: .4; border-color: var(--red); }
.photo-slot.removing img { filter: grayscale(1); }

/* Drop zone + tiles (multi-select / drag-and-drop) */
.photo-upload { grid-template-columns: repeat(3, 1fr); }
.photo-drop {
  grid-column: 1 / -1;
  aspect-ratio: 2.6 / 1;
  min-height: 120px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fafbfc;
  transition: border-color .15s, background .15s;
}
.photo-drop.dragover,
.photo-drop:hover { border-color: var(--primary); background: #fff7f0; }
.photo-drop-inner { text-align: center; pointer-events: none; }
.photo-drop-icon { font-size: 26px; display: block; }
.photo-drop-title { margin: 6px 0 2px; font-weight: 700; color: var(--text); font-size: 15px; }
.photo-drop-sub { margin: 0; color: var(--muted); font-size: 13px; }
.photo-drop-link { color: var(--primary); font-weight: 600; text-decoration: underline; }
.photo-drop-count { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.photo-tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: #fafbfc;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .rm {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  z-index: 3;
}
.photo-tile-size {
  position: absolute;
  bottom: 4px; left: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 3;
}
.gs-existing-photo {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
}
.gs-existing-photo .gs-keep { position: absolute; bottom: 4px; left: 4px; }
.gs-existing-photo .gs-remove-tag {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10px; padding: 2px 5px; border-radius: 6px;
}
.gs-existing-photo.removing { border-color: #a63d3d; opacity: .6; }
.gs-existing-photo.removing img { filter: grayscale(.5); }
@media (max-width: 640px) {
  .photo-upload, .photo-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* Listing detail */
.detail { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 24px; align-items: start; }
.detail-imgs { background: var(--surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.detail-main {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
}
.thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.thumbs img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 8px; cursor: pointer;
  border: 2px solid transparent;
}
.thumbs img.active { border-color: var(--primary); }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none !important; }
.lightbox img { max-width: 92%; max-height: 92%; object-fit: contain; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 16px; right: 24px;
  color: #fff; font-size: 34px; line-height: 1; cursor: pointer; font-weight: 300;
}
.detail-side { display: flex; flex-direction: column; gap: 16px; }
.detail-price { font-size: 28px; font-weight: 800; }
.detail-title { font-size: 20px; font-weight: 700; margin-top: 14px; margin-bottom: 6px; }
/* The listing title is an <h1> — keep it visually identical to the old div,
   overriding base h1 rules (28px / larger margins) so we gain semantics without
   changing the look. */
h1.detail-title { font-size: 20px; font-weight: 700; margin-top: 14px; margin-bottom: 6px; line-height: 1.3; color: var(--text); }
.detail-meta { color: var(--muted); font-size: 14px; }
.detail-desc {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.detail-desc h3 { font-size: 16px; margin-bottom: 8px; }
.detail-desc p { line-height: 1.6; font-size: 15px; color: #333; white-space: pre-wrap; }
.detail-desc .rich-desc { line-height: 1.7; font-size: 15px; color: #333; }
.detail-desc .rich-desc ul, .detail-desc .rich-desc ol { padding-left: 22px; margin: 8px 0; }
.detail-desc .rich-desc li { margin: 3px 0; }
.detail-desc .rich-desc h1, .detail-desc .rich-desc h2, .detail-desc .rich-desc h3,
.detail-desc .rich-desc h4 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; }
.detail-desc .rich-desc a { color: var(--primary); text-decoration: underline; }
.seller-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.seller-card h3 { font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.seller-name { font-weight: 700; font-size: 17px; }
.seller-city { color: var(--muted); font-size: 14px; }
.seller-no-rating { color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 2px; }
.view-profile-link { font-size: 12px; color: var(--primary); text-decoration: none; }
.view-profile-link:hover { text-decoration: underline; }
.avatar-preview img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.avatar-preview .hint { font-size: 13px; color: var(--muted); }
.about-text { color: var(--text); margin: 6px 0 0; white-space: pre-wrap; word-wrap: break-word; }

/* Messages */
.msg-layout { display: grid; grid-template-columns: 320px 1fr 300px; gap: 16px; height: 72vh; }
.msg-layout.no-addr { grid-template-columns: 320px 1fr; }
.convo-list {
  background: var(--surface);
  border-radius: var(--radius);
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.convo-item {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.convo-item:hover { background: var(--bg); }
.convo-item.active { background: #e7f0ff; }
.convo-title { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; }
.convo-sub { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo-item .badge {
  background: var(--primary); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 12px; margin-left: 6px;
}
.thread {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.thread-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.thread-header-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thread-header-main a { color: var(--text); text-decoration: none; font-size: 15px; }
.thread-header-main a:hover { text-decoration: underline; }
.thread-with { font-weight: 400; color: var(--muted); font-size: 13px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; white-space: nowrap; }
.back-to-browse { display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.back-to-browse:hover { text-decoration: underline; }

/* Admin sidebar layout */
.admin-shell { display: flex; min-height: calc(100vh - 60px); }
.admin-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  position: sticky; top: 60px; height: calc(100vh - 60px);
  display: flex; flex-direction: column; gap: 4px;
}
.admin-sidebar-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; padding: 0 10px 10px;
}
.admin-nav-link {
  display: block;
  padding: 4px 12px; border-radius: 8px;
  white-space: nowrap;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: background .15s ease, color .15s ease;
}
.admin-nav-link:hover { background: var(--primary-dark); }
.admin-nav-link.active { background: #fff; color: var(--primary); }
.admin-sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 10px 8px; }
.admin-content { flex: 1; min-width: 0; padding: 24px; }

@media (max-width: 720px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%; position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    border-right: none; border-bottom: 1px solid var(--border); padding: 10px 12px;
  }
  .admin-sidebar-title { display: none; }
  .admin-sidebar-divider { display: none; }
}

/* Admin tables */
.admin-table-wrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 12px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--bg); }
.admin-table .td-thumb { width: 56px; }
.admin-table .td-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block; }
.thumb-none { font-size: 11px; color: var(--muted); }
.admin-table .table-link { color: var(--text); font-weight: 600; text-decoration: none; }
.admin-table .table-link:hover { color: var(--primary); text-decoration: underline; }
.admin-table .table-id { font-size: 11px; color: var(--muted); display: block; }
.admin-table .table-muted { font-size: 12px; color: var(--muted); }
.admin-table .row-sold .table-link { color: var(--muted); text-decoration: line-through; }
.admin-table .td-actions { white-space: nowrap; text-align: right; }
.admin-table .td-actions .btn { margin-left: 6px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-active { background: #e6f4ea; color: #137333; }
.pill-sold { background: #fde7ea; color: #c5221f; }

/* Admin user rows */
.admin-user-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap;
}
.admin-user-row .u-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .admin-table td { border: none; padding: 4px 12px; }
  .admin-table .td-thumb { width: auto; }
  .admin-table .td-actions { text-align: left; }
}
/* Address sharing */
.addr-shared {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.addr-buyer { background: #f0f7ff; border-color: #cfe3ff; }
.addr-map { margin: 10px 0; border-radius: 10px; overflow: hidden; }
.addr-map iframe { width: 100%; height: 180px; border: 0; display: block; }

/* Address / map block sits in its own column so it never crowds the messages */
.thread-addr { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow-y: auto; }
.thread-addr .addr-shared { margin: 0; min-height: 100%; box-sizing: border-box; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Ensure the `hidden` attribute actually hides the modal (overrides the display:flex above) */
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  width: 100%; max-width: 420px;
  padding: 24px;
  position: relative;
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  font-size: 24px; line-height: 1;
  color: var(--muted); cursor: pointer;
}
/* Safety-tips modal: centered, readable, scrollable box */
.safety-modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  width: 100%; max-width: 620px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 30px;
  position: relative;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Report listing button — small orange button at far right of the seller card */
.seller-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #F26522; color: #fff;
  border: none; cursor: pointer;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.report-btn:hover { background: #d24a0e; color: #fff; }

.thread-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface, #fafbfc); }
.msg { max-width: 70%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.4; }
.msg .t { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.msg.mine { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.mine .t { color: #d9e8ff; }
.msg.theirs { align-self: flex-start; background: #e4e6eb; color: var(--text); border-bottom-left-radius: 4px; }
.thread-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.thread-input input { flex: 1; padding: 11px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: 15px; }
.convo-del button { color: var(--red); border-color: var(--red); }
.convo-del button:hover { background: var(--red); color: #fff; }
.purchase-note {
  background: #e6f4ea;
  border: 1px solid #ceead6;
  color: #137333;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  margin: 12px 16px 0;
  border-radius: 10px;
  line-height: 1.5;
}
.thread-input input:focus { outline: none; border-color: var(--primary); }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 15px; }
.empty a { color: var(--primary); font-weight: 600; }

/* Community activity feed */
.feed-notice {
  background: #fff7f0; border: 1px solid rgba(242,101,34,.25); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: var(--text);
}
.feed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feed-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; text-decoration: none; color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.feed-item:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(26,26,46,.06); }
.feed-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; overflow: hidden;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-body { flex: 1; min-width: 0; }
.feed-text { font-size: 14px; line-height: 1.4; }
.feed-text .feed-user { color: var(--text); font-weight: 700; }
.feed-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.feed-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
@media (max-width: 480px) {
  .feed { grid-template-columns: 1fr; }
  .feed-thumb { display: none; }
}

/* Community wall (post, like, comment) */
.post-composer {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; margin-bottom: 16px;
  position: sticky; top: 8px; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.post-composer textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  font-family: inherit; font-size: 14px; resize: vertical; background: var(--bg);
}
.post-composer textarea:focus { outline: none; border-color: var(--primary); }
.post-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.wall { display: flex; flex-direction: column; gap: 12px; }
.wall-post {
  display: flex; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.wall-body { flex: 1; min-width: 0; }
.wall-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wall-author { font-weight: 700; color: var(--text); text-decoration: none; }
.wall-author:hover { color: var(--primary); text-decoration: underline; }
.wall-text { font-size: 14px; line-height: 1.5; margin-top: 6px; white-space: pre-wrap; word-wrap: break-word; }
.wall-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.wall-action-form { display: inline; }
.wall-action {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; color: var(--text); text-decoration: none;
}
.wall-action.liked { color: #e0245e; font-weight: 600; }
.wall-action-del { background: none; border: none; color: var(--red); cursor: pointer; font-size: 13px; }
.wall-action-del:hover { text-decoration: underline; }
.wall-action-manage { display: inline-flex; align-items: center; gap: 12px; }
.wall-action-btn { background: #e0edff; border: 1px solid #b9d4f7; color: var(--primary); cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; line-height: 1.2; transition: all .15s ease; display: inline-flex; align-items: center; gap: 5px; }
.wall-action-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.wall-action-btn.wall-action-del { color: #d33; border-color: #e5b8b8; }
.wall-action-btn.wall-action-del:hover { background: #d33; color: #fff; border-color: #d33; }
.wall-edit-form { margin-top: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.wall-edit-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font: inherit; font-size: 14px; resize: vertical; }
.wall-edit-form textarea:focus { outline: none; border-color: var(--primary); }
.wall-edit-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wall-comments { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.wall-comment { font-size: 13px; background: var(--bg); border-radius: 8px; padding: 6px 10px; }
.wall-comment-author { font-weight: 700; color: var(--text); }
.wall-comment-text { color: var(--text); }
.wall-comment-time { font-size: 11px; margin-left: 4px; }
.wall-comment-form { display: flex; gap: 6px; margin-top: 8px; }
.wall-comment-form input[type=text] {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--bg);
}
.wall-comment-form input[type=text]:focus { outline: none; border-color: var(--primary); }

/* ---- Community improvements: composer category, filter pills, search, pin, comment edit ---- */
.composer-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.composer-cat {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px;
  background: var(--bg); color: var(--text); margin-left: auto;
}
.community-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.community-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.community-main { min-width: 0; }
.community-main .community-search { margin-bottom: 0; }
.community-side { display: flex; flex-direction: column; gap: 16px; }
.community-side-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.community-side-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.cat-pill-block { display: block; margin-bottom: 6px; text-align: left; }
.community-tips { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) {
  .community-layout { grid-template-columns: 1fr; }
  .community-side { order: -1; }
}
.cat-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-pill {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); text-decoration: none;
}
.cat-pill:hover { border-color: var(--primary); color: var(--primary); }
.cat-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.community-search { display: flex; gap: 6px; margin-left: auto; }
.community-search input[type=search] {
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--surface, #fff); color: var(--text, #1e293b); width: 200px;
}
.community-search input[type=search]:focus { outline: none; border-color: var(--primary); }
.cat-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,.05); color: var(--muted);
}
.wall-post.is-pinned { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pin-badge { font-size: 11px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.wall-comment-manage { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.wall-comment-edit-form { margin-top: 4px; display: flex; gap: 6px; align-items: center; }
.wall-comment-edit-form[hidden] { display: none; }
.wall-comment-edit-form input[type=text] {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--bg);
}
.wall-comment-edit-form input[type=text]:focus { outline: none; border-color: var(--primary); }
@media (max-width: 560px) {
  .community-search { margin-left: 0; width: 100%; }
  .community-search input[type=search] { flex: 1; width: auto; }
  .composer-cat { margin-left: 0; }
}

/* Homepage two-column layout (main listings + right rail) */
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.home-layout.hide-rail { grid-template-columns: 1fr; }
.home-layout.hide-rail .home-side { display: none; }
.home-main { min-width: 0; }
.home-side {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
  position: fixed;
  top: 150px;                 /* below header/nav; clears the nav */
  right: 28px;                /* matches .container padding-right */
  width: 300px;               /* matches grid track */
  height: calc(100vh - 150px - 24px);
  overflow-y: auto;           /* rail scrolls internally if content exceeds viewport */
  overscroll-behavior: contain;
  padding-right: 6px;
  padding-bottom: 60px;       /* keep last block above the footer (footer overlaps fixed rail) */
  scrollbar-width: auto;
  scrollbar-color: var(--primary) #e2e2e2;
}
.home-side::-webkit-scrollbar { width: 10px; }
.home-side::-webkit-scrollbar-track { background: #e2e2e2; border-radius: 5px; }
.home-side::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; }
.home-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.home-block-title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.side-empty { font-size: 13px; color: var(--muted); margin: 0; }
/* Community post items */
.side-post {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.side-post:last-child { border-bottom: none; }
.side-post-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; overflow: hidden;
}
.side-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-post-body { display: flex; flex-direction: column; min-width: 0; }
.side-post-author { font-weight: 700; font-size: 13px; color: var(--text); }
.side-post-text { font-size: 13px; color: var(--text); line-height: 1.35; word-wrap: break-word; }
.side-post-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.side-post:hover .side-post-author { color: var(--primary); }
/* Garage sale items */
.side-sale {
  display: flex; gap: 10px; align-items: center; padding: 8px 0;
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.side-sale:last-child { border-bottom: none; }
.side-sale-date {
  flex-shrink: 0; width: 46px; text-align: center;
  background: var(--primary); color: #fff; border-radius: 8px;
  font-size: 12px; font-weight: 700; padding: 6px 0; line-height: 1.2;
}
.side-sale-body { display: flex; flex-direction: column; min-width: 0; }
.side-sale-title { font-size: 13px; font-weight: 600; color: var(--text); }
.side-sale-meta { font-size: 11px; color: var(--muted); }
.side-sale:hover .side-sale-title { color: var(--primary); }
@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-side { display: none; }
}

/* Forum right rail — mirrors .home-side fixed rail */
/* Latest community posts — inline above thread list */
.forum-latest-posts {
  background: var(--surface);
  border: 1px solid var(--border, #e2e2e2);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}
.forum-latest-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
.forum-latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.forum-latest-grid .side-post {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s;
}
.forum-latest-grid .side-post:hover { background: rgba(0,0,0,.04); }
@media (max-width: 640px) {
  .forum-latest-grid { grid-template-columns: 1fr; }
}

/* Who's online */
.online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71; margin-left: 6px; vertical-align: middle;
}
.online-dot-mini {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #2ecc71; margin-right: 4px; vertical-align: baseline;
}
.side-online-user {
  display: flex; gap: 10px; align-items: center; padding: 6px 0;
  text-decoration: none;
}
.side-online-user:hover .side-post-author { color: var(--primary); }
.online-list {
  max-height: 200px; /* ~5 rows */
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.side-member {
  display: flex; gap: 10px; align-items: center; padding: 6px 0;
  text-decoration: none;
}
.side-member:hover .side-post-author { color: var(--primary); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pg-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  color: var(--text); text-decoration: none; background: var(--surface); transition: border-color .12s ease, background .12s ease;
}
.pg-link:hover { border-color: var(--primary); background: var(--bg); }
.pg-link.current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* Garage sales */
.gs-notice {
  background: #fff7f0; border: 1px solid #f5d9c4; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 18px; font-size: 14px; line-height: 1.6; color: #5b3a24;
}
.gs-notice-orange {
  background: rgba(242, 101, 34, 0.12);
  border: 1px solid rgba(242, 101, 34, 0.35);
  color: #a34a12;
  margin-top: 14px;
}
.gs-notice-orange strong { color: #d24a0e; }
.gs-notice strong { color: #1a1a2e; }

/* Announcement: 2-column feature list (3 bullets left, 2 right) */
.ann-2col { display: flex; gap: 24px; flex-wrap: wrap; margin: 6px 0; }
.ann-2col .ann-col { margin: 0; padding-left: 20px; flex: 1 1 0; min-width: 200px; }
.ann-2col .ann-col li { margin-bottom: 4px; }
/* WYSIWYG editor */
.wysiwyg-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px 8px 0 0; padding: 4px 6px;
  overflow-x: auto;
}
.wysiwyg-toolbar button {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 7px; font-size: 13px; line-height: 1.2; cursor: pointer; color: var(--text);
  white-space: nowrap; flex: 0 0 auto;
}
.wysiwyg-toolbar button:hover { background: var(--primary); color: #fff; }
.wysiwyg-toolbar select {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 4px; font-size: 12px; color: var(--text); cursor: pointer;
  flex: 0 0 auto; max-width: 92px;
}
.wysiwyg-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; flex: 0 0 auto; }
.wysiwyg-editor {
  min-height: 130px; background: #fff; border: 1px solid var(--border);
  border-top: 0; border-radius: 0 0 8px 8px; padding: 12px 14px;
  font-size: 15px; line-height: 1.6; color: var(--text); outline: none;
  overflow-y: auto;
}
.wysiwyg-editor:focus { border-color: var(--primary); }
.wysiwyg-editor ul, .wysiwyg-editor ol { padding-left: 22px; margin: 6px 0; }
.wysiwyg-editor a { color: var(--primary); text-decoration: underline; }
.wysiwyg-hidden { display: none; }
.wysiwyg-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--muted, #999);
  pointer-events: none;
}
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 48px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: #fff; cursor: pointer; }
.color-preview { flex: 1; min-height: 38px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #5b3a24; font-weight: 600; }
.gs-toolbar { margin-bottom: 20px; }
.gs-toolbar .btn { display: inline-block; }
.gs-sub { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gs-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; transition: border-color .12s ease, box-shadow .12s ease;
  justify-self: start; width: fit-content;
}
.gs-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(242,101,34,.12); }
.gs-card-img { width: 90px; height: 90px; flex-shrink: 0; object-fit: cover; object-position: center; border-radius: 8px; display: block; }
.gs-card-img-empty {
  display: flex; align-items: center; justify-content: center;
  background: #f5f0ea; font-size: 40px; color: #c9b8a8;
}
.gs-card-body { min-width: 0; }
.gs-card-title { font-weight: 600; font-size: 14px; color: var(--text); margin: 0 0 4px; line-height: 1.3; }

/* Stores */
.store-head {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 18px;
}
.store-banner {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  display: block;
}
.store-banner-branded {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #f8b500 0%, #f26522 100%);
}
.sbb-store {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbb-store svg { width: 54px; height: 54px; }
.sbb-store.sbb-photo {
  width: 140px;
  height: 140px;
  background: rgba(0,0,0,0.12);
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sbb-store.sbb-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sbanner-name {
  font-size: 46px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  letter-spacing: 0.5px;
  max-width: 72%;
  text-align: center;
}
@media (max-width: 760px) {
  .store-banner {
    height: auto;
    max-height: 160px;
    object-fit: contain;
    background: var(--bg);
  }
  .store-banner-branded { height: 120px; }
  .sbb-store { left: 12px; width: 56px; height: 56px; border-radius: 12px; }
  .sbb-store svg { width: 36px; height: 36px; }
  .sbanner-name { font-size: 28px; }
}
.store-head-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}
.store-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.store-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-name { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.store-meta { font-size: 14px; color: var(--muted); }
.stores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.store-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.store-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(24,119,242,.12); }
.safety-list { margin: 8px 0 18px; padding-left: 22px; }
.safety-list li { margin: 8px 0; line-height: 1.55; }
.store-card-banner {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffe6d4, #ffd2b0);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.store-card-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.store-card-banner-name {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.store-card-banner img { width: 100%; height: auto; object-fit: contain; background: #fff; display: block; }
.store-card-banner-placeholder {
  width: 100%; height: 120px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: rgba(90,50,20,.6);
}
.store-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px;
}
.store-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.store-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-card-info { min-width: 0; }
.store-card-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.store-card-meta { font-size: 12.5px; color: var(--muted); }
/* Role badge on Who's Online / profile cards */
.role-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  border-radius: 999px;
  vertical-align: 2px;
  background: var(--primary);
  color: #fff;
}
.gs-card-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1100px) { .gs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gs-grid { grid-template-columns: 1fr; } }

/* Garage sale detail page */
.gs-detail { display: flex; flex-direction: column; gap: 20px; }
.gs-detail-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.gs-detail-photo-wrap { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
.gs-detail-photo-wrap .gs-detail-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gs-detail-photo { width: 100%; border-radius: 12px; object-fit: cover; }
.gs-detail-photo-empty {
  display: flex; align-items: center; justify-content: center;
  background: #f5f0ea; font-size: 80px; color: #c9b8a8; min-height: 300px;
}
.gs-detail-title { font-size: 24px; margin-bottom: 10px; }
.gs-detail-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.gs-detail-info { display: flex; flex-direction: column; }
.gs-detail-meta { font-size: 15px; line-height: 1.8; color: var(--text); margin-bottom: 18px; }
.gs-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gs-detail-map { margin-top: 24px; }
.gs-detail-map h3 { font-size: 16px; margin-bottom: 10px; }
@media (max-width: 720px) { .gs-detail-main { grid-template-columns: 1fr; } }

/* Full-page directions (stays inside the site) */
.gd-wrap { display: flex; flex-direction: column; gap: 16px; }
.gd-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gd-head .btn { flex-shrink: 0; }
.gd-title { flex: 1; min-width: 200px; }
.gd-title h1 { font-size: 20px; margin: 0 0 4px; }
.gd-title p { margin: 0; color: var(--muted); font-size: 14px; }
.gd-map { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.gd-foot { display: flex; gap: 10px; }
@media (max-width: 720px) { .gd-head { flex-direction: column; align-items: stretch; } .gd-head .btn { text-align: center; } }

/* Garage sales section on the home page */
.gs-home { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-top: 28px; }
.gs-home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gs-home-head h2 { font-size: 18px; }
.gs-home-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.gs-home-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-decoration: none; display: block; transition: border-color .12s ease, box-shadow .12s ease; }
.gs-home-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(242,101,34,.12); }
.gs-home-view { display: inline-block; margin-top: 8px; color: var(--primary); font-weight: 600; font-size: 13px; }
.gs-home-photo { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; display: block; }
.gs-home-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.gs-home-meta { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 880px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .msg-layout, .msg-layout.no-addr { grid-template-columns: minmax(0, 1fr); height: auto; }
  .convo-pane { margin-top: 12px; height: 60vh; }
  .thread-addr { margin-top: 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
/* Phones: always 1 item per row */
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .toolbar input[type=search], .toolbar select { min-width: 0; }
  .photo-upload { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: sidebar becomes a slide-in drawer */
@media (max-width: 860px) {
  .layout-wrap { display: block; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.15);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .container { padding: 16px 14px; }
  .topbar-clock { display: none; }
  /* Mobile header: hide welcome text, center logo */
  .topbar-welcome { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar .brand { position: static; margin: 0; transform: none; }
  .nav-toggle { left: 14px; top: 50%; transform: translateY(-50%); }
}

/* ===================== CHAT ===================== */
.chat-shell {
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: 520px;
  margin-top: 6px;
}
.chat-online {
  flex: 0 0 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-online-head {
  padding: 12px 14px;
  font-weight: 700;
  color: #b85c18;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-online-count {
  background: rgba(242,101,34,.12);
  color: #b85c18;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}
.chat-online-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-online-user { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 14px; color: #1a1a2e; border-radius: 8px; cursor: pointer; transition: background .15s; white-space: nowrap; overflow: hidden; }
.chat-online-user .chat-online-name { overflow: hidden; text-overflow: ellipsis; }
.chat-online-user.me { background: rgba(242,101,34,.06); }
.chat-online-user:hover { background: rgba(242,101,34,.08); }
.chat-role-sym { font-size: 12px; margin-left: 1px; }
.chat-you { font-style: italic; color: var(--muted); font-size: 12px; }
.chat-dm-hint { margin-left: auto; font-size: 12px; opacity: .5; }
.chat-online-user:hover .chat-dm-hint { opacity: 1; }
.chat-emoji-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 0 6px; line-height: 1; }
.chat-panel { position: relative; }
.chat-emoji-picker {
  position: absolute;
  bottom: 56px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 216px;
  max-height: 160px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 -2px 14px rgba(0,0,0,.14);
  z-index: 20;
}
.chat-emoji-picker[hidden] { display: none; }
.chat-emoji-item { cursor: pointer; font-size: 20px; padding: 3px; border-radius: 6px; }
.chat-emoji-item:hover { background: #f0f0f2; }
.chat-online-user .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2ecc71;
  flex-shrink: 0;
  display: inline-block;
}
.chat-rooms {
  flex: 0 0 330px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 700;
  color: #b85c18;
  border-bottom: 1px solid var(--border);
}
.chat-btn {
  border: 1px solid rgba(242,101,34,.4);
  background: #fff;
  color: #b85c18;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
}
.chat-btn:hover { background: rgba(242,101,34,.08); }
.chat-btn-small { padding: 4px 10px; }
.chat-rooms-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-room-item {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: background .15s;
}
.chat-room-item:hover { background: #f7f7f8; }
.chat-room-item.active { background: rgba(242,101,34,.1); border-color: rgba(242,101,34,.25); }
.chat-room-name { font-weight: 600; font-size: 14px; color: #1a1a2e; display: flex; align-items: center; gap: 6px; }
.chat-room-del { margin-left: auto; cursor: pointer; font-size: 12px; opacity: .4; }
.chat-room-del:hover { opacity: 1; }
.chat-room-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-empty { color: var(--muted); font-size: 13px; padding: 10px; }

.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-room-title {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 16px;
  color: #b85c18;
  border-bottom: 1px solid var(--border);
}
.chat-announcement {
  margin: 10px 12px 4px;
  border: 1px solid rgba(242, 101, 34, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #a34a12;
}
.chat-announcement[hidden] { display: none; }

/* Mod bar (admin/mod) */
.chat-modbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 14px;
  background: #fff7f0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.chat-mod-btn {
  background: #f26522; color: #fff; border: none; border-radius: 8px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.chat-mod-btn:hover { background: #d9561c; }
.chat-modlist { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chat-mod-chip {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px; font-size: 11px; color: #b85c18; cursor: default;
}
.chat-mod-chip:hover { border-color: #f26522; }

/* Moderation menu modal */
.mod-box .mod-menu { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.mod-menu-item {
  text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; cursor: pointer;
}
.mod-menu-item:hover { background: #fff4ec; border-color: #f26522; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 0.5px;
  background: #fbfaf8;
  min-height: 420px;
}
.chat-empty-hint { color: var(--muted); text-align: center; font-size: 14px; margin: auto; }
.chat-msg { display: flex; flex-direction: column; max-width: 72%; }
.chat-msg.own { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
.chat-msg > * { max-width: 100%; }
.chat-msg-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; }
.chat-msg-head.own { justify-content: flex-end; }
.chat-msg-name { font-size: 12px; font-weight: 600; color: #b85c18; }
.chat-msg-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.chat-bubble {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
  width: fit-content;
}
.chat-msg.other .chat-bubble { background: #fff; border: 1px solid var(--border); color: #1a1a2e; border-top-left-radius: 4px; }
.chat-msg.own .chat-bubble { background: #f26522; color: #fff; border-top-right-radius: 4px; }
.chat-actions { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-actions { opacity: 1; }
.chat-act { background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 13px; padding: 2px 5px; color: #8a8a9e; }
.chat-act:hover { background: #f0f0f2; color: #1a1a2e; border-color: var(--border); }
.chat-reply-preview { font-size: 12px; color: var(--muted); background: rgba(0,0,0,.04); border-left: 3px solid var(--border); border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-prev-name { font-weight: 700; color: #b85c18; margin-right: 6px; }
.chat-reply-prev-body { color: var(--muted); }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-reaction { background: #f2f2f4; border: 1px solid var(--border); border-radius: 12px; padding: 1px 7px; font-size: 12px; cursor: pointer; }
.chat-reaction.mine { background: rgba(242,101,34,.15); border-color: rgba(242,101,34,.4); }
.chat-listing-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; max-width: 260px; }
.chat-listing-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.chat-listing-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-listing-title { font-weight: 700; font-size: 13px; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-listing-price { font-size: 13px; color: #d24a0e; font-weight: 700; }
.chat-listing-link { font-size: 12px; color: var(--primary); text-decoration: none; }
.chat-react-pop { position: fixed; z-index: 9999; display: flex; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.chat-react-opt { cursor: pointer; font-size: 18px; padding: 3px; border-radius: 6px; }
.chat-react-opt:hover { background: #f0f0f2; }
.modal-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.share-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.share-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background .15s; }
.share-item:hover { background: #f7f2ec; border-color: rgba(242,101,34,.35); }
.share-item-img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.share-item-img-empty { display: flex; align-items: center; justify-content: center; background: #f2f2f4; font-size: 20px; color: #8a8a9e; }
.share-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-item-title { font-weight: 600; font-size: 14px; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-item-meta { font-size: 12px; color: var(--muted); }

.chat-composer { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-composer-row { display: flex; gap: 8px; align-items: center; }
.chat-attach { display: flex; align-items: center; gap: 8px; background: rgba(242,101,34,0.10); border: 1px solid rgba(242,101,34,0.30); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.chat-attach[hidden] { display: none; }
.chat-attach-label { color: #a34a12; font-weight: 600; white-space: nowrap; }
.chat-attach-title { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chat-attach-hint { color: #a34a12; font-size: 12px; white-space: nowrap; opacity: .85; }
.chat-bubble-text { margin-top: 6px; }
.chat-attach-x { background: none; border: none; color: #a34a12; font-size: 14px; cursor: pointer; padding: 0 2px; }
.chat-composer input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}
.chat-composer input:focus { border-color: rgba(242,101,34,.5); }
.chat-reply-bar, .chat-listing-bar {
  display: flex; align-items: center; gap: 8px;
  background: #f7f2ec; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 13px;
}
.chat-reply-label { color: #b85c18; font-weight: 600; white-space: nowrap; }
.chat-reply-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-cancel { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 14px; color: var(--muted); }
.chat-reply-cancel:hover { color: #d33; }
.chat-share-btn {
  background: #f7f2ec;
  border: 1px solid rgba(242,101,34,.35);
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #b85c18;
  cursor: pointer;
  padding: 9px 14px;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s;
}
.chat-share-btn:hover { background: rgba(242,101,34,.12); }
.chat-room-title-right { display: inline-flex; align-items: center; gap: 10px; }
.chat-block-btn {
  background: #f7f2ec;
  border: 1px solid rgba(200,60,60,.35);
  border-radius: 24px;
  font-size: 12px;
  font-weight: 600;
  color: #b3261e;
  cursor: pointer;
  padding: 6px 12px;
  line-height: 1;
  white-space: nowrap;
  transition: background .15s;
}
.chat-block-btn:hover { background: rgba(200,60,60,.12); }
.chat-photo-btn {
  background: #f7f2ec;
  border: 1px solid rgba(242,101,34,.35);
  border-radius: 24px;
  font-size: 15px;
  cursor: pointer;
  padding: 8px 12px;
  line-height: 1;
  transition: background .15s;
}
.chat-photo-btn:hover { background: rgba(242,101,34,.12); }
.chat-photo-preview { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.chat-photo { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; margin: 2px 0; object-fit: cover; }
.chat-send-btn {
  background: var(--green, #2e7d32);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
}
.chat-send-btn:hover { filter: brightness(1.05); }

.chat-banned-box {
  background: #fff;
  border: 1px solid rgba(200,60,60,.3);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  max-width: 480px;
  margin: 30px auto;
}
.chat-banned-box h3 { color: #c0392b; margin-top: 0; }
.chat-banned-box p { color: #555; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 14px; padding: 22px; width: 340px; max-width: 92vw; }
.modal-box h3 { margin-top: 0; }
.modal-box label { display: block; font-size: 13px; font-weight: 600; color: #555; margin: 12px 0 4px; }
.modal-box input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.room-type-row { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-actions .btn-primary { background: var(--green, #2e7d32); }

/* Mobile chat */
@media (max-width: 720px) {
  .chat-shell { flex-direction: column; min-height: 0; }
  .layout-wrap.chat-layout .chat-shell { min-height: 0; max-height: none; }
  .chat-rooms { flex: 0 0 auto; max-height: 200px; }
  .chat-online { flex: 0 0 auto; max-height: 160px; order: 2; }
  .chat-msg { max-width: 85%; }
}

/* Chat admin */
.chat-admin-search { display: flex; gap: 8px; }
.chat-admin-search input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.chat-admin-search .btn { flex-shrink: 0; }
.inline-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-room-edit { display: flex; align-items: center; gap: 8px; }
.chat-room-edit .room-name-input {
  flex: 1; min-width: 160px; max-width: 320px;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 14px;
}
.chat-room-edit .btn-small { flex-shrink: 0; }
.chat-room-order { display: flex; flex-direction: column; gap: 2px; }
.btn-order {
  border: 1px solid var(--border); background: #fff; color: #555; cursor: pointer;
  width: 24px; height: 20px; line-height: 1; font-size: 11px; border-radius: 5px;
  display:flex; align-items:center; justify-content:center;
}
.btn-order:hover:not(:disabled) { background:#f1f1f4; color:#1a1a2e; }
.btn-order:disabled { opacity:.35; cursor:default; }
.inline-num { width: 64px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; font-size: 13px; }
.btn-small { padding: 5px 10px; font-size: 13px; }
.role-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #f1f1f4; color: #555; }
.role-admin { background: #e8f0fe; color: #1a73e8; }
.role-mod { background: rgba(242,101,34,.12); color: #b85c18; }
.text-danger { color: #c0392b; font-weight: 600; }
.text-ok { color: #2e7d32; font-weight: 600; }


/* ===== Help Center page ===== */
.help-page { max-width: 820px; }
.help-search { margin: 4px 0 20px; }
.help-search input {
  width: 100%; max-width: 420px; padding: 10px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); color: var(--text);
}
.help-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(242,101,34,.12); }
.help-section { margin-bottom: 8px; }
.help-item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff);
  margin-bottom: 10px; overflow: hidden;
}
.help-item summary {
  cursor: pointer; padding: 14px 18px; font-size: 16px; font-weight: 600; color: var(--text);
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  transition: background .15s;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::after {
  content: "▾"; font-size: 14px; color: var(--muted); transition: transform .2s; margin-left: 12px;
}
.help-item[open] summary { background: color-mix(in srgb, var(--surface, #fff) 88%, var(--text) 12%); }
.help-item[open] summary::after { transform: rotate(180deg); }
.help-item summary:hover { background: color-mix(in srgb, var(--surface, #fff) 88%, var(--text) 12%); }
.help-body { padding: 4px 18px 18px; border-top: 1px solid var(--border); }
.help-body ol { margin: 12px 0 12px 22px; }
.help-body li { font-size: 15px; line-height: 1.65; margin-bottom: 8px; color: var(--text); }
.help-body p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 10px 0; }
.help-body img {
  display: block; max-width: 100%; height: auto; margin: 14px auto 0;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ============================================================
   EVENTS & CALENDAR ADD-ON  (/events/)
   ============================================================ */
.events-wrap { max-width: none; margin: 0 auto; padding: 20px 0 40px; }
.events-title { font-size: 26px; font-weight: 800; margin-bottom: 18px; }
.events-login-hint, .events-empty { text-align: center; color: var(--muted, #777); padding: 30px 0; }
.events-create { background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5); border-radius: 14px; margin-bottom: 22px; overflow: hidden; }
.events-create-summary { padding: 14px 16px; font-weight: 700; cursor: pointer; color: var(--accent, #f26522); list-style: none; }
.events-create-summary::-webkit-details-marker { display: none; }
.events-form { padding: 0 16px 16px; }
.events-form .field-row { display: flex; gap: 12px; }
.events-form .field-row .field { flex: 1; }
.events-btn { background: var(--accent, #f26522); color: #fff; border: none; border-radius: 999px; padding: 9px 22px; font-weight: 700; font-size: 14px; cursor: pointer; }
.events-list { display: flex; flex-direction: column; gap: 14px; }
.event-card { display: flex; gap: 14px; background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5); border-radius: 14px; padding: 16px; }
.event-date { width: 56px; height: 56px; border-radius: 12px; background: var(--accent, #f26522); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.event-day { font-size: 22px; font-weight: 800; line-height: 1; }
.event-month { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.event-body { flex: 1; }
.event-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted, #666); margin-bottom: 8px; }
.event-desc { font-size: 14px; line-height: 1.5; color: var(--text, #333); margin: 0 0 10px; }
.event-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border, #eee); padding-top: 10px; }
.event-rsvp-count { font-size: 13px; color: var(--muted, #666); }
.event-action-form { display: inline; }
.events-btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 999px; }
.events-del { color: #c0392b; }
@media(max-width:520px){ .events-form .field-row { flex-direction: column; gap: 0; } }

/* Event detail page */
.events-back { margin-bottom: 14px; }
.events-back a { color: var(--accent, #f26522); font-weight: 600; text-decoration: none; }
.events-back a:hover { text-decoration: underline; }
.event-title-link { color: inherit; text-decoration: none; }
.event-title-link:hover { color: var(--accent, #f26522); text-decoration: underline; }
.event-detail { background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5); border-radius: 16px; padding: 22px; }
.event-detail-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.event-date-lg { width: 64px; height: 64px; }
.event-date-lg .event-day { font-size: 26px; }
.event-detail-title { flex: 1; }
.event-detail-title .event-title { font-size: 24px; margin: 0 0 8px; }
.event-detail-desc { border-top: 1px solid var(--border, #eee); padding-top: 16px; margin-bottom: 16px; }
.event-detail-desc h3, .event-rsvp-list h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.event-detail-desc p { font-size: 15px; line-height: 1.6; color: var(--text, #333); margin: 0; }
.event-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border, #eee); padding-top: 16px; margin-bottom: 20px; }
.event-rsvp-list { border-top: 1px solid var(--border, #eee); padding-top: 16px; }
.event-rsvp-list h3 { display: flex; align-items: center; gap: 8px; }
.rsvp-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.rsvp-person { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.03); border-radius: 10px; padding: 8px 12px; }
.rsvp-name { font-size: 14px; font-weight: 600; }

/* Event location + map */
.event-detail-location { border-top: 1px solid var(--border, #eee); padding-top: 16px; margin-bottom: 16px; }
.event-detail-location h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.event-location-addr { font-size: 15px; color: var(--text, #333); margin: 0 0 12px; }
.event-map { border-radius: 12px; overflow: hidden; border: 1px solid var(--border, #e5e5e5); margin-top: 16px; margin-bottom: 12px; }
.event-map iframe { display: block; }
.event-location-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Event edit form */
.event-edit-form { border: 1px solid var(--border, #e5e5e5); border-radius: 12px; padding: 18px; margin-bottom: 18px; background: rgba(0,0,0,.02); }
.event-edit-form h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.event-edit-form .field { margin-bottom: 12px; }
.event-edit-form .field-row { display: flex; gap: 12px; }
.event-edit-form .field-row .field { flex: 1; }
.event-edit-actions { display: flex; gap: 10px; margin-top: 4px; }
@media(max-width:520px){ .event-edit-form .field-row { flex-direction: column; gap: 0; } }

/* Admin Add-ons page */
.addons-list { display: flex; flex-direction: column; gap: 14px; }
.addon-card { display: flex; align-items: center; gap: 16px; background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5); border-radius: 14px; padding: 16px 18px; }
.addon-icon { font-size: 30px; flex-shrink: 0; }
.addon-body { flex: 1; }
.addon-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.addon-title strong { font-size: 16px; }
.addon-version { font-size: 12px; color: var(--muted, #888); background: rgba(0,0,0,.05); padding: 2px 8px; border-radius: 999px; }
.addon-desc { font-size: 13px; color: var(--muted, #666); margin: 0; line-height: 1.5; }
.addon-toggle { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.addon-state { font-size: 13px; font-weight: 700; color: var(--muted, #666); min-width: 28px; }
/* Toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 999px; transition: .3s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.switch input:checked + .slider { background: var(--accent, #f26522); }
.switch input:checked + .slider:before { transform: translateX(20px); }
@media(max-width:560px){ .addon-card { flex-wrap: wrap; } .addon-toggle { width: 100%; justify-content: flex-end; } }

/* Admin Add-ons page */
.addon-upload { background: var(--card, #fff); border: 1px dashed var(--border, #ccc); border-radius: 14px; padding: 18px; margin-bottom: 22px; }
.addon-upload h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.addon-upload-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.addon-upload-form input[type=file] { flex: 1; min-width: 200px; }
.addon-upload-hint { font-size: 12px; color: var(--muted, #888); margin: 10px 0 0; }
.addon-upload-hint code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }
.addons-list { display: flex; flex-direction: column; gap: 14px; }
.addon-card { display: flex; align-items: center; gap: 16px; background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5); border-radius: 14px; padding: 16px 18px; }
.addon-icon { font-size: 30px; flex-shrink: 0; }
.addon-body { flex: 1; }
.addon-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.addon-title strong { font-size: 16px; }
.addon-version { font-size: 12px; color: var(--muted, #888); background: rgba(0,0,0,.05); padding: 2px 8px; border-radius: 999px; }
.addon-desc { font-size: 13px; color: var(--muted, #666); margin: 0; line-height: 1.5; }
.addon-controls { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.addon-toggle { display: flex; align-items: center; gap: 10px; }
.addon-state { font-size: 13px; font-weight: 700; color: var(--muted, #666); min-width: 28px; }
/* Toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 999px; transition: .3s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.switch input:checked + .slider { background: var(--accent, #f26522); }
.switch input:checked + .slider:before { transform: translateX(20px); }
@media(max-width:560px){ .addon-card { flex-wrap: wrap; } .addon-controls { width: 100%; justify-content: flex-end; } }

/* ===================== FORUMS (full width) ===================== */
.forums-wrap { width: 100%; max-width: 1100px; }
.forums-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.forums-title { margin-bottom: 2px; }
.forums-sub { color: var(--muted, #334155); margin: 2px 0 0; font-size: 15px; font-weight: 500; }
.forums-arrow { color: var(--accent, #1e3a5f); font-size: 18px; font-weight: 700; line-height: 1; }
.forums-header-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.forums-header-left .page-title { margin: 0; }
.forums-back { margin: 0 0 10px; }
.forums-back a { color: var(--primary); text-decoration: none; }
.forums-back a:hover { text-decoration: underline; }
.forums-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 16px; font-size: 13px; }
.forums-author { color: var(--primary); text-decoration: none; font-weight: 600; }
.forums-author:hover { text-decoration: underline; }

/* --- Composer (new thread) --- */
.forums-composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 16px; margin-bottom: 18px; }
.forums-composer-top { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.forums-title-input { flex: 1; min-width: 200px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-weight: 600; }
.forums-title-input:focus { outline: none; border-color: var(--primary); }
.forums-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.forums-composer-actions { display: flex; gap: 8px; }

/* --- Toolbar (category pills + search), full width --- */
.forums-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.forums-cat-bar { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Thread list rows, full width --- */
.thread-list { display: flex; flex-direction: column; gap: 10px; }
.thread-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 14px 18px; display: flex; align-items: center; gap: 16px; position: relative; }
.thread-row:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); border-color: var(--border); }
.thread-row.is-pinned { border-color: var(--primary); }
.thread-row .pin-badge { position: static; display: inline-block; margin: 0 0 4px; }
.thread-row-main { flex: 1; min-width: 0; }
.thread-row-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.thread-row-title a { color: var(--text); text-decoration: none; }
.thread-row-title a:hover { color: var(--primary); }
.thread-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.thread-row-counts { flex: 0 0 auto; display: flex; gap: 18px; padding-left: 16px; border-left: 1px solid var(--border); }
.thread-row-count { text-align: center; min-width: 44px; }
.thread-row-count b { display: block; font-size: 17px; color: var(--primary); }
.thread-row-count span { font-size: 11px; color: var(--muted); }

/* --- Thread detail --- */
.thread-detail { display: flex; flex-direction: column; gap: 18px; }
.thread-op { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 18px; }
.thread-op-body { flex: 1; min-width: 0; }
.thread-op-meta { font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.forums-edit-title { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; font-weight: 600; }
.forums-replies-title { margin: 8px 0 0; font-size: 16px; color: var(--text); }
.thread-replies { display: flex; flex-direction: column; gap: 12px; }
.thread-reply { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 14px 16px; }
.thread-reply-body { flex: 1; min-width: 0; }

/* ---- Facebook-style grouped replies (2026-08-28) ---- */
.fb-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); overflow: hidden; margin-bottom: 14px; }
.fb-group .thread-reply { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 12px 16px; }
.fb-group .fb-main-reply .thread-reply { padding-top: 14px; }

/* Group head: "💬 Name" left, reply count right (top-right corner) */
.fb-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--surface-2, color-mix(in srgb, var(--text,#1e293b) 6%, var(--surface,#fff))); border-bottom: 1px solid var(--border); }
.fb-conv { font-size: 13px; font-weight: 600; color: var(--text, #1e293b); }
.fb-count { font-size: 13px; font-weight: 700; color: var(--primary, #2563eb); background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent); padding: 3px 10px; border-radius: 999px; }

/* Bubble: avatar + rounded comment bubble */
.fb-bubble { flex: 1; min-width: 0; }
.fb-bubble-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.fb-name { font-weight: 700; font-size: 14px; color: var(--text, #1e293b); }
.fb-to { font-size: 12.5px; color: var(--primary, #2563eb); font-weight: 600; }
.fb-time { font-size: 12.5px; }
.fb-manage { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.fb-manage .wall-action-btn, .fb-manage .wall-action-del { font-size: 12px; padding: 2px 8px; }
.fb-txt { font-size: 14px; line-height: 1.55; color: var(--text, #1e293b); word-wrap: break-word; }
.fb-txt img { max-width: 100%; border-radius: 8px; }

/* Action row: Like + Reply together */
.fb-act { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.fb-act .wall-action-form { display: inline; margin: 0; }
.fb-like { background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--text, #1e293b) 62%, transparent); padding: 2px 0; }
.fb-like:hover { color: var(--primary, #2563eb); }
.fb-like.liked { color: var(--primary, #2563eb); }
.fb-reply-btn { background: none; border: 0; cursor: pointer; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--text, #1e293b) 62%, transparent); padding: 2px 0; }
.fb-reply-btn:hover { color: var(--primary, #2563eb); }
.fb-like.muted { color: color-mix(in srgb, var(--text, #1e293b) 62%, transparent); }

/* Children: indented, on a distinct tinted panel (theme-adaptive) */
.fb-children { background: var(--surface-2, color-mix(in srgb, var(--text,#1e293b) 6%, var(--surface,#fff))); padding: 4px 0; }
.fb-group .fb-child { padding: 12px 16px 12px 48px; border-top: 1px solid var(--border); }
.fb-group .fb-child .feed-avatar { width: 30px; height: 30px; font-size: 13px; }
.fb-child .fb-name { font-size: 13.5px; }
.fb-child .fb-txt { font-size: 13.5px; }

/* "View N more replies" expander */
.fb-group .view-more { display: block; width: 100%; background: var(--surface-2, color-mix(in srgb, var(--text,#1e293b) 6%, var(--surface,#fff))); border: 0; border-top: 1px solid var(--border); padding: 10px 16px 12px 48px; text-align: left; color: var(--primary, #2563eb); font-size: 13px; font-weight: 600; cursor: pointer; }
.fb-group .view-more:hover { background: color-mix(in srgb, var(--primary, #2563eb) 8%, var(--surface, #fff)); }
@media (max-width: 640px) {
  .fb-group .fb-child { padding-left: 30px; }
  .fb-group .view-more { padding-left: 30px; }
}
.forums-reply-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 16px; }
/* Sticky reply box: stays visible at bottom of viewport while scrolling long threads */
.forums-reply-box.sticky-reply { position: sticky; bottom: 0; z-index: 40; box-shadow: 0 -6px 20px rgba(0,0,0,.08); background: var(--surface); }
/* Floating 'jump to latest' button */
.jump-latest { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: none; align-items: center; gap: 8px; padding: 11px 16px; background: var(--primary, #1e3a5f); color: #fff; border: none; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .15s, opacity .2s; }
.jump-latest:hover { transform: translateY(-2px); }
.jump-latest.show { display: inline-flex; }
@media (max-width: 600px) { .jump-latest { right: 14px; bottom: 14px; } }
.forums-reply-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; resize: vertical; }
.forums-reply-textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; box-sizing: border-box; background: var(--surface, #fff); color: var(--text, #1e293b); }
.forums-reply-textarea:focus { outline: none; border-color: var(--primary); }
.forums-reply-box-inner { margin-bottom: 10px; }
.forums-reply-input:focus { outline: none; border-color: var(--primary); }
.forums-reply-foot { margin-top: 10px; text-align: right; }

/* Mobile: keep full width, stack counts */
@media (max-width: 520px) {
  .thread-row { padding: 12px 14px; gap: 10px; }
  .thread-row-counts { gap: 12px; padding-left: 10px; }
  .forums-toolbar { flex-direction: column; align-items: stretch; }
  .community-search { margin-left: 0; }
}


/* ===================== FORUM INDEX (L1) ===================== */
.forum-index { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.forum-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius,12px); padding: 16px 18px; display: flex; align-items: center; gap: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.forum-box:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.forum-box-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.forum-box-icon { font-size: 26px; width: 44px; height: 44px; border-radius: 10px; background: var(--primary, #1e3a5f); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.forum-box-text { min-width: 0; }
.forum-box-name { font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; display: inline-block; }
.forum-box-name:hover { color: var(--primary); }
.forum-box-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.forum-box-counts { flex: 0 0 auto; display: flex; gap: 22px; text-align: center; padding: 0 18px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.forum-box-count b { display: block; font-size: 17px; color: var(--primary); }
.forum-box-count span { font-size: 11.5px; color: var(--muted); }
.forum-box-last { flex: 0 0 200px; min-width: 0; }
.forum-box-last-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-box-last-title a { color: var(--text); text-decoration: none; }
.forum-box-last-title a:hover { color: var(--primary); }
.forum-box-last .muted { font-size: 12px; }

/* ===================== TOPIC TABLE (L2) ===================== */
.topic-table { border: 1px solid var(--border); border-radius: var(--radius,12px); overflow: hidden; margin-top: 10px; }
.topic-table-head, .topic-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; }
.topic-table-head { background: var(--primary, #1e3a5f); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.topic-table-head .ttc-topic { flex: 1; }
.topic-row { border-top: 1px solid var(--border); background: var(--surface); }
.topic-row:hover { background: rgba(0,0,0,.02); }
.topic-row.is-pinned { background: rgba(0,0,0,.03); }
.ttc-topic { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ttc-author { flex: 0 0 120px; font-size: 13px; }
.ttc-replies, .ttc-likes { flex: 0 0 56px; text-align: center; font-size: 13px; }
.topic-table-head .ttc-replies, .topic-table-head .ttc-likes { text-align: center; }
.topic-title { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-title:hover { color: var(--primary); }
.ttc-last { flex: 0 0 120px; font-size: 13px; text-align: right; }

/* Responsive: stack topic table on mobile */
@media (max-width: 700px) {
  .forum-box { flex-wrap: wrap; gap: 12px; }
  .forum-box-info { flex-basis: 100%; }
  .forum-box-counts { border-left: 0; border-right: 0; padding: 0; gap: 26px; }
  .forum-box-last { flex: 1; min-width: 150px; }
  .ttc-author { display: none; }
  .ttc-replies, .ttc-likes { flex-basis: 40px; }
  .ttc-last { flex-basis: 90px; }
}
/* ---- Business directory cards ---- */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.biz-card { padding: 16px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.biz-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.biz-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 12px;
}
.biz-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.biz-logo-fallback {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
}
.biz-card-head { min-width: 0; }
.biz-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.biz-loc { font-size: 12.5px; color: var(--muted); }
.biz-about {
  padding: 0 18px 12px;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  flex: 1;
}
.biz-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #f1f5f9;
}
.biz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: #eef3fa;
  border-radius: 999px;
  padding: 5px 11px;
}
/* ---- Business profile (detail page) ---- */
.biz-profile {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
}
.biz-profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: linear-gradient(135deg, #1e3a5f, #2a5a8f);
  color: #fff;
}
.biz-profile-logo {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-profile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.biz-profile-logo-fallback { font-size: 38px; font-weight: 800; color: #1e3a5f; }
.biz-profile-head { min-width: 0; }
.biz-profile-name {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.biz-profile-loc { font-size: 14px; color: rgba(255,255,255,.85); }
.biz-profile-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
}
.biz-profile-main { padding: 24px 26px; }
.biz-profile-side {
  padding: 24px 26px;
  border-left: 1px solid #f1f5f9;
  background: #fafbfc;
}
.biz-section { margin-bottom: 26px; }
.biz-section:last-child { margin-bottom: 0; }
.biz-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eef3fa;
}
.biz-about-text { margin: 0; color: #334155; line-height: 1.7; font-size: 15px; }
.biz-hours { width: 100%; border-collapse: collapse; }
.biz-hours td { padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.biz-hours tr:last-child td { border-bottom: none; }
.biz-hours-day { font-weight: 600; color: #334155; width: 60px; }
.biz-hours-time { color: #64748b; }
.biz-contact-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
.biz-contact-list { display: flex; flex-direction: column; gap: 10px; }
.biz-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #334155;
  text-decoration: none;
  word-break: break-word;
}
a.biz-contact-item:hover { color: var(--primary); }
.biz-contact-icon { font-size: 16px; flex-shrink: 0; }
.biz-map-card, .biz-hours-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
@media (max-width: 700px) {
  .biz-profile-body { grid-template-columns: 1fr; }
  .biz-profile-side { border-left: none; border-top: 1px solid #f1f5f9; }
  .biz-profile-header { flex-direction: column; text-align: center; }
}

/* ---- Inline reply + attribution (2026-08-28) ---- */
.inline-reply-form { margin: 10px 0 6px 12px; padding: 12px; background: var(--surface-2, color-mix(in srgb, var(--text,#1e293b) 6%, var(--surface,#fff))); border:1px solid var(--border); border-radius:8px; }
.inline-reply-form .forums-reply-textarea { width:100%; min-height:80px; padding:10px; border:1px solid var(--border); border-radius:6px; font:inherit; font-size:14px; resize:vertical; box-sizing:border-box; background: var(--surface, #fff); color: var(--text, #1e293b); }
.inline-reply-form .inline-reply-actions { margin-top:8px; display:flex; gap:8px; }
.reply-attribution { font-size:12px; color: var(--muted, #777); margin:4px 0 6px; }
.reply-attribution strong { color: var(--text, #555); }

/* Highlighted quote box (vBulletin/Discourse-style) */
.forum-quote { border-left: 4px solid var(--primary, #1e3a5f); background: var(--surface-2, color-mix(in srgb, var(--text,#1e293b) 6%, var(--surface,#fff))); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 8px 0; }
.forum-quote .forum-quote-head { font-size: 12px; font-weight: 700; color: var(--primary, #1e3a5f); margin-bottom: 4px; }
.forum-quote .forum-quote-body { white-space: pre-wrap; word-wrap: break-word; }

.inline-reply-quote { display: none; align-items: center; gap: 8px; background: color-mix(in srgb, var(--primary, #1e3a5f) 10%, var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--primary, #1e3a5f) 30%, var(--border, #ccc)); color: var(--primary, #7a5c14); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 12.5px; }
.inline-reply-quote .quote-x { background: none; border: none; color: var(--primary, #7a5c14); cursor: pointer; font-size: 14px; line-height: 1; margin-left: auto; padding: 0 2px; }
.inline-reply-quote .quote-x:hover { color: color-mix(in srgb, var(--primary, #4a3a0a) 80%, #000); }

/* Reply modal popup */
.forums-reply-trigger { width: 100%; padding: 12px; font-size: 15px; }
.reply-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.reply-modal[hidden] { display: none; }
.reply-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.reply-modal-box { position: relative; background: var(--surface, #fff); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); width: min(640px, 92vw); max-height: 85vh; overflow-y: auto; padding: 20px 22px; }
.reply-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 15px; }
.reply-modal-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-modal-box .forums-reply-textarea { width: 100%; min-height: 140px; }
.reply-modal-box .forums-reply-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* Forum right rail — mirrors .home-side fixed rail, moved down a bit */
.forum-side {
  position: fixed;
  top: 210px;
  right: 28px;
  width: 300px;
  height: calc(100vh - 250px);
  overflow-y: auto;
  z-index: 50;
  padding: 0 2px;
}
.forum-side-inner { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) { .forum-side { display: none; } }


/* ---- Business standalone rating box (separate, right of business block) ---- */
.biz-with-rating {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.biz-with-rating > .biz-profile {
  flex: 1;
  min-width: 0;
}
.biz-rating-box {
  width: 300px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border, #e0e6ef);
  border-radius: 12px;
  padding: 18px;
  position: sticky;
  top: 20px;
  box-shadow: 0 1px 3px rgba(20,40,80,.06);
}
.biz-rating-box .biz-section-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--primary, #1e3a5f);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary, #1e3a5f);
}
.biz-rating-summary { text-align: center; padding: 6px 0 12px; }
.biz-rating-stars-big { display: inline-flex; gap: 2px; }
.biz-rating-stars-big .biz-star { font-size: 28px; color: #d0d0d0; }
.biz-rating-stars-big .biz-star.filled { color: #f5a623; }
.biz-rating-avg { font-size: 16px; color: var(--text, #333); margin-top: 2px; }
.biz-rating-count { font-size: 13px; color: #888; margin-top: 2px; }
.biz-rating-empty { font-size: 13.5px; color: #888; text-align: center; padding: 8px 0 12px; }
.biz-rating-pick { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
.biz-star-btn { background: none; border: none; font-size: 32px; color: #d0d0d0; cursor: pointer; padding: 0 2px; line-height: 1; transition: color .12s; }
.biz-star-btn.active, .biz-star-btn:hover { color: #f5a623; }
.biz-rating-label { font-size: 12.5px; color: #888; text-align: center; margin-bottom: 10px; }
.biz-rating-comment { width: 100%; min-height: 70px; border: 1px solid var(--border, #d0d0d0); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; resize: vertical; margin-bottom: 10px; box-sizing: border-box; background: #fff; }
.biz-rating-login { font-size: 13.5px; color: #666; text-align: center; padding: 6px 0; }
.biz-ratings-list { margin-top: 16px; }
.biz-ratings-head { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--primary, #1e3a5f); margin: 0 0 10px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.biz-rating-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.biz-rating-item:last-child { border-bottom: none; }
.biz-rating-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.biz-rating-user { font-weight: 600; font-size: 13.5px; color: var(--text, #333); }
.biz-rating-stars-sm { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.biz-rating-comment-text { font-size: 13.5px; color: #555; margin: 4px 0; line-height: 1.45; }
.biz-rating-date { font-size: 12px; color: #aaa; }
@media (max-width: 900px) {
  .biz-with-rating { flex-direction: column; }
  .biz-rating-box { width: 100%; position: static; }
}

/* ---- New message member picker (messages.php) ---- */
.newmsg-wrap { position: relative; margin: 10px 0 14px; display: inline-block; }
#newmsg-btn.btn {
  background: #1877f2; border-color: #1877f2; color: #fff;
}
#newmsg-btn.btn:hover {
  background: #1468d6; border-color: #1468d6; color: #fff;
}
.newmsg-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  width: 300px; max-width: 86vw;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 8px;
}
.newmsg-search {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.newmsg-list { max-height: 260px; overflow-y: auto; }
.newmsg-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; background: none; border-radius: 8px;
  font-size: 14px; color: var(--text); cursor: pointer; text-align: left;
}
.newmsg-item:hover { background: rgba(0,0,0,.05); }
.newmsg-item img, .newmsg-init {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.newmsg-init {
  background: var(--primary); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.newmsg-empty { padding: 10px; font-size: 13px; color: var(--muted); }