:root {
  /* Brand — Trisakti navy & gold institutional palette. Trisakti's official
     color is blue (per the university flag/Wikipedia infobox); this navy
     (#0A1F44) is this app's own long-standing anchor for it. Gold is a
     secondary accent for prices/badges, not sampled from an
     official spec — swap if exact brand values become available. */
  --primary: #0A1F44;
  --primary-light: #142E5C;
  --accent: #B08D57;       /* muted brass/gold — prices, badges */
  --heart: #1C3566;        /* mid navy — gradients (cover banners, welcome card) */
  --like-active: #C42E3C;  /* red — active/liked state (darkened for 4.5:1 text contrast on light surfaces) */
  --action: #0A1F44;
  --action-hover: #142E5C;
  --bg-color: #F4F5F7;
  --surface: #FFFFFF;
  --surface-alt: #EEF0F3;
  --border: #DDE1E6;
  --border-strong: #B9C0C9;

  /* Text */
  --text-main: #1C2333;
  --text-muted: #5B6472;
  --text-faint: #666E7C;   /* ≥4.5:1 on every light surface (WCAG 2.2 AA) */
  --text-on-primary: #FFFFFF;
  /* Borders of form controls — ≥3:1 against the surface (WCAG 1.4.11); the
     softer --border stays for decorative card/divider lines. */
  --input-border: #7A8294;
  /* Focus ring — ≥3:1 against light surfaces */
  --focus-ring: #0A1F44;

  /* Shadows — navy-tinted */
  --shadow-sm: 0 1px 3px rgba(10, 31, 68, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 31, 68, 0.10);
  --shadow-lg: 0 12px 28px rgba(10, 31, 68, 0.14);
  --shadow-xl: 0 20px 45px rgba(10, 31, 68, 0.20);
  --shadow-hover: 0 6px 20px -12px rgba(10, 31, 68, 0.35);

  /* Geometry */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xl: 16px;
  --transition: 0.2s ease;

  --chat-active: #E7EBF3;
  /* Action-coloured text placed on the --chat-active tint */
  --action-on-tint: var(--action);
  --bubble-in: #EEF0F3;

  /* Gold badge tokens (trust rows, tags) */
  --badge-bg: #F5EDE0;
  --badge-border: #DFC9A0;
  --badge-text: #76592A;   /* ≥4.5:1 on --badge-bg */

  /* Other users' avatar tint (vs. your own navy-tinted avatar below) */
  --other-avatar-bg: #E7EBF3;
  --other-avatar-text: #46536B;
  --other-avatar-border: #C7D0DE;

  /* Own-avatar navy tint */
  --self-avatar-bg: #DCE3F0;
  --self-avatar-text: #0A1F44;
  --self-avatar-border: #B7C4DC;

  --avatar-ring: linear-gradient(135deg, #0A1F44, #B08D57);

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  color-scheme: light;
}

[data-theme='dark'] {
  color-scheme: dark;
  --primary: #6E8FC7;       /* lightened navy so it stays legible on dark surfaces */
  --primary-light: #8CA6D6;
  --accent: #C9A66B;        /* lightened gold */
  --heart: #35507E;
  --action: #6E8FC7;
  --action-hover: #8CA6D6;
  --bg-color: #0D1220;
  --surface: #161D2E;
  --surface-alt: #1A2233;
  --border: #2A3247;
  --border-strong: #3B4560;
  --text-main: #E7E9EE;
  --text-muted: #9096A5;
  --text-faint: #8A91A1;   /* ≥4.5:1 on every dark surface */
  /* Dark text on the light-blue dark-mode --action: white on #6E8FC7 is only 3.3:1 */
  --text-on-primary: #0D1220;
  --input-border: #737C94;
  --focus-ring: #A9C0E8;
  --like-active: #F26B76;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 50px rgba(0, 0, 0, 0.65);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);

  --chat-active: rgba(110, 143, 199, 0.18);
  --action-on-tint: #8CA6D6;   /* --action on the tint is only 3.9:1 in dark mode */
  --bubble-in: #1D2438;

  --badge-bg: rgba(201, 166, 107, 0.16);
  --badge-border: rgba(201, 166, 107, 0.4);
  --badge-text: #D8BD8B;

  --other-avatar-bg: #1D2438;
  --other-avatar-text: #A9B4C9;
  --other-avatar-border: #3B4560;

  --self-avatar-bg: rgba(110, 143, 199, 0.22);
  --self-avatar-text: #A9C0E8;
  --self-avatar-border: rgba(110, 143, 199, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  /* faint blueprint grid — brand texture that shows through in the gaps between cards */
  background-image:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--action) 8%, transparent) 0px, color-mix(in oklab, var(--action) 8%, transparent) 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--action) 8%, transparent) 0px, color-mix(in oklab, var(--action) 8%, transparent) 1px, transparent 1px, transparent 36px);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  scrollbar-gutter: stable;
}

/* Base reset for any <button> not covered by a .btn/.topbar-icon-btn/etc.
   variant class — without this, unstyled buttons fall back to the browser's
   native chrome (a light, OS-themed box) which doesn't track our theme. */
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mono { font-family: var(--font-mono); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

/* Uppercase eyebrow label recipe, reused as a section header pattern */
.section-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Cards & Buttons --- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.card:hover {
  border-color: var(--border-strong);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm) !important;
  font-weight: 650;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-size: 0.9rem;
}

.btn:active,
.action-btn:active,
.sidebar-nav-link:active,
.market-sidebar-link:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--action);
  color: var(--text-on-primary);
}
.btn-primary:hover {
  background: var(--action-hover);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-main);
}
.btn-outline:hover {
  background: var(--bg-color);
  border-color: var(--action);
  color: var(--action);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-main);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-ghost:hover {
  background: var(--bg-color);
  color: var(--action);
}

.modal-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.25rem;
}
.modal-close-btn:hover {
  background: var(--bg-color);
  border-color: var(--text-muted);
}

.input-field {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--input-border);
  background: var(--bg-color);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text-main);
  transition: var(--transition);
  margin-bottom: 1.25rem;
}
.input-field:focus {
  outline: none;
  border-color: var(--action);
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--action) 10%, transparent);
}

/* Community Info post badge */
.info-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--chat-active);
  color: var(--action-on-tint);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.info-badge i { font-size: 11px; }

/* --- Billboard status badges (pending/approved/declined) --- */
.billboard-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.billboard-status-badge.is-pending { background: var(--badge-bg); color: var(--badge-text); }
.billboard-status-badge.is-approved { background: var(--chat-active); color: var(--action-on-tint); }
.billboard-status-badge.is-declined { background: color-mix(in oklab, var(--like-active) 16%, transparent); color: var(--like-active); }

/* A billboard card is paid/reviewed placement, not organic feed content — it
   should read as a small "ad unit" at a glance, not just another post. */
.billboard-card {
  padding: 16px;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, var(--surface)) 0%, var(--surface) 90px);
}

.billboard-sponsor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.billboard-sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--badge-border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.billboard-sponsored-badge i { font-size: 11px; }

.billboard-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--text-main);
  line-height: 1.25;
}

.billboard-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-color);
  box-shadow: var(--shadow-md);
}
.billboard-media img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: var(--bg-color);
}

/* Focused single-ad view (billboard.html?id=...) — the page intro is
   removed entirely, so the ad itself gets a much wider stage and larger
   type instead of sitting in the same narrow column as the ad list. */
.billboard-focused { max-width: 900px !important; }
.billboard-focused .billboard-card { padding: 32px; }
.billboard-focused .billboard-title { font-size: 2.1rem; }
.billboard-focused .billboard-card p { font-size: 1.05rem !important; }
.billboard-focused .billboard-media img { max-height: 560px; }
.billboard-focused .billboard-sponsored-badge { font-size: 0.85rem; padding: 5px 12px; }

.billboard-expires-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 650;
  color: #fff;
  background: rgba(10, 31, 68, 0.7);
  backdrop-filter: blur(3px);
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.billboard-expires-chip-standalone {
  position: static;
  background: var(--bg-color);
  color: var(--text-muted);
  margin-top: 0.6rem;
}

/* "Request Billboard Ad" CTA — a dashed gold card rather than a plain button,
   to read as an invitation to place an ad, matching the billboard cards' own
   gold "sponsored" branding rather than looking like a generic form submit. */
.billboard-request-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--badge-border);
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.billboard-request-btn:hover {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 11%, var(--surface));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.billboard-request-btn:active { transform: translateY(0) scale(0.99); }
.billboard-request-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.05rem;
}
.billboard-request-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.billboard-request-copy strong {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}
.billboard-request-copy span {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: normal;
}
.billboard-request-caret {
  color: var(--text-faint);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: var(--transition);
}
.billboard-request-btn:hover .billboard-request-caret {
  color: var(--accent);
  transform: translateX(3px);
}

/* Admin Pending Review queue — like the full "live ad" card (same full-size
   image), minus the redundant sponsor/status badges, with the buttons
   isolated below a divider so they read as a distinct decision rather than
   just another line in the card. */
.billboard-review-card { padding: 14px; margin-bottom: 0.75rem; }
.billboard-review-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* --- Billboard carousel: one slide visible at a time, dots + arrows --- */
.billboard-carousel .billboard-card { margin-bottom: 0; }

.billboard-carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* padding+negative-margin gives the card's box-shadow room to breathe
     without the clip boundary (needed to hide sliding overflow) cutting it off */
  padding: 8px;
  margin: -8px;
  /* JS measures every slide once and locks this to the tallest one's height,
     so switching slides never resizes the viewport at all — nothing outside
     the carousel ever shifts, instead of just shifting smoothly. */
}

/* Slide + fade + a touch of depth on entry, eased with a slight overshoot so
   the incoming card settles rather than just stopping dead. No filter/blur
   here — animating blur alongside transform+shadow every frame is expensive
   and was contributing to the jitter, not just the height jump. */
@keyframes billboard-slide-next {
  0%   { opacity: 0; transform: translateX(36px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes billboard-slide-prev {
  0%   { opacity: 0; transform: translateX(-36px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.billboard-carousel-viewport .billboard-card {
  animation: billboard-slide-next 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.billboard-carousel-viewport .billboard-card.billboard-slide-prev {
  animation-name: billboard-slide-prev;
}
@media (prefers-reduced-motion: reduce) {
  .billboard-carousel-viewport .billboard-card { animation: none; }
}

.billboard-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}
.carousel-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-main);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
  font-size: 0.9rem;
}
.carousel-arrow:hover { border-color: var(--action); color: var(--action); transform: scale(1.1); }
.carousel-arrow:active { transform: scale(0.92); }
.carousel-dots { display: flex; align-items: center; gap: 6px; }
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  border: none;
  background: var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background var(--transition), transform var(--transition);
}
.carousel-dot:hover { transform: scale(1.3); }
.carousel-dot.active { background: var(--action); width: 18px; }

/* --- Avatars: initials-in-circle (no external image dependency) --- */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  background: var(--other-avatar-bg);
  color: var(--other-avatar-text);
  border: 1px solid var(--other-avatar-border);
  object-fit: cover;
  overflow: hidden;
}
.avatar.avatar-self {
  background: var(--self-avatar-bg);
  color: var(--self-avatar-text);
  border-color: var(--self-avatar-border);
}

/* --- Landing Page --- */
.landing-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--border) 70%, transparent) 0px, color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--border) 70%, transparent) 0px, color-mix(in oklab, var(--border) 70%, transparent) 1px, transparent 1px, transparent 32px),
    linear-gradient(135deg, var(--bg-color) 0%, oklch(0.94 0.012 50) 100%);
  position: relative;
  overflow: hidden;
}

.blueprint-panel {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 1000px;
  display: flex;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 1;
}

/* Mechanical-engineering motif: large faint gear silhouettes framing the auth panel */
.landing-deco {
  position: absolute;
  color: var(--action);
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.landing-deco-1 { top: -70px; left: -70px; font-size: 340px; }
.landing-deco-2 { bottom: -90px; right: -90px; font-size: 280px; }

@media (prefers-reduced-motion: no-preference) {
  .landing-deco-1 { animation: spin-slow 70s linear infinite; }
  .landing-deco-2 { animation: spin-slow 90s linear infinite reverse; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Dashboard: fixed background silhouettes — stay pinned to the viewport corner as the
   feed scrolls, sitting behind any card that happens to cover that spot (z-index: -1). */
.page-deco-gear {
  position: fixed;
  z-index: -1;
  color: var(--action);
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}
.page-deco-gear-1 { bottom: -80px; right: -60px; font-size: 320px; }
.page-deco-gear-2 { bottom: 60px; right: 200px; font-size: 150px; }
@media (prefers-reduced-motion: no-preference) {
  .page-deco-gear-1 { animation: spin-slow 90s linear infinite; }
  .page-deco-gear-2 { animation: spin-slow 60s linear infinite reverse; }
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  height: 40px;
  transition: var(--transition);
  border: 1px solid transparent;
}
.search-bar i { color: var(--text-muted); }
.search-bar input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.9rem;
  font-family: var(--font-body);
  width: 100%;
  color: var(--text-main);
}

/* --- Dropdown (marketplace sort) --- */
.custom-dropdown { position: relative; display: inline-block; }
.dropdown-trigger {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}
.dropdown-trigger:hover { background: var(--bg-color); border-color: var(--action); }
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  min-width: 160px;
  z-index: 1000;
  display: none;
  overflow: hidden;
  animation: dropdownFade 0.2s ease-out;
}
.dropdown-menu.active { display: block; }
.dropdown-item {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-item:hover { background: var(--bg-color); color: var(--action); }
.dropdown-item.selected { font-weight: 700; color: var(--action-on-tint); background: var(--chat-active); }

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Auth (index.html) --- */
.hero-sec {
  flex: 1;
  padding: 5rem;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0px, rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 40px),
    linear-gradient(135deg, var(--action) 0%, var(--heart) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  isolation: isolate;
}
.hero-sec::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -70px;
  width: 420px;
  height: 420px;
  background-image: url('../images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.08;
  pointer-events: none;
}
.hero-deco-gear {
  position: absolute;
  z-index: -1;
  top: -50px;
  left: -50px;
  font-size: 190px;
  color: white;
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-deco-gear { animation: spin-slow 60s linear infinite; }
}
.hero-sec h1 { font-family: var(--font-display); font-weight: 400; font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-sec p { font-family: var(--font-body); font-size: 1.1rem; opacity: 0.9; margin-bottom: 2.5rem; }
.auth-sec { flex: 1; padding: 5rem; display: flex; flex-direction: column; justify-content: center; background: var(--surface); }
.auth-header { margin-bottom: 2.5rem; text-align: center; }
.auth-header h2 { font-size: 2.4rem; color: var(--text-main); }
.auth-header p { color: var(--text-muted); font-family: var(--font-body); }

.form-toggle { display: flex; background: var(--bg-color); border-radius: var(--radius-md); padding: 0.4rem; margin-bottom: 2.5rem; }
.form-toggle button { flex: 1; padding: 0.8rem; border: none; background: transparent; border-radius: var(--radius-sm); font-weight: 650; font-family: var(--font-body); color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.form-toggle button.active { background: var(--surface); color: var(--action); box-shadow: var(--shadow-sm); }
.auth-form { display: none; animation: fadeIn 0.4s ease forwards; }
.auth-form.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Modal --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: oklch(0.20 0.02 50 / 0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: var(--transition); z-index: 1000; }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-content, .modal { background: var(--surface); border-radius: var(--radius-lg); width: 90%; max-width: 480px; padding: 2rem; transform: scale(0.97); transition: var(--transition); box-shadow: var(--shadow-xl); max-height: 90vh; overflow-y: auto; }
.modal-content { max-width: 420px; text-align: center; }
.modal-overlay.active .modal-content, .modal-overlay.active .modal { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-body { margin-top: 0.5rem; }
.qr-container { background: var(--bg-color); padding: 1.5rem; border-radius: var(--radius-lg); border: 2px dashed var(--border); margin: 1.5rem 0; }
.qr-container img { width: 200px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; mix-blend-mode: multiply; }
.qr-price { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--action); margin-bottom: 0.5rem; }

/* --- Top bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  flex-shrink: 0;
}
.topbar-logo-mark {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 5px;
  flex-shrink: 0;
}
.topbar-logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  padding: 4px;
  flex-shrink: 0;
}
.hero-logo-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topbar-logo { color: var(--text-main); }
.topbar-logo-text { text-align: left; line-height: 1.05; }
.topbar-logo-text .name { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--text-main); }
.topbar-logo-text .sub { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 650; }
.topbar-search { flex: 1; min-width: 0; max-width: 440px; position: relative; }
.topbar-search input {
  width: 100%;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-color);
  padding: 0 14px 0 36px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
}
.topbar-search input:focus { border-color: var(--action); background: var(--surface); }
.topbar-search i { position: absolute; left: 12px; top: 10px; color: var(--text-faint); font-size: 1rem; }
.topbar-spacer { flex: 1; }
.topbar-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-main);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--bg-color); }
.topbar-icon-btn i { font-size: 1.3rem; }
.icon-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--action);
  border: 1.5px solid var(--surface);
}
.topbar .avatar { width: 34px; height: 34px; cursor: pointer; }

/* --- Dashboard shell --- */
.dashboard-layout {
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  align-items: start;
}

.main-content { min-height: 85vh; position: relative; }

@keyframes viewEntry {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.main-content > div { animation: viewEntry 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Skeletons --- */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-color) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-line { height: 0.85rem; border-radius: 6px; margin-bottom: 0.5rem; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.skeleton-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.skeleton-card .skeleton-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.skeleton-card .skeleton-header-lines { flex: 1; }
.skeleton-card .skeleton-line:last-child { margin-bottom: 0; width: 70%; }
.skeleton-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.skeleton-tile .skeleton { width: 100%; aspect-ratio: 1/1; border-radius: 0; }
.skeleton-tile .skeleton-tile-body { padding: 0.85rem; }
.skeleton-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.skeleton-row .skeleton-header-lines { flex: 1; }

@keyframes cardEntry {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.stagger-in { animation: cardEntry 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes likePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.like-pop { animation: likePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* --- Left rail --- */
.left-sidebar {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-brand { display: none; } /* logo now lives in the top bar */

.sidebar-search-container { display: none; } /* search now lives in the top bar */

.sidebar-utility-bar {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid var(--border);
}
.sidebar-utility-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-main);
  transition: var(--transition);
  opacity: 0.85;
}
.sidebar-utility-btn:hover { background: var(--bg-color); opacity: 1; }
.sidebar-utility-btn i { font-size: 1.25rem; }

/* Wraps the ad banner + "Request an ad" link as one unit, sitting in the
   sidebar's normal flow right below the utility bar. Unconditional (unlike
   the banner itself, which only appears once JS finds a live ad) so the
   request link stays discoverable even when nothing is currently running.
   (Previously this was pinned to the bottom of a forced-tall sidebar via
   margin-top:auto — that broke the sticky sidebar's scroll behavior, since
   a sidebar barely taller than the viewport un-sticks almost immediately.
   Plain flow, accepting some blank space below on tall viewports, keeps
   the sticky nav working correctly.) */
.sidebar-billboard-section {
  width: 100%;
  margin-top: 0.75rem;
}

/* Billboard/ad banner. The box is a fixed aspect ratio, not sized to
   whichever image happens to be loaded — different ads have different
   natural proportions, and letting the box follow the image's own height
   made it resize (jitter) every time the banner switched ads. A constant
   slot size with object-fit:cover (like a real ad unit) fixes that; some
   ads crop slightly to fit, but nothing ever jumps between switches.
   Clicking it opens that ad's own page; prev/next below it let users step
   through ads manually instead of only waiting on the auto-rotate. */
.sidebar-billboard-widget {
  width: 100%;
}
.sidebar-billboard-widget > a {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.sidebar-billboard-widget > a:hover { transform: translateY(-2px); }
.sidebar-billboard-widget img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-color);
  transition: opacity 0.25s ease;
}
.sidebar-billboard-widget .billboard-sponsored-badge {
  position: absolute;
  top: 8px;
  left: 8px;
}
.sidebar-billboard-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.sidebar-billboard-controls .carousel-arrow {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

/* "Request an ad" — entry point into billboard.html's Get Featured form.
   Deliberately understated (text link, not a filled button) since this is a
   secondary action sitting right underneath someone else's paid placement. */
.sidebar-request-ad-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.sidebar-request-ad-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.sidebar-request-ad-link i { font-size: 0.85rem; }

/* "View all billboard ads" — the only route into plain billboard.html (live
   carousel, My Submissions, and — for the admin account — the Pending
   Review queue). The banner image links to one specific ad's own page and
   "Request an ad" jumps straight to the form, so without this there was no
   way to reach the general list/admin view from the UI at all. */
.sidebar-viewall-ad-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-faint);
  text-decoration: none;
  transition: var(--transition);
}
.sidebar-viewall-ad-link:hover { color: var(--action); }
.sidebar-viewall-ad-link i { font-size: 0.8rem; }

/* Mobile-only inline "Sponsored" feed card — styled to read as a native
   feed ad (like Instagram/LinkedIn) rather than the desktop sidebar widget
   dropped into a wider column: image edge-to-edge with the badge overlaid
   on it, dots only (no floating side arrows — swipe/tap the dots instead),
   "View all"/"Request an ad" as plain text links rather than boxed buttons.
   Hidden by default (both because desktop already has the sidebar slot,
   and because there may be no live ad yet); JS adds .has-ad once it finds
   one, and only the mobile breakpoint below turns that into an actual
   `display`, so it never shows on desktop even after JS unhides it. */
.mobile-billboard-widget { display: none; overflow: hidden; }
.mobile-billboard-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-color);
}
.mobile-billboard-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ad banner change reuses the billboard.html carousel's own slide+fade+scale
   keyframes (defined above) for a consistent feel across the site. */
.sidebar-billboard-widget img,
.mobile-billboard-media img {
  will-change: transform, opacity;
}
.sidebar-billboard-widget img.ad-anim-next,
.mobile-billboard-media img.ad-anim-next {
  animation: billboard-slide-next 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sidebar-billboard-widget img.ad-anim-prev,
.mobile-billboard-media img.ad-anim-prev {
  animation: billboard-slide-prev 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-billboard-widget img.ad-anim-next,
  .sidebar-billboard-widget img.ad-anim-prev,
  .mobile-billboard-media img.ad-anim-next,
  .mobile-billboard-media img.ad-anim-prev { animation: none; }
}
.mobile-billboard-media .billboard-sponsored-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.mobile-billboard-dots-row {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}
.mobile-billboard-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.mobile-billboard-footer a { color: var(--text-muted); text-decoration: none; }
.mobile-billboard-footer a:hover { color: var(--action); }
.mobile-billboard-footer span { color: var(--text-faint); }

.sidebar-popout-dropdown {
  position: absolute;
  bottom: 0;
  left: calc(100% + 12px);
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  z-index: 2000;
  overflow: hidden;
  animation: sidebarPopIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sidebarPopIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.notif-dropdown-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.notif-dropdown-header h4 { font-size: 0.9rem; font-weight: 700; font-family: var(--font-body); }
.notif-empty-state { padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.notif-empty-state i { font-size: 2.2rem; color: var(--text-muted); opacity: 0.3; }
.notif-empty-state p { font-size: 0.85rem; color: var(--text-muted); font-weight: 650; }

.notif-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-color); }
.notif-item.unread { background: var(--chat-active); }
.notif-item .notif-text { font-size: 0.8rem; color: var(--text-main); line-height: 1.4; }
.notif-item .notif-text b { font-weight: 700; }
.notif-item .notif-time { font-size: 0.68rem; color: var(--text-faint); margin-top: 3px; }
.notif-actor-link { cursor: pointer; }
.notif-item .notif-text b.notif-actor-link:hover { text-decoration: underline; }

/* Identity card */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 8px;
  text-align: left;
  overflow: hidden;
}
.profile-card-header {
  display: block;
  height: 54px;
  margin: -16px -16px 14px;
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 18px),
    linear-gradient(135deg, var(--action) 0%, var(--heart) 100%);
}
.profile-card-header::after {
  content: '';
  position: absolute;
  right: -18px;
  top: -18px;
  width: 90px;
  height: 90px;
  background-image: url('../images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.2;
  pointer-events: none;
}
.profile-card img.avatar, .profile-card .avatar {
  width: 42px;
  height: 42px;
  margin: 0;
  font-size: 0.85rem;
}
.profile-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--text-main); letter-spacing: -0.01em; }
.profile-card p { color: var(--text-muted); font-size: 0.72rem; margin-bottom: 0; padding: 0; }
.profile-card .card-identity-row { display: flex; align-items: center; gap: 11px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 550;
  font-size: 0.83rem;
  transition: var(--transition);
}
.sidebar-nav-link i { font-size: 1.05rem; color: var(--text-muted); }
.sidebar-nav-link:hover { background: var(--bg-color); }
.sidebar-nav-link.active { background: var(--chat-active); color: var(--action-on-tint); font-weight: 700; }
.sidebar-nav-link.active i { color: var(--action-on-tint); }

/* --- Welcome card --- */
.welcome-card-navy {
  background: linear-gradient(135deg, var(--action) 0%, var(--heart) 100%) !important;
  color: white !important;
  border: none !important;
  padding: 1.75rem !important;
}
.welcome-btn-outline {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white !important;
  flex: 1;
  font-size: 0.85rem;
  gap: 0.5rem;
}
.welcome-btn-outline:hover { background: rgba(255, 255, 255, 0.18); border-color: white; }

/* --- Feed & posts --- */
.create-post { padding: 14px; }
.create-post textarea {
  flex: 1;
  border: 1px solid var(--border);
  outline: none;
  resize: none;
  background: var(--bg-color);
  padding: 0.7rem 1.1rem;
  border-radius: 19px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
  color: var(--text-main);
}
.create-post textarea:focus { background: var(--surface); border-color: var(--action); }

.post-actions { display: flex; align-items: center; justify-content: flex-start; padding-top: 0.6rem; margin-top: 0.6rem; border-top: 1px solid var(--border); gap: 0.5rem; }
.post-card { padding: 16px; margin-bottom: 14px; }
.post-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.post-author-info h4 { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; }

.action-btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
}
.action-btn:hover { background: var(--bg-color); color: var(--action); }

/* --- Sidebar widgets (marketplace preview / suggested connections) --- */
.market-widget { padding: 16px !important; }
.market-widget h3 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.market-widget h3 .see-all { font-size: 0.72rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--action); cursor: pointer; }
.market-widget h3 .see-all:hover { text-decoration: underline; }

.market-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  margin: 0 -9px;
  border-radius: 10px;
  transition: var(--transition);
  border-bottom: none;
  cursor: pointer;
}
.market-item:hover { background: var(--surface-alt); }

.m-img {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-color);
}
.m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-info h5 { font-family: var(--font-body); font-size: 0.8rem; font-weight: 650; color: var(--text-main); margin: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-info .subtext { font-size: 0.7rem; color: var(--text-muted); }
.m-info .price { color: var(--action); font-weight: 700; font-size: 0.78rem; margin-top: 1px; }

/* --- Marketplace filter rail --- */
.market-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.market-sidebar-header { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: 12px; padding: 0 2px; }
.market-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-main);
  font-weight: 550;
  font-size: 0.82rem;
  transition: var(--transition);
}
.market-sidebar-link:hover { background: var(--bg-color); }
.market-sidebar-link i { font-size: 0.95rem; background: none; width: auto; height: auto; border-radius: 0; color: var(--text-muted); }
.market-sidebar-link.active { background: var(--chat-active); color: var(--action-on-tint); font-weight: 700; }
.market-sidebar-link.active i { background: none; color: var(--action); }
.market-sidebar-extras { display: flex; flex-direction: column; }
.market-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 1.25rem 0 0.5rem 0;
  padding: 0 2px;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

/* --- Marketplace grid & listing card --- */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.listing-card, .facebook-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.listing-card:hover, .facebook-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.listing-card .img-container, .facebook-card .img-container { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-color); position: relative; }
.listing-card .img-container img, .facebook-card .img-container img { width: 100%; height: 100%; object-fit: cover; }
.listing-card .kind-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.94);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.listing-card .info, .facebook-card .info { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.listing-card .title, .facebook-card .title { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; color: var(--text-main); line-height: 1.35; }
.listing-card .price, .facebook-card .price { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: var(--action); margin-top: 2px; }
.listing-card .meta, .facebook-card .meta { font-size: 0.75rem; color: var(--text-muted); }
.listing-card .seller-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.listing-card .seller-footer .avatar { width: 22px; height: 22px; font-size: 0.62rem; }
.listing-card .seller-footer .s-name { font-size: 0.72rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-card .seller-footer .s-sub { font-size: 0.66rem; color: var(--text-faint); }

/* --- Filter chips / checkboxes (Marketplace + Create) --- */
.filter-chip {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  background: var(--surface);
}
.filter-chip:hover, .filter-chip.active { border-color: var(--action); color: var(--action); }
.filter-chip.active { background: var(--chat-active); color: var(--action-on-tint); font-weight: 700; }

.filter-checkbox {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; display: inline-block;
  border: 1.5px solid var(--border-strong);
}
.filter-checkbox.on { background: var(--action); border-color: var(--action); position: relative; }
.filter-checkbox.on::after {
  content: '';
  position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* --- Trust rows (listing seller card) --- */
.trust-row { display: flex; gap: 9px; align-items: flex-start; }
.trust-swatch { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; margin-top: 1px; background: var(--badge-bg); border: 1px solid var(--badge-border); }
.trust-row .trust-text { font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); }
.trust-row .trust-text b { color: var(--text-main); font-weight: 700; }

/* --- Listing detail --- */
.listing-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 768px) {
  .listing-detail-grid { grid-template-columns: 1fr; }
}
.listing-hero {
  height: 320px;
  background: var(--bg-color);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.listing-hero img { width: 100%; height: 100%; object-fit: cover; }
.listing-back-link { font-size: 0.82rem; font-weight: 650; color: var(--text-muted); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 4px; }
.listing-back-link:hover { color: var(--action); }
.spec-row { display: flex; gap: 20px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.spec-item .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.spec-item .v { font-size: 0.85rem; font-weight: 650; margin-top: 4px; color: var(--text-main); }

/* --- Create listing: type selector --- */
.type-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.type-select-card {
  text-align: left;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
}
.type-select-card:hover { border-color: var(--border-strong); }
.type-select-card.active { border-color: var(--action); background: var(--chat-active); }
.type-select-card .t-label { font-weight: 700; font-size: 0.85rem; color: var(--text-main); }
.type-select-card .t-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
/* Muted text on the tinted (selected) card would fall to ~4.3:1 in dark mode */
.type-select-card.active .t-hint { color: var(--text-main); }

.form-field label { font-size: 0.78rem; font-weight: 650; color: var(--text-muted); display: block; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--action); }

/* --- Experience / Certification timeline items --- */
.timeline-item { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.timeline-item:last-child { border-bottom: none; }
.timeline-item .t-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface-alt); border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-muted); font-weight: 700; font-size: 0.85rem;
}
.timeline-item .t-body { flex: 1; min-width: 0; }
.timeline-item .t-title { font-weight: 700; font-size: 0.88rem; color: var(--text-main); }
.timeline-item .t-sub { font-size: 0.8rem; color: var(--text-main); margin-top: 2px; }
.timeline-item .t-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.timeline-item .t-desc { font-size: 0.8rem; color: var(--text-main); margin-top: 8px; line-height: 1.55; white-space: pre-line; }
.timeline-item .t-desc.clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.t-desc-toggle {
  display: none; margin-top: 5px; padding: 0; background: none; border: none; cursor: pointer;
  color: var(--action); font-weight: 650; font-size: 0.78rem; font-family: var(--font-body);
}
.t-desc-wrap.overflowing .t-desc-toggle { display: inline-block; }
.t-desc-toggle:hover { text-decoration: underline; }
.timeline-item .t-file { font-size: 0.75rem; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.timeline-item .t-actions { display: flex; gap: 2px; flex-shrink: 0; }
.timeline-item .t-actions button { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-muted); }
.timeline-item .t-actions button:hover { background: var(--bg-color); color: var(--action); }

.section-add-btn {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--text-muted); flex-shrink: 0;
}
.section-add-btn:hover { background: var(--bg-color); color: var(--action); }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-main); cursor: pointer; }
.checkbox-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--action); cursor: pointer; }

/* --- Contact Information --- */
.contact-group { margin-top: 12px; }
.contact-group:first-child { margin-top: 4px; }
.contact-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.contact-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-main); text-align: left;
  text-decoration: none; cursor: pointer; margin-bottom: 8px; transition: var(--transition);
}
.contact-row:hover { border-color: var(--action); background: var(--surface-alt); }
.contact-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--action) 12%, transparent); color: var(--action); font-size: 1.05rem;
}
.contact-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contact-tx-label { font-size: 0.68rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.contact-tx-value { font-size: 0.86rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-go { color: var(--text-muted); font-size: 0.9rem; flex-shrink: 0; }
.contact-btn-group { display: flex; flex-direction: column; gap: 8px; }
.contact-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-main); font-weight: 650; font-size: 0.82rem;
  font-family: var(--font-body); text-decoration: none; cursor: pointer; transition: var(--transition);
}
.contact-btn:hover { border-color: var(--action); color: var(--action); background: var(--surface-alt); }
.contact-btn i { font-size: 1.05rem; }

/* --- Search results --- */
.search-tabs { display: flex; gap: 6px; margin: 18px 0 20px; border-bottom: 1px solid var(--border); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.search-tab {
  padding: 9px 3px;
  margin-right: 14px;
  font-size: 0.83rem;
  font-weight: 550;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--font-body);
}
.search-tab.active { font-weight: 700; color: var(--action); border-bottom-color: var(--action); }
.search-result-row {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  transition: var(--transition);
  cursor: pointer;
}
.search-result-row:hover { border-color: var(--border-strong); }

/* --- Expertise / people search --- */
.search-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; }
.suggest-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-main);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: var(--transition);
}
.suggest-chip:hover { border-color: var(--action); color: var(--action); }
.suggest-chip i { font-size: 0.8rem; opacity: 0.6; }
.search-seeall-row {
  width: 100%; text-align: left; margin-top: 6px; padding: 11px 12px; border: none; cursor: pointer;
  background: var(--bg-color); color: var(--action); font-weight: 650; font-size: 0.8rem;
  font-family: var(--font-body); border-radius: var(--radius-md); display: flex; align-items: center; gap: 8px;
}
.search-seeall-row:hover { background: color-mix(in oklab, var(--action) 10%, transparent); }

.search-expanded-note { font-size: 0.72rem; color: var(--text-muted); margin: -8px 0 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.search-expanded-note span { background: var(--surface-alt); border-radius: 5px; padding: 2px 7px; }

.search-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.search-person-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.search-person-card .spc-head { display: flex; gap: 12px; align-items: center; }
.search-person-card .spc-id { min-width: 0; }
.search-person-card .spc-name { font-weight: 700; font-size: 0.95rem; color: var(--text-main); }
.search-person-card .spc-role { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.search-person-card .spc-match { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spc-match-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.match-chip {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 650; line-height: 1;
  background: color-mix(in oklab, var(--action) 14%, transparent); color: var(--action);
}
.spc-tags { display: flex; flex-wrap: wrap; gap: 7px; }

/* Skill / expertise pills — soft brand-tinted, with a leading dot. Rendered as
   <a>/<button> on profile views (click → people-search for that skill). */
.expertise-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1;
  color: var(--action);
  background: color-mix(in oklab, var(--action) 7%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--action) 16%, transparent);
  transition: var(--transition); text-decoration: none;
}
.expertise-chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.5; flex-shrink: 0;
}
a.expertise-chip, button.expertise-chip { cursor: pointer; font-family: inherit; }
a.expertise-chip:hover, button.expertise-chip:hover {
  background: color-mix(in oklab, var(--action) 14%, var(--surface));
  border-color: color-mix(in oklab, var(--action) 30%, transparent);
}
.search-person-card .spc-actions { display: flex; gap: 8px; margin-top: 2px; }
.search-person-card .spc-actions .btn { flex: 1; padding: 0.5rem 0.5rem; font-size: 0.78rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

@media (max-width: 640px) {
  .search-people-grid { grid-template-columns: 1fr; }
}

/* --- Empty state --- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-muted); }
.empty-state i { font-size: 2.25rem; opacity: 0.35; margin-bottom: 0.75rem; display: block; }
.empty-state h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.empty-state p { font-size: 0.85rem; }
.empty-state p a { color: var(--action); font-weight: 650; }
.empty-state i.ph-user-focus, .empty-state i.ph-user-fill { opacity: 0.4; }

.seller-card { transition: var(--transition); }
.seller-card:hover { border-color: var(--action) !important; box-shadow: var(--shadow-sm); }
.fb-modal-header { border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.fb-modal-body { padding: 1.5rem; }

.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* --- Right sidebar --- */
.right-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 86px; }

/* --- Chat --- */
.chat-container { display: flex; height: 100%; }
.chat-sidebar { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.chat-sidebar .search-bar { background: var(--bg-color); border-radius: var(--radius-md); padding: 0.4rem 0.9rem; }

.chat-link {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
  gap: 11px;
}
.chat-link:hover { background: var(--bg-color); }
.chat-link.active { background: var(--chat-active); }
.chat-link .avatar { width: 40px; height: 40px; }

.listing-context-strip {
  padding: 10px 20px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.listing-context-strip .thumb { width: 40px; height: 40px; border-radius: 8px; background: var(--bg-color); flex-shrink: 0; object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.05rem; }
.listing-context-strip .label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.listing-context-strip .title { font-weight: 650; font-size: 0.8rem; margin-top: 2px; color: var(--text-main); }
.listing-context-strip .price { font-weight: 700; font-size: 0.82rem; color: var(--action); }

.quick-reply-chip {
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  background: var(--surface);
}
.quick-reply-chip:hover { border-color: var(--action); color: var(--action); }

.msg-row { display: flex; width: 100%; margin-bottom: 0.4rem; }
.msg-row.incoming { justify-content: flex-start; }
.msg-row.outgoing { justify-content: flex-end; }

.message-bubble {
  max-width: 66%;
  padding: 0.6rem 1rem;
  border-radius: 15px;
  font-size: 0.86rem;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
}
.message-bubble.incoming { background: var(--bubble-in); color: var(--text-main); border-bottom-left-radius: 4px; }
.message-bubble.outgoing { background: var(--action); color: var(--text-on-primary); border-bottom-right-radius: 4px; }

.chat-timestamp { font-size: 0.62rem; color: var(--text-muted); text-align: right; margin-top: 0.2rem; opacity: 0.8; }
.message-bubble.outgoing .chat-timestamp { color: rgba(255, 255, 255, 0.75); }

.chat-input-area { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: flex-end; gap: 0.5rem; background: var(--surface); }
.chat-input-pill { flex: 1; display: flex; align-items: center; background: var(--bg-color); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.2rem 0.5rem; }
.chat-input-pill:focus-within { border-color: var(--action); }
.chat-input-pill textarea { flex: 1; border: none; background: transparent; color: var(--text-main); padding: 0.6rem 0.8rem; font-family: var(--font-body); font-size: 0.88rem; resize: none; max-height: 120px; outline: none; }

.btn-chat-action {
  background: transparent;
  border: none;
  color: var(--action);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-chat-action#btn-chat-attach { color: var(--text-muted); font-size: 1.2rem; }
.btn-chat-action#btn-chat-attach:hover { color: var(--action); background: var(--chat-active); }

/* --- Chat attachments --- */
.chat-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  background: var(--bg-color);
  border-top: 1px solid var(--border);
}
.chat-attachment-preview #chat-attachment-preview-body { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.82rem; color: var(--text-main); font-weight: 600; }
.chat-attachment-preview #chat-attachment-preview-body img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.chat-attachment-preview #chat-attachment-preview-body i { font-size: 1.3rem; color: var(--action); flex-shrink: 0; }
.chat-attachment-preview #chat-attachment-preview-body span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#btn-remove-attachment {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
#btn-remove-attachment:hover { color: #ef4444; background: var(--bg-color); }

.chat-attachment-image { display: block; margin-bottom: 6px; }
.chat-attachment-image img { width: 220px; max-width: 100%; height: 165px; border-radius: 12px; display: block; object-fit: cover; background: var(--bg-color); }
.chat-attachment-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  max-width: 220px;
}
.chat-attachment-file i { font-size: 1.15rem; flex-shrink: 0; }
.chat-attachment-file .chat-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-bubble.outgoing .chat-attachment-file { background: rgba(255, 255, 255, 0.16); }

/* --- Mobile-only account settings row (inside My Profile) --- */
.profile-mobile-settings { display: none; padding: 0; overflow: hidden; }
.profile-settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}
.profile-settings-row:last-child { border-bottom: none; }
.profile-settings-row i { font-size: 1.1rem; color: var(--text-muted); }
.profile-settings-row:hover { background: var(--bg-color); }

/* =========================================================
   RESPONSIVE / MOBILE
   ========================================================= */

/* --- Auth page (index.html): stack the split screen --- */
@media (max-width: 860px) {
  .landing-wrapper { padding: 1.25rem; align-items: flex-start; }
  .blueprint-panel { flex-direction: column; max-width: 480px; margin: 0 auto; }
  .hero-sec { padding: 2rem 1.75rem 1.5rem; }
  .hero-sec::before, .hero-deco-gear { display: none; }
  .hero-sec h1 { font-size: 1.9rem; margin-bottom: 0.75rem; }
  .hero-sec p { font-size: 0.9rem; margin-bottom: 1rem; }
  .hero-sec > p:last-child { display: none; }
  .auth-sec { padding: 2rem 1.75rem 2.25rem; }
  .auth-header { margin-bottom: 1.5rem; }
  .auth-header h2 { font-size: 1.7rem; }
}
@media (max-width: 420px) {
  .landing-wrapper { padding: 0; }
  .blueprint-panel { border-radius: 0; min-height: 100vh; }
}

/* --- Tablet: drop the right rail, narrow the left rail --- */
@media (max-width: 1024px) {
  .right-sidebar { display: none; }
  .dashboard-layout { grid-template-columns: 220px 1fr; }
}

/* --- Mobile: bottom tab bar + single column --- */
@media (max-width: 768px) {
  .topbar-inner { height: 60px; padding: 0 0.85rem; gap: 0.5rem; }
  .topbar-logo-mark { width: 38px; height: 38px; border-radius: 9px; }
  .topbar-logo-text .sub { display: none; }
  .topbar-logo-text .name { font-size: 0.9rem; }
  .topbar-search { max-width: none; }
  .topbar-spacer { display: none; }
  #btn-go-messages { display: none; }
  #btn-about-us { font-size: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important; border-radius: 50%; flex-shrink: 0; }
  #btn-about-us i { font-size: 1.05rem; margin-right: 0 !important; }

  .dashboard-layout {
    display: block;
    padding: 0.9rem 0.9rem calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .left-sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 700;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 4px env(safe-area-inset-bottom, 0px) calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg);
  }
  #sidebar-market {
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow-x: auto;
  }
  #sidebar-standard {
    flex-direction: row !important;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  #sidebar-standard .profile-card { display: none; }
  .sidebar-nav {
    flex-direction: row;
    flex: 1;
    margin-top: 0;
    gap: 0;
    justify-content: space-between;
  }
  .sidebar-nav-link {
    flex: 1;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    margin: 4px 1px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .sidebar-nav-link span { display: none; }
  .sidebar-nav-link i { font-size: 1.35rem; }

  /* Theme/logout move into the My Profile tab on mobile — not primary nav */
  #sidebar-standard .sidebar-utility-bar { display: none; }
  #sidebar-standard .sidebar-billboard-section { display: none; }
  .profile-mobile-settings { display: block; }

  /* The sidebar's ad slot is gone on mobile (see above) — this inline feed
     card is what replaces it, but only once JS has actually found a live ad. */
  .mobile-billboard-widget.has-ad { display: block; margin-bottom: 1.5rem; }

  .market-sidebar-header { display: none; }
  .market-section-title { display: none; }
  /* Only "Back to Feed" + category chips live in the bottom bar — search,
     create, and the filter/batch controls are secondary and would otherwise
     get squeezed into unreadable stacked labels in a horizontal strip.
     "Create" is still reachable via the "Sell Something" button on the
     marketplace page itself. */
  .market-sidebar-content { flex-direction: row; align-items: stretch; overflow-x: auto; gap: 4px; padding: 6px; }
  .market-sidebar-link { flex-direction: column; white-space: nowrap; font-size: 0.62rem; gap: 3px; padding: 6px 10px; flex-shrink: 0; justify-content: center; border-radius: 10px; }
  .market-sidebar-link#market-back-home { margin-bottom: 0 !important; border-bottom: none !important; padding-bottom: 6px !important; border-right: 1px solid var(--border); border-radius: 0; padding-right: 14px; margin-right: 4px; }
  .market-sidebar-extras { display: none; }

  /* Marketplace header: stack instead of squeezing heading + actions in one row */
  #view-market > div:first-child { flex-wrap: wrap; gap: 0.75rem; align-items: flex-start !important; }
  #view-market h2 { font-size: 1.4rem !important; }
  #view-market > div:first-child > div:last-child { width: 100%; }
  #btn-sell-something { flex: 1; }

  /* 2-up grid — full-width 4:3 cards were enormous on a phone */
  .market-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .listing-card .info, .facebook-card .info { padding: 9px 10px 10px; gap: 2px; }
  .listing-card .title, .facebook-card .title { font-size: 0.76rem; }
  .listing-card .price, .facebook-card .price { font-size: 0.8rem; }
  .listing-card .meta, .facebook-card .meta { font-size: 0.68rem; }
  .listing-card .seller-footer .s-name { font-size: 0.66rem; }
  .listing-card .seller-footer .s-sub { display: none; }

  /* Chat: list <-> thread swap instead of two panes */
  .chat-sidebar { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; border-right: none; }
  .chat-main { display: none !important; }
  #view-chat { height: calc(100dvh - 150px) !important; border-radius: var(--radius-md); }
  #view-chat.chat-active .chat-sidebar { display: none; }
  #view-chat.chat-active .chat-main { display: flex !important; flex: 1 1 100% !important; }
  #btn-chat-back { display: grid !important; }

  #job-form { grid-template-columns: 1fr !important; }
  .network-grid { grid-template-columns: 1fr; }
  .modal-content, .modal { padding: 1.25rem; }

  .welcome-card-navy > div { flex-wrap: wrap; }
  .welcome-btn-outline { flex: 1 1 auto; min-width: 30%; font-size: 0.78rem; padding: 0.55rem 0.7rem; white-space: nowrap; }
}
.btn-chat-action:hover { background: var(--chat-active); }

/* --- Post comments: Instagram-style avatar rows --- */
.comment-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 2px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-main);
}
.comment-avatar { margin-top: 1px; }
.comment-body { flex: 1; min-width: 0; }
.comment-row .comment-text { word-break: break-word; margin: 0; }
.comment-row .comment-text strong { font-weight: 700; margin-right: 5px; }
.comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-faint);
}
.comment-del-btn {
  cursor: pointer;
  transition: var(--transition);
}
.comment-del-btn:hover { color: #ef4444; }
.comment-reply-btn {
  cursor: pointer;
  transition: var(--transition);
}
.comment-reply-btn:hover { color: var(--action); }

/* Threaded replies (one level deep, Instagram-style) */
.comment-thread { margin-bottom: 2px; }
.comment-row-reply { margin-left: 38px; }
.comment-row-reply.comment-row-stacked { margin-left: 42px; }
.comment-view-replies-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 38px;
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--text-muted);
  cursor: pointer;
}
.comment-view-replies-btn:hover { color: var(--action); }
.comment-thread-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--border-strong);
}
.comment-replies-wrap { display: flex; flex-direction: column; }

/* Reply-target indicator above the composer */
.reply-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-muted);
}
.reply-cancel-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reply-cancel-btn:hover { color: var(--text-main); }

/* Stacked variant: username+time on their own line (mobile comment sheet) */
.comment-row-stacked .comment-top-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.comment-row-stacked .comment-top-line strong { font-weight: 700; }
.comment-row-stacked .comment-time { font-size: 0.72rem; color: var(--text-faint); font-weight: 500; }
.comment-row-stacked .comment-text { margin-top: 2px; }
.comment-row-stacked .comment-meta { margin-top: 4px; }

.comment-mention {
  color: var(--action);
  font-weight: 650;
  text-decoration: none;
}
.comment-mention:hover { text-decoration: underline; }

.comment-composer-wrap { position: relative; }
.mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
}
.mention-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}
.mention-option:hover { background: var(--bg-color); }

.comment-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.comment-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0.3rem 0;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.comment-input:focus { outline: none; }
.comment-input::placeholder { color: var(--text-faint); }
.btn-submit-comment {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.3rem 0.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--action);
  cursor: pointer;
  transition: var(--transition);
}
.btn-submit-comment:disabled {
  color: var(--text-faint);
  cursor: default;
}

.comment-emoji-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 1.3rem;
}
.comment-emoji-btn {
  background: none;
  border: none;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: var(--transition);
}
.comment-emoji-btn:hover { transform: scale(1.15); }

/* --- Mobile comment sheet (Instagram-style bottom sheet) --- */
.comments-sheet-handle { display: none; }
.comments-sheet-header { display: none; }
@media (max-width: 768px) {
  .comments-section.mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: var(--shadow-xl);
    max-height: 78vh;
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  .comments-section.mobile-sheet.open { transform: translateY(0); }
  .comments-sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 10px auto;
    cursor: pointer;
    flex-shrink: 0;
  }
  .comments-sheet-header {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .comments-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px;
    min-height: 0;
  }
  .comments-section .comment-composer,
  .comments-section .comment-emoji-row {
    padding-left: 16px;
    padding-right: 16px;
    flex-shrink: 0;
  }
  .comments-section .comment-composer {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }
}
.mobile-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mobile-sheet-backdrop.open { opacity: 1; pointer-events: all; }

/* --- Post detail modal (desktop Instagram-style split view) --- */
.post-detail-modal {
  position: relative;
  display: flex;
  width: 90vw;
  max-width: 935px;
  height: 85vh;
  max-height: 720px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: scale(0.97);
  transition: var(--transition);
}
.modal-overlay.active .post-detail-modal { transform: scale(1); }
.post-detail-modal.no-media { max-width: 500px; }
.post-detail-modal.no-media .post-detail-media { display: none; }
.post-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
}
.post-detail-media {
  flex: 1.3;
  min-width: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-detail-media img, .post-detail-media video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.post-detail-panel {
  flex: 1;
  flex-basis: 380px;
  flex-shrink: 0;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.post-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 56px 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.post-detail-header-identity { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.post-detail-header-identity strong { color: var(--text-main); font-size: 0.9rem; }
.post-detail-header-meta { color: var(--text-muted); font-size: 0.72rem; }
.post-detail-icon-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.2rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-detail-icon-btn:hover { color: #ef4444; }
.post-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px;
  min-height: 0;
}
.post-detail-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.post-detail-actions .action-icon-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.55rem;
  padding: 4px;
  cursor: pointer;
  display: flex;
  transition: var(--transition);
}
.post-detail-actions .action-icon-btn:hover { color: var(--text-muted); }
.post-detail-actions .action-icon-btn.is-liked { color: var(--like-active); }
.post-detail-likes {
  padding: 2px 16px 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
  flex-shrink: 0;
}
.post-detail-time {
  padding: 3px 16px 10px;
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.post-detail-composer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  margin-top: 0;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  #post-detail-modal { display: none !important; }
}