/* ==================================================================
   Wotach "Aurora" theme
   A vibrant, gradient-driven design layer loaded AFTER style.css.
   It re-points the base design tokens (so every page re-skins at once)
   and then polishes the global shell, home feed and cards.
   Removing the <link> to this file returns the site to the old look.
   ================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  --fb-blue: #7c3aed;
  --fb-blue-dark: #6d28d9;
  --brand: #7c3aed;
  --brand-2: #db2777;

  --bg: #eef1fb;
  --bg-soft: #e7ebf9;
  --card-bg: #ffffff;
  --surface-2: #f4f5fd;
  --text: #0f1729;
  --text-secondary: #6b7280;
  --border: #e6e8f2;
  --hover: #f1f2fb;

  /* Brand + section gradients (bold gradient direction) */
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 48%, #ec4899 100%);
  --grad-home: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #d946ef);
  --grad-reels: linear-gradient(135deg, #f43f5e, #ec4899);
  --grad-jobs: linear-gradient(135deg, #0ea5e9, #2563eb);
  --grad-groups: linear-gradient(135deg, #10b981, #0d9488);
  --grad-pages: linear-gradient(135deg, #f59e0b, #ea580c);
  --grad-market: linear-gradient(135deg, #fb923c, #f59e0b);
  --grad-gigs: linear-gradient(135deg, #8b5cf6, #d946ef);
  --grad-p2p: linear-gradient(135deg, #06b6d4, #3b82f6);

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 32px rgba(76, 29, 149, 0.10);
  --shadow-lg: 0 22px 60px rgba(76, 29, 149, 0.18);
  --ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

  --topbar-bg: rgba(255, 255, 255, 0.82);
}

/* ---- Dark mode -------------------------------------------------------- */
html.theme-dark {
  --bg: #0a0f1f;
  --bg-soft: #0e1428;
  --card-bg: #151b2e;
  --surface-2: #1a2138;
  --text: #e9ecf7;
  --text-secondary: #9aa4c2;
  --border: #28324e;
  --hover: #1d2540;
  --topbar-bg: rgba(18, 24, 42, 0.82);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* ---- Page canvas ------------------------------------------------------ */
body {
  background:
    radial-gradient(1200px 620px at 102% -12%, rgba(124, 58, 237, 0.16), transparent 60%),
    radial-gradient(900px 520px at -12% -4%, rgba(59, 130, 246, 0.13), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
html.theme-dark body {
  background:
    radial-gradient(1200px 620px at 102% -12%, rgba(124, 58, 237, 0.28), transparent 60%),
    radial-gradient(900px 520px at -12% -4%, rgba(236, 72, 153, 0.16), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- Topbar ----------------------------------------------------------- */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(15, 23, 42, 0.05);
}
.logo-icon {
  background: var(--brand-grad);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.40);
}
.logo-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.logo-word {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.search-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  height: 42px;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.search-box:focus-within { box-shadow: var(--ring); border-color: transparent; }

.nav-link { border-radius: 12px; transition: background 0.18s, color 0.18s, transform 0.18s; }
.nav-link:hover { background: var(--hover); transform: translateY(-1px); }
.nav-link.active {
  color: var(--brand);
  border-bottom: none;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(236, 72, 153, 0.13));
}
.nav-profile-btn:hover { box-shadow: var(--ring); }

/* ---- Buttons ---------------------------------------------------------- */
.btn-share {
  background: var(--brand-grad);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
  border: none;
  transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
}
.btn-share:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(124, 58, 237, 0.45); }
.btn-ghost { border-radius: 12px; }
.btn-fixer { background: var(--surface-2); border: 1px solid var(--border); }
.btn-fixer:hover { background: var(--hover); transform: translateY(-1px); }

/* ---- Cards + sections ------------------------------------------------- */
.card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.content-banner {
  border-radius: var(--r-lg);
  background: var(--grad-home);
  box-shadow: var(--shadow-md);
}
.section-title { font-weight: 800; letter-spacing: -0.01em; }
.section-title i {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(236, 72, 153, 0.14));
  color: var(--brand); font-size: 0.85rem;
}

/* ---- Left sidebar ----------------------------------------------------- */
.sidebar-menu li a { border-radius: 12px; font-weight: 600; }
.sidebar-menu li a:hover { background: var(--hover); }
.sidebar-menu li a i {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--brand);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(236, 72, 153, 0.13));
}
.sidebar-title i { color: var(--brand); }

/* ---- Composer --------------------------------------------------------- */
.post-editor.composer-card { position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.post-editor.composer-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--brand-grad);
}
.composer-title, .create-post-input { border-radius: 12px; }
.post-textarea { font-size: 1.05rem; }
.create-post-input:focus, .composer-title:focus { box-shadow: var(--ring); }

/* Resting state of every composer, Facebook-style: the prompt is a pill and
   the three quick actions sit in a row under it, all of them visible at once.
   Only the writing itself waits for a click - and clicking the pill (or any
   of the three) opens the composer exactly as it was. */
.composer-prompt {
  display: block; width: 100%; margin: 2px 0 6px; padding: 12px 16px;
  border: none; border-radius: 999px; background: var(--surface-2);
  color: var(--text-secondary); font: inherit; font-size: 0.95rem;
  text-align: left; cursor: pointer; transition: background 0.16s ease;
}
.composer-prompt:hover, .composer-prompt:focus-visible { background: var(--hover); outline: none; }
.composer-quick {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 6px 4px; border-top: 1px solid var(--border);
}
.composer-quick-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 6px; border: none; border-radius: 10px; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer; transition: background 0.16s ease;
}
.composer-quick-btn:hover, .composer-quick-btn:focus-visible { background: var(--hover); outline: none; }
.composer-quick-btn i { font-size: 1.05rem; }
.composer-quick-btn.is-photo { color: #16a34a; }
/* Open: the resting row steps aside and the full composer takes over. */
.composer-card.open .composer-prompt,
.composer-card.open .composer-quick { display: none; }
.composer-card:not(.open) .composer-title,
.composer-card:not(.open) .composer-textarea,
.composer-card:not(.open) .composer-actions,
.composer-card:not(.open) #postImgPreview,
.composer-card:not(.open) #pagePostImgPreview,
.composer-card:not(.open) #groupPostImgPreview { display: none !important; }

/* ---- Post cards ------------------------------------------------------- */
.post-card { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.post-author { font-weight: 700; }
.post-media img, .post-media video, .post-media-grid { border-radius: var(--r-md); }
.post-actions { border-top: 1px solid var(--border); padding-top: 6px; }
.like-btn, .comment-toggle { border-radius: 12px; font-weight: 600; transition: background 0.16s, color 0.16s; }
.like-btn:hover, .comment-toggle:hover { background: var(--hover); }
.like-btn.liked, .like-btn.r-love, .like-btn.r-haha, .like-btn.r-wow, .like-btn.r-sad, .like-btn.r-angry { color: var(--brand); }
.post-stats { color: var(--text-secondary); }

/* ---- Alerts ----------------------------------------------------------- */
.alert { border-radius: var(--r-md); }

/* ---- Right rail bits -------------------------------------------------- */
.suggestion, .friend-request { border-radius: var(--r-md); }
.room-row { border-radius: var(--r-sm); }
.room-dot { background: var(--grad-groups); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }

/* ---- Mobile drawer ---------------------------------------------------- */
.mobile-drawer { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.mobile-drawer-title {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Messenger dock --------------------------------------------------- */
.m-bubble {
  background: var(--brand-grad);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}
.m-badge { background: var(--grad-reels); }

/* ---- Footer ----------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: transparent; }

/* ---- Theme toggle ----------------------------------------------------- */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-size: 1.05rem; cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.theme-toggle:hover { background: var(--hover); transform: translateY(-1px); color: var(--brand); }
.theme-toggle .fa-sun { display: none; }
html.theme-dark .theme-toggle .fa-moon { display: none; }
html.theme-dark .theme-toggle .fa-sun { display: inline; }

/* ==================================================================
   Stories bar (Home) — ephemeral status rail
   ================================================================== */
.stories-card, .discover-card { padding: 0; overflow: hidden; margin-bottom: 16px; }
.stories-bar {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.stories-bar::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 78px; text-align: center; cursor: pointer; }
.story-ring {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
  padding: 3px; background: var(--brand-grad);
  transition: transform 0.18s;
}
.story:hover .story-ring { transform: translateY(-2px) scale(1.03); }
.story-ring.seen { background: var(--border); }
.story-ring-inner {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2.5px solid var(--card-bg); overflow: hidden;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.story-ring-inner img { width: 100%; height: 100%; object-fit: cover; }
.story-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.35rem;
}
.story-name {
  margin-top: 7px; font-size: 0.72rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-create .story-ring { background: var(--border); }
.story-create .story-plus {
  position: absolute; right: 3px; bottom: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; border: 2.5px solid var(--card-bg);
}
.story-create .story-ring { position: relative; }

.story-ring.ring-unseen { background: var(--brand-grad); }
.story-ring.ring-seen { background: var(--border); }

/* Story viewer overlay */
.storyview {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(6, 8, 18, 0.94);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.storyview-card {
  position: relative; width: min(420px, 92vw); height: min(760px, 88vh);
  border-radius: 22px; overflow: hidden;
  background: #0b1020;
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.storyview-segs {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3;
  display: flex; gap: 4px;
}
.storyseg { flex: 1; height: 3px; background: rgba(255,255,255,.32); border-radius: 3px; overflow: hidden; }
.storyseg b { display: block; height: 100%; width: 0; background: #fff; transition: width .06s linear; }
.storyview-head {
  position: absolute; top: 24px; left: 14px; right: 58px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .9rem; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.storyview-ava {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .9rem;
  border: 2px solid rgba(255,255,255,.7);
}
.storyview-ava img { width: 100%; height: 100%; object-fit: cover; }
.storyview-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.storyview-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 48px 16px 20px; font-size: .95rem; line-height: 1.4;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
.storyview-tap { position: absolute; top: 0; bottom: 0; z-index: 2; cursor: pointer; }
.storyview-tapleft { left: 0; width: 34%; }
.storyview-tapright { right: 0; width: 66%; }
.storyview-nav {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; pointer-events: none;
}
.storyview-nav button {
  pointer-events: auto; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.2); color: #fff; font-size: 1rem; cursor: pointer;
  backdrop-filter: blur(4px);
}
.storyview-close {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.2); color: #fff; cursor: pointer; backdrop-filter: blur(4px);
}

/* Create-story modal */
.story-modal { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; }
.story-modal[hidden] { display: none; }
.story-modal-backdrop { position: absolute; inset: 0; background: rgba(8,11,22,.7); backdrop-filter: blur(3px); }
.story-modal-box {
  position: relative; width: min(420px, 92vw); max-height: 92vh; overflow-y: auto;
  background: var(--card-bg); border-radius: 20px; padding: 18px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px;
}
.story-modal-head { display: flex; align-items: center; justify-content: space-between; }
.story-modal-head h3 { margin: 0; font-size: 1.05rem; }
.story-modal-x { border: none; background: var(--surface-2); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--text); }
.story-drop {
  display: flex; align-items: center; justify-content: center; height: 240px;
  border-radius: 14px; border: 2px dashed var(--border); background: var(--surface-2);
  overflow: hidden; cursor: pointer;
}
.story-drop img { width: 100%; height: 100%; object-fit: cover; }
.story-drop-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-secondary); text-align: center; padding: 16px; }
.story-drop-hint i { font-size: 1.6rem; color: var(--brand); }
.story-drop-hint small { opacity: .8; }
.story-caption { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.story-submit { border: none; border-radius: 12px; padding: 12px; background: var(--brand-grad); color: #fff; font-weight: 700; cursor: pointer; }
.story-submit:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .storyseg b { transition: none; }
  .story-ring, .nav-link, .btn-share { transition: none; }
}

/* ==================================================================
   Discover chips (Home) — hashtag / trending rail
   ================================================================== */
.discover-rail { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding: 12px 14px; scrollbar-width: none; }
.discover-rail::-webkit-scrollbar { display: none; }
.discover-rail .dr-label { flex: none; font-weight: 800; font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.discover-rail .dr-label i { color: var(--brand); }

/* Discover also carries the posts the feed could not: public posts from
   outside the member's circle, stacked under the chip rail in one block. */
.discover-posts { padding: 0; overflow: hidden; margin-bottom: 16px; }
.discover-posts-head { display: flex; align-items: baseline; gap: 8px; padding: 13px 14px 11px; }
.discover-posts-head .dr-label { font-weight: 800; font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.discover-posts-head .dr-label i { color: var(--brand); }
.discover-posts-sub { font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); }
.discover-post { border-top: 1px solid var(--border); }
.discover-post:first-of-type { border-top: none; }
.discover-post-tag {
  display: flex; align-items: center; gap: 6px; padding: 9px 16px 0;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand);
}
/* The nested card loses its own frame so the block reads as one list. */
.discover-post .post-card { margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; }
.chip {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 0.16s, transform 0.16s, border-color 0.16s;
}
.chip:hover { background: var(--hover); transform: translateY(-1px); border-color: transparent; }
.chip i { color: var(--brand); }
.chip-hot { background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(236, 72, 153, 0.13)); }
.chip-hot i { color: #f43f5e; }

/* ==================================================================
   Dark-mode patches for surfaces styled with a literal white
   ================================================================== */
html.theme-dark .search-results,
html.theme-dark .notif-pop,
html.theme-dark .nav-profile-pop,
html.theme-dark .m-panel,
html.theme-dark .m-panel-head,
html.theme-dark .emoji-pop,
html.theme-dark .reaction-pop,
html.theme-dark .post-menu,
html.theme-dark .react-modal-card,
html.theme-dark .storyview-card { background: var(--card-bg); color: var(--text); }
html.theme-dark .m-search { background: var(--surface-2); }
html.theme-dark .avatar-xl { border-color: var(--card-bg); }
html.theme-dark .story-ring-inner { border-color: var(--card-bg); }
html.theme-dark .story-plus { border-color: var(--card-bg); }
html.theme-dark .post-textarea,
html.theme-dark .composer-title,
html.theme-dark .create-post-input { color: var(--text); }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select { color: var(--text); }
html.theme-dark .empty-state { color: var(--text-secondary); }

/* ==================================================================
   Reels — For You / Following / Trending
   ================================================================== */
.reel-tabs {
  display: flex; gap: 6px; margin: 6px 0 14px;
  background: var(--surface-2); padding: 5px; border-radius: 14px;
  width: max-content; max-width: 100%; overflow-x: auto;
}
.reel-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .88rem;
  color: var(--text-secondary); text-decoration: none; transition: background .16s, color .16s;
}
.reel-tab:hover { color: var(--text); }
.reel-tab.active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.reel-tab.active i { color: var(--brand); }

.reel-sounds {
  display: flex; align-items: center; gap: 8px; overflow-x: auto;
  padding: 10px 12px; margin-bottom: 14px; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  scrollbar-width: none;
}
.reel-sounds::-webkit-scrollbar { display: none; }
.rs-label { flex: 0 0 auto; font-weight: 800; font-size: .8rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .03em; }
.rs-label i { color: #f97316; }
.rs-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--surface-2); color: var(--text); text-decoration: none; border: 1px solid var(--border);
}
.rs-chip i { color: var(--brand); }
.rs-chip em { font-style: normal; opacity: .7; font-size: .75rem; }
.rs-rank { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

.reel-sound {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: none;
}
.reel-sound-filter {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: .88rem;
}
.reel-sound-clear { margin-left: auto; color: var(--text-secondary); text-decoration: none; font-weight: 700; }

.reels-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.reel-tile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; transition: transform .16s, box-shadow .16s;
}
.reel-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.reel-tile-media { position: relative; aspect-ratio: 9 / 14; background: #0b1020; overflow: hidden; }
.reel-tile-media img, .reel-tile-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-tile-rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--brand-grad); color: #fff; font-weight: 800; font-size: .75rem;
  padding: 3px 9px; border-radius: 999px;
}
.reel-tile-plays {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(4px);
}
.reel-tile-plays i { color: #fb923c; }
.reel-tile-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.reel-tile-author { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; }
.reel-tile-caption { font-size: .82rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-tile-sound { font-size: .76rem; color: var(--brand); font-weight: 600; }
.reel-tile-stats { font-size: .76rem; color: var(--text-secondary); }
.reel-tile-stats i { color: #ef4444; }

@media (max-width: 560px) {
  .reels-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-tile { transition: none; }
}

/* ==================================================================
   Section sidebars — sub-labels and nested rows (Buy/Sell categories)
   ================================================================== */
.sidebar-section-label {
  margin: 16px 0 4px; padding: 0 14px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.sidebar-menu-sub a { font-size: .85rem; }
.sidebar-menu-sub a i { font-size: .7rem; opacity: .6; }

/* ==================================================================
   Gigs - marketplace polish (hero search, active filters, cards, empty)
   ================================================================== */
.gigs-hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 26px 26px 22px; margin-bottom: 16px; color: #fff;
  background: var(--grad-gigs); box-shadow: var(--shadow-md);
}
.gigs-hero-glow {
  position: absolute; right: -70px; bottom: -130px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
  pointer-events: none;
}
.gigs-hero-body { position: relative; z-index: 1; max-width: 760px; }
.gigs-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.18); padding: 5px 11px; border-radius: 999px;
}
.gigs-hero-title { margin: 12px 0 6px; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.18; color: #fff; }
.gigs-hero-sub { margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 580px; }
.gigs-hero-search {
  display: flex; gap: 8px; background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 30px rgba(76,29,149,.28);
}
.gigs-hero-search .gigs-search-field { flex: 1; }
.gigs-hero-search .gigs-search-field i { left: 12px; color: #8a93b0; }
.gigs-hero-search .gigs-search-field input {
  border: 0; background: transparent; color: #0f1729; font-size: .95rem; padding-left: 34px;
}
.gigs-hero-search .gigs-search-field input:focus { box-shadow: none; }
.gigs-hero-search .btn-share-primary { padding: 11px 20px; border-radius: 10px; white-space: nowrap; }
.gigs-hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.gigs-hero-tags-label { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.gigs-hero-tag {
  font-size: .8rem; color: #fff; text-decoration: none; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); transition: background .15s ease;
}
.gigs-hero-tag:hover { background: rgba(255,255,255,.32); }
.gigs-hero-stats {
  display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0 0; padding: 14px 0 0;
  list-style: none; border-top: 1px solid rgba(255,255,255,.24);
}
.gigs-hero-stats li { display: flex; align-items: baseline; gap: 6px; font-size: .84rem; color: rgba(255,255,255,.92); }
.gigs-hero-stats strong { font-size: 1.15rem; font-weight: 800; color: #fff; }
.gigs-hero-trust { align-items: center; }
.gigs-hero-trust i { font-size: .88rem; opacity: .92; }

.gigs-activefilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gigs-afilter {
  display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; text-decoration: none;
  padding: 5px 10px 5px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.gigs-afilter:hover { border-color: var(--brand); color: var(--brand); }
.gigs-afilter i { font-size: .66rem; opacity: .7; }

.gig-card { border-radius: var(--r-md); }
.gig-level {
  position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px;
  color: #fff; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(15,23,42,.25);
}
.gig-level-top { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.gig-level-level2 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.gig-level-level1 { background: rgba(15,23,42,.72); }
.gig-rating em { font-style: normal; opacity: .82; }
.gig-price small {
  display: block; font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary);
}
.gig-foot { align-items: flex-end; }
.gig-go {
  margin-left: auto; width: 26px; height: 26px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: .68rem;
  color: var(--brand); background: var(--surface-2);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.gig-card:hover .gig-go { background: var(--brand); color: #fff; transform: translateX(2px); }

.gigs-empty {
  text-align: center; padding: 44px 20px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.gigs-empty-icon {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
  background: var(--grad-gigs); box-shadow: var(--shadow-md);
}
.gigs-empty h2 { margin: 0 0 6px; font-size: 1.15rem; }
.gigs-empty p { margin: 0 auto 18px; max-width: 430px; color: var(--text-secondary); font-size: .9rem; }
.gigs-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Sidebar: collapsible "My Profile" group (Gigs) */
.sidebar-group { padding: 2px 0 6px; }
.sidebar-group-head {
  display: flex; align-items: center; gap: 9px; width: 100%; margin: 10px 0 2px;
  padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: transparent; color: var(--text); font-size: .92rem; font-weight: 800; font-family: inherit;
}
.sidebar-group-head:hover { background: var(--hover); }
.sidebar-group-head > i:first-child { color: var(--brand); font-size: .95rem; width: 20px; text-align: center; }
.sidebar-group-role {
  margin-left: auto; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: var(--brand); background: var(--surface-2);
}
.sidebar-group-caret { margin-left: 8px; font-size: .7rem; color: var(--text-secondary); transition: transform .18s ease; }
.sidebar-group.open .sidebar-group-caret { transform: rotate(180deg); }
.sidebar-group-body {
  display: none; list-style: none; margin: 4px 0 0 20px; padding: 4px 0 0 10px;
  border-left: 2px solid var(--border);
}
.sidebar-group.open .sidebar-group-body { display: block; }

/* Sidebar: buyer <-> seller profile switch */
.gigs-switch-li { padding: 8px 10px 14px; }
.gigs-switch-form { margin: 0; }
.gigs-switch {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 10px; font-size: .85rem; font-weight: 700; text-align: center;
  color: #fff; background: var(--grad-gigs); border: 0; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gigs-switch:hover {
  color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.gigs-switch-link { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.gigs-switch-note { margin: 8px 2px 0; font-size: .7rem; line-height: 1.45; color: var(--text-secondary); }

@media (max-width: 640px) {
  .gigs-hero { padding: 20px 18px; }
  .gigs-hero-search { flex-direction: column; }
  .gigs-hero-search .btn-share-primary { width: 100%; }
  .gigs-hero-stats { gap: 14px 20px; }
}