/* ================================================================
   GRAPHYTI PUBLIC LANDING ? Final Stylesheet
   Verified against public-view.js and public-landing.php
   X + Reddit inspired design
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* -- Tokens --------------------------------------------------- */
:root {
  --brand:     #ff4500;
  --brand-dk:  #d93a00;
  --brand-bg:  #fff4f0;
  --blue:      #0079d3;
  --blue-bg:   #e8f0fe;
  --surface:   #ffffff;
  --surface-2: #f6f7f8;
  --border:    #edeff1;
  --border-2:  #ccced0;
  --ink:       #1c1c1c;
  --ink-2:     #3c3c3c;
  --ink-3:     #576069;
  --ink-4:     #878a8c;
  --bg:        #dae0e6;
  --r:         4px;
  --r-lg:      12px;
  --r-pill:    9999px;
  --sh:        0 1px 3px rgba(0,0,0,.08);
  --sh-md:     0 2px 12px rgba(0,0,0,.10);
  --nav-h:     48px;
  --font:      'Inter', system-ui, -apple-system, sans-serif;
}

/* -- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }

/* -- Navbar --------------------------------------------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  z-index: 1000; padding: 0 20px;
  display: flex; align-items: center;
  box-shadow: var(--sh); overflow: hidden;
}
.nav-container {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; width: 100%; gap: 12px;
}
.logo-card { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; margin-right: 8px; }
.logo-text { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.nav-links { display: flex; gap: 2px; }
.nav-link {
  color: var(--ink-3); font-weight: 500; font-size: 13.5px;
  padding: 5px 10px; border-radius: var(--r-pill);
  display: flex; align-items: center; gap: 5px; transition: all .14s;
}
.nav-link:hover { background: var(--brand-bg); color: var(--brand); }
.nav-auth { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.btn {
  padding: 6px 16px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; border: none; font-family: var(--font);
  text-decoration: none; line-height: 1.4;
}
.btn-outline { border: 1.5px solid var(--brand); color: var(--brand); background: transparent; }
.btn-outline:hover { background: var(--brand-bg); }
.btn-filled { background: var(--brand); color: #fff; }
.btn-filled:hover { background: var(--brand-dk); transform: translateY(-1px); }
.mobile-menu-toggle {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--ink-3); font-size: 20px; padding: 5px; margin-left: auto;
}

/* -- Mobile CTA ----------------------------------------------- */
.mobile-hero-cta {
  display: none; margin-top: var(--nav-h);
  background: var(--brand); color: #fff; padding: 16px; text-align: center;
}
.mobile-hero-cta h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.mobile-hero-cta p  { font-size: 12.5px; opacity: .85; }

/* -- Hero ----------------------------------------------------- */
.hero {
  background: #1a1a1b; color: #fff;
  padding: calc(var(--nav-h) + 72px) clamp(16px,5vw,80px) 64px;
  text-align: center; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 25% 60%, rgba(255,69,0,.18), transparent),
    radial-gradient(ellipse 45% 55% at 75% 30%, rgba(0,121,211,.14), transparent);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(26px,5vw,52px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1px; margin-bottom: 16px; color: #fff;
}
.hero h1 em { font-style: normal; color: #ff6534; }
.hero p {
  font-size: clamp(14px,2vw,17px); opacity: .72;
  max-width: 480px; margin: 0 auto 28px; line-height: 1.7;
}
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero-btn {
  padding: 11px 26px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; font-family: var(--font);
  text-decoration: none; transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(255,69,0,.4); }
.hero-btn-primary:hover { background: var(--brand-dk); transform: translateY(-2px); }
.hero-btn-secondary { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.hero-btn-secondary:hover { background: rgba(255,255,255,.18); }
.hero-stats {
  display: flex; justify-content: center;
  gap: clamp(20px,5vw,60px); flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.stat { text-align: center; }
.stat-number { font-size: clamp(24px,4vw,36px); font-weight: 800; color: #ff6534; display: block; line-height: 1; margin-bottom: 4px; }
.stat-label  { font-size: 11.5px; opacity: .55; letter-spacing: .5px; text-transform: uppercase; }

/* -- Community Carousel --------------------------------------- */
.community-carousel-section { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 0; }
.community-carousel-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(10px,2vw,24px); }
.carousel-heading { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; }
.carousel-wrapper { position: relative; overflow: hidden; }
.community-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 8px; scrollbar-width: none; scroll-behavior: smooth; }
.community-scroll::-webkit-scrollbar { display: none; }
.community-card { flex: 0 0 140px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; cursor: pointer; }
.community-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--brand); }
.community-link { text-decoration: none; color: inherit; display: block; }
.card-banner { height: 44px; background: linear-gradient(135deg,#ff4500,#ff7653); background-size: cover; background-position: center; }
.card-icon { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--surface); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; margin: -16px 10px 0; position: relative; z-index: 1; }
.card-info { padding: 5px 10px 10px; }
.card-name { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.card-info p { font-size: 10.5px; color: var(--ink-4); margin: 0; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 28px; height: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--sh); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 11px; transition: all .14s; }
.carousel-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.carousel-btn.left  { left: -4px; }
.carousel-btn.right { right: -4px; }

/* -- 3-Column Layout ------------------------------------------- */
.main-container {
  max-width: 1200px; margin: 0 auto;
  padding: 18px clamp(8px,1.5vw,20px);
  display: flex; gap: 16px; align-items: flex-start;
}
.main-container > * { min-width: 0; }

/* Constrain the feed column so posts don't stretch too wide */
.main-feed {
  flex: 0 1 640px;   /* never grow beyond 640px */
  min-width: 320px;
  max-width: 640px;
}

/* ---------------------------------------------------------------
   LEFT SIDEBAR
   --------------------------------------------------------------- */
.sidebar-left { width: 260px; flex-shrink: 0; }

.sidebar-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 12px;
  overflow: hidden; box-shadow: var(--sh);
}
.sidebar-header {
  padding: 10px 14px; background: #1a1a1b; color: #fff;
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px;
}
.sidebar-header i { opacity: .75; font-size: 13px; }

/* -- Popular Groups list -- */
.community-list { list-style: none; }
.community-item {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.community-item:hover { background: var(--surface-2); }
.community-item:last-child { border-bottom: none; }

/* The anchor wraps the entire item row */
.community-item > a,
.community-item .community-info-link {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 14px;
  text-decoration: none; color: inherit; width: 100%;
}

/* For items that don't use an anchor wrapper ? use .community-info directly */
.community-info {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 14px; width: 100%;
}

.community-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), #ff7653);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.community-details { flex: 1; min-width: 0; }
/* Full text wrap ? no truncation */
.community-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  line-height: 1.35; margin-bottom: 1px; display: block;
}
.community-name:hover { color: var(--brand); }
.community-members { font-size: 11.5px; color: var(--ink-4); }

/* Create community card */
.sidebar-card.create-community {
  padding: 16px 14px; text-align: center;
  background: linear-gradient(160deg,#fff4f0,#fef9f0);
  border: 1px solid #ffd9c8;
}
.create-community h3 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.create-community p  { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }

/* ---------------------------------------------------------------
   TAB BAR
   --------------------------------------------------------------- */
.tabs-container {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 10px;
  box-shadow: var(--sh); overflow: visible; position: relative;
}
.tabs-wrapper {
  display: flex; align-items: center;
  padding: 4px 8px; overflow: visible; gap: 4px;
}
.tabs-list {
  display: flex; list-style: none;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; gap: 2px; flex: 1; min-width: 0;
  padding: 2px 0;
}
.tabs-list::-webkit-scrollbar { display: none; }
.tab-item { flex-shrink: 0; }
.tab-link {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-4); border-radius: var(--r-pill);
  transition: all .14s; white-space: nowrap;
  text-decoration: none;
}
.tab-link i { font-size: 13px; }
.tab-link:hover  { color: var(--brand); background: var(--brand-bg); }
.tab-link.active {
  color: var(--brand); background: var(--brand-bg);
  font-weight: 700;
}
/* Dropdown for overflow tabs */
.dropdown-container { position: relative; flex-shrink: 0; }
#dropdown-toggle {
  background: none; border: 1px solid var(--border);
  border-radius: var(--r); padding: 5px 9px;
  cursor: pointer; color: var(--ink-3);
  font-size: 14px; display: flex; align-items: center; transition: all .14s;
}
#dropdown-toggle:hover { border-color: var(--brand); color: var(--brand); }
#dropdown-toggle .bi { font-size: 14px !important; line-height: 1 !important; }
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
  padding: 4px 0 !important; font-size: 13.5px !important;
  min-width: 140px !important;
}
.dropdown-item { padding: 8px 14px !important; color: var(--ink-2) !important; font-size: 13.5px !important; transition: background .12s !important; }
.dropdown-item:hover  { background: var(--brand-bg) !important; color: var(--brand) !important; }
.dropdown-item.active { color: var(--brand) !important; font-weight: 700 !important; background: var(--brand-bg) !important; }

/* ---------------------------------------------------------------
   MAIN FEED
   --------------------------------------------------------------- */
.loading-spinner { text-align: center; padding: 36px 20px; color: var(--ink-4); font-size: 14px; }
.loading-spinner i { font-size: 20px; color: var(--brand); display: block; margin-bottom: 8px; }

/* ---------------------------------------------------------------
   POST CARDS
   Structure (fetch-public-posts.php):
   div.card.mb-4.shadow-sm.post-card[data-type]
     .card-body > .post-body
       .post-dropdown > a > i.fas.fa-ellipsis-h
       .top-head
         .fb-user-thumb > img.owner_img
         .fb-user-details > a + span.post_time
         .user-sub-id
       .post_body
       .post-actions.d-flex
   --------------------------------------------------------------- */
.card.post-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh) !important;
  margin-bottom: 10px !important;
  overflow: visible !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.card.post-card:hover { border-color: var(--border-2) !important; box-shadow: var(--sh-md) !important; }
.card.post-card > .card-body { padding: 0 !important; }
.card.post-card .post-body { padding: 0 !important; overflow: visible !important; }

/* Three-dot menu */
.post-dropdown {
  padding: 10px 12px 0 !important;
  display: flex !important; justify-content: flex-end !important;
  overflow: visible !important; position: relative !important;
}
.post-dropdown > a {
  width: 28px; height: 28px;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important; color: var(--ink-4) !important;
  text-decoration: none !important; transition: background .12s !important;
}
.post-dropdown > a:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.post-dropdown .fas,
.post-dropdown .far,
.post-dropdown .fab { font-size: 14px !important; color: inherit !important; line-height: 1 !important; }
.post-dropdown .dropdown-menu { z-index: 9999 !important; border-radius: var(--r-lg) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 24px rgba(0,0,0,.14) !important; min-width: 148px !important; padding: 4px 0 !important; }
.post-dropdown .dropdown-item { padding: 8px 12px !important; font-size: 13px !important; }

/* Post header: CSS Grid  (col1=avatar rows 1-2 | col2 row1=name+time | col2 row2=@user) */
.top-head {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important; row-gap: 0 !important;
  align-items: start !important;
  padding: 4px 12px 8px !important;
  height: auto !important; min-height: auto !important;
  border: none !important; overflow: visible !important;
}
.fb-user-thumb, .sub-fb-user-thumb {
  grid-column: 1 !important; grid-row: 1/3 !important;
  width: 40px !important; min-width: 40px !important;
  float: none !important; margin: 0 !important; align-self: start !important;
}
.fb-user-thumb img, .sub-fb-user-thumb img,
.fb-user-thumb .owner_img, .sub-fb-user-thumb .owner_img {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important; object-fit: cover !important;
  border: 1.5px solid var(--border) !important;
  display: block !important; margin: 0 !important; float: none !important;
}
.fb-user-details, .sub-fb-user-details {
  grid-column: 2 !important; grid-row: 1 !important;
  display: flex !important; flex-direction: row !important;
  flex-wrap: wrap !important; align-items: baseline !important;
  gap: 0 4px !important; height: auto !important; border: none !important;
  min-width: 0 !important; margin: 0 !important; float: none !important;
}
.fb-user-details > a, .sub-fb-user-details > a {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--ink) !important; text-decoration: none !important;
  line-height: 1.4 !important; white-space: nowrap !important;
}
.fb-user-details > a:hover, .sub-fb-user-details > a:hover { color: var(--brand) !important; }
.fb-user-details .post_time, .sub-fb-user-details .post_time {
  font-size: 12px !important; color: var(--ink-4) !important; font-weight: 400 !important; white-space: nowrap !important;
}
.fb-user-details img, .sub-fb-user-details img {
  width: 13px !important; height: 13px !important; padding: 0 !important;
  margin: 0 2px !important; vertical-align: middle !important;
  border-radius: 50% !important; display: inline !important; border: none !important; float: none !important;
}
.user-sub-id {
  grid-column: 2 !important; grid-row: 2 !important;
  font-size: 12px !important; color: var(--ink-4) !important;
  line-height: 1.3 !important; margin: 0 0 2px !important;
  display: block !important; padding: 0 !important;
}
.preview_post { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; margin: 6px 0; background: var(--surface-2); }
.preview_post .top-head { padding: 0 0 6px !important; }
.post_body { padding: 0 12px 10px !important; width: 100% !important; box-sizing: border-box !important; }
.content-para { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.7 !important; word-break: break-word !important; overflow-wrap: break-word !important; font-family: var(--font) !important; letter-spacing: normal !important; word-spacing: normal !important; }
.content-para a { color: var(--blue) !important; }
.content-para a:hover { text-decoration: underline !important; }
span.text-dark, a.text-dark { color: var(--blue) !important; font-weight: 600 !important; font-size: 13.5px !important; }

/* Article card */
.fb-article-card { margin: 6px 0 !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; overflow: hidden !important; background: var(--surface-2) !important; }
.fb-article-body { padding: 10px 12px !important; }
.fb-article-text { font-size: 14px !important; color: var(--ink-2) !important; line-height: 1.7 !important; }
.fb-article-text.truncated { display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.fb-article-toggle { font-size: 13px !important; font-weight: 600 !important; color: var(--blue) !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; margin-top: 4px !important; display: inline-block !important; }

/* Media box */
.media-box { margin: 6px 0 !important; border-radius: var(--r-lg) !important; overflow: hidden !important; border: 1px solid var(--border) !important; }
.media-box img { width: 100% !important; display: block !important; max-height: 460px !important; object-fit: cover !important; height: auto !important; }
.media-box video { width: 100% !important; display: block !important; max-height: 380px !important; }

/* Gallery grid */
.gallery-grid { display: grid !important; gap: 3px !important; margin: 6px 0 0 !important; border-radius: var(--r-lg) !important; overflow: hidden !important; }
.gallery-grid.grid-1 { grid-template-columns: 1fr !important; }
.gallery-grid.grid-2 { grid-template-columns: 1fr 1fr !important; }
.gallery-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.gallery-grid.grid-4 { grid-template-columns: 1fr 1fr !important; }
.gallery-item img { width: 100% !important; height: 200px !important; object-fit: cover !important; display: block !important; transition: transform .2s !important; }
.gallery-item:hover img { transform: scale(1.03) !important; }

/* Poll */
.poll-options-wrapper, .poll-container { padding: 6px 12px 10px !important; }
.poll-option { position: relative !important; display: flex !important; align-items: center !important; padding: 9px 12px !important; margin-bottom: 6px !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-lg) !important; background: var(--surface) !important; overflow: hidden !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: border-color .14s !important; }
.poll-option:hover { border-color: var(--brand) !important; }
.poll-option .poll-fill { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; background: var(--brand-bg) !important; z-index: 0 !important; transition: width .4s ease !important; }
.poll-option span { position: relative !important; z-index: 1 !important; }
.poll-pct { margin-left: auto !important; font-weight: 700 !important; color: var(--brand) !important; font-size: 13px !important; }
.poll-meta, .poll-votes-info { font-size: 12px !important; color: var(--ink-4) !important; padding: 2px 0 5px !important; display: flex !important; align-items: center !important; gap: 5px !important; }

/* Link preview */
.url-card, .link-card, .fb-link-preview { display: block !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; overflow: hidden !important; margin: 6px 0 !important; background: var(--surface-2) !important; text-decoration: none !important; color: inherit !important; transition: border-color .14s !important; }
.url-card:hover, .link-card:hover { border-color: var(--blue) !important; }
.url-card img, .link-card img { width: 100% !important; max-height: 190px !important; object-fit: cover !important; display: block !important; }
.url-meta, .link-meta { padding: 9px 11px !important; }
.url-domain, .link-domain { font-size: 10.5px !important; color: var(--ink-4) !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 2px !important; }
.url-title, .link-title { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ink) !important; line-height: 1.4 !important; }
.url-desc, .link-desc { font-size: 12px !important; color: var(--ink-4) !important; margin-top: 2px !important; }

/* Post actions */
.post-actions.d-flex { display: flex !important; align-items: center !important; gap: 1px !important; padding: 5px 8px 9px !important; border-top: 1px solid var(--border) !important; margin-top: 4px !important; }
.comment-toggle, .recommend-btn, .pin-btn, .like-btn, .share-btn {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 5px 9px !important; border-radius: var(--r-pill) !important;
  cursor: pointer !important; font-size: 12.5px !important; font-weight: 500 !important;
  color: var(--ink-4) !important; background: transparent !important;
  transition: background .14s, color .14s !important;
  white-space: nowrap !important; flex-shrink: 1 !important; font-family: var(--font) !important;
}
.comment-toggle:hover { background: var(--blue-bg) !important; color: var(--blue) !important; }
.recommend-btn:hover  { background: var(--brand-bg) !important; color: var(--brand) !important; }
.pin-btn:hover        { background: #fffbeb !important; color: #d97706 !important; }
.like-btn:hover       { background: #fef2f2 !important; color: #e53e3e !important; }
.share-btn:hover      { background: #e8f5e9 !important; color: #2e7d32 !important; }
.comment-toggle i, .recommend-btn i, .pin-btn i, .like-btn i, .share-btn i { font-size: 13px !important; line-height: 1 !important; }
.recommend-count, .like-count { font-size: 12px !important; }

/* ---------------------------------------------------------------
   MEDIA TAB  (#media-grid-cards.media-grid-cards from loadMedia())
   --------------------------------------------------------------- */
.media-grid-cards { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; }
.media-card { position: relative !important; border-radius: var(--r-lg) !important; overflow: hidden !important; background: var(--surface-2) !important; cursor: pointer !important; aspect-ratio: 1/1 !important; transition: transform .22s, box-shadow .22s !important; }
.media-card img   { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.media-card video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ---------------------------------------------------------------
   PEOPLE TAB  (createCompactUserElement)
   HTML: div.compact-user-card
     div.compact-user-main
       div.compact-user-avatar > img + span.verified-icon
       div.compact-user-info
         div.compact-user-header > span.compact-display-name [+ span.trending-badge]
         div.compact-user-details > span.compact-username + span.compact-followers
         p.compact-user-bio
     button.btn.btn-outline.follow-btn
   --------------------------------------------------------------- */
.compact-user-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 8px;
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 0 !important; transition: border-color .15s, box-shadow .15s; overflow: visible !important;
}
.compact-user-card:hover { border-color: var(--border-2); box-shadow: var(--sh-md); }
.compact-user-main { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 11px !important; flex: 1 !important; min-width: 0 !important; }
.compact-user-avatar { position: relative !important; flex-shrink: 0 !important; width: 46px !important; height: 46px !important; }
.compact-user-avatar img { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover !important; border: 1.5px solid var(--border) !important; display: block !important; }
.compact-user-avatar .verified-icon, .verified-icon { position: absolute !important; bottom: -1px !important; right: -1px !important; width: 16px !important; height: 16px !important; background: var(--blue) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 2px solid var(--surface) !important; }
.verified-icon i { font-size: 8px !important; color: #fff !important; }
.compact-user-info { flex: 1 !important; min-width: 0 !important; }
.compact-user-header { display: flex !important; align-items: center !important; gap: 5px !important; flex-wrap: wrap !important; margin-bottom: 1px !important; }
.compact-display-name { font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 180px !important; }
.trending-badge { font-size: 10.5px !important; color: var(--brand) !important; background: var(--brand-bg) !important; padding: 1px 7px !important; border-radius: var(--r-pill) !important; flex-shrink: 0 !important; }
.compact-user-details { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 3px !important; }
.compact-username  { font-size: 12px !important; color: var(--ink-4) !important; }
.compact-followers { font-size: 12px !important; color: var(--ink-3) !important; }
.compact-user-bio  { font-size: 12.5px !important; color: var(--ink-3) !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.compact-user-card .btn.btn-outline.follow-btn,
.compact-user-card .follow-btn {
  flex-shrink: 0 !important; align-self: center !important; margin-left: 12px !important;
  padding: 6px 16px !important; border-radius: var(--r-pill) !important;
  font-size: 13px !important; font-weight: 700 !important;
  cursor: pointer !important; white-space: nowrap !important;
  background: var(--brand) !important; color: #fff !important;
  border: 1.5px solid var(--brand) !important;
  transition: all .15s !important; font-family: var(--font) !important;
}
.compact-user-card .btn.btn-outline.follow-btn:hover,
.compact-user-card .follow-btn:hover { background: var(--brand-dk) !important; border-color: var(--brand-dk) !important; transform: translateY(-1px) !important; }

/* ---------------------------------------------------------------
   HASHTAGS TAB  (createTrendingHashtagElement ? div.card.mb-3.trending-hashtag-item)
   --------------------------------------------------------------- */
.trending-hashtag-item { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; margin-bottom: 8px !important; box-shadow: var(--sh) !important; transition: box-shadow .15s, border-color .15s !important; overflow: hidden !important; }
.trending-hashtag-item:hover { box-shadow: var(--sh-md) !important; border-color: var(--border-2) !important; }
.trending-hashtag-item .card-body { padding: 14px !important; }
.trending-hashtag-item h5 { font-size: 14.5px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 2px !important; }
.trending-hashtag-item .card-text { font-size: 13px !important; color: var(--ink-3) !important; margin-bottom: 10px !important; line-height: 1.55 !important; }
.trending-hashtag-item .bg-primary.rounded-circle { background: linear-gradient(135deg,var(--brand),#ff7653) !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.trending-hashtag-item .follow-hashtag { padding: 6px 14px !important; border-radius: var(--r-pill) !important; font-size: 13px !important; font-weight: 600 !important; border: 1.5px solid var(--border-2) !important; color: var(--ink-2) !important; background: var(--surface) !important; transition: all .14s !important; }
.trending-hashtag-item .follow-hashtag:hover { border-color: var(--brand) !important; color: var(--brand) !important; background: var(--brand-bg) !important; }
.trending-hashtag-item a.btn.btn-primary, .trending-hashtag-item .btn-primary { padding: 6px 14px !important; border-radius: var(--r-pill) !important; font-size: 13px !important; font-weight: 600 !important; background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.trending-hashtag-item a.btn.btn-primary:hover { background: var(--brand-dk) !important; }

/* ---------------------------------------------------------------
   GROUPS & COMMUNITIES TABS
   createGroupElement     ? div.card.mb-3.group-item
   createCommunityElement ? div.card.mb-3.community-item
   --------------------------------------------------------------- */
.group-item, .card.mb-3.community-item { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; margin-bottom: 8px !important; box-shadow: var(--sh) !important; transition: box-shadow .15s, border-color .15s !important; overflow: hidden !important; }
.group-item:hover, .card.mb-3.community-item:hover { box-shadow: var(--sh-md) !important; border-color: var(--border-2) !important; }
.group-item .card-body, .card.mb-3.community-item .card-body { padding: 14px !important; }
.group-item .rounded-circle, .card.mb-3.community-item .rounded-circle { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--border) !important; flex-shrink: 0 !important; }
.group-item .card-title, .card.mb-3.community-item .card-title { font-size: 14px !important; font-weight: 700 !important; color: var(--ink) !important; margin-bottom: 1px !important; }
.group-item .text-muted, .card.mb-3.community-item .text-muted { font-size: 12px !important; color: var(--ink-4) !important; }
.group-item .card-text, .card.mb-3.community-item .card-text { font-size: 13px !important; color: var(--ink-2) !important; line-height: 1.55 !important; margin-bottom: 10px !important; }
.group-item .visit-group-btn, .card.mb-3.community-item .visit-community-btn { padding: 5px 14px !important; border-radius: var(--r-pill) !important; font-size: 13px !important; font-weight: 600 !important; border: 1.5px solid var(--brand) !important; color: var(--brand) !important; background: var(--surface) !important; cursor: pointer !important; transition: all .14s !important; }
.group-item .visit-group-btn:hover, .card.mb-3.community-item .visit-community-btn:hover { background: var(--brand) !important; color: #fff !important; }

/* ---------------------------------------------------------------
   RIGHT SIDEBAR
   --------------------------------------------------------------- */
.sidebar-right { width: 256px; flex-shrink: 0; }
.about-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); margin-bottom: 12px; overflow: hidden; }
.about-header { padding: 12px 14px; background: #1a1a1b; color: #fff; }
.about-header h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.about-header p  { font-size: 12px; opacity: .8; line-height: 1.5; }
.about-content { padding: 12px 14px; }
.about-content > p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 12px; }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.feature-item { padding: 10px 8px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); transition: box-shadow .14s; }
.feature-item:hover { box-shadow: var(--sh); }
.feature-icon { font-size: 17px; color: var(--brand); margin-bottom: 4px; display: block; }
.feature-item h4 { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.feature-item p  { font-size: 10px; color: var(--ink-4); line-height: 1.4; }

/* Trending Today sidebar */
.trending-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; margin-bottom: 12px; }
.trending-header { padding: 10px 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.trending-list { list-style: none; }
.trending-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; width: 100%; box-sizing: border-box;
  border-bottom: 1px solid var(--border); transition: background .12s; cursor: pointer;
}
.trending-item:hover { background: var(--surface-2); }
.trending-item:last-child { border-bottom: none; }
.trending-rank {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--surface-2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--ink-4);
}
.trending-item:nth-child(1) .trending-rank { background: var(--brand); color: #fff; }
.trending-item:nth-child(2) .trending-rank { background: #ff7653; color: #fff; }
.trending-item:nth-child(3) .trending-rank { background: #f59e0b; color: #fff; }
.trending-content { flex: 1; min-width: 0; }
.trending-title { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trending-meta  { font-size: 11px; color: var(--ink-4); }

/* Join prompt */
.join-prompt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 18px; text-align: center; box-shadow: var(--sh); margin-top: 6px; }
.join-prompt-card h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.join-prompt-card p  { font-size: 13px; color: var(--ink-3); line-height: 1.6; margin-bottom: 16px; }
.prompt-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Load more */
#load-more-btn { border: 1.5px solid var(--border-2); background: var(--surface); color: var(--brand); font-weight: 700; padding: 9px 22px; border-radius: var(--r-pill); font-size: 14px; cursor: pointer; font-family: var(--font); transition: all .15s; }
#load-more-btn:hover { border-color: var(--brand); background: var(--brand-bg); }

/* Bottom CTA */
.bottom-cta { background: #1a1a1b; color: #fff; padding: 56px clamp(16px,4vw,60px); text-align: center; margin-top: 32px; }
.bottom-cta h2 { font-size: clamp(20px,4vw,36px); font-weight: 800; margin-bottom: 10px; }
.bottom-cta p  { font-size: clamp(14px,2vw,16px); opacity: .7; max-width: 480px; margin: 0 auto 26px; line-height: 1.7; }
.cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-btn { padding: 11px 24px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 700; font-family: var(--font); text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
.cta-btn-primary  { background: var(--brand); color: #fff; box-shadow: 0 3px 12px rgba(255,69,0,.35); }
.cta-btn-primary:hover  { background: var(--brand-dk); transform: translateY(-2px); }
.cta-btn-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.38); }
.cta-btn-secondary:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.65); }

/* Footer */
.footer { background: #0d1117; color: rgba(255,255,255,.58); padding: 44px clamp(16px,4vw,60px) 22px; }
.footer-content { max-width: 1200px; margin: 0 auto; }
.footer-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: clamp(14px,3vw,30px); margin-bottom: 28px; }
.footer-column h4 { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.footer-column ul { list-style: none; }
.footer-column li { margin-bottom: 7px; }
.footer-column a  { color: rgba(255,255,255,.55); font-size: 12.5px; transition: color .12s; text-decoration: none; }
.footer-column a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.27); }
.footer-bottom-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-bottom-links a { color: rgba(255,255,255,.27); text-decoration: none; transition: color .12s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.6); }

/* Modal */
#customAlertModal { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
#customAlertModal[style*="flex"] { display: flex; }
#customAlertModal .modal-content { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,.2); max-width: 400px; width: 90%; overflow: hidden; }
.modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 11px; border-bottom: 1px solid var(--border); }
.modal-title  { font-size: 15px; font-weight: 700; flex: 1; }
.modal-close  { background: none; border: none; cursor: pointer; color: var(--ink-4); font-size: 16px; padding: 3px; border-radius: var(--r); }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-body   { padding: 13px 16px; font-size: 14px; color: var(--ink-2); }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 14px; border-top: 1px solid var(--border); }
.modal-btn    { padding: 7px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); }
.modal-btn-primary   { background: var(--brand); color: #fff; }
.modal-btn-secondary { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .sidebar-left, .sidebar-right { width: 220px; }
}
@media (max-width: 900px) {
  .sidebar-right { display: none; }
  .sidebar-left  { width: 230px; }
}

/* -- Mobile: show ONLY the centre feed column -- */
@media (max-width: 768px) {
  .navbar { padding: 0 12px; }
  .nav-links, .nav-auth { display: none; }
  .mobile-menu-toggle { display: flex; }
  .mobile-hero-cta { display: block; }

  /* Stack layout: hide both sidebars, show only main feed */
  .main-container {
    flex-direction: column;
    padding: 10px 8px; gap: 10px;
  }
  /* HIDE left sidebar on mobile */
  .sidebar-left  { display: none; }
  /* Right sidebar already hidden at 900px */
  .main-feed { width: 100%; max-width: none; }

  /* Post header tighter */
  .top-head { grid-template-columns: 34px 1fr !important; column-gap: 8px !important; padding: 3px 10px 7px !important; }
  .fb-user-thumb, .sub-fb-user-thumb { width: 34px !important; min-width: 34px !important; }
  .fb-user-thumb img, .sub-fb-user-thumb img,
  .fb-user-thumb .owner_img, .sub-fb-user-thumb .owner_img { width: 34px !important; height: 34px !important; }
  .post_body    { padding: 0 10px 8px !important; }
  .post-dropdown { padding: 8px 10px 0 !important; }
  .post-actions.d-flex { padding: 4px 6px 8px !important; }
  .comment-toggle, .recommend-btn, .pin-btn, .like-btn, .share-btn { padding: 5px 6px !important; font-size: 12px !important; }

  /* Media grid 2-col on tablet */
  .media-grid-cards { grid-template-columns: repeat(2,1fr) !important; }

  /* Hero */
  .hero { padding: calc(var(--nav-h) + 26px) 14px 36px; }

  /* Tabs: allow horizontal scroll, tighter padding */
  .tabs-wrapper { padding: 3px 6px; }
  .tab-link { padding: 6px 11px; font-size: 13px; }

  /* Bottom CTA */
  .bottom-cta { padding: 40px 14px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .footer-links { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Community carousel still visible on mobile */
  .community-carousel-section { display: block; }
}

@media (max-width: 520px) {
  .card.post-card  { border-radius: var(--r-lg) !important; }
  .hero h1         { font-size: 22px; }
  .tab-link        { padding: 6px 9px; font-size: 12.5px; }
  .media-grid-cards { gap: 5px !important; }
  .footer-links    { grid-template-columns: 1fr 1fr; gap: 12px; }
  .compact-user-card { flex-wrap: wrap; padding: 11px; }
  .compact-user-avatar { width: 40px !important; height: 40px !important; }
  .compact-user-avatar img { width: 40px !important; height: 40px !important; }
}

@media (max-width: 380px) {
  .media-grid-cards { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 20px; }
}

/* -- Overflow safety ------------------------------------------- */
html, body { overflow-x: hidden; }
.hero, .mobile-hero-cta, .community-carousel-section,
.bottom-cta, .footer, .navbar { overflow-x: hidden; }
.post-card, .content-para, .post_body { word-break: break-word; overflow-wrap: break-word; }
.tabs-container, .tabs-wrapper { overflow: visible; }
.tabs-list { overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.tabs-list::-webkit-scrollbar { display: none; }
.community-scroll { overflow-x: auto; }
.carousel-wrapper { overflow: hidden; }
/* ================================================================
   IMAGE GALLERY GRID  (graphyti-unified.css §14 ported)
   Works with gallery-grid / grid-1…grid-5 / gallery-item
   ================================================================ */

/* Gallery grid container */
.gallery-grid {
  display: grid !important;
  gap: 3px !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin: 6px 0 !important;
  max-height: 480px;
}

/* 1-image layout */
.gallery-grid.grid-1 {
  grid-template-columns: 1fr !important;
  grid-template-rows: 420px !important;
}

/* 2-image layout */
.gallery-grid.grid-2 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 240px !important;
}

/* 3-image layout — first image spans both rows */
.gallery-grid.grid-3 {
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: 210px 210px !important;
}
.gallery-grid.grid-3 .gallery-item:first-child {
  grid-row: 1 / span 2 !important;
}

/* 4-image layout */
.gallery-grid.grid-4 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 210px 210px !important;
}

/* 5+-image layout */
.gallery-grid.grid-5 {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-template-rows: 200px 200px !important;
}

/* Gallery item */
.gallery-item {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.25s ease !important;
}
.gallery-item:hover { transform: scale(1.025) !important; z-index: 2 !important; }
.gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

/* Counter overlay (+N more) */
.counter-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.58) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  pointer-events: none !important;
}

/* Responsive gallery grid */
@media (max-width: 600px) {
  .gallery-grid { max-height: 320px !important; }
  .gallery-grid.grid-1 { grid-template-rows: 280px !important; }
  .gallery-grid.grid-2 { grid-template-rows: 160px !important; }
  .gallery-grid.grid-3,
  .gallery-grid.grid-4 { grid-template-rows: 150px 150px !important; }
  .gallery-grid.grid-5 { grid-template-rows: 140px 140px !important; }
}
@media (max-width: 400px) {
  .gallery-grid.grid-1 { grid-template-rows: 220px !important; }
  .gallery-grid.grid-2 { grid-template-rows: 130px !important; }
  .gallery-grid.grid-3,
  .gallery-grid.grid-4 { grid-template-rows: 120px 120px !important; }
}

/* ================================================================
   IMAGE ZOOM OVERLAY  (graphyti-unified.css §14 ported)
   Activate with JS: zoomOverlay.classList.add('active')
   ================================================================ */

.zoom-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.94) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.zoom-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.zoomed-content {
  max-width: 92% !important;
  max-height: 92% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(0.94) !important;
  transition: transform 0.3s ease !important;
}
.zoom-overlay.active .zoomed-content {
  transform: scale(1) !important;
}
.zoomed-content img {
  max-width: 100% !important;
  max-height: 86vh !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}

/* Close button */
.zoom-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: #e74c3c !important;
  color: #fff !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  cursor: pointer !important;
  border: none !important;
  z-index: 100001 !important;
  transition: background 0.2s, transform 0.2s !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}
.zoom-close:hover {
  background: #c0392b !important;
  transform: scale(1.12) !important;
}

/* Image counter badge */
.zoom-counter {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  background: rgba(0,0,0,0.68) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  z-index: 100001 !important;
}

/* Nav arrows */
.zoom-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,0.18) !important;
  border: 2px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  cursor: pointer !important;
  z-index: 100001 !important;
  transition: background 0.2s, transform 0.2s !important;
}
.zoom-nav-arrow:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.zoom-nav-arrow.arrow-left  { left: 20px !important; }
.zoom-nav-arrow.arrow-right { right: 20px !important; }

@media (max-width: 600px) {
  .zoom-close { width: 38px !important; height: 38px !important; font-size: 18px !important; top: 12px !important; right: 12px !important; }
  .zoom-nav-arrow { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .zoom-nav-arrow.arrow-left  { left: 8px !important; }
  .zoom-nav-arrow.arrow-right { right: 8px !important; }
}

/* ================================================================
   VIDEO PLAYER
   Targets the exact classes rendered by fetch-public-posts.php:
     .video-player-container  wrapper
     .play-button-overlay     big centre play icon
     .progress-container      thin scrub bar at very bottom
     .progress-bar            fill inside scrub bar
     .video-controls          bottom pill bar (hover)
     .control-btn.play-pause  play/pause button
     .time-display            "0:00 / 0:00" text
     .control-btn.volume      mute button
     .control-btn.fullscreen  fullscreen button
   ================================================================ */

/* ---- Container ---- */
.video-player-container {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 8px 0 !important;
  background: #000 !important;
  aspect-ratio: 16/9 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22) !important;
}
.video-player-container video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---- Centre play/pause overlay ---- */
.play-button-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.18) !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  z-index: 2 !important;
}
.video-player-container.playing .play-button-overlay {
  display: none !important;
}
.video-player-container.paused .play-button-overlay,
.video-player-container:not(.playing):not(.paused) .play-button-overlay {
  display: flex !important;
}
.play-button-overlay i {
  font-size: 64px !important;
  color: #fff !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55)) !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.play-button-overlay:hover {
  background: rgba(0,0,0,0.28) !important;
}
.play-button-overlay:hover i {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

/* ---- Thin scrub bar pinned to very bottom edge ---- */
.progress-container {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: rgba(255,255,255,0.15) !important;
  z-index: 5 !important;
  cursor: pointer !important;
}
.progress-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #6364ff, #00cc99) !important;
  width: 0% !important;
  transition: width 0.15s linear !important;
  border-radius: 0 2px 2px 0 !important;
}
/* Expand scrub bar on hover for easier clicking */
.video-player-container:hover .progress-container {
  height: 5px !important;
  bottom: 0 !important;
}

/* ---- Controls pill bar ---- */
.video-controls {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  right: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  background: rgba(10,10,20,0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.video-player-container:hover .video-controls {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* ---- Control buttons ---- */
.control-btn {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.90) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: background 0.15s, color 0.15s, transform 0.12s !important;
  flex-shrink: 0 !important;
}
.control-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  transform: scale(1.12) !important;
}
.control-btn:active {
  transform: scale(0.96) !important;
}
.control-btn i {
  font-size: 15px !important;
  display: block !important;
}
/* Play/pause button slightly larger */
.control-btn.play-pause {
  padding: 5px 10px !important;
}
.control-btn.play-pause i {
  font-size: 17px !important;
}
/* Fullscreen button pushed to far right */
.control-btn.fullscreen {
  margin-left: auto !important;
}

/* ---- Time display ---- */
.time-display {
  font-size: 11.5px !important;
  color: rgba(255,255,255,0.80) !important;
  min-width: 80px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  flex: 1 !important;
  white-space: nowrap !important;
}

/* ---- Fullscreen mode ---- */
.video-player-container.fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99998 !important;
  border-radius: 0 !important;
  aspect-ratio: unset !important;
  box-shadow: none !important;
}
.video-player-container.fullscreen video {
  object-fit: contain !important;
}
.video-player-container.fullscreen .video-controls {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: 24px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* ---- Quoted/shared post video ---- */
.quoted-post .video-player-container {
  border-radius: 10px !important;
}
.quoted-post .play-button-overlay i {
  font-size: 48px !important;
}

/* ---- Mobile ---- */
@media (max-width: 520px) {
  .video-player-container { border-radius: 10px !important; }
  .play-button-overlay i  { font-size: 52px !important; }
  .video-controls { padding: 5px 8px !important; bottom: 8px !important; }
  .control-btn    { padding: 4px 7px !important; }
  .control-btn i  { font-size: 13px !important; }
  .time-display   { font-size: 10.5px !important; min-width: 68px !important; }
}