:root {
  --fb-blue: #4f46e5;
  --fb-blue-dark: #4338ca;
  --fb-green: #16a34a;
  --bg: #f4f4f6;
  --card-bg: #ffffff;
  --text: #18181b;
  --text-secondary: #71717a;
  --border: #e4e4e7;
  --hover: #f4f4f5;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --accent: #f59e0b;
  --accent-2: #ea580c;
}

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

body {
  font-family: 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

/* sticky navbar is 56px tall - keep anchored jumps clear of it */
html { scroll-padding-top: 72px; }

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }

.hidden { display: none !important; }
.muted { color: var(--text-secondary); font-size: 0.9rem; }
.text-center { text-align: center; }

/* ===== Topbar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.topbar-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-left { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.logo-icon {
  background: var(--fb-blue);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border-radius: 50px;
  padding: 0 12px;
  height: 40px;
  width: 240px;
  color: var(--text-secondary);
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  margin-left: 8px;
  font-size: 0.95rem;
  width: 100%;
  color: var(--text);
}

.search-results {
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.search-results.show { display: block; }

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.search-result:hover { background: var(--hover); }

.topbar-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  position: relative;
  width: 48px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: background 0.2s;
}
.nav-link:hover { background: var(--hover); }
.nav-link.active { color: var(--fb-blue); border-bottom: 3px solid var(--fb-blue); }

.badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #fa3e3e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* The far right of the bar carries the account avatar and nothing else: the
   name is gone, and a click opens the account menu. */
.nav-profile-wrap { position: relative; flex: none; }
.nav-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.nav-profile-btn:hover { background: var(--hover); }
.nav-profile-btn[aria-expanded="true"] { background: var(--hover); box-shadow: 0 0 0 2px var(--fb-blue); }
.nav-profile-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  min-width: 232px;
  padding: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.nav-profile-pop.hidden { display: none !important; }
.nav-profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}
.nav-profile-item i { width: 18px; text-align: center; color: var(--text-secondary); }
.nav-profile-item:hover { background: var(--hover); }
.nav-profile-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.nav-profile-danger, .nav-profile-danger i { color: #e0245e; }
.nav-profile-danger:hover { background: rgba(224, 36, 94, 0.1); }
/* Fund lives in this same dropdown: the row links to the wallet and the caret
   opens a sub-menu underneath it, still inside the dropdown. */
.nav-profile-sub { position: relative; }
.nav-profile-sub > .nav-profile-item { padding-right: 34px; }
.nav-sub-toggle {
  position: absolute;
  top: 7px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}
.nav-sub-toggle:hover { background: var(--hover); color: var(--text); }
.nav-sub-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-profile-submenu { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 16px; }
.nav-profile-submenu.hidden { display: none !important; }
.nav-profile-submenu .nav-profile-item { font-size: 0.92rem; }
/* the wallet sections the sub-menu jumps to */
#deposit, #withdraw, #methods, #activity { scroll-margin-top: 96px; }
/* The topbar Privacy item lands on the About block of Edit Profile. */
#privacy { scroll-margin-top: 96px; }

/* ===== Mobile menu button + sidebar drawer ===== */
.topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.sidebar-backdrop {
  position: fixed;
  inset: 56px 0 0 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 290;
}

/* ===== Avatars ===== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
  user-select: none;
}
.avatar-sm { width: 36px; height: 36px; font-size: 1rem; }
.avatar-xs { width: 32px; height: 32px; font-size: 0.85rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }
.avatar-xl { width: 100px; height: 100px; font-size: 2.4rem; border: 4px solid #fff; }

/* ===== Layout ===== */
.main-container { max-width: 1280px; margin: 0 auto; padding: 16px; }

.layout-3col {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 16px;
  align-items: start;
}

.layout-2col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.content-wide { max-width: 800px; margin: 0 auto; }

/* ===== Sidebar ===== */
.sidebar-left { position: sticky; top: 72px; }
.sidebar-right { position: sticky; top: 72px; }

.sidebar-menu { list-style: none; }

.sidebar-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
}
.sidebar-menu li a:hover { background: var(--hover); }
.sidebar-menu li a i { width: 24px; color: var(--fb-blue); font-size: 1.2rem; }

.sidebar-search {
  width: 100%;
  border: none;
  background: var(--card-bg);
  padding: 10px 14px;
  border-radius: 50px;
  font-size: 0.9rem;
  outline: none;
  margin-top: 6px;
}

.sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* The brand line that used to sit at the bottom of every left column
   ("Wotach - your social network") was removed on request. Nothing renders
   .sidebar-footer any more, so the rule goes with it. */

/* ===== Cards ===== */
.card {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  padding: 16px;
  margin-bottom: 16px;
}

/* ===== Compose ===== */
.compose-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.create-post-input {
  flex: 1;
  border: none;
  background: var(--bg);
  border-radius: 50px;
  padding: 12px 16px;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  color: var(--text);
}
.create-post-input::placeholder { color: var(--text-secondary); }

/* ===== Post editor ===== */
.post-editor { margin-top: 0; margin-bottom: 16px; }

.post-editor-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.privacy-select {
  display: block;
  margin-top: 4px;
  border: none;
  background: var(--bg);
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  outline: none;
}

.post-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-size: 1.1rem;
  font-family: inherit;
  min-height: 80px;
  padding: 4px 0;
}

.post-editor-actions { border-top: 1px solid var(--border); padding-top: 12px; text-align: right; }

/* ===== Buttons ===== */
.btn-share {
  background: var(--fb-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-share:hover { background: var(--fb-blue-dark); }

.btn-accept {
  background: var(--fb-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-accept:hover { background: var(--fb-blue-dark); }

.btn-reject {
  background: var(--hover);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-reject:hover { background: #e4e6eb; }

/* Cancel a sent friend request */
.btn-cancel-request {
  background: var(--hover);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.btn-cancel-request:hover { background: #e4e6eb; }
.btn-cancel-request i { margin-right: 5px; }

.btn-add-friend {
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 0.85rem;
}
.btn-add-friend:hover { background: #e4e6eb; }

.btn-add-friend-lg {
  background: var(--fb-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.95rem;
}
.btn-add-friend-lg:hover { background: var(--fb-blue-dark); }

.btn-friend-remove {
  background: var(--hover);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-friend-remove:hover { background: #e4e6eb; }

.btn-message-sm {
  display: inline-block;
  background: var(--bg);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
}
.btn-message-sm:hover { background: #e4e6eb; }

.btn-remove-sm {
  display: inline-block;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 4px 8px;
  margin-top: 2px;
}
.btn-remove-sm:hover { color: #fa3e3e; }

.suggestion-action {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 4px;
  color: var(--text-secondary);
}
.suggestion-action.added { color: var(--fb-green); }
.suggestion-action.pending { color: #f7b928; }
.suggestion-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.suggestion-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 4px;
}

/* ===== Gigs fixed bottom navigation ===== */
.gigs-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 2px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--bg-card, #ffffff);
  border-top: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}
/* On desktop the bottom nav must sit over the main content column only,
   not stretch across the whole viewport (which would put it under the
   left sidebar too). The gigs layout is a 260px sidebar + a centered
   1280px container, so the main column starts ~276px in on wide screens. */
@media (min-width: 1025px) {
  .gigs-bottom-nav {
    left: 50%;
    transform: translateX(calc(-50% + 130px));
    width: 1004px;
    max-width: calc(100vw - 276px);
    right: auto;
  }
}
.gigs-bottom-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-decoration: none;
  border-radius: 8px;
  min-width: 0;
}
.gigs-bottom-item i { font-size: 1.05rem; }
.gigs-bottom-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gigs-bottom-item:hover, .gigs-bottom-item:active { color: var(--brand, #4f46e5); background: var(--hover, #f3f4f6); }
body { padding-bottom: 80px; }

/* ===== Post card ===== */
.post-card { padding: 12px 16px 8px; }

.post-header { display: flex; align-items: center; gap: 12px; }

.post-author { font-weight: 600; font-size: 0.95rem; }
.post-author:hover { text-decoration: underline; }

.post-time { color: var(--text-secondary); font-size: 0.8rem; }
/* The timestamp doubles as the way into the post's own page. */
a.post-time { text-decoration: none; }
a.post-time:hover { color: var(--fb-blue); text-decoration: underline; }

.post-meta { flex: 1; }

.delete-post {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  padding: 8px;
  border-radius: 50%;
  transition: background 0.2s;
}
.delete-post:hover { background: var(--hover); color: #fa3e3e; }

.post-title { margin-top: 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.post-content { padding: 12px 0; font-size: 1.05rem; word-wrap: break-word; text-align: justify; }
/* Line breaks belong to the post's own text, so pre-wrap sits on the text
   wrappers and not on .post-content itself: the newlines the template puts
   between those wrappers would otherwise print as blank lines - which is
   exactly the gap that used to show under the title. */
.pc-preview, .pc-expanded, .pc-body { white-space: pre-wrap; }
/* A long post keeps its copy in a column so one chevron can sit on the right of
   the post, right under the three-dot menu: down while the post is trimmed,
   up while it is open. Short posts get no wrapper, so they lay out as always. */
.post-content.has-more { display: block; }
.pc-col { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.pc-toggle {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pc-toggle:hover { background: var(--hover); color: var(--fb-blue); border-color: var(--fb-blue); }
.pc-toggle[aria-expanded="true"] { color: var(--fb-blue); border-color: var(--fb-blue); }
.pc-toggle:focus-visible { outline: 2px solid var(--fb-blue); outline-offset: 2px; }

.post-stats {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.like-icon-mini { color: var(--fb-blue); }

/* Comment count button: clickable to reveal previous comments */
.comment-count {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
}
.comment-count:hover { color: var(--brand); text-decoration: underline; }
.comment-count.active { color: var(--brand); font-weight: 600; }
.comment-toggle.active { color: var(--brand); }
.comments-empty { padding: 6px 0; color: var(--text-secondary); font-size: 0.85rem; font-style: italic; }

.post-actions {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border);
  padding: 4px 0;
}

.like-btn, .comment-toggle {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: background 0.2s;
}
.like-btn:hover, .comment-toggle:hover { background: var(--hover); }
.like-btn.liked { color: var(--fb-blue); }

.like-btn i, .comment-toggle i { margin-right: 6px; }

/* ===== Comments ===== */
.comments-section { padding-top: 0; }
.comments-section .comments-list,
.comments-section .comment-form { margin-top: 8px; }

.comment-item { display: flex; gap: 8px; margin-bottom: 12px; }

.comment-body {
  background: var(--bg);
  border-radius: 18px;
  padding: 8px 12px;
  flex: 1;
}

.comment-author { font-weight: 600; font-size: 0.85rem; display: block; }
.comment-author:hover { text-decoration: underline; }

.comment-text { font-size: 0.95rem; display: block; }

.comment-time { font-size: 0.75rem; color: var(--text-secondary); }

.comment-form { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

.comment-form input {
  flex: 1;
  border: none;
  background: var(--bg);
  border-radius: 50px;
  padding: 8px 14px;
  outline: none;
  font-size: 0.9rem;
}

.post-btn {
  border: none;
  background: var(--fb-blue);
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
}

/* ===== Alerts ===== */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.95rem; }
.alert-success { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.alert-error { background: #ffecec; color: #c0392b; border: 1px solid #ffc9c9; }

/* ===== Suggestions & requests ===== */
.suggestion { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.suggestion-info { flex: 1; }
.suggestion-name { font-weight: 600; font-size: 0.9rem; }
.suggestion-name:hover { text-decoration: underline; }

.friend-request { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.friend-req-info { flex: 1; }
.friend-req-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ===== Empty state ===== */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.empty-state i { font-size: 3rem; color: #ccd0d5; margin-bottom: 12px; }
.empty-sub { font-size: 0.9rem; margin: 6px 0 14px; }

/* ===== Profile ===== */
.profile-page { max-width: 940px; margin: 0 auto; }

.profile-cover {
  height: 260px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 8px 8px 0 0;
  position: relative;
  text-align: center;
}
.profile-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 8px 0 0; }

.profile-cover-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  padding: 0 16px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  /* The cover stays put; only the picture moves - it now sits on the left with
     the name, handle and bio running alongside it instead of underneath. */
  display: flex;
  align-items: flex-end;
  gap: 16px;
  text-align: left;
}
.profile-cover-meta { min-width: 0; }

.profile-cover-name h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 4px; }
.profile-cover-name .muted { color: #e8e8e8; margin-top: 4px; }

@media (max-width: 640px) {
  .profile-cover-name { gap: 12px; padding: 0 12px; }
  .profile-cover-name h1 { font-size: 1.25rem; }
  .profile-cover-name .avatar-xl { width: 76px; height: 76px; font-size: 1.9rem; border-width: 3px; }
}

.profile-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Three-dot profile menu: Edit Profile, Copy Link, Activity Log, Share. */
.profile-menu-wrap { position: relative; }
.profile-menu-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
  cursor: pointer; font-size: 1rem;
}
.profile-menu-btn:hover { background: var(--hover); }
.profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 214px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 6px; display: flex; flex-direction: column;
}
.profile-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-1); font-size: 0.92rem; font-family: inherit;
  cursor: pointer; text-decoration: none;
}
.profile-menu-item i { width: 16px; text-align: center; color: var(--text-2); }
.profile-menu-item:hover { background: var(--hover); }
.profile-menu-item:hover i { color: var(--fb-blue); }

/* ---- Activity Log page ---- */
.activity-page { max-width: 920px; margin: 0 auto; padding: 16px; }
.activity-head { margin-bottom: 14px; }
.activity-head h1 { font-size: 1.4rem; margin: 10px 0 4px; }
.activity-head h1 i { color: var(--fb-blue); margin-right: 6px; }
.activity-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }

/* Left rail: one vertical tab per category. */
.activity-side { padding: 10px; position: sticky; top: 76px; }
.activity-tabs { display: flex; flex-direction: column; gap: 4px; }
.activity-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text-1); font: inherit; font-size: 0.92rem; cursor: pointer; text-align: left;
}
.activity-tab i { width: 16px; text-align: center; color: var(--text-2); }
.activity-tab:hover { background: var(--hover); }
.activity-tab.active { background: var(--fb-blue); color: #fff; }
.activity-tab.active i { color: #fff; }
.activity-tab-count {
  margin-left: auto; font-size: 0.76rem; background: var(--bg-2); color: var(--text-2);
  border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center;
}
.activity-tab.active .activity-tab-count { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* Right panel: the chosen category. */
.activity-main { padding: 8px 16px; min-height: 160px; }
.activity-panel { display: none; }
.activity-panel.active { display: block; }
.activity-empty { padding: 28px 4px; text-align: center; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.activity-item:first-child { border-top: 0; }
.activity-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--fb-blue); font-size: 0.9rem;
}
.activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-main-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.activity-main-row > .activity-text { flex: 1; min-width: 0; }
.activity-menu-wrap { position: relative; flex: none; }
.activity-menu-btn {
  border: 0; background: none; color: var(--text-secondary); cursor: pointer;
  padding: 3px 7px; border-radius: 6px; line-height: 1;
}
.activity-menu-btn:hover, .activity-menu-btn[aria-expanded="true"] { background: var(--hover); color: var(--fb-blue); }
.activity-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
  min-width: 150px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 5px; display: flex; flex-direction: column;
}
.activity-menu.hidden { display: none; }
.activity-menu-item {
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font-size: 0.87rem; color: var(--text);
  display: flex; align-items: center; gap: 9px; font-family: inherit;
}
.activity-menu-item:hover { background: var(--hover); }
.activity-menu-item i { width: 14px; text-align: center; color: var(--text-secondary); }
.activity-menu-item.danger { color: #dc2626; }
.activity-menu-item.danger i { color: #dc2626; }
.activity-menu-item.danger:hover { background: #fef2f2; }
.activity-text { color: var(--text-1); text-decoration: none; overflow-wrap: anywhere; }
a.activity-text:hover { color: var(--fb-blue); text-decoration: underline; }
.activity-time { font-size: 0.8rem; }
.activity-like .activity-icon { color: #1877f2; }
.activity-reaction .activity-icon { color: #e0245e; }
.activity-comment .activity-icon { color: #1877f2; }
.activity-share .activity-icon { color: #25d366; }
.activity-group .activity-icon { color: #25d366; }
.activity-room .activity-icon { color: #8a3ab9; }
.activity-friend .activity-icon { color: #f77737; }

@media (max-width: 700px) {
  .activity-layout { grid-template-columns: 1fr; }
  .activity-side { position: static; }
  .activity-tabs { flex-direction: row; overflow-x: auto; }
  .activity-tab { flex: 0 0 auto; white-space: nowrap; }
  .activity-tab-count { margin-left: 6px; }
}

.profile-info-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin: 16px 0; }

/* Left column holds the About block plus the plain Details block. */
.profile-info-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- About block (profile left column) ---- */
.about-card { padding: 16px; }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.about-card h3 { margin: 0; font-size: 1.1rem; }
.about-card h3 i { color: var(--fb-blue); margin-right: 6px; }
.about-edit-btn {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
  border-radius: 8px; padding: 5px 10px; font-size: 0.8rem; cursor: pointer;
}
.about-edit-btn:hover { background: var(--hover); color: var(--fb-blue); }

.about-list { list-style: none; margin: 0; padding: 0; }
.about-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.about-row:first-child { border-top: 0; }
.about-row > i { width: 22px; flex: 0 0 22px; color: var(--fb-blue); text-align: center; margin-top: 2px; }
.about-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.about-row-label { font-size: 0.92rem; }
.about-row-value { font-size: 0.92rem; color: var(--text-2); overflow-wrap: anywhere; }
.about-privacy { flex: 0 0 auto; color: var(--text-2); font-size: 0.85rem; }
.about-hidden-note, .about-add-note { margin: 10px 0 0; font-size: 0.82rem; }
.about-add-note i { margin-right: 4px; }
.about-link-btn { border: 0; background: none; padding: 0; color: var(--fb-blue); font-weight: 600; cursor: pointer; font-size: inherit; text-decoration: underline; }

/* ---- About editor inside the Edit Profile modal ---- */
.about-edit-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.about-edit-row { display: flex; align-items: flex-start; gap: 10px; }
.about-edit-main { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.about-edit-label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.about-edit-label i { width: 18px; color: var(--fb-blue); }
.about-privacy-select { flex: 0 0 118px; max-width: 118px; }
.about-readonly { background: var(--bg-2); color: var(--text-2); }
.about-readonly-note { font-size: 0.75rem; }
.about-privacy-fixed { flex: 0 0 auto; padding-top: 22px; }

.about-line-form {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.about-line-add { border-bottom: 0; }
.about-line-actions { flex: 0 0 auto; padding-top: 18px; }
.about-line-remove { margin: -6px 0 4px; }

.profile-info-card h3, .profile-friends-card h3 { font-size: 1.1rem; margin-bottom: 12px; }
.profile-info-card p { padding: 6px 0; font-size: 0.95rem; }
.profile-info-card p i { width: 22px; color: var(--fb-blue); }

.friend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.friend-tile { text-align: center; font-size: 0.85rem; font-weight: 600; padding: 8px; border-radius: 8px; }
.friend-tile:hover { background: var(--hover); }
.friend-tile .avatar { margin: 0 auto 6px; display: flex; }

.profile-posts h3 { margin-bottom: 12px; font-size: 1.2rem; }

/* ===== Friends page ===== */
.friends-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.friend-card { text-align: center; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.friend-card-name { font-weight: 600; margin: 8px 0 10px; }

.request-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.request-info { flex: 1; }
.request-actions { display: flex; gap: 8px; }

/* ===== Messages ===== */
.messages-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--card-bg); border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); height: 620px; overflow: hidden; }

.conversations-panel { border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; }

.panel-title { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 12px 0 8px; }

.conversation { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background 0.2s; }
.conversation:hover { background: var(--hover); }
.conversation.active { background: #e7f3ff; }

.conversation-info { flex: 1; min-width: 0; }
.conv-name { font-weight: 600; font-size: 0.9rem; }
.conv-preview { color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.unread-badge { background: var(--fb-blue); color: #fff; border-radius: 50%; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }

.chat-panel { display: flex; flex-direction: column; height: 620px; }

.chat-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.chat-user { display: flex; align-items: center; gap: 10px; font-weight: 600; }
/* Back arrow to the conversation list - phones only (see the 768px block). */
.chat-back { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; margin-right: 10px; border-radius: 50%; background: var(--hover); color: var(--text-secondary); text-decoration: none; }
.chat-back:hover { background: #e2e5ea; }

.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #f7f8fa; }

.chat-bubble { max-width: 60%; display: flex; flex-direction: column; }
.chat-bubble.mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble.theirs { align-self: flex-start; align-items: flex-start; }

.bubble-content { padding: 10px 14px; border-radius: 18px; font-size: 0.95rem; word-wrap: break-word; }
.chat-bubble.mine .bubble-content { background: var(--fb-blue); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.theirs .bubble-content { background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

.bubble-time { font-size: 0.7rem; color: var(--text-secondary); margin-top: 3px; }

.chat-empty, .chat-placeholder { color: var(--text-secondary); text-align: center; }

.chat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.chat-placeholder i { font-size: 3rem; color: #ccd0d5; margin-bottom: 12px; }

.chat-input { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--border); }
.chat-input input { flex: 1; border: none; background: var(--bg); border-radius: 50px; padding: 10px 16px; outline: none; font-size: 0.95rem; }
.chat-input button { background: var(--fb-blue); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1rem; }
.chat-input button:hover { background: var(--fb-blue-dark); }

/* ===== Notifications ===== */
.notification-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.notification-body { flex: 1; }
.notification-actions { display: flex; gap: 8px; }

/* ===== Notification bell popup ===== */
.notif-wrap { position: relative; }
.notif-btn { border: none; background: none; font-family: inherit; cursor: pointer; }
.notif-btn.badge { pointer-events: none; }
.notif-pop {
  position: absolute; top: calc(100% + 10px); right: 0; width: 380px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18); overflow: hidden; z-index: 320;
}
.notif-pop.hidden, .notif-btn .hidden { display: none !important; }
.notif-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.notif-pop-head strong { font-size: 1rem; font-weight: 700; }
.notif-read-all {
  border: none; background: none; color: var(--fb-blue); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; font-family: inherit; padding: 4px 2px;
}
.notif-read-all:hover { text-decoration: underline; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-loading, .notif-empty { padding: 26px 16px; text-align: center; color: var(--text-secondary); font-size: 0.88rem; }
.notif-empty i { font-size: 1.6rem; display: block; margin-bottom: 8px; opacity: 0.6; }
.notif-empty p { margin: 0; }
.notif-row {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer; position: relative;
}
.notif-row:hover { background: var(--hover); }
.notif-row.unread { background: rgba(99, 102, 241, 0.07); }
.notif-row.unread::before {
  content: ''; position: absolute; left: 5px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fb-blue);
}
.notif-actor { flex: 0 0 auto; }
.notif-actor .avatar { width: 40px; height: 40px; }
.notif-body { flex: 1; min-width: 0; }
.notif-msg { font-size: 0.88rem; line-height: 1.4; word-break: break-word; }
.notif-msg i { color: var(--fb-blue); margin-right: 2px; }
.notif-msg a { font-weight: 600; color: var(--text); }
.notif-msg a:hover { text-decoration: underline; }
.notif-preview {
  display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-tag {
  display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.14); color: #4f46e5; font-size: 0.7rem; font-weight: 700;
}
.notif-time { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--text-secondary); }
.notif-go { flex: 0 0 auto; color: var(--text-secondary); font-size: 0.8rem; padding-top: 6px; }
.notif-go:hover { color: var(--fb-blue); }
.notif-pop-foot {
  display: block; text-align: center; padding: 11px; font-size: 0.85rem; font-weight: 600;
  color: var(--fb-blue); border-top: 1px solid var(--border);
}
.notif-pop-foot:hover { background: var(--hover); }
@media (max-width: 640px) {
  .notif-pop { position: fixed; top: 62px; left: 8px; right: 8px; width: auto; max-width: none; }
  .notif-list { max-height: 55vh; }
}

/* ===== Modal ===== */
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 200; }

.modal-content { background: #fff; border-radius: 8px; padding: 24px; width: 90%; max-width: 480px; position: relative; }
.modal-content h3 { margin-bottom: 16px; }
.modal-close { position: absolute; top: 12px; right: 16px; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); }

/* ===== Auth pages ===== */
.auth-body { background: var(--bg); min-height: 100vh; }

.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 8%; max-width: 1200px; margin: 0 auto; min-height: 100vh; }

.auth-logo { color: var(--fb-blue); font-size: 3.2rem; font-weight: 800; margin-bottom: 12px; }

.auth-tagline { font-size: 1.2rem; color: var(--text); margin-bottom: 24px; }

.auth-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 0.95rem; }
.feature i { color: var(--fb-blue); font-size: 1.2rem; }

.auth-right { max-width: 460px; }

.auth-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); padding: 24px; margin-bottom: 16px; }
.auth-card h2 { font-size: 0.95rem; color: var(--text-secondary); text-align: center; margin-bottom: 18px; font-weight: 400; }

.field {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 1rem;
  outline: none;
  background: #fff;
  transition: border 0.2s;
}
.field:focus { border-color: var(--fb-blue); box-shadow: 0 0 0 1px var(--fb-blue); }

.row { display: flex; gap: 10px; }
.row .field { flex: 1; }

.btn-login { display: block; width: 100%; background: var(--fb-blue); color: #fff; border: none; border-radius: 6px; padding: 12px; font-size: 1.1rem; font-weight: 700; margin-top: 4px; text-align: center; }
.btn-login:hover { background: var(--fb-blue-dark); }

.btn-register { display: block; width: 100%; background: var(--fb-green); color: #fff; border: none; border-radius: 6px; padding: 12px; font-size: 1.1rem; font-weight: 700; }
.btn-register:hover { background: #36a420; }

.btn-create-account { display: block; width: 100%; background: var(--fb-green); color: #fff; border: none; border-radius: 6px; padding: 14px; font-size: 1.05rem; font-weight: 700; }
.btn-create-account:hover { background: #36a420; }

.forgot { text-align: center; margin-top: 14px; }
.forgot a { color: var(--fb-blue); font-size: 0.9rem; }
.forgot a:hover { text-decoration: underline; }

.auth-switch { text-align: center; margin-top: 14px; }
.auth-switch a { color: var(--fb-blue); font-size: 0.9rem; }
.auth-switch a:hover { text-decoration: underline; }

.auth-disclaimer { text-align: center; font-size: 0.8rem; color: var(--text-secondary); margin-top: 12px; }

.register-card h2 { color: var(--text); }

/* ===== Footer ===== */
.footer { text-align: center; padding: 20px; color: var(--text-secondary); font-size: 0.85rem; margin-top: 30px; border-top: 1px solid var(--border); }

/* ===== Content banner ===== */
.content-banner {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border-radius: 8px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.content-banner h1 { font-size: 1.6rem; }
.content-banner p { opacity: 0.9; }
.banner-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.banner-action { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Gig chat page: you are already in a messenger, so the floating messenger
   button only covered message bubbles - drop it here. */
body.gig-chat-page .messenger-dock { display: none; }
@media (max-width: 760px) {
  /* The big banner pushed the chat below the first screen on phones:
     hide it when a chat is open, shrink it on the conversation list. */
  body.gig-chat-open .gig-banner { display: none; }
  body.gig-chat-page .gig-banner { padding: 14px 16px; gap: 12px; margin-bottom: 14px; }
  body.gig-chat-page .gig-banner .banner-icon { width: 44px; height: 44px; font-size: 1.3rem; }
  body.gig-chat-page .gig-banner p { display: none; }
  body.gig-chat-page .gig-banner h1 { font-size: 1.15rem; }
}

.section-title { margin: 4px 0 16px; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.section-title i { color: var(--fb-blue); }

/* ===== Grid cards (groups/pages) ===== */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.grid-card {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.grid-card-cover {
  height: 100px;
  background: var(--cover-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
  font-size: 2.6rem;
}
.grid-card-body { padding: 16px; }
.grid-card-body h3 { margin-bottom: 4px; font-size: 1.05rem; }
.grid-card-body h3 a:hover { text-decoration: underline; }
.grid-card-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 6px 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-join {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fb-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-join:hover { background: var(--fb-blue-dark); }

.btn-group-joined {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fb-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}
.btn-group-joined:hover { background: #36a420; }

.btn-leave {
  background: var(--hover);
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 600;
}
.btn-leave:hover { background: #e4e6eb; }

/* ===== Group/Page detail ===== */
.group-detail-page, .item-detail-page { max-width: 940px; margin: 0 auto; }

.group-banner {
  --group-color: #4f46e5;
  background: linear-gradient(135deg, var(--group-color), #1da1f2);
  color: #fff;
  border-radius: 8px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.group-banner h1 { font-size: 1.5rem; margin-bottom: 4px; }
.group-banner .muted { color: rgba(255,255,255,0.85); }
.group-banner-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
}

.group-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.group-actions form { display: inline; }

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff4e5;
  color: #d97706;
  border-radius: 50px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.member-name { font-size: 0.92rem; }

.member-list { max-height: 300px; overflow-y: auto; }

.form-card { max-width: 560px; margin: 0 auto; }
.form-card label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: 0.95rem; }

.privacy-options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.privacy-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
}
.privacy-option:hover { background: var(--hover); }
.privacy-option:has(input:checked) { border-color: var(--fb-blue); background: #e7f3ff; }
.privacy-option input { accent-color: var(--fb-blue); }
.privacy-option span { display: flex; flex-direction: column; }
.privacy-option span i { margin-right: 8px; color: var(--fb-blue); }
.privacy-option small { color: var(--text-secondary); }

/* ===== Marketplace ===== */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.category-tab {
  background: var(--card-bg);
  color: var(--text);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: background 0.2s, color 0.2s;
}
.category-tab:hover { background: var(--hover); }
.category-tab.active { background: var(--fb-blue); color: #fff; }

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
.marketplace-card {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.marketplace-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.marketplace-image { position: relative; height: 180px; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.marketplace-image img { width: 100%; height: 100%; object-fit: cover; }
.mp-placeholder { color: #ccd0d5; font-size: 2.2rem; }
.mp-placeholder.big { font-size: 4rem; padding: 80px; }
.marketplace-info { padding: 12px 14px; }
.mp-price { color: #b90000; font-weight: 700; font-size: 1.15rem; }
.mp-title { font-weight: 500; margin: 4px 0; }
.mp-location, .mp-seller { color: var(--text-secondary); font-size: 0.85rem; }
.sold-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ===== Item detail ===== */
.item-main { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 20px; }
.item-gallery { position: relative; min-height: 280px; background: var(--bg); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.item-gallery img { width: 100%; height: 100%; object-fit: cover; }
.sold-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  gap: 10px;
}
.item-title { font-size: 1.4rem; }
.item-price { color: #b90000; font-weight: 800; font-size: 1.8rem; margin: 6px 0 12px; }
.item-meta-row { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 12px; }
.item-description { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.item-description h3 { margin-bottom: 6px; }
.item-status-text { color: var(--fb-green); font-weight: 600; margin: 10px 0; }
.item-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.btn-lg { padding: 12px 22px; font-size: 1rem; }
.btn-message-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 6px;
  padding: 12px 22px;
  font-weight: 600;
}
.btn-message-lg:hover { background: #e4e6eb; }
.disclaimer { font-size: 0.8rem; margin-top: 8px; }

.seller-card { padding: 16px; }
.seller-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }

/* ===== Monetization ===== */

/* Sticky left sidebar with every monetization shortcut, content on the right. */
.mono-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.mono-main { min-width: 0; }
.mono-flash { max-width: 1180px; margin: 0 auto 16px; }

.mono-side {
  position: sticky;
  top: 72px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mono-side-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-bottom: 1px solid var(--border);
}
.mono-side-badge {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: var(--brand-grad); color: #fff;
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}
.mono-side-titles { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mono-side-titles strong { font-size: 0.98rem; }
.mono-side-titles span { font-size: 0.76rem; }

.mono-side-balance {
  padding: 14px;
  background: linear-gradient(160deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.03));
  border-bottom: 1px solid var(--border);
}
.mono-side-label {
  display: block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary);
}
.mono-side-amount { display: block; font-size: 1.6rem; font-weight: 800; color: #b90000; margin: 4px 0 2px; }
.mono-side-note { display: block; font-size: 0.74rem; }
.mono-side-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 10px; padding: 8px 12px; border-radius: 999px;
  background: var(--brand-grad); color: #fff;
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.25);
}
.mono-side-cta:hover { filter: brightness(1.07); }

.mono-side-nav { padding: 8px; max-height: calc(100vh - 300px); overflow-y: auto; }
.mono-side-group {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-secondary);
  padding: 12px 10px 5px;
}
.mono-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  color: var(--text); text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  transition: background 0.13s ease, color 0.13s ease;
}
.mono-side-item i { width: 18px; text-align: center; color: var(--text-secondary); }
.mono-side-item:hover { background: var(--hover); }
.mono-side-item.is-active { background: rgba(79, 70, 229, 0.1); color: var(--brand); }
.mono-side-item.is-active i { color: var(--brand); }
.mono-side-tag {
  margin-left: auto; font-size: 0.66rem; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--hover); color: var(--text-secondary);
}
.mono-side-tag.on { background: rgba(43, 168, 76, 0.14); color: var(--fb-green); }

.mono-stream { padding: 2px 10px 8px 38px; }
.mono-stream-top {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 5px;
}
.mono-stream-top b { color: var(--text); font-weight: 700; }
.mono-side-bar { height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.mono-side-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--brand-grad); transition: width 0.4s ease;
}
.mono-stream-sub { font-size: 0.72rem; color: var(--text-secondary); }

#overview, #ways-to-earn, #stream-page, #stream-profile, #stream-gigs, #payout,
#tab-dashboard, #tab-adbreaks, #tab-stars { scroll-margin-top: 96px; }

.monetization-overview { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 16px; }
.total-card { text-align: center; padding: 28px 20px; }
.total-label { color: var(--text-secondary); font-weight: 600; }
.total-label i { color: var(--fb-green); margin-right: 6px; }
.total-amount { font-size: 2.4rem; font-weight: 800; color: #b90000; margin: 8px 0; }
.total-sub { color: var(--text-secondary); font-size: 0.85rem; }

.income-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stat-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.stat-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.stat-icon.green { background: var(--fb-green); }
.stat-icon.blue { background: var(--fb-blue); }
.stat-icon.orange { background: #f77737; }
.stat-icon.red { background: #fa3e3e; }
.stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-label { color: var(--text-secondary); font-size: 0.9rem; }
.stat-change { font-size: 0.8rem; margin-top: 4px; }
.stat-change.up { color: var(--fb-green); }
.stat-change.down { color: #fa3e3e; }

.monetization-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.monetization-tabs .tab {
  background: var(--card-bg);
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: background 0.2s, color 0.2s;
}
.monetization-tabs .tab:hover { background: var(--hover); }
.monetization-tabs .tab.active { background: var(--fb-blue); color: #fff; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.row-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.row-card { text-align: center; padding: 14px; background: var(--bg); border-radius: 8px; }
.row-card-label { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 6px; }
.row-card-value { font-size: 1.4rem; font-weight: 700; }

.income-table { width: 100%; border-collapse: collapse; }
.income-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.income-table tr:last-child td { border-bottom: none; }
.table-right { text-align: right; font-weight: 600; }
.income-table .blue { color: var(--fb-blue); }
.income-table .orange { color: #f77737; }
.table-total td { font-weight: 800; font-size: 1.1rem; }

.notice {
  background: #fff4e5;
  border: 1px solid #fcd9a8;
  border-radius: 8px;
  padding: 12px 14px;
  color: #b45309;
  font-size: 0.9rem;
  margin-top: 14px;
}

/* ---- Ways to earn: the three monetization streams ---- */
.earn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 26px 0 12px; }
.earn-head h2 { margin: 0; font-size: 1.2rem; }
.earn-head h2 i { color: var(--fb-green); margin-right: 6px; }
.earn-head p { margin: 0; font-size: 0.9rem; }

.earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.earn-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.earn-card.is-locked { background: #fafafa; }
.earn-card.is-live { border-color: #b9e4c6; box-shadow: 0 1px 3px rgba(22, 163, 74, 0.12); }

.earn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.earn-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.05rem; flex: 0 0 auto; }
.earn-icon.green { background: var(--fb-green); }
.earn-icon.blue { background: var(--fb-blue); }
.earn-icon.orange { background: #f77737; }

.earn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 50px;
  white-space: nowrap;
}
.earn-chip.locked { background: #fef3c7; color: #b45309; }
.earn-chip.live { background: #dcfce7; color: #15803d; }

.earn-card h3 { margin: 2px 0 0; font-size: 1.05rem; }
.earn-desc { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--text-secondary); min-height: 4.2em; }
.earn-desc b { color: var(--text); }

.earn-figure { margin-top: 4px; font-size: 1.7rem; font-weight: 800; color: #b90000; }
.earn-card.is-locked .earn-figure { color: var(--text-secondary); }
.earn-meta { font-size: 0.82rem; color: var(--text-secondary); }
.earn-hint { font-size: 0.78rem; color: var(--text-secondary); }

.earn-bar { height: 8px; background: var(--border); border-radius: 50px; overflow: hidden; }
.earn-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--fb-blue), var(--brand-2)); border-radius: 50px; }

.earn-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.78rem; color: var(--text-secondary); }
.earn-stats b { color: var(--text); }

.earn-cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--fb-blue);
  background: var(--hover);
  border-radius: 8px;
  padding: 8px 12px;
}
.earn-cta:hover { background: #e8eaff; }

.earn-inline { font-size: 0.78rem; font-weight: 400; }

.earn-targets { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.earn-target { display: flex; flex-direction: column; gap: 5px; }
.earn-target-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.earn-target-head span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.earn-target-head span i { width: 14px; text-align: center; color: var(--text-secondary); }
.earn-target-head b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.earn-target .earn-bar { height: 6px; }
.earn-target.is-met .earn-target-head span i,
.earn-target.is-met .earn-target-head b { color: var(--fb-green); }
.earn-target.is-met .earn-bar span { background: var(--fb-green); }

.earn-done { display: inline-flex; align-items: center; gap: 6px; color: var(--fb-green); }

@media (max-width: 760px) {
  .earn-desc { min-height: 0; }
}

.post-context { display: block; color: var(--text-secondary); font-size: 0.8rem; margin-top: 2px; }
.post-context i { color: var(--fb-blue); }

/* ===== Admin login ===== */
.admin-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
}
.admin-login-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  padding: 36px 32px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}
.admin-login-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0245e, #ff5f6d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
.admin-login-title { font-size: 1.3rem; margin-bottom: 4px; }
.admin-login-card form { margin-top: 18px; }
.admin-login-card .btn-login { margin-top: 4px; }
.back-to-site {
  display: inline-block;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.back-to-site:hover { color: var(--fb-blue); }

/* ===== Admin layout ===== */
.admin-body { background: #f0f2f5; }
.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.admin-sidebar {
  background: #1a1a2e;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}
.admin-brand .logo-icon { width: 38px; height: 38px; font-size: 1.2rem; }
.admin-brand-sub { display: block; font-size: 0.75rem; opacity: 0.7; }

.admin-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.admin-menu::-webkit-scrollbar {
  width: 6px;
}
.admin-menu::-webkit-scrollbar-track {
  background: transparent;
}
.admin-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
}
.admin-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}
.admin-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.admin-menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-menu a.active { background: #e0245e; color: #fff; border-right: 3px solid #ff5f6d; }
.admin-menu a i { width: 22px; }

.admin-sidebar-bottom {
  margin-top: 0;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 12px;
  background: #1a1a2e;
}

.admin-main { display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
  background: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-page-title { font-size: 1.15rem; }
.admin-topbar-right { display: flex; align-items: center; gap: 10px; font-weight: 600; }

.admin-content { padding: 24px; }

/* ===== Admin stats ===== */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.admin-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.admin-stat-icon.blue { background: #4f46e5; }
.admin-stat-icon.green { background: #42b72a; }
.admin-stat-icon.orange { background: #f77737; }
.admin-stat-icon.red { background: #e0245e; }
.admin-stat-icon.purple { background: #8a3ab9; }
.admin-stat-icon.cyan { background: #00bcd4; }
.admin-stat-value { font-size: 1.7rem; font-weight: 800; }
.admin-stat-label { color: var(--text-secondary); font-size: 0.9rem; }
.admin-stat-sub { color: var(--text-secondary); font-size: 0.78rem; margin-top: 4px; }

/* ===== Admin panels & tables ===== */
.admin-panel-card { padding: 20px 18px; }
.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-panel-header h2 { font-size: 1.1rem; }

.btn-admin-sm {
  background: var(--fb-blue);
  color: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn-admin-sm:hover { background: var(--fb-blue-dark); }

.table-responsive { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg);
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: middle; }
.admin-table tr:hover td { background: #fafafa; }
.admin-link { color: var(--fb-blue); font-weight: 600; }
.admin-link:hover { text-decoration: underline; }
.admin-report-type { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 3px; }
.admin-report-shot { max-width: 140px; max-height: 100px; border: 1px solid var(--border); border-radius: 6px; margin-top: 6px; display: block; }
.admin-icon-inline { color: var(--fb-blue); margin-right: 6px; }
.cell-clamp {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-clamp-wide {
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-price { font-weight: 700; color: #b90000; }

.admin-user-cell { display: flex; align-items: center; gap: 10px; }

.admin-actions { display: flex; gap: 6px; align-items: center; }
.admin-btn {
  background: var(--hover);
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text);
}
.admin-btn:hover { background: #e4e6eb; }
.admin-btn.danger { background: #ffecec; color: #c0392b; }
.admin-btn.danger:hover { background: #ffd9d9; }
.admin-btn.orange { background: #fff4e5; color: #d97706; }
.admin-btn.primary { background: var(--brand-grad); color: #fff; }
.admin-btn.primary:hover { filter: brightness(1.07); }

/* verification settings */
.admin-key-state { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; margin: 6px 0 0; }
.admin-key-state i { color: var(--fb-green); }
.admin-key-state.is-off i { color: #d97706; }
.admin-credit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; margin: 6px 0 0; }
.admin-credit i { color: #d97706; }
.admin-credit.is-off i { color: #dc2626; }
.admin-credit span { font-weight: 500; }
.admin-settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin-top: 14px; }
.admin-field { display: flex; flex-direction: column; gap: 6px; }
.admin-field > span { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); }
.admin-field input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--bg); color: var(--text);
}
.admin-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.admin-field small { color: var(--text-secondary); font-size: 0.78rem; }
.admin-settings-actions { display: flex; gap: 10px; }

/* Mail server settings & account forms */
.admin-form { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.admin-form .admin-field textarea,
.admin-form .admin-field select,
.admin-form .admin-field input[type="number"],
.admin-form .admin-field input[type="password"] {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--bg); color: var(--text); width: 100%;
}
.admin-form .admin-field textarea { resize: vertical; }
.admin-form .admin-field select:focus,
.admin-form .admin-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }
.admin-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

.badge-admin {
  display: inline-block;
  background: #ffecec;
  color: #e0245e;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge-user {
  display: inline-block;
  background: var(--bg);
  color: var(--text-secondary);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}
.badge-sold {
  display: inline-block;
  background: #ffecec;
  color: #c0392b;
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge-available {
  display: inline-block;
  background: #e7f3ff;
  color: #4f46e5;
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: sticky;
    top: 0;
    height: auto;
    max-height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 12px 0 10px;
    overflow: hidden;
  }
  .admin-brand { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 10px; padding: 0 14px 12px; }
  .admin-menu {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
    flex: 0 0 auto;
  }
  .admin-menu::-webkit-scrollbar { height: 6px; }
  .admin-menu::-webkit-scrollbar-track { background: transparent; }
  .admin-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
  .admin-menu a { padding: 8px 12px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto; font-size: 0.9rem; }
  .admin-menu a.active { border-right: none; }
  .admin-sidebar-bottom {
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 10px 0;
  }
  .admin-sidebar-bottom .admin-menu { display: none; }
  .admin-sidebar-bottom a { padding: 8px 12px; border-radius: 6px; background: rgba(255,255,255,0.06); }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-content { padding: 16px; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .layout-3col { grid-template-columns: 1.7fr 1fr; }
  .sidebar-left { display: none; }
  .monetization-overview { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .search-box { width: 180px; }
}

@media (max-width: 900px) {
  .search-box { width: 40px; padding: 0 10px; }
  .search-box input { display: none; }
  .topbar-nav .nav-link { width: 44px; }
  .topbar-right .nav-link { width: 42px; }
}

@media (max-width: 768px) {
  .layout-3col, .layout-2col, .profile-info-row { grid-template-columns: 1fr; }
  /* a plain 1fr track keeps the item's min-content as its floor, and the auth
     card's ~375px min-content widened the column past the viewport; minmax(0,…)
     lets the single column shrink to the available width instead */
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-left, .auth-right { min-width: 0; }
  .auth-features { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .sidebar-right { display: none; }
  .search-box { width: 140px; }
  .auth-wrap { padding: 30px 6%; gap: 30px; }
  /* Phone drill-down: only one side of the inbox is visible at a time, so the
     fixed 620px stack (which collapsed the list to zero height) is gone. */
  .messages-layout { grid-template-columns: 1fr; height: auto; }
  .messages-layout.is-list .chat-panel { display: none; }
  .messages-layout.is-chat .conversations-panel { display: none; }
  .chat-panel { height: calc(100vh - 170px); min-height: 360px; }
  .chat-back { display: inline-flex; }
  .item-main { grid-template-columns: 1fr; }
  .income-stats-grid { grid-template-columns: 1fr; }
  .row-cards { grid-template-columns: 1fr; }
  .topbar-nav .nav-link { width: 44px; }
  .banner-action { margin-left: 0; margin-top: 10px; }
  .content-banner { flex-wrap: wrap; }
  /* On a phone the banner (icon + title + paragraph + stacked buttons) ate
     most of the first screen and pushed the actual content below the fold:
     shrink it - drop the description, keep title + one compact button row. */
  .content-banner { padding: 16px 18px; gap: 14px; margin-bottom: 16px; }
  .content-banner .banner-icon { width: 46px; height: 46px; font-size: 1.4rem; }
  .content-banner h1 { font-size: 1.2rem; margin: 0; }
  .content-banner p { display: none; }
  .content-banner .banner-action { margin-left: auto; margin-top: 0; gap: 8px; }
  .content-banner .banner-action > a,
  .content-banner .banner-action > button { padding: 7px 12px; font-size: .88rem; white-space: nowrap; }
  .grid-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 8px; }
  .search-box { display: none; }
  /* the wordmark would not fit next to the search field, but the search field
     is gone here - the emoji and the site name sit beside the hamburger */
  .topbar-left .logo { display: flex; }
  .topbar-left .logo .logo-word { font-size: 1.1rem; }
  .nav-link { width: 40px; font-size: 1.25rem; }
  /* the three extra centre links would crowd the small topbar - they are all
     in the hamburger drawer, so they only appear from 641px up */
  .topbar-nav-more { display: none; }
}

/* Very narrow phones (<=360px): tighten the bar so logo + 3 icons + avatar
   all fit without side-scrolling. */
@media (max-width: 400px) {
  .topbar-inner { padding: 0 6px; gap: 4px; }
  .topbar-left { gap: 4px; }
  .topbar-left .logo .logo-word { font-size: 0.95rem; }
  .nav-link { width: 34px; font-size: 1.1rem; }
  .logo-icon { width: 34px; height: 34px; font-size: 1.15rem; }
}

/* ===== Mobile navigation: hamburger + sidebar drawer ===== */
@media (max-width: 1024px) {
  .topbar-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar-left,
  body.sidebar-open .mobile-drawer {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 300;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    padding: 12px;
    box-shadow: 2px 0 18px rgba(17, 24, 39, 0.22);
  }
}
/* Fallback drawer: only shown by `body.sidebar-open` above, so it stays out
   of the way on every page that carries a real left sidebar. */
.mobile-drawer { display: none; }
.mobile-drawer-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  /* keep the centre nav from colliding with the left and right groups */
  .topbar-nav { position: static; transform: none; margin: 0 auto; }
  .topbar-right { margin-left: 0; }
}

@media (max-width: 420px) {
  /* the name stays, it just gives up some room to the icons around it */
  .topbar-left .logo { gap: 6px; }
  .topbar-left .logo .logo-icon { width: 32px; height: 32px; font-size: 1.15rem; }
  .topbar-left .logo .logo-word { font-size: 1rem; letter-spacing: -0.03em; }
}
@media (max-width: 480px) {
  /* The centre icons (friends, reels) all live in the hamburger drawer; with
     them gone the bar - search icon, chat, bell, avatar - fits 375px with no
     horizontal page scroll. */
  .topbar-nav { display: none; }
  .topbar-inner { gap: 6px; }
}
@media (max-width: 360px) {
  .search-box { display: none; }
  .topbar-inner { gap: 4px; }
  .topbar-right { gap: 0; }
  .topbar-right .nav-link { width: 36px; }
}
/* ===== Reels ===== */
.reels-wrap { max-width: 640px; margin: 0 auto; }
.reel-upload { margin: 14px 0; padding: 18px; }
.reel-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; text-align: center; }
.reel-dropzone:hover { background: var(--hover); }
.reel-dropzone i { font-size: 2rem; color: var(--fb-blue); }
.reels-feed { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.reel-card { background: #000; border-radius: 14px; overflow: hidden; color: #fff; position: relative; display: flex; flex-direction: column; align-items: stretch; }
.reel-main { position: relative; flex: 1 1 auto; min-width: 0; }
.reel-media { height: 520px; display: flex; align-items: center; justify-content: center; background: #0b0b0f; }
.reel-media img, .reel-media video { width: 100%; height: 100%; object-fit: contain; }
/* The caption block hugs the bottom edge of the frame: the name and the
   title sit low in the picture rather than halfway up it. */
.reel-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 16px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); }
.reel-author { display: flex; align-items: center; gap: 10px; color: #fff; }
.reel-caption { margin: 6px 0 0; font-size: 0.95rem; }
.reel-actions { display: flex; gap: 22px; margin-top: 10px; }
.reel-actions button { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.reel-actions .liked { color: #ff3040; }
/* The comment box sits under the video, not in a column beside it, and the
   input is pinned to the bottom of that panel however long the list is. */
.reel-comments { display: flex; flex-direction: column; gap: 8px; flex: none; width: 100%; min-width: 0; min-height: 190px; max-height: 300px; padding: 14px 12px; border-top: 1px solid rgba(255,255,255,0.10); }
/* On the feed the panel is a white sheet, so it reads as its own thing
   hanging under the black reel frame. */
.reel-card .reel-comments { background: #fff; color: #1f2328; border-top: 1px solid #e5e7eb; }
.reel-comment { font-size: 0.9rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.reel-comment-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.reel-comment-who { color: inherit; text-decoration: none; }
.reel-comment-who strong { font-size: 0.88rem; }
.reel-comment-text { color: #3b4048; font-size: 0.9rem; }
.reel-comment-tools { display: flex; gap: 4px; margin-top: 2px; }
.reel-comment-tools button { background: none; border: none; color: #9aa0a6; cursor: pointer; font-size: 0.72rem; padding: 2px 5px; border-radius: 6px; line-height: 1; }
.reel-comment-tools button:hover { background: #f1f3f5; color: #1f2328; }
.reel-comment-field { width: 100%; border: 1px solid #d5d9de; border-radius: 8px; padding: 6px 8px; font-size: 0.9rem; font-family: inherit; resize: vertical; color: #1f2328; background: #fff; outline: none; }
.reel-caption-field { width: 100%; border: 1px solid rgba(255,255,255,0.28); border-radius: 8px; padding: 6px 8px; font-size: 0.95rem; font-family: inherit; resize: vertical; color: #fff; background: rgba(0,0,0,0.40); outline: none; }
.reel-comment-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.reel-comment-empty { margin: 0; font-size: 0.85rem; }
.reel-comment-input { margin-top: auto; }
.reel-comment-input input { width: 100%; border: 1px solid #e5e7eb; background: #f8f9fa; color: #1f2328; border-radius: 20px; padding: 8px 14px; outline: none; }
.reel-comment-input input:focus { background: #fff; border-color: #cfd4da; }
.reel-comment-signin { width: 100%; justify-content: center; font-size: 0.85rem; }
/* The reel's overflow menu: a three-dot button on the right of the action row
   holding everything that is not a like or a comment. */
.reel-menu-wrap { position: relative; margin-left: auto; }
.reel-menu-toggle { background: none; border: none; color: rgba(255,255,255,0.85); font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1; }
.reel-menu-toggle:hover, .reel-menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,0.16); color: #fff; }
.reel-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 9; min-width: 196px; padding: 6px; border-radius: 14px; background: #14161c; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 36px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px; }
.reel-menu[hidden] { display: none; }
.reel-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; color: #e7e9ee; font-size: 0.88rem; text-align: left; cursor: pointer; border-radius: 9px; }
.reel-menu-item:hover { background: rgba(255,255,255,0.10); }
.reel-menu-item i { width: 16px; text-align: center; opacity: 0.85; }
.reel-menu-item.reel-delete { color: #ff6b6b; }
.reel-menu-item.reel-delete:hover { background: rgba(255,107,107,0.14); }
.reel-menu-item.is-on { color: #4ade80; }
.reel-menu-item.is-on:hover { background: rgba(74,222,128,0.14); }

/* ===== Photo posts ===== */
.post-media { margin: 10px 0 0; }
.post-media img { width: 100%; border-radius: 8px; max-height: 620px; object-fit: cover; }
/* several photos on one post sit in a tight grid instead of stacking */
.post-media-grid {
  display: grid; gap: 3px; border-radius: 8px; overflow: hidden;
  background: var(--border);
}
.post-media-grid.n-2 { grid-template-columns: 1fr 1fr; }
.post-media-grid.n-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media-grid.n-3 img:first-child { grid-column: 1 / -1; }
.post-media-grid.n-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.post-media-grid img {
  width: 100%; height: 100%; max-height: 210px; object-fit: cover; border-radius: 0;
}
.post-media-grid .pm-more { position: relative; }
.post-media-grid .pm-more::after {
  content: '+'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55); color: #fff;
  font-size: 1.5rem; font-weight: 700;
}
/* picker strip for a multi photo post */
#postImgPreview { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#postImgPreview img {
  width: 78px; height: 78px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.profile-photos-card { padding: 16px; margin-bottom: 16px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.photo-tile { aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.photo-tile:hover img { transform: scale(1.06); }
.post-editor-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.spacer { flex: 1; }
.btn-fixer { background: var(--hover); border: none; width: 38px; height: 38px; border-radius: 50%; font-size: 1.05rem; color: var(--text-secondary); transition: background 0.2s; }
.btn-fixer:hover { background: #e2e5ea; }

/* ===== Map ===== */
.map-holder { max-width: 1180px; margin: 0 auto; }
.map-card { position: relative; background: var(--card-bg); border-radius: 20px; box-shadow: 0 18px 50px rgba(24,24,27,0.16); overflow: hidden; margin-top: 16px; }
.map-canvas-wrap { position: relative; }
#mapCanvas { display: block; width: 100%; cursor: grab; }
#mapCanvas:active { cursor: grabbing; }

/* ===== Messenger dock ===== */
.messenger-dock { position: fixed; right: 20px; bottom: 20px; z-index: 9000; }
.m-bubble { width: 58px; height: 58px; border-radius: 50%; background: var(--fb-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.3); transition: transform 0.15s; }
.m-bubble:hover { transform: scale(1.06); }
.m-badge { position: absolute; top: -4px; right: -4px; background: #fa3e3e; color: #fff; border-radius: 50%; min-width: 22px; height: 22px; font-size: 0.72rem; font-weight: 700; align-items: center; justify-content: center; border: 2px solid #fff; }
.m-panel { position: absolute; right: 0; bottom: 68px; width: 340px; height: 480px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.28); display: flex; flex-direction: column; overflow: hidden; }
.m-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--border); font-weight: 700; }
.m-close { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--text-secondary); }
.m-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.m-search { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 20px; margin: 10px; padding: 8px 12px; }
.m-search input { border: none; outline: none; background: transparent; width: 100%; }
.m-conv-list { flex: 1; overflow-y: auto; list-style: none; padding: 0 6px 10px; }
.m-conv { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.m-conv:hover { background: var(--hover); }
.m-conv-info { flex: 1; min-width: 0; }
.m-conv-info strong { display: block; font-size: 0.92rem; }
.m-conv-preview { display: block; font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.m-conv-time { font-size: 0.72rem; color: var(--text-secondary); }
.m-unread { background: var(--fb-blue); color: #fff; border-radius: 10px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; padding: 0 5px; }
.m-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.m-chat-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.m-chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.m-back { border: none; background: none; font-size: 1rem; cursor: pointer; color: var(--text-secondary); }
.m-chat-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.m-chat-user { flex: 1; min-width: 0; }
.m-chat-user strong { display: block; font-size: 0.92rem; }
.m-chat-status { font-size: 0.75rem; color: var(--fb-green); }
.m-call-btn { border: none; background: var(--hover); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--fb-blue); font-size: 0.9rem; }
.m-call-btn:hover { background: #e2e5ea; }
.m-chat-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; background: #f8f9fb; }
.m-msg { display: flex; flex-direction: column; max-width: 78%; margin-bottom: 8px; }
.m-msg-mine { align-self: flex-end; align-items: flex-end; }
.m-msg-theirs { align-self: flex-start; align-items: flex-start; }
.m-bubble-txt { background: var(--fb-blue); color: #fff; padding: 8px 12px; border-radius: 16px 16px 4px 16px; font-size: 0.9rem; word-break: break-word; }
.m-msg-theirs .m-bubble-txt { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; }
.m-msg-time { font-size: 0.68rem; color: var(--text-secondary); margin-top: 2px; }
.m-chat-input { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); }
.m-chat-input input { flex: 1; border: none; outline: none; background: var(--bg); border-radius: 20px; padding: 8px 12px; }
.m-emoji-btn, .m-send-btn { border: none; background: none; font-size: 1.15rem; cursor: pointer; color: var(--text-secondary); }
.m-send-btn { color: var(--fb-blue); }

/* ===== Emoji picker popup ===== */
.emoji-pop { position: fixed; z-index: 9500; width: 320px; height: 320px; background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.emoji-tabs { display: flex; gap: 2px; padding: 6px 8px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.emoji-tab { border: none; background: none; font-size: 1.1rem; padding: 4px 7px; cursor: pointer; border-radius: 6px; }
.emoji-tab.active { background: var(--hover); }
.emoji-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); padding: 6px; gap: 2px; }
.emoji-cell { border: none; background: none; font-size: 1.25rem; padding: 4px; border-radius: 6px; cursor: pointer; }
.emoji-cell:hover { background: var(--hover); }

/* ===== Call overlay ===== */
.no-scroll { overflow: hidden; }
.call-overlay { position: fixed; inset: 0; z-index: 9800; background: rgba(10,12,18,0.92); display: flex; align-items: center; justify-content: center; }
.call-box { position: relative; width: 100%; max-width: 900px; height: 100%; max-height: 640px; }
.call-remote { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.call-remote video { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.call-remote-avatar { width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; font-weight: 700; }
.call-remote-info { position: absolute; bottom: 90px; left: 0; right: 0; text-align: center; color: #fff; }
.call-remote-info strong { display: block; font-size: 1.4rem; }
.call-local-box { position: absolute; top: 16px; right: 16px; width: 180px; height: 130px; background: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.call-local-box video { width: 100%; height: 100%; object-fit: cover; }
.call-local-avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; }
.call-controls { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; }
.call-ctrl { width: 54px; height: 54px; border: none; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; font-size: 1.2rem; cursor: pointer; }
.call-ctrl:hover { background: rgba(255,255,255,0.3); }
.call-ctrl.muted { background: #fa3e3e; }
.call-end { background: #fa3e3e; }
.call-end:hover { background: #e02e2e; }
.call-ringing { text-align: center; color: #fff; }
.ring-anim { font-size: 3.4rem; color: var(--fb-blue); animation: ringpulse 1s infinite; display: block; margin-bottom: 16px; }
@keyframes ringpulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } }
.call-ringing p { font-size: 1.25rem; }
.call-actions { display: flex; gap: 36px; justify-content: center; margin-top: 34px; }
.ring-btn { width: 64px; height: 64px; border: none; border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: #fff; }
.ring-no { background: #fa3e3e; }
.ring-yes { background: #37b24d; }
.chat-call-btn { border: none; background: var(--hover); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--fb-blue); margin-left: 6px; font-size: 0.9rem; }
.chat-call-btn:hover { background: #e2e5ea; }
.chat-header { display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 640px) {
  .m-panel { width: calc(100vw - 24px); right: -8px; height: 70vh; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .reel-media { height: 420px; }
  /* Not enough width to keep a side column, so the comment box drops below. */
  .reel-card { flex-direction: column; }
  .reel-card .reel-comments { flex: none; width: 100%; max-height: 230px; border-left: none; border-top: 1px solid rgba(255,255,255,0.10); }
}

/* ===== Maps — floating Google-style controls ===== */
.map-toolbar {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 1100;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 0; border: none; background: none; flex-wrap: nowrap; pointer-events: none;
}
.map-toolbar > * { pointer-events: auto; }

.map-search { position: relative; flex: 1 1 320px; min-width: 0; max-width: 440px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 10px 16px; box-shadow: 0 8px 26px rgba(24,24,27,0.2); }
.map-search > i { color: var(--brand); font-size: 0.95rem; }
.map-search input { border: none; outline: none; flex: 1; min-width: 0; font-size: 0.92rem; background: transparent; color: var(--text); }
.map-search input::placeholder { color: var(--text-secondary); }
.map-search-clear { background: var(--hover); border: none; cursor: pointer; color: var(--text-secondary); width: 26px; height: 26px; border-radius: 50%; font-size: 0.78rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.map-search-clear:hover { background: #e4e4e7; color: var(--text); }
.map-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 18px 48px rgba(24,24,27,0.28); z-index: 1200; overflow: hidden auto; max-height: 360px; border: 1px solid var(--border); }
.map-search-item { display: flex; align-items: center; gap: 10px; padding: 11px 15px; cursor: pointer; font-size: 0.88rem; }
.map-search-item + .map-search-item { border-top: 1px solid var(--border); }
.map-search-item:hover { background: var(--hover); }
.map-search-item i { color: var(--brand); flex: 0 0 auto; }
.map-search-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.map-search-name { font-weight: 600; }
.map-search-sub { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-search-empty { padding: 14px 16px; font-size: 0.86rem; color: var(--text-secondary); }

.map-toolbar-right { display: flex; align-items: flex-start; gap: 10px; }
.map-layers { display: flex; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; padding: 4px; box-shadow: 0 8px 26px rgba(24,24,27,0.2); }
.map-layer-btn { border: none; background: transparent; color: var(--text-secondary); padding: 8px 15px; border-radius: 999px; font-size: 0.84rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, color .15s; }
.map-layer-btn:hover { color: var(--brand); }
.map-layer-btn.active { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,0.38); }

.map-fab { width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--brand); font-size: 1.05rem; cursor: pointer; box-shadow: 0 8px 26px rgba(24,24,27,0.22); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .15s, background .15s, color .15s; }
.map-fab:hover { transform: translateY(-1px); background: var(--brand); color: #fff; }

.map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 1100; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 28px); background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #3f3f46; box-shadow: 0 8px 26px rgba(24,24,27,0.2); }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-legend-sep { width: 1px; height: 16px; background: var(--border); flex: 0 0 auto; }
.map-jump { border: none; background: var(--hover); color: #3f3f46; font-weight: 600; font-size: 0.82rem; border-radius: 999px; padding: 7px 10px; cursor: pointer; outline: none; max-width: 150px; }

.map-nonet { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,0.97); padding: 12px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(24,24,27,0.25); z-index: 1105; font-size: 0.9rem; }

/* ===== Leaflet look ===== */
.leaflet-map { width: 100%; height: calc(100vh - 210px); min-height: 560px; background: #dfe9f0; z-index: 1; border-radius: 20px; }
.st-user-marker { background: transparent; border: none; }
.st-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(24,24,27,0.4); position: relative; }
.st-dot.st-on::after { content:''; position: absolute; inset: -5px; border-radius: 50%; background: rgba(34,197,94,0.45); animation: stping 1.4s infinite; }
@keyframes stping { 0% { transform: scale(0.7); opacity: 1; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
.st-me-dot { width: 22px; height: 22px; border-radius: 50%; background: #4285f4; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(66,133,244,0.28), 0 2px 6px rgba(24,24,27,0.45); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; position: relative; }
.st-me-dot::after { content:''; position: absolute; inset: -8px; border-radius: 50%; background: rgba(66,133,244,0.3); animation: stping 1.6s infinite; }
.st-pin-marker { background: transparent; border: none; }

.map-pop a { color: var(--brand); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.map-pop-sub { color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px; max-width: 210px; }
.map-pop-actions { display: flex; gap: 14px; margin-top: 9px; }
.map-pop-clear { color: var(--text-secondary) !important; }

.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 12px 34px rgba(24,24,27,0.28); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.9rem; }
.leaflet-control-zoom { border: none !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 8px 26px rgba(24,24,27,0.24) !important; margin: 0 14px 14px 0 !important; }
.leaflet-control-zoom a { width: 42px; height: 42px; line-height: 42px; font-size: 1.15rem; color: #3f3f46; background: rgba(255,255,255,0.97); border: none !important; }
.leaflet-control-zoom a:hover { background: var(--hover); color: var(--brand); }
.leaflet-control-scale { margin: 0 14px 8px 0 !important; }
.leaflet-control-scale-line { border-color: rgba(63,63,70,0.45); color: #3f3f46; background: rgba(255,255,255,0.78); border-radius: 4px; padding: 1px 6px; }

@media (max-width: 720px) {
  .map-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .map-search { max-width: none; flex: 0 0 auto; }
  .map-toolbar-right { justify-content: space-between; flex-wrap: wrap; }
  .map-layers { flex: 1; justify-content: center; }
  .map-layer-btn { flex: 1; justify-content: center; padding: 8px; }
  .map-layer-btn span { display: none; }
  .map-layer-btn i { font-size: 1rem; }
  .map-legend { font-size: 0.76rem; gap: 8px; left: 10px; bottom: 10px; padding: 7px 11px; }
  .map-jump { max-width: 110px; flex: 0 1 auto; min-width: 0; }
  .leaflet-map { height: calc(100vh - 190px); min-height: 460px; }
}

/* ============================================================= */
/* ===== Wotach Rebrand — indigo/violet + amber/orange ===== */
/* ============================================================= */
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  letter-spacing: -0.01em;
}
::selection { background: rgba(79, 70, 229, 0.22); }

/* --- Logo: gradient tile + wordmark --- */
.logo-icon {
  background: var(--brand-grad);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  overflow: hidden;
}
.logo-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the tile, its radius and the drop shadow all go away when the badge is only
   holding the animated emoji - nothing is left to sit behind it */
.logo-icon.logo-icon-emoji { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo .logo-word {
  font-weight: 800;
  font-size: 1.35rem;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

/* --- Topbar --- */
.topbar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.06);
  border-bottom: 1px solid var(--border);
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-grad);
  z-index: 5;
}
.nav-link { border-radius: 10px; color: #3f3f46; }
.nav-link:hover { background: #efeff6; }
.nav-link.active {
  color: var(--brand);
  background: rgba(79, 70, 229, 0.08);
  border-bottom: 3px solid var(--accent);
}
.badge { background: var(--accent-2); box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4); }
.search-box { background: #f0f0f4; }
.search-results { border: 1px solid var(--border); }

/* --- Buttons --- */
.btn-share, .btn-login, .btn-join, .btn-accept, .btn-admin-sm, .btn-add-friend-lg, .btn-message-sm {
  border-radius: 10px;
  border: none;
  font-weight: 700;
}
.btn-share, .btn-login, .btn-join, .btn-accept, .btn-admin-sm, .btn-add-friend-lg {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
.btn-share:hover, .btn-login:hover, .btn-join:hover, .btn-accept:hover, .btn-admin-sm:hover, .btn-add-friend-lg:hover {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
}
.btn-register, .btn-create-account {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
}
.btn-register:hover, .btn-create-account:hover { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.btn-group-joined { background: #f59e0b; }
.btn-message-lg, .btn-friend-remove, .btn-leave { border-radius: 10px; }
.btn-fixer { color: var(--brand); }
.btn-fixer:hover { background: rgba(79, 70, 229, 0.12); }
.btn-share { box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28); }
.btn-share:hover { box-shadow: 0 4px 14px rgba(79, 70, 229, 0.34); }

/* --- Cards --- */
.card, .auth-card, .admin-panel-card, .map-card, .profile-photos-card, .admin-stat-card {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.06);
}

/* --- Like / message accents --- */
.like-btn.liked, .like-icon-mini, .like-count, .suggestion-action.pending { color: var(--accent-2); }
.chat-call-btn, .m-call-btn, .m-send-btn { color: var(--brand); }
.m-bubble { background: var(--brand-grad); }
.m-bubble:hover { transform: scale(1.06) rotate(-4deg); }

/* --- Auth pages --- */
.auth-body {
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 55%, #fffbeb 100%);
}
.auth-left {
  background: var(--brand-grad);
  border-radius: 24px;
  padding: 44px 34px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(79, 70, 229, 0.35);
}
.auth-logo {
  background: linear-gradient(135deg, #fff, #e0e7ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.4rem;
  font-weight: 800;
}
.auth-tagline { color: #e0e7ff; font-size: 1.15rem; }
.auth-features .feature {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.auth-features .feature i { color: #fbbf24; margin-right: 8px; }
.auth-features .feature { color: #ffffff; font-weight: 600; }
.auth-card { border-radius: 18px; box-shadow: 0 10px 40px rgba(24, 24, 27, 0.12); }
.auth-card h2 { font-weight: 700; font-size: 1.05rem; color: var(--brand); }
.auth-switch a, .forgot a { color: var(--brand); }
.auth-switch a:hover, .forgot a:hover { color: var(--brand-2); }
.auth-disclaimer { color: var(--text-secondary); }

/* --- Reels accent --- */
.reel-dropzone i { color: var(--brand); }
.reels-title { color: var(--brand); }

/* --- Admin rebrand --- */
.admin-body { background: #f4f4f6; }
.admin-sidebar { background: linear-gradient(180deg, #12122b 0%, #1a1538 100%); }
.admin-brand .logo-icon { background: var(--brand-grad); border-radius: 10px; }
.admin-menu a.active {
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.55) 0%, rgba(124, 58, 237, 0.45) 100%);
  color: #fff;
  border-right: 3px solid var(--accent);
}
.admin-login-icon { background: var(--brand-grad); }
.admin-stat-icon.blue { background: #4f46e5; }
.admin-stat-icon.green { background: #16a34a; }
.admin-stat-icon.orange { background: #ea580c; }
.admin-stat-icon.red { background: #dc2626; }
.admin-stat-icon.purple { background: #7c3aed; }
.admin-stat-icon.cyan { background: #0891b2; }
.badge-available { background: #eef2ff; color: #4f46e5; }
.badge-admin { background: #fff3e0; color: #ea580c; }
.admin-btn.orange { background: #fff7ed; color: #ea580c; }
.admin-login-title { color: var(--brand); }

/* ===== Animated stickers (Noto Emoji) ===== */
.st-emoji { width: 68px; height: 68px; vertical-align: middle; border-radius: 10px; margin: 2px 1px; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
.post-content .st-emoji, .reel-caption .st-emoji { width: 88px; height: 88px; }
.m-bubble-txt .st-emoji, .bubble-content .st-emoji { width: 64px; height: 64px; border-radius: 8px; }
.m-conv-preview .st-emoji { width: 24px; height: 24px; vertical-align: middle; border-radius: 4px; margin: 0 1px; }
.comment-text .st-emoji { width: 44px; height: 44px; }
.emoji-tab-st { color: var(--accent-2); }
.emoji-tab-st.active { background: rgba(234, 88, 12, 0.14); color: var(--accent-2); }
.emoji-grid.st-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px; overflow-y: auto; }
.st-cell { padding: 0; line-height: 0; background: none !important; }
.st-cell:hover { background: rgba(79, 70, 229, 0.1) !important; }
.st-pick { width: 40px; height: 40px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.emoji-cat-head { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); padding: 8px 2px 2px; border-bottom: 1px solid var(--border); }

/* ===== Emoji reactions (post like) ===== */
.reaction-wrap { position: relative; display: inline-block; flex: 1; }
.reaction-wrap .like-btn { width: 100%; }
.like-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.reaction-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 40;
  display: flex;
  /* shrink-to-fit would clamp the strip to the like button's width and
     squeeze every emoji down to a few pixels, so it is sized by its content */
  width: max-content;
  max-width: calc(100vw - 12px);
  gap: 2px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  pointer-events: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.reaction-pop.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
/* no room above the button (the post sits at the top of the screen) - the
   strip drops underneath instead of sliding off the top edge */
.reaction-pop.below { bottom: auto; top: calc(100% + 10px); }
.reaction-pop.below::before { top: auto; bottom: 100%; }
.reaction-pop.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
/* it would run off the right edge of the screen - pull it back in */
.reaction-pop.flip { left: auto; right: 0; }
.reaction-pop.flip::after { left: auto; right: var(--tail-x, 18px); }
/* invisible bridge so the pointer can travel from the button up into the
   popover without the hover being lost; it must never eat a tap on the button */
.reaction-pop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
  pointer-events: none;
}
/* the little tail that points back at the button, as on Facebook's strip */
.reaction-pop::after {
  content: '';
  position: absolute;
  left: var(--tail-x, 18px);
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-bottom-right-radius: 3px;
  transform: rotate(45deg);
  pointer-events: none;
}
.reaction-opt {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: transform 0.15s ease;
  display: flex;
  transform-origin: center bottom;
}
.reaction-opt:hover { transform: scale(1.5) rotate(-10deg); }
/* the reaction under the finger while the strip is being dragged */
.reaction-opt.hot { transform: scale(1.55) translateY(-3px); }
.react-opt-img { width: 30px; height: 30px; border-radius: 50%; object-fit: contain; display: block; pointer-events: none; }
/* a finger needs a bigger target than a cursor, and the strip itself has to
   stay inside a narrow screen. The emoji scales with the viewport so the six
   of them are as large as Facebook's while still fitting a 320px phone. */
@media (pointer: coarse) {
  .like-btn { min-height: 44px; }
  .reaction-pop { padding: 6px 8px; gap: 2px; max-width: calc(100vw - 16px); }
  .reaction-opt { padding: 4px; }
  .react-opt-img {
    width: clamp(34px, 10.5vw, 42px);
    height: clamp(34px, 10.5vw, 42px);
  }
}
/* On a phone the reaction emoji is the whole message of the row - an 18px
   picture cannot be told apart at a glance, so every emoji a post shows is
   drawn big enough to read without squinting. */
@media (max-width: 640px), (pointer: coarse) {
  .react-btn-img { width: 26px; height: 26px; margin-right: 5px; border-radius: 6px; }
  .react-count-img { width: 26px; height: 26px; margin-right: 4px; border-radius: 6px; }
  .react-btn-img-fb, .react-count-img-fb { font-size: 1.3rem; }
  .react-modal-emoji { width: 30px; height: 30px; }
  .post-feeling .pf-emoji { font-size: 1.25rem; }
  .post-feeling-inline .pf-emoji { font-size: 1.1rem; }
}
.like-btn { position: relative; }
.like-btn.liked { color: var(--brand); }
.like-btn.liked.r-love { color: #e0245e; }
.like-btn.liked.r-haha, .like-btn.liked.r-wow { color: var(--accent); }
.like-btn.liked.r-sad { color: #3b82f6; }
.like-btn.liked.r-angry { color: #dc2626; }
.react-btn-img { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; border-radius: 4px; display: inline-block; }
.react-count-img { width: 18px; height: 18px; vertical-align: middle; margin-right: 3px; border-radius: 4px; display: inline-block; }
/* Shown only when the sticker library has not arrived yet - the bare emoji,
   so the reaction still reads instead of a broken image. */
.react-count-img-fb, .react-btn-img-fb { font-size: 0.95rem; line-height: 1; vertical-align: middle; margin-right: 3px; }

/* ===== Voice Rooms ===== */
.vr-page { display: flex; flex-direction: column; gap: 18px; }
.vr-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.vr-title { font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.vr-meta { font-size: 0.85rem; opacity: 0.9; }
.btn-back { margin-left: auto; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.9rem; background: rgba(255,255,255,0.16); padding: 8px 14px; border-radius: 999px; }
.btn-back:hover { background: rgba(255,255,255,0.28); }
.vr-join-screen {
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 24px;
  max-width: 560px;
  margin: 30px auto;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.vr-bigicon {
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  animation: vrPulse 2s infinite;
}
@keyframes vrPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0.35); }
  50% { box-shadow: 0 0 0 16px rgba(79,70,229,0); }
}
.vr-join-screen h2 { margin: 0 0 6px; font-size: 1.5rem; }
.btn-join-big { margin-top: 14px; padding: 12px 26px; font-size: 1rem; border: none; cursor: pointer; }
.vr-tip { max-width: 360px; margin: 14px auto 0; font-size: 0.8rem; line-height: 1.5; }
.vr-live { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.vr-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
.vr-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 10px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vr-avatar {
  width: 60px; height: 60px;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.vr-card.vr-speaking .vr-avatar { outline: 3px solid var(--accent); }
.vr-card.vr-muted .vr-status .vr-dot { background: #dc2626; }
.vr-status { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 6px; }
.vr-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; }
.vr-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.vr-you { color: var(--brand); font-size: 0.78rem; }
.vr-controls {
  position: sticky;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.vr-ctl {
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.vr-ctl-wide { min-width: 130px; justify-content: center; background: #eef2ff; color: var(--brand); }
.vr-ctl-off { background: #dc2626 !important; color: #fff !important; }
.vr-leave { background: #dc2626; color: #fff; }
.vr-stop { background: rgba(220,38,38,0.92); color: #fff; }
.vr-stop:hover { background: #b91c1c; }

/* --- class video grid --- */
.vr-video-grid { margin-bottom: 16px; }
.vr-video-grid .vr-panel-head i { color: #dc2626; }
.vr-video-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; padding: 4px 16px 16px; }
.vr-video-tile { position: relative; background: #0f1115; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; min-height: 108px; }
.vr-video-tile video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0f1115; }
.vr-video-local { border: 2px solid var(--brand); }
.vr-video-name { position: absolute; left: 8px; bottom: 6px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.vr-video-tile.hidden { display: none; }

/* --- 11-seat stage --- */
.vr-stage-wrap, .vr-listeners { margin-bottom: 16px; }
.vr-panel-head { font-weight: 800; font-size: 1rem; padding: 12px 16px 8px; display: flex; align-items: center; gap: 8px; }
.vr-panel-head .vr-panel-sub { margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.vr-observe-hint { font-size: 0.78rem; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 2px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.vr-observe-hint.hidden { display: none; }
.vr-priv-badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: #fff; background: rgba(124,58,237,0.92); padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.vr-priv-badge.hidden { display: none; }
.vr-priv-note { font-size: 0.88rem; font-weight: 700; color: #6d28d9; background: #ede9fe; border: 1px solid #ddd6fe; padding: 8px 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; }
.vr-priv-note.hidden { display: none; }
.vr-requests { border: 1px solid #ddd6fe; }
.vr-requests .vr-panel-head i { color: #7c3aed; }
.vr-requests.hidden { display: none; }
.vr-requests-list { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.vr-request-row { display: flex; align-items: center; gap: 10px; }
.vr-request-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.vr-seats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 12px 16px 18px;
}
.vr-seat {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.vr-seat-occupied { border-color: #c7d2fe; background: #eef2ff; }
.vr-seat-no { font-size: 0.7rem; color: var(--text-secondary); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.vr-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.vr-avatar.spk { animation: vrRing 1.2s infinite; }
@keyframes vrRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}
.vr-mute-badge { position: absolute; right: -4px; bottom: -2px; background: #dc2626; color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.vr-seat-name { font-size: 0.82rem; font-weight: 700; }
.vr-crown { color: var(--accent-2); margin-left: 2px; }
.vr-seat-actions { display: flex; gap: 6px; margin-top: 2px; }
.vr-mini {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.vr-mini:hover { background: var(--hover); }
.vr-mini-green { color: #15803d; border-color: #bbe7c3; }
.vr-mini-red { color: #dc2626; border-color: #fecaca; }
.vr-seat-plus {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px dashed var(--brand);
  color: var(--brand);
  background: #eef2ff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
  transition: transform 0.15s, background 0.15s;
}
.vr-seat-plus:hover { transform: scale(1.1); background: #e0e7ff; }
.vr-seat-empty-label { font-size: 0.75rem; color: var(--text-secondary); }
.vr-low-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.vr-listeners ul, .vr-pick-list { list-style: none; margin: 0; padding: 0 16px 14px; }
.vr-listen-row, .vr-pick-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
}
.vr-listen-row:hover { background: var(--hover); }
.vr-listen-name { font-weight: 600; font-size: 0.88rem; flex: 1; }
.vr-muted-flag { color: #dc2626; }
.vr-listen-actions { display: flex; gap: 6px; }
.vr-listen-none { color: var(--text-secondary); font-size: 0.85rem; padding: 10px 12px; }
.vr-help { font-size: 0.85rem; }
.vr-help ul { margin: 0; padding: 0 16px 14px 28px; display: flex; flex-direction: column; gap: 6px; }
.vr-pick-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.vr-pick-box {
  background: #fff; border-radius: 16px; max-width: 420px; width: 100%;
  padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}
.vr-pick-box h3 { margin: 0 0 4px; font-size: 1.05rem; }
.vr-pick-row { padding: 6px 4px; }
@media (max-width: 720px) {
  .vr-seats { grid-template-columns: repeat(3, 1fr); }
  .vr-low-wrap { grid-template-columns: 1fr; }
}

/* --- Live chat sidebar --- */
.vr-chat {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 90px);
}
.vr-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}
.vr-chat-msg { max-width: 100%; }
.vr-chat-meta { display: flex; align-items: baseline; gap: 8px; }
.vr-chat-name { font-weight: 700; font-size: 0.8rem; }
.vr-chat-time { font-size: 0.68rem; color: var(--text-secondary); }
.vr-chat-text {
  font-size: 0.88rem;
  line-height: 1.4;
  word-break: break-word;
  background: var(--hover);
  padding: 7px 11px;
  border-radius: 12px;
  display: inline-block;
  margin-top: 2px;
}
.vr-chat-msg.mine .vr-chat-text { background: #eef2ff; color: var(--brand); }
.vr-chat-empty { color: var(--text-secondary); font-size: 0.82rem; text-align: center; padding: 16px 8px; }
.vr-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.vr-chat-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}
.vr-chat-form input:focus { border-color: var(--brand); }
.vr-chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.vr-chat-send:hover { background: #6d28d9; }
@media (max-width: 980px) {
  .vr-live { grid-template-columns: 1fr; }
  .vr-chat { position: static; max-height: 380px; }
}

/* ===== Profile photo + composer (single card) + relative time ===== */
.avatar .av-img,
.avatar > img.av-img,
a.avatar > img.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.composer-card { margin-bottom: 16px; }
.composer-card .composer-title { display: none; }
.composer-card.open .composer-title { display: block; }
.composer-title { width: 100%; box-sizing: border-box; border: 1px solid #e4e6eb; background: #f0f2f5; border-radius: 8px; padding: 10px 12px; font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; outline: none; }
.composer-title:focus { background: #fff; border-color: var(--brand); }
.composer-textarea { min-height: 48px; resize: none; overflow: hidden; }
/* The tool row is always visible so the picture and feeling buttons can
   always be clicked, and Post always sits at the right end. */
.composer-actions { display: flex !important; align-items: center; gap: 10px; }
.composer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-actions .composer-submit { margin-left: auto; }
.feeling-btn { width: auto; height: 38px; border-radius: 20px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.feeling-btn.has-feeling { background: rgba(79, 70, 229, 0.14); color: var(--brand); }

.upload-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin: 12px 0 6px; }
.upload-row { display: flex; align-items: center; gap: 12px; }
.field-file { flex: 1; font-size: 12px; color: #4b5563; }
.cover-thumb { width: 120px; height: 50px; border-radius: 8px; overflow: hidden; background: #e5e7eb; display: flex; align-items: center; justify-content: center; flex: none; color: #9ca3af; }
.cover-thumb img { width: 100%; height: 100%; object-fit: cover; }
.remove-pic-form { margin-top: 12px; }
.vr-avatar .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.post-privacy { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #eef2ff; color: #4f46e5; font-size: 0.7rem; font-weight: 600; vertical-align: middle; }

/* ===== Voice Rooms in sidebar ===== */
.room-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 8px;
  color: var(--text);
  transition: background 0.15s ease;
}
.room-row:hover { background: var(--hover); }
.room-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex: none;
}
.room-row-name { flex: 1; font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row-count { color: var(--text-secondary); font-size: 0.8rem; flex: none; }
.room-row-count i { margin-right: 3px; }
.room-browse {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}
.room-browse:hover { text-decoration: underline; }

/* ===== Who reacted modal ===== */
.like-count[role="button"] { cursor: pointer; }
.like-count[role="button"]:hover { text-decoration: underline; }
.react-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.react-modal-card {
  background: var(--card-bg);
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.react-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.react-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  padding: 4px 6px;
  border-radius: 6px;
}
.react-modal-close:hover { background: var(--hover); color: var(--text); }
.react-modal-list { overflow-y: auto; padding: 6px 8px 10px; }
.react-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
}
.react-modal-row:hover { background: var(--hover); }
.react-modal-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.react-modal-emoji { width: 22px; height: 22px; object-fit: contain; flex: none; }
.react-modal-empty { padding: 18px 10px; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.react-modal-tabs {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.react-tab {
  position: relative;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px 6px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.react-tab img { width: 24px; height: 24px; object-fit: contain; }
.react-tab-count { font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; }
.react-tab:hover { background: var(--hover); }
.react-tab.active { border-color: var(--primary); background: var(--hover); }
.react-tab.active .react-tab-count { color: var(--primary); }
.react-tab.empty img { opacity: 0.3; filter: grayscale(1); }
.react-tab.empty .react-tab-count { opacity: 0.5; }
.sidebar-live {
  margin-left: auto;
  background: #e0245e;
  color: #fff;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.5;
}
.room-id-line { font-size: 0.8rem; margin-top: 2px; }
.vr-roomid { font-size: 0.85rem; }
.profile-handle { color: #6b7280; font-weight: 600; margin-top: 2px; }
.field-hint { font-size: 0.82rem; color: #6b7280; margin: 6px 0 0; }
.field-hint.hint-ok { color: #128a5b; font-weight: 600; }
.field-hint.hint-bad { color: #d93025; font-weight: 600; }
.row-tight { gap: 8px; align-items: center; }
.row-tight .field { margin: 0; }
button[disabled] { opacity: 0.55; cursor: not-allowed; }
.post-handle, .comment-handle, .row-handle { color: #6b7280; font-size: 0.85em; font-style: normal; margin-left: 6px; font-weight: 500; }
a.post-handle:hover { text-decoration: underline; }
.friend-card-handle, .suggestion-handle, .tile-handle { color: #6b7280; font-size: 0.8rem; margin-top: 2px; }
.chip-handle { display: block; font-style: normal; font-size: 0.72rem; color: #6b7280; font-weight: 500; }

.admin-sub { color:#6b7280; font-size:0.78rem; margin-top:2px; }

.profile-handle a { color: #4b5563; text-decoration: none; }
.profile-handle a:hover { text-decoration: underline; }
.copy-link { background: rgba(0,0,0,0.05); border: none; border-radius: 6px; cursor: pointer; color: #6b7280; font-size: 0.8em; padding: 3px 7px; margin-left: 6px; }
.copy-link:hover { background: rgba(0,0,0,0.1); }
.copy-link.copied { color: #128a5b; }
/* post meta: name on the first line, time underneath it */
.post-meta { min-width: 0; }
.post-subline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.post-subline .post-time { margin: 0; }
.post-edited { color: var(--text-secondary); font-size: 0.78rem; }
.post-subline .post-privacy { margin-left: 0; }

/* ===== Feeling / check-in picker ===== */
.feeling-pop {
  position: absolute; z-index: 60;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(15, 23, 42, 0.18);
  padding: 12px; width: 320px; max-width: 92vw;
}
.feeling-wrap { position: relative; }
.feeling-pop-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.feeling-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.feeling-opt {
  border: 1px solid transparent; background: var(--hover); cursor: pointer;
  border-radius: 10px; padding: 6px 2px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; font-size: 0.58rem; line-height: 1.1;
  color: var(--text-secondary); transition: transform 0.12s, border-color 0.12s;
}
.feeling-opt:hover { transform: translateY(-2px); border-color: var(--brand); }
.feeling-opt.sel { border-color: var(--brand); background: rgba(79, 70, 229, 0.1); color: var(--text-primary); font-weight: 700; }
.feeling-opt i { font-style: normal; font-size: 1.25rem; }
.fopt-img {
  width: 30px; height: 30px; border-radius: 7px; display: block;
  object-fit: cover; background: var(--hover);
}
.fopt-emoji { font-size: 1.25rem; line-height: 30px; }
.fopt-label { display: block; }

/* pill shown on the post itself */
.post-feeling {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--feel-bg, #eef2ff); color: var(--feel-fg, #4f46e5);
  border-radius: 20px; padding: 3px 12px 3px 8px; font-size: 0.78rem;
  font-weight: 700; margin-bottom: 8px;
}
.post-feeling .pf-emoji { font-style: normal; font-size: 1rem; }

/* feeling sits on the same line as the author name */
.post-feeling-inline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.86rem; font-weight: 600; color: var(--text-secondary);
  vertical-align: baseline; margin-left: 6px;
}
.post-feeling-inline .pf-emoji { font-style: normal; font-size: 0.95rem; }
.post-feeling-inline .pf-emoji-img {
  width: 20px; height: 20px; border-radius: 5px; display: inline-block;
  vertical-align: -4px; object-fit: cover; background: var(--hover);
}
.post-feeling-inline .pf-label { white-space: nowrap; }
.post-author + .post-feeling-inline { margin-left: 4px; }

/* ===== Check in from the map ===== */
.checkin-wrap { position: relative; }
.checkin-btn {
  width: auto; height: 38px; border-radius: 20px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600;
}
.checkin-btn.has-checkin { background: rgba(79, 70, 229, 0.14); color: var(--brand); }

.ckin-modal {
  position: fixed; inset: 0; z-index: 9600; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ckin-modal.hidden { display: none; }
.ckin-card {
  background: var(--card-bg); border-radius: 16px; width: 100%; max-width: 460px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32); overflow: hidden;
}
.ckin-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border); flex: none;
}
.ckin-head strong { font-size: 1.02rem; font-weight: 700; }
.ckin-head strong i { color: var(--fb-blue); margin-right: 6px; }
.ckin-x {
  border: none; background: none; cursor: pointer; font-size: 1rem;
  color: var(--text-secondary); padding: 6px; border-radius: 8px;
}
.ckin-x:hover { background: var(--hover); color: var(--text); }

.ckin-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin: 14px 16px 10px; padding: 0 6px 0 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--hover);
  flex: none;
}
.ckin-search:focus-within { border-color: var(--fb-blue); background: var(--card-bg); }
.ckin-search > i { color: var(--text-secondary); font-size: 0.85rem; }
.ckin-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 0.9rem; padding: 11px 0; min-width: 0;
}
.ckin-locate {
  border: none; background: none; cursor: pointer; padding: 7px;
  border-radius: 8px; color: var(--fb-blue); font-size: 0.95rem;
}
.ckin-locate:hover { background: rgba(99, 102, 241, 0.12); }
.ckin-locate.spinning i { animation: checkinSpin 0.9s linear infinite; }
@keyframes checkinSpin { to { transform: rotate(360deg); } }

.ckin-results {
  list-style: none; margin: 0 16px 10px; padding: 0; flex: none;
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  max-height: 132px; overflow-y: auto; background: var(--card-bg);
}
.ckin-results.hidden { display: none; }
.ckin-results button {
  display: block; width: 100%; text-align: left; border: none;
  background: none; padding: 9px 13px; font-size: 0.84rem; cursor: pointer;
  font-family: inherit; color: var(--text); border-bottom: 1px solid var(--border);
}
.ckin-results li:last-child button { border-bottom: none; }
.ckin-results button:hover { background: var(--hover); }

.ckin-map-wrap { position: relative; margin: 0 16px; flex: 1 1 auto; min-height: 210px; }
.ckin-map {
  position: absolute; inset: 0; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--border); background: #e8edf3; z-index: 1;
}
.ckin-tip {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  z-index: 500; background: rgba(15, 23, 42, 0.82); color: #fff;
  font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden;
  text-overflow: ellipsis;
}
.ckin-map .leaflet-popup-content { font-family: inherit; font-size: 0.82rem; }
.ckin-map .leaflet-container { font-family: inherit; }

.ckin-foot {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 14px 16px; border-top: 1px solid var(--border); margin-top: 14px;
}
.ckin-picked {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--text-secondary);
}
.ckin-picked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ckin-picked.has-one { color: var(--text); font-weight: 600; }
.ckin-picked.has-one i { color: var(--fb-blue); }

@media (max-width: 640px) {
  .ckin-modal { padding: 0; align-items: flex-end; }
  .ckin-card { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .ckin-map-wrap { min-height: 44vh; }
  .ckin-foot { flex-wrap: wrap; }
  .ckin-picked { order: -1; width: 100%; flex: 1 0 100%; }
}
/* check-in chip under the time */
.post-checkin-map {
  position: relative; z-index: 0; isolation: isolate;
  margin: 10px 0 4px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); background: #e8edf3;
}
/* the rows under the map keep their own layer, so the map captions, which sit
   at a high z index, cannot float up over the like and comment bar */
.post-checkin-map ~ .post-stats,
.post-checkin-map ~ .post-actions { position: relative; z-index: 1; }
.pcm-map {
  height: 168px; width: 100%;
  /* leaflet panes are absolute, this stops them adding height to the card */
  position: relative; overflow: hidden;
}
.pcm-pin { background: none; border: none; }
.pcm-pin .pcm-dot {
  display: block; width: 20px; height: 20px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); background: #e0245e;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.pcm-fallback {
  height: 168px; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; color: var(--text-secondary);
  font-size: 0.85rem;
}
.pcm-fallback i { font-size: 1.5rem; opacity: 0.7; }
.pcm-open {
  position: absolute; right: 8px; top: 8px; z-index: 500;
  background: rgba(255, 255, 255, 0.94); color: var(--text-primary);
  font-size: 0.75rem; font-weight: 600; padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25); display: inline-flex;
  align-items: center; gap: 5px;
}
.pcm-open:hover { background: #fff; }
.pcm-label {
  position: absolute; left: 8px; top: 8px; right: 8px; z-index: 500;
  pointer-events: none; align-self: flex-start;
  font-size: 0.75rem; font-weight: 600; color: #0f172a;
  background: rgba(255, 255, 255, 0.9); border-radius: 7px;
  padding: 4px 8px; max-width: 78%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
}

.post-checkin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--fb-blue);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-checkin:hover { text-decoration: underline; }
.post-checkin i { flex: none; }

/* ===== Post three dot menu ===== */
.post-header { position: relative; align-items: flex-start; }
.post-menu-wrap { position: relative; flex: none; margin-left: auto; }
.post-menu-btn {
  background: transparent; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--text-secondary); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.post-menu-btn:hover, .post-menu-wrap.open .post-menu-btn { background: var(--hover); color: var(--text-primary); }
.post-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  min-width: 194px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.2);
  padding: 6px; z-index: 50;
}
.post-menu-wrap.open .post-menu { display: block; }
.post-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text-primary); font-size: 0.9rem; font-weight: 600;
}
.post-menu-item:hover { background: var(--hover); }
.post-menu-item i { width: 18px; text-align: center; color: var(--text-secondary); }
.post-menu-item.danger, .post-menu-item.danger i { color: #dc2626; }
.post-menu-item.danger:hover { background: rgba(220, 38, 38, 0.1); }

/* Edit post box - the one place a member rewrites a post, so it gets the
   room a real editor needs instead of the small reaction dialog's size. */
#editPostModal .edit-post-card { max-width: 580px; max-height: min(80vh, 640px); }
#editPostModal .react-modal-head { font-size: 1rem; padding: 15px 18px; }
#editPostModal .react-modal-head strong { display: inline-flex; align-items: center; gap: 9px; }
#editPostModal .react-modal-head strong i { color: var(--brand); }

.edit-post-wrap { width: 100%; padding: 16px 18px 18px; display: flex; flex-direction: column; }
.edit-post-area {
  width: 100%; min-height: 200px; resize: vertical;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; font-size: 1rem; line-height: 1.6; font-family: inherit;
  color: var(--text-primary); background: var(--bg);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.edit-post-area::placeholder { color: var(--text-secondary); opacity: 0.85; }
.edit-post-area:hover { border-color: var(--text-secondary); }
.edit-post-area:focus {
  outline: none; border-color: var(--brand);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.edit-post-hint {
  margin: 8px 0 0; font-size: 0.78rem; color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.edit-post-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.edit-post-foot .btn-ghost, .edit-post-foot .btn-share { min-height: 40px; padding: 0 20px; }

/* ---- Report form (rides on the .react-modal shell) ---- */
.report-card { max-width: 460px; max-height: 90vh; overflow-y: auto; }
.report-form { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.report-target {
  margin: 0 0 6px; padding: 9px 11px; border-radius: 8px;
  background: var(--hover); color: var(--text-secondary); font-size: 0.84rem; line-height: 1.4;
  word-break: break-word;
}
.report-label {
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  margin-top: 6px;
}
.report-label .muted { font-weight: 400; }
.report-input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 11px; font-size: 0.92rem; font-family: inherit;
  color: var(--text-primary); background: var(--bg);
}
.report-textarea { min-height: 92px; resize: vertical; }
.report-shot { display: flex; flex-direction: column; gap: 8px; }
.report-file {
  width: 100%; font-size: 0.85rem;
  border: 1px dashed var(--border); border-radius: 9px; padding: 9px 11px;
  background: var(--bg);
}
.report-shot-preview {
  width: 100%; max-height: 190px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.report-shot-clear { align-self: flex-start; padding: 5px 12px; font-size: 0.8rem; }
.report-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.report-menu-item { color: var(--text-primary); }

/* The flag that opens the report modal wherever content is shown. */
.report-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 8px;
  padding: 7px 12px; font-size: 0.83rem; font-weight: 600; font-family: inherit;
  cursor: pointer; line-height: 1.1;
}
.report-link:hover { background: var(--hover); color: #c0392b; border-color: #f1c4c4; }
.reel-actions .report-link,
.vr-top-actions .report-link {
  background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3);
  padding: 6px 10px;
}
.reel-actions .report-link:hover,
.vr-top-actions .report-link:hover { background: rgba(255, 255, 255, 0.28); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.reel-actions .reel-report { gap: 0; }
.chat-bubble { position: relative; }
.bubble-report {
  position: absolute; top: 4px; left: -30px;
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--hover); color: var(--text-secondary); cursor: pointer;
  opacity: 0; transition: opacity 0.14s ease;
}
.chat-bubble.mine .bubble-report { left: auto; right: -30px; }
.chat-bubble:hover .bubble-report { opacity: 1; }
.bubble-report:hover { background: #ffecec; color: #c0392b; }

.btn-ghost {
  background: transparent; border: 1px solid var(--border); cursor: pointer;
  padding: 8px 16px; border-radius: 8px; font-weight: 600;
  color: var(--text-primary);
}
.btn-ghost:hover { background: var(--hover); }

/* toast for copy / report / share */
.wotach-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 11px 20px;
  border-radius: 24px; font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); z-index: 200;
}

/* ===== Friends and mutual friends activity ===== */
.act-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.act-row { display: flex; gap: 9px; align-items: flex-start; }
.act-avatar-link { flex: none; }
.act-body { min-width: 0; flex: 1; }
.act-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.act-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); }
.act-name:hover { text-decoration: underline; }
.act-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 8px; }
.act-badge.friend { background: rgba(79, 70, 229, 0.14); color: var(--brand); }
.act-badge.mutual { background: rgba(16, 185, 129, 0.16); color: #047857; }
.act-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.35; margin-top: 1px; }
.act-text i { width: 14px; color: var(--brand); }
.act-text a { color: var(--text-secondary); }
.act-time { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.8; margin-top: 1px; }

/* ===== Comment three dot menu ===== */
.comment-item { position: relative; }
.comment-head { display: flex; align-items: center; gap: 6px; }
.comment-menu-wrap { position: relative; margin-left: auto; }
.comment-menu-btn {
  background: transparent; border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--text-secondary); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.comment-menu-btn:hover, .comment-menu-wrap.open .comment-menu-btn { background: var(--hover); color: var(--text-primary); }
.comment-menu { min-width: 168px; }
/* without this the panel stays hidden, the rule above only knows the post wrap */
.comment-menu-wrap.open .comment-menu { display: block; }
.comment-menu { z-index: 60; }
.comment-edited { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.85; }

/* ===== Voice Room redesign: covers, admin panel, seat locks ===== */
.vr-create-card { padding: 18px 20px; margin-bottom: 4px; }
.vr-create-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.vr-field { display: flex; flex-direction: column; gap: 4px; }
.vr-field label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.vr-field input[type="text"], .vr-field input[type="number"], .vr-field select {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 0.9rem; background: #fff; color: var(--text-primary);
}
.vr-field-grow { flex: 1 1 220px; }
.vr-field-grow input { width: 100%; }
.vr-create-btn { border: none; cursor: pointer; padding: 10px 20px; white-space: nowrap; }
.vr-create-hint { margin: 12px 0 0; font-size: 0.8rem; line-height: 1.5; }
.vr-create-hint i { color: var(--brand); }

.room-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.room-cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 130px; background-size: cover; background-position: center;
  color: rgba(255,255,255,0.9); font-size: 2.4rem; text-decoration: none;
}
.room-cat-badge { position: absolute; left: 10px; top: 10px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.room-priv-badge { position: absolute; left: 10px; bottom: 10px; background: rgba(124,58,237,0.92); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 9px 3px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.room-media-badge { position: absolute; right: 10px; top: 10px; background: #dc2626; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.room-live-badge { position: absolute; right: 10px; top: 10px; background: #dc2626; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; padding: 3px 8px 3px 6px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
.room-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: vrPulse 1.4s infinite; }
.room-you-badge { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(79,70,229,0.14); color: var(--brand); padding: 1px 7px; border-radius: 8px; margin-left: 6px; }

.vr-hero {
  position: relative; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center;
  min-height: 130px; display: flex; align-items: flex-end; color: #fff;
}
.vr-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0.15), rgba(15,23,42,0.72)); }
.vr-hero .vr-topbar { position: relative; z-index: 1; background: transparent; padding: 22px 24px 18px; width: 100%; align-items: flex-end; border-radius: 0; }
.vr-title-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vr-roomtitle { margin: 0; font-size: 1.5rem; font-weight: 800; }
.vr-cat-badge { align-self: flex-start; background: rgba(255,255,255,0.22); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.vr-hero .vr-meta { opacity: 0.92; font-size: 0.82rem; }
.vr-top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vr-top-actions .btn-back { margin-left: 0; }
.vr-top-actions .vr-ctl { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.vr-top-actions .vr-ctl:hover { background: rgba(255,255,255,0.3); }

.vr-bigicon-red { background: linear-gradient(135deg, #dc2626, #b91c1c); animation: none; }

.vr-seat-locked { border-style: dashed !important; background: #f8fafc !important; }
.vr-lock-mini { margin-top: 4px; }
.vr-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.vr-danger:hover { background: #fecaca; }

.vr-admin-box {
  background: #fff; border-radius: 16px; padding: 22px 22px 18px;
  width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: left;
}
.vr-admin-box h3 { margin: 0 0 16px; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.vr-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vr-admin-grid .vr-field input, .vr-admin-grid .vr-field select { width: 100%; }
.vr-admin-grid .vr-field:nth-child(4) { grid-column: 1 / -1; }
.vr-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; margin-top: 6px; color: var(--text-secondary); }
.vr-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.vr-admin-actions .btn-share { border: none; cursor: pointer; }
.vr-admin-blocked { border-top: 1px solid var(--border); padding-top: 14px; }
.vr-admin-blocked > label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 8px; }
.vr-admin-blocked ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vr-admin-blocked li { display: flex; align-items: center; gap: 10px; }
.vr-blocked-name { flex: 1; font-weight: 600; font-size: 0.88rem; }

@media (max-width: 720px) {
  .vr-admin-grid { grid-template-columns: 1fr; }
  /* column + wrap kept the flex items on one wrapping line, and .vr-field-grow's
     220px basis then forced the row wider than the card; nowrap makes each field
     fill the card width instead */
  .vr-create-form { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .vr-create-form .vr-field { width: 100%; min-width: 0; }
  .vr-create-form .vr-field-grow { flex: 0 0 auto; }
  .vr-create-form .vr-field input,
  .vr-create-form .vr-field select { width: 100%; }
  .vr-create-btn { width: 100%; justify-content: center; }
  .vr-hero .vr-topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vr-top-actions { margin-left: 0; }
  .vr-roomtitle { font-size: 1.25rem; }
}

/* ===== In-page dialog (replaces browser alert/confirm) ===== */
.wotach-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: wotachFade 0.14s ease-out;
}
.wotach-dialog-overlay.hidden { display: none; }
@keyframes wotachFade { from { opacity: 0; } to { opacity: 1; } }
.wotach-dialog {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px 20px;
  text-align: center;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  animation: wotachPop 0.16s ease-out;
}
@keyframes wotachPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wotach-dialog-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: #eef2ff;
  color: var(--brand);
}
.wotach-dialog-danger .wotach-dialog-icon { background: #fee2e2; color: #dc2626; }
.wotach-dialog-success .wotach-dialog-icon { background: #dcfce7; color: #16a34a; }
.wotach-dialog-title { margin: 0 0 6px; font-size: 1.15rem; }
.wotach-dialog-msg { margin: 0 0 4px; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; white-space: pre-line; }
.wotach-dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.wotach-dialog-btn {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.wotach-dialog-cancel { background: var(--hover); color: var(--text-secondary); }
.wotach-dialog-cancel:hover { background: var(--border); }
.wotach-dialog-ok { background: var(--brand); color: #fff; }
.wotach-dialog-ok:hover { background: #6d28d9; }
.wotach-dialog-danger.wotach-dialog-ok, .wotach-dialog-ok.wotach-dialog-danger { background: #dc2626; }
.wotach-dialog-ok.wotach-dialog-danger:hover { background: #b91c1c; }

/* ===== Job system: companies, jobs, CV ===== */
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); }

/* Compact search + filter bar, sits directly under the Jobs banner */
.jobs-filterbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.search-box-inline { flex: 1 1 240px; position: relative; }
.search-box-inline input { width: 100%; }
.jobs-filterbar .btn-share, .jobs-filterbar .btn-ghost { flex: none; }

/* Category picker living inside the search pill */
.jobs-searchwrap { min-width: 0; }
.jobs-searchwrap input[type="text"] { min-width: 0; }
.jobs-cat-select {
  flex: none; max-width: 46%; margin-left: 8px;
  border: none; border-left: 1px solid var(--border); border-radius: 0;
  background: transparent; outline: none; cursor: pointer;
  font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);
  padding: 0 4px 0 12px; height: 24px;
}
.jobs-cat-select:focus { color: var(--brand); }

.job-list { display: flex; flex-direction: column; gap: 14px; }
.job-card { padding: 16px 18px; }
.job-card.job-closed { opacity: 0.72; }
.job-card-head { display: flex; gap: 14px; align-items: flex-start; }
.job-card-main { flex: 1; min-width: 0; }
.job-card-main h3 { margin: 0 0 3px; font-size: 1.08rem; }
.job-company { margin: 0 0 8px; font-size: 0.88rem; color: var(--text-secondary); }
.job-company a { color: var(--text-secondary); font-weight: 600; }
.job-logo {
  flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), #6d28d9); color: #fff;
  font-weight: 800; font-size: 1.3rem; text-decoration: none;
}
.job-logo img { width: 100%; height: 100%; object-fit: cover; }
.job-logo-lg { width: 72px; height: 72px; border-radius: 16px; font-size: 1.9rem; }
.job-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.job-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
  background: var(--hover); border-radius: 999px; padding: 4px 10px;
}
.job-tag i { color: var(--brand); }
.job-card-side { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.job-salary { font-weight: 800; color: #047857; font-size: 0.92rem; }
.job-salary-lg { font-size: 1.25rem; }
.job-vacancies { font-size: 0.76rem; }
.job-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.status-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 800; color: #fff;
  padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.status-open { background: #22c55e; }
.status-closed { background: #94a3b8; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.form-card .form-grid-2 label, .form-card .form-grid-3 label { margin-top: 0; }

.job-detail { padding: 22px 24px; }
.job-detail-head { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.job-detail-title { flex: 1; min-width: 0; }
.job-detail-title h1 { margin: 0 0 4px; font-size: 1.5rem; }
.job-detail-side { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.job-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; margin-top: 20px; }
.job-detail-body .section-title { margin-top: 18px; }
.info-card { padding: 16px 18px; margin-bottom: 14px; }
.info-card h3 { margin: 0 0 12px; font-size: 1rem; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.info-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.info-list span { color: var(--text-secondary); }
.owner-actions { display: flex; flex-direction: column; gap: 8px; }
.owner-actions .btn-share, .owner-actions .btn-ghost, .owner-actions .btn-danger { width: 100%; justify-content: center; text-align: center; border: none; cursor: pointer; }
.btn-danger { background: #fee2e2; color: #b91c1c; border: none; cursor: pointer; padding: 9px 16px; border-radius: 8px; font-weight: 700; font-family: inherit; }
.btn-danger:hover { background: #fecaca; }
.apply-form label { display: block; margin-bottom: 5px; font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); }
.apply-hint { font-size: 0.76rem; margin: 8px 0 0; }
.applied-note { color: #047857; font-weight: 700; }
.pre-line { white-space: pre-line; line-height: 1.6; }

.benefit-preview { margin-top: 14px; }
.benefit-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.benefit-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  font-size: 0.76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.benefit-chip i { color: #10b981; }
.benefit-chip.benefit-more { background: var(--hover); color: var(--text-secondary); border-color: var(--border); }

.benefit-picker {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 8px; margin: 6px 0 14px;
}
.benefit-option {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary); background: #fff;
}
.benefit-option input { accent-color: var(--brand); }
.benefit-option:hover { background: var(--hover); }

.company-logo-upload { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.company-logo-preview {
  width: 84px; height: 84px; border-radius: 16px; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), #6d28d9); color: #fff; font-size: 2rem;
}
.company-logo-preview img { width: 100%; height: 100%; object-fit: cover; }

.company-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.company-card-head { display: flex; gap: 12px; align-items: center; }
.company-card-head h3 { margin: 0; font-size: 1.02rem; }
.company-card-head p { margin: 2px 0 0; font-size: 0.82rem; }
.company-logo {
  flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), #6d28d9); color: #fff;
  font-weight: 800; font-size: 1.2rem; text-decoration: none;
}
.company-logo img { width: 100%; height: 100%; object-fit: cover; }
.company-logo-lg { width: 76px; height: 76px; border-radius: 16px; font-size: 2rem; }
.company-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

.company-hero { padding: 20px 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.company-hero-main { display: flex; gap: 16px; align-items: center; }
.company-hero-main h1 { margin: 0 0 4px; font-size: 1.5rem; }
.company-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.company-site { font-size: 0.85rem; color: var(--brand); font-weight: 600; }
.badge-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: #16a34a; background: #dcfce7; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.badge-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 3px 10px; }
.doc-upload-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.doc-upload { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fafafa; }
.doc-upload label { font-weight: 700; }
.doc-upload p { margin: 2px 0 8px; }
.doc-current { display: flex; align-items: center; gap: 6px; background: var(--hover); border-radius: 9px; padding: 7px 10px; margin-bottom: 8px; font-size: 0.88rem; }
.doc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.doc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding: 8px 0; }
.doc-item-label { font-weight: 600; }

.cv-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.cv-preview { position: sticky; top: 76px; }
.cv-preview .card { padding: 16px 18px; }
.cv-headline { font-weight: 700; color: var(--text-primary); margin: 4px 0 8px; }
.cv-row { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fafafa; }
.cv-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cv-remove { background: transparent; border: none; cursor: pointer; color: #dc2626; font-size: 0.9rem; }
.cv-add { margin-bottom: 8px; }
.cv-file-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--hover); border-radius: 10px; margin-bottom: 8px; }

.cv-doc { padding: 22px 24px; }
.cv-doc-head { display: flex; gap: 16px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cv-doc-avatar { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.7rem; font-weight: 800; }
.cv-doc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cv-h { margin: 20px 0 8px; font-size: 1rem; }
.cv-exp { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.cv-exp .muted { margin-left: 6px; font-size: 0.8rem; }
.cv-exp .cv-edu-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 0; font-size: 0.8rem; }
.cv-edu-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cv-edu-meta i { color: var(--brand); }
.cv-info-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 6px 0 14px; }
.cv-info-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.cv-info-row:last-child { border-bottom: none; }
.cv-info-row:nth-child(odd) { background: #fafafa; }
.cv-info-label { font-weight: 700; color: var(--text-secondary); }
.cv-info-value { color: var(--text-primary); }
.cv-declaration { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--border); font-style: italic; font-size: 0.88rem; color: var(--text-secondary); }
.lang-skill { font-style: normal; font-size: 0.85em; opacity: 0.9; }
@media (max-width: 560px) { .cv-info-row { grid-template-columns: 1fr; gap: 2px; } }

.applicant-list { display: flex; flex-direction: column; gap: 14px; }
.applicant-card { padding: 16px 18px; }
.applicant-head { display: flex; gap: 12px; align-items: center; }
.applicant-main { flex: 1; min-width: 0; }
.applicant-main h3 { margin: 0 0 2px; font-size: 1.05rem; }
.applicant-cover { margin-top: 12px; padding: 12px; background: var(--hover); border-radius: 10px; }
.applicant-cover strong { font-size: 0.82rem; }
.applicant-cv { margin-top: 12px; }
.cv-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.applicant-status { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.applicant-status .field { width: auto; }
.applicant-status input[type="text"] { flex: 1 1 200px; }

@media (max-width: 860px) {
  .job-detail-grid { grid-template-columns: 1fr; }
  .cv-layout { grid-template-columns: 1fr; }
  .cv-preview { position: static; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  /* On a phone the salary/status column must not squeeze the title into a
     one-letter column: the main block keeps a full row beside the logo, and
     the side block drops under it as one wrapping row. */
  .job-card-head { flex-wrap: wrap; }
  .job-card-main { flex: 1 1 calc(100% - 66px); }
  .job-card-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; text-align: left; }
  .company-hero { flex-direction: column; align-items: flex-start; }
}

/* ===== Jobs: role identity + category navigation ===== */
.role-icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
}
.role-icon-seeker { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.role-icon-company { background: linear-gradient(135deg, var(--brand), #6d28d9); }
.role-done { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 4px 10px; }

.job-cat-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.job-cat-chip {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px;
}
.job-cat-chip:hover { background: var(--hover); }
.job-cat-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.job-cat-num { font-size: 0.7rem; font-weight: 800; background: rgba(148,163,184,0.25); border-radius: 999px; padding: 1px 7px; }
.job-cat-chip.active .job-cat-num { background: rgba(255,255,255,0.28); }
.job-group { margin-bottom: 22px; }
.job-group .section-title { display: flex; align-items: center; gap: 8px; }
.job-group .job-cat-num { background: var(--hover); color: var(--text-secondary); }

@media (max-width: 720px) {
  .role-choose { grid-template-columns: 1fr; }
  /* chips/toggle sat at 26-29px tall on phones - pad them into comfortable taps */
  .job-cat-chip { padding: 8px 14px; }
  .jobs-side-switch-btn { padding: 7px 13px; }
  .jobs-side-sub { font-size: 0.75rem; }
}

.jobs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.jobs-main { min-width: 0; }
.jobs-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.jobs-side-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.jobs-side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.95rem; }
.jobs-side-title i { color: var(--brand); }
.jobs-side-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.jobs-side-ic { width: 44px; height: 44px; border-radius: 12px; font-size: 1.15rem; }
.jobs-side-head-txt { flex: 1; min-width: 0; }
.jobs-side-head h3 { margin: 0 0 2px; font-size: 1rem; }
.jobs-side-head p { margin: 0; font-size: 0.78rem; }
.jobs-side-switch { flex: none; margin: 0; }
.jobs-side-switch-btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; color: var(--brand);
  background: var(--hover); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.jobs-side-switch-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.jobs-side-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); padding: 5px 0; }
.jobs-side-row i.ok { color: #10b981; }
.jobs-side-row.warn i { color: #f59e0b; }
.jobs-side-row.warn { color: #b45309; }
.jobs-side-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jobs-side-sub { margin: 14px 0 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.jobs-side-sub:first-of-type { margin-top: 0; }
.jobs-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jobs-side-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; }
.jobs-side-list a:hover { background: var(--hover); color: var(--text); }
.jobs-side-list a.on { background: var(--brand); color: #fff; font-weight: 600; }
.jobs-side-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-side-list a em { flex: none; font-style: normal; font-size: 0.74rem; font-weight: 700; background: var(--hover); color: var(--text-secondary); border-radius: 999px; padding: 1px 7px; }
.jobs-side-list a.on em { background: rgba(255, 255, 255, 0.26); color: #fff; }
.jobs-side-jobs a { display: block; padding: 9px 10px; }
.jobs-side-jobs strong { display: block; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-side-jobs span { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-side-jobs em { display: inline-block; margin-top: 5px; font-style: normal; font-size: 0.72rem; font-weight: 700; background: var(--hover); color: var(--text-secondary); border-radius: 999px; padding: 2px 8px; }
.jobs-side-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jobs-side-chips a { font-size: 0.78rem; padding: 5px 11px; }
.jobs-side-empty { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }

.job-company-card h3 { display: flex; align-items: center; gap: 8px; }
.job-company-card h3 i { color: var(--brand); }
.job-company-head { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; margin-bottom: 10px; }
.job-company-head:hover strong { color: var(--brand); }
.job-company-names { min-width: 0; }
.job-company-names strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.job-company-names span { display: block; font-size: 0.78rem; margin-top: 2px; }
.job-company-verified { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 10px; }
.job-company-about { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }
.job-company-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; }
.job-company-hint { margin: 10px 0 0; font-size: 0.76rem; line-height: 1.45; }
.job-company-hint a { color: var(--brand); }
.info-list .truncate { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

@media (max-width: 1000px) {
  .jobs-layout { grid-template-columns: 1fr; }
  .jobs-side { position: static; }
}

/* ==================================================================
   Public / guest experience: landing page, guest topbar, guest CTA
   ================================================================== */

/* Public pages use the same two-part shape as the member pages: the usual
   left sidebar, then the content. The content keeps whatever inner layout
   it already had (jobs keeps its own filter + right sidebar). */
.layout-public {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}
.public-main { min-width: 0; }

.sidebar-menu li a.on { background: var(--hover); color: var(--fb-blue); font-weight: 600; }

.landing { max-width: 1080px; margin: 0 auto; padding: 18px 16px 40px; }

/* ==================================================================
   Landing page, shaped like a professional-network home page:
   one hero, then a shelf per topic with a heading, a sub-line,
   a topic row or card grid, and a "see all" link.
   ================================================================== */

/* Only for labels that exist for screen readers. */
.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;
}

/* ---- 1. hero ---- */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
  margin-bottom: 26px;
}
.lp-eyebrow { margin: 0 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--fb-blue); }
.lp-h1 { margin: 0 0 8px; font-size: 1.85rem; line-height: 1.2; }
.lp-lead { margin: 0 0 16px; color: var(--text-2); font-size: 1rem; }

/* Landing hero job search.

   It used to be a 999px pill built from `flex-wrap`, so as soon as the
   select and the button dropped onto a second line - which happens well above
   the mobile breakpoint, because the hero is a two column grid - the pill
   broke into a pair of half circles. A grid with an explicit two row layout
   cannot wrap badly: either the three controls sit on one line, or the input
   takes a full row of its own and the select and button share the next. */
.lp-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 7px;
  max-width: 620px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-search:focus-within {
  border-color: var(--fb-blue);
  box-shadow: 0 0 0 3px rgba(24, 119, 211, 0.18);
}

/* The icon is positioned inside this cell, not a flex sibling of the input,
   so it stays put while the input is typed into or resized. */
.lp-search-field { position: relative; display: flex; align-items: center; min-width: 0; }
.lp-search-field > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-2); pointer-events: none; font-size: 0.9rem;
}
.lp-search input[type="search"] {
  width: 100%; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 9px 6px 9px 34px;
  font-size: 0.95rem; color: inherit;
}
/* The native clear button fights the row layout and our own styling. */
.lp-search input[type="search"]::-webkit-search-decoration,
.lp-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.lp-search select {
  min-width: 0; max-width: 180px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 10px; background: var(--card-bg); color: inherit; font-size: 0.9rem;
}
.lp-search button { border-radius: 10px; padding: 10px 20px; white-space: nowrap; }

/* Input on its own row, select and button sharing the row below. */
@media (max-width: 620px) {
  .lp-search { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-search-field { grid-column: 1 / -1; }
  .lp-search select { max-width: none; }
}
/* Narrow phones: one control per row, all full width. */
@media (max-width: 420px) {
  .lp-search { grid-template-columns: minmax(0, 1fr); }
  .lp-search select, .lp-search button { width: 100%; }
}

.lp-hero-stats {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 16px; font-size: 0.88rem; color: var(--text-2);
}
.lp-hero-stats strong { color: var(--text-1); }

/* The hero's second column is the shared sign-in card (authbox-hero), so the
   old .lp-hero-card rules are gone. */

/* ---- 2. one shelf per topic ---- */
.lp-shelf { margin-bottom: 34px; }
.lp-shelf-head { margin-bottom: 14px; }
.lp-shelf-title { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.3; }
.lp-shelf-title i { width: 26px; color: var(--fb-blue); }
.lp-shelf-sub { margin: 0; color: var(--text-2); font-size: 0.93rem; }
.lp-shelf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 0; }
.lp-note { font-size: 0.85rem; }

/* topic chips */
.lp-topics {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px; padding: 0;
}
.lp-topic {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--text-1); font-size: 0.88rem; font-weight: 600;
}
.lp-topic:hover { background: var(--hover); border-color: var(--fb-blue); color: var(--fb-blue); }
.lp-topic-n { color: var(--text-secondary); font-weight: 700; font-size: 0.76rem; margin-left: 3px; }
.lp-topic:hover .lp-topic-n { color: inherit; }

/* posts */
.lp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.lp-post { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.lp-post-head { display: flex; align-items: center; gap: 10px; }
.lp-post-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lp-post-who strong { font-size: 0.93rem; }
.lp-post-who .muted { font-size: 0.8rem; }
.lp-post-text { margin: 0; font-size: 0.92rem; overflow-wrap: anywhere; }
.lp-post-img { width: 100%; border-radius: 8px; object-fit: cover; max-height: 190px; }
.lp-post-foot { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; }
.lp-post-cta { margin-left: auto; color: var(--fb-blue); font-weight: 600; }

/* reels: reuse the existing strip */
.lp-shelf .reel-strip { margin: 0; }

/* rooms */
.lp-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.lp-room { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.lp-room-img { width: 100%; height: 96px; object-fit: cover; }
.lp-room-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.lp-room-body .muted { font-size: 0.82rem; }
.lp-room-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--fb-blue); }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; display: inline-block; }

/* games */
.lp-game-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 14px; }
.lp-game { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; text-align: center; }
.lp-game-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--hover); color: var(--fb-blue); font-size: 1.25rem; }
.lp-game-soon {
  grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-2);
}
.lp-game-soon p { margin: 4px 0 0; font-size: 0.9rem; }

/* messaging */
.lp-msg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.lp-msg { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.lp-msg-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hover); color: var(--fb-blue); }
.lp-msg p { margin: 0; font-size: 0.88rem; }

/* join band */
.lp-join { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px; margin-bottom: 20px; }
.lp-join p { margin: 6px 0 0; max-width: 62ch; }
.lp-join-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .lp-h1 { font-size: 1.55rem; }
}
/* .lp-search now stacks itself at 620px and 420px, so the old 560px override
   that only patched its border-radius is gone. */

.landing-hero { padding: 30px 28px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; background: var(--brand-grad); color: #fff; border: none; }
.landing-hero-main { flex: 1 1 460px; min-width: 0; }
.landing-hero h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 8px; }
.landing-sub { opacity: 0.92; margin: 0 0 18px; }
.landing-search { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 8px 10px; color: var(--text); }
.landing-search i { color: var(--text-secondary); }
.landing-search input { flex: 1 1 auto; min-width: 0; border: none; outline: none; font: inherit; padding: 8px 4px; background: transparent; }
.landing-search select { border: 1px solid var(--border); border-radius: 8px; padding: 8px; font: inherit; background: #fff; color: var(--text); max-width: 190px; }
.landing-search button { border: none; cursor: pointer; padding: 9px 16px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 600; }
.landing-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0 0; }
.landing-cta .btn-ghost { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.4); }

.landing-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; }
.landing-stats li { display: flex; flex-direction: column; }
.landing-stats strong { font-size: 1.9rem; line-height: 1; }
.landing-stats span { opacity: 0.85; font-size: 0.85rem; }

.landing-section { margin-top: 28px; }
.landing-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.landing-section-head .section-title { margin: 0 0 12px; }
a.benefit-chip { text-decoration: none; color: inherit; }

.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.company-tile { display: flex; align-items: center; gap: 12px; padding: 14px; text-decoration: none; color: inherit; }
.company-tile:hover { background: var(--hover); }
.company-tile-body { display: flex; flex-direction: column; min-width: 0; }
.company-tile-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-tile-body .muted { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reel-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.reel-thumb { position: relative; display: block; aspect-ratio: 9 / 16; background: #0b0b0f; border-radius: 12px; overflow: hidden; }
.reel-thumb img, .reel-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity .15s; }
.reel-thumb:hover .reel-thumb-play { opacity: 1; }

.landing-join { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.landing-join-actions { display: flex; gap: 10px; }

/* Guest topbar: the auth-only controls are replaced by labelled pills.
   .nav-link is a fixed 48px icon box for members, so the guest links need
   their own width/padding here - otherwise the words overflow the box.
   Selectors are kept at .topbar .nav-pill so they win over the
   .topbar-nav .nav-link rules inside the existing media queries. */
.topbar-nav-guest { gap: 4px; }
.topbar .nav-pill {
  width: auto;
  height: 40px;
  padding: 0 13px;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 20px;
  white-space: nowrap;
}
.topbar .nav-pill i { font-size: 1rem; line-height: 1; }
.topbar .nav-pill .nav-label { margin-left: 0; }
.topbar .nav-pill:hover { background: var(--hover); color: var(--text); }
/* A pill has no room for the 3px underline the icon boxes use. */
.topbar .nav-pill.active {
  color: var(--brand);
  background: rgba(79, 70, 229, 0.10);
  border-bottom: none;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.28);
}
.topbar-right-guest { gap: 8px; }
.topbar-cta { padding: 9px 15px; font-size: 0.9rem; font-weight: 600; white-space: nowrap; }
.topbar-cta .cta-short { display: none; }


/* Reels page shown to signed-out visitors. */
.reel-guest-cta { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; }
.reel-guest-cta > i { font-size: 1.5rem; color: var(--brand); }
.reel-guest-cta p { margin: 4px 0 0; }
.reel-media-open { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; opacity: 0; transition: opacity .15s; }
.reel-media { position: relative; }
.reel-card:hover .reel-media-open { opacity: 1; }

/* ==================================================================
   Reel full view: vertical snap deck, one reel per slide
   ================================================================== */

.reelview { position: fixed; inset: 0; background: #000; color: #fff; z-index: 60; display: flex; flex-direction: column; }
.reelview-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(rgba(0,0,0,0.75), transparent); }
.reelview-topbar .btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
.reelview-count { font-size: 0.9rem; opacity: 0.85; }

.reelview-deck { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; outline: none; -webkit-overflow-scrolling: touch; }
.reelview-slide { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 68px 18px 22px; }
.reelview-stage { display: flex; align-items: center; justify-content: center; min-width: 0; }
.reelview-media { display: block; width: 100%; height: 100%; max-height: calc(100vh - 96px); background: #0b0b0f; border-radius: 14px; overflow: hidden; }
.reelview-media img, .reelview-media video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The right-hand column is a white sheet that floats beside the black stage:
   gradient head, pill actions and an inset thread, so the reel and its
   conversation read as two clearly different things. */
.reelview-info { align-self: center; min-width: 0; max-height: calc(100vh - 120px); overflow-y: auto; overflow-x: hidden; padding: 0 16px 16px; background: #fff; color: #1f2328; border-radius: 20px; border: 1px solid #e8eaed; box-shadow: 0 22px 48px rgba(0,0,0,0.40); }
.reelview-info::-webkit-scrollbar { width: 6px; }
.reelview-info::-webkit-scrollbar-thumb { background: #d5d9de; border-radius: 999px; }
.reelview-info::-webkit-scrollbar-track { background: transparent; }

.reelview-info .reel-author { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; margin: 0 -16px 14px; padding: 14px 16px; background: linear-gradient(120deg, #4f46e5 0%, #a855f7 52%, #ec4899 100%); border-radius: 20px 20px 0 0; }
.reelview-info .reel-author > span { display: flex; flex-direction: column; }
.reelview-info .reel-author strong { color: #fff; }
.reelview-info .reel-author .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.7); flex: none; }
.reelview-time { font-size: 0.78rem; color: rgba(255,255,255,0.85); }

.reelview-info .reel-caption { color: #1f2328; margin: 0 0 14px; line-height: 1.55; font-size: 0.95rem; }

.reelview-info .reel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.reelview-info .reel-actions > .reel-like, .reelview-info .reel-actions > .reel-comment-toggle { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; font-size: 0.85rem; cursor: pointer; padding: 7px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.reelview-info .reel-actions > .reel-like:hover, .reelview-info .reel-actions > .reel-comment-toggle:hover { background: #eceef1; }
.reelview-info .reel-actions > .reel-like.liked { background: #fef2f2; border-color: #fecaca; color: #ef4444; }
.reelview-info .muted { color: #6b7280; }

/* The thread is an inset tray rather than another floating panel. */
.reelview-info .reel-comments { flex: none; width: auto; margin: 0; padding: 12px; background: #f8f9fb; border: 1px solid #e8eaed; border-radius: 14px; max-height: 42vh; gap: 8px; }
.reelview-info .reel-comment { color: #1f2328; }
.reelview-info .reel-comment-text { color: #4b5563; }
.reelview-info .reel-comment-empty { color: #6b7280; }
.reelview-info .reel-comment-input input { background: #fff; border: 1px solid #e5e7eb; color: #1f2328; }
.reelview-info .reel-comment-input input:focus { background: #fff; border-color: #c7cbd1; }
.reelview-info .reel-comment-tools button { color: #9ca3af; }
.reelview-info .reel-comment-tools button:hover { background: #eceef1; color: #1f2328; }
.reelview-info .reel-comment-field { background: #fff; border-color: #d5d9de; color: #1f2328; }
.reelview-info .reel-caption-field { background: #fff; border-color: #d5d9de; color: #1f2328; }
.reelview-info .btn-ghost { color: #374151; border-color: #e5e7eb; background: #fff; }
.reelview-info .btn-ghost:hover { background: #f3f4f6; }
/* The same menu, dressed for the white sheet. */
.reelview-info .reel-menu-wrap { margin-left: auto; }
.reelview-info .reel-menu-toggle { color: #6b7280; }
.reelview-info .reel-menu-toggle:hover, .reelview-info .reel-menu-toggle[aria-expanded="true"] { background: #f3f4f6; color: #1f2328; }
.reelview-info .reel-menu { background: #fff; border-color: #e5e7eb; box-shadow: 0 16px 36px rgba(17,20,28,0.18); }
.reelview-info .reel-menu-item { color: #374151; }
.reelview-info .reel-menu-item:hover { background: #f3f4f6; }
.reelview-info .reel-menu-item.reel-delete { color: #dc2626; }
.reelview-info .reel-menu-item.reel-delete:hover { background: #fef2f2; }
.reelview-info .reel-menu-item.is-on { color: #16a34a; }
.reelview-info .reel-menu-item.is-on:hover { background: #f0fdf4; }

/* Volume read-out for the keyboard controls; it appears while the arrows are
   in use and fades once the level is settled. */
.reel-volume-hud { position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: rgba(12,14,20,0.92); color: #fff; font-size: 0.82rem; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60; }
.reel-volume-hud.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.reel-volume-bar { width: 90px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.22); overflow: hidden; }
.reel-volume-fill { display: block; height: 100%; width: 50%; background: #fff; border-radius: 999px; transition: width .15s ease; }
.reel-volume-hud em { font-style: normal; min-width: 40px; text-align: right; font-weight: 700; }

/* Sound toggle, parked in the top-left corner of the player so it is always
   one click away without opening the native controls. */
.reel-sound-btn { position: fixed; top: 62px; left: 14px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(12,14,20,0.62); color: #fff; border: 1px solid rgba(255,255,255,0.24); cursor: pointer; z-index: 62; backdrop-filter: blur(6px); }
.reel-sound-btn:hover { background: rgba(12,14,20,0.88); }
.reel-sound-btn.is-muted { color: #ff6b6b; }

.reelview-nav { position: absolute; left: 50%; transform: translateX(-50%); z-index: 4; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.reelview-prev { top: 62px; }
.reelview-next { bottom: 18px; }
.reelview-nav:hover { background: rgba(0,0,0,0.8); }

@media (max-width: 900px) {
  .reelview-slide { grid-template-columns: minmax(0, 1fr); padding: 64px 12px 18px; }
  .reelview-info { max-height: 34vh; }
  .reelview-media { max-height: 52vh; }
  .reelview-nav { display: none; }
  .landing-hero { padding: 22px 18px; }
  .landing-hero h1 { font-size: 1.55rem; }
  .landing-search { flex-wrap: wrap; }
  .landing-search select { max-width: none; }
}

/* Guest top bar responsive behaviour. The labels collapse to icons well before
   the icon-box breakpoints kick in, so the three pills plus the CTA never
   collide with the logo or the search field. */
@media (max-width: 1100px) {
  .topbar .nav-pill { padding: 0 11px; }
  .topbar .nav-pill .nav-label { display: none; }
  .topbar .nav-pill { width: 40px; padding: 0; }
}
@media (max-width: 640px) {
  .topbar .nav-pill { width: 40px; height: 40px; font-size: 1.1rem; }
  .topbar .nav-pill i { font-size: 1.15rem; }
  .topbar-cta { padding: 8px 12px; }
  .topbar-cta .cta-full { display: none; }
  .topbar-cta .cta-short { display: inline; }
}
@media (max-width: 420px) {
  .topbar-nav-guest { gap: 0; }
}

/* The public page sidebar reuses .sidebar-left, so the existing
   `body.sidebar-open .sidebar-left` drawer rule and the hamburger in
   main.js work for signed-out visitors too, with no extra JavaScript. */
@media (max-width: 1024px) {
  .layout-public { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   Sign-in / create-account card.

   The guest sidebar, the landing hero and the closing band all render
   partials/authCard.ejs, so the primary action is always "Create account",
   the secondary one is always "Sign in", and the live counters read the
   same everywhere.
   ================================================================== */
.authbox {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card, var(--bg-2));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A slow brand-tinted sheen along the top edge. Purely decorative, and it
   is the only motion on a page that already has plenty going on. */
.authbox::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fb-blue), #8b5cf6, var(--fb-blue));
  background-size: 220% 100%;
  animation: authbox-sheen 7s linear infinite;
}
@keyframes authbox-sheen {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}

.authbox-head h2 {
  margin: 0 0 4px;
  font-size: 1.12rem;
}
.authbox-head h2 i { color: var(--fb-blue); margin-right: 6px; }
.authbox-head p { margin: 0; font-size: 0.88rem; color: var(--text-2); }

.authbox-actions { display: flex; flex-direction: column; gap: 8px; }

/* Primary and secondary share one shape; only weight and fill differ, which
   is what keeps a screen full of CTAs from turning into a wall of buttons. */
/* Compact by default: the card sits next to a paragraph of copy, so the two
   buttons should read as a tidy pair rather than two slabs. `position` and
   `overflow` are here for the shine sweep on the primary. */
.authbox-primary,
.authbox-secondary {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  min-height: 38px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease,
              border-color 0.16s ease, color 0.16s ease;
}
.authbox-primary > i,
.authbox-secondary > i { transition: transform 0.16s ease; }

.authbox-primary {
  background: linear-gradient(135deg, #1a8bf0 0%, var(--fb-blue) 55%, #1466c4 100%);
  background-size: 160% 100%;
  background-position: 0% 0;
  color: #fff;
  border: 1px solid transparent;
}
.authbox-primary:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 119, 211, 0.32);
}
.authbox-primary:hover > i { transform: translateX(2px); }

/* A single pass of light across the primary on hover. */
.authbox-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: left 0.45s ease, opacity 0.2s ease;
}
.authbox-primary:hover::after { left: 115%; opacity: 1; }

.authbox-secondary {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.authbox-secondary:hover {
  background: var(--hover);
  border-color: var(--fb-blue);
  color: var(--fb-blue);
  transform: translateY(-1px);
}
.authbox-secondary:hover > i { transform: translateX(2px); }

/* Pressed state: settle back down instead of floating. */
.authbox-primary:active,
.authbox-secondary:active { transform: translateY(0) scale(0.985); box-shadow: none; }

.authbox-primary:focus-visible,
.authbox-secondary:focus-visible {
  outline: 2px solid var(--fb-blue);
  outline-offset: 2px;
}

/* Used where a section needs the same two buttons but only as a pair. */
.authbox-inline { padding: 9px 18px; }

.authbox-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.authbox-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.4;
}
.authbox-perks i { color: #16a34a; margin-top: 2px; font-size: 0.8rem; }

/* Live counters. The room count carries a pulsing dot so the card reads as
   current without needing a refresh. */
.authbox-stats {
  display: flex;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  gap: 8px;
  text-align: center;
}
.authbox-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.authbox-stat strong { font-size: 1.02rem; line-height: 1.2; }
.authbox-stat span { font-size: 0.74rem; color: var(--text-2); }
.authbox-stat-live { position: relative; }
.authbox-stat-live .authbox-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 5px;
  vertical-align: middle;
  animation: authbox-pulse 1.6s ease-in-out infinite;
}
@keyframes authbox-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

/* Wide variant for the landing hero: buttons sit side by side, perks run
   across, counters spread out. */
.authbox-hero { padding: 22px; gap: 16px; }
.authbox-hero .authbox-actions { flex-direction: row; }
.authbox-hero .authbox-actions > a { flex: 1 1 0; }
.authbox-hero .authbox-perks { gap: 8px; }

/* Horizontal variant for a closing band. */
.authbox-band {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.authbox-band .authbox-actions { flex-direction: row; flex: 0 0 auto; }
.authbox-band .authbox-perks,
.authbox-band .authbox-stats { display: none; }

@media (max-width: 560px) {
  .authbox-hero { padding: 18px; }
  .authbox-hero .authbox-actions { flex-direction: column; }
}

/* A finger needs a bigger target than a cursor, so the compact desktop size
   is bumped back to a comfortable 44px wherever the pointer is coarse. */
@media (pointer: coarse) {
  .authbox-primary,
  .authbox-secondary { min-height: 44px; padding: 11px 18px; }
}

/* Anything that moves stops moving for people who asked the system not to
   animate - the buttons keep their colours and borders, just no travel,
   shine or pulse. */
@media (prefers-reduced-motion: reduce) {
  .authbox::before,
  .authbox-stat-live .authbox-dot { animation: none; }
  .authbox-primary,
  .authbox-secondary,
  .authbox-primary > i,
  .authbox-secondary > i { transition: none; }
  .authbox-primary:hover,
  .authbox-secondary:hover { transform: none; }
  .authbox-primary:hover > i,
  .authbox-secondary:hover > i { transform: none; }
  .authbox-primary::after { display: none; }
}

/* The guest column no longer carries the sign-in card - the top bar has the
   auth buttons - so nothing extra is styled between the links and the
   footer. The card itself is still used by the landing hero. */

/* Signed-in visitors keep their own name at the top of the column. */
.sidebar-me { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sidebar-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A live-room count next to Voice Rooms, same badge the home sidebar uses. */
.sidebar-menu li a .sidebar-live { margin-left: auto; }

/* ==================================================================
   Gigs - the freelance services marketplace
   ================================================================== */

/* .gig-banner-actions went away with the banner on gigs.ejs; .btn-share-* is
   still used by the Gigs dashboard, orders and form pages, so it stays. */
.btn-share-primary { background: var(--fb-blue); border-color: var(--fb-blue); color: #fff; }
.btn-share-primary:hover { background: #1877d3; color: #fff; }
.btn-share-sm { padding: 6px 11px; font-size: 0.82rem; }
.btn-share-danger { color: #ef4444; border-color: #fca5a5; }
.btn-share-danger:hover { background: #fef2f2; color: #dc2626; }
.inline-form { display: inline; }

/* The browse page used to render the rail and the results inside this grid.
   The rail now sits in .gigs-railcol above, so this is dead weight: keeping
   it would only tempt the results back into a 268px column. */

/* ---- Category rail ---- */
.gigs-rail { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; padding: 14px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.gigs-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.gigs-rail-head h2 { margin: 0; font-size: 0.98rem; }
.gigs-rail-count { font-size: 0.74rem; color: var(--text-2); }
.gigs-rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 9px; color: var(--text-1); font-size: 0.875rem; text-decoration: none; }
.gigs-rail-item:hover { background: var(--hover); }
.gigs-rail-item.on { background: rgba(24,119,211,0.10); color: var(--fb-blue); font-weight: 600; }
.gigs-rail-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gigs-rail-label i { width: 16px; text-align: center; flex: none; }
.gigs-rail-n { font-size: 0.74rem; color: var(--text-2); background: var(--hover); border-radius: 20px; padding: 1px 7px; flex: none; }
.gigs-rail-open { border-left: 2px solid rgba(24,119,211,0.35); padding-left: 6px; margin-left: 8px; }
/* The subcategories sit behind a fold on each category row. */
.gigs-rail-cat { border-radius: 9px; }
.gigs-rail-row { display: flex; align-items: center; gap: 3px; }
.gigs-rail-row .gigs-rail-item { flex: 1; min-width: 0; }
.gigs-rail-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: 0.72rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.gigs-rail-toggle:hover { background: var(--hover); color: var(--text-1); }
.gigs-rail-cat.open .gigs-rail-toggle { transform: rotate(180deg); color: var(--fb-blue); }
.gigs-rail-body { display: none; }
.gigs-rail-cat.open .gigs-rail-body { display: block; }
.gigs-rail-blurb { margin: 4px 10px 8px; font-size: 0.78rem; color: var(--text-2); line-height: 1.45; }
.gigs-rail-groups { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gigs-rail-group { padding: 5px 9px; border-radius: 7px; font-size: 0.8rem; color: var(--text-2); text-decoration: none; }
.gigs-rail-group:hover { background: var(--hover); color: var(--text-1); }
.gigs-rail-group.on { color: var(--fb-blue); font-weight: 600; }

/* ---- Search + filters ---- */
.gigs-search { display: flex; gap: 8px; margin-bottom: 12px; }
.gigs-search-field { position: relative; flex: 1; }
.gigs-search-field i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.gigs-search-field input { width: 100%; padding: 12px 14px 12px 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, var(--bg-2)); color: var(--text-1); font-size: 0.92rem; }
.gigs-search-field input:focus { outline: none; border-color: var(--fb-blue); box-shadow: 0 0 0 4px rgba(24,119,211,0.12); }

.gigs-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 13px; background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; }
.gigs-filter { display: flex; align-items: center; gap: 6px; }
.gigs-filter label { font-size: 0.8rem; color: var(--text-2); }
.gigs-filter select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-1, var(--bg)); color: var(--text-1); font-size: 0.84rem; }
.gigs-check { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-1); cursor: pointer; }
.gigs-filter-go { margin-left: auto; padding: 7px 15px; border: none; border-radius: 8px; background: var(--fb-blue); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.gigs-filter-go:hover { background: #1877d3; }

.gigs-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.gigs-results-n { margin: 0; font-size: 0.9rem; color: var(--text-2); }
.gigs-clear { font-size: 0.84rem; color: var(--fb-blue); text-decoration: none; }
.gigs-clear:hover { text-decoration: underline; }

/* ---- Grid + card ---- */
.gigs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(216px, 100%), 1fr)); gap: 16px; }
.gig-card { display: flex; flex-direction: column; background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text-1); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.gig-card:hover { transform: translateY(-3px); border-color: rgba(24,119,211,0.45); box-shadow: 0 12px 28px rgba(15,23,42,0.13); }

.gig-thumb { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eef2ff, #f8fafc); overflow: hidden; }
.gig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-thumb-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.9rem; color: #94a3b8; }
.gig-rating { position: absolute; left: 8px; bottom: 8px; background: rgba(15,23,42,0.78); color: #fff; font-size: 0.74rem; padding: 2px 7px; border-radius: 20px; backdrop-filter: blur(4px); }
.gig-rating i { color: #fbbf24; }

.gig-body { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 13px; flex: 1; }
.gig-seller { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); }
.gig-seller-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig-seller-loc { margin-left: auto; flex: none; }
.gig-title { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gig-cat { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-2); }
.gig-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-2); }
.gig-price { font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
.gig-delivery i { color: var(--fb-blue); }
.gig-sold i { color: #22c55e; }

/* ---- Detail ---- */
.gig-detail-wrap { max-width: 1180px; margin: 0 auto; }
.gig-crumb { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-2); margin-bottom: 14px; flex-wrap: wrap; }
.gig-crumb a { color: var(--text-2); text-decoration: none; }
.gig-crumb a:hover { color: var(--fb-blue); text-decoration: underline; }
.gig-crumb i { font-size: 0.62rem; }

.gig-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 24px; align-items: start; }
.gig-detail-main { min-width: 0; }
/* The cover is the hero: full width of the offer column, with the title and
   every detail stacked underneath it instead of squeezed to its right. */
.gig-detail-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.gig-detail-media { width: 100%; flex: none; aspect-ratio: 16 / 9; max-height: 440px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #eef2ff, #f8fafc); box-shadow: 0 8px 26px rgba(15, 23, 42, .10); }
.gig-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-detail-media-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: #94a3b8; }
.gig-detail-media-ph i { font-size: 3.6rem; }
.gig-detail-media-ph span { font-size: 0.95rem; }

.gig-detail-cat { display: flex; align-items: center; gap: 7px; font-size: 0.84rem; color: var(--fb-blue); font-weight: 600; margin-bottom: 10px; flex-wrap: wrap; }
.gig-detail-title { margin: 0 0 10px; font-size: 24px; line-height: 1.24; }
.gig-detail-seller { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-1); margin-bottom: 12px; }
.gig-detail-seller small { display: block; font-size: 0.76rem; color: var(--text-2); }
/* Seller level sits where the location used to be, right under the name. */
.gig-seller-level { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.gig-seller-level.is-new { color: var(--fb-blue); }
.gig-seller-level.is-level1 { color: var(--text-2); }
.gig-seller-level.is-level2 { color: #0ea5e9; }
.gig-seller-level.is-top { color: #f59e0b; }
.gig-detail-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.84rem; color: var(--text-2); }
.gig-stat { display: inline-flex; align-items: center; gap: 5px; }
.gig-stars { color: #fbbf24; letter-spacing: 1px; font-size: 0.82rem; }
.gig-stat-new { color: #22c55e; font-weight: 600; }
.gig-detail-dot { color: var(--text-2); }

.gig-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gig-tag { font-size: 0.76rem; padding: 3px 9px; border-radius: 20px; background: var(--hover); color: var(--text-2); text-decoration: none; }
.gig-tag:hover { color: var(--fb-blue); }

.gig-block { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.gig-block-h { margin: 0 0 12px; font-size: 1.05rem; display: flex; align-items: center; gap: 9px; }
.gig-block-n { font-size: 0.8rem; font-weight: 500; color: var(--text-2); background: var(--hover); border-radius: 20px; padding: 1px 8px; }
.gig-prose { font-size: 0.93rem; line-height: 1.66; color: var(--text-1); }
.gig-prose p { margin: 0 0 10px; }
.gig-prose p:last-child { margin-bottom: 0; }
.gig-prose a { color: var(--fb-blue); }
.gig-muted { font-size: 0.88rem; color: var(--text-2); margin: 0 0 10px; }

.gig-faqs { display: flex; flex-direction: column; gap: 8px; }
.gig-faq { border: 1px solid var(--border); border-radius: 10px; padding: 0 13px; }
.gig-faq summary { cursor: pointer; padding: 11px 0; font-size: 0.9rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.gig-faq summary::-webkit-details-marker { display: none; }
.gig-faq summary::after { content: '\f078'; font-size: 0.7rem; color: var(--text-2); flex: none; }
.gig-faq[open] summary::after { content: '\f077'; }
.gig-faq p { margin: 0 0 12px; font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }

/* ---- Reviews ---- */
.gig-reviews-empty { padding: 26px; text-align: center; color: var(--text-2); }
.gig-reviews-empty i { font-size: 1.9rem; opacity: 0.5; }
.gig-review-summary { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.gig-review-summary strong { font-size: 2.2rem; line-height: 1; }
.gig-review-summary small { color: var(--text-2); font-size: 0.8rem; }
.gig-reviews { display: flex; flex-direction: column; gap: 15px; }
.gig-review { display: flex; gap: 11px; }
.gig-review-body { flex: 1; min-width: 0; }
.gig-review-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.86rem; }
.gig-review-head small { color: var(--text-2); font-size: 0.76rem; }
.gig-review-text { margin: 5px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-1); }
.gig-review-boxed { border: 1px solid var(--border); border-radius: 12px; padding: 14px; }

/* ---- Package card ---- */
.gig-detail-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; }
.gig-package-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.gig-package-tabs { display: flex; border-bottom: 1px solid var(--border); }
.gig-package-tab { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 11px 6px; border: none; background: transparent; cursor: pointer; font-size: 0.76rem; color: var(--text-2); border-bottom: 2px solid transparent; transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease; }
.gig-package-tab strong { font-size: 0.9rem; color: var(--text-1); }
.gig-package-tab:hover { background: var(--hover); }
.gig-package-tab.on { color: var(--fb-blue); border-bottom-color: var(--fb-blue); background: rgba(24,119,211,0.06); }
.gig-package-tab.on strong { color: var(--fb-blue); }

.gig-package-panel { display: none; padding: 16px 18px; }
.gig-package-panel.on { display: block; }
.gig-package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gig-package-head h3 { margin: 0 0 3px; font-size: 1rem; }
.gig-package-head p { margin: 0; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
.gig-package-price strong { font-size: 1.3rem; white-space: nowrap; }
.gig-package-facts { display: flex; gap: 15px; margin: 13px 0; padding: 11px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.84rem; color: var(--text-2); }
.gig-package-facts i { color: var(--fb-blue); margin-right: 4px; }
.gig-package-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; }
.gig-package-features i { color: #22c55e; margin-right: 6px; }
.gig-package-none { padding: 26px; text-align: center; color: var(--text-2); }
.gig-package-none i { font-size: 1.7rem; opacity: 0.5; }

.gig-order-box { padding: 16px 18px; border-top: 1px solid var(--border); background: var(--hover); }
.gig-order-form { display: flex; flex-direction: column; gap: 7px; }
.gig-qty-label { font-size: 0.8rem; color: var(--text-2); font-weight: 600; }
.gig-qty-row { display: flex; gap: 8px; }
.gig-qty { padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card, var(--bg-2)); color: var(--text-1); font-size: 0.88rem; flex: none; }
.gig-pkg-select, .gig-req { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--card, var(--bg-2)); color: var(--text-1); font-size: 0.88rem; font-family: inherit; }
.gig-req { resize: vertical; }
.gig-pkg-select:focus, .gig-qty:focus, .gig-req:focus { outline: none; border-color: var(--fb-blue); box-shadow: 0 0 0 3px rgba(24,119,211,0.12); }

/* The total sits above the commit button so the price is never a surprise. */
.gig-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; padding: 10px 12px; background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 10px; }
.gig-total-row span { font-size: 0.8rem; color: var(--text-2); font-weight: 600; }
.gig-total-row strong { font-size: 1.12rem; }
.gig-req-req { margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: rgba(239,68,68,0.12); color: #ef4444; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; vertical-align: middle; }
.gig-order-note { margin: 9px 0 0; font-size: 0.8rem; }

.gig-order-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border: none; border-radius: 10px; background: var(--fb-blue); color: #fff; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; }
.gig-order-btn:hover { background: #1877d3; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(24,119,211,0.3); }
.gig-order-btn:disabled { background: var(--border); color: var(--text-2); cursor: not-allowed; transform: none; box-shadow: none; }
.gig-order-owner { background: #7c3aed; }
.gig-order-owner:hover { background: #6d28d9; }
.gig-order-danger { background: #ef4444; }
.gig-order-danger:hover { background: #dc2626; box-shadow: 0 7px 18px rgba(239,68,68,0.3); }
.gig-order-alt { display: block; margin-top: 9px; text-align: center; font-size: 0.84rem; color: var(--fb-blue); text-decoration: none; }
.gig-order-alt:hover { text-decoration: underline; }

/* ---- Seller card ---- */
.gig-seller-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.gig-seller-card-top { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text-1); }
.gig-seller-card-top small { display: block; font-size: 0.78rem; color: var(--text-2); }
.gig-seller-card-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-2); }
.gig-seller-card-facts i { color: var(--fb-blue); }
.gig-seller-more { margin-top: 13px; }
.gig-seller-more h4 { margin: 0 0 7px; font-size: 0.8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
.gig-seller-more-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.84rem; color: var(--text-1); text-decoration: none; }
.gig-seller-more-row:hover { color: var(--fb-blue); }
.gig-seller-more-row strong { white-space: nowrap; font-size: 0.8rem; }

/* .gig-safe-note styled a note that sat above the
   gig sidebar. It was removed from gigDetail.ejs on request, so the rule went
   with it; login.ejs still carries its own auth-disclaimer line. */

.gig-related { margin-top: 28px; }
.gig-related-h { margin: 0 0 14px; font-size: 1.1rem; }

/* ---- Form ---- */
.gig-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 20px; align-items: start; }
.gig-form-main, .gig-form-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gig-form-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.gig-form-card h2 { margin: 0 0 6px; font-size: 1.02rem; display: flex; align-items: center; gap: 9px; }
.gig-form-card h2 i { color: var(--fb-blue); }
.gig-form-hint { margin: 0 0 15px; font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }
.gig-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gig-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gig-field:last-child { margin-bottom: 0; }
.gig-label { font-size: 0.83rem; font-weight: 600; color: var(--text-1); }
.gig-label b { color: #ef4444; }
.gig-label-hint { font-size: 0.77rem; color: var(--text-2); line-height: 1.45; }
.gig-picker { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.gig-pkg-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px 4px; margin: 0 0 15px; }
.gig-pkg-fieldset legend { font-size: 0.83rem; font-weight: 700; padding: 0 7px; color: var(--fb-blue); text-transform: uppercase; letter-spacing: 0.4px; }
.gig-faq-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; margin-bottom: 9px; }
.gig-form-save { position: sticky; top: 12px; }
.gig-save-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px 16px; border: none; border-radius: 10px; font-size: 0.93rem; font-weight: 600; cursor: pointer; margin-bottom: 9px; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; }
.gig-save-live { background: var(--fb-blue); color: #fff; }
.gig-save-live:hover { background: #1877d3; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(24,119,211,0.3); }
.gig-save-draft { background: var(--hover); color: var(--text-1); border: 1px solid var(--border); }
.gig-save-draft:hover { background: var(--border); }
.gig-save-note { margin: 0; font-size: 0.78rem; color: var(--text-2); line-height: 1.5; }
.gig-save-note code { font-size: 0.74rem; }
.alert-list { margin: 8px 0 0; padding-left: 20px; font-size: 0.87rem; }

/* ---- Dashboard ---- */
.gig-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 12px; margin-bottom: 22px; }
.gig-stat-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 3px; }
.gig-stat-card-n { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.gig-stat-card-l { font-size: 0.78rem; color: var(--text-2); }

.gig-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.gig-dash-h { margin: 0 0 12px; font-size: 1.02rem; }
.gig-dash-row { display: flex; gap: 14px; padding: 15px; background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; align-items: flex-start; }
.gig-dash-thumb { width: 116px; flex: none; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eef2ff, #f8fafc); display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.5rem; }
.gig-dash-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gig-dash-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gig-dash-title { font-size: 0.96rem; font-weight: 600; color: var(--text-1); text-decoration: none; }
.gig-dash-title:hover { color: var(--fb-blue); }
.gig-dash-path { font-size: 0.79rem; color: var(--text-2); }
.gig-dash-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; font-size: 0.79rem; color: var(--text-2); }
.gig-dash-slug { font-size: 0.72rem; color: var(--text-2); background: var(--hover); padding: 2px 7px; border-radius: 6px; align-self: flex-start; word-break: break-all; }
.gig-dash-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }

.gig-badge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 20px; }
.gig-badge-active { background: rgba(34,197,94,0.14); color: #16a34a; }
.gig-badge-draft { background: rgba(148,163,184,0.20); color: #64748b; }
.gig-badge-paused { background: rgba(245,158,11,0.16); color: #d97706; }

.gig-dash-side { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; position: sticky; top: 12px; }
.gig-dash-empty { font-size: 0.86rem; color: var(--text-2); margin: 0 0 6px; }
.gig-dash-order { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-1); }
.gig-dash-order-t { font-size: 0.87rem; font-weight: 600; }
.gig-dash-order-m { font-size: 0.77rem; color: var(--text-2); }
.gig-dash-order:hover .gig-dash-order-t { color: var(--fb-blue); }
.gig-dash-more { display: inline-block; margin-top: 9px; font-size: 0.82rem; color: var(--fb-blue); text-decoration: none; }

/* ---- Orders ---- */
.gig-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.gig-tab { display: flex; align-items: center; gap: 7px; padding: 10px 15px; font-size: 0.9rem; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.gig-tab:hover { color: var(--text-1); }
.gig-tab.on { color: var(--fb-blue); border-bottom-color: var(--fb-blue); font-weight: 600; }

.gig-orders { display: flex; flex-direction: column; gap: 11px; }
.gig-order-row { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 13px; text-decoration: none; color: var(--text-1); transition: border-color 0.14s ease, transform 0.14s ease; }
.gig-order-row:hover { border-color: rgba(24,119,211,0.45); transform: translateX(2px); }
.gig-order-thumb { width: 76px; flex: none; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #eef2ff, #f8fafc); display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.gig-order-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gig-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gig-order-no { font-size: 0.73rem; color: var(--text-2); font-family: ui-monospace, monospace; }
.gig-order-t { font-size: 0.94rem; }
.gig-order-m { font-size: 0.79rem; color: var(--text-2); }
.gig-order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.gig-order-badge { font-size: 0.74rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; color: var(--badge); background: color-mix(in srgb, var(--badge) 14%, transparent); }
.gig-order-price { font-size: 0.95rem; font-weight: 700; }
.gig-order-date { font-size: 0.75rem; color: var(--text-2); }

/* ---- Order detail ---- */
.gig-order-detail { max-width: 1080px; margin: 0 auto; }
.gig-od-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.gig-od-no { font-size: 0.8rem; color: var(--text-2); font-family: ui-monospace, monospace; }
.gig-od-head h1 { margin: 4px 0 10px; font-size: 1.35rem; line-height: 1.3; }
.gig-od-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.83rem; color: var(--text-2); }
.gig-od-total { text-align: right; flex: none; }
.gig-od-total small { display: block; font-size: 0.78rem; color: var(--text-2); }
.gig-od-total strong { font-size: 1.55rem; }
.gig-od-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.gig-od-side { display: flex; flex-direction: column; gap: 14px; }
.gig-od-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 13px; padding: 15px 17px; }
.gig-od-card h3 { margin: 0 0 11px; font-size: 0.95rem; }
.gig-od-form { display: flex; flex-direction: column; gap: 8px; }
.gig-od-form .field { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-1, var(--bg)); color: var(--text-1); font-size: 0.87rem; font-family: inherit; }
.gig-od-form textarea.field { resize: vertical; }
.gig-od-person { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text-1); padding: 7px 0; }
.gig-od-person small { display: block; font-size: 0.74rem; color: var(--text-2); }
.gig-od-person strong { font-size: 0.88rem; }
.gig-od-facts { display: flex; flex-direction: column; gap: 8px; font-size: 0.84rem; color: var(--text-2); }
.gig-od-facts i { color: var(--fb-blue); margin-right: 5px; }
.gig-delivery-box { padding: 14px 16px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); border-radius: 12px; }
.gig-delivery-when { margin: 0 0 9px; font-size: 0.86rem; font-weight: 600; color: #16a34a; }
.gig-delivery-link { display: inline-block; margin-top: 10px; font-size: 0.85rem; color: var(--fb-blue); }

/* ---- Seller gate ---- */
.gig-gate { display: flex; justify-content: center; padding: 34px 0; }
.gig-gate-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 18px; padding: 30px 32px; max-width: 470px; text-align: center; }
.gig-gate-icon { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; background: rgba(24,119,211,0.12); color: var(--fb-blue); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.gig-gate-card h1 { margin: 0 0 10px; font-size: 1.45rem; }
.gig-gate-card > p { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; }
.gig-gate-list { list-style: none; margin: 18px 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.gig-gate-list li { font-size: 0.87rem; color: var(--text-1); }
.gig-gate-list i { color: #22c55e; margin-right: 8px; }
.gig-gate-actions { margin: 20px 0 14px; }

/* ---- Sign-up role picker ---- */
.auth-role { border: none; padding: 0; margin: 0 0 14px; }
.auth-role legend { font-size: 0.84rem; font-weight: 600; color: var(--text-2); padding: 0; margin-bottom: 9px; }
.auth-role-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease; }
.auth-role-opt:hover { background: var(--hover); }
.auth-role-opt input { margin-top: 3px; flex: none; }
.auth-role-opt:has(input:checked) { border-color: var(--fb-blue); background: rgba(24,119,211,0.07); }
.auth-role-body strong { display: block; font-size: 0.9rem; color: var(--text-1); }
.auth-role-body strong i { color: var(--fb-blue); margin-right: 5px; }
.auth-role-body small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-2); }

/* "Full width" here means exactly as wide as the navbar above it, which is
   what .main-container already gives (1280px, 16px padding - identical to
   .topbar-inner). So no max-width override: the page just has to USE that
   width. The gig grid is wider than the rail it sits next to, and it
   auto-fits its cards, so the extra room becomes another column of results
   instead of stretched ones. */
body.page-gigs-full .layout-gigs { grid-template-columns: 300px minmax(0, 1fr); }

/* Nav first, categories under it, in a single left stack. The two used to be
   separate columns, which put "where am I" and "what else is there" in
   different places. */
.gigs-railcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gigs-railcol .sidebar-left { position: static; }
.gigs-railcol .gigs-rail { position: static; max-height: none; overflow: visible; }

/* Phone-only collapse for the category rail: one bar above the results that
   opens the full rail, so the list stops filling the first screen. */
.gigs-rail-toggle-btn {
  display: none; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px; background: var(--card, var(--bg-2));
  border: 1px solid var(--border); border-radius: 12px;
  font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--text-1);
  cursor: pointer;
}
.gigs-rail-toggle-btn:hover { background: var(--hover); }
.gigs-rail-toggle-btn .gigs-rail-toggle-n { color: var(--text-2); font-weight: 500; font-size: 0.8rem; }
.gigs-rail-toggle-btn .gigs-rail-toggle-caret { margin-left: auto; transition: transform 0.15s ease; }
.gigs-rail-toggle-btn[aria-expanded="true"] .gigs-rail-toggle-caret { transform: rotate(180deg); }

/* The results are the only child now, so they get the whole right column. */
.gigs-results-wrap { min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
body.page-gigs-full .layout-gigs { grid-template-columns: 250px minmax(0, 1fr); }
  .gig-detail-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .gig-form-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .gig-dash-grid { grid-template-columns: minmax(0, 1fr) 268px; }
}
@media (max-width: 900px) {
  body.page-gigs-full .layout-gigs { grid-template-columns: minmax(0, 1fr); }
  .gigs-railcol .gigs-rail { max-height: 340px; overflow-y: auto; }
  .gigs-rail { position: static; max-height: 320px; }
  .gig-detail-grid,
  .gig-form-grid,
  .gig-dash-grid,
  .gig-od-grid { grid-template-columns: minmax(0, 1fr); }
  .gig-detail-side,
  .gig-form-save,
  .gig-dash-side { position: static; }
}
@media (max-width: 760px) {
  .gigs-rail-toggle-btn { display: flex; }
  .gigs-railcol .gigs-rail { display: none; max-height: none; overflow: visible; }
  .gigs-railcol.rail-open .gigs-rail { display: block; }
}
@media (max-width: 640px) {
  .gig-detail-head { flex-direction: column; }
  .gig-detail-media { width: 100%; }
  .gig-package-facts { flex-direction: column; gap: 7px; }
  .gig-form-row, .gig-faq-row { grid-template-columns: 1fr; }
  .gig-dash-row { flex-direction: column; }
  .gig-dash-thumb { width: 100%; }
  .gig-dash-actions { flex-direction: row; flex-wrap: wrap; }
  .gig-order-row { flex-wrap: wrap; }
  .gig-order-right { align-items: flex-start; text-align: left; width: 100%; padding-top: 9px; border-top: 1px solid var(--border); }
  .gig-filter-go { margin-left: 0; }
  .gig-gate-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .gig-card, .gig-package-tab, .gig-order-btn, .gig-order-row, .gig-save-btn, .gig-filter-go { transition: none; }
  .gig-card:hover, .gig-order-btn:hover, .gig-order-row:hover, .gig-save-btn:hover { transform: none; }
}

/* ================================================================== *
   Seller onboarding - /gigs/sell/:step

   A two column wizard: the rail is the step list, the card is whatever
   lib/sellerOnboarding.js says the current step asks for. Rail states are
   driven by classes from the view (done / on), so nothing here needs to know
   how many steps there are.
   ================================================================== */
.onb-wrap { max-width: 900px; }
.onb-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.onb-head-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgba(24,119,211,0.12); color: var(--fb-blue); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.onb-head h1 { margin: 0 0 3px; font-size: 1.35rem; }
.onb-head p { margin: 0; font-size: 0.87rem; color: var(--text-2); }
.onb-head-pct { margin-left: auto; text-align: right; line-height: 1.2; }
.onb-head-pct b { display: block; font-size: 1.25rem; color: var(--fb-blue); }
.onb-head-pct span { font-size: 0.73rem; color: var(--text-2); }
.onb-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; margin-bottom: 18px; }
.onb-bar i { display: block; height: 100%; border-radius: 99px; background: var(--fb-blue); transition: width 0.25s ease; }
.onb-alert { margin-bottom: 16px; }
.onb-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 18px; align-items: start; }
.onb-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.onb-rail-item a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 0.86rem; }
.onb-rail-item a:hover { background: var(--hover, rgba(0,0,0,0.03)); color: var(--text-1); }
.onb-rail-n { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--border); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; }
.onb-rail-item.done .onb-rail-n { background: #22c55e; color: #fff; }
.onb-rail-item.on a { background: rgba(24,119,211,0.10); color: var(--fb-blue); font-weight: 600; }
.onb-rail-item.on .onb-rail-n { background: var(--fb-blue); color: #fff; }
.onb-card { background: var(--card, var(--bg-2)); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
.onb-card h2 { margin: 0 0 6px; font-size: 1.12rem; }
.onb-card h2 i { color: var(--fb-blue); margin-right: 6px; }
.onb-blurb { margin: 0 0 18px; font-size: 0.86rem; color: var(--text-2); line-height: 1.55; }
.onb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.onb-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.onb-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 99px; font-size: 0.84rem; color: var(--text-1); cursor: pointer; user-select: none; }
.onb-chip span:hover { border-color: var(--fb-blue); }
.onb-chip input:checked + span { background: rgba(24,119,211,0.12); border-color: var(--fb-blue); color: var(--fb-blue); font-weight: 600; }
.onb-chip input:focus-visible + span { outline: 2px solid var(--fb-blue); outline-offset: 2px; }
.onb-summary { border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin-bottom: 16px; }
.onb-sum-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.onb-sum-row:last-child { border-bottom: none; }
.onb-sum-row span { color: var(--text-2); }
.onb-sum-row b { font-weight: 600; word-break: break-word; }
.onb-check { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; margin-bottom: 4px; cursor: pointer; }
.onb-check input { margin-top: 2px; flex: none; }
.onb-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.onb-next { width: auto; margin-left: auto; padding: 11px 20px; }
.onb-foot-note { margin: 12px 0 0; font-size: 0.79rem; }
@media (max-width: 900px) {
  .onb-grid { grid-template-columns: minmax(0, 1fr); }
  .onb-rail { flex-direction: row; flex-wrap: wrap; }
  .onb-rail-item a { padding: 7px 9px; }
  .onb-rail-t { display: none; }
  .onb-sum-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .onb-next { width: 100%; margin-left: 0; }
  .onb-actions { flex-direction: column-reverse; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-bar i { transition: none; }
}

/* Gigs escrow */
.gig-wallet-h{margin:0 0 6px;font-size:1.5rem}
.gig-wallet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px, 100%), 1fr));gap:14px;margin-bottom:18px}
.gig-wallet-card{background:var(--card,var(--bg-2));border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.gig-wallet-card small{display:block;color:var(--text-2);font-size:0.78rem;text-transform:uppercase;letter-spacing:.03em}
.gig-wallet-card strong{display:block;font-size:1.8rem;margin-top:4px}
.gig-wallet-card-main{box-shadow:0 0 0 1px rgba(24,119,211,0.18)}
/* Gigs progress: one bar per order, and the clock on the money */
.gig-progress{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.gig-wallet-sub{display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:1.12rem}
.gig-wallet-sub i{color:var(--brand)}
.gig-progress-list{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.gig-progress-row{background:var(--card,var(--bg-2));border:1px solid var(--border);border-radius:12px;padding:13px 15px}
.gig-progress-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.gig-progress-title{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:.92rem}
.gig-progress-title i{color:var(--brand)}
.gig-progress-title .gig-muted{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gig-progress-track{height:9px;border-radius:999px;background:var(--hover);overflow:hidden}
.gig-progress-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a)}
.gig-progress-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:.85rem}
.gig-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:700}
.gig-chip.is-waiting{background:rgba(245,158,11,.14);color:#b45309}
.gig-chip.is-done{background:rgba(34,197,94,.14);color:#15803d}
.gig-progress-empty{display:flex;align-items:center;gap:8px;margin:16px 0 4px}
.gig-progress-empty i{color:var(--fb-green)}
.gig-rules{list-style:none;margin:16px 0 0;padding:13px 15px;display:flex;flex-direction:column;gap:8px;background:var(--hover);border:1px dashed var(--border);border-radius:12px}
.gig-rules li{display:flex;align-items:flex-start;gap:9px;font-size:.87rem;color:var(--text-secondary)}
.gig-rules i{color:var(--brand);margin-top:2px;width:16px;text-align:center;flex:none}
.gig-wallet-form{display:flex;flex-direction:column;gap:10px}
.gig-wallet-saved{display:flex;flex-direction:column;gap:8px;margin:0 0 4px}
.gig-wallet-saved-h{
  display:flex;align-items:center;gap:8px;
  font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--text-secondary);margin-bottom:2px;
}
.gig-wallet-saved-h i{color:var(--fb-green);}
.gig-wallet-saved-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--hover);font-size:0.9rem;
}
.gig-wallet-saved-row.is-default{border-color:var(--brand);background:var(--bg);}
.gig-wallet-saved-kind{font-weight:700;}
.gig-wallet-saved-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0.05em;color:var(--text-secondary);
}
.gig-wallet-saved-holder{color:var(--text-secondary);}
.gig-wallet-amount{display:flex;flex-wrap:wrap;gap:10px}
.gig-wallet-amount .field{flex:1 1 220px;width:auto}
.gig-wallet-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gig-wallet-quick-form{margin:0}
.gig-wallet-chip{border:1px solid var(--border);background:var(--bg-1);color:var(--text-1);padding:6px 10px;border-radius:999px;font-size:0.84rem;cursor:pointer}
.gig-wallet-chip:hover{border-color:var(--fb-blue);color:var(--fb-blue)}
.gig-wallet-table .text-right{text-align:right}
.gig-wallet-delta.is-in{color:#22c55e;font-weight:600}
.gig-wallet-delta.is-out{color:var(--text-1);font-weight:600}
.gig-wallet-order{color:var(--fb-blue);text-decoration:none;font-weight:600}
.gig-wallet-rates{margin-top:18px}
.gig-wallet-rate-row{display:flex;flex-wrap:wrap;gap:10px}
.gig-wallet-rate{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:0.83rem}
.gig-wallet-nudge{margin-bottom:16px}
.gig-deposit-note{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--fb-blue);background:rgba(0,0,0,.02);border-radius:0 8px 8px 0;font-size:.88rem;color:var(--text-1)}
.gig-deposit-channels{border:0;margin:0 0 14px;padding:0;min-width:0}
.gig-deposit-channels legend{padding:0;margin-bottom:8px}
.gig-deposit-list{display:flex;flex-direction:column;gap:8px}
.gig-deposit-channel{display:grid;grid-template-columns:auto auto 1fr auto;column-gap:10px;row-gap:2px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-1);cursor:pointer}
.gig-deposit-channel.is-on{border-color:var(--fb-blue);box-shadow:0 0 0 1px var(--fb-blue)}
.gig-deposit-channel input[type=radio]{margin:0}
.gig-deposit-kind{font-weight:600}
.gig-deposit-account{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;letter-spacing:.02em}
.gig-deposit-sub{grid-column:1/-1;color:var(--text-2);font-size:.8rem}
.gig-deposit-copy{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.gig-deposit-copy:hover{border-color:var(--fb-blue);color:var(--fb-blue)}
.gig-deposit-copy.is-copied{border-color:#22c55e;color:#22c55e}
.gig-deposit-empty{border:1px dashed var(--border);border-radius:10px;padding:12px;margin:0 0 14px}
.admin-deposit-lines{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;min-height:120px}
.gig-order-held{display:block;font-size:0.8rem;color:var(--text-2);margin-top:2px}
.gig-order-held.is-done{color:#22c55e}
.gig-order-held.is-out{color:#ef4444}
.gig-wallet-hint{margin-top:10px;font-size:0.86rem;color:var(--text-2)}
.gig-wallet-topup-link{color:var(--fb-blue);text-decoration:none;font-weight:600;margin-left:6px}
.gig-escrow{border-left:4px solid var(--border)}
.gig-escrow-held{border-left-color:#f59e0b;background:rgba(245,158,11,0.06)}
.gig-escrow-released{border-left-color:#22c55e;background:rgba(34,197,94,0.06)}
.gig-escrow-refunded{border-left-color:#ef4444;background:rgba(239,68,68,0.06)}
.gig-escrow-disputed{border-left-color:#e11d48;background:rgba(225,29,72,0.06)}
.gig-escrow-lead{margin:0;font-size:1.02rem}
.gig-escrow-frozen{margin:6px 0 0;color:#e11d48;font-weight:600}
.gig-delivery-files{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.gig-delivery-files a{color:var(--fb-blue);text-decoration:none}
.gig-delivery-files a:hover{text-decoration:underline}
.gig-od-divider{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--text-2);font-size:0.8rem}
.gig-od-divider:before,.gig-od-divider:after{content:'';flex:1;height:1px;background:var(--border)}
.gig-order-warn{background:#e11d48;border-color:#e11d48}
.gig-order-warn:hover{filter:brightness(0.95)}
.gig-dispute-block{border-left:4px solid #e11d48}
.gig-dispute-outcome{margin:6px 0 0;color:#e11d48;font-weight:600}
.admin-dispute{margin-bottom:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.admin-dispute-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.admin-dispute-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px, 100%), 1fr));gap:12px}
.admin-label{display:block;color:var(--text-2);font-size:0.76rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.admin-subtle{color:var(--text-2);font-size:0.84rem}
.admin-panel-note{margin:0 0 12px;color:var(--text-2);font-size:0.87rem}
.admin-dispute-brief summary{cursor:pointer;color:var(--fb-blue);font-weight:600}
.admin-dispute-detail{white-space:pre-wrap;color:var(--text-2);font-size:0.88rem;margin-top:6px}
.admin-dispute-files{display:flex;flex-direction:column;gap:4px}
.admin-dispute-form{display:flex;flex-direction:column;gap:10px}
.admin-dispute-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ---- Profile tabs: Posts / About / Reels / Photos / Groups / Pages / More ---- */
.profile-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:16px 0 0;overflow-x:auto;padding:0 4px;}
.profile-tab{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--text-secondary);font-weight:600;font-size:0.92rem;padding:12px 16px;cursor:pointer;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;white-space:nowrap;font-family:inherit;}
.profile-tab i{color:var(--text-secondary);}
.profile-tab:hover{background:var(--hover);color:var(--text);}
.profile-tab.active{color:var(--fb-blue);border-bottom-color:var(--fb-blue);}
.profile-tab.active i{color:var(--fb-blue);}
.profile-tab-count{background:var(--hover);color:var(--text-secondary);font-size:0.72rem;font-weight:700;padding:1px 7px;border-radius:999px;}
.profile-tab.active .profile-tab-count{background:var(--fb-blue);color:#fff;}
.profile-panel{margin-top:16px;display:flex;flex-direction:column;gap:16px;}
.profile-panel.hidden{display:none;}
.profile-reel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px, 100%), 1fr));gap:10px;}
.profile-reel-tile{position:relative;display:block;aspect-ratio:9/14;border-radius:12px;overflow:hidden;background:#000;text-decoration:none;}
.profile-reel-tile img,.profile-reel-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.profile-reel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 10px 8px;color:#fff;font-size:0.8rem;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,0.75));}
.profile-reel-caption i{margin-right:5px;}
.profile-more-links{display:flex;flex-wrap:wrap;gap:10px;}

/* ---- Edit Profile page ---- */
/* ===== Edit profile: photos on the left, sections on the right ===== */
.ep { max-width: 940px; margin: 0 auto; padding-bottom: 48px; }
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 0 16px; }
.ep-head h1 { font-size: 1.45rem; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.ep-head h1 i { color: var(--brand); }
.ep-head p { margin: 0; max-width: 62ch; }
.ep-view {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: 0.88rem; font-weight: 600;
}
.ep-view:hover { background: var(--hover); }

.ep-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.ep-side { position: sticky; top: 72px; }
.ep-main { min-width: 0; }

/* the settings menu down the left of the page */
.ep-nav {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ep-nav-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px 8px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ep-nav-head i { color: var(--brand); }
.ep-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none;
  font-size: 0.92rem; font-weight: 600;
  transition: background 0.13s ease, color 0.13s ease;
}
.ep-nav-item i { width: 18px; text-align: center; color: var(--text-secondary); }
.ep-nav-item:hover { background: var(--hover); }
.ep-nav-item.is-active { background: rgba(79, 70, 229, 0.1); color: var(--brand); }
.ep-nav-item.is-active i { color: var(--brand); }
.ep-nav-sep { height: 1px; background: var(--border); margin: 10px 6px; }
.ep-nav-foot { font-size: 0.76rem; margin: 10px 4px 0; line-height: 1.45; }
.ep-nav-foot i { color: var(--brand); margin-right: 5px; font-size: 0.6rem; }

.ep-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ep-main > .ep-card + .ep-card { margin-top: 16px; }
.ep-h {
  font-size: 1rem; font-weight: 700; margin: 0;
  padding: 14px 18px 13px;
  display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--border);
}
.ep-h i { color: var(--brand); width: 18px; text-align: center; }
.ep-card-body { padding: 16px 18px 18px; }
.ep-sub-head {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 6px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem; font-weight: 700; color: var(--text-secondary);
}
.ep-sub-head i { color: var(--brand); }

/* --- photos card --- */
.ep-cover { position: relative; height: 170px; overflow: hidden; border-radius: 13px 13px 0 0; background: var(--brand-grad); }
.ep-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-cover .ep-photo-btn {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(0, 0, 0, 0.55); border-color: transparent; color: #fff;
  backdrop-filter: blur(4px);
}
.ep-cover .ep-photo-btn:hover { background: rgba(0, 0, 0, 0.75); border-color: transparent; color: #fff; }
.ep-cover.is-pending { cursor: grab; touch-action: none; }
.ep-cover.is-dragging { cursor: grabbing; }
.ep-cover-hint {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.78rem; font-weight: 600;
  backdrop-filter: blur(4px); pointer-events: none;
}
.ep-cover-cancel {
  position: absolute; right: 12px; top: 12px;
  padding: 7px 13px; border: none; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(4px);
}
.ep-cover-cancel:hover { background: rgba(0, 0, 0, 0.78); }

/* One settings panel at a time; the rest of the page is not on screen. */
.ep-panel[hidden] { display: none; }
/* The wallet blocks the money rows open are drawn as plain settings cards. */
.ep-card .gig-block {
  border: none; padding: 0; margin: 0;
  background: none; box-shadow: none;
}
.ep-card .gig-block + .gig-block { margin-top: 26px; }
.ep-card .gig-block-h { margin-bottom: 10px; }
.ep-photos-body { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ep-photos-body .avatar-xl {
  width: 96px; height: 96px; font-size: 2.2rem; flex: none;
  border: 3px solid var(--card-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ep-photos-copy { flex: 1; min-width: 220px; }
.ep-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* clicking the picture opens the photo menu */
.ep-ava-wrap { position: relative; flex: none; }
.ep-ava-btn {
  position: relative; display: block; padding: 0;
  border: none; background: none; cursor: pointer; border-radius: 50%;
}
.ep-ava-cam {
  position: absolute; right: -2px; bottom: -3px;
  width: 31px; height: 32px; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
  display: grid; place-items: center; font-size: 0.78rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ep-ava-btn:hover .ep-ava-cam { background: var(--brand); border-color: var(--brand); color: #fff; }
.ep-ava-menu {
  position: absolute; top: calc(100% + 10px); left: -6px; z-index: 40;
  min-width: 214px; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}
.ep-ava-menu.hidden { display: none; }
.ep-ava-title {
  margin: 0; padding: 8px 10px 7px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); margin-bottom: 5px;
}
.ep-ava-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600;
  text-decoration: none; text-align: left; cursor: pointer;
}
.ep-ava-item:hover { background: var(--hover); }
.ep-ava-item i { width: 16px; text-align: center; color: var(--text-secondary); }
.ep-ava-danger { color: #e0245e; }
.ep-ava-danger i { color: #e0245e; }
.ep-ava-danger:hover { background: rgba(224, 36, 94, 0.1); }
.ep-photo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ep-photo-btn:hover { background: var(--hover); border-color: var(--brand); color: var(--brand); }
.ep-hint { font-size: 0.8rem; margin: 12px 0 0; }
.ep-photos-copy .ep-hint { margin: 10px 0 14px; }
.ep-danger { border-color: rgba(224, 36, 94, 0.45); color: #e0245e; }
.ep-danger:hover { background: rgba(224, 36, 94, 0.1); border-color: #e0245e; color: #e0245e; }
.ep-remove-form { margin-top: 10px; text-align: right; }
.ep-link-danger {
  background: none; border: none; padding: 6px 8px; border-radius: 8px;
  color: #e0245e; font-size: 0.85rem; font-weight: 600;
}
.ep-link-danger:hover { background: rgba(224, 36, 94, 0.1); }

/* --- forms --- */
.ep-form { display: block; }
.ep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ep-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.ep-field {
  display: block; width: 100%; margin-top: 6px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem; font-weight: 400;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
textarea.ep-field { resize: vertical; min-height: 78px; }
.ep-label-ic { color: #dc2626; margin-right: 3px; }
.ep-input-group { display: flex; align-items: stretch; }
.ep-input-ic {
  display: flex; align-items: center; justify-content: center;
  width: 40px; flex: none; margin-top: 6px;
  background: var(--hover); color: var(--text-secondary);
  border: 1px solid var(--border); border-right: 0;
  border-radius: 10px 0 0 10px;
}
.ep-input-group .ep-field { border-radius: 0 10px 10px 0; }
.ep-input-group:focus-within .ep-input-ic { color: var(--brand); border-color: var(--brand); }
.ep-field-hint { display: block; margin-top: 5px; font-size: 0.78rem; color: var(--text-secondary); }
.ep-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.ep-field:focus {
  outline: none; background: var(--card-bg);
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.ep-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ep-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border: none; border-radius: 999px;
  background: var(--brand-grad); color: #fff;
  font-size: 0.9rem; font-weight: 600;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28);
}
.ep-primary:hover { filter: brightness(1.07); }
.ep-primary:disabled { opacity: 0.5; box-shadow: none; cursor: not-allowed; }

/* --- about rows --- */
.about-hint { margin: 0 0 6px; }
.ep-about-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ep-about-row:last-of-type { border-bottom: 0; }
.ep-about-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ep-about-label { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; }
.ep-about-label i { width: 16px; text-align: center; color: var(--brand); }
.ep-readonly { display: block; font-size: 0.95rem; }
.ep-line-form { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ep-line-form .ep-row { margin-bottom: 0; }
.ep-line-form .ep-about-label { margin-bottom: 0; }

/* the privacy pill next to each line */
.about-privacy-select {
  width: auto; max-width: 150px; margin-top: 0;
  padding: 7px 10px; font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
}
.about-privacy-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.about-privacy { flex: none; color: var(--text-secondary); }
.about-privacy-fixed { font-size: 1rem; }

/* pick a value from the list, or write one of your own */
.ep-pick-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ep-pick-row .ep-select { flex: 1 1 220px; min-width: 0; }
.ep-pick-row .ep-pick-text { flex: 1 1 200px; min-width: 0; }
.ep-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ep-add:hover { background: var(--hover); border-color: var(--brand); color: var(--brand); }

/* the lines already added - Work can hold more than one */
.ep-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.ep-chips:empty { display: none; margin-bottom: 0; }
.ep-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 6px 5px 12px; border-radius: 999px;
  background: rgba(79, 70, 229, 0.1); color: var(--brand);
  font-size: 0.83rem; font-weight: 600;
}
.ep-chip-t { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-chip-x {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(79, 70, 229, 0.18); color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem;
}
.ep-chip-x:hover { background: var(--brand); color: #fff; }

/* the map the city line is picked from */
.ep-city { margin-top: 10px; }
.ep-city-map {
  height: 190px; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; cursor: crosshair; background: var(--bg);
}
.ep-city-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.ep-city-hint i { color: var(--brand); }
.ep-city-pin { line-height: 1; }
.ep-city-pin i { font-size: 26px; color: #e0245e; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }

/* identity verification */
.ep-h-bn { font-family: inherit; }
.nid-card {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--hover);
}
.nid-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.nid-photo img, .nid-photo-ph {
  width: 118px; height: 148px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
}
.nid-photo-ph { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 2.2rem; }
.nid-verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
  background: rgba(34, 197, 94, 0.14); color: #15803d;
}
.nid-fields { flex: 1 1 260px; margin: 0; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.nid-fields > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.nid-fields dt {
  flex: none; min-width: 96px; font-size: 0.78rem; font-weight: 700;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em;
}
.nid-fields dd { margin: 0; font-size: 0.95rem; font-weight: 600; word-break: break-word; }
.nid-sealed, .nid-empty { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.nid-sealed i { color: var(--fb-green); }
.nid-empty i { color: var(--brand); }
.nid-card-profile { margin-top: 14px; }
.nid-card-profile h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.nid-card-profile h3 i { color: var(--brand); }
@media (max-width: 520px) {
  .nid-card { gap: 12px; }
  .nid-photo { width: 100%; align-items: center; }
  .nid-fields { flex-basis: 100%; }
  .nid-fields dt { min-width: 84px; }
}

@media (max-width: 860px) {
  .ep-grid { grid-template-columns: 1fr; }
  .ep-side { position: static; }
  .ep-nav { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; }
  .ep-nav-head { width: 100%; border-bottom: 0; margin-bottom: 0; padding: 2px 4px 6px; }
  .ep-nav-item { padding: 8px 12px; background: var(--bg); }
  .ep-nav-item i { width: auto; }
  .ep-nav-sep { display: none; }
  .ep-nav-foot { display: none; }
}
@media (max-width: 560px) {
  .ep-row { grid-template-columns: 1fr; }
  .ep-pick-row .ep-select, .ep-pick-row .ep-pick-text { flex: 1 1 100%; }
  .ep-add { width: 100%; padding: 10px; }
  .ep-head { flex-direction: column; align-items: flex-start; }
  .ep-actions { justify-content: stretch; }
  .ep-actions .ep-primary { flex: 1; justify-content: center; }
}

@media (max-width:700px){
  .profile-reel-grid{grid-template-columns:repeat(auto-fill,minmax(min(120px, 100%), 1fr));}
  .profile-tab{padding:10px 12px;font-size:0.86rem;}
}

/* ===== Overflow guards ===== */
/* Nothing, media included, may push the page wider than the screen. */
img, video, iframe { max-width: 100%; }
/* Grid and flex children default to `min-width: auto`, so one long URL or an
   oversized card widens its whole column. Let them shrink instead. */
.layout-3col > *,
.layout-2col > *,
.activity-layout > *,
.profile-info-row > *,
.gigs-grid > *,
.friend-grid > *,
.friends-grid > * { min-width: 0; }

/* Fixed-count grids drop columns as the viewport narrows instead of
   squeezing each card into an unusable sliver. */
@media (max-width: 900px) {
  .friend-grid { grid-template-columns: repeat(3, 1fr); }
  .friends-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .friend-grid { grid-template-columns: repeat(2, 1fr); }
  .friends-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The search field collapses to its icon below 900px and slides open across
   the bar on focus, so phones keep search instead of losing it at 640px. */
@media (max-width: 900px) {
  .search-box { width: 40px; padding: 0 11px; transition: width 0.18s ease; }
  .search-box input {
    display: block;
    width: 0;
    min-width: 0;
    opacity: 0;
    margin-left: 0;
    padding: 0;
    transition: opacity 0.15s ease;
  }
  .search-box:focus-within {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    width: auto;
    padding: 0 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 0 0 2px var(--fb-blue);
    z-index: 6;
  }
  .search-box:focus-within input { width: 100%; opacity: 1; margin-left: 8px; }
}
@media (max-width: 640px) {
  .search-box { display: flex; }
}

/* Monetization sidebar: stack it above the dashboard on narrow screens. */
@media (max-width: 1040px) {
  .mono-layout { grid-template-columns: 1fr; }
  .mono-side { position: static; }
  .mono-side-nav { display: flex; flex-wrap: wrap; gap: 4px; max-height: none; padding: 10px; }
  .mono-side-group { width: 100%; padding: 8px 6px 2px; }
  .mono-side-item { padding: 8px 12px; background: var(--bg); }
  .mono-side-item i { width: auto; }
  .mono-stream { display: none; }
}
@media (max-width: 760px) {
  .monetization-overview { grid-template-columns: 1fr; }
  .mono-side-balance .mono-side-amount { font-size: 1.4rem; }
}


/* ==================== P2P Trade ====================
   The market, the member's own orders, and the chat on
   whichever order is open. Tabs scroll sideways on a phone
   rather than wrapping to a second row. */
.p2p-wrap{display:grid;grid-template-columns:210px minmax(0,1fr) 320px;gap:18px;align-items:start}
.p2p-nav{grid-column:1;position:sticky;top:14px;align-self:start;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px}
.p2p-nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:var(--text-1);font-size:.92rem;font-weight:500;text-decoration:none}
.p2p-nav-item i{width:18px;text-align:center;color:var(--text-2)}
.p2p-nav-item:hover{background:var(--hover)}
.p2p-nav-item.is-active{background:var(--fb-blue);color:#fff}
.p2p-nav-item.is-active i{color:#fff}
.p2p-main{grid-column:2;display:grid;gap:16px;align-content:start;min-width:0}
.p2p-head{grid-column:2/-1}
.p2p-title{margin:0 0 4px;font-size:1.25rem;display:flex;align-items:center;gap:9px}
.p2p-title i{color:var(--fb-blue)}
.p2p-sub{margin:0;color:var(--text-2);font-size:.9rem;max-width:70ch}
.p2p-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.p2p-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text-1);font-size:.9rem;font-weight:500;text-decoration:none;flex:0 0 auto}
.p2p-tab:hover{background:var(--hover)}
.p2p-tab.is-active{background:var(--fb-blue);border-color:var(--fb-blue);color:#fff}
.p2p-count{background:var(--hover);border-radius:20px;padding:0 8px;font-size:.78rem;font-weight:600}
.p2p-tab.is-active .p2p-count{background:rgba(255,255,255,.22)}
.p2p-body{display:grid;gap:18px;align-content:start;grid-template-columns:minmax(0,1fr)}
.p2p-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.p2p-panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.p2p-panel-h h2{margin:0;font-size:1.02rem;display:flex;align-items:center;gap:8px}
.p2p-panel-h h2 i{color:var(--fb-blue)}
.p2p-muted{color:var(--text-2);font-size:.85rem;margin:0}
.p2p-empty{color:var(--text-2);font-size:.9rem;text-align:center;padding:26px 10px;margin:0}
.p2p-empty i{display:block;font-size:1.5rem;margin-bottom:8px;opacity:.5}

.p2p-fbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.p2p-fbar-static,.p2p-fsel select{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background:var(--card-bg);border-radius:8px;padding:7px 11px;font-size:.85rem;font-weight:600;color:var(--text);cursor:pointer}
.p2p-fbar-static{cursor:default;padding-right:11px}
.p2p-fsel{position:relative;display:inline-flex}
.p2p-fsel select{padding-right:26px}
.p2p-fsel i{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none;font-size:.68rem}
.p2p-fbar-reset{margin-left:auto;border:1px solid var(--border);background:var(--card-bg);border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer}
.p2p-fbar-reset:hover{background:var(--hover)}
.p2p-ads{display:grid}
.p2p-ad{padding:15px 2px;border-bottom:1px solid var(--border)}
.p2p-ad:last-child{border-bottom:0}
.p2p-ad-top{display:flex;align-items:center;gap:9px}
.p2p-ad-av{width:34px;height:34px;border-radius:50%;background:var(--av,#2b3139);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex:0 0 auto}
.p2p-ad-name{font-weight:700;font-size:.95rem;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p2p-ad-name-link{color:var(--text);text-decoration:none}
.p2p-ad-name-link:hover{color:var(--fb-blue);text-decoration:underline}
.p2p-ad-verify{color:#1d9bf0;font-size:.92rem}
.p2p-ad-mine{background:#e8f2ff;color:var(--fb-blue);border:1px solid #bcdcff;border-radius:999px;padding:2px 9px;font-size:.68rem;font-weight:700;white-space:nowrap}
.p2p-ad-self{margin:0;font-size:.8rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px;font-weight:600}
.p2p-ad-meta{margin:5px 0 10px;font-size:.78rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.p2p-ad-meta b{font-weight:600;color:var(--text-secondary)}
.p2p-ad-sep{color:var(--border)}
.p2p-ad-main{display:flex;align-items:center;justify-content:space-between;gap:14px}
.p2p-ad-figs{min-width:0}
.p2p-ad-price{margin:0 0 9px;font-size:1.55rem;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:6px;line-height:1}
.p2p-ad-cur{font-size:1.05rem;font-weight:600;color:var(--text)}
.p2p-ad-code{font-size:.7rem;font-weight:700;color:var(--text-secondary);background:var(--hover);border-radius:4px;padding:2px 6px;letter-spacing:.3px}
.p2p-ad-cut{font-size:.7rem;font-weight:700;background:#dcf7e8;color:#0e9f6e;border-radius:4px;padding:2px 6px;letter-spacing:0}
.p2p-ad-line{margin:0 0 6px;font-size:.84rem;color:var(--text-secondary);display:flex;gap:7px;align-items:baseline}
.p2p-ad-line b{color:var(--text);font-weight:600}
.p2p-ad-pays{margin:8px 0 0;font-size:.83rem;color:var(--text-secondary);display:flex;align-items:center;gap:7px;font-weight:600}
.p2p-paybar{width:3px;height:12px;border-radius:2px;background:#8c3494;flex:0 0 auto}
.p2p-pay-bkash{background:#e2136e}
.p2p-pay-rocket{background:#8c3494}
.p2p-pay-nagad{background:#f68b1f}
.p2p-pay-upay{background:#ef4123}
.p2p-pay-binance{background:#f0b90b}
.p2p-pay-bank{background:#2f7cf6}
.p2p-pay-card{background:#1f2937}
.p2p-pay-mobile{background:#0e9f6e}
.p2p-pay-wallet{background:#7c3aed}
.p2p-ad-go{position:relative;flex:0 0 auto}
.p2p-ad-go summary{list-style:none;cursor:pointer}
.p2p-ad-go summary::-webkit-details-marker{display:none}
.p2p-tradebtn{border:0;border-radius:8px;padding:10px 24px;font-weight:700;font-size:.9rem;color:#fff;background:#0ecb81;min-width:100px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.p2p-ad-sell .p2p-tradebtn{background:#f6465d}
.p2p-ad-go form{position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);display:grid;gap:10px;width:230px}
.p2p-ad-go form .p2p-tradebtn{background:var(--fb-blue);width:100%}
.p2p-qty{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--text-secondary)}
.p2p-qty .field{max-width:100%}
.p2p-price-row{display:flex;gap:8px;align-items:stretch}
.p2p-price-cur{max-width:110px;font-weight:600}
.p2p-price-row .field{flex:1}
.p2p-btn-sm{padding:6px 12px;font-size:.82rem}
/* Rating a completed order */
.p2p-rate-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.p2p-rate-label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}
.p2p-rate-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.p2p-rate-stars input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.p2p-rate-stars label{cursor:pointer;color:var(--border);font-size:1.25rem;line-height:1;transition:color .12s}
.p2p-rate-stars label:hover,.p2p-rate-stars label:hover ~ label{color:#f5b301}
.p2p-rate-stars input:checked ~ label{color:#f5b301}
.p2p-rate-comment{flex:1;min-width:160px;max-width:280px}
.p2p-rated{margin-top:10px;font-size:.85rem;font-weight:600;color:#f5b301}
/* P2P profile page */
.p2p-back{margin:0 0 12px}
.p2p-back a{color:var(--text-secondary);font-weight:600;font-size:.88rem}
.p2p-back a:hover{color:var(--text)}
.p2p-prof-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
/* The board's wrapper reserves a 320px trade sidebar that the profile does
   not have, so this page gets its own two-column grid: the shared section
   nav on the left, the profile content in .p2p-main on the right. */
.p2p-wrap.p2p-profile-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.p2p-prof-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.p2p-prof-av{width:64px;height:64px;font-size:1.7rem;border-radius:50%}
.p2p-prof-id{min-width:0}
.p2p-prof-name{margin:0;font-size:1.35rem;display:flex;align-items:center;gap:8px}
.p2p-prof-handle{margin:2px 0 0;font-size:.85rem;color:var(--text-secondary)}
.p2p-prof-biz{margin:4px 0 0;font-size:.85rem;color:var(--text-secondary)}
.p2p-prof-main{display:grid;gap:16px;min-width:0}
.p2p-rating-box{margin-top:4px}
.p2p-rating-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p2p-rating-avg{font-size:2rem;font-weight:700;line-height:1}
.p2p-rating-stars{color:#f5b301;font-size:1.05rem;letter-spacing:1px}
.p2p-rating-count{font-size:.82rem;color:var(--text-secondary)}
.p2p-rating-none{margin:10px 0 0;font-size:.85rem}
.p2p-rating-bars{margin-top:12px;display:grid;gap:6px}
.p2p-rating-bar{display:grid;grid-template-columns:52px 1fr 32px;align-items:center;gap:8px;font-size:.78rem;color:var(--text-secondary)}
.p2p-rating-bar-n{display:inline-flex;align-items:center;gap:3px}
.p2p-rating-bar-n i{color:#f5b301;font-size:.65rem}
.p2p-rating-bar-track{height:7px;border-radius:4px;background:var(--hover);overflow:hidden}
.p2p-rating-bar-fill{display:block;height:100%;background:#f5b301;border-radius:4px}
.p2p-rating-bar-c{text-align:right;font-weight:600;color:var(--text)}
/* Reviews */
.p2p-review-list{display:grid}
.p2p-review{padding:12px 0;border-bottom:1px solid var(--border)}
.p2p-review:last-child{border-bottom:0}
.p2p-review-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p2p-review-who{font-weight:700;color:var(--text)}
.p2p-review-when{font-size:.76rem;color:var(--text-secondary);margin-left:auto}
.p2p-review-text{margin:6px 0 0;font-size:.9rem;color:var(--text);line-height:1.5}
.p2p-tradebtn-link{text-decoration:none}
.p2p-ad-buy-btn{background:#0ecb81}
.p2p-ad-sell-btn{background:#f6465d}

.p2p-filters{display:flex;gap:6px;flex-wrap:wrap}
.p2p-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text-1);font-size:.82rem;text-decoration:none}
.p2p-chip:hover{background:var(--hover)}
.p2p-chip.is-on{background:var(--fb-blue);border-color:var(--fb-blue);color:#fff}
.p2p-chip span{background:var(--hover);border-radius:20px;padding:0 7px;font-weight:600}
.p2p-chip.is-on span{background:rgba(255,255,255,.22)}

.p2p-order-list{display:grid;gap:12px}
.p2p-order{border:1px solid var(--border);border-radius:12px;padding:14px}
.p2p-order-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.p2p-order-no{font-weight:700;font-family:monospace;letter-spacing:.3px}
.p2p-order-sum{margin:0 0 2px;font-size:.95rem}
.p2p-order-who{margin:0 0 10px;font-size:.85rem}
.p2p-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 9px;border-radius:20px}
.p2p-status i{font-size:.5rem}
.p2p-status-pending{background:rgba(255,193,7,.16);color:#8a6100}
.p2p-status-paid{background:rgba(0,123,255,.14);color:#0a58ca}
.p2p-status-processing{background:rgba(23,162,184,.14);color:#0e6e78}
.p2p-status-completed{background:rgba(40,167,69,.14);color:#1d7d3c}
.p2p-status-appeal{background:rgba(220,53,69,.14);color:#b02430}
.p2p-status-cancelled{background:var(--hover);color:var(--text-2)}
.p2p-order-actions{display:flex;gap:8px;flex-wrap:wrap}
.p2p-order-actions form{margin:0}
.p2p-escrow{margin:10px 0 0;font-size:.84rem;color:var(--text-2);display:flex;align-items:center;gap:7px}
.p2p-escrow i{color:#8a6100}
.p2p-appeal-note{margin-top:10px;padding:10px 12px;border-left:3px solid #b02430;background:rgba(220,53,69,.06);border-radius:0 8px 8px 0;font-size:.86rem}
.p2p-appeal-note p{margin:0}
.p2p-appeal-form{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px dashed var(--border);border-radius:10px}
.p2p-appeal-form label{display:grid;gap:4px;font-size:.8rem;color:var(--text-2)}

.p2p-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:9px;border:1px solid var(--border);background:var(--hover);color:var(--text-1);font-size:.88rem;font-weight:600;cursor:pointer}
.p2p-btn:hover{filter:brightness(.97)}
.p2p-btn-primary{background:var(--fb-blue);border-color:var(--fb-blue);color:#fff}
.p2p-btn-release{background:#1d7d3c;border-color:#1d7d3c;color:#fff}
.p2p-btn-appeal{background:rgba(220,53,69,.12);border-color:rgba(220,53,69,.3);color:#b02430}
.p2p-btn-ghost{background:transparent}

/* Two-pane messenger: names on the left, the open conversation on the right.
   On a narrow screen the panes stack so the list still comes first. */
.p2p-chatgrid{display:flex;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.p2p-chatpane{min-width:0}
.p2p-chatpane-list{flex:0 0 300px;max-width:300px;border-right:1px solid var(--border);background:var(--bg,#fafbfc);padding:14px}
.p2p-chatpane-open{flex:1;display:flex;flex-direction:column;padding:14px}
.p2p-chatpick{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-2);text-align:center;padding:40px 16px}
.p2p-chatpick i{font-size:2.6rem;color:var(--fb-blue);opacity:.5}
.p2p-chatpick p{margin:0;font-size:.92rem;max-width:320px}
/* With no chat open the names fill the whole panel; pick one and it splits. */
.p2p-chatgrid.is-listonly .p2p-chatpane-list{flex:1;max-width:none;border-right:0}
.p2p-chatpick-top{margin:0 0 12px;padding:11px 13px;display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--text-2);background:var(--hover);border:1px dashed rgba(0,123,255,.35);border-radius:10px}
.p2p-chatpick-top i{color:var(--fb-blue)}

.p2p-chat{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;border:0;padding:0}
.p2p-chat-h{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.p2p-chat-back{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text-1);font-size:.83rem;font-weight:700;text-decoration:none;flex:0 0 auto;transition:all .12s ease}
.p2p-chat-back:hover{background:var(--fb-blue);border-color:var(--fb-blue);color:#fff}
.p2p-chat-h h3{margin:0;font-size:.98rem;display:flex;align-items:center;gap:8px}
.p2p-chat-h h3 i{color:var(--fb-blue)}
.p2p-chat-log{display:flex;flex-direction:column;gap:8px;min-height:200px;max-height:46vh;overflow-y:auto;padding:10px 6px;margin-bottom:10px;background:
  radial-gradient(1200px 240px at 15% -10%, rgba(0,123,255,.05), transparent 60%),
  var(--hover);border:1px solid var(--border);border-radius:12px}
.p2p-msg{border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:8px 12px;max-width:80%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.p2p-msg.is-mine{margin-left:auto;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#0b63d6,#007bff);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(0,123,255,.25)}
.p2p-msg.is-mine .p2p-msg-who,.p2p-msg.is-mine .p2p-msg-time{color:rgba(255,255,255,.8)}
.p2p-msg.is-mine .p2p-msg-file{color:#eaf3ff}
.p2p-msg-who{font-size:.72rem;font-weight:700;color:var(--fb-blue);text-transform:uppercase;letter-spacing:.3px;text-decoration:none;display:inline-block;margin-bottom:1px}
.p2p-msg-who:hover{text-decoration:underline}
.p2p-msg.is-mine .p2p-msg-who{color:rgba(255,255,255,.85)}
.p2p-msg-text{margin:3px 0 0;font-size:.9rem;white-space:pre-wrap;word-break:break-word}
.p2p-msg-imglink{display:block;margin-top:6px;line-height:0}
.p2p-msg-img{max-width:240px;max-height:240px;border-radius:10px;display:block;cursor:zoom-in;border:1px solid rgba(255,255,255,.2);transition:transform .15s ease}
.p2p-msg-img:hover{transform:scale(1.02)}
.p2p-msg-file{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:.84rem;color:var(--fb-blue)}
.p2p-msg-time{display:block;margin-top:4px;font-size:.72rem;color:var(--text-2)}
.p2p-chat-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.p2p-chat-form .field{flex:1;min-width:200px}
.p2p-chat-file{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:9px;cursor:pointer;color:var(--text-2)}
.p2p-chat-file:hover{background:var(--hover)}

.p2p-side{grid-column:3;display:grid;gap:18px;align-content:start}
.p2p-chatlist{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.p2p-chatlist-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text-1);text-decoration:none}
.p2p-chatlist-item:hover{background:var(--hover)}
.p2p-chatlist-item.is-open{border-color:var(--fb-blue);background:var(--hover);box-shadow:inset 3px 0 0 var(--fb-blue)}
.p2p-chatlist-who{flex:1;font-weight:600;font-size:.9rem}
.p2p-chatlist-meta{font-size:.76rem;color:var(--text-2);white-space:nowrap}
.p2p-unread{background:var(--fb-blue);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;padding:0 6px}
.p2p-chat-h-sub{margin-left:auto;font-size:.8rem;color:var(--text-2);font-weight:600}
.p2p-chat-h-sub b{color:var(--text-1)}
.p2p-msg-tag{display:inline-block;margin-left:6px;background:var(--hover);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:.66rem;font-weight:700;color:var(--text-2);vertical-align:middle}
.p2p-chat-ro{margin:0;padding:10px 12px;font-size:.85rem;display:flex;align-items:center;gap:8px}
.p2p-tradex{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.p2p-tradex>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;color:var(--text-2);list-style:none}
.p2p-tradex>summary::-webkit-details-marker{display:none}
.p2p-tradex>summary i{color:var(--fb-blue)}
.p2p-tradex-list{display:grid;gap:6px;margin-top:8px}
.p2p-tradex-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text-1);text-decoration:none;font-size:.82rem}
.p2p-tradex-row:hover{background:var(--hover)}
.p2p-tradex-row.is-active{border-color:var(--fb-blue);background:#eef5ff}
.p2p-tradex-amt{flex:1;font-weight:600}
.p2p-chat-id{display:flex;align-items:center;gap:10px;min-width:0}
.p2p-chat-idtxt{display:flex;flex-direction:column;min-width:0}
.p2p-chat-name{font-weight:700;font-size:.98rem;line-height:1.2}
.p2p-chat-pres{font-size:.74rem;color:var(--text-2);display:flex;align-items:center;gap:5px}
.p2p-chat-pres i{font-size:.5rem;color:#9aa0a6}
.p2p-chat-pres.is-on{color:#16a34a}
.p2p-chat-pres.is-on i{color:#16a34a}
.p2p-daysep{display:flex;align-items:center;justify-content:center;margin:10px 0}
.p2p-daysep span{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 14px;font-size:.72rem;font-weight:700;color:var(--text-2);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.p2p-sysmsg{max-width:88%;margin:8px auto;background:linear-gradient(180deg,rgba(0,123,255,.06),rgba(0,123,255,.02));border:1px dashed rgba(0,123,255,.3);border-radius:12px;padding:10px 14px;text-align:center}
.p2p-sysmsg p{margin:0;font-size:.83rem;color:var(--text-1);line-height:1.45}
.p2p-sysmsg-link{display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:var(--fb-blue);font-weight:700;font-size:.82rem;text-decoration:none}
.p2p-sysmsg-link:hover{text-decoration:underline}
.p2p-msg-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:4px}
.p2p-msg-read{color:#16a34a;font-size:.72rem}
.p2p-msg.is-mine .p2p-msg-read{color:#cfe8ff}
.p2p-chat-plus{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0b63d6,#007bff);color:#fff;cursor:pointer;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,123,255,.3);transition:transform .12s ease}
.p2p-chat-plus:hover{transform:scale(1.06)}
.p2p-chat-attach{display:inline-flex;align-items:center;gap:8px;max-width:220px;flex:0 1 auto;min-width:0}
.p2p-chat-attach[hidden]{display:none!important}
.p2p-chat-attachtile{position:relative;width:34px;height:34px;flex:0 0 auto}
.p2p-chat-attachthumb{width:34px;height:34px;border-radius:8px;object-fit:cover;display:block;border:1px solid #cfe0ff}
.p2p-chat-attachfile{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#eaf2ff;border:1px solid #cfe0ff;color:#0b63d6;font-size:.95rem}
.p2p-chat-attachx{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#d93025;color:#fff;border:0;font-size:.72rem;line-height:18px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:2}
.p2p-chat-attachx:hover{background:#b02018}
.p2p-chat-attachname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:600;color:#39424e}
.p2p-chat-name{text-decoration:none;color:inherit}
.p2p-chat-name:hover{text-decoration:underline;color:var(--fb-blue)}
.p2p-chatlist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.p2p-chatlist-head .p2p-sub-h{margin:0}
.p2p-chatsearch{max-width:240px;height:36px}
.p2p-chatlist-item{align-items:stretch;gap:11px}
.p2p-chatlist-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.p2p-chatlist-top{display:flex;align-items:baseline;gap:8px}
.p2p-chatlist-who{flex:1;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p2p-chatlist-time{font-size:.72rem;color:var(--text-2);white-space:nowrap}
.p2p-chatlist-bottom{display:flex;align-items:center;gap:8px}
.p2p-chatlist-preview{flex:1;font-size:.82rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.p2p-ad-av{flex:0 0 auto}
/* Stack the messenger on phones: the names come first, the open chat below. */
@media (max-width: 760px){
  .p2p-chatgrid{flex-direction:column}
  .p2p-chatpane-list{flex:1 1 auto;max-width:none;border-right:0;border-bottom:1px solid var(--border);max-height:40vh;overflow-y:auto}
  .p2p-chatpane-open{flex:1 1 auto}
  .p2p-chat-log{max-height:52vh}
}
.p2p-adspanel{padding-bottom:12px}
.p2p-ads-carousel{position:relative;overflow:hidden;border-radius:10px}
.p2p-ads-track{display:flex;transition:transform .45s ease}
.p2p-adsslide{flex:0 0 100%;min-width:0}
.p2p-adsslide-in{display:block;position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#1fb2a6,#2563eb);color:#fff;text-decoration:none;min-height:118px}
.p2p-adsslide-in img{width:100%;height:118px;object-fit:cover;display:block}
.p2p-adsslide-t{padding:12px 14px}
.p2p-adsslide-t strong{display:block;font-size:.95rem;margin-bottom:3px}
.p2p-adsslide-t span{font-size:.8rem;opacity:.92;line-height:1.35}
.p2p-adsdots{display:flex;gap:6px;justify-content:center;margin-top:9px}
.p2p-adsdots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--border);cursor:pointer}
.p2p-adsdots button.is-on{background:var(--fb-blue)}
.p2p-tools{margin-top:18px}
.p2p-tool{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:var(--card)}
.p2p-tool>summary{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;font-weight:600;font-size:.94rem;list-style:none}
.p2p-tool>summary::-webkit-details-marker{display:none}
.p2p-tool>summary i{color:var(--fb-blue);width:18px;text-align:center}
.p2p-tool[open]>summary{border-bottom:1px solid var(--border)}
.p2p-tool-body{padding:14px 15px}
.p2p-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.9rem;line-height:1.5}
.p2p-tool-form{display:grid;gap:10px;margin-bottom:12px;max-width:440px}
.p2p-tool-form label{display:grid;gap:5px;font-size:.82rem;color:var(--text-2);font-weight:600}
.p2p-tool-check{display:flex!important;align-items:center;gap:8px;font-weight:500!important;color:var(--text-1)!important}
.p2p-tool-ok{display:flex;align-items:center;gap:8px;color:#16a34a;font-size:.9rem;font-weight:600}
.p2p-tool-ok a{color:var(--fb-blue)}
.p2p-pay-list{display:grid;gap:8px}
.p2p-pay-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px}
.p2p-pay-type{background:var(--hover);border-radius:6px;padding:2px 8px;font-size:.76rem;font-weight:700}
.p2p-pay-num{flex:1;font-size:.88rem}
.p2p-pay-row form{margin:0}
.p2p-faq{display:grid;gap:10px;margin:0}
.p2p-faq dt{font-weight:700;font-size:.9rem}
.p2p-faq dd{margin:3px 0 0;font-size:.87rem;color:var(--text-2);line-height:1.5}
.p2p-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.p2p-stats dt{font-size:.74rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px}
.p2p-stats dd{margin:2px 0 0;font-size:1.05rem;font-weight:700}
.p2p-sub-h{margin:16px 0 8px;font-size:.92rem;display:flex;align-items:center;gap:8px}
.p2p-sub-h i{color:var(--fb-blue)}
.p2p-ads-form,.p2p-apply-form{display:grid;gap:9px}
.p2p-ads-form label,.p2p-apply-form label{display:grid;gap:4px;font-size:.8rem;color:var(--text-2)}
.p2p-ads-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.p2p-ads-row label{display:grid;gap:4px;font-size:.8rem;color:var(--text-2)}
.p2p-ad-list{display:grid;gap:8px}
.p2p-myad{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font-size:.86rem}
.p2p-myad-inactive{opacity:.6}
.p2p-myad-actions{margin-left:auto;display:flex;gap:6px}
.p2p-myad-actions form{margin:0}
.p2p-side .p2p-status{font-size:.7rem}

@media (max-width: 980px){
  /* minmax(0,1fr): a plain 1fr track takes its items' min-content (the nowrap
     chat previews), which dragged the whole page 600px+ wide on phones. */
  .p2p-wrap{grid-template-columns:minmax(0,1fr);padding-bottom:72px}
  /* The left menu becomes a fixed bottom bar on small screens. */
  .p2p-nav{position:fixed;left:0;right:0;bottom:0;top:auto;grid-column:1;z-index:800;
    flex-direction:row;justify-content:space-around;align-items:center;gap:0;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px));
    background:var(--card);border:none;border-top:1px solid var(--border);border-radius:0;
    box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  .p2p-nav-item{flex:1 1 0;flex-direction:column;gap:3px;padding:5px 2px;font-size:.66rem;text-align:center;border-radius:8px}
  .p2p-nav-item i{width:auto;font-size:1.15rem}
  .p2p-nav-item span{white-space:nowrap}
  body.p2p-page{padding-bottom:64px}
  /* The floating messenger button is redundant here (the bottom bar already
     has Chat) and it landed on top of the chat Send button / Profile item. */
  body.p2p-page .messenger-dock{display:none}
  .p2p-main{grid-column:1}
/* The profile wrapper keeps its own two-column rule above, so it needs this
   collapse spelled out: one column, full width, nav pinned as the bottom bar. */
.p2p-wrap.p2p-profile-wrap{grid-template-columns:minmax(0,1fr)}
  /* The right sidebar is hidden on phones - it only repeats what the main
     column already shows, and the screen is too narrow for three columns. */
  .p2p-side{display:none}
}
@media (max-width: 620px){
  .p2p-ads-row{grid-template-columns:1fr}
  .p2p-stats{grid-template-columns:1fr 1fr}
  .p2p-msg{max-width:100%}
  .p2p-ad-price{font-size:1.35rem}
  .p2p-ad-go form{right:auto;left:0;width:100%;min-width:210px}
  .p2p-ad-name{max-width:38%}
  .p2p-prof-grid{grid-template-columns:1fr}
  /* Keep + / input / Send on one row - a wrap pushed Send onto the
     fixed bottom nav bar. */
  .p2p-chat-form{flex-wrap:nowrap}
  .p2p-chat-form .field{min-width:0}
}

/* ===== Groups page (tabbed) ===== */
a.grid-card-cover { text-decoration: none; }
.group-card { display: flex; flex-direction: column; }
.group-card .grid-card-body { display: flex; flex-direction: column; }
.group-card .grid-card-desc { flex: 1 1 auto; }
.group-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 4px 0 8px;
}
.group-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gc-pill {
  background: var(--hover);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  font-weight: 700;
}
.gc-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fb-green);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.groups-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.groups-panel-head .section-title { margin: 0 0 12px; }
.groups-search {
  position: relative;
  flex: 0 1 280px;
  min-width: 180px;
  margin-bottom: 12px;
}
.groups-search > i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.9rem;
  pointer-events: none;
}
.groups-search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.groups-search input:focus {
  outline: none;
  border-color: var(--fb-blue);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
}
.groups-create-lead { margin: 0 0 6px; }
@media (max-width: 640px) {
  .groups-panel-head { flex-direction: column; align-items: stretch; }
  .groups-search { flex: 1 1 auto; }
}

/* ===== Group detail: tabs + admin/members in the left rail ===== */
.group-detail-grid > .group-banner,
.group-detail-grid > .group-actions {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.group-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.group-rail .card { margin: 0; }
.group-rail .sidebar-title { margin: 0 0 6px; }
.group-rail .sidebar-menu li a { padding: 9px 10px; }
.member-more { margin: 8px 0 0; font-size: 0.85rem; }

/* ===== Cover photo + icon for groups & pages ===== */
.group-banner { position: relative; overflow: hidden; }
.group-banner.has-cover { background: #0f172a; }
.banner-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.6));
}
.group-banner .group-banner-icon,
.group-banner .group-banner-info {
  position: relative;
  z-index: 2;
}
.group-banner-icon { overflow: hidden; }
.group-banner-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.media-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.media-btn:hover { background: rgba(15, 23, 42, 0.8); }
.media-input { display: none; }

.grid-card-cover { position: relative; overflow: hidden; }
.grid-card-cover.has-cover { background: #0f172a; }
.grid-card-cover .gcc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.grid-card-cover.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.4));
}
.grid-card-cover > i { position: relative; z-index: 2; }
.grid-card-cover .gcc-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-card-cover .gcc-icon img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .media-btn span { display: none; }
  .media-btn { padding: 8px 10px; }
}


/* ===== Page profile: pages reuse the person-profile look ===== */
.page-profile-cover { background: linear-gradient(135deg, var(--cover-color, #4f46e5), #111827); }
.page-profile-cover.has-cover { background: #0f172a; }
.page-icon-xl img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.page-profile-cover .profile-handle { color: #e5e7eb; }

/* ==================================================================
   GLOBAL CONSISTENCY + SPEED LAYER
   Appended last so it wins over the older per-page rules. The goal is
   one width scale, one heading scale and one card shape everywhere,
   plus removing the small reflows that make pages feel like they jump.
   ================================================================== */

/* ---- 1. Width + spacing scale ---------------------------------------- */
:root {
  --page-max: 1280px;     /* wide: feeds, marketplace, messages, jobs */
  --content-max: 960px;   /* reading: profile, groups/pages feed, notifications, settings */
  --form-max: 640px;      /* single column forms */
  --radius-card: 12px;
}

/* The outer .main-container already supplies the 16px gutter. Columns that
   added their own gutter sat 16px narrower than the member pages, which is
   why "public" pages looked a size smaller. Drop the inner one. */
.layout-public { padding: 0; }
.activity-page { padding: 0; }

/* Reading pages each picked their own width (800-1000). Give them one. */
.content-wide,
.profile-page,
.activity-page,
.ep,
.group-detail-page,
.item-detail-page { max-width: var(--content-max); }

/* Forms share one reading column. */
.form-card { max-width: var(--form-max); }

/* Keep the page from collapsing under the footer while media loads. */
.main-container { min-height: 70vh; }

/* ---- 2. Heading scale (only touches pages that had none) -------------- */
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.25rem; line-height: 1.3; }
h3 { font-size: 1.05rem; line-height: 1.35; }

/* groups/pages shipped an unstyled head block; give it the same shape as
   every other page head (title left, action right). */
.groups-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.groups-head h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.groups-head h1 i { color: var(--fb-blue); }
.groups-head p { margin: 0; }

/* One card shape: the radius used to swing between 8, 14, 16 and 20px
   page to page. .p2p-nav is left out on purpose: it is sticky on desktop and
   a fixed bottom bar on phones, and the bar wants a square edge there. */
.card,
.jobs-side-card,
.gigs-rail,
.gig-dash-side,
.p2p-card,
.content-banner,
.map-card,
.alert { border-radius: var(--radius-card); }

/* ---- 3. Stop the jumping (layout shift) ------------------------------ */
/* Reserving the scrollbar track kills the ~15px sideways jump that happens
   whenever a modal or the mobile drawer locks body scroll. */
html { scrollbar-gutter: stable; }

/* The floating messenger bubble sits over the bottom-right of the footer on
   every page; reserve the corner so the copyright never hides behind it. */
.footer { padding-bottom: 96px; }

/* Sidebars that stuck to 12-16px slid under the 56px sticky topbar. Use the
   same offset as the rest of the site. */
.jobs-side,
.gigs-rail,
.gig-detail-side,
.gig-dash-side,
.gig-form-save { top: 72px; }
.gigs-rail { max-height: calc(100vh - 88px); }
/* .p2p-nav needs the same lift, but only while it is sticky. Below 980px it
   is a fixed bottom bar and its `top` must stay `auto`; a later `top: 72px`
   stretched it up over the whole page and the footer links vanished. */
@media (min-width: 981px) { .p2p-nav { top: 72px; } }

/* Feed media: reserve the multi-photo grid so the post does not expand when
   the pictures arrive, and give single photos a neutral placeholder. */
.post-media-grid { aspect-ratio: 1 / 1; }
.post-media-grid.n-3 { aspect-ratio: 4 / 3; }
.post-media img,
.post-media video { background: var(--bg); display: block; }
.post-media video { width: 100%; max-height: 620px; }

/* ---- 4. Font smoke --------------------------------------------------- */
/* Inter is the UI face; keep the fallback metrics close so the swap is not
   a visible reflow. */
body { font-synthesis: none; text-rendering: optimizeSpeed; }

/* ==================================================================== *
 * Gigs seller dashboard + public profile hero
 * ==================================================================== */

/* ---- Dashboard header ---- */
.gig-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--brand-grad);
  color: #fff;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.22);
}
.gig-dashboard-header-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gig-dashboard-header-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.35rem;
}
.gig-dashboard-header h1 { margin: 0 0 3px; font-size: 1.32rem; font-weight: 700; color: #fff; }
.gig-dashboard-header p { margin: 0; font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); }
.gig-dashboard-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gig-dashboard-header-actions .btn-share {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(4px);
}
.gig-dashboard-header-actions .btn-share:hover { background: rgba(255, 255, 255, 0.28); color: #fff; }
.gig-dashboard-header-actions .btn-share-primary {
  background: #fff; border-color: #fff; color: var(--fb-blue); font-weight: 600;
}
.gig-dashboard-header-actions .btn-share-primary:hover { background: #f4f4ff; color: var(--fb-blue-dark); }

/* ---- Public profile hero preview ---- */
.gig-profile-hero-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gig-profile-hero-cover {
  position: relative;
  height: 150px;
  background: var(--brand-grad);
  overflow: hidden;
}
.gig-profile-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-profile-hero-cover-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 255, 255, 0.28), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.18), transparent 46%),
    var(--brand-grad);
}
.gig-profile-hero-body { position: relative; padding: 0 20px 18px; }
.gig-profile-hero-avatar {
  width: 108px; height: 108px; border-radius: 50%;
  margin-top: -54px;
  border: 4px solid var(--card-bg);
  background: var(--card-bg);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  position: relative;
  z-index: 2;
}
.gig-profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-profile-hero-avatar-fallback,
.gig-profile-hero-avatar-fallback .avatar-inner {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #fff; font-size: 2.1rem; font-weight: 600;
}
.gig-profile-hero-info { padding-top: 10px; }
.gig-profile-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.gig-profile-hero-name { margin: 0 0 4px; font-size: 1.24rem; font-weight: 700; line-height: 1.25; }
.gig-profile-hero-sub {
  margin: 0; font-size: 0.82rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.gig-profile-hero-sub i { color: var(--fb-blue); }
.gig-profile-hero-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px;
  font-size: 0.84rem; font-weight: 600;
  color: var(--fb-blue);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gig-profile-hero-btn:hover { background: var(--hover); border-color: #c7c7d1; }
.gig-profile-hero-bio {
  margin: 12px 0 0; font-size: 0.88rem; line-height: 1.55;
  color: var(--text-secondary); max-width: 70ch;
}

/* ---- Settings cards ---- */
.gig-settings-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.gig-settings-card-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--hover) 55%, var(--card-bg));
}
.gig-settings-card-icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: rgba(79, 70, 229, 0.1);
  color: var(--fb-blue);
  font-size: 1rem;
}
.gig-settings-card-header h3 { margin: 0 0 2px; font-size: 0.98rem; font-weight: 650; }
.gig-settings-card-header p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }
.gig-settings-card-body { padding: 16px 18px 18px; }

.gig-nickname-current {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 0.88rem;
}
.gig-nickname-current strong { font-size: 0.95rem; }
.gig-nickname-meta { font-size: 0.76rem; color: var(--text-secondary); }
.gig-nickname-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gig-nickname-form .form-control { max-width: 300px; }
.gig-settings-hint {
  margin: 10px 0 0; font-size: 0.78rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.gig-settings-hint i { color: var(--accent); }

/* ---- Icon-in-place photo uploads ---- */
.gig-photos-icon-row { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.gig-photo-icon-form { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gig-photo-icon-wrap { position: relative; display: block; cursor: pointer; line-height: 0; }
.gig-photo-icon-wrap input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; pointer-events: none;
}
.gig-photo-icon-avatar {
  position: relative;
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; background: var(--hover);
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--border), 0 3px 10px rgba(0, 0, 0, 0.1);
}
.gig-photo-icon-avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-photo-icon-avatar > span {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: #fff; font-size: 1.9rem; font-weight: 600;
}
.gig-photo-icon-cover {
  position: relative;
  width: 190px; height: 96px; border-radius: 12px;
  overflow: hidden; background: var(--hover);
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 1px var(--border), 0 3px 10px rgba(0, 0, 0, 0.1);
}
.gig-photo-icon-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-photo-icon-cover-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255, 255, 255, 0.2), transparent 48%),
    var(--brand-grad);
}
.gig-photo-icon-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(17, 17, 27, 0.5);
  color: #fff; font-size: 1.15rem;
  opacity: 0; transition: opacity 0.16s ease;
}
.gig-photo-icon-wrap:hover .gig-photo-icon-overlay,
.gig-photo-icon-wrap:focus-within .gig-photo-icon-overlay { opacity: 1; }
.gig-photo-icon-label {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .gig-dashboard-header { padding: 16px; }
  .gig-dashboard-header h1 { font-size: 1.15rem; }
  .gig-profile-hero-cover { height: 118px; }
  .gig-profile-hero-avatar { width: 90px; height: 90px; margin-top: -45px; }
  .gig-photos-icon-row { gap: 20px; }
  .gig-photo-icon-cover { width: 150px; height: 84px; }
}

@media (min-width: 641px) {
  .gig-profile-hero-avatar {
    position: absolute; left: 20px; top: -54px; margin-top: 0;
  }
  .gig-profile-hero-info { margin-left: 128px; padding-top: 8px; min-height: 62px; }
}

.gig-profile-hero-avatar-fallback img,
.gig-profile-hero-avatar img.av-img,
.gig-photo-icon-avatar > span img,
.gig-photo-icon-avatar img.av-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gig-details-form { display: flex; flex-direction: column; gap: 12px; }
.gig-details-form label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
}
.gig-details-form .form-control { width: 100%; }
.gig-details-form .btn-share { align-self: flex-start; }

/* ==================================================================== *
 * Public Gigs seller profile (/gigs/sellers/:id)
 * ==================================================================== */
.seller-page { padding: 16px; }
.seller-shell { max-width: 1120px; margin: 0 auto; }
.seller-hero { margin-bottom: 18px; }

.seller-verified {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; padding: 3px 9px;
  border-radius: 999px; vertical-align: middle;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
}
.seller-dot { margin: 0 6px; color: var(--text-secondary); }

.seller-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--hover) 45%, var(--card-bg));
}
.seller-stat { padding: 12px 16px; text-align: center; }
.seller-stat + .seller-stat { border-left: 1px solid var(--border); }
.seller-stat-n { display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
.seller-stat-star { color: var(--accent); font-size: 0.8rem; }
.seller-stat-l {
  display: block; margin-top: 2px;
  font-size: 0.72rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.seller-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.seller-col-main > .seller-card + .seller-card,
.seller-col-side > .seller-card + .seller-card { margin-top: 16px; }

.seller-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.seller-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--hover) 55%, var(--card-bg));
}
.seller-card-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(79, 70, 229, 0.1);
  color: var(--fb-blue); font-size: 0.9rem;
}
.seller-card-head h2 {
  margin: 0; font-size: 0.96rem; font-weight: 650;
  display: flex; align-items: center; gap: 8px;
}
.seller-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: var(--hover);
  font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
}
.seller-card-body { padding: 16px 18px; }
.seller-text { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.seller-empty {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-secondary);
}
.seller-empty i { color: var(--border); }

.seller-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seller-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: var(--fb-blue-dark);
  border: 1px solid rgba(79, 70, 229, 0.16);
  font-size: 0.8rem; font-weight: 600;
}
.seller-chip i { font-size: 0.66rem; }

/* verification card */
.seller-verify { padding: 20px 18px; text-align: center; }
.seller-verify-icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 10px;
  font-size: 1.15rem;
}
.seller-verify.is-ok .seller-verify-icon { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.seller-verify.is-warn .seller-verify-icon { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.seller-verify h3 { margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; }
.seller-verify p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }

/* at a glance */
.seller-glance { list-style: none; margin: 0; padding: 0; }
.seller-glance li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 0.85rem;
}
.seller-glance li + li { border-top: 1px dashed var(--border); }
.seller-glance span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.seller-glance span i { width: 14px; text-align: center; color: var(--fb-blue); font-size: 0.78rem; }
.seller-glance strong { font-size: 0.88rem; }
.seller-glance em { font-style: normal; font-weight: 400; color: var(--text-secondary); }

/* side CTA */
.seller-cta { padding: 18px; text-align: center; background: linear-gradient(160deg, #f5f3ff, #ffffff); }
.seller-cta h3 { margin: 0 0 6px; font-size: 0.92rem; }
.seller-cta p { margin: 0 0 12px; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); }
.seller-cta .btn-share { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .seller-columns { grid-template-columns: minmax(0, 1fr); }
  .seller-col-side { order: 2; }
}
@media (max-width: 640px) {
  .seller-page { padding: 10px; }
  .seller-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seller-stat { padding: 10px 12px; }
  .seller-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .seller-stat:nth-child(4) { border-top: 1px solid var(--border); }
  .seller-card-head { padding: 12px 14px; }
  .seller-card-body { padding: 14px; }
  .seller-cta { background: var(--card-bg); }
}

/* The Gigs bottom nav is fixed: keep the last card and the footer from
   sitting underneath it. */
body:has(.gigs-bottom-nav) { padding-bottom: 64px; }

/* ===== Gigs Profile Photo Edit ===== */
.gig-profile-photo-edit { width: 100%; }
.gig-profile-photo-edit-wrap { position: relative; }
.gig-profile-cover-area { position: relative; width: 100%; }
.gig-profile-cover-label { display: block; position: relative; width: 100%; height: 200px; border-radius: 12px; overflow: hidden; cursor: pointer; background: #e5e7eb; }
.gig-profile-cover-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.gig-profile-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-profile-cover-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-profile-cover-change {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s;
}
.gig-profile-cover-label:hover .gig-profile-cover-change { background: rgba(0,0,0,0.8); }
.gig-profile-avatar-area { position: absolute; left: 24px; bottom: -50px; }
.gig-profile-avatar-label { display: block; position: relative; cursor: pointer; }
.gig-profile-avatar-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.gig-profile-avatar-inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gig-profile-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.gig-profile-avatar-inner span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
}
.gig-profile-avatar-change {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 3;
}
.gig-profile-avatar-label:hover .gig-profile-avatar-change { background: rgba(0,0,0,0.9); }
.gig-settings-card-body { padding-top: 24px; }
@media (max-width: 640px) {
  .gig-profile-cover-label { height: 140px; }
  .gig-profile-avatar-area { left: 16px; bottom: -40px; }
  .gig-profile-avatar-inner { width: 80px; height: 80px; }
  .gig-profile-avatar-inner span { font-size: 1.6rem; }
  .gig-profile-avatar-change { width: 28px; height: 28px; font-size: 0.75rem; }
}

.gig-settings-card-body--photos { padding: 0; }
.gig-profile-photo-edit { width: 100%; }
.gig-profile-photo-edit-wrap { position: relative; }
.gig-profile-cover-area { position: relative; width: 100%; height: 220px; overflow: hidden; background: #e5e7eb; }
.gig-profile-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-profile-cover-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-cover-change-form { position: absolute; right: 16px; bottom: 16px; z-index: 5; }
.gig-cover-change-form input[type="file"] { display: none; }
.gig-profile-cover-change {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15,15,20,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.2s;
}
.gig-profile-cover-change:hover { background: rgba(15,15,20,0.9); }
.gig-profile-avatar-row { position: relative; display: flex; justify-content: flex-start; padding: 0 20px; margin-top: -56px; }
.gig-profile-avatar-area { position: relative; }
.gig-avatar-change-form { position: absolute; right: -2px; bottom: -2px; z-index: 5; }
.gig-avatar-change-form input[type="file"] { display: none; }
.gig-profile-avatar-inner {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 5px solid var(--card-bg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.gig-profile-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
.gig-profile-avatar-inner span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
.gig-profile-avatar-change {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15,15,20,0.75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.gig-profile-avatar-change:hover { background: rgba(15,15,20,0.95); }
@media (max-width: 640px) {
  .gig-profile-cover-area { height: 150px; }
  .gig-profile-avatar-row { padding: 0 16px; margin-top: -44px; }
  .gig-profile-avatar-inner { width: 88px; height: 88px; border-width: 4px; }
  .gig-profile-avatar-inner span { font-size: 1.8rem; }
  .gig-profile-avatar-change { width: 32px; height: 32px; font-size: 0.8rem; }
  .gig-profile-cover-change { width: 34px; height: 34px; right: 12px; bottom: 12px; }
}

.gig-photo-stack { display: flex; flex-direction: column; gap: 16px; }
.gig-cover-block { display: flex; flex-direction: column; gap: 10px; }
.gig-cover-media { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: #e5e7eb; }
.gig-cover-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-cover-media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-photo-action-row { display: flex; justify-content: flex-end; }
.gig-photo-action-form input[type="file"] { display: none; }
.gig-photo-camera-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.2s, color 0.2s;
}
.gig-photo-camera-btn:hover { background: #e5e7eb; color: #111827; }
.gig-avatar-block { display: flex; flex-direction: column; gap: 10px; }
.gig-avatar-row { display: flex; align-items: center; }
.gig-avatar-media {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--card-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.gig-avatar-media img { width: 100%; height: 100%; object-fit: cover; }
.gig-avatar-media span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
@media (max-width: 640px) {
  .gig-cover-media { height: 150px; }
  .gig-avatar-media { width: 88px; height: 88px; border-width: 3px; }
  .gig-avatar-media span { font-size: 1.8rem; }
  .gig-photo-camera-btn { width: 34px; height: 34px; }
}

.gig-photo-under-row { display: flex; justify-content: flex-end; margin-top: -20px; padding-right: 12px; }
.gig-photo-under-row--avatar { justify-content: flex-start; padding-left: 86px; padding-right: 0; }
.gig-photo-under-form input[type="file"] { display: none; }
.gig-photo-under-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.gig-photo-under-btn:hover { background: #f9fafb; }
@media (max-width: 640px) {
  .gig-photo-under-row { margin-top: -18px; padding-right: 10px; }
  .gig-photo-under-row--avatar { padding-left: 68px; }
  .gig-photo-under-btn { width: 34px; height: 34px; }
}

.gig-photo-stack { display: flex; flex-direction: column; gap: 14px; }
.gig-cover-block { position: relative; }
.gig-cover-media { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: #e5e7eb; }
.gig-cover-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-cover-media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-cover-under-form { position: absolute; right: 14px; bottom: 14px; }
.gig-cover-under-form input[type="file"] { display: none; }
.gig-photo-under-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15,15,20,0.7);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.gig-photo-under-btn:hover { background: rgba(15,15,20,0.9); }
.gig-avatar-wrap { display: flex; align-items: flex-end; gap: 12px; margin-top: -56px; padding: 0 18px; position: relative; z-index: 2; }
.gig-avatar-media {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--card-bg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  flex-shrink: 0;
}
.gig-avatar-media img { width: 100%; height: 100%; object-fit: cover; }
.gig-avatar-media span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
.gig-avatar-under-form input[type="file"] { display: none; }
.gig-avatar-under-form { margin-bottom: 4px; }
@media (max-width: 640px) {
  .gig-cover-media { height: 150px; }
  .gig-cover-under-form { right: 10px; bottom: 10px; }
  .gig-avatar-wrap { margin-top: -44px; padding: 0 14px; gap: 10px; }
  .gig-avatar-media { width: 88px; height: 88px; border-width: 3px; }
  .gig-avatar-media span { font-size: 1.8rem; }
  .gig-photo-under-btn { width: 34px; height: 34px; }
}

.gig-photo-stack { display: flex; flex-direction: column; gap: 14px; }
.gig-cover-wrap { width: 100%; }
.gig-cover-media { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: #e5e7eb; }
.gig-cover-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-cover-media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-profile-media-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gig-profile-photo-wrap { margin-top: -56px; padding-left: 18px; }
.gig-avatar-media {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--card-bg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.gig-avatar-media img { width: 100%; height: 100%; object-fit: cover; }
.gig-avatar-media span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
.gig-photo-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-right: 6px; }
.gig-photo-form input[type="file"] { display: none; }
.gig-photo-change-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.gig-photo-change-icon:hover { background: #f9fafb; }
@media (max-width: 640px) {
  .gig-cover-media { height: 150px; }
  .gig-profile-photo-wrap { margin-top: -44px; padding-left: 14px; }
  .gig-avatar-media { width: 88px; height: 88px; border-width: 3px; }
  .gig-avatar-media span { font-size: 1.8rem; }
  .gig-photo-change-icon { width: 34px; height: 34px; }
  .gig-photo-actions { gap: 8px; }
}

.gig-cover-wrap { position: relative; width: 100%; }
.gig-cover-media { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: #e5e7eb; }
.gig-cover-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gig-cover-media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gig-cover-upload-form { position: absolute; right: 14px; bottom: 14px; }
.gig-cover-upload-form input[type="file"] { display: none; }
.gig-cover-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15,15,20,0.72);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.gig-cover-edit-btn:hover { background: rgba(15,15,20,0.9); }
.gig-profile-bottom { padding: 0 18px; margin-top: -56px; position: relative; z-index: 2; }
.gig-avatar-wrap { display: flex; align-items: flex-end; gap: 12px; }
.gig-avatar-media {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--card-bg);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.gig-avatar-media img { width: 100%; height: 100%; object-fit: cover; }
.gig-avatar-media span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}
.gig-avatar-upload-form input[type="file"] { display: none; }
.gig-avatar-edit-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  margin-bottom: 6px;
}
.gig-avatar-edit-btn:hover { background: #f9fafb; }
@media (max-width: 640px) {
  .gig-cover-media { height: 150px; }
  .gig-cover-upload-form { right: 10px; bottom: 10px; }
  .gig-cover-edit-btn { padding: 7px 12px; font-size: 0.85rem; }
  .gig-profile-bottom { margin-top: -44px; padding: 0 14px; }
  .gig-avatar-media { width: 88px; height: 88px; border-width: 3px; }
  .gig-avatar-media span { font-size: 1.8rem; }
  .gig-avatar-edit-btn { width: 34px; height: 34px; }
}