/* ==========================================================================
   Synfluencer — cinematic loader → waitlist landing.
   Black + blood-red, ultra-clean. Tailwind handles utility styling via CDN;
   this file holds the keyframes, loader machinery, modal, and button glow.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* Brand palette — black on the floor, red + hot pink on top.
     Used by the new pink-injected surfaces; legacy code still
     uses hex literals (~170 spots, not worth a refactor mid-event). */
  --ink:        #050505;
  --ink-2:      #0a0a0a;
  --coal:       #111111;
  --bone:       #f5f5f5;
  /* Single canonical red — was three competing shades (#e11d48
     from old Tailwind alias, #ff0033 from pink-bomb, #c2001f from
     deep gradient). All routes now point at the same hi shade so
     the hero, hover halos, and gradient stops stop fighting. */
  --blood:      #ff0033;
  --blood-hi:   #ff0033;
  --blood-deep: #c2001f;
  --pink:       #ff0088;
  --pink-hot:   #e11d8a;
  --pink-soft:  #ff5cb8;
  /* Workhorse gradient — paint every primary surface with this for the
     seductive black/red/pink vibe. */
  --grad-rxp:   linear-gradient(135deg, #ff0033 0%, #ff0066 45%, #ff0088 100%);
  --grad-rxp-deep: linear-gradient(135deg, #c2001f 0%, #ff0033 40%, #ff0088 100%);
  --glow-pink:  0 0 24px rgba(255, 0, 136, 0.45);
  --glow-red:   0 0 24px rgba(255, 0, 51, 0.45);
  /* Focus-ring color — shared by every :focus-visible rule. Pink
     so the affordance matches the brand instead of the browser
     default blue. */
  --focus-ring: 0 0 0 3px rgba(255, 0, 136, 0.55);
}

/* Smooth in-page anchor scrolls. The landing has #waitlist /
   #features / etc. anchors; jumping was instant + jarring. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Global keyboard-focus ring. Was only on 4 selectors out of an
   8500-line file. Every interactive surface gets the same pink
   ring when reached by Tab so keyboard users can see where they
   are. Hidden for mouse users by virtue of :focus-visible. */
:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-radius: 6px;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ PINK BOMB  —  Aggressive pink overrides for high-visibility       ║
   ║ surfaces. Loaded AT THE TOP of the stylesheet, with !important    ║
   ║ where Tailwind utilities are otherwise winning the cascade.       ║
   ║ Goal: red AND pink visible side-by-side on every screen.          ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Tailwind ships .border-blood/30, .bg-blood/X etc. utilities — those
   all reference --tw-* under the hood. We can't override every variant,
   but we CAN globally hue-rotate Tailwind's red-blood utilities into
   the red+pink range with a tiny scoped filter. Surgical, doesn't
   touch anything else. */

/* Pink accent text utility — soft variant only. `.text-pink-hot`
   was removed (never referenced in HTML); `.text-pink-soft`
   stays because it ships on a couple of secondary labels. */
.text-pink-soft{ color: #ff5cb8 !important; }

/* Hero CHIP — the "Founders Cohort · Early Access" pill on the
   landing — flip from red to red→pink gradient. */
.hero-chip {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.1), rgba(255, 0, 136, 0.12)) !important;
  border: 1px solid rgba(255, 0, 136, 0.4) !important;
  color: #ff5cb8 !important;
  box-shadow: 0 0 20px rgba(255, 0, 136, 0.25) !important;
}

/* Removed dead hover rules — `.post-card`, `.thread-card`, and
   `.story-item` are CSS-only classes that don't appear on any
   element in the current HTML. Real posts use `.post`, threads
   use `.thread`, stories use `.story`. The pink hover wash now
   lives on those real selectors elsewhere in this file. */

/* Stories rail — story-ring lives on real `.story` elements. */
.story-ring {
  background: conic-gradient(from 0deg, #ff0033, #ff0066, #ff0088, #ff5cb8, #ff0066, #ff0033) !important;
}

/* Feed shell + threads shell — subtle pink ambient blob in the bg */
.feed-shell::before,
.threads-shell::before {
  content: '';
  position: fixed;
  top: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 136, 0.08), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.feed-shell::after,
.threads-shell::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: -15%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 51, 0.08), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* Topnav — subtle pink-red gradient strip under the glassy black */
.topnav {
  border-bottom: 1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255, 0, 136, 0.03), transparent),
    rgba(5, 5, 5, 0.85) !important;
}
.topnav::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 51, 0.4) 30%, rgba(255, 0, 136, 0.5) 70%, transparent 100%);
}

/* Active nav link — even louder pink, just so this lands */
.nav-link.active {
  color: #ff0088 !important;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.12), rgba(255, 0, 136, 0.18)) !important;
  box-shadow: 0 0 18px rgba(255, 0, 136, 0.3), 0 0 0 1px rgba(255, 0, 136, 0.35) inset !important;
  text-shadow: 0 0 14px rgba(255, 0, 136, 0.7);
}

/* Topnav search border on focus → pink */
.topnav-search:focus-within {
  border-color: rgba(255, 0, 136, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 136, 0.15) !important;
}

/* Giveaway banner — pink wins the marquee */
.giveaway-banner {
  background:
    radial-gradient(900px 120px at 0% 50%, rgba(255, 0, 136, 0.22), transparent 60%),
    radial-gradient(900px 120px at 100% 50%, rgba(255, 0, 51, 0.18), transparent 60%),
    linear-gradient(90deg, rgba(15, 6, 8, 0.96), rgba(15, 6, 8, 0.96)) !important;
  border-bottom: 1px solid rgba(255, 0, 136, 0.35) !important;
}
.giveaway-banner:hover {
  background:
    radial-gradient(900px 120px at 0% 50%, rgba(255, 0, 136, 0.32), transparent 60%),
    radial-gradient(900px 120px at 100% 50%, rgba(255, 0, 51, 0.28), transparent 60%),
    linear-gradient(90deg, rgba(15, 6, 8, 1), rgba(15, 6, 8, 1)) !important;
}
.giveaway-banner-mark {
  background: #ff0088 !important;
  box-shadow: 0 0 14px #ff0088, 0 0 28px rgba(255, 0, 136, 0.6) !important;
}
.giveaway-banner-flag {
  background: linear-gradient(135deg, #ff0033, #ff0066, #ff0088) !important;
}
.giveaway-banner-cta { color: #ff5cb8 !important; }

/* Signup-card brand variant — pink halo on the verified-only path */
.signup-card-brand {
  background:
    linear-gradient(180deg, rgba(255, 0, 136, 0.12), transparent 60%),
    rgba(17, 17, 17, 0.75) !important;
  border-color: rgba(255, 0, 136, 0.4) !important;
}
.signup-card-brand .signup-card-flag {
  background: linear-gradient(135deg, #ff0033, #ff0066, #ff0088) !important;
}

/* Account widget trigger hover */
.account-trigger:hover {
  border-color: rgba(255, 0, 136, 0.55) !important;
  box-shadow: 0 0 14px rgba(255, 0, 136, 0.25) !important;
}
.account-avatar {
  background: linear-gradient(135deg, #ff0033, #ff0066, #ff0088) !important;
}

/* Notification bell — pink dot */
.topnav-bell-dot {
  background: #ff0088 !important;
  box-shadow: 0 0 8px #ff0088, 0 0 16px rgba(255, 0, 136, 0.6) !important;
}

/* Bookmark + save — saved state goes pink */
.post-action.save.saved {
  color: #ff0088 !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 136, 0.5));
}

/* Compose post + thread inputs — pink focus ring */
.compose-textarea:focus,
.thread-compose-input:focus,
.comment-input:focus {
  border-color: rgba(255, 0, 136, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 136, 0.15) !important;
}

/* Stories item ring */
.story-ring-inner { background: #050505 !important; } /* center stays black */

/* Mobile bottom nav active state */
.bn-item.active {
  color: #ff0088 !important;
  text-shadow: 0 0 10px rgba(255, 0, 136, 0.6);
}
.bn-create {
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 50%, #ff0088 100%) !important;
  box-shadow:
    0 8px 22px -8px rgba(255, 0, 51, 0.7),
    0 0 22px rgba(255, 0, 136, 0.5) !important;
}

/* Loader tagline — pink-and-white gradient sweep.
   Horizontal 5-stop ramp: blood red on the outside edges →
   soft pink → bone white in the middle. Reads as the letters
   catching a runway spotlight in the center, with the brand
   reds bracketing the edges. Animates left↔right via the
   keyframes below so the highlight slides through the line
   rather than sitting static. */
.loader-tagline {
  background: linear-gradient(
    90deg,
    #ff0033 0%,
    #ff5cb8 22%,
    #ffffff 50%,
    #ff5cb8 78%,
    #ff0033 100%
  ) !important;
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: loaderTaglineSweep 6.5s ease-in-out infinite,
             fadeInUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
}
@keyframes loaderTaglineSweep {
  0%,
  100% { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
}

/* Brand verify badge stays green (verified) — but the local creator
   badge (pink toggle) gets pink */
.profile-badge.verified-talent {
  color: #ff0088 !important;
  border-color: rgba(255, 0, 136, 0.4) !important;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.15), rgba(255, 0, 51, 0.05)) !important;
}
.profile-badge.verified-talent i { color: #ff0088 !important; }

/* Threads tab indicator + profile tab active */
.profile-tab.active {
  color: #ff0088 !important;
  border-bottom-color: #ff0088 !important;
}

/* Toast — pink halo */
#toast {
  border-color: rgba(255, 0, 136, 0.4) !important;
  box-shadow: 0 0 24px rgba(255, 0, 136, 0.3), 0 8px 22px -8px rgba(255, 0, 51, 0.5) !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ STORY VIEWER (Instagram-style auto-advancing fullscreen)          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.story-viewer-card {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 9 / 16;
  max-height: 95vh;
  background: #050505;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 136, 0.3);
  box-shadow: 0 30px 90px -20px rgba(255, 0, 136, 0.5);
}
.story-viewer-progress {
  position: absolute; top: 10px; left: 12px; right: 12px;
  display: flex; gap: 4px;
  z-index: 5;
}
.story-progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.story-progress-seg.done { background: rgba(255, 255, 255, 0.85); }
.story-progress-seg.active {
  background: rgba(255, 255, 255, 0.25);
  position: relative;
}
.story-progress-seg.active::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #ff0033, #ff0088);
  animation: storyProgress 5s linear forwards;
  transform-origin: left;
}
@keyframes storyProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.story-viewer-head {
  position: absolute; top: 28px; left: 16px; right: 60px;
  display: flex; align-items: center; gap: 10px;
  z-index: 5;
}
.story-viewer-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #ff0088);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.story-viewer-name {
  font-size: 13px; font-weight: 600; color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.story-viewer-time {
  font-size: 11px; color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.story-viewer-media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.story-viewer-media img,
.story-viewer-media video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.story-viewer-prev,
.story-viewer-next {
  position: absolute; top: 80px; bottom: 80px; width: 35%;
  background: transparent; z-index: 4;
  cursor: pointer;
}
.story-viewer-prev { left: 0; }
.story-viewer-next { right: 0; }
.story-viewer-delete {
  position: absolute; bottom: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #ff5050;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background 0.2s, color 0.2s;
}
.story-viewer-delete.hidden { display: none; }
.story-viewer-delete:hover { background: rgba(255, 80, 80, 0.2); }
.story-viewer-card .modal-close {
  position: absolute; top: 28px; right: 14px;
  z-index: 6;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.story-mine-has .story-ring-mine {
  background: conic-gradient(from 0deg, #ff0033, #ff0066, #ff0088, #ff5cb8, #ff0066, #ff0033) !important;
}

/* ── Contact: Instagram social link ── */
.contact-socials {
  margin-top: 20px;
  display: flex; gap: 10px; justify-content: center;
}
.contact-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.1), rgba(255, 0, 136, 0.15));
  border: 1px solid rgba(255, 0, 136, 0.4);
  color: #ff5cb8;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.contact-social:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 136, 0.8);
  box-shadow: 0 0 24px rgba(255, 0, 136, 0.35);
  color: #ff8ac7;
}
.contact-social i { font-size: 18px; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ LEFT SIDEBAR  —  Primary discovery rail. Fixed on desktop,        ║
   ║ off-canvas drawer on mobile (toggled by .open).                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.left-rail {
  position: fixed;
  top: 64px; bottom: 0; left: 0;
  width: 240px;
  background: linear-gradient(180deg,
    rgba(8, 8, 8, 0.92),
    rgba(5, 5, 5, 0.96));
  border-right: 1px solid rgba(255, 0, 136, 0.18);
  padding: 22px 14px 24px;
  z-index: 35;
  overflow-y: auto;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.left-rail::-webkit-scrollbar { width: 4px; }
.left-rail::-webkit-scrollbar-thumb { background: rgba(255, 0, 136, 0.2); border-radius: 4px; }

/* Mobile / small viewports: hidden by default, slides in on .open */
@media (max-width: 1023px) {
  .left-rail {
    transform: translateX(-100%);
    z-index: 45;
    width: 280px;
    box-shadow: 12px 0 60px -10px rgba(0, 0, 0, 0.7);
  }
  .left-rail.open { transform: translateX(0); }
}

.left-rail-nav { display: flex; flex-direction: column; gap: 4px; }
.left-rail-link {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px; font-weight: 600;
  color: rgba(245, 245, 245, 0.75);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  position: relative;
}
.left-rail-link i {
  font-size: 18px;
  color: rgba(255, 0, 136, 0.7);
  width: 22px; text-align: center;
}
.left-rail-link:hover {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.06), rgba(255, 0, 136, 0.1));
  color: #fff;
  transform: translateX(2px);
}
.left-rail-link.active {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(255, 0, 136, 0.22));
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 0, 136, 0.25), 0 0 0 1px rgba(255, 0, 136, 0.32) inset;
}
.left-rail-link.active i { color: #ff0088; filter: drop-shadow(0 0 6px rgba(255, 0, 136, 0.7)); }
.left-rail-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 136, 0.3), transparent);
  margin: 14px 8px;
}
.left-rail-create {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: white;
}
.left-rail-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 44;
}
.left-rail-backdrop.hidden { display: none; }

/* Bottom nav must ONLY appear for signed-in users and ONLY when they
   are NOT on the landing page. Spec: "Landing Page must show ONLY the
   clean landing — no left sidebar, no bottom-nav clutter." */
body:not(.signed-in) .bottom-nav,
body.on-landing .bottom-nav { display: none !important; }

/* Hidden state — sidebar must NEVER show on landing or when logged out.
   JS toggles .rail-hidden on the rail and .with-rail on <body> so the
   margin shift is conditional on whether the rail is actually visible. */
.left-rail.rail-hidden {
  transform: translateX(-110%);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
}

/* Content shift: leave room for the rail on desktop ONLY when it's
   actually visible. Landing + logged-out users get full-bleed canvas. */
@media (min-width: 1024px) {
  body.with-rail .views { margin-left: 240px; }
  body.with-rail .legal-footer { margin-left: 240px; }
  .left-rail-backdrop { display: none !important; }
  /* Hide the mobile bottom nav on desktop only when the rail is shown */
  body.with-rail .bottom-nav { display: none !important; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ EXPLORE VIEW                                                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.explore-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 100px;
}
@media (min-width: 768px) { .explore-shell { padding: 50px 24px 100px; } }
.explore-head { text-align: center; margin-bottom: 28px; }
.explore-search {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.85);
  border: 1px solid rgba(255, 0, 136, 0.28);
  box-shadow: 0 0 28px rgba(255, 0, 136, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  margin-bottom: 18px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.explore-search:focus-within {
  border-color: rgba(255, 0, 136, 0.6);
  box-shadow: 0 0 36px rgba(255, 0, 136, 0.35), 0 0 0 3px rgba(255, 0, 136, 0.18);
}
.explore-search i { color: #ff0088; font-size: 18px; }
.explore-search input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #f5f5f5;
  font-family: inherit; font-size: 16px;
  outline: none;
}
.explore-search input::placeholder { color: rgba(245, 245, 245, 0.45); }

.explore-quick {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 28px;
}
.explore-quick-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.7);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.explore-quick-chip:hover {
  color: #fff;
  border-color: rgba(255, 0, 136, 0.45);
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.08), rgba(255, 0, 136, 0.12));
  transform: translateY(-1px);
}
.explore-quick-chip i { color: #ff0088; font-size: 11px; }

.explore-results {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 24px;
}
.explore-results:empty { display: none; }
.explore-result {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(17, 17, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.explore-result:hover { border-color: rgba(255, 0, 136, 0.4); background: rgba(17, 17, 17, 1); }
.explore-result-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.15), rgba(255, 0, 136, 0.2));
  color: #ff5cb8;
}
.explore-result-meta { flex: 1; min-width: 0; }
.explore-result-meta strong { display: block; font-size: 14px; }
.explore-result-meta span { font-size: 11.5px; color: rgba(245, 245, 245, 0.55); }

.explore-section-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 22px;
  color: #f5f5f5;
  margin: 12px 0 4px;
}
.explore-section-sub {
  font-size: 13px; color: rgba(245, 245, 245, 0.55);
  margin-bottom: 18px;
}
.explore-creator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .explore-creator-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .explore-creator-grid { grid-template-columns: repeat(4, 1fr); } }
.explore-creator-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 0, 136, 0.22);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.explore-creator-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -28px rgba(255, 0, 136, 0.6);
}
.explore-creator-card-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.explore-creator-card-name {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 20px;
  color: white;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.explore-creator-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.8));
  z-index: 1;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ VIDEO COMPRESSION OVERLAY (Reels upload UX)                       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.compress-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 5, 5, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s;
}
.compress-overlay.on { opacity: 1; }
.compress-card {
  width: min(360px, 90vw);
  padding: 32px 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 0, 136, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(20, 8, 14, 0.95), rgba(8, 8, 8, 0.98));
  border: 1px solid rgba(255, 0, 136, 0.4);
  box-shadow: 0 30px 80px -20px rgba(255, 0, 136, 0.45);
  text-align: center;
}
.compress-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #ff0088);
  color: white;
  font-size: 22px;
  box-shadow: 0 0 30px rgba(255, 0, 136, 0.6);
  margin-bottom: 16px;
  animation: compressPulse 1.4s ease-in-out infinite;
}
@keyframes compressPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.compress-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 22px;
  color: white;
  margin-bottom: 6px;
}
.compress-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
  min-height: 18px;
}
.compress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 14px;
}
.compress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff0033, #ff0066, #ff0088, #ff5cb8);
  border-radius: 999px;
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(255, 0, 136, 0.7);
}
.compress-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ELLY · SPOTLIGHT CAROUSEL                                         ║
   ║ The in-card slideshow that replaced her static silhouette.        ║
   ║ Auto-advances, paused on hover, click anywhere → lightbox.        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.spotlight-card-elly { cursor: default; }
.spotlight-card-elly .spotlight-frame {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.spotlight-card-elly .spotlight-frame:focus-visible {
  outline: 3px solid rgba(255, 0, 136, 0.6);
  outline-offset: 4px;
}
.spotlight-carousel {
  position: absolute;
  inset: 0;
  background: #050505;
}
.spotlight-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex; align-items: center; justify-content: center;
  background: #050505;
}
.spotlight-carousel-slide.active { opacity: 1; }
.spotlight-carousel-slide img,
.spotlight-carousel-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* clicks pass through to the frame button */
}
/* The JIT-injected <video> sits on top of the poster <img> within
   the same slide. Browser paints first frame the moment metadata
   resolves — poster fills the gap until then so the slide is
   never empty. */
.spotlight-carousel-slide video { z-index: 2; }
/* Soft vignette so the IG pill + meta text stay legible no matter
   what's on the slide. */
.spotlight-card-elly .spotlight-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse at top right, rgba(255, 0, 136, 0.15), transparent 60%);
  pointer-events: none;
  z-index: 2;
}
.spotlight-card-elly .spotlight-ig-pill {
  position: absolute;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 0, 136, 0.45);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.spotlight-card-elly .spotlight-ig-pill:hover {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.5), rgba(255, 0, 136, 0.5));
  border-color: rgba(255, 0, 136, 0.8);
}

/* Pagination dots — sit above the meta footer, below the vignette */
.spotlight-carousel-dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  z-index: 3;
  display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
}
.spotlight-carousel-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.3s ease, background 0.3s;
}
.spotlight-carousel-dot.active {
  width: 16px;
  background: linear-gradient(90deg, #ff0033, #ff0088);
  box-shadow: 0 0 8px rgba(255, 0, 136, 0.7);
}

/* "Tap for more" hint on the carousel — fades after 4s so it doesn't
   distract from the looping media. */
.spotlight-carousel-hint {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: hintFade 4s ease forwards;
}
@keyframes hintFade {
  0%, 70% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ── Lightbox (fullscreen viewer) ── */
.lightbox-card {
  position: relative;
  width: min(96vw, 1100px);
  height: min(92vh, 900px);
  background: #050505;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 0, 136, 0.3);
  box-shadow: 0 30px 100px -20px rgba(255, 0, 136, 0.5);
}
.lightbox-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.lightbox-stage img,
.lightbox-stage video {
  /* Fill the stage — without explicit width/height, native video
     elements default to their intrinsic ~640×360 size and look tiny
     inside a big modal. object-fit: contain keeps the aspect ratio. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.lightbox-prev,
.lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  z-index: 5;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.7), rgba(255, 0, 136, 0.7));
  transform: translateY(-50%) scale(1.06);
}
.lightbox-counter {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; color: white;
  z-index: 5;
  backdrop-filter: blur(6px);
}
.lightbox-card .modal-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  z-index: 6;
}

/* Global red→pink gradient text for every .text-blood accent across
   the SPA. !important because Tailwind CDN injects its own
   .text-blood { color: #ff0033 } AFTER our stylesheet loads, and
   we want the gradient to win the cascade everywhere. */
.text-blood {
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 35%, #ff0088 70%, #ff5cb8 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 30px rgba(255, 0, 136, 0.5);
  filter: drop-shadow(0 0 18px rgba(255, 0, 136, 0.4));
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ PINK-GRADIENT TEXT  —  signature treatment for usernames /        ║
   ║ handles / key buttons. Lighter than .text-blood (no halo) so it   ║
   ║ doesn't dominate every line it appears in. Use:                   ║
   ║   <span class="text-pink-grad">@handle</span>                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.text-pink-grad {
  background: linear-gradient(135deg, #ff8ac7 0%, #ff5cb8 30%, #ff0088 60%, #ff0066 90%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700;
}
/* Auto-apply to the canonical author / handle spans across every
   render site so we don't have to touch JS strings. The classes
   below match the actual selectors in synfluencer.js:
     .post-author / .post-handle     — feed post header
     .profile-handle / #profileName  — profile view
     .thread-reply-name              — thread replies
     .s-handle                       — search results
     .account-name                   — topnav account widget
     .spotlight-name / .spotlight-handle — landing spotlight cards */
.post-author,
.post-handle,
.profile-handle,
.thread-reply-name,
.s-handle,
.account-name,
.account-menu-id strong,
.spotlight-name,
.spotlight-handle,
#profileName {
  background: linear-gradient(135deg, #ff8ac7 0%, #ff5cb8 30%, #ff0088 60%, #ff0066 90%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700;
  /* Tiny pink halo so the gradient reads even at smaller sizes */
  filter: drop-shadow(0 0 6px rgba(255, 0, 136, 0.25));
}

/* html keeps a solid black bg as the ultimate fallback. Body is
   transparent so the .bg-fx layer paints the real backdrop unobstructed
   across every view in the SPA. */
html {
  background: #050505;
  color: #f5f5f5;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background: transparent;
  color: #f5f5f5;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* ── Brand mark ──────────────────────────────────────────── */
.brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(255, 0, 51, 0.45));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-mark:hover { transform: scale(1.06) rotate(-2deg); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   LOADER  (~4 s cinematic intro)
   ─────────────────────────────────────────────────────────────────────────
   Layered, from background to foreground:
     - .loader-scanline      one-shot horizontal sweep that "scans" the page
     - .loader-pulse         expanding concentric rings (3, staggered)
     - .loader-particles     orbital dots positioned by --a (angle) and --r
     - .loader-rings  (SVG)  faint track + tick marks + animated progress arc
     - .loader-logo          centered SYNFLUENCER wordmark with neon glow
     - .loader-bar           thin progress bar below, fed by JS
   The whole stage fades out when JS adds .done.
   ========================================================================== */

.loader {
  background:
    radial-gradient(ellipse at center,
      rgba(255, 0, 51, 0.08) 0%,
      rgba(5, 5, 5, 0.5) 35%,
      #050505 75%),
    #050505;
  opacity: 1;
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1.1s;
  will-change: opacity;
}
.loader.done {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Stage = the 300×300 / 360×360 centered area that holds rings + logo */
.loader-stage {
  animation: loaderStageIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes loaderStageIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* One-shot scan line — a thin red glow that sweeps top to bottom */
.loader-scanline {
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 51, 0.85) 50%, transparent 100%);
  box-shadow: 0 0 28px rgba(255, 0, 51, 0.6), 0 0 80px rgba(255, 0, 51, 0.35);
  opacity: 0;
  animation: scan 3.4s cubic-bezier(0.55, 0, 0.45, 1) 0.15s 1;
}
@keyframes scan {
  0%   { top: 0;    opacity: 0; }
  6%   { opacity: 0.9; }
  50%  { top: 50vh; opacity: 1; }
  94%  { opacity: 0.5; }
  100% { top: 100vh; opacity: 0; }
}

/* Expanding pulse rings (3 of them, staggered) — pure CSS */
.loader-pulse {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  /* Alternating red + pink rings — the staggered animation-delay
     on the three <span>s makes them ripple out in different hues. */
  border: 1px solid rgba(255, 0, 102, 0.4);
  box-shadow:
    0 0 24px rgba(255, 0, 136, 0.3) inset,
    0 0 36px rgba(255, 0, 51, 0.25);
  opacity: 0;
  animation: pulseRing 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.loader-pulse:nth-child(2) { border-color: rgba(255, 0, 136, 0.4); box-shadow: 0 0 28px rgba(255, 0, 136, 0.35) inset; }
.loader-pulse:nth-child(3) { border-color: rgba(255, 0, 51, 0.4);  box-shadow: 0 0 24px rgba(255, 0, 51, 0.3) inset; }
@media (min-width: 768px) {
  .loader-pulse { width: 260px; height: 260px; }
}
@keyframes pulseRing {
  0%   { transform: scale(0.5); opacity: 0; }
  18%  { opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Orbital particles — each <span> placed at --a / --r, fades in then twinkles */
.loader-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.loader-particles span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.9), 0 0 20px rgba(255, 0, 51, 0.5);
  transform:
    rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  opacity: 0;
  animation:
    particleAppear 0.6s ease var(--d, 0s) both,
    particleTwinkle var(--s, 2s) ease-in-out var(--d, 0s) infinite;
}
@keyframes particleAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes particleTwinkle {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px rgba(255, 0, 51, 0.9), 0 0 20px rgba(255, 0, 51, 0.5); }
  50%      { opacity: 0.25; box-shadow: 0 0 4px  rgba(255, 0, 51, 0.4); }
}

/* SVG rings — sized to the stage by `inset:0` */
.loader-rings { width: 100%; height: 100%; }
#loaderRing {
  transition: stroke-dashoffset 0.1s linear;
}

/* The loader's only brand element now — full logo image (the master
   file carries the SF symbol, SYNFLUENCERS wordmark, AND the tagline).
   No more drawn-in-HTML text. Sized to dominate the loading frame. */
.loader-logo-img {
  width: clamp(240px, 45vw, 460px);
  height: auto;
  /* Triple-stacked drop-shadow: red base, pink mid, pink soft outer.
     Reads as a neon halo that fades from red at the source out to
     pink at the edges — the brand's "sexy black + red + pink" vibe
     literally radiating from the wordmark. */
  filter:
    drop-shadow(0 18px 60px rgba(255, 0, 51, 0.65))
    drop-shadow(0 0 70px rgba(255, 0, 136, 0.55))
    drop-shadow(0 0 120px rgba(225, 29, 138, 0.35));
  animation: loaderLogoFloat 4s ease-in-out infinite, fadeIn 0.6s ease both, loaderLogoNeon 3.5s ease-in-out infinite;
}
@keyframes loaderLogoNeon {
  0%, 100% {
    filter:
      drop-shadow(0 18px 60px rgba(255, 0, 51, 0.65))
      drop-shadow(0 0 70px rgba(255, 0, 136, 0.55))
      drop-shadow(0 0 120px rgba(225, 29, 138, 0.35));
  }
  50% {
    filter:
      drop-shadow(0 18px 60px rgba(255, 0, 136, 0.7))
      drop-shadow(0 0 80px rgba(255, 0, 51, 0.6))
      drop-shadow(0 0 140px rgba(255, 0, 136, 0.45));
  }
}
@keyframes loaderLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* (The old .loader-logo text-wordmark styles were removed — the
   master logo image now contains the SYNFLUENCERS wordmark, so
   there's no HTML text to style.) */

/* Progress bar (filled by JS via width: NN%) */
.loader-bar {
  animation: fadeIn 0.8s ease 0.45s both;
}
.loader-fill {
  background: linear-gradient(90deg, rgba(255,0,51,0.7) 0%, #ff1744 50%, #ff0033 100%);
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.75);
  transition: width 0.12s linear;
}
.loader-pct {
  animation: fadeIn 0.8s ease 0.45s both;
}
/* NB: the .loader-tagline rule earlier in this file (~line 215)
   already declares its `animation` shorthand — both the entrance
   `fadeInUp` and the looping `loaderTaglineSweep` gradient slide.
   Don't re-declare animation here or this later rule will clobber
   the sweep. Leaving this comment so future passes don't add it
   back. */

@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   BACKGROUND  (.bg-fx)
   Fixed full-viewport layer that paints reliably above the body's solid
   black bg and below every content layer. Two stacked elements:
     - .bg-fx-glow   two big red radial glows that drift on a 22 s loop
                     so the page always feels alive. ALSO responds to
                     cursor via --px / --py (set by the parallax IIFE).
     - .bg-fx-grain  SVG fractal-noise overlay for analog texture.
   No mix-blend-mode anywhere — those were silently failing in some
   stacking contexts, which is why "there's no background" kept happening.
   ========================================================================== */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;            /* bottom of the stacking context */
  pointer-events: none;
  overflow: hidden;
  background: #050505;   /* solid base, the glow paints on top */
}
/* Make absolutely sure every interactive layer sits above .bg-fx. */
#loader   { z-index: 60 !important; }
#topnav   { z-index: 40 !important; }
.views    { position: relative; z-index: 10; }
#postModal,
#editModal { z-index: 50 !important; }
#appBanner { z-index: 50 !important; }
#toast     { z-index: 70 !important; }
.bg-fx-glow {
  position: absolute;
  inset: 0;
  /* Five radial blobs layered into a seductive red→pink atmosphere.
     Order matters — last layer paints on top of earlier ones.
     Reads as: red top-right, hot-pink top-left, deep wine center,
     hot-pink bottom-right, red bottom-left. Each blob is positioned
     and sized so they overlap in the middle without harsh seams. */
  background:
    /* TOP-RIGHT ember — classic blood-red */
    radial-gradient(ellipse 65vw 55vh at 82% 12%,
      rgba(255, 0, 51, 0.42) 0%,
      rgba(255, 0, 51, 0.14) 28%,
      transparent 62%),
    /* TOP-LEFT hot pink — the new sexy */
    radial-gradient(ellipse 60vw 55vh at 14% 18%,
      rgba(255, 0, 136, 0.40) 0%,
      rgba(255, 0, 136, 0.14) 26%,
      transparent 60%),
    /* BOTTOM-RIGHT pink wash — softer hue, larger spread */
    radial-gradient(ellipse 75vw 65vh at 85% 88%,
      rgba(255, 92, 184, 0.32) 0%,
      rgba(255, 0, 136, 0.10) 30%,
      transparent 62%),
    /* BOTTOM-LEFT red→pink crossover */
    radial-gradient(ellipse 70vw 60vh at 12% 88%,
      rgba(255, 23, 68, 0.34) 0%,
      rgba(255, 0, 102, 0.12) 28%,
      transparent 60%),
    /* DEEP CENTER wine pool — anchors the composition */
    radial-gradient(circle 42vw at 50% 55%,
      rgba(122, 0, 60, 0.38) 0%,
      rgba(122, 0, 25, 0.12) 35%,
      transparent 65%);
  /* mouse-parallax tilt + slow autonomous drift */
  transform: translate3d(
    calc(var(--px, 0) * -30px),
    calc(var(--py, 0) * -22px),
    0);
  animation: bgGlowDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgGlowDrift {
  0%   { background-position: 0% 0%,   0% 0%,   0% 0%,   0% 0%,   0% 0%; }
  50%  { background-position: 4% -3%,  -3% 4%,  -5% -2%, 5% 3%,   -2% 4%; }
  100% { background-position: -3% 5%,  6% -3%,  3% 5%,   -4% -3%, 4% -3%; }
}

/* SECOND background layer — slow-cycling color-shift veil that breathes
   the whole page between red-dominant and pink-dominant lighting.
   NO mix-blend-mode — earlier comment in this file flagged it as
   silently failing in some stacking contexts. Lower opacity instead. */
.bg-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 0, 136, 0.16), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(255, 0, 51, 0.14), transparent 45%);
  animation: bgHueBreath 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgHueBreath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

/* THIRD background layer — animated diagonal sheen that sweeps across
   the page every ~18s. Visible as a subtle pink "highlight bar" moving
   diagonally — the kind of thing you notice on second glance and it
   sells the "expensive" feel. */
.bg-fx::before {
  content: '';
  position: absolute;
  inset: -20% -20% -20% -20%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 0, 136, 0.06) 47%,
    rgba(255, 0, 51, 0.10) 50%,
    rgba(255, 0, 136, 0.06) 53%,
    transparent 65%);
  animation: bgSheen 18s linear infinite;
  pointer-events: none;
}
@keyframes bgSheen {
  0%   { transform: translate3d(-30%, -10%, 0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(30%, 10%, 0); opacity: 0; }
}
.bg-fx-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 220px 220px;
  opacity: 0.08;
}

/* (explicit z-index rules for every layer live in the .bg-fx block above) */

/* Legacy aliases — portal.html still uses .page-bg / .aurora markup.
   Map them onto the new system so the portal background works without
   touching that file. */
.page-bg { position: fixed; inset: 0; z-index: 0; background: #050505;
           pointer-events: none; overflow: hidden; }
.page-bg .aurora,
.page-bg .grain,
.page-bg .vignette {
  position: absolute; inset: 0; pointer-events: none;
}
.page-bg .aurora-1 {
  background:
    radial-gradient(ellipse 70vw 60vh at 80% 15%,
      rgba(255, 0, 51, 0.42) 0%, transparent 60%);
}
.page-bg .aurora-2 {
  background:
    radial-gradient(ellipse 75vw 60vh at 15% 85%,
      rgba(255, 23, 68, 0.30) 0%, transparent 60%);
}
.page-bg .aurora-3 {
  background:
    radial-gradient(circle 45vw at 50% 55%,
      rgba(122, 0, 25, 0.35) 0%, transparent 65%);
}
.page-bg .grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 220px 220px;
  opacity: 0.08;
}
.page-bg .vignette { display: none; } /* not needed with the new gradients */

/* ==========================================================================
   PAGE — scrollable wrapper that holds hero, services, footer-CTA, footer.
   Hidden behind the loader on first paint; fades + scales in once JS adds
   the .reveal class.
   ========================================================================== */
.page {
  opacity: 0;
  transform: scale(0.965);
  filter: blur(8px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    filter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  will-change: opacity, transform, filter;
}
.page.reveal {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Subtle radial glow centered behind the headline */
.hero-glow {
  background:
    radial-gradient(ellipse 60vw 50vh at 50% 50%,
      rgba(255, 0, 51, 0.10) 0%,
      rgba(255, 0, 51, 0.04) 25%,
      transparent 65%);
}

/* ── FIXED TOP NAV ──────────────────────────────────────────────
   Always-visible glass nav. Sits at the top of the document at all
   times, even mid-scroll. Logo + brand left, Login right. Adds a thin
   red hairline once you've scrolled away from the page top
   (JS toggles `.scrolled` on this element). */
.topnav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.55) 100%);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, padding 0.3s ease;
}
.topnav.scrolled {
  padding: 9px 20px;
  border-bottom-color: rgba(255, 0, 51, 0.25);
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.75) 100%);
}
@media (min-width: 768px) {
  .topnav { padding: 14px 28px; }
  .topnav.scrolled { padding: 10px 28px; }
}
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* The brand mark in the topnav is the full master logo. Because the
   image has the SF symbol on top + "SYNFLUENCERS" + tagline stacked
   vertically, we size by height and let width scale. At ~52 px tall
   the SF mark + word "SYNFLUENCERS" both read; the tagline becomes
   a subtle accent line. */
.topnav-logo {
  height: 52px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* Layered red + pink neon — pink wins the outer halo so the wordmark
     reads "luxury sexy" on every page, not just the loader. */
  filter:
    drop-shadow(0 0 14px rgba(255, 0, 51, 0.5))
    drop-shadow(0 0 28px rgba(255, 0, 136, 0.35));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}
.topnav-brand:hover .topnav-logo {
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 16px rgba(255, 0, 51, 0.6))
    drop-shadow(0 0 34px rgba(255, 0, 136, 0.5));
}
@media (min-width: 768px) {
  .topnav-logo { height: 64px; max-width: 280px; }
}
/* Unified red wordmark — matches the loader's neon treatment, sized
   confidently so the brand reads from across the room. */
.topnav-wordmark {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff0033;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(255, 0, 51, 0.65),
    0 0 28px rgba(255, 0, 51, 0.32);
}
@media (min-width: 768px) {
  .topnav-wordmark { font-size: 19px; letter-spacing: 0.2em; }
}
.topnav-login {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.6);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.topnav-login:hover {
  color: #ff0033;
  border-color: rgba(255, 0, 51, 0.4);
  background: rgba(255, 0, 51, 0.05);
}
@media (min-width: 768px) {
  .topnav-login { font-size: 11px; padding: 9px 20px; }
}

/* ── APP STORE / GOOGLE PLAY BADGES ──────────────────────────────
   Real-feel store pills under the waitlist CTA. Visible on every
   viewport (the bottom mobile banner from before is a separate piece
   for sticky persistence — these are static placements in the flow). */
.app-badges {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.app-badges-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.35);
}
.app-badges-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 0, 51, 0.35) 50%,
    transparent 100%);
}
.app-badges-row {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  font: inherit;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  min-width: 0;
}
.app-badge:hover:not([disabled]) {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 51, 0.4);
  box-shadow: 0 14px 36px -12px rgba(255, 0, 51, 0.6);
}
/* Disabled state (app not shipped yet) — muted, no hover lift */
.app-badge[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}
.app-badge i {
  font-size: 26px;
  line-height: 1;
  color: #f5f5f5;
}
.app-badge-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}
.app-badge-tiny {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: rgba(245, 245, 245, 0.55);
  text-transform: none;
}
.app-badge-big {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f5f5f5;
}
@media (min-width: 640px) {
  .app-badge { padding: 11px 20px 11px 18px; }
  .app-badge i { font-size: 28px; }
  .app-badge-big { font-size: 16px; }
}

/* Hero child stagger (each transitions on its own delay so the screen
   resolves like a camera focus pull, not a slamming reveal) */
.hero-chip,
.hero-accent,
.hero-headline,
.hero-sub,
.hero .cta-glow,
.app-badges,
.hero-tagline,
.scroll-cue {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The hairline accent grows in horizontally rather than rising */
.hero-accent {
  transform: scaleX(0);
  transform-origin: center;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.55);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.page.reveal .hero-chip      { opacity: 1; transform: none; transition-delay: 0.25s; }
.page.reveal .hero-accent    { opacity: 1; transform: scaleX(1); transition-delay: 0.40s; }
.page.reveal .hero-headline  { opacity: 1; transform: none; transition-delay: 0.50s; }
.page.reveal .hero-sub       { opacity: 1; transform: none; transition-delay: 0.80s; }
.page.reveal .hero .cta-glow { opacity: 1; transform: none; transition-delay: 1.00s; }
.page.reveal .app-badges     { opacity: 1; transform: none; transition-delay: 1.20s; }
.page.reveal .hero-tagline   { opacity: 1; transform: none; transition-delay: 1.40s; }
.page.reveal .scroll-cue     { opacity: 1; transform: none; transition-delay: 1.60s; }

/* "First" gets a slow ember glow */
.hero-first {
  text-shadow:
    0 0 30px rgba(255, 0, 51, 0.55),
    0 0 70px rgba(255, 0, 51, 0.35);
  animation: firstPulse 4s ease-in-out 1.6s infinite;
}
@keyframes firstPulse {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(255, 0, 51, 0.55),
      0 0 70px rgba(255, 0, 51, 0.35);
  }
  50% {
    text-shadow:
      0 0 42px rgba(255, 0, 51, 0.85),
      0 0 90px rgba(255, 0, 51, 0.55);
  }
}

/* Scroll cue arrow nudges down to invite scroll */
.scroll-cue i {
  animation: scrollNudge 1.8s ease-in-out infinite;
}
@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ==========================================================================
   FEATURE CARDS  —  numbered premium tiles
   01 ↗   ←  meta row: number left, arrow right
   [icon]
   TALENT AGENCY
   We pitch you to brands, negotiate the bag…
   ========================================================================== */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.6rem;
  min-height: 220px;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.04) 0%, transparent 70%),
    rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  transition:
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease;
  overflow: hidden;
}
/* Hairline red top accent — barely visible at rest, glows on hover */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 51, 0.45), transparent);
  opacity: 0.5;
  transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease;
}
/* Soft red wash that pours up from the bottom on hover */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 110%,
    rgba(255, 0, 51, 0.18) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.feature-card:hover {
  border-color: rgba(255, 0, 51, 0.32);
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px -24px rgba(255, 0, 51, 0.45),
    0 0 0 1px rgba(255, 0, 51, 0.08) inset;
}
.feature-card:hover::before {
  opacity: 1;
  left: 6%;
  right: 6%;
}
.feature-card:hover::after { opacity: 1; }

/* Meta row — 01 ↗ */
.feature-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.feature-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: rgba(255, 0, 51, 0.65);
}
.feature-arrow {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.18);
  transition: color 0.4s ease, transform 0.4s ease;
}
.feature-card:hover .feature-arrow {
  color: #ff0033;
  transform: translate(3px, -3px);
}

/* Icon plate — restrained, more graphite than neon */
.feature-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(255, 0, 51, 0.14) 0%,
    rgba(255, 0, 51, 0.02) 100%);
  border: 1px solid rgba(255, 0, 51, 0.22);
  color: #ff0033;
  font-size: 16px;
  margin-bottom: 1rem;
  box-shadow:
    0 0 22px -6px rgba(255, 0, 51, 0.35) inset,
    0 8px 18px -10px rgba(255, 0, 51, 0.25);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.feature-card:hover .feature-icon {
  border-color: rgba(255, 0, 51, 0.4);
  box-shadow:
    0 0 28px -4px rgba(255, 0, 51, 0.5) inset,
    0 12px 26px -10px rgba(255, 0, 51, 0.45);
}

.feature-title {
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5f5f5;
  margin-bottom: 0.55rem;
}
.feature-desc {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.55);
}
@media (min-width: 768px) {
  .feature-card  { padding: 2rem 1.75rem 1.85rem; min-height: 240px; }
  .feature-icon  { width: 48px; height: 48px; font-size: 17px; }
  .feature-title { font-size: 14px; }
  .feature-desc  { font-size: 13.5px; }
}

/* ==========================================================================
   MARQUEE STRIP  —  scrolling agency ticker between hero and services.
   Sits in a single-row band with fade-out masks on the left/right edges
   so it feels like text passing behind a window, not abruptly clipping.
   ========================================================================== */
.marquee-strip {
  position: relative;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg,
    rgba(255, 0, 51, 0.02) 0%,
    rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  /* fade edges so the text doesn't hard-clip at the viewport border */
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  letter-spacing: -0.01em;
  color: rgba(245, 245, 245, 0.35);
  white-space: nowrap;
  user-select: none;
}
.marquee-track span:nth-child(2n) {
  color: rgba(255, 0, 51, 0.55);
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   SCROLL REVEAL — IntersectionObserver-driven entrance for sections below
   the fold. Children can opt into a per-element delay via --reveal-delay.
   ========================================================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── CTA button glow — used by hero CTA AND modal submit ───────────
   Signature red→black gradient with a slow ember halo + shimmer sweep. */
.cta-glow {
  position: relative;
  /* Red on the left, hot pink on the right — every primary button
     gets the seductive gradient. */
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 50%, #ff0088 100%);
  border: 1px solid rgba(255, 0, 102, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 26px 70px -18px rgba(255, 0, 51, 0.85),
    0 0 90px -10px rgba(255, 0, 136, 0.55);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
  overflow: hidden;
  isolation: isolate;
}
.cta-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-glow:hover { transform: translateY(-2px) scale(1.02); }
.cta-glow:hover::before { transform: translateX(130%); }
.cta-glow:active { transform: scale(0.98); }
.cta-glow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 0, 136, 0.55),
    0 22px 60px -18px rgba(255, 0, 51, 0.85);
}

/* When the page is revealed, kick the hero CTA into a slow ember pulse */
.page.reveal #ctaBtn {
  animation: ctaPulse 3.6s ease-in-out 2.2s infinite;
}
@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 22px 60px -18px rgba(255, 0, 51, 0.85),
      0 0 80px -10px rgba(255, 0, 51, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.10) inset,
      0 28px 80px -10px rgba(255, 0, 51, 1),
      0 0 120px 0 rgba(255, 0, 51, 0.85);
  }
}

/* ── Modal ──────────────────────────────────────────────── */
#modal.open { display: flex; }
#modalCard { animation: modalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.modal-input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 5, 5, 0.7);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  color: #f5f5f5;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-input::placeholder { color: rgba(245, 245, 245, 0.40); }
.modal-input:focus {
  outline: none;
  border-color: #ff0033;
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.25);
}

/* Role selector pills */
.role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(20, 20, 20, 0.5);
  color: rgba(245, 245, 245, 0.70);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.role-pill i { color: rgba(245, 245, 245, 0.45); transition: color 0.2s; }
.role-pill:hover {
  border-color: rgba(255, 0, 51, 0.45);
  color: #f5f5f5;
}
.role-pill.role-active {
  background: rgba(255, 0, 51, 0.16);
  border-color: rgba(255, 0, 51, 0.7);
  color: #ff0033;
}
.role-pill.role-active i { color: #ff0033; }

/* Modal success-state animation — checkmark pops with a halo */
#modalSuccess > div:first-child {
  animation: successPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes successPop {
  0%   { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 0 rgba(255,0,51,0.6); }
  60%  { transform: scale(1.08); opacity: 1; box-shadow: 0 0 0 18px rgba(255,0,51,0); }
  100% { transform: scale(1);   opacity: 1; box-shadow: 0 0 0 0 rgba(255,0,51,0); }
}

/* shadow utility used by the modal card */
.shadow-blood {
  box-shadow:
    0 0 0 1px rgba(255, 0, 51, 0.30),
    0 30px 80px -10px rgba(255, 0, 51, 0.45);
}

/* ── Selection ──────────────────────────────────────────── */
::selection { background: #ff0033; color: #ffffff; }

/* ── Scrollbars (rare, but keep them on-brand) ──────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 0, 51, 0.25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 0, 51, 0.45); }

/* ==========================================================================
   AUTH PAGE  (login / register)
   Centered card with tabbed forms. Lives at "/" — replaces the marketing
   hero. Shares colors/typography with the rest of the brand system.
   ========================================================================== */
.auth-page {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 96px 20px 40px;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .auth-page { padding-top: 120px; align-items: center; }
}
.auth-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: authIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Welcome line above the card */
.auth-welcome { text-align: center; }
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 51, 0.3);
  background: rgba(255, 0, 51, 0.06);
  color: #ff0033;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.auth-title {
  margin-top: 14px;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}
.auth-title .text-blood {
  text-shadow: 0 0 32px rgba(255, 0, 51, 0.4);
}
.auth-sub {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(245, 245, 245, 0.55);
}

/* The card itself */
.auth-card {
  padding: 24px 24px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.04), transparent 60%),
    rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(255, 0, 51, 0.06) inset,
    0 28px 80px -20px rgba(255, 0, 51, 0.35),
    0 0 120px -40px rgba(255, 0, 51, 0.25);
}
@media (min-width: 768px) {
  .auth-card { padding: 28px 30px 30px; }
}

/* Tabs */
.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.auth-tab {
  position: relative;
  z-index: 1;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.3s ease;
}
.auth-tab:hover { color: #f5f5f5; }
.auth-tab.active { color: #ffffff; }
/* Sliding red indicator behind the active tab */
.auth-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 22px -6px rgba(255, 0, 51, 0.7);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-tabs[data-active="register"] .auth-tab-indicator {
  transform: translateX(100%);
}

/* Form fields */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-form.hidden { display: none; }
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.5);
}
.auth-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 5, 0.6);
  color: #f5f5f5;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.auth-input::placeholder { color: rgba(245, 245, 245, 0.32); }
.auth-input:focus {
  outline: none;
  border-color: rgba(255, 0, 51, 0.5);
  background: rgba(5, 5, 5, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.18);
}
.auth-input.error {
  border-color: rgba(255, 0, 51, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.18);
}
.auth-hint {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 245, 0.4);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -4px;
}
.auth-link {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(245, 245, 245, 0.6);
  transition: color 0.2s ease;
}
.auth-link:hover { color: #ff0033; }
.auth-forgot { font-weight: 600; }

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.auth-submit:disabled {
  opacity: 0.65;
  cursor: progress;
}
.auth-submit:hover:not(:disabled) i { transform: translateX(3px); }
.auth-terms {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(245, 245, 245, 0.4);
  text-align: center;
}
.auth-error {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 0, 51, 0.35);
  background: rgba(255, 0, 51, 0.07);
  color: #ff5570;
  font-size: 12px;
  line-height: 1.4;
}
.auth-error[hidden] { display: none; }

.auth-foot {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.25);
}

/* ==========================================================================
   MOBILE APP-INSTALL BANNER
   Sticky bottom card, mobile only. Slides up from below on first paint;
   dismissed state persisted in localStorage so it doesn't nag on revisit.
   ========================================================================== */
.app-banner {
  position: fixed;
  inset-inline: 12px;
  bottom: 14px;
  z-index: 50;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 0, 51, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 0, 51, 0.10) 0%, rgba(10, 10, 10, 0.85) 60%),
    rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 22px 50px -16px rgba(255, 0, 51, 0.5),
    0 0 64px -16px rgba(255, 0, 51, 0.4);
  transform: translateY(140%);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
.app-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.app-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-banner-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  object-fit: contain;
  background: rgba(255, 0, 51, 0.08);
  padding: 6px;
  border: 1px solid rgba(255, 0, 51, 0.25);
}
.app-banner-copy { flex: 1; min-width: 0; }
.app-banner-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-banner-sub {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(245, 245, 245, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-banner-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border: 1px solid rgba(255, 0, 51, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 28px -8px rgba(255, 0, 51, 0.6);
  transition: transform 0.2s ease;
}
.app-banner-cta:active { transform: scale(0.96); }
.app-banner-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 245, 245, 0.7);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.app-banner-close:hover {
  color: #ff0033;
  border-color: rgba(255, 0, 51, 0.4);
}
/* Show only on viewports we consider "mobile" — narrow phones */
@media (min-width: 768px) {
  .app-banner { display: none !important; }
}

/* ==========================================================================
   PORTAL (the actual app — feed page)
   Same brand background (aurora/grain/vignette) as the landing. The shell
   is a 3-column app layout:
     [ header              ]
     [ left │ feed │ right ]
     [    bottom-nav       ] (mobile only)
   ========================================================================== */

.portal-body {
  /* portal scrolls naturally; loader / scroll-reveal CSS doesn't apply */
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  min-height: 100dvh;
}

/* ── Header ─────────────────────────────────────────────── */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.portal-brand-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 0, 51, 0.5));
}
.portal-brand-text {
  font-size: 13px;
  color: #f5f5f5;
  white-space: nowrap;
}
@media (max-width: 640px) { .portal-brand-text { display: none; } }

.portal-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 480px;
  transition: border-color 0.2s, background 0.2s;
}
.portal-search:focus-within {
  border-color: rgba(255, 0, 51, 0.4);
  background: rgba(20, 20, 20, 0.9);
}
.portal-search i {
  color: rgba(245, 245, 245, 0.45);
  font-size: 13px;
}
.portal-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #f5f5f5;
  font-size: 13px;
}
.portal-search input::placeholder { color: rgba(245, 245, 245, 0.35); }
.portal-search-kbd {
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: rgba(245, 245, 245, 0.45);
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.portal-iconbtn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(245, 245, 245, 0.75);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.portal-iconbtn:hover {
  border-color: rgba(255, 0, 51, 0.4);
  color: #ff0033;
}
.portal-iconbtn[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ff0033;
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.55);
}
@media (max-width: 640px) {
  .portal-iconbtn { width: 36px; height: 36px; }
}

.portal-create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border: 1px solid rgba(255, 0, 51, 0.55);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 10px 24px -10px rgba(255, 0, 51, 0.7);
  transition: transform 0.2s ease;
}
.portal-create:hover { transform: translateY(-1px); }

.portal-avatar { flex: none; }
.portal-avatar-ring {
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #7a0019);
}
.portal-avatar-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #050505;
  color: #f5f5f5;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ── 3-column layout ────────────────────────────────────── */
.portal-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 16px 96px;
  gap: 24px;
}
@media (min-width: 768px) {
  .portal-layout { grid-template-columns: 220px minmax(0, 1fr); padding-bottom: 32px; }
}
@media (min-width: 1100px) {
  .portal-layout { grid-template-columns: 220px minmax(0, 1fr) 300px; }
}

/* ── Left rail ──────────────────────────────────────────── */
.portal-rail-left { display: none; }
@media (min-width: 768px) {
  .portal-rail-left {
    display: block;
    position: sticky;
    top: 78px;
    align-self: start;
    max-height: calc(100dvh - 90px);
    overflow: auto;
  }
}
.portal-nav, .portal-nav-secondary { display: flex; flex-direction: column; gap: 2px; }
.portal-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(245, 245, 245, 0.75);
  transition: background 0.2s, color 0.2s;
}
.portal-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.2s;
}
.portal-nav-item:hover {
  background: rgba(255, 0, 51, 0.06);
  color: #f5f5f5;
}
.portal-nav-item:hover i { color: #ff0033; }
.portal-nav-item.active {
  background: rgba(255, 0, 51, 0.12);
  color: #ff0033;
  font-weight: 600;
}
.portal-nav-item.active i { color: #ff0033; }
.portal-nav-item.subtle { font-size: 13px; color: rgba(245, 245, 245, 0.55); }
.portal-nav-item.subtle i { font-size: 13px; }
.portal-rail-divider {
  height: 1px;
  margin: 14px 12px;
  background: rgba(255, 255, 255, 0.06);
}

/* Mini agency card in left rail */
.portal-rail-card {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 0, 51, 0.25);
  background:
    linear-gradient(160deg, rgba(255, 0, 51, 0.1), transparent 70%),
    rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
}
.portal-rail-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.portal-rail-card-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff0033; box-shadow: 0 0 10px #ff0033;
}
.portal-rail-card-num {
  margin-top: 6px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  color: #f5f5f5;
}
.portal-rail-card-meta {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.55);
}
.portal-rail-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #ff0033;
}
.portal-rail-card-link:hover { gap: 9px; transition: gap 0.2s; }

/* ── Feed (center column) ───────────────────────────────── */
.portal-feed { min-width: 0; }

.portal-feed-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: max-content;
  margin: 0 auto 18px;
}
.portal-tab {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, background 0.2s;
}
.portal-tab:hover { color: #f5f5f5; }
.portal-tab.active {
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
              0 6px 20px -6px rgba(255, 0, 51, 0.6);
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 0 0 rgba(255, 0, 51, 0.7);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 51, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 0, 51, 0); }
}

/* Stories rail */
.portal-stories {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.portal-stories::-webkit-scrollbar { display: none; }
.portal-story {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 64px;
}
.portal-story-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.12);
}
.portal-story-ring.active {
  background: linear-gradient(135deg, #ff0033, #7a0019);
  border: none;
  box-shadow: 0 0 14px -2px rgba(255, 0, 51, 0.5);
}
.portal-story-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0a0a0a;
  color: #f5f5f5;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.portal-story-mine .portal-story-bubble {
  background: rgba(255, 0, 51, 0.08);
  color: #ff0033;
  border: 1px solid rgba(255, 0, 51, 0.3);
}
.portal-story-name {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 245, 0.6);
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The post card */
.portal-feed-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 580px;
  margin: 0 auto;
}
.post {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.03), transparent 30%),
    rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease;
}
.post:hover { border-color: rgba(255, 0, 51, 0.18); }

.post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.post-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 0 0 2px rgba(5, 5, 5, 0.7), 0 0 0 3px rgba(255, 0, 51, 0.5);
}
.post-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.post-name {
  font-size: 13px;
  font-weight: 700;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-handle {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.45);
}
.post-verified {
  color: #ff0033;
  font-size: 13px;
}
.post-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(245, 245, 245, 0.4);
  margin-left: auto;
}
.post-more {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: rgba(245, 245, 245, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.post-more:hover { color: #ff0033; background: rgba(255, 0, 51, 0.06); }

.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.post[data-kind="video"] .post-media { aspect-ratio: 9 / 16; max-height: 720px; }
.post-media-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 0, 51, 0.85);
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(255, 0, 51, 0.5);
}
.live-badge .live-dot { background: white; }
.post-media-label {
  position: absolute;
  inset: auto 14px 14px 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f5;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.post-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.post-play:hover { transform: scale(1.05); background: rgba(255, 0, 51, 0.85); }

/* Pop-heart on double-tap */
.post-dbl-heart {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  color: #ff0088;
  font-size: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  filter:
    drop-shadow(0 0 24px rgba(255, 0, 51, 0.7))
    drop-shadow(0 0 48px rgba(255, 0, 136, 0.7));
  animation: dblHeart 0.9s ease both;
}
@keyframes dblHeart {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { transform: scale(1.2); opacity: 1; }
  60%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 4px;
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(245, 245, 245, 0.75);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s, transform 0.15s;
}
.post-action:hover { color: #f5f5f5; }
.post-action i { font-size: 18px; }
.post-action.liked {
  color: #ff0088;
  transform: scale(1.02);
  filter: drop-shadow(0 0 8px rgba(255, 0, 136, 0.6));
}
.post-action.saved { color: #ff0033; }
.post-action.ml-auto { margin-left: auto; }
.post-action-num {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 245, 245, 0.6);
}
.post-action.liked .post-action-num { color: #ff0088; }

.post-caption {
  padding: 6px 14px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.post-caption-name {
  font-weight: 700;
  color: #f5f5f5;
}
.post-caption-text { color: rgba(245, 245, 245, 0.85); }

.portal-feed-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.3);
}
.portal-feed-end .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 0, 51, 0.6);
  box-shadow: 0 0 8px rgba(255, 0, 51, 0.5);
}

/* ── Right rail ─────────────────────────────────────────── */
.portal-rail-right { display: none; }
@media (min-width: 1100px) {
  .portal-rail-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 78px;
    align-self: start;
    max-height: calc(100dvh - 90px);
    overflow: auto;
  }
}
.portal-side-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.03), transparent 60%),
    rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
}
.portal-side-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.portal-side-name { font-size: 13px; font-weight: 700; color: #f5f5f5; }
.portal-side-handle { font-size: 11px; color: rgba(245, 245, 245, 0.5); }
.portal-side-switch {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(245, 245, 245, 0.55);
}
.portal-side-switch:hover { color: #ff0033; }

.portal-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.portal-side-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.75);
}
.portal-side-link {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 0, 51, 0.8);
}
.portal-side-link:hover { color: #ff0033; }

.portal-drops, .portal-trending {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.portal-drops li, .portal-trending li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drop-logo, .trend-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.2), rgba(122, 0, 25, 0.1));
  border: 1px solid rgba(255, 0, 51, 0.25);
  color: #ff0033;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.trend-avatar { border-radius: 50%; }
.trend-avatar::before {
  content: attr(data-letter);
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}
.drop-meta, .trend-meta { flex: 1; min-width: 0; }
.drop-brand, .trend-name { font-size: 12px; font-weight: 700; color: #f5f5f5; }
.drop-deal, .trend-stat { font-size: 11px; color: rgba(245, 245, 245, 0.5); }
.drop-cta, .trend-cta {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border: 1px solid rgba(255, 0, 51, 0.55);
  transition: transform 0.15s ease;
}
.drop-cta:hover, .trend-cta:hover { transform: translateY(-1px); }
.trend-cta {
  background: transparent;
  color: rgba(245, 245, 245, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}
.trend-cta:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.55); }

.portal-side-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.25);
  text-align: center;
}
.portal-side-foot a { color: rgba(245, 245, 245, 0.35); }
.portal-side-foot a:hover { color: #ff0033; }

/* ── Mobile bottom nav ──────────────────────────────────── */
.portal-bottom-nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 768px) { .portal-bottom-nav { display: none; } }
.portal-bn-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
}
.portal-bn-item i { font-size: 18px; }
.portal-bn-item.active { color: #ff0033; }
.portal-bn-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 18px;
  box-shadow: 0 10px 28px -8px rgba(255, 0, 51, 0.7);
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Skip the loader, the page fade, the scroll-reveal entrances —
     just show everything in its final state. */
  .loader { display: none !important; }
  .page {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-chip, .hero-headline, .hero-sub, .hero .cta-glow,
  .hero-tagline, .scroll-cue, .scroll-reveal, .app-badges {
    opacity: 1 !important; transform: none !important;
  }
  /* Glow stops drifting (still visible) */
  .bg-fx-glow { animation: none !important; transform: none !important; }
}

/* ==========================================================================
   ┌─────────────────────────────────────────────────────────────────────┐
   │  SPA  (one-file site with 6 hash-routed views)                      │
   └─────────────────────────────────────────────────────────────────────┘
   Shared layout primitives + per-view styling. The router lives in JS
   (synfluencer.js → showView(name)), toggling .active on .view elements.
   ========================================================================== */

/* ── Top nav primary-link strip ─────────────────────────────────── */
.topnav { gap: 18px; }
.topnav-right { display: flex; align-items: center; gap: 12px; }
.nav-links {
  display: none;
  align-items: center;
  gap: 4px;
}
@media (min-width: 900px) {
  .nav-links { display: inline-flex; }
}
.nav-link {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: #f5f5f5; }
.nav-link.active {
  color: #ff0088;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.1), rgba(255, 0, 136, 0.1));
  box-shadow: 0 0 0 1px rgba(255, 0, 136, 0.25) inset, 0 0 12px rgba(255, 0, 136, 0.15);
  text-shadow: 0 0 12px rgba(255, 0, 136, 0.5);
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: white;
}
.nav-cta i { font-size: 10px; }
@media (max-width: 640px) { .nav-cta { display: none; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(245, 245, 245, 0.75);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-links.open {
  display: flex;
  position: absolute;
  top: 100%;
  inset-inline: 12px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 0, 51, 0.2);
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(18px);
  flex-direction: column;
  gap: 4px;
  z-index: 31;
}

/* ── Views container + view transitions ─────────────────────────
   The base .view is fully hidden (display: none). Only .view.active
   renders, and the entrance animation lives on .active so it replays
   every time the router swaps in a new view.
   .view-home uses display: flex so its hero is vertically centered;
   every other view uses display: block.
   ──────────────────────────────────────────────────────────────── */
.views {
  position: relative;
  z-index: 10;
  padding-top: 92px; /* topnav clearance — bigger brand needs more headroom */
}
.view { display: none; }
.view.active {
  display: block;
  animation: viewIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 22px 80px;
}
@media (min-width: 768px) { .container { padding: 56px 32px 100px; } }

/* ── View-head (Services / Contact share this) ──────────────────── */
.view-head { text-align: center; max-width: 720px; margin: 0 auto; }
.view-eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 0, 51, 0.8);
}
.view-title {
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}
.view-lede {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.6);
}

/* ─────────────────────────────────────────────────────────────────
   1) HOME
   ───────────────────────────────────────────────────────────────── */
.view-home.active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 76px);
  padding: 32px 20px 60px;
}
.home-hero {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-hero .hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 0, 51, 0.3); background: rgba(255, 0, 51, 0.05);
  color: #ff0033;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
}
.home-hero .hero-accent {
  display: block; width: 48px; height: 1px; background: rgba(255, 0, 51, 0.7);
  margin: 22px 0 18px;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.55);
}
.home-headline {
  font-size: clamp(2.5rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  /* WHITE → PINK gradient — dramatic two-tone. White holds the
     first ~25% of the line so the left side reads unmistakably
     as white, then a steady ramp through pink-soft → pink →
     hot-pink → magenta drives the right side fully saturated.
     Pink-saturated bevel beneath each letter (text-shadow below)
     keeps the white letters visibly pink-grounded instead of
     graying out from the dark shadow underneath. */
  background:
    linear-gradient(95deg,
      #ffffff 0%,
      #ffffff 22%,
      #ffe0ef 35%,
      #ffb6dc 48%,
      #ff80c0 62%,
      #ff44a8 76%,
      #ff0088 90%,
      #ff0066 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 3D shadow — pink-saturated bevel + bright halo. The neutral-
     dark plum bevel was desaturating each letter into gray via
     the visual-average illusion (white face + dark shadow = gray
     read). This version brings the bevel back to brand pink/red
     at moderate alpha so the depth-color matches the face color,
     and each letter reads as "pink overall" instead of "white-
     letter-with-gray-shadow". */
  text-shadow:
    /* extrusion stack — pink-saturated for color cohesion */
    0 2px 0 rgba(255, 92,  184, 0.85),
    0 4px 0 rgba(255,  0,  136, 0.75),
    0 6px 0 rgba(226,  0,  102, 0.65),
    0 8px 0 rgba(180,  0,   80, 0.55),
    /* pronounced contact-shadow on the floor */
    0 14px 28px rgba(40, 0, 30, 0.55),
    0 22px 50px rgba(40, 0, 30, 0.35),
    /* outer brand halo — louder pink ambient glow */
    0 0 32px rgba(255, 0, 136, 0.55),
    0 0 80px rgba(255, 92, 184, 0.40);
  /* GPU lift + ambient lighting so the page feels like the
     headline is floating above the rest. */
  transform: perspective(1200px) rotateX(8deg);
  transform-origin: 50% 80%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 40px rgba(255, 0, 136, 0.22));
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Subtle parallax — leaning in on hover sells the depth without
   ever being garish. Skipped under reduced-motion. */
.home-headline:hover {
  transform: perspective(1200px) rotateX(4deg) translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
  .home-headline,
  .home-headline:hover { transform: none; transition: none; }
}

/* The accent word ("future") rides a tighter white→hot-pink
   gradient so the same two-tone story carries through — but
   front-loaded with more pink so it still feels like the
   exclamation point of the line. */
.home-headline-future {
  background: linear-gradient(95deg, #ffffff 0%, #ffb6dc 25%, #ff5cb8 55%, #ff0088 85%, #ff0066 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(255, 92, 184, 0.95),
    0 4px 0 rgba(255,  0, 136, 0.85),
    0 6px 0 rgba(226,  0, 102, 0.75),
    0 8px 0 rgba(180,  0,  80, 0.65),
    0 14px 28px rgba(40, 0, 30, 0.55),
    0 0 36px rgba(255, 0, 136, 0.55),
    0 0 70px rgba(255, 0, 51, 0.35);
}
.home-headline .text-blood {
  /* Seductive red→pink gradient text with a layered neon shadow. */
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 50%, #ff0088 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 30px rgba(255, 0, 51, 0.5),
    0 0 60px rgba(255, 0, 136, 0.35);
  filter: drop-shadow(0 0 12px rgba(255, 0, 136, 0.4));
}
.home-sub {
  margin-top: 22px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 245, 245, 0.6);
}
.home-cta {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: white;
  animation: ctaPulse 3.6s ease-in-out 1.4s infinite;
}
.home-tagline {
  margin-top: 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.45em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.32);
}

/* ─────────────────────────────────────────────────────────────────
   2) SERVICES
   ───────────────────────────────────────────────────────────────── */
.services-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.services-cta { margin-top: 48px; display: flex; justify-content: center; }
.services-cta .cta-glow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: white;
}

/* ─────────────────────────────────────────────────────────────────
   3) FEED  (Instagram/TikTok hybrid — three-column shell)
   ───────────────────────────────────────────────────────────────── */
.view-feed { background: rgba(5, 5, 5, 0.0); }
.feed-shell {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 16px 96px;
  gap: 22px;
}
@media (min-width: 768px) {
  .feed-shell { grid-template-columns: 220px minmax(0, 1fr); padding: 24px 24px 40px; }
}
@media (min-width: 1150px) {
  .feed-shell { grid-template-columns: 220px minmax(0, 1fr) 300px; }
}

/* Left rail */
.feed-rail { display: none; }
@media (min-width: 768px) {
  .feed-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; align-self: start; max-height: calc(100dvh - 100px); overflow: auto; }
}
.feed-nav { display: flex; flex-direction: column; gap: 2px; }
.feed-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  font-size: 14px; color: rgba(245, 245, 245, 0.75);
  transition: background 0.2s, color 0.2s;
}
.feed-nav-item i { width: 18px; text-align: center; color: rgba(245, 245, 245, 0.55); }
.feed-nav-item:hover { background: rgba(255, 0, 51, 0.06); color: #f5f5f5; }
.feed-nav-item:hover i { color: #ff0033; }
.feed-nav-item.active { background: rgba(255, 0, 51, 0.12); color: #ff0033; font-weight: 600; }
.feed-nav-item.active i { color: #ff0033; }
.feed-create-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border: 1px solid rgba(255, 0, 51, 0.55);
  color: white;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 12px 30px -10px rgba(255, 0, 51, 0.7);
  transition: transform 0.2s;
}
.feed-create-btn:hover { transform: translateY(-1px); }

/* Center column */
.feed-center { min-width: 0; }
.feed-stories {
  display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 10px;
}
.feed-stories::-webkit-scrollbar { display: none; }
.story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; background: none; border: 0; padding: 0; color: inherit; }
.story-ring {
  width: 60px; height: 60px; padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #7a0019);
  box-shadow: 0 0 12px -2px rgba(255, 0, 51, 0.5);
}
.story-ring-mine { background: rgba(255, 0, 51, 0.08); border: 1px dashed rgba(255, 0, 51, 0.4); padding: 1px; }
.story-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: #0a0a0a; color: #f5f5f5; font-weight: 800; font-size: 16px;
}
.story-ring-mine .story-bubble { background: rgba(255, 0, 51, 0.08); color: #ff0033; }
.story-name { font-size: 11px; color: rgba(245, 245, 245, 0.72); letter-spacing: 0.04em; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.feed-tabs {
  display: flex; gap: 6px; padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: max-content; margin: 0 auto 14px;
}
.feed-tab {
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s;
}
.feed-tab:hover { color: #f5f5f5; }
.feed-tab.active {
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 51, 0.6);
}

.feed-list { display: flex; flex-direction: column; gap: 16px; max-width: 580px; margin: 0 auto; }

.post {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.03), transparent 30%), rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.post-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px;
}
.post-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 13px;
  box-shadow: 0 0 0 2px rgba(5, 5, 5, 0.7), 0 0 0 3px rgba(255, 0, 51, 0.45);
}
.post-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.post-name { font-size: 13px; font-weight: 700; color: #f5f5f5; }
.post-handle { font-size: 11px; color: rgba(245, 245, 245, 0.45); }
.post-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: rgba(245, 245, 245, 0.4); margin-left: auto; }
.post-more {
  width: 28px; height: 28px; border-radius: 8px;
  color: rgba(245, 245, 245, 0.45);
  display: inline-flex; align-items: center; justify-content: center;
}
.post-more:hover { color: #ff0033; background: rgba(255, 0, 51, 0.06); }

.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.post-media-label {
  position: absolute; inset: auto 14px 14px 14px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(5, 5, 5, 0.55); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; color: #f5f5f5;
  line-height: 1.35;
}
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-actions {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 4px;
}
.post-action {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(245, 245, 245, 0.75);
  font-size: 14px; font-weight: 500;
  transition: color 0.2s, transform 0.15s;
}
.post-action:hover { color: #f5f5f5; }
.post-action i { font-size: 19px; }
.post-action .num { font-size: 12px; font-weight: 600; color: rgba(245, 245, 245, 0.6); }
.post-action.liked { color: #ff0088; filter: drop-shadow(0 0 8px rgba(255, 0, 136, 0.6)); }
.post-action.saved { color: #ff0033; }
.post-action.liked .num { color: #ff0088; }
.post-action.liked i { animation: heartPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes heartPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.ml-auto { margin-left: auto; }

.post-caption {
  padding: 6px 14px 12px;
  font-size: 13px; line-height: 1.5;
}
.post-caption-name { font-weight: 700; color: #f5f5f5; }
.post-caption-text { color: rgba(245, 245, 245, 0.85); }

.post-comments {
  padding: 8px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.post-comments.hidden { display: none; }
.comment-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.comment-list li {
  font-size: 13px; color: rgba(245, 245, 245, 0.78); line-height: 1.5;
}
.comment-list li strong { color: #f5f5f5; font-weight: 700; margin-right: 6px; }
.comment-form {
  display: flex; gap: 8px;
}
.comment-input {
  flex: 1; padding: 9px 12px; border-radius: 999px;
  background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5; font-size: 13px;
}
.comment-input:focus { outline: none; border-color: rgba(255, 0, 51, 0.4); }
.comment-post {
  padding: 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

.feed-end {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.3);
}
.feed-end.hidden { display: none; }
.feed-end .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 0, 51, 0.6); }

/* Empty states ─────────────────────────────────────────────────── */
.empty-state {
  margin: 40px auto;
  max-width: 460px;
  padding: 44px 28px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 0, 51, 0.22);
  background:
    radial-gradient(ellipse at top, rgba(255, 0, 51, 0.06), transparent 60%),
    rgba(10, 10, 10, 0.4);
  text-align: center;
}
.empty-state .empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(255, 0, 51, 0.04));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  font-size: 20px;
  box-shadow: 0 0 28px -10px rgba(255, 0, 51, 0.55) inset;
}
.empty-state h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.empty-state p {
  margin: 8px auto 22px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.55);
}
.empty-state .cta-glow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
}

/* Right rail */
.feed-rail-right { display: none; }
@media (min-width: 1150px) {
  .feed-rail-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; align-self: start; max-height: calc(100dvh - 100px); overflow: auto; }
}
.side-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.03), transparent 60%), rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
}
.side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.side-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #f5f5f5; }
.side-link { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 0, 51, 0.85); }
.suggest-list, .trend-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.side-empty {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.4);
  padding: 6px 2px;
}
.suggest-list li, .trend-list li { display: flex; align-items: center; gap: 10px; }
.s-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 13px;
}
.s-meta { flex: 1; min-width: 0; }
.s-name { font-size: 12px; font-weight: 700; color: #f5f5f5; }
.s-handle, .s-stat { font-size: 11px; color: rgba(245, 245, 245, 0.5); }
.s-cta {
  padding: 6px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 245, 245, 0.7); background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.s-cta:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.55); }
.s-cta.following { background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%); color: white; border-color: rgba(255, 0, 51, 0.6); }
.side-foot { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(245, 245, 245, 0.25); text-align: center; }
.side-foot a { color: rgba(245, 245, 245, 0.4); }
.side-foot a:hover { color: #ff0033; }

/* FAB create (mobile) */
.fab-create {
  display: none;
  position: fixed;
  /* Shifted up + left so the FAB doesn't fight the audio toggle
     (also bottom-right, z-99999) on mobile. Audio toggle owns the
     bottom-right corner; create-post FAB sits above it. Both
     respect the iOS safe-area inset. */
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  right: calc(env(safe-area-inset-right) + 22px);
  width: 56px; height: 56px; border-radius: 50%;
  z-index: 25;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 20px;
  box-shadow: 0 18px 36px -10px rgba(255, 0, 51, 0.7);
}
.view-feed.active ~ .fab-create,
.view-feed.active .fab-create { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  .view-feed.active .fab-create { display: none; }
}

/* Create-post modal extras */
.post-upload {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 10px 14px;
  border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.15);
  background: rgba(5, 5, 5, 0.5);
  color: rgba(245, 245, 245, 0.7); font-size: 12px;
  cursor: pointer;
}
.post-upload:hover { border-color: rgba(255, 0, 51, 0.4); color: #ff0033; }
.post-preview {
  position: relative;
  margin-top: 12px; border-radius: 12px; overflow: hidden;
  max-height: 240px;
}
.post-preview.hidden { display: none; }
.post-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-preview button {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(5, 5, 5, 0.7); color: white;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────
   4) PROFILE
   ───────────────────────────────────────────────────────────────── */
.profile-shell { max-width: 980px; margin: 0 auto; padding: 0 0 80px; }
.profile-cover {
  height: 200px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 0, 51, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(122, 0, 25, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #1a0008 0%, #050505 100%);
  border-bottom: 1px solid rgba(255, 0, 51, 0.2);
}
@media (min-width: 768px) { .profile-cover { height: 260px; border-radius: 0 0 22px 22px; } }
.profile-head {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 22px 18px;
  margin-top: -56px;
}
@media (min-width: 768px) { .profile-head { flex-direction: row; align-items: flex-end; padding: 22px 32px 18px; gap: 22px; } }
.profile-avatar {
  width: 112px; height: 112px;
  border-radius: 50%;
  border: 4px solid #050505;
  background: linear-gradient(135deg, #ff0033, #7a0019);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px -10px rgba(255, 0, 51, 0.7);
}
.profile-avatar-letter { color: white; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 46px; }
.profile-meta { flex: 1; min-width: 0; }
.profile-name { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 26px; color: #f5f5f5; }
.profile-handle { font-size: 13px; color: rgba(245, 245, 245, 0.55); margin-top: 2px; }
.profile-bio { margin-top: 10px; font-size: 14px; color: rgba(245, 245, 245, 0.75); line-height: 1.5; max-width: 500px; }
.profile-stats { display: flex; gap: 18px; margin-top: 12px; }
.profile-stats .stat { font-size: 13px; color: rgba(245, 245, 245, 0.6); background: transparent; padding: 0; }
.profile-stats .stat strong { color: #f5f5f5; font-weight: 700; margin-right: 4px; }
.profile-stats .stat:hover { color: #ff0033; }
.profile-actions { display: flex; gap: 10px; }
.profile-edit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: white;
}
.profile-share {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 20, 20, 0.6);
  color: rgba(245, 245, 245, 0.75);
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-share:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.4); }

.profile-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0 22px;
  margin-top: 8px;
}
@media (min-width: 768px) { .profile-tabs { padding: 0 32px; } }
.profile-tab {
  padding: 12px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.profile-tab:hover { color: #f5f5f5; }
.profile-tab.active { color: #ff0033; border-bottom-color: #ff0033; }

.profile-pane { display: none; padding: 22px; }
@media (min-width: 768px) { .profile-pane { padding: 28px 32px; } }
.profile-pane.active { display: block; }
.profile-empty {
  padding: 60px 20px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.3);
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (min-width: 768px) { .profile-grid { gap: 8px; } }
.profile-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s;
}
.profile-tile:hover { transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────────────
   5) MESSAGES
   ───────────────────────────────────────────────────────────────── */
.msg-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 96px;
  height: calc(100dvh - 110px);
}
@media (min-width: 768px) {
  .msg-shell { grid-template-columns: 320px minmax(0, 1fr); padding: 22px 24px 40px; }
}

.msg-list {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.msg-list.hidden-mobile { display: none; }
@media (max-width: 767px) {
  .msg-list { display: flex; }
  .msg-list.hidden-mobile { display: none !important; }
}
.msg-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.msg-list-head h2 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 20px; color: #f5f5f5; }
.msg-new {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 0, 51, 0.08); color: #ff0033;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-new:hover { background: rgba(255, 0, 51, 0.15); }
.msg-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.06);
}
.msg-search i { color: rgba(245, 245, 245, 0.4); font-size: 12px; }
.msg-search input { flex: 1; background: transparent; border: 0; outline: 0; color: #f5f5f5; font-size: 13px; }
.msg-list-items {
  list-style: none; padding: 4px; margin: 0;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.msg-empty-card {
  padding: 30px 18px; text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(255, 0, 51, 0.18);
  background: rgba(10, 10, 10, 0.4);
  margin: 10px 8px;
}
.msg-empty-card strong {
  display: block;
  font-size: 13px; font-weight: 700; color: #f5f5f5;
  letter-spacing: 0.04em;
}
.msg-empty-card p {
  margin-top: 6px; font-size: 12px; color: rgba(245, 245, 245, 0.5); line-height: 1.5;
}
.msg-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.msg-item:hover { background: rgba(255, 0, 51, 0.05); }
.msg-item.active { background: rgba(255, 0, 51, 0.12); }
.msg-item-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 14px;
}
.msg-item-meta { flex: 1; min-width: 0; }
.msg-item-name { font-size: 13px; font-weight: 700; color: #f5f5f5; }
.msg-item-preview { font-size: 12px; color: rgba(245, 245, 245, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msg-item-time { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: rgba(245, 245, 245, 0.4); }
.msg-item-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #ff0033; color: white;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.6);
}

/* Active thread */
.msg-thread {
  display: flex; flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  overflow: hidden;
  min-height: 360px;
}
.msg-thread-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.msg-thread-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #7a0019);
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 13px;
}
.msg-thread-meta { display: flex; flex-direction: column; }
.msg-thread-name { font-size: 14px; font-weight: 700; color: #f5f5f5; }
.msg-thread-status { font-size: 11px; color: rgba(245, 245, 245, 0.45); }
.msg-thread-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg-empty {
  margin: auto; max-width: 280px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.3);
}
.msg-bubble {
  max-width: 75%;
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.45;
  word-wrap: break-word;
}
.msg-bubble.from-them {
  align-self: flex-start;
  background: rgba(30, 30, 30, 0.8);
  color: #f5f5f5;
  border-bottom-left-radius: 4px;
}
.msg-bubble.from-me {
  align-self: flex-end;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 22px -10px rgba(255, 0, 51, 0.7);
}
.msg-day-divider {
  align-self: center;
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.4);
}
.msg-thread-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.msg-thread-input input {
  flex: 1; padding: 11px 16px; border-radius: 999px;
  background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5; font-size: 14px;
}
.msg-thread-input input:focus { outline: none; border-color: rgba(255, 0, 51, 0.4); }
.msg-send {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(255, 0, 51, 0.7);
}

/* ─────────────────────────────────────────────────────────────────
   6) CONTACT
   ───────────────────────────────────────────────────────────────── */
.contact-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; }
}
.contact-form {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 14px;
}
.contact-form textarea { resize: vertical; min-height: 130px; font-family: inherit; }
.contact-info { display: flex; flex-direction: column; gap: 12px; }
.contact-info-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.04), transparent 60%), rgba(10, 10, 10, 0.55);
}
.contact-info-card i {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(255, 0, 51, 0.04));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-info-card strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #f5f5f5; }
.contact-info-card a, .contact-info-card span { font-size: 13px; color: rgba(245, 245, 245, 0.65); }
.contact-info-card a:hover { color: #ff0033; }
.contact-socials {
  display: flex; gap: 10px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 10, 10, 0.4);
  justify-content: center;
}
.contact-socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 245, 0.7);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.contact-socials a:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.5); transform: translateY(-2px); }

.contact-success {
  text-align: center; padding: 30px 10px;
}
.contact-success.hidden { display: none; }
.contact-success-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 0, 51, 0.15);
  ring: 1px solid rgba(255, 0, 51, 0.4);
  display: flex; align-items: center; justify-content: center;
  color: #ff0033; font-size: 22px;
  box-shadow: 0 0 0 1px rgba(255, 0, 51, 0.4);
  animation: successPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.contact-success h3 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 24px; color: #f5f5f5; }
.contact-success p { margin-top: 8px; font-size: 14px; color: rgba(245, 245, 245, 0.65); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ NEW NAV: SEARCH + NOTIFICATIONS BELL                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.topnav { gap: 14px; }
.topnav-search-wrap {
  position: relative;
  display: none;
  flex: 1 1 280px;
  max-width: 380px;
}
@media (min-width: 768px) { .topnav-search-wrap { display: block; } }
.topnav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.topnav-search:focus-within {
  border-color: rgba(255, 0, 51, 0.4);
  background: rgba(20, 20, 20, 0.9);
}
.topnav-search i { color: rgba(245, 245, 245, 0.45); font-size: 12px; }
.topnav-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #f5f5f5; font-size: 13px;
}
.topnav-search input::placeholder { color: rgba(245, 245, 245, 0.35); }
.topnav-search kbd {
  padding: 1px 7px; border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: rgba(245, 245, 245, 0.5);
  background: rgba(5, 5, 5, 0.6);
}

/* Search results dropdown — drops below the input on the topnav */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 50;
  max-height: 60vh;
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 0, 51, 0.22);
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 0, 51, 0.08) inset;
}
.search-results.hidden { display: none; }
.search-results ul { list-style: none; padding: 0; margin: 0; }
.search-group-head {
  padding: 12px 14px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.8);
}
.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.search-result:hover { background: rgba(255, 0, 51, 0.06); }
.search-result-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(122, 0, 25, 0.06));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  font-size: 11px;
  flex: none;
}
.search-result-label {
  flex: 1; min-width: 0;
  font-size: 13px; color: #f5f5f5;
  display: flex; flex-direction: column; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-label mark {
  background: rgba(255, 0, 51, 0.25);
  color: #ff0033;
  padding: 0 2px;
  border-radius: 3px;
}
.search-result-sub {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-arrow {
  color: rgba(245, 245, 245, 0.35);
  font-size: 10px;
  transition: color 0.2s, transform 0.2s;
}
.search-result:hover .search-result-arrow {
  color: #ff0033; transform: translateX(2px);
}
.search-empty {
  padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(245, 245, 245, 0.45);
  font-size: 13px;
}
.search-empty i { font-size: 22px; color: rgba(255, 0, 51, 0.5); }

.topnav-bell {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(245, 245, 245, 0.75);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.topnav-bell:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.4); }
.topnav-bell-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.7);
  display: none;
}
.topnav-bell-dot.show { display: block; }

.bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  z-index: 50;
  border-radius: 16px;
  border: 1px solid rgba(255, 0, 51, 0.22);
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 0, 51, 0.08) inset;
  overflow: hidden;
}
.bell-dropdown.hidden { display: none; }
.bell-dropdown-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #f5f5f5;
}
.bell-mark-read {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.bell-mark-read:hover { color: #ff0033; }
.bell-list { list-style: none; margin: 0; padding: 4px; max-height: 380px; overflow: auto; }
.bell-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 0.15s;
}
.bell-item:hover { background: rgba(255, 0, 51, 0.05); }
.bell-item.unread { background: rgba(255, 0, 51, 0.06); }
.bell-item-dot {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 8px;
  background: rgba(255, 0, 51, 0.7);
}
.bell-item.unread .bell-item-dot { background: #ff0033; box-shadow: 0 0 8px rgba(255, 0, 51, 0.6); }
.bell-item-body { flex: 1; min-width: 0; }
.bell-item-text { font-size: 13px; color: rgba(245, 245, 245, 0.85); line-height: 1.45; }
.bell-item-text strong { color: #f5f5f5; font-weight: 700; }
.bell-item-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: rgba(245, 245, 245, 0.4); margin-top: 3px; }
.bell-dropdown-foot {
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}
.bell-dropdown-foot a {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.bell-dropdown-foot a:hover { color: #ff0033; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ HOME — secondary CTA row + inline services section               ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.home-cta-row {
  margin-top: 28px;
  display: inline-flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: center;
}
.home-cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.65);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.home-cta-secondary:hover {
  color: #ff0033;
  border-color: rgba(255, 0, 51, 0.4);
  background: rgba(255, 0, 51, 0.04);
}
.home-services {
  scroll-margin-top: 100px; /* so the sticky nav doesn't cover it on scroll */
  padding-top: 60px;
  padding-bottom: 60px;
}
.view-home.active { display: flex; flex-direction: column; min-height: 100dvh; padding: 32px 20px 40px; }
.view-home.active .home-hero { margin-top: auto; }
.view-home.active .home-services { margin-top: auto; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ THREADS                                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.threads-shell {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 100px;
}
@media (min-width: 768px) { .threads-shell { padding: 36px 24px 80px; } }
.threads-head { text-align: center; margin-bottom: 22px; }
.threads-head h2 { color: #f5f5f5; }
.threads-head h2::after {
  content: '';
  display: block;
  width: 48px; height: 1px; margin: 12px auto 0;
  background: rgba(255, 0, 51, 0.7);
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.5);
}
.threads-lede {
  margin-top: 14px;
  font-size: 14px; color: rgba(245, 245, 245, 0.55);
}

/* Compose */
.thread-compose {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.04), transparent 60%), rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(10px);
}
.thread-compose-avatar {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff0033 0%, #5a0014 100%);
  color: white; font-weight: 800; font-size: 14px;
}
.thread-compose-body { flex: 1; min-width: 0; }
.thread-compose-body textarea {
  width: 100%;
  background: transparent;
  border: 0; outline: 0; resize: none;
  color: #f5f5f5;
  font-size: 15px; line-height: 1.55;
  font-family: inherit;
}
.thread-compose-body textarea::placeholder { color: rgba(245, 245, 245, 0.35); }
.thread-compose-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.thread-compose-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(245, 245, 245, 0.4);
}
.thread-compose-count.low { color: #ff0033; }
.thread-compose-post {
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 0 12px 24px -10px rgba(255, 0, 51, 0.7);
  transition: transform 0.2s ease;
}
.thread-compose-post:hover:not(:disabled) { transform: translateY(-1px); }
.thread-compose-post:disabled { opacity: 0.4; cursor: not-allowed; }

/* Thread list — each thread is a card */
.thread-list { display: flex; flex-direction: column; gap: 12px; }
.thread {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(17, 17, 17, 0.55);
  backdrop-filter: blur(8px);
  transition: border-color 0.25s;
}
.thread:hover { border-color: rgba(255, 0, 51, 0.18); }
.thread-row {
  display: flex; gap: 12px; align-items: flex-start;
}
.thread-avatar {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 14px;
}
.thread-body { flex: 1; min-width: 0; }
.thread-head {
  display: flex; align-items: baseline; gap: 8px;
}
.thread-name { font-size: 14px; font-weight: 700; color: #f5f5f5; }
.thread-handle { font-size: 12px; color: rgba(245, 245, 245, 0.45); }
.thread-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: rgba(245, 245, 245, 0.4); margin-left: auto; }
.thread-more {
  width: 26px; height: 26px;
  margin-left: 8px;
  border-radius: 8px;
  color: rgba(245, 245, 245, 0.45);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.thread-more:hover { color: #ff0033; background: rgba(255, 0, 51, 0.08); }
.thread-text {
  margin-top: 4px;
  font-size: 15px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
}
.thread-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
  color: rgba(245, 245, 245, 0.55);
}
.thread-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  background: transparent;
  color: inherit;
  transition: color 0.2s;
}
.thread-action:hover { color: #f5f5f5; }
.thread-action.liked { color: #ff0088; filter: drop-shadow(0 0 6px rgba(255, 0, 136, 0.5)); }
.thread-action i { font-size: 14px; }
.thread-action.liked i { animation: heartPop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.thread-action .num { font-size: 12px; font-weight: 600; }

/* Replies inline */
.thread-replies { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.thread-replies.open { display: block; }
.thread-reply {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
}
.thread-reply + .thread-reply { border-top: 1px solid rgba(255, 255, 255, 0.03); }
.thread-reply .thread-avatar { width: 30px; height: 30px; font-size: 12px; }
.thread-reply-body { flex: 1; min-width: 0; }
.thread-reply-body header { display: flex; gap: 6px; align-items: baseline; }
.thread-reply-name { font-size: 13px; font-weight: 700; color: #f5f5f5; }
.thread-reply-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(245, 245, 245, 0.4); }
.thread-reply-text { font-size: 14px; color: rgba(245, 245, 245, 0.85); line-height: 1.5; margin-top: 2px; }

.thread-reply-form {
  display: flex; gap: 8px; align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.thread-reply-input {
  flex: 1;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(5, 5, 5, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f5f5f5; font-size: 13px;
}
.thread-reply-input:focus { outline: none; border-color: rgba(255, 0, 51, 0.4); }
.thread-reply-post {
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ LINK TREE  (on Profile)                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.link-tree {
  margin: 8px 22px 0;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 0, 51, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 0, 51, 0.08), rgba(255, 0, 51, 0.0) 60%),
    rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .link-tree { margin: 16px 32px 0; padding: 22px 24px 18px; } }
.link-tree-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.link-tree-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.8);
}
.link-tree-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 20px; color: #f5f5f5;
  margin-top: 4px;
}
.link-tree-actions { display: flex; gap: 8px; }
.link-tree-primary, .link-tree-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s, border-color 0.2s, background 0.2s;
  color: white;
}
.link-tree-primary {
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border: 1px solid rgba(255, 0, 51, 0.55);
  box-shadow: 0 12px 26px -10px rgba(255, 0, 51, 0.55);
}
.link-tree-primary:hover { transform: translateY(-1px); }
.link-tree-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(245, 245, 245, 0.75);
}
.link-tree-secondary:hover {
  border-color: rgba(255, 0, 51, 0.5);
  color: #ff0033;
}
.link-tree-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.link-tree-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 10, 0.6);
  color: rgba(245, 245, 245, 0.85);
  font-size: 13px; font-weight: 600;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.link-tree-link:hover {
  border-color: rgba(255, 0, 51, 0.45);
  background: rgba(255, 0, 51, 0.04);
  transform: translateY(-1px);
  color: #f5f5f5;
}
.link-tree-link i.fa-link-icon, .link-tree-link .link-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.2), rgba(122, 0, 25, 0.05));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  font-size: 13px;
  flex: none;
}
.link-tree-link .link-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-tree-link .link-arrow { color: rgba(245, 245, 245, 0.4); font-size: 12px; transition: transform 0.2s, color 0.2s; }
.link-tree-link:hover .link-arrow { color: #ff0033; transform: translate(2px, -2px); }
.link-tree-empty {
  padding: 20px;
  text-align: center;
  color: rgba(245, 245, 245, 0.5);
}
.link-tree-empty.hidden { display: none; }
.link-tree-empty p { font-size: 13px; margin-bottom: 12px; }

/* Modal: add/edit list */
.link-tree-form {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .link-tree-form { grid-template-columns: 1fr 1.4fr auto; } }
.link-tree-form .link-tree-primary { justify-content: center; }
.link-tree-edit-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow: auto;
}
.link-tree-edit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 10, 10, 0.5);
}
.link-tree-edit-row .meta { flex: 1; min-width: 0; }
.link-tree-edit-row .meta strong { display: block; font-size: 13px; color: #f5f5f5; }
.link-tree-edit-row .meta span { display: block; font-size: 11px; color: rgba(245, 245, 245, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-tree-edit-row .delete {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255, 0, 51, 0.08);
  color: #ff0033;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 0, 51, 0.3);
}
.link-tree-edit-row .delete:hover { background: rgba(255, 0, 51, 0.18); }
.link-tree-edit-row .edit {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 245, 245, 0.65);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.link-tree-edit-row .edit:hover { color: #ff0033; border-color: rgba(255, 0, 51, 0.4); background: rgba(255, 0, 51, 0.06); }
.link-tree-edit-row.editing {
  background: rgba(255, 0, 51, 0.04);
  border-color: rgba(255, 0, 51, 0.25);
}
.link-tree-edit-row .meta-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.link-tree-edit-row .meta-edit .auth-input {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

/* Reorder buttons (up/down) sitting between the meta and delete */
.link-tree-edit-row .reorder {
  display: inline-flex; flex-direction: column; gap: 2px; flex: none;
}
.link-tree-edit-row .reorder button {
  width: 22px; height: 16px;
  border-radius: 5px;
  background: rgba(255, 0, 51, 0.06);
  color: rgba(245, 245, 245, 0.6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.link-tree-edit-row .reorder button:hover {
  color: #ff0033; background: rgba(255, 0, 51, 0.14);
}
.link-tree-edit-row .reorder button:disabled { opacity: 0.3; cursor: not-allowed; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ POST CAROUSEL  +  MEDIA RENDERING                                 ║
   ║ Each post can have 0..N media items (image or video). Renders as ║
   ║ a horizontally-scrolling carousel with arrows + dots. Text-only   ║
   ║ posts use .post-media-text instead.                               ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* Default aspect ratio is square (1:1) — matches Instagram's main
   feed standard and balances cropping across landscape/portrait/
   square uploads. For single-image posts, JS overrides this with the
   image's actual ratio (clamped between 4:5 portrait and 1.91:1
   landscape, IG's official bounds). */
.post-carousel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #050505;
}
.post-carousel.hidden { display: none; }
.post-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
}
.post-carousel-track::-webkit-scrollbar { display: none; }
.post-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: #050505;
}
.post-carousel-slide img,
.post-carousel-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Render hints: ask the browser to use its best resampling so user
     uploads stay sharp at every viewport size. The `high-quality`
     value is the modern CSS keyword; `-webkit-optimize-contrast` is
     the legacy fallback that mature WebKit browsers still respect. */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.post-carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
  opacity: 0;
  cursor: pointer;
}
.post-carousel:hover .post-carousel-arrow,
.post-carousel.touch .post-carousel-arrow {
  opacity: 1;
}
.post-carousel-arrow:hover { background: rgba(255, 0, 51, 0.85); }
.post-carousel-arrow.prev { left: 10px; }
.post-carousel-arrow.next { right: 10px; }
.post-carousel-arrow.hidden { display: none !important; }
.post-carousel-dots {
  position: absolute;
  bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 3;
}
.post-carousel-dots .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s, transform 0.2s;
}
.post-carousel-dots .dot.active {
  background: #ff0033;
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.65);
}
.post-carousel-count {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(4px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: white;
  z-index: 3;
}
.post-carousel-count.hidden { display: none; }

/* Text-only post body — uses the gradient label style */
.post-media-text {
  padding: 22px 18px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.06), transparent 70%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.post-media-text.hidden { display: none; }

/* Repost button — when active, turns red */
.post-action.repost.reposted { color: #ff0033; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ CREATE POST  —  multi-media upload row + preview grid             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.post-upload-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.post-upload-live {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18) 0%, rgba(122, 0, 25, 0.05) 100%);
  border: 1px dashed rgba(255, 0, 51, 0.5);
  color: #ff0033;
}
.post-upload-live i { animation: livePulse 1.6s ease-in-out infinite; }
.post-upload-live:hover { background: rgba(255, 0, 51, 0.22); }
.post-upload-hint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(245, 245, 245, 0.4);
}
.post-preview-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.post-preview-grid.hidden { display: none; }
.post-preview-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.post-preview-tile img,
.post-preview-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.post-preview-tile .video-badge {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.65);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.post-preview-tile button {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.75);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  z-index: 2;
}
.post-preview-tile button:hover { background: rgba(255, 0, 51, 0.85); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ FEED LEFT RAIL  —  Go Live button styling                         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.feed-live-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(255, 0, 51, 0.08);
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.feed-live-btn:hover {
  background: rgba(255, 0, 51, 0.14);
  border-color: rgba(255, 0, 51, 0.5);
  transform: translateY(-1px);
}
.feed-live-btn i { animation: livePulse 1.6s ease-in-out infinite; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ PROFILE  —  cover photo + avatar upload affordances + meta row   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.profile-cover {
  position: relative;
  background-position: center;
  background-size: cover;
  /* Default red gradient is set in the existing rule above */
}
.profile-cover-edit {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}
.profile-cover-edit:hover { background: rgba(255, 0, 51, 0.7); }
.profile-cover-edit span { display: none; }
@media (min-width: 640px) { .profile-cover-edit span { display: inline; } }

.profile-avatar {
  position: relative;
  background-size: cover;
  background-position: center;
}
.profile-avatar.has-photo .profile-avatar-letter { display: none; }
.profile-avatar-edit {
  position: absolute;
  bottom: 4px; right: 4px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.85);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 11px;
  transition: background 0.2s, transform 0.2s;
}
.profile-avatar-edit:hover { background: rgba(255, 0, 51, 0.85); transform: scale(1.05); }

/* Location + website row */
.profile-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(245, 245, 245, 0.6);
}
.profile-meta-row .hidden { display: none; }
.profile-meta-row span:not(.hidden),
.profile-meta-row a:not(.hidden) {
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-meta-row i { color: rgba(255, 0, 51, 0.7); font-size: 12px; }
.profile-meta-row a:hover { color: #ff0033; }

/* Profile tiles — image preview support */
.profile-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #050505;
  transition: transform 0.25s;
}
.profile-tile:hover { transform: translateY(-2px); }
.profile-tile img,
.profile-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-tile-label {
  position: absolute; inset: auto 8px 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.65);
  color: #f5f5f5;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-tile-badge {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.7);
  color: white;
  font-size: 10px;
  font-weight: 700;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ POST VIEW MODAL  —  full-screen single-post view                 ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.post-view-card {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: 92vh;
  border-radius: 22px;
  border: 1px solid rgba(255, 0, 51, 0.25);
  background: rgba(17, 17, 17, 0.98);
  backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#postViewBody { overflow-y: auto; }
#postViewBody .post { border: 0; border-radius: 0; background: transparent; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ LIVE MODAL                                                        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.live-stage {
  position: relative;
  padding: 16px 18px 14px;
}
.live-badge {
  position: absolute;
  top: 16px; left: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 0, 51, 0.92);
  color: white;
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 0 16px rgba(255, 0, 51, 0.55);
}
.live-viewers {
  position: absolute;
  top: 16px; right: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(6px);
  color: rgba(245, 245, 245, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}
.live-canvas {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 0, 51, 0.35), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(122, 0, 25, 0.5), transparent 60%),
    #050505;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(245, 245, 245, 0.5);
  text-align: center;
}
.live-canvas i { font-size: 36px; color: rgba(255, 0, 51, 0.7); animation: heartPop 1.4s ease-in-out infinite; }
.live-canvas p { padding: 0 30px; font-size: 13px; line-height: 1.5; }
.live-meta { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.live-note { font-size: 11px; color: rgba(245, 245, 245, 0.4); line-height: 1.5; }
.live-actions { display: flex; justify-content: flex-end; }
.live-end {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ MESSAGES — chat list items (when conversations exist)             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.msg-thread-input input:not(:disabled) { background: rgba(5, 5, 5, 0.7); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ VLOG-PROMO CALLOUT                                                ║
   ║                                                                   ║
   ║ Attention-grab band between hero and spotlight. Inviting          ║
   ║ influencers + entrepreneurs to upload a vlog promo we'll repost.  ║
   ║ Inset card on the home view, centered, with a glowing CTA pill.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.vlog-callout {
  padding: 56px 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.vlog-callout-inner {
  position: relative;
  padding: 64px 48px 56px;
  border-radius: 28px;
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(255, 0, 51, 0.22), transparent 70%),
    radial-gradient(700px 280px at 50% 100%, rgba(255, 0, 136, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(255, 0, 51, 0.08), rgba(255, 0, 136, 0.06) 60%),
    rgba(8, 4, 8, 0.92);
  border: 1.5px solid rgba(255, 0, 136, 0.45);
  box-shadow:
    0 40px 110px -30px rgba(255, 0, 51, 0.65),
    0 0 160px -40px rgba(255, 0, 136, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* Animated gradient sweep that runs across the card top — gives
   the box a "live, casting now" feel that catches the eye on
   scroll without being a flashing animation. */
.vlog-callout-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg,
    rgba(255, 0, 51, 0) 0%,
    rgba(255, 0, 136, 0.7) 30%,
    rgba(255, 92, 184, 0.9) 50%,
    rgba(255, 0, 136, 0.7) 70%,
    rgba(255, 0, 51, 0) 100%);
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: vlogBorderSweep 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes vlogBorderSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .vlog-callout-inner::after { animation: none; }
}
.vlog-callout-inner > * { position: relative; z-index: 1; }

.vlog-callout-inner::before {
  /* Soft pink corner-glow ambient */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at top,
    rgba(255, 0, 136, 0.18) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* Marquee-style "FREE FEATURE" tape running across the top of the
   card. Pure CSS, slides forever, sets the giveaway energy. */
.vlog-callout-tape {
  position: absolute;
  top: 14px;
  left: -10%;
  right: -10%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.34em;
  font-weight: 700;
  color: rgba(255, 0, 136, 0.45);
  white-space: nowrap;
  text-transform: uppercase;
  animation: vlogTapeSlide 18s linear infinite;
  pointer-events: none;
  user-select: none;
}
@keyframes vlogTapeSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vlog-callout-tape { animation: none; }
}

.vlog-callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ff5cb8;
  margin: 12px 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 0, 136, 0.10);
  border: 1px solid rgba(255, 0, 136, 0.30);
}
.vlog-callout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff0088;
  box-shadow: 0 0 12px #ff0088;
  animation: vlogDotPulse 1.6s ease-in-out infinite;
}
@keyframes vlogDotPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .vlog-callout-dot { animation: none; }
}

.vlog-callout-title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.02;
  color: #f5f5f5;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(255, 0, 136, 0.25);
}
.vlog-callout-sub {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 245, 245, 0.82);
}

/* Stat strip — quick trust marks under the body copy. Three
   tiles, equal width, pink number on top + small label below. */
.vlog-callout-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 auto 32px;
  max-width: 640px;
}
.vlog-callout-stat {
  flex: 1 1 140px;
  min-width: 130px;
  padding: 14px 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 0, 136, 0.08), rgba(255, 0, 51, 0.04)),
    rgba(15, 8, 12, 0.6);
  border: 1px solid rgba(255, 0, 136, 0.18);
}
.vlog-callout-stat strong {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #ff5cb8;
  text-shadow: 0 0 18px rgba(255, 0, 136, 0.4);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.vlog-callout-stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
}

.vlog-callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 38px;
  font-size: 15px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 999px;
  animation: vlogCtaPulse 2.6s ease-in-out infinite;
}
@keyframes vlogCtaPulse {
  0%, 100% { box-shadow:
    0 18px 36px -10px rgba(255, 0, 51, 0.7),
    0 0 0 0 rgba(255, 0, 136, 0.55); }
  50%      { box-shadow:
    0 18px 36px -10px rgba(255, 0, 51, 0.7),
    0 0 0 14px rgba(255, 0, 136, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vlog-callout-cta { animation: none; }
}

.vlog-callout-fineprint {
  margin: 16px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
}

@media (max-width: 540px) {
  .vlog-callout { padding: 36px 12px 16px; }
  .vlog-callout-inner { padding: 48px 22px 40px; }
  .vlog-callout-title { font-size: clamp(28px, 9vw, 40px); }
  .vlog-callout-sub { font-size: 15px; }
  .vlog-callout-stats { gap: 10px; }
  .vlog-callout-stat { flex: 1 1 100px; min-width: 95px; padding: 10px 8px; }
  .vlog-callout-stat strong { font-size: 20px; }
  .vlog-callout-cta { padding: 16px 28px; font-size: 13px; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ SPOTLIGHT  —  examodels-style featured-creator carousel           ║
   ║ Auto-scrolling on desktop, swipe-able on mobile. Cards are 3:4   ║
   ║ portraits with a red gradient frame, monogram placeholder, and    ║
   ║ a name/handle caption below. Pause on hover.                      ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.spotlight {
  padding: 60px 16px 70px;
  max-width: 1200px;
  margin: 0 auto;
}
.spotlight-head { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.spotlight-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.spotlight-title {
  margin-top: 14px;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}
.spotlight-title .text-blood {
  text-shadow: 0 0 26px rgba(255, 0, 51, 0.45);
}
.spotlight-sub {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
}

/* Rail: overflow-x scroll container; tracks the marquee animation on
   desktop, accepts manual swipe on touch. Edge fades create the
   cinematic "spotlight" feel. */
.spotlight-rail {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  /* Edge masks so the marquee fades in and out at the sides */
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.spotlight-track {
  display: flex;
  gap: 22px;
  padding: 12px 8px;
  /* Reserve the marquee duration for desktop; mobile gets free-scroll */
  animation: spotlightScroll 36s linear infinite;
  width: max-content;
}
.spotlight-rail:hover .spotlight-track { animation-play-state: paused; }
@keyframes spotlightScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Touch devices: disable the auto-marquee, let the user swipe.
   The rail itself becomes overflow-x:auto with scroll-snap. */
@media (pointer: coarse) {
  .spotlight-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .spotlight-rail::-webkit-scrollbar { display: none; }
  .spotlight-track { animation: none; width: auto; }
  .spotlight-card { scroll-snap-align: center; }
}

.spotlight-card {
  flex: 0 0 280px;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) { .spotlight-card { flex: 0 0 360px; } }
.spotlight-card:hover { transform: translateY(-10px); }

/* Frame — vertical portrait card, red glow, gradient backdrop, optional
   <img> child fills via object-fit: cover. */
.spotlight-frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 0, 51, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(122, 0, 25, 0.55) 0%, transparent 60%),
    linear-gradient(135deg, #1a0008 0%, #050505 100%);
  border: 1px solid rgba(255, 0, 51, 0.28);
  box-shadow:
    0 22px 50px -22px rgba(255, 0, 51, 0.55),
    0 0 0 1px rgba(255, 0, 51, 0.08) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s, box-shadow 0.35s;
}
.spotlight-card:hover .spotlight-frame {
  border-color: rgba(255, 0, 51, 0.55);
  box-shadow:
    0 32px 70px -22px rgba(255, 0, 51, 0.75),
    0 0 0 1px rgba(255, 0, 51, 0.18) inset;
}
/* Real photo, when present, fills the frame */
.spotlight-frame img,
.spotlight-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Inline SVG silhouette portrait placeholder — fills the frame
   exactly, scales cleanly, and reads as intentional editorial art
   rather than a "missing image" hole. */
.spotlight-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Cinematic bottom shade so any photo reads the name underneath */
.spotlight-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 5, 5, 0.75) 0%,
    rgba(5, 5, 5, 0.05) 45%,
    transparent 80%);
  pointer-events: none;
}
/* Monogram placeholder (when no <img>) */
.spotlight-monogram {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(120px, 22vw, 180px);
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow:
    0 0 30px rgba(255, 0, 51, 0.75),
    0 0 70px rgba(255, 0, 51, 0.45);
}

/* Instagram handle pill that floats on the photo frame — makes it
   obvious the card links to a real Instagram. Shows on hover too. */
.spotlight-ig-pill {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity 0.3s, background 0.3s;
}
.spotlight-ig-pill i { color: #ff0033; }
.spotlight-card:hover .spotlight-ig-pill {
  opacity: 1;
  background: rgba(255, 0, 51, 0.85);
}
.spotlight-card:hover .spotlight-ig-pill i { color: white; }

/* Sound toggle pill — top-right of the spotlight frame, only
   rendered when the carousel has any video slides. Pink wash
   when sound is ON so it's obvious which state it's in. */
.spotlight-sound-pill {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 0, 136, 0.45);
  color: #f5f5f5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, opacity 0.25s, transform 0.15s;
  box-shadow: 0 0 22px rgba(255, 0, 136, 0.25);
  /* Pulse so users notice they can hit it. */
  animation: spotlightSoundPulse 2.4s ease-in-out infinite;
}
.spotlight-sound-pill i { color: #ff5cb8; font-size: 13px; }
.spotlight-sound-pill:hover {
  background: rgba(255, 0, 136, 0.18);
  border-color: rgba(255, 0, 136, 0.75);
}
.spotlight-sound-pill:active { transform: scale(0.96); }
.spotlight-sound-pill.on {
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.85), rgba(255, 0, 136, 0.85));
  border-color: rgba(255, 92, 184, 0.9);
  animation: none;
  box-shadow: 0 0 28px rgba(255, 0, 136, 0.6);
}
.spotlight-sound-pill.on i { color: white; }
@keyframes spotlightSoundPulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 0, 136, 0.25),
                          0 0 0 0 rgba(255, 0, 136, 0.45); }
  50%      { box-shadow: 0 0 22px rgba(255, 0, 136, 0.25),
                          0 0 0 10px rgba(255, 0, 136, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .spotlight-sound-pill { animation: none; }
}
/* Hide the label on very narrow screens; icon alone reads. */
@media (max-width: 380px) {
  .spotlight-sound-pill { padding: 7px 9px; }
  .spotlight-sound-pill span { display: none; }
}

/* "Reserved" empty-slot cards — softer, plus icon */
.spotlight-card-empty .spotlight-frame {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 0, 51, 0.06) 0, rgba(255, 0, 51, 0.06) 2px,
      transparent 2px, transparent 9px),
    linear-gradient(135deg, #0a0a0a 0%, #050505 100%);
  border-style: dashed;
}
.spotlight-plus {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 0, 51, 0.45);
  color: #ff0033;
  font-size: 16px;
}

.spotlight-meta {
  margin-top: 14px;
  text-align: center;
}
.spotlight-name {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  color: #f5f5f5;
}
.spotlight-handle {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
}
/* Spotlight credits — currently used for Zay's "Love Island S2
   winner · S4 islander" tag. Sits between .spotlight-name (big
   serif italic) and .spotlight-handle (mono uppercase muted) so
   the achievement reads first, then the CTA. Brand red (blood)
   lifts it above the muted handle without competing with the name. */
.spotlight-credits {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff0033;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ EMAIL-VERIFICATION BANNER                                          ║
   ║                                                                    ║
   ║ Top-fixed strip for signed-in users whose email isn't verified.   ║
   ║ Subtle: brand-pink accent + Resend / dismiss. Persists in-session ║
   ║ once dismissed.                                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.verify-banner {
  position: fixed;
  top: max(12px, calc(env(safe-area-inset-top) + 8px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(255, 0, 51, 0.30);
  border-radius: 999px;
  color: rgba(245, 245, 245, 0.88);
  font-size: 13px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 14px 36px -12px rgba(0, 0, 0, 0.7),
    0 0 28px -8px rgba(255, 0, 51, 0.4);
  animation: verifyBannerIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.verify-banner-icon {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 0, 51, 0.15);
  color: #ff5570;
  font-size: 13px;
  flex-shrink: 0;
}
.verify-banner-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verify-banner-btn {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 50%, #ff0088 100%);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.verify-banner-dismiss {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(245, 245, 245, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.verify-banner-dismiss:hover { color: #f5f5f5; }
@keyframes verifyBannerIn {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 540px) {
  .verify-banner { font-size: 12px; padding: 8px 10px; }
  .verify-banner-text { white-space: normal; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ COOKIE / PRIVACY CONSENT BANNER                                    ║
   ║                                                                    ║
   ║ Bottom-fixed strip. Renders only when the consent flag isn't in    ║
   ║ localStorage yet. Glass + brand-red trim + brand-pink CTA. Safe-   ║
   ║ area-aware so it doesn't sit under the iPhone home indicator.     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 9998;          /* under the bg-audio toggle (99999), over modals */
  pointer-events: auto;
  animation: cookieIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.cookie-banner.hidden { display: none; }
.cookie-banner-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(255, 0, 51, 0.30);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 18px 50px -16px rgba(0, 0, 0, 0.7),
    0 0 40px -8px rgba(255, 0, 51, 0.35);
}
.cookie-banner-body {
  flex: 1 1 320px;
  color: rgba(245, 245, 245, 0.85);
  font-size: 13px;
  line-height: 1.5;
}
.cookie-banner-title {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff0033;
  margin-bottom: 4px;
}
.cookie-banner-text {
  margin: 0;
  color: rgba(245, 245, 245, 0.72);
  font-size: 13px;
}
.cookie-banner-text a {
  color: #ff5570;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner-btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(245, 245, 245, 0.85);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cookie-banner-btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #f5f5f5;
}
.cookie-banner-btn-cta {
  background: linear-gradient(135deg, #ff0033 0%, #ff0066 50%, #ff0088 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}
.cookie-banner-btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(255, 0, 51, 0.6);
}
/* Expanded state (after Manage is clicked) reveals more detail */
.cookie-banner-text.is-expanded {
  white-space: pre-wrap;
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .cookie-banner { left: 8px; right: 8px; }
  .cookie-banner-inner { padding: 12px 14px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-btn { flex: 1; padding: 11px 12px; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ BACKGROUND MUSIC TOGGLE                                            ║
   ║                                                                    ║
   ║ Floating pill button in the bottom-right corner. Lets the user    ║
   ║ opt in to the ambient runway track (autoplay blocked by browser   ║
   ║ until interaction). State persists via localStorage.              ║
   ║                                                                    ║
   ║ Three visual states:                                              ║
   ║   • idle (paused)   — dark coal + 1px red-30 border, muted text   ║
   ║   • hover (paused)  — border lifts to red-60, button rises 2px    ║
   ║   • playing         — diagonal red→pink gradient fill, white text ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.bg-audio-toggle {
  position: fixed;
  /* Bottom-right with iPhone safe-area awareness — `env()` pads
     the button up past the home-indicator strip on notched
     devices. The `max()` keeps a 20px floor on non-notched
     phones (Android, older iPhones) where the env value is 0. */
  right: max(20px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px));
  /* Above the loader (z-40), above any modal backdrops (z-45),
     above everything except a runtime-attached debugger overlay. */
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Slightly chunkier hit area on touch — small phones make a
     10px-padding pill easy to miss. */
  padding: 12px 18px 12px 16px;
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid rgba(255, 0, 51, 0.38);
  border-radius: 999px;
  color: rgba(245, 245, 245, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    0 14px 34px -10px rgba(0, 0, 0, 0.7),
    0 0 28px -6px rgba(255, 0, 51, 0.55);
  transition: transform 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, background 0.25s ease,
              box-shadow 0.25s ease;
  /* iOS Safari: opt out of the default tap-highlight overlay. */
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari: force the button onto its own layer so the
     backdrop-filter actually applies and the position doesn't
     reflow during scroll. */
  transform: translateZ(0);
}
.bg-audio-toggle:hover {
  border-color: rgba(255, 0, 51, 0.65);
  color: #f5f5f5;
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px -10px rgba(0, 0, 0, 0.65),
    0 0 32px -4px rgba(255, 0, 51, 0.6);
}
.bg-audio-toggle:focus-visible {
  outline: none;
  border-color: rgba(255, 0, 136, 0.85);
  box-shadow:
    0 0 0 3px rgba(255, 0, 136, 0.45),
    0 18px 38px -10px rgba(0, 0, 0, 0.65);
}
.bg-audio-toggle.is-playing {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 51, 0.85) 0%,
    rgba(255, 0, 102, 0.75) 50%,
    rgba(255, 0, 136, 0.85) 100%
  );
  border-color: rgba(255, 0, 136, 0.55);
  color: #ffffff;
  box-shadow:
    0 18px 40px -10px rgba(255, 0, 51, 0.55),
    0 0 60px -8px rgba(255, 0, 136, 0.45);
}
.bg-audio-toggle .bg-audio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
}
.bg-audio-toggle .bg-audio-label {
  line-height: 1;
}
/* Tiny equalizer-style pulse on the icon while playing, just
   enough to convey "live" without being distracting. */
.bg-audio-toggle.is-playing .bg-audio-icon {
  animation: bgAudioPulse 1.8s ease-in-out infinite;
}
@keyframes bgAudioPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.15); opacity: 0.7; }
}
/* Compact on phones — drop the label, keep just the icon pill. */
@media (max-width: 480px) {
  .bg-audio-toggle { padding: 10px 12px; }
  .bg-audio-toggle .bg-audio-label { display: none; }
}

/* Spotlight monogram — placeholder slide used when a creator has
   no photos yet. Big serif-italic initial centered on a red-
   tinted radial backdrop. Matches the visual language of the
   splash "S" + the auth modal "S" so the brand identity reads
   through even before real shoots land. */
.spotlight-carousel-slide.spotlight-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(255, 0, 51, 0.22) 0%,
    rgba(255, 0, 102, 0.10) 38%,
    rgba(5, 5, 5, 0.92) 75%
  );
}
.spotlight-monogram-letter {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(140px, 28vw, 220px);
  line-height: 1;
  color: #f5f5f5;
  text-shadow:
    0 6px 24px rgba(255, 0, 51, 0.65),
    0 0 60px rgba(255, 0, 136, 0.35),
    0 0 110px rgba(255, 0, 51, 0.30);
  user-select: none;
}
.spotlight-card-empty .spotlight-name { color: rgba(245, 245, 245, 0.5); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ STORIES RAIL  (feed view, above the post list)                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.stories-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.stories-rail::-webkit-scrollbar { display: none; }
.stories-rail .story {
  flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 70px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
.stories-rail .story-ring {
  width: 64px; height: 64px; padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #7a0019);
  box-shadow: 0 0 14px -2px rgba(255, 0, 51, 0.5);
}
.stories-rail .story-ring-mine {
  background: rgba(255, 0, 51, 0.08);
  border: 1px dashed rgba(255, 0, 51, 0.4);
  padding: 1px;
}
.stories-rail .story-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: #0a0a0a;
  color: #f5f5f5; font-weight: 800; font-size: 16px;
  background-size: cover; background-position: center;
}
.stories-rail .story-mine .story-bubble {
  background: rgba(255, 0, 51, 0.08);
  color: #ff0033;
}
.stories-rail .story-name {
  font-size: 10px;
  color: rgba(245, 245, 245, 0.6);
  letter-spacing: 0.04em;
  max-width: 70px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ BOOKINGS  +  EARNINGS                                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.bookings-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 100px;
}
@media (min-width: 768px) { .bookings-shell { padding: 40px 24px 80px; } }

.bookings-head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.bookings-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.bookings-title {
  margin-top: 12px;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.bookings-sub {
  margin-top: 12px;
  font-size: 14px; color: rgba(245, 245, 245, 0.55);
}

.earnings-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0 28px;
}
@media (min-width: 768px) { .earnings-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.earnings-tile {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.05), transparent 60%),
    rgba(17, 17, 17, 0.7);
  display: flex; flex-direction: column; gap: 6px;
}
.earnings-tile-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.8);
}
.earnings-tile-num {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 30px; color: #f5f5f5;
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(255, 0, 51, 0.2);
}
.earnings-tile-meta {
  font-size: 11px; color: rgba(245, 245, 245, 0.5);
}

.bookings-tabs {
  display: flex; gap: 6px; padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: max-content; margin: 0 auto 22px;
}
.bookings-tab {
  padding: 8px 16px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.2s, background 0.2s;
}
.bookings-tab:hover { color: #f5f5f5; }
.bookings-tab.active {
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 51, 0.6);
}
.bookings-pane { display: none; }
.bookings-pane.active { display: block; }

.bookings-empty {
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 24px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 0, 51, 0.22);
  background:
    radial-gradient(ellipse at top, rgba(255, 0, 51, 0.06), transparent 60%),
    rgba(17, 17, 17, 0.4);
}
.bookings-empty .empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.2), rgba(255, 0, 51, 0.04));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  font-size: 22px; margin-bottom: 18px;
}
.bookings-empty h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 26px; color: #f5f5f5;
}
.bookings-empty p {
  margin: 8px auto 18px;
  font-size: 14px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.55);
}
.bookings-empty-link {
  color: #ff0033;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bookings-set-availability {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ GIGS  —  Temp services agency marketplace                          ║
   ║   Reuses .earnings-tile, .bookings-tab, .bookings-pane,            ║
   ║   .bookings-empty for visual consistency with Bookings.            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.gigs-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 100px;
}
@media (min-width: 768px) { .gigs-shell { padding: 40px 24px 80px; } }

.gigs-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.gigs-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.gigs-title {
  margin-top: 12px;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.gigs-sub {
  margin-top: 12px;
  font-size: 14px; line-height: 1.6; color: rgba(245, 245, 245, 0.6);
}
.gigs-head-actions {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px;
}
.gigs-post-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
}
.gigs-secondary-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.5);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.gigs-secondary-link:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.45); }

.gigs-tiles { margin-bottom: 22px; }

.gigs-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}
.gig-chip {
  padding: 8px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.55);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.gig-chip:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.4); }
.gig-chip.active {
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(255, 0, 51, 0.7);
}

.gigs-toolbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto 18px;
}
.gigs-remote-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(245, 245, 245, 0.65);
  cursor: pointer; user-select: none;
}
.gigs-remote-toggle input { accent-color: #ff0033; width: 16px; height: 16px; }
.gigs-remote-toggle i { color: rgba(255, 0, 51, 0.8); }
.gigs-sort {
  appearance: none; -webkit-appearance: none;
  padding: 9px 30px 9px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f5f5f5;
  background:
    rgba(20, 20, 20, 0.65)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23ff0033' d='M0 0l5 6 5-6z'/></svg>")
    no-repeat right 12px center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.gig-list {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 768px) { .gig-list { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

.gig-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.05), transparent 70%),
    rgba(17, 17, 17, 0.7);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.gig-card:hover {
  border-color: rgba(255, 0, 51, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -28px rgba(255, 0, 51, 0.55);
}
.gig-card-main {
  text-align: left; width: 100%;
  padding: 18px 18px 6px;
  display: flex; flex-direction: column; gap: 10px;
  color: inherit;
}
.gig-card-head {
  display: flex; gap: 14px; justify-content: space-between; align-items: flex-start;
}
.gig-card-headline { min-width: 0; flex: 1; }
.gig-card-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 19px; line-height: 1.25;
  color: #f5f5f5;
  letter-spacing: -0.005em;
}
.gig-card-company {
  margin-top: 4px;
  font-size: 12px; color: rgba(245, 245, 245, 0.6);
  display: inline-flex; align-items: center; gap: 6px;
}
.gig-card-company i { color: rgba(255, 0, 51, 0.8); }
.gig-card-pay {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.gig-card-pay-amount {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 17px; color: #ff5570;
  letter-spacing: -0.01em;
}
.gig-card-pay-terms {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.4);
}
.gig-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  font-size: 11px; color: rgba(245, 245, 245, 0.55);
}
.gig-card-meta i { color: rgba(255, 0, 51, 0.75); margin-right: 4px; }
.gig-card-desc {
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.7);
}
.gig-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gig-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.65);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gig-tag-remote { color: #ff5570; border-color: rgba(255, 0, 51, 0.3); background: rgba(255, 0, 51, 0.08); }
.gig-status {
  display: inline-flex; padding: 4px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.gig-status-pending   { color: #f5f5f5; background: rgba(255, 255, 255, 0.08); }
.gig-status-accepted  { color: #fff; background: linear-gradient(135deg, #16a34a, #0d7c37); }
.gig-status-rejected  { color: rgba(245,245,245,0.6); background: rgba(255,255,255,0.05); }
.gig-status-withdrawn { color: rgba(245,245,245,0.5); background: rgba(255,255,255,0.04); }

.gig-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 6px;
}
.gig-card-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.65);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.gig-card-action:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.4); }
.gig-card-action.active { color: #ff5570; border-color: rgba(255, 0, 51, 0.45); }
.gig-card-apply {
  margin-left: auto;
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  border-color: transparent;
}
.gig-card-apply:hover { color: white; box-shadow: 0 10px 26px -10px rgba(255, 0, 51, 0.6); }
.gig-card-withdraw { margin-left: auto; color: rgba(245,245,245,0.55); }

/* ── Shared modal scaffolding (used by Post Gig + Gig View) ── */
.modal-shell {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal-shell.hidden { display: none; }
.modal-shell.open { animation: fadeIn 0.25s ease both; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.modal-card {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid rgba(255, 0, 51, 0.28);
  border-radius: 24px;
  box-shadow: 0 40px 120px -30px rgba(255, 0, 51, 0.45);
  padding: 28px;
}
@media (min-width: 768px) { .modal-card { padding: 36px; } }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: rgba(245, 245, 245, 0.55);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.2s, background 0.2s;
}
.modal-close:hover { color: #f5f5f5; background: rgba(255, 255, 255, 0.08); }
.modal-head { margin-bottom: 22px; }
.modal-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.modal-title {
  margin-top: 8px;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: #f5f5f5; line-height: 1.1;
}
.modal-sub {
  margin-top: 8px;
  font-size: 13px; color: rgba(245, 245, 245, 0.55); line-height: 1.55;
}
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  margin-top: 12px;
}
.modal-cancel {
  padding: 11px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  background: transparent;
  transition: color 0.2s;
}
.modal-cancel:hover { color: #f5f5f5; }
.modal-submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
}
/* Disabled state for modal submit — was previously driven by inline
   styles that hard-coded opacity + cursor, fighting the .cta-glow
   gradient. Now both shapes (regular + danger) flow through one
   rule. */
.modal-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
/* Danger variant — destructive actions (delete-account etc.) get a
   muted deep-red gradient instead of the brand pink, so destructive
   submits feel different to the eye without going full alarm-red. */
.modal-submit.modal-danger {
  background: linear-gradient(135deg, #ff5050 0%, #a30000 100%) !important;
  box-shadow: 0 18px 36px -10px rgba(255, 80, 80, 0.45);
}
.modal-submit.modal-danger:not(:disabled):hover {
  filter: brightness(1.1);
}

.postgig-card { max-width: 720px; }
.postgig-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row > span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.6);
}
.form-row > span em {
  color: #ff5570; font-style: normal; margin-left: 2px;
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: rgba(255, 0, 51, 0.55);
  background: rgba(20, 20, 20, 1);
}
.form-row textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-row-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .form-row-grid { grid-template-columns: 1fr 1fr; } }
.form-row-toggle { justify-content: flex-start; }
.toggle-inline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px; color: rgba(245, 245, 245, 0.7);
  cursor: pointer;
}
.toggle-inline input { accent-color: #ff0033; width: 16px; height: 16px; }

/* ── Gig detail view modal ── */
.gigview-card { max-width: 720px; }
.gigview-body { display: flex; flex-direction: column; gap: 18px; }
.gigview-head { padding-right: 40px; }
.gigview-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.gigview-title {
  margin-top: 8px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: #f5f5f5; line-height: 1.15;
}
.gigview-company {
  margin-top: 10px;
  font-size: 13px; color: rgba(245, 245, 245, 0.7);
  display: inline-flex; align-items: center; gap: 6px;
}
.gigview-company i { color: rgba(255, 0, 51, 0.85); }
.gigview-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  padding: 16px; border-radius: 16px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 600px) { .gigview-facts { grid-template-columns: repeat(3, 1fr); } }
.gigview-facts > div { display: flex; flex-direction: column; gap: 3px; }
.gigview-fact-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.75);
}
.gigview-fact-value { font-size: 14px; color: #f5f5f5; font-weight: 500; }
.gigview-section h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 8px;
}
.gigview-section p {
  font-size: 14px; line-height: 1.65; color: rgba(245, 245, 245, 0.75);
  white-space: pre-wrap;
}
.gigview-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.gigview-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
}
.gigview-action[disabled] {
  opacity: 0.55; pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.gigview-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s, border-color 0.2s;
}
.gigview-secondary:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.4); }

.gig-apply-pane {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 0, 51, 0.28);
  background: rgba(255, 0, 51, 0.04);
}
.gig-apply-pane.hidden { display: none; }
.gig-apply-pane h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 10px;
}
.gig-apply-pane textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5; font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
}
.gig-apply-pane textarea:focus { outline: none; border-color: rgba(255, 0, 51, 0.55); }
.gig-apply-actions {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  margin-top: 10px;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ SIGN UP HUB  —  Four role cards (Models, Fans, Brands, Media)     ║
   ║   + Brand verification status banner.                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.signup-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 100px;
}
@media (min-width: 768px) { .signup-shell { padding: 50px 24px 100px; } }
.signup-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.signup-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.signup-title {
  margin-top: 12px;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.signup-sub {
  margin-top: 12px;
  font-size: 14px; line-height: 1.65; color: rgba(245, 245, 245, 0.6);
}
.signup-current-role {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 51, 0.35);
  background: rgba(255, 0, 51, 0.06);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ff5570;
}
.signup-current-role.hidden { display: none; }
.signup-current-role i { color: #ff5570; }

.signup-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
@media (min-width: 640px) { .signup-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px){ .signup-cards { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.signup-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.05), transparent 65%),
    rgba(17, 17, 17, 0.7);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.signup-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 51, 0.4);
  box-shadow: 0 28px 70px -34px rgba(255, 0, 51, 0.6);
}
.signup-card-glow {
  position: absolute; top: -40%; right: -30%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 51, 0.45), transparent 70%);
  filter: blur(32px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.3s;
}
.signup-card:hover .signup-card-glow { opacity: 1; }
.signup-card-model .signup-card-glow  { background: radial-gradient(circle, rgba(255, 0, 51, 0.5), transparent 70%); }
.signup-card-fan   .signup-card-glow  { background: radial-gradient(circle, rgba(255, 80, 110, 0.45), transparent 70%); }
.signup-card-brand .signup-card-glow  { background: radial-gradient(circle, rgba(255, 0, 51, 0.55), transparent 70%); }
.signup-card-media .signup-card-glow  { background: radial-gradient(circle, rgba(255, 130, 150, 0.4), transparent 70%); }

.signup-card-brand {
  border-color: rgba(255, 0, 51, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.1), transparent 60%),
    rgba(17, 17, 17, 0.75);
}
.signup-card-flag {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 51, 0.7);
}

.signup-card-head { margin-bottom: 16px; position: relative; z-index: 1; }
.signup-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.22), rgba(255, 0, 51, 0.04));
  border: 1px solid rgba(255, 0, 51, 0.32);
  color: #ff5570;
  font-size: 19px;
  margin-bottom: 14px;
}
.signup-card-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 26px; line-height: 1.1;
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.signup-card-tag {
  margin-top: 4px;
  font-size: 12px; color: rgba(245, 245, 245, 0.55);
}
.signup-card-bullets {
  flex: 1;
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(245, 245, 245, 0.7);
  position: relative; z-index: 1;
}
.signup-card-bullets i {
  color: #ff5570; margin-right: 6px; font-size: 10px;
}
.signup-card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  position: relative; z-index: 1;
}

/* ── Brand verification status banner ── */
.brand-verify-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 0, 51, 0.28);
  background: rgba(255, 0, 51, 0.05);
}
.brand-verify-status.hidden { display: none; }
.brand-verify-status.verified  { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); }
.brand-verify-status.pending   { border-color: rgba(255, 200, 0, 0.4);  background: rgba(255, 200, 0, 0.05); }
.brand-verify-status.rejected  { border-color: rgba(255, 80, 80, 0.45); background: rgba(255, 80, 80, 0.06); }

.bvs-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 0, 51, 0.18);
  border: 1px solid rgba(255, 0, 51, 0.35);
  color: #ff5570;
  font-size: 18px;
  flex-shrink: 0;
}
.brand-verify-status.verified .bvs-icon { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.45); color: #22c55e; }
.brand-verify-status.pending  .bvs-icon { background: rgba(255, 200, 0, 0.15); border-color: rgba(255, 200, 0, 0.4);  color: #ffc800; }
.brand-verify-status.rejected .bvs-icon { background: rgba(255, 80, 80, 0.18); border-color: rgba(255, 80, 80, 0.45); color: #ff5050; }

.bvs-body { min-width: 0; }
.bvs-body h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 4px;
}
.brand-verify-status.verified .bvs-body h4 { color: #22c55e; }
.brand-verify-status.pending  .bvs-body h4 { color: #ffc800; }
.brand-verify-status.rejected .bvs-body h4 { color: #ff5050; }
.bvs-body p {
  font-size: 13px; line-height: 1.5;
  color: rgba(245, 245, 245, 0.75);
}
.bvs-action {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  box-shadow: 0 8px 24px -10px rgba(255, 0, 51, 0.7);
  flex-shrink: 0;
}
.brand-verify-status.verified .bvs-action { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 24px -10px rgba(34, 197, 94, 0.6); }

@media (max-width: 640px) {
  .brand-verify-status { grid-template-columns: auto 1fr; }
  .bvs-action { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* ── Verified-brand badge on gig cards & detail ── */
.gig-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.gig-verified-badge i { font-size: 10px; }

.role-signup-card { max-width: 560px; }
.brand-verify-card { max-width: 720px; }
.direct-offer-card { max-width: 720px; }

/* ── Home view: quick role pills under hero CTAs ── */
.home-role-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.home-role-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.6);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.7);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.home-role-pill:hover {
  color: #fff; border-color: rgba(255, 0, 51, 0.45);
  background: rgba(255, 0, 51, 0.08);
  transform: translateY(-1px);
}
.home-role-pill i { color: #ff5570; font-size: 11px; }
.home-role-pill-brand { border-color: rgba(255, 0, 51, 0.3); }
.home-role-pill-flag {
  margin-left: 2px;
  padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white;
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── Bookings → incoming direct offers (briefs) ── */
.brief-list {
  display: flex; flex-direction: column; gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.brief-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 0, 51, 0.25);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.06), transparent 70%),
    rgba(17, 17, 17, 0.75);
  position: relative;
}
.brief-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  margin-bottom: 12px;
}
.brief-card-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  color: rgba(245, 245, 245, 0.6);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.brief-card-eyebrow i { color: #ff5570; }
.brief-card-eyebrow strong { color: #f5f5f5; }
.brief-card-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 22px; color: #f5f5f5;
  line-height: 1.2;
}
.brief-card-pay {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  flex-shrink: 0;
}
.brief-pay-amount {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 22px; color: #ff5570;
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px rgba(255, 0, 51, 0.3);
}
.brief-pay-terms {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
}
.brief-card-meta {
  font-size: 12px; color: rgba(245, 245, 245, 0.55);
  margin-bottom: 10px;
}
.brief-card-meta i { color: rgba(255, 0, 51, 0.8); margin-right: 4px; }
.brief-card-scope {
  font-size: 14px; line-height: 1.6;
  color: rgba(245, 245, 245, 0.75);
  margin-bottom: 12px;
}
.brief-card-deliverables {
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.65);
  margin-bottom: 12px;
}
.brief-card-deliverables strong { color: #ff5570; font-weight: 700; }
.brief-card-message {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 0, 51, 0.06);
  border-left: 3px solid rgba(255, 0, 51, 0.55);
  font-size: 13.5px; line-height: 1.6;
  color: rgba(245, 245, 245, 0.8);
  margin-bottom: 14px;
}
.brief-card-message strong {
  display: inline-block; margin-bottom: 4px;
  color: #ff5570; font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.brief-card-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.brief-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.brief-decline {
  color: rgba(245, 245, 245, 0.55);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s, border-color 0.2s;
}
.brief-decline:hover { color: #ff5050; border-color: rgba(255, 80, 80, 0.5); }
.brief-accept { color: white; }
.brief-status {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.brief-status-accepted { color: white; background: linear-gradient(135deg, #22c55e, #15803d); }
.brief-status-declined { color: rgba(245, 245, 245, 0.55); background: rgba(255, 255, 255, 0.05); }
.brief-status-withdrawn{ color: rgba(245, 245, 245, 0.5);  background: rgba(255, 255, 255, 0.04); }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ GIVEAWAY BANNER  —  top-of-page yacht-day promo strip             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.giveaway-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background:
    radial-gradient(800px 100px at 0% 50%, rgba(255, 0, 51, 0.18), transparent 60%),
    linear-gradient(90deg, rgba(15, 6, 8, 0.96), rgba(15, 6, 8, 0.96));
  border-bottom: 1px solid rgba(255, 0, 51, 0.22);
  color: rgba(245, 245, 245, 0.85);
  text-decoration: none;
  font-size: 12.5px;
  position: relative; z-index: 30;
  transition: background 0.3s;
}
.giveaway-banner:hover {
  background:
    radial-gradient(800px 100px at 0% 50%, rgba(255, 0, 51, 0.28), transparent 60%),
    linear-gradient(90deg, rgba(15, 6, 8, 1), rgba(15, 6, 8, 1));
}
.giveaway-banner.hidden { display: none; }
.giveaway-banner-mark {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff0033;
  box-shadow: 0 0 12px #ff0033, 0 0 24px rgba(255, 0, 51, 0.5);
  animation: giveawayPulse 1.8s ease-in-out infinite;
}
@keyframes giveawayPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.giveaway-banner-text { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.giveaway-banner-flag {
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #ff0033, #c2001f);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.giveaway-banner-text strong { color: #fff; font-weight: 600; }
.giveaway-banner-sub { color: rgba(245, 245, 245, 0.55); font-size: 12px; }
.giveaway-banner-cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ff5570;
}
.giveaway-banner-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: rgba(245, 245, 245, 0.45);
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.giveaway-banner-close:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 720px) {
  .giveaway-banner-sub { display: none; }
}

/* ── Giveaway modal: hero + perks + attest ── */
.giveaway-card {
  max-width: 720px;
  padding: 0;
  overflow: hidden;
}
.giveaway-hero {
  position: relative;
  padding: 40px 36px 30px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(255, 0, 51, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(15, 6, 8, 1) 0%, rgba(10, 10, 10, 0.6) 100%);
  border-bottom: 1px solid rgba(255, 0, 51, 0.18);
}
.giveaway-hero-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(1px 1px at 85% 65%, rgba(255, 255, 255, 0.18), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.giveaway-hero-title {
  margin-top: 10px;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: #f5f5f5;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(255, 0, 51, 0.4);
}
.giveaway-hero-sub {
  margin-top: 14px;
  font-size: 14px; line-height: 1.65;
  color: rgba(245, 245, 245, 0.72);
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}

.giveaway-perks {
  padding: 24px 36px 8px;
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .giveaway-perks { grid-template-columns: repeat(2, 1fr); gap: 14px 22px; } }
.giveaway-perks li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.75);
}
.giveaway-perks i {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255, 0, 51, 0.12);
  border: 1px solid rgba(255, 0, 51, 0.28);
  color: #ff5570;
  font-size: 13px;
}
.giveaway-perks strong { color: #f5f5f5; font-weight: 600; }
.giveaway-trust {
  margin: 22px 36px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.06);
  border-left: 3px solid rgba(34, 197, 94, 0.5);
  font-size: 12.5px; line-height: 1.6;
  color: rgba(245, 245, 245, 0.75);
}
.giveaway-card form { padding: 0 36px 24px; }
@media (max-width: 600px) {
  .giveaway-hero { padding: 32px 24px 22px; }
  .giveaway-perks { padding: 18px 24px 6px; }
  .giveaway-trust { margin: 18px 24px; }
  .giveaway-card form { padding: 0 24px 18px; }
}
.giveaway-attests {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.giveaway-attest {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.75);
  cursor: pointer;
}
.giveaway-attest input { margin-top: 3px; accent-color: #ff0033; width: 16px; height: 16px; flex-shrink: 0; }
.giveaway-attest a { color: #ff5570; text-decoration: underline; text-underline-offset: 2px; }
.giveaway-attest strong { color: #f5f5f5; font-weight: 700; }

.giveaway-rules {
  padding: 14px 36px 28px;
  font-size: 11px; line-height: 1.65;
  color: rgba(245, 245, 245, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 8px;
}
.giveaway-rules strong { color: rgba(245, 245, 245, 0.7); font-weight: 600; }
.giveaway-rules a { color: #ff5570; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .giveaway-rules { padding: 14px 24px 20px; } }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ COOKIE CONSENT BANNER  —  region-aware                            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.consent-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  z-index: 55;
  display: flex; justify-content: center;
}
.consent-banner.hidden { display: none; }
.consent-body {
  width: 100%;
  max-width: 720px;
  padding: 18px 22px;
  background: rgba(8, 8, 8, 0.96);
  border: 1px solid rgba(255, 0, 51, 0.32);
  border-radius: 18px;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.consent-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 6px;
}
.consent-text {
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.75);
  margin-bottom: 14px;
}
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.consent-btn {
  padding: 10px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.consent-reject {
  color: rgba(245, 245, 245, 0.65);
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s, border-color 0.2s;
}
.consent-reject:hover { color: #f5f5f5; border-color: rgba(255, 255, 255, 0.3); }
.consent-accept {
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  box-shadow: 0 8px 22px -10px rgba(255, 0, 51, 0.7);
}
.consent-links {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(245, 245, 245, 0.4);
}
.consent-links a { color: rgba(245, 245, 245, 0.55); text-decoration: underline; text-underline-offset: 2px; }
.consent-links a:hover { color: #ff5570; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ LEGAL FOOTER  —  always-on links                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.legal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding: 26px 18px 80px;
  background: rgba(5, 5, 5, 0.6);
  font-size: 11px;
  color: rgba(245, 245, 245, 0.4);
  text-align: center;
  position: relative; z-index: 5;
}
.view-home.active ~ .legal-footer { display: none; } /* hidden on cinematic landing */
.legal-footer-row {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center;
}
.legal-footer-brand { font-weight: 600; color: rgba(245, 245, 245, 0.55); letter-spacing: 0.04em; }
.legal-footer-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.legal-footer-links a {
  color: rgba(245, 245, 245, 0.55);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.legal-footer-links a:hover { color: #ff5570; }
.legal-footer-region {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
}
/* Footer social row — sits inline with the legal-links nav. One
   icon today (Instagram); future socials drop in alongside. */
.legal-footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
.legal-footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: rgba(245, 245, 245, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.18s;
}
.legal-footer-socials a:hover {
  color: #fff;
  border-color: rgba(255, 0, 136, 0.55);
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.18), rgba(255, 0, 136, 0.18));
  transform: translateY(-1px);
}

/* Background-music attribution — second row of the legal footer.
   Tiny, muted; brand-pink hover on the source link. */
.legal-footer-credit {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245, 245, 245, 0.32);
}
.legal-footer-credit-text { font-style: italic; }
.legal-footer-credit-link {
  color: rgba(245, 245, 245, 0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.2s, border-color 0.2s;
}
.legal-footer-credit-link:hover {
  color: #ff5570;
  border-bottom-color: rgba(255, 92, 184, 0.5);
}

/* The home view normally hides the full legal footer to keep the
   cinematic landing pristine (.view-home.active ~ .legal-footer
   { display: none } earlier in this file). But the music plays
   ONLY on the home view, so the music credit MUST be visible
   there too. Override:
     • show the .legal-footer itself
     • hide every footer row EXCEPT the credit row
   Result: legal links stay invisible on home, music attribution
   appears as a small italic line at the very bottom. */
.view-home.active ~ .legal-footer {
  display: block;
  padding: 18px 18px 64px;
  background: transparent;
  border-top: none;
}
.view-home.active ~ .legal-footer .legal-footer-row:not(.legal-footer-credit) {
  display: none;
}
.legal-footer-region:empty { display: none; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ PROFILE BADGES  —  collectible achievements on the profile        ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.profile-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.profile-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.6);
  color: rgba(245, 245, 245, 0.75);
  transition: transform 0.2s;
}
.profile-badge:hover { transform: translateY(-1px); }
.profile-badge i { font-size: 11px; }
.profile-badge.founding {
  color: #ffd76b; border-color: rgba(255, 215, 107, 0.4);
  background: linear-gradient(135deg, rgba(255, 215, 107, 0.12), rgba(255, 215, 107, 0.03));
  box-shadow: 0 0 18px rgba(255, 215, 107, 0.18);
}
.profile-badge.founding i { color: #ffd76b; }
.profile-badge.verified-brand,
.profile-badge.verified-talent {
  color: #22c55e; border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.03));
}
.profile-badge.verified-brand i,
.profile-badge.verified-talent i { color: #22c55e; }
.profile-badge.first-post,
.profile-badge.posts-10,
.profile-badge.posts-100 {
  color: #ff5570; border-color: rgba(255, 0, 51, 0.4);
  background: rgba(255, 0, 51, 0.06);
}
.profile-badge.first-post i,
.profile-badge.posts-10 i,
.profile-badge.posts-100 i { color: #ff5570; }
.profile-badge.tastemaker,
.profile-badge.trendsetter {
  color: #c084fc; border-color: rgba(192, 132, 252, 0.4);
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.12), rgba(192, 132, 252, 0.03));
}
.profile-badge.tastemaker i,
.profile-badge.trendsetter i { color: #c084fc; }
.profile-badge.first-gig,
.profile-badge.first-booking {
  color: #60a5fa; border-color: rgba(96, 165, 250, 0.4);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.03));
}
.profile-badge.first-gig i,
.profile-badge.first-booking i { color: #60a5fa; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ AUTH WIDGETS  —  topnav login/signup buttons + account menu       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.auth-buttons {
  display: inline-flex; align-items: center; gap: 8px;
}
.auth-buttons.hidden { display: none; }
.auth-btn {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.auth-btn-ghost {
  color: rgba(245, 245, 245, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}
.auth-btn-ghost:hover { color: #fff; border-color: rgba(255, 0, 51, 0.5); }
.auth-btn-primary {
  color: white;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  box-shadow: 0 8px 22px -10px rgba(255, 0, 51, 0.65);
}
.auth-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(255, 0, 51, 0.75); }

.account-widget { position: relative; }
.account-widget.hidden { display: none; }
.account-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 245, 0.85);
  transition: border-color 0.2s, background 0.2s;
}
.account-trigger:hover { border-color: rgba(255, 0, 51, 0.45); background: rgba(20, 20, 20, 1); }
.account-trigger i { font-size: 10px; color: rgba(245, 245, 245, 0.5); }
.account-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff0033, #c2001f);
  color: white;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover; background-position: center;
}
.account-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.account-avatar-lg { width: 44px; height: 44px; font-size: 16px; }
.account-avatar-xl { width: 72px; height: 72px; font-size: 24px; }
.account-name {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: #f5f5f5;
  max-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) { .account-name { display: none; } }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 280px;
  padding: 12px;
  background: rgba(10, 10, 10, 0.98);
  border: 1px solid rgba(255, 0, 51, 0.28);
  border-radius: 18px;
  box-shadow: 0 28px 70px -20px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 50;
  animation: fadeIn 0.18s ease both;
}
.account-menu.hidden { display: none; }
.account-menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
}
.account-menu-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.account-menu-id strong {
  font-size: 14px; font-weight: 600; color: #f5f5f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-id span {
  font-size: 11px; color: rgba(245, 245, 245, 0.55);
}
.account-menu-email {
  font-size: 10.5px; color: rgba(245, 245, 245, 0.4);
}
.account-menu-section-label {
  padding: 8px 10px 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.7);
}
.account-menu-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: rgba(245, 245, 245, 0.85);
  background: transparent;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.account-menu-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.account-menu-link i { width: 16px; text-align: center; color: rgba(255, 0, 51, 0.7); }
.account-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 8px 4px;
}
.account-menu-list { list-style: none; padding: 0; margin: 0 0 4px; max-height: 220px; overflow-y: auto; }
.account-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.account-menu-item:hover { background: rgba(255, 255, 255, 0.04); }
.account-menu-item.active { background: rgba(255, 0, 51, 0.08); }
.account-menu-item-meta {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; gap: 1px;
}
.account-menu-item-meta strong {
  font-size: 12.5px; font-weight: 600; color: #f5f5f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-menu-item-meta span { font-size: 10.5px; color: rgba(245, 245, 245, 0.5); }
.account-menu-item .account-current {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #22c55e;
  margin-left: auto;
}
.account-menu-add i { color: #ff5570; }
.account-menu-logout { color: #ff5570; }
.account-menu-logout:hover { background: rgba(255, 0, 51, 0.08); color: #ff8094; }
.account-menu-logout i { color: #ff5570; }

/* ── Auth modal (login + signup) ── */
.auth-card { max-width: 480px; }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-logo {
  width: 140px; height: auto;
  filter:
    drop-shadow(0 6px 22px rgba(255, 0, 51, 0.55))
    drop-shadow(0 0 36px rgba(255, 0, 51, 0.25));
  margin: 0 auto 14px;
  display: block;
}
.auth-sub {
  margin-top: 8px;
  font-size: 13px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.6);
}
.auth-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.2s, background 0.2s;
}
.auth-tab:hover { color: #f5f5f5; }
.auth-tab.active {
  background: linear-gradient(135deg, #ff0033, #c2001f);
  color: white;
  box-shadow: 0 6px 18px -6px rgba(255, 0, 51, 0.6);
}
.auth-pane { display: flex; flex-direction: column; gap: 14px; }
.auth-pane.hidden { display: none; }
.auth-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 4px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  width: 100%;
}
.auth-error {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 80, 80, 0.1);
  border: 1px solid rgba(255, 80, 80, 0.35);
  color: #ff5050;
  font-size: 12.5px; line-height: 1.5;
}
.auth-error.hidden { display: none; }
.auth-attest {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5;
  color: rgba(245, 245, 245, 0.7);
  cursor: pointer;
}
.auth-attest input { margin-top: 3px; accent-color: #ff0033; width: 16px; height: 16px; flex-shrink: 0; }
.auth-attest a { color: #ff5570; text-decoration: underline; text-underline-offset: 2px; }
.auth-foot {
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(245, 245, 245, 0.55);
  text-align: center;
}
.auth-link {
  color: #ff5570;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-link:hover { color: #ff8094; }

.auth-saved { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.auth-saved.hidden { display: none; }
.auth-saved-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.45);
  margin-bottom: 8px;
}
.auth-saved-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.auth-saved-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.auth-saved-item:hover { border-color: rgba(255, 0, 51, 0.4); background: rgba(20, 20, 20, 0.9); }
.auth-saved-item-meta {
  min-width: 0; flex: 1;
  display: flex; flex-direction: column; gap: 1px;
  text-align: left;
}
.auth-saved-item-meta strong { font-size: 12.5px; color: #f5f5f5; }
.auth-saved-item-meta span { font-size: 10.5px; color: rgba(245, 245, 245, 0.5); }
.auth-saved-item i { color: rgba(255, 0, 51, 0.7); font-size: 11px; }

.switch-card { max-width: 420px; text-align: center; }
.switch-card .account-avatar-xl { margin: 0 auto; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ REPOST · BOOST · COLLECTIONS · THEME                              ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── Repost-with-comment ── */
.repost-card { max-width: 480px; }
.post-action.repost.reposted { color: #22c55e; }
.post-action.repost.reposted i { color: #22c55e; }
.post-repost-ribbon {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  margin: 6px 14px 0;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: rgba(245, 245, 245, 0.75);
  font-size: 12px;
}
.post-repost-ribbon i { color: #22c55e; }

/* ── Boost / Promote ── */
.boost-card { max-width: 640px; }
.post-action.boost {
  color: rgba(245, 245, 245, 0.6);
  transition: color 0.2s, transform 0.2s;
}
.post-action.boost:hover { color: #ff5570; transform: scale(1.06); }
.post-action.boost.boosted { color: #ff5570; }
.post-action.boost.boosted i { animation: boostPulse 2.4s ease-in-out infinite; }
@keyframes boostPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 0, 51, 0.5)); }
  50%      { transform: scale(1.12); filter: drop-shadow(0 0 16px rgba(255, 0, 51, 0.8)); }
}
.post-boost-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #ff0033, #c2001f);
  margin-right: 8px;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.45);
}
.post-boost-badge i { font-size: 9px; }

.boost-slider {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 0, 51, 0.6), rgba(255, 0, 51, 0.2));
  -webkit-appearance: none; appearance: none;
  outline: none;
  cursor: pointer;
}
.boost-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s;
}
.boost-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.boost-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  border: 0;
  box-shadow: 0 0 12px rgba(255, 0, 51, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.boost-projection {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.06), transparent 70%), rgba(20, 20, 20, 0.65);
  border: 1px solid rgba(255, 0, 51, 0.18);
}
.boost-projection > div { display: flex; flex-direction: column; gap: 4px; }
.boost-projection-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.boost-projection-num {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 19px; color: #f5f5f5;
  letter-spacing: -0.01em;
  text-shadow: 0 0 24px rgba(255, 0, 51, 0.2);
}
@media (max-width: 600px) {
  .boost-projection { grid-template-columns: 1fr; }
  .boost-projection-num { font-size: 17px; }
}
.boost-disclaimer {
  font-size: 11.5px; line-height: 1.55;
  color: rgba(245, 245, 245, 0.5);
  padding: 0 4px;
}
.boost-disclaimer a { color: #ff5570; text-decoration: underline; text-underline-offset: 2px; }

/* ── Collection picker ── */
.collection-picker-card { max-width: 460px; }
.collection-picker-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow-y: auto;
}
.collection-picker-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.collection-picker-item:hover {
  border-color: rgba(255, 0, 51, 0.4);
  background: rgba(20, 20, 20, 1);
}
.collection-picker-item.active {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.06);
}
.collection-picker-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.2), rgba(255, 0, 51, 0.04));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff5570;
  font-size: 14px;
  flex-shrink: 0;
}
.collection-picker-item.active .collection-picker-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.05));
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}
.collection-picker-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.collection-picker-meta strong { font-size: 14px; color: #f5f5f5; font-weight: 600; }
.collection-picker-meta span { font-size: 11px; color: rgba(245, 245, 245, 0.55); }
.collection-new-row {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.collection-new-row input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  font-size: 13px;
  font-family: inherit;
}
.collection-new-row input:focus { outline: none; border-color: rgba(255, 0, 51, 0.55); }

/* ── Profile Collections tab ── */
.collections-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.collections-toolbar-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
}
.collections-new-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: white;
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 600px) { .collections-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .collections-grid { grid-template-columns: repeat(4, 1fr); } }
.collection-card {
  position: relative;
  display: block;
  text-align: left;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(17, 17, 17, 0.7);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.collection-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 51, 0.4);
  box-shadow: 0 20px 50px -28px rgba(255, 0, 51, 0.55);
}
.collection-card-cover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.4);
}
.collection-cover-tile {
  background-size: cover; background-position: center;
  background-color: rgba(255, 0, 51, 0.08);
  overflow: hidden;
  position: relative;
}
.collection-cover-tile video { width: 100%; height: 100%; object-fit: cover; }
.collection-cover-tile.collection-cover-text {
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  font-size: 10px; color: rgba(245, 245, 245, 0.7);
  text-align: center; line-height: 1.45;
}
.collection-cover-empty {
  grid-column: 1 / -1; grid-row: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 0, 51, 0.4);
  font-size: 38px;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.05), transparent);
}
.collection-card-meta {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.collection-card-meta strong {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 18px; color: #f5f5f5;
  letter-spacing: -0.005em;
}
.collection-card-meta span { font-size: 11px; color: rgba(245, 245, 245, 0.5); }
.collection-card-delete {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(245, 245, 245, 0.6);
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.collection-card:hover .collection-card-delete { opacity: 1; }
.collection-card-delete:hover { color: #ff5050; }

.collections-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.7);
  margin-bottom: 18px;
  transition: color 0.2s, border-color 0.2s;
}
.collections-back:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.4); }
.collections-detail-title {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 900;
  font-size: 30px; color: #f5f5f5;
  margin-bottom: 18px;
}

/* ── Theme switch ── */
.theme-switch {
  display: inline-flex; gap: 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.theme-switch-btn:hover { color: #f5f5f5; }
.theme-switch-btn.active {
  background: linear-gradient(135deg, #ff0033, #c2001f);
  color: white;
  box-shadow: 0 4px 14px -4px rgba(255, 0, 51, 0.6);
}
.theme-switch-btn i { font-size: 10px; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ LIGHT THEME  —  basic overrides. Brand is designed for dark, so   ║
   ║ this is a tasteful daytime variant, not a wholesale invert.       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
body.theme-light {
  background: #fafafa;
  color: #0a0a0a;
}
body.theme-light .topnav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px);
}
body.theme-light .nav-link { color: rgba(0, 0, 0, 0.65); }
body.theme-light .nav-link:hover, body.theme-light .nav-link.active { color: #0a0a0a; }
/* `.post-card` / `.thread-card` removed from light-theme selectors —
   those classes don't exist in current HTML. */
body.theme-light .bookings-shell .earnings-tile,
body.theme-light .gig-card,
body.theme-light .collection-card,
body.theme-light .signup-card,
body.theme-light .settings-card,
body.theme-light .gigs-toolbar,
body.theme-light .modal-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #0a0a0a;
}
body.theme-light .post-username,
body.theme-light .post-time,
body.theme-light .post-caption-text,
body.theme-light .post-text { color: #0a0a0a; }
body.theme-light .post-caption-name { color: #0a0a0a; }
body.theme-light .feed-shell,
body.theme-light .threads-shell,
body.theme-light .bookings-shell,
body.theme-light .signup-shell,
body.theme-light .gigs-shell {
  color: #0a0a0a;
}
body.theme-light .legal-footer { background: rgba(255, 255, 255, 0.7); color: rgba(0, 0, 0, 0.55); }
body.theme-light .legal-footer-links a { color: rgba(0, 0, 0, 0.55); }
body.theme-light .legal-footer-links a:hover { color: #e11d48; }
body.theme-light .consent-body {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(225, 29, 72, 0.32);
  color: #0a0a0a;
}
body.theme-light .consent-text { color: rgba(0, 0, 0, 0.7); }
body.theme-light .account-trigger {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0a0a0a;
}
body.theme-light .account-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(225, 29, 72, 0.28);
  color: #0a0a0a;
}
body.theme-light .account-menu-link { color: rgba(0, 0, 0, 0.75); }
body.theme-light .account-menu-link:hover { background: rgba(0, 0, 0, 0.04); color: #0a0a0a; }
body.theme-light .auth-btn-ghost { color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.12); }
body.theme-light .auth-btn-ghost:hover { color: #0a0a0a; }
body.theme-light .giveaway-banner {
  background:
    radial-gradient(800px 100px at 0% 50%, rgba(225, 29, 72, 0.12), transparent 60%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
  color: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(225, 29, 72, 0.22);
}
body.theme-light .giveaway-banner strong { color: #0a0a0a; }
body.theme-light .giveaway-banner-sub { color: rgba(0, 0, 0, 0.55); }
body.theme-light .topnav-search input,
body.theme-light .form-row input,
body.theme-light .form-row select,
body.theme-light .form-row textarea,
body.theme-light .comment-input,
body.theme-light .thread-compose-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #0a0a0a;
}
body.theme-light .modal-backdrop { background: rgba(255, 255, 255, 0.7); }
body.theme-light .nav-link.active::after { background: #e11d48; }
body.theme-light .topnav-bell { color: rgba(0, 0, 0, 0.7); }
body.theme-light .topnav-bell:hover { color: #e11d48; }
/* Loader & landing hero stay dark — the brand identity is dark-first. */
body.theme-light .view-home,
body.theme-light #loader { color: #f5f5f5; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ SETTINGS                                                          ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
.settings-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.03), transparent 60%),
    rgba(17, 17, 17, 0.6);
}
.settings-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 14px;
}
.settings-card.danger h3 { color: #ff5570; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-row:first-of-type { border-top: 0; }
.settings-row strong {
  display: block;
  font-size: 13px; color: #f5f5f5;
}
.settings-row-value {
  margin-top: 2px;
  font-size: 12px; color: rgba(245, 245, 245, 0.5);
}
.settings-row-action {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 51, 0.25);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.settings-row-action:hover { background: rgba(255, 0, 51, 0.08); color: #ff0033; }

/* Settings <select> override — restores the dropdown affordance
   without inheriting the pill styling that .settings-row-action
   forces. Was previously an inline-style block in HTML; lifted
   to a class so it matches the rest of the form. */
.settings-row-action.settings-select {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.settings-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.settings-toggle:first-of-type { border-top: 0; }
.settings-toggle strong { display: block; font-size: 13px; color: #f5f5f5; }
.settings-toggle p { margin-top: 2px; font-size: 12px; color: rgba(245, 245, 245, 0.5); }
/* Custom switch styled toggle */
.settings-toggle input[type="checkbox"] {
  appearance: none;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background 0.25s;
}
.settings-toggle input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f5f5f5;
  transition: left 0.2s;
}
.settings-toggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #ff0033, #c2001f);
}
.settings-toggle input[type="checkbox"]:checked::before {
  left: 21px;
  background: white;
}

.settings-danger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 0, 51, 0.08);
  border: 1px solid rgba(255, 0, 51, 0.35);
  color: #ff5570;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.settings-danger:hover { background: rgba(255, 0, 51, 0.16); color: #ff0033; }
.settings-danger-note { margin-top: 10px; font-size: 11px; color: rgba(245, 245, 245, 0.4); line-height: 1.5; margin-bottom: 18px; }
.settings-danger-note:last-child { margin-bottom: 0; }
.settings-danger-note strong { color: rgba(245, 245, 245, 0.75); font-weight: 700; }
/* Soft variant — amber. Reversible actions like Disable. */
.settings-danger-soft {
  background: rgba(255, 180, 0, 0.08) !important;
  border-color: rgba(255, 180, 0, 0.4) !important;
  color: #ffc04a !important;
}
.settings-danger-soft:hover { background: rgba(255, 180, 0, 0.16) !important; color: #ffd76b !important; }
/* Hard variant — saturated red. Irreversible actions like Delete. */
.settings-danger-hard {
  background: rgba(255, 50, 50, 0.12) !important;
  border-color: rgba(255, 50, 50, 0.5) !important;
  color: #ff5050 !important;
}
.settings-danger-hard:hover { background: rgba(255, 50, 50, 0.22) !important; color: #ff7070 !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ MOBILE BOTTOM NAV                                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; inset-inline: 0;
  z-index: 30;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: blur(18px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 768px) { .bottom-nav { display: flex; } }
.bn-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
  transition: color 0.2s;
}
.bn-item i { font-size: 18px; }
.bn-item.active { color: #ff0033; }
.bn-create {
  width: 48px; height: 48px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff0033 0%, #c2001f 100%);
  color: white; font-size: 18px;
  box-shadow: 0 12px 28px -8px rgba(255, 0, 51, 0.7);
}
/* Add bottom padding to .views on mobile so the bottom nav doesn't
   cover the last bit of content. */
@media (max-width: 768px) {
  .views { padding-bottom: 80px; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ ONBOARDING WIZARD                                                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.onboard-progress {
  display: flex; gap: 6px;
  margin-bottom: 22px;
}
.onboard-step {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s;
}
.onboard-step.active {
  background: linear-gradient(90deg, #ff0033, #c2001f);
  box-shadow: 0 0 10px rgba(255, 0, 51, 0.5);
}
.onboard-pane { display: none; }
.onboard-pane.active { display: block; animation: fadeIn 0.3s ease both; }
.onboard-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255, 0, 51, 0.85);
  margin-bottom: 10px;
}
.onboard-title {
  font-size: clamp(1.6rem, 4vw, 2rem);
  color: #f5f5f5;
  letter-spacing: -0.01em;
}
.onboard-sub {
  margin-top: 8px; font-size: 13px; color: rgba(245, 245, 245, 0.55);
}
.onboard-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 18px;
}
.onboard-next, .onboard-finish {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: white;
  margin-top: 14px;
}
.onboard-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(245, 245, 245, 0.7);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
}
.onboard-back:hover { color: #f5f5f5; border-color: rgba(255, 0, 51, 0.4); }
.onboard-photo {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 0, 51, 0.3);
  background: rgba(255, 0, 51, 0.03);
  cursor: pointer;
}
.onboard-photo-preview {
  width: 60px; height: 60px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.2), rgba(122, 0, 25, 0.05));
  border: 1px solid rgba(255, 0, 51, 0.3);
  color: #ff0033;
  background-size: cover; background-position: center;
}
.onboard-photo-preview.has-photo i { display: none; }
.onboard-photo-label {
  font-size: 13px; color: rgba(245, 245, 245, 0.7);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ HASHTAGS  +  @MENTIONS                                             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.post-caption-text a.tag,
.post-caption-text a.mention,
.thread-text a.tag,
.thread-text a.mention,
.post-media-text a.tag,
.post-media-text a.mention {
  color: #ff0033;
  text-decoration: none;
  font-weight: 600;
  transition: text-shadow 0.2s;
}
.post-caption-text a.tag:hover,
.post-caption-text a.mention:hover,
.thread-text a.tag:hover,
.thread-text a.mention:hover,
.post-media-text a.tag:hover,
.post-media-text a.mention:hover {
  text-shadow: 0 0 12px rgba(255, 0, 51, 0.55);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ SKELETON LOADERS                                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.skel {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 0, 51, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes skelShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skel-post {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(17, 17, 17, 0.55);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 14px;
}
.skel-row { display: flex; align-items: center; gap: 10px; }
.skel-circle { width: 36px; height: 36px; border-radius: 50%; }
.skel-line { height: 12px; }
.skel-line.short { width: 30%; }
.skel-line.mid   { width: 60%; }
.skel-line.long  { width: 90%; }
.skel-media { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; }


/* ═══════════════════════════════════════════════════════════
   MARKETPLACE  —  Fiverr-style productized creator services.
   Cards in a responsive grid, filter chips, detail modal, and
   a Leaflet map view that lazy-loads when toggled.
   ═══════════════════════════════════════════════════════════ */
.view-marketplace { padding: 28px 0 72px; }
.market-shell { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* Header */
.market-head { text-align: center; margin-bottom: 28px; }
.market-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #ff5cb8;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.market-title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  margin: 0 0 14px;
  color: #f5f5f5;
}
.market-sub {
  max-width: 640px;
  margin: 0 auto 22px;
  color: rgba(245, 245, 245, 0.7);
  font-size: 16px;
  line-height: 1.6;
}
.market-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.market-post-cta { font-size: 14px; padding: 12px 22px; }
.market-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.market-secondary-link:hover {
  background: rgba(255, 0, 51, 0.08);
  border-color: rgba(255, 0, 51, 0.35);
}
.market-secondary-link[aria-pressed="true"] {
  background: rgba(255, 0, 51, 0.15);
  border-color: rgba(255, 0, 51, 0.55);
}

/* Filter chips */
.market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.market-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 245, 0.7);
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.market-chip:hover {
  border-color: rgba(255, 0, 136, 0.4);
  color: #fff;
}
.market-chip.active {
  background: linear-gradient(180deg, #ff0088 0%, #e11d8a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 0, 136, 0.4);
}

/* Toolbar (search + sort + map toggle) */
.market-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 auto 22px;
  max-width: 760px;
}
.market-search {
  flex: 1 1 280px;
  position: relative;
  min-width: 220px;
}
.market-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(245, 245, 245, 0.4);
  font-size: 13px;
}
.market-search input {
  width: 100%;
  padding: 11px 14px 11px 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  font: inherit;
  font-size: 14px;
}
.market-search input:focus {
  outline: none;
  border-color: rgba(255, 0, 136, 0.45);
  background: rgba(255, 255, 255, 0.05);
}
.market-sort {
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f5f5f5;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Map */
.market-map {
  width: 100%;
  height: 460px;
  border-radius: 16px;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.market-map[hidden] { display: none !important; }
.leaflet-popup-content-wrapper {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
  border-radius: 10px !important;
}
.leaflet-popup-tip { background: #0a0a0a !important; }
.leaflet-popup-content a { color: #ff5cb8; }

/* Listing card grid */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.market-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease, box-shadow 0.25s ease;
}
.market-card:hover,
.market-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 0, 136, 0.45);
  box-shadow: 0 16px 40px -14px rgba(255, 0, 136, 0.45);
  outline: none;
}
.market-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #161616;
}
.market-card-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  font-size: 36px;
}
.market-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.market-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-card-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.market-card-avatar-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  font-weight: 700;
  font-size: 13px;
}
.market-card-meta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.market-card-seller {
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.market-card-cat {
  color: rgba(245, 245, 245, 0.5);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.market-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #f5f5f5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-card-desc {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.55);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: rgba(245, 245, 245, 0.65);
}
.market-card-price {
  color: #ff5cb8;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}
.market-card-delivery, .market-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.market-card-loc { margin-left: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty / loading states */
.market-empty, .market-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: rgba(245, 245, 245, 0.55);
}
.market-empty i { font-size: 36px; color: rgba(255, 255, 255, 0.15); }
.market-empty.hidden, .market-loading.hidden { display: none; }
.market-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #ff0088;
  animation: market-spin 0.8s linear infinite;
}
@keyframes market-spin { to { transform: rotate(360deg); } }
.market-error {
  text-align: center;
  color: #ff5577;
  padding: 30px;
}

/* Detail modal */
.market-modal { max-width: 720px; }
.market-modal-wide { max-width: 920px; }
.market-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 16px 0 18px;
}
.market-detail-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #161616;
  border-radius: 12px;
}
.market-detail-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}
.market-detail-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.market-detail-seller { flex: 1; display: flex; flex-direction: column; }
.market-detail-name { color: #f5f5f5; font-weight: 600; }
.market-detail-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(245, 245, 245, 0.5);
  text-transform: uppercase;
}
.market-detail-price { display: flex; gap: 14px; align-items: center; }
.market-detail-description {
  color: rgba(245, 245, 245, 0.85);
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.market-detail-loc {
  color: rgba(245, 245, 245, 0.6);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

/* My-marketplace drawer tabs */
.market-tabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.market-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: rgba(245, 245, 245, 0.55);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.market-tab:hover { color: #fff; }
.market-tab.active {
  color: #fff;
  border-bottom-color: #ff0088;
}
.market-modal-body {
  padding: 18px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.market-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.market-row-main { flex: 1; min-width: 0; }
.market-row-main h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.market-row-meta { margin: 0; color: rgba(245, 245, 245, 0.55); font-size: 12px; line-height: 1.5; }
.market-row-contact { margin: 4px 0 0; color: rgba(255, 92, 184, 0.85); font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.market-row-time {
  color: rgba(245, 245, 245, 0.4);
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.badge-active, .badge-paused {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-active { background: rgba(0, 200, 100, 0.15); color: #66ff99; }
.badge-paused { background: rgba(255, 255, 255, 0.06); color: rgba(245, 245, 245, 0.5); }

/* Inline JWT auth prompt error */
.jwt-auth-error {
  color: #ff5577;
  font-size: 13px;
  text-align: center;
  margin: 4px 0;
}
.jwt-auth-error.hidden { display: none; }
.form-help {
  color: rgba(245, 245, 245, 0.55);
  font-size: 13px;
  text-align: center;
  margin-top: 8px;
}
.link-btn {
  background: none;
  border: none;
  color: #ff5cb8;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}
/* Pulse the "Create one" link when login 401s — draws the user to
   the most likely next action without being obnoxious. */
.link-btn.jwt-nudge {
  animation: jwt-nudge-pulse 1.8s ease-in-out;
}
/* Password-reset request success state — replaces the form after
   the email-link request lands. Matches the modal's existing dark
   surface; centred content with a hero check icon. */
.pw-reset-success {
  text-align: center;
  padding: 18px 20px 8px;
}
.pw-reset-success.hidden { display: none; }
.pw-reset-success i {
  font-size: 44px;
  color: #ff5cb8;
  margin-bottom: 14px;
}
.pw-reset-success p {
  color: #f5f5f5;
  margin: 0 0 12px;
  line-height: 1.5;
}
.pw-reset-success p.form-help {
  color: rgba(245, 245, 245, 0.55);
  font-size: 13px;
}
.pw-reset-success .modal-submit {
  margin-top: 12px;
  display: inline-flex;
}
@keyframes jwt-nudge-pulse {
  0%, 100% { color: #ff5cb8; transform: scale(1); }
  20%      { color: #ff0088; transform: scale(1.1); }
  40%      { color: #ff5cb8; transform: scale(1); }
  60%      { color: #ff0088; transform: scale(1.1); }
}

/* Listing form — upload row + thumb preview */
.form-row-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(245, 245, 245, 0.8);
  font-size: 13px;
}
.form-row-label small {
  font-weight: normal;
  color: rgba(245, 245, 245, 0.45);
  margin-left: 6px;
}
.market-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
/* Geocoding actions inside the create-listing form. Same visual
   language as the photo-upload row — pill buttons + status text. */
.market-geo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.market-geo-status {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.6);
  font-family: 'JetBrains Mono', monospace;
  flex: 1 1 100%;
}
.market-upload-status {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.6);
  font-family: 'JetBrains Mono', monospace;
}
.market-upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.market-upload-preview:empty { display: none; }
.market-upload-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.market-upload-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
}
.market-upload-remove:hover { background: rgba(255, 0, 51, 0.85); }

/* Mobile tweaks */
@media (max-width: 640px) {
  .market-shell { padding: 0 14px; }
  .market-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .market-card-body { padding: 10px 12px 12px; gap: 8px; }
  .market-card-title { font-size: 14px; }
  .market-card-desc { display: none; }   /* save vertical space on phones */
  .market-toolbar { flex-direction: column; align-items: stretch; }
  .market-map { height: 360px; }
  .market-head-actions { flex-direction: column; align-items: stretch; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ VERY SMALL PHONES — 320px / iPhone SE / older Galaxy             ║
   ║                                                                  ║
   ║ Catches the common breakage at narrow viewports:                ║
   ║   • Hero headline overflows or wraps awkwardly                  ║
   ║   • CTA pills push off-screen on the right                      ║
   ║   • Spotlight cards force horizontal scroll                     ║
   ║   • Modal padding eats the whole viewport                       ║
   ║   • Bottom-fixed widgets (audio toggle, banners) stack badly    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
@media (max-width: 380px) {
  /* Hero typography — was clamping at 36px-min but still too wide
     for 320px when the long word "Synfluencers" sits on one line.
     Drop one notch + tighten line height. */
  .home-headline { font-size: clamp(28px, 9vw, 34px) !important; line-height: 1.05; }
  .home-sub      { font-size: 14px; }
  .home-cta-row  { flex-direction: column; align-items: stretch; gap: 10px; }
  .home-cta, .home-cta-secondary {
    width: 100%;
    justify-content: center;
    font-size: 12px;
    padding: 12px 16px;
  }
  .home-role-pills { gap: 6px; }
  .home-role-pill  { padding: 8px 10px; font-size: 11px; }

  /* Spotlight cards — was fixed-width 280px which forces horiz
     scroll on a 320px viewport. Drop to fit-to-screen. */
  .spotlight        { padding: 32px 12px 40px; }
  .spotlight-card   { min-width: 260px; max-width: 100%; }
  .spotlight-title  { font-size: clamp(24px, 7vw, 32px); }

  /* Vlog callout card — pad less so the 28dp radius doesn't eat
     the readable text width on 320px screens. Stats collapse to
     2-up to stay touchable. */
  .vlog-callout       { padding: 24px 8px 8px; }
  .vlog-callout-inner { padding: 36px 14px 32px; }
  .vlog-callout-title { font-size: clamp(24px, 8vw, 32px); }
  .vlog-callout-sub   { font-size: 14px; }
  .vlog-callout-stat  { flex: 1 1 90px; min-width: 88px; padding: 8px 6px; }
  .vlog-callout-stat strong { font-size: 18px; }
  .vlog-callout-cta   { padding: 14px 22px; font-size: 12px; letter-spacing: 0.16em; }

  /* Modals — Tailwind's max-w-xl etc. don't hold up at 320px.
     Squeeze padding everywhere. */
  .modal-card, .lightbox-card,
  .market-detail-card,
  .market-form-card,
  .market-inquiry-card,
  .market-listings-card {
    padding: 18px 14px !important;
  }

  /* Bottom widgets stack: cookie banner on top of audio toggle
     was overlapping the home-indicator on iPhone SE landscape. */
  .cookie-banner   { left: 6px; right: 6px; }
  .bg-audio-toggle { right: 12px; bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)); }
}