/* =============================================================================
   SPONZAR HOME FEED — PREMIUM AESTHETIC LAYER v2
   Platform color: #609960  |  Dark: #4a7a4a
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   0. DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --sp-green:          #609960;
  --sp-green-dark:     #4a7a4a;
  --sp-green-light:    #7ab87a;
  --sp-green-glow:     rgba(96, 153, 96, .22);
  --sp-green-tint:     rgba(96, 153, 96, .07);
  --sp-green-tint-md:  rgba(96, 153, 96, .13);

  --feed-card-radius: 18px;
  --feed-shadow-rest: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --feed-shadow-hover: 0 14px 44px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.08);
  --feed-border-light: rgba(0,0,0,.065);
  --feed-action-color: #8a8f98;
  --feed-transition: 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  --feed-transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-bs-theme="dark"],
html[data-bs-theme="dark"],
.dark-mode {
  --feed-shadow-rest: 0 2px 16px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18);
  --feed-shadow-hover: 0 16px 48px rgba(0,0,0,.46), 0 6px 16px rgba(0,0,0,.28);
  --feed-border-light: rgba(255,255,255,.06);
  --feed-action-color: #737880;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. FEED WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.wrap-post {
  position: relative;
}
.wrap-post::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(160deg,
    rgba(96,153,96,.04) 0%,
    rgba(96,153,96,.02) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. POST CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates {
  border-radius: var(--feed-card-radius) !important;
  border: 1px solid var(--feed-border-light) !important;
  box-shadow: var(--feed-shadow-rest) !important;
  transition:
    box-shadow var(--feed-transition-smooth),
    transform var(--feed-transition-smooth),
    border-color var(--feed-transition-smooth) !important;
  overflow: hidden;
  position: relative;
  background: #fff;
  will-change: transform;
}
.card-updates:hover {
  box-shadow: var(--feed-shadow-hover) !important;
  transform: translateY(-2px);
  border-color: var(--sp-green-glow) !important;
}

/* Pinned — gold shimmer top bar */
.card-updates.pinned-post::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  background-size: 200% 100%;
  animation: shimmerPinned 2.4s linear infinite;
  z-index: 2;
}
@keyframes shimmerPinned {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.pinned_post.pinned-current {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #d97706 !important;
  background: rgba(251,191,36,.1);
  border-radius: 6px;
  padding: 4px 10px;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

.card-updates .card-body {
  padding: 18px 20px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. AUTHOR ROW
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .media {
  align-items: flex-start;
  gap: 14px;
}
.card-updates .avatarUser {
  border: 2.5px solid rgba(96,153,96,.22);
  box-shadow: 0 0 0 3px rgba(96,153,96,.07), 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow var(--feed-transition), border-color var(--feed-transition);
  object-fit: cover;
}
.card-updates .avatarUser:hover {
  border-color: rgba(96,153,96,.5);
  box-shadow: 0 0 0 5px rgba(96,153,96,.12), 0 4px 16px rgba(0,0,0,.15);
}

/* LIVE pulse */
.live-span {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  padding: 1px 6px; border-radius: 99px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(239,68,68,.4);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 2px 8px rgba(239,68,68,.4); }
  50%      { box-shadow: 0 2px 16px rgba(239,68,68,.7); }
}

.card-updates .media-body h5.font-montserrat {
  font-size: 0.97rem; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: 2px;
}
.card-updates .media-body h5.font-montserrat a {
  color: #111827; text-decoration: none;
  transition: color var(--feed-transition-smooth);
}
.card-updates .media-body h5.font-montserrat a:hover { color: var(--sp-green); }

.card-updates .verified i { color: var(--sp-green); filter: drop-shadow(0 0 3px rgba(96,153,96,.35)); }

.card-updates .type-post {
  display: inline-flex; align-items: center;
  background: var(--sp-green-tint);
  border-radius: 99px; padding: 1px 7px;
  font-size: 0.73rem; color: var(--sp-green); margin-left: 4px; font-weight: 700;
}

/* Dropdown */
.card-updates #dropdown_options {
  padding: 4px 8px; border-radius: 8px;
  transition: background var(--feed-transition-smooth);
}
.card-updates #dropdown_options:hover { background: rgba(0,0,0,.06); }

.card-updates .dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px;
  animation: dropdownFadeIn 0.18s ease;
  min-width: 210px;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.card-updates .dropdown-item {
  border-radius: 8px; padding: 8px 12px;
  font-size: 0.875rem; font-weight: 600;
  transition: background var(--feed-transition-smooth), color var(--feed-transition-smooth);
  display: flex; align-items: center; gap: 8px;
}
.card-updates .dropdown-item:hover { background: var(--sp-green-tint); color: var(--sp-green); }
.card-updates .dropdown-item.actionDelete:hover { background: rgba(239,68,68,.07); color: #ef4444; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. POST TEXT
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .card-body > p.truncated {
  font-size: 0.975rem; line-height: 1.65; color: #374151; margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. MUSIC / AUDIO PLAYER — PREMIUM REDESIGN
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .mx-3.border.rounded {
  background: linear-gradient(135deg, #1a2a1a 0%, #0f1f0f 60%, #1e2d1e 100%) !important;
  border: 1px solid rgba(96,153,96,.25) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: box-shadow var(--feed-transition-smooth), border-color var(--feed-transition-smooth);
}
.card-updates .mx-3.border.rounded:hover {
  border-color: rgba(96,153,96,.5) !important;
  box-shadow: 0 6px 28px rgba(96,153,96,.2), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Animated ambient glow behind player */
.card-updates .mx-3.border.rounded::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(96,153,96,.15) 0%, transparent 70%);
  pointer-events: none;
  animation: audioGlowPulse 3s ease-in-out infinite alternate;
}
@keyframes audioGlowPulse {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.1); }
}

/* Music icon disc */
.card-updates .mx-3.border.rounded .rounded.bg-primary.text-white,
.card-updates .mx-3.border.rounded [style*="width: 48px"] {
  background: linear-gradient(135deg, var(--sp-green) 0%, var(--sp-green-dark) 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(96,153,96,.5), 0 0 0 4px rgba(96,153,96,.12) !important;
  flex-shrink: 0;
  animation: discRotate 8s linear infinite paused;
}
.card-updates .mx-3.border.rounded:hover .rounded.bg-primary.text-white,
.card-updates .mx-3.border.rounded:hover [style*="width: 48px"] {
  animation-play-state: running;
}
@keyframes discRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Track title + size */
.card-updates .mx-3.border.rounded h6 {
  color: #f0fdf0 !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.card-updates .mx-3.border.rounded small.text-muted {
  color: rgba(144,200,144,.6) !important;
  font-size: 0.72rem;
}

/* Waveform bars decoration */
.card-updates .mx-3.border.rounded::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(96,153,96,.4) 20%,
    rgba(96,153,96,.8) 50%,
    rgba(96,153,96,.4) 80%,
    transparent 100%
  );
  animation: audioSeekBar 4s ease-in-out infinite alternate;
}
@keyframes audioSeekBar {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* Play button inside player */
.card-updates .mx-3.border.rounded .btn-primary,
.card-updates .mx-3.border.rounded button.btn-primary {
  background: linear-gradient(135deg, var(--sp-green) 0%, var(--sp-green-dark) 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 8px 22px !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(96,153,96,.4) !important;
  transition: transform var(--feed-transition), box-shadow var(--feed-transition-smooth) !important;
}
.card-updates .mx-3.border.rounded .btn-primary:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 6px 24px rgba(96,153,96,.6) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CARD FOOTER — ACTION BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .card-footer {
  padding: 10px 20px 14px !important;
  background: transparent !important;
  border-top: 1px solid var(--feed-border-light) !important;
}
.card-updates .card-footer h4 {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px !important; font-size: 1.1rem !important;
}

.card-updates .pulse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.2rem; color: var(--feed-action-color);
  transition:
    background var(--feed-transition),
    color var(--feed-transition),
    transform var(--feed-transition);
  position: relative; cursor: pointer; text-decoration: none;
}
.card-updates .pulse-btn:hover { background: rgba(0,0,0,.06); transform: scale(1.15); }
.card-updates .pulse-btn:active { transform: scale(0.88); }

/* Heart */
.card-updates .pulse-btn.btnLike.active,
.card-updates .pulse-btn.active .ph-heart-fill { color: #e0245e; }
.card-updates .pulse-btn.btnLike:hover { background: rgba(224,36,94,.10); color: #e0245e; }

/* Comment */
.card-updates .pulse-btn.toggleComments:hover,
.card-updates span.pulse-btn:hover { background: var(--sp-green-tint); color: var(--sp-green); }
.card-updates span.pulse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.2rem; color: var(--feed-action-color); cursor: pointer;
  transition: background var(--feed-transition), color var(--feed-transition), transform var(--feed-transition);
}
.card-updates span.pulse-btn:active { transform: scale(0.88); }

/* Share */
.card-updates .global-share-btn:hover { background: rgba(16,185,129,.08); color: #10b981; }

/* Tip */
.card-updates a[data-target="#tipForm"]:hover { background: rgba(245,158,11,.1); color: #f59e0b; }

/* Bookmark */
.card-updates .pulse-btn.btnBookmark.text-primary { color: var(--sp-green) !important; }
.card-updates .pulse-btn.btnBookmark:hover { background: var(--sp-green-tint); color: var(--sp-green); }

.mr-14px { margin-right: 2px !important; }

/* Counts row */
.card-updates .containerLikeComment {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.card-updates .containerLikeComment span {
  font-size: 0.82rem; font-weight: 700; color: #6b7280; cursor: pointer;
  transition: color var(--feed-transition-smooth);
}
.card-updates .containerLikeComment span:hover { color: #111827; }
.card-updates .dot-item:not(:first-child)::before { content: '·'; margin-right: 14px; color: #d1d5db; }

/* ─────────────────────────────────────────────────────────────────────────────
   7. COMMENT INPUT
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .media.position-relative.pt-3.border-top {
  border-top: 1px solid var(--feed-border-light) !important;
  padding-top: 14px !important;
}
.card-updates .media.position-relative textarea,
.card-updates .container-comments textarea {
  background: #f9fafb;
  border: 1.5px solid rgba(0,0,0,.08) !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
  font-size: 0.9rem;
  transition: border-color var(--feed-transition-smooth), box-shadow var(--feed-transition-smooth);
  resize: none; min-height: 38px; line-height: 1.5;
}
.card-updates .media.position-relative textarea:focus,
.card-updates .container-comments textarea:focus {
  border-color: rgba(96,153,96,.45) !important;
  box-shadow: 0 0 0 3px rgba(96,153,96,.12) !important;
  background: #fff; outline: none !important;
}
.card-updates .btnSendComment {
  border-radius: 99px !important; padding: 6px 18px !important;
  font-weight: 700 !important; font-size: 0.83rem !important;
  background: linear-gradient(135deg, var(--sp-green) 0%, var(--sp-green-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(96,153,96,.3) !important;
  transition: transform var(--feed-transition), box-shadow var(--feed-transition-smooth);
}
.card-updates .btnSendComment:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(96,153,96,.45) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. COMMENTS LIST
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .container-comments .media {
  padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.04);
  border-radius: 10px; transition: background var(--feed-transition-smooth);
}
.card-updates .container-comments .media:last-child { border-bottom: none; }
.card-updates .container-comments .media:hover { background: rgba(0,0,0,.025); }

/* ─────────────────────────────────────────────────────────────────────────────
   9. POST CREATION FORM
   ───────────────────────────────────────────────────────────────────────────── */
#formUpdateCreate .card {
  border-radius: var(--feed-card-radius) !important;
  border: 1.5px solid rgba(96,153,96,.14) !important;
  box-shadow: 0 2px 20px rgba(96,153,96,.06), 0 1px 4px rgba(0,0,0,.04) !important;
  transition: box-shadow var(--feed-transition-smooth), border-color var(--feed-transition-smooth);
  background: #fff;
}
#formUpdateCreate .card:hover,
#formUpdateCreate .card:focus-within {
  box-shadow: 0 6px 32px rgba(96,153,96,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border-color: rgba(96,153,96,.3) !important;
}
#formUpdateCreate textarea#updateDescription {
  background: transparent !important; border: none !important;
  box-shadow: none !important; font-size: 1rem; font-weight: 500;
  color: #111827; resize: none; padding: 4px 0 !important; min-height: 56px;
}
#formUpdateCreate textarea#updateDescription::placeholder { color: #9ca3af; font-weight: 400; }
#formUpdateCreate .card-footer {
  background: #f9fafb !important;
  border-top: 1px solid rgba(0,0,0,.05) !important;
  border-radius: 0 0 var(--feed-card-radius) var(--feed-card-radius) !important;
  padding: 12px 20px !important;
}
#teaserContainer {
  border-radius: 12px !important;
  background: rgba(96,153,96,.03) !important;
  border: 1.5px dashed rgba(96,153,96,.22) !important;
  transition: border-color var(--feed-transition-smooth), background var(--feed-transition-smooth);
}
#teaserContainer:focus-within {
  border-color: rgba(96,153,96,.45) !important;
  background: rgba(96,153,96,.06) !important;
}

/* Upload teaser button */
#formUpdateCreate .btn-outline-primary,
#formUpdateCreate .btn-upload-teaser {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
  border-radius: 99px !important;
}
#formUpdateCreate .btn-outline-primary:hover,
#formUpdateCreate .btn-upload-teaser:hover {
  background: var(--sp-green) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. STORIES BAR
   ───────────────────────────────────────────────────────────────────────────── */
#stories.storiesWrapper {
  border-radius: var(--feed-card-radius) !important;
  background: #fff;
  border: 1px solid var(--feed-border-light);
  box-shadow: var(--feed-shadow-rest);
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
}
.add-story .item-add-story {
  border-radius: 14px; overflow: hidden;
  transition: transform var(--feed-transition), box-shadow var(--feed-transition);
}
.add-story .item-add-story:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(96,153,96,.3);
}
.add-story .item-add-story .info.bg-primary {
  background: linear-gradient(135deg, var(--sp-green), var(--sp-green-dark)) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. LEFT SIDEBAR
   ───────────────────────────────────────────────────────────────────────────── */
.menu-left-home { padding: 4px 0 !important; }
.menu-left-home li a {
  display: flex !important; align-items: center;
  padding: 10px 14px !important; border-radius: 12px !important;
  font-size: 0.92rem; font-weight: 600; color: #374151;
  text-decoration: none;
  transition: background var(--feed-transition-smooth), color var(--feed-transition-smooth), transform var(--feed-transition);
  gap: 10px; margin-bottom: 2px;
}
.menu-left-home li a:hover { background: var(--sp-green-tint); color: var(--sp-green); transform: translateX(3px); }
.menu-left-home li a.active,
.menu-left-home li a.active.disabled {
  background: var(--sp-green-tint-md); color: var(--sp-green); pointer-events: none;
}
.menu-left-home li a i,
.menu-left-home li a .ph { font-size: 1.15rem; flex-shrink: 0; transition: transform var(--feed-transition); }
.menu-left-home li a:hover i,
.menu-left-home li a:hover .ph { transform: scale(1.15); }

.menu-left-home li small.text-uppercase {
  font-size: 0.68rem !important; letter-spacing: 1.2px; font-weight: 800;
  color: #9ca3af !important; padding: 4px 14px; display: block;
}
.menu-left-home li.dropdown-divider { border-color: rgba(0,0,0,.06) !important; margin: 10px 12px !important; }

.menu-left-home li button[data-target="#spotlightSearchModal"] {
  background: var(--sp-green-tint) !important;
  border: 1px solid rgba(96,153,96,.15) !important;
  border-radius: 12px !important;
  color: #374151 !important; font-weight: 600; font-size: 0.87rem;
  padding: 9px 12px !important;
  transition: background var(--feed-transition-smooth), border-color var(--feed-transition-smooth);
}
.menu-left-home li button[data-target="#spotlightSearchModal"]:hover {
  background: var(--sp-green-tint-md) !important;
  border-color: rgba(96,153,96,.3) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. RIGHT SIDEBAR — EXPLORE CREATORS (FULL REDESIGN)
   ───────────────────────────────────────────────────────────────────────────── */
.d-lg-block h6.filter-explorer {
  font-size: 0.72rem !important;
  font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 14px !important;
  display: flex; align-items: center;
}

/* ── Creator card wrapper ── */
.containerRefreshCreators a {
  display: block;
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  position: relative;
  box-shadow: 0 3px 14px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
  transition:
    transform var(--feed-transition),
    box-shadow var(--feed-transition);
}
.containerRefreshCreators a:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 36px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1);
}

/* ── Cover background div ── */
.containerRefreshCreators a > div.w-100 {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* ── Cover image area (card-cover = 50px + list-group-item height) ──
   Full unified dark gradient from bottom — NO split transparency */
.containerRefreshCreators .card-cover {
  height: 60px !important;
}

/* REMOVE the split-layer look — unified gradient on the whole card */
.containerRefreshCreators .list-group-item {
  background: transparent !important;
  border: none !important;
  padding: 10px 14px 14px !important;
  position: relative;
  z-index: 2;
}

/* Single gradient overlay covering full card bottom */
.containerRefreshCreators a > div.w-100::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 75%;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Avatar — full circle, proper size, no overflow issue ── */
.containerRefreshCreators .media-left { flex-shrink: 0; }
.containerRefreshCreators .avatar-user-home {
  width: 54px !important;
  height: 54px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.3), 0 0 0 3px rgba(96,153,96,.25) !important;
  display: block;
  flex-shrink: 0;
}

/* ── Name ── */
.containerRefreshCreators .media-heading {
  margin-bottom: 3px !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}
.containerRefreshCreators .media-heading strong {
  font-weight: 800; letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.containerRefreshCreators .media-heading a.stretched-link { text-decoration: none; }

/* ── Username handle ── */
.containerRefreshCreators small.text-white {
  color: rgba(255,255,255,.65) !important;
  font-size: 0.76rem;
}

/* ── FREE badge ── */
.badge-free {
  background: linear-gradient(135deg, var(--sp-green), var(--sp-green-dark)) !important;
  color: #fff !important;
  font-size: 0.66rem !important; font-weight: 800; letter-spacing: 0.9px;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(96,153,96,.45);
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  z-index: 10 !important;
  padding: 3px 8px !important;
}

/* Refresh + free filter icon buttons */
.refresh-btn i, .toggleFindFreeCreators i { font-size: 1rem; transition: transform var(--feed-transition); }
.refresh-btn:hover i { transform: rotate(180deg); }

/* Verified badge inside creator cards */
.containerRefreshCreators .verified i { color: var(--sp-green); }

/* Featured icon */
.containerRefreshCreators .text-featured { color: #fbbf24 !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   13. POLL WIDGET
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .card.bg-light {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
.card-updates .btn-vote {
  border-radius: 12px !important; font-weight: 700 !important; font-size: 0.88rem !important;
  transition: all var(--feed-transition-smooth) !important;
  border: 1.5px solid rgba(96,153,96,.28) !important;
  color: var(--sp-green) !important;
}
.card-updates .btn-vote:hover {
  background: var(--sp-green-tint) !important;
  border-color: var(--sp-green) !important;
  transform: translateX(3px);
}
.card-updates .progress { border-radius: 99px !important; overflow: hidden; background: rgba(96,153,96,.12); }
.card-updates .progress-bar {
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--sp-green), var(--sp-green-light)) !important;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. GLOBAL BUTTONS — force platform green
   ───────────────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--sp-green) 0%, var(--sp-green-dark) 100%) !important;
  border-color: var(--sp-green-dark) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.btn-primary:hover, .btn.btn-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(96,153,96,.4) !important;
}
.btn-primary:active { filter: brightness(0.95) !important; transform: translateY(0) !important; }

.btn-outline-primary {
  border-color: var(--sp-green) !important;
  color: var(--sp-green) !important;
}
.btn-outline-primary:hover {
  background: var(--sp-green) !important;
  color: #fff !important;
}

/* text-primary overrides */
.text-primary { color: var(--sp-green) !important; }
.bg-primary    { background-color: var(--sp-green) !important; }
a.link-border  { border-bottom: 2px solid var(--sp-green); color: var(--sp-green) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   15. MODALS
   ───────────────────────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.1) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden;
}
.modal-header { border-bottom: 1px solid rgba(0,0,0,.06) !important; padding: 20px 24px !important; }
.modal-footer { border-top: 1px solid rgba(0,0,0,.06) !important; padding: 16px 24px !important; }
.modal-body   { padding: 20px 24px !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   16. FEED ENTRY ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes feedCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.card-updates { animation: feedCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
turbo-frame:nth-child(1) .card-updates { animation-delay: 0.00s; }
turbo-frame:nth-child(2) .card-updates { animation-delay: 0.05s; }
turbo-frame:nth-child(3) .card-updates { animation-delay: 0.10s; }
turbo-frame:nth-child(4) .card-updates { animation-delay: 0.15s; }
turbo-frame:nth-child(5) .card-updates { animation-delay: 0.20s; }
turbo-frame:nth-child(6) .card-updates { animation-delay: 0.25s; }
turbo-frame:nth-child(n+7) .card-updates { animation-delay: 0.30s; }

/* ─────────────────────────────────────────────────────────────────────────────
   17. EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.no-updates { padding: 60px 20px; }
.no-updates .ico-no-result {
  font-size: 56px;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.no-updates h4 { color: #9ca3af; font-weight: 600 !important; font-size: 1.15rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   18. ANNOUNCEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.announcements {
  border-radius: 14px !important; border: none !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,.08) !important;
  margin-bottom: 16px;
  animation: fadeInSlideDown 0.4s ease;
}
@keyframes fadeInSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   19. LIKE HEART EXPLODE
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes heartExplode {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); color: #e0245e; }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.card-updates .pulse-btn.btnLike.just-liked { animation: heartExplode 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Turbo frame busy */
turbo-frame { display: block; }
turbo-frame[busy] .card-updates { opacity: 0.6; pointer-events: none; transition: opacity 0.2s ease; }

/* ─────────────────────────────────────────────────────────────────────────────
   20. SCROLLBAR
   ───────────────────────────────────────────────────────────────────────────── */
.menu-left-home::-webkit-scrollbar { width: 3px; }
.menu-left-home::-webkit-scrollbar-track { background: transparent; }
.menu-left-home::-webkit-scrollbar-thumb { background: rgba(96,153,96,.2); border-radius: 99px; }

/* ─────────────────────────────────────────────────────────────────────────────
   21. REPLY INDICATOR
   ───────────────────────────────────────────────────────────────────────────── */
.card-updates .isReplyTo {
  background: var(--sp-green-tint) !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--sp-green);
  font-size: 0.85rem; font-weight: 600; color: #374151;
}

/* ─────────────────────────────────────────────────────────────────────────────
   22. DARK MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .card-updates {
  background: #1e2028 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #e5e7eb;
}
html[data-bs-theme="dark"] .card-updates .card-body > p.truncated,
html[data-bs-theme="dark"] .card-updates p.update-text { color: #d1d5db; }
html[data-bs-theme="dark"] .card-updates .media-body h5.font-montserrat a { color: #f9fafb; }
html[data-bs-theme="dark"] .card-updates .media-body h5.font-montserrat a:hover { color: var(--sp-green-light); }
html[data-bs-theme="dark"] .card-updates .card-footer { border-top-color: rgba(255,255,255,.06) !important; }
html[data-bs-theme="dark"] .card-updates .avatarUser { border-color: rgba(96,153,96,.25); }
html[data-bs-theme="dark"] .card-updates .dropdown-menu {
  background: rgba(24,26,32,.95) !important; border-color: rgba(255,255,255,.08) !important;
}
html[data-bs-theme="dark"] .card-updates .dropdown-item { color: #d1d5db; }
html[data-bs-theme="dark"] .card-updates .dropdown-item:hover { background: var(--sp-green-tint); color: var(--sp-green-light); }

html[data-bs-theme="dark"] #formUpdateCreate .card {
  background: #1e2028 !important; border-color: rgba(96,153,96,.18) !important;
}
html[data-bs-theme="dark"] #formUpdateCreate textarea#updateDescription { color: #f3f4f6; }
html[data-bs-theme="dark"] #formUpdateCreate textarea#updateDescription::placeholder { color: #6b7280; }
html[data-bs-theme="dark"] #formUpdateCreate .card-footer { background: #16181e !important; }

html[data-bs-theme="dark"] .menu-left-home li a { color: #d1d5db; }
html[data-bs-theme="dark"] .menu-left-home li a:hover { background: var(--sp-green-tint); color: var(--sp-green-light); }
html[data-bs-theme="dark"] .menu-left-home li a.active { background: var(--sp-green-tint-md); color: var(--sp-green-light); }

html[data-bs-theme="dark"] #stories.storiesWrapper { background: #1e2028; border-color: rgba(255,255,255,.06); }

html[data-bs-theme="dark"] .card-updates .card.bg-light {
  background: linear-gradient(135deg, #1a1c22 0%, #16181e 100%) !important;
  border-color: rgba(255,255,255,.06) !important;
}
html[data-bs-theme="dark"] .card-updates .media.position-relative textarea {
  background: #16181e; border-color: rgba(255,255,255,.08) !important; color: #f3f4f6;
}

/* Dark mode creator cards — no change needed, gradient handles it */
html[data-bs-theme="dark"] .containerRefreshCreators a {
  box-shadow: 0 4px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   23. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card-updates { border-radius: 12px !important; }
  .card-updates .card-body { padding: 14px 16px 8px; }
  .card-updates .card-footer { padding: 8px 16px 12px !important; }
  .card-updates .pulse-btn { width: 36px; height: 36px; font-size: 1.1rem; }
  .wrap-post::before { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   24. NEW CREATOR CARD HOVER (pure-HTML design)
   ───────────────────────────────────────────────────────────────────────────── */
.creator-card-link:hover .creator-card {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 40px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.14) !important;
}
.creator-card-link:hover .creator-card > div:first-child {
  /* darken overlay slightly on hover for contrast */
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.18) 100%) !important;
}

/* Dark mode: no extra change needed — gradient handles everything */
html[data-bs-theme="dark"] .creator-card-link .creator-card {
  box-shadow: 0 4px 18px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.22) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   25. SECTION HEADING (Explore Creators title)
   ───────────────────────────────────────────────────────────────────────────── */
h6.filter-explorer {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6b7280 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
}
html[data-bs-theme="dark"] h6.filter-explorer {
  color: #9ca3af !important;
  border-bottom-color: rgba(255,255,255,.06);
}

/* Refresh & free-filter action buttons in the heading */
.refresh_creators.refresh-btn i,
.toggleFindFreeCreators i {
  font-size: 1rem;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.refresh_creators.refresh-btn:hover i {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   26. AUDIO GLOW KEYFRAME (used in inline style of audio player)
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes audioGlowPulse {
  from { opacity: 0.5; transform: scale(1);   }
  to   { opacity: 1;   transform: scale(1.12); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   27. GLOBAL bg-primary GREEN OVERRIDE
       Bootstrap sets bg-primary with !important — we must beat it with
       a higher-specificity selector AND !important
   ───────────────────────────────────────────────────────────────────────────── */
html body .bg-primary:not(.badge):not(.alert):not(.text-bg-primary) {
  background-color: var(--sp-green) !important;
}
html body .btn-primary,
html body .btn.btn-primary {
  background: linear-gradient(135deg, var(--sp-green) 0%, var(--sp-green-dark) 100%) !important;
  border-color: var(--sp-green-dark) !important;
}
html body .border-primary { border-color: var(--sp-green) !important; }
html body a.text-primary,
html body span.text-primary,
html body i.text-primary,
html body div.text-primary { color: var(--sp-green) !important; }

/* =============================================================================
   DARK MODE — COMPLETE OVERRIDE SYSTEM
   Selector: html[data-bs-theme="dark"] (the platform's actual dark mode signal)
   ============================================================================= */

/* ── Card surfaces ── */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-updates,
html[data-bs-theme="dark"] .shadow-large {
  background-color: #1e2028 !important;
  border-color: rgba(255,255,255,.06) !important;
  color: #e5e7eb !important;
}

/* Card footer — overrides hardcoded bg-white class */
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .card-footer.bg-white {
  background-color: #1e2028 !important;
  border-top-color: rgba(255,255,255,.06) !important;
  color: #d1d5db !important;
}

/* Card body text */
html[data-bs-theme="dark"] .card-body {
  color: #e5e7eb !important;
}

html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] .card h5,
html[data-bs-theme="dark"] .card h6 {
  color: #f3f4f6 !important;
}

/* ── Form inputs & textareas ── */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] textarea.form-control,
html[data-bs-theme="dark"] input.form-control,
html[data-bs-theme="dark"] .custom-select,
html[data-bs-theme="dark"] select.form-control {
  background-color: #16181e !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #e5e7eb !important;
}
html[data-bs-theme="dark"] .form-control::placeholder {
  color: #6b7280 !important;
}
html[data-bs-theme="dark"] .form-control:focus {
  border-color: var(--sp-green) !important;
  box-shadow: 0 0 0 3px rgba(96,153,96,.2) !important;
}

/* ── bg-white / bg-light utility overrides ── */
html[data-bs-theme="dark"] .bg-white {
  background-color: #1e2028 !important;
}
html[data-bs-theme="dark"] .bg-light {
  background-color: #16181e !important;
}

/* ── Text overrides ── */
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-body {
  color: #e5e7eb !important;
}
html[data-bs-theme="dark"] .text-muted {
  color: #9ca3af !important;
}
html[data-bs-theme="dark"] .font-weight-bold,
html[data-bs-theme="dark"] .text-truncate {
  color: inherit !important;
}

/* ── Border overrides ── */
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom {
  border-color: rgba(255,255,255,.07) !important;
}

/* ── Dropdown & popover ── */
html[data-bs-theme="dark"] .dropdown-menu {
  background-color: #1e2028 !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
html[data-bs-theme="dark"] .dropdown-item {
  color: #d1d5db !important;
}
html[data-bs-theme="dark"] .dropdown-item:hover {
  background-color: rgba(96,153,96,.12) !important;
  color: #f3f4f6 !important;
}
html[data-bs-theme="dark"] .dropdown-divider {
  border-top-color: rgba(255,255,255,.07) !important;
}

/* ── Modal ── */
html[data-bs-theme="dark"] .modal-content {
  background-color: #1e2028 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e5e7eb !important;
}
html[data-bs-theme="dark"] .modal-header {
  border-bottom-color: rgba(255,255,255,.07) !important;
}
html[data-bs-theme="dark"] .modal-footer {
  border-top-color: rgba(255,255,255,.07) !important;
}
html[data-bs-theme="dark"] .close {
  color: #9ca3af !important;
  text-shadow: none !important;
}

/* ── Post composer teaser area ── */
html[data-bs-theme="dark"] #teaserContainer {
  background-color: rgba(96,153,96,.08) !important;
  border-color: rgba(96,153,96,.2) !important;
}

/* ── Publish / action buttons override ── */
html[data-bs-theme="dark"] .btn-outline-primary {
  color: var(--sp-green) !important;
  border-color: var(--sp-green) !important;
}
html[data-bs-theme="dark"] .btn-outline-primary:hover {
  background: var(--sp-green) !important;
  color: #fff !important;
}

/* ── Post action row (like, comment, bookmark, tip) ── */
html[data-bs-theme="dark"] .card-footer h4,
html[data-bs-theme="dark"] .card-footer .media-heading {
  color: #e5e7eb !important;
}

/* ── Sidebar left menu ── */
html[data-bs-theme="dark"] .menu-left-home li a {
  color: #d1d5db !important;
}
html[data-bs-theme="dark"] .menu-left-home li a:hover {
  background: rgba(96,153,96,.1) !important;
  color: var(--sp-green-light) !important;
}

/* ── Creator cards in sidebar ── */
html[data-bs-theme="dark"] .creator-card-link .creator-card {
  box-shadow: 0 3px 14px rgba(0,0,0,.35) !important;
}

/* ── Sort filter button ── */
html[data-bs-theme="dark"] .btn-default,
html[data-bs-theme="dark"] .custom-select {
  background-color: #16181e !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #d1d5db !important;
}

/* ── Checkboxes & custom controls ── */
html[data-bs-theme="dark"] .custom-control-label {
  color: #d1d5db !important;
}

/* ── Tab controls / nav-pills ── */
html[data-bs-theme="dark"] .nav-pills .nav-link {
  color: #9ca3af !important;
}
html[data-bs-theme="dark"] .nav-pills .nav-link.active {
  background: var(--sp-green) !important;
  color: #fff !important;
}

/* ── Tooltip ── */
html[data-bs-theme="dark"] .tooltip-inner {
  background-color: #2a2d35 !important;
  color: #e5e7eb !important;
}

/* ── Scrollbar ── */
html[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #16181e;
}
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 99px;
}
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.22);
}