/* ═══════════════════════════════════════════════════════════
   MR. JHOLE — HOME PAGE STYLES
   Extracted from home.blade.php inline <style> block.
   All home-specific CSS lives here; globals stay in style.css.
═══════════════════════════════════════════════════════════ */

/* ── Skeleton Loading ─────────────────────────────────────── */
.skel {
  border-radius: 10px;
  animation: home-shimmer 1.6s infinite linear;
  background: linear-gradient(
    90deg,
    var(--border-strong) 25%,
    rgba(0,0,0,0.04)     50%,
    var(--border-strong) 75%
  );
  background-size: 200% 100%;
}
@keyframes home-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
[data-theme="dark"] .skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 200% 100%;
}

.section-loader { display: flex; gap: 14px; padding: 0 22px; overflow: hidden; }
.skel-card { width: 190px; height: 284px; flex-shrink: 0; border-radius: 22px; }

.skel-timeout-msg {
  display: none;
  padding: 24px; text-align: center;
  color: var(--text-muted); font-size: .85rem;
}
.skel-timeout-msg button {
  background: none; border: none; color: var(--primary);
  font-weight: 700; cursor: pointer; font-family: inherit;
  font-size: .85rem; padding: 0; margin-left: 4px;
}

/* ── Search Spinner ────────────────────────────────────────── */
.slot-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--primary);
  animation: slot-spin .7s linear infinite;
}
@keyframes slot-spin { to { transform: rotate(360deg); } }

/* ── Search Results Overlay ────────────────────────────────── */
#search-results-overlay {
  position: fixed;
  top: 60px;
  left:  calc(max(0px, (100vw - 1300px) / 2) + var(--nav-width));
  right: calc(max(0px, (100vw - 1300px) / 2) + var(--right-width));
  bottom: 0;
  background: #fef6f8 !important;
  z-index: 95;
  display: none;
  overflow-y: auto;
  padding: 22px 24px;
  border-left: 0.5px solid var(--border-strong);
  border-right: 0.5px solid var(--border-strong);
  border-radius: 16px;
  overflow-x: hidden;
}
#search-results-list { background: #fef6f8; }
@media (max-width: 1100px) { #search-results-overlay { right: 0; } }
@media (max-width: 860px)  { #search-results-overlay { left: 72px; } }
@media (max-width: 600px)  {
  #search-results-overlay { left: 0; padding: 16px; top: calc(60px + env(safe-area-inset-top, 0px)); }
}
[data-theme="dark"] #search-results-overlay { background: #1D212B !important; }
#search-results-overlay.open { display: block; }

.search-overlay-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border-strong);
}
.search-overlay-head h2 { font-weight: 800; font-size: .95rem; color: var(--text); }
.search-close-btn {
  border: none; background: var(--bg-main); color: var(--primary);
  font-weight: 700; cursor: pointer; font-size: .78rem;
  padding: 6px 14px; border-radius: 20px; font-family: inherit;
  transition: background .15s, color .15s;
}
.search-close-btn:hover { background: var(--primary); color: #fff; }

/* Search result items */
.result-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 8px 6px;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-muted);
  border-top: 0.5px solid var(--border-strong); margin-top: 6px;
}
.result-group-header:first-child { border-top: none; margin-top: 0; }
.result-group-header .rg-badge {
  font-size: .62rem; font-weight: 800; padding: 2px 9px;
  border-radius: 12px; text-transform: none; letter-spacing: 0;
}
.result-item {
  display: flex; gap: 12px; padding: 9px 10px;
  border-radius: 14px; text-decoration: none;
  color: inherit; transition: background .12s; cursor: pointer;
}
.result-item:hover { background: var(--bg-main); }
.result-thumb {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; overflow: hidden;
}
.result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.result-body { flex: 1; min-width: 0; }
.result-title { font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.result-detail { font-size: .76rem; font-weight: 800; margin-top: 2px; }
.result-meta   { font-size: .70rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.search-empty i { font-size: 2.4rem; opacity: .18; display: block; margin-bottom: 12px; }
.search-empty p { font-weight: 700; font-size: .92rem; color: var(--text); }

/* ── Topbar Home ───────────────────────────────────────────── */
.topbar-home { gap: 10px; }
.search-home { max-width: none; margin: 0; flex: 1; }

/* Location pill */
.loc-pill {
  display: flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid rgba(0,0,0,0.10);
  border-radius: 99px; padding: 6px 12px;
  font-size: .8rem; font-weight: 500; color: #111;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* ⌘K search badge — inside the search-wrap absolutely */
.search-kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.06); border-radius: 5px;
  padding: 1px 6px; font-size: .66rem; color: #9ca3af;
  font-family: monospace; border: none; pointer-events: none;
}
/* Add right padding to input so text doesn't overlap kbd */
.search-home .search-input { padding-right: 48px; }

/* ── Hero Components ───────────────────────────────────────── */

/* Eyebrow label above greeting */
.hero-eyebrow {
  font-size: .60rem; font-weight: 800; color: rgba(255,255,255,.58);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 1px; line-height: 1;
}

/* Feature strip row below main hero row */
.hero-feature-strip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.hft-item {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.80); font-size: .72rem; font-weight: 600;
  text-decoration: none; padding: 4px 11px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
  transition: background .18s, transform .18s var(--ease);
}
.hft-item:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); }
.hft-item i { font-size: .65rem; opacity: .82; }
.hft-sep { color: rgba(255,255,255,.25); font-size: .78rem; line-height: 1; margin: 0 1px; }

@media (max-width: 480px) {
  .hero-feature-strip { gap: 4px; }
  .hft-item { font-size: .68rem; padding: 4px 10px; }
  .hft-sep  { display: none; }
}

.hero-avatar-wrap {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.58);
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem; color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  overflow: hidden; text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .2s;
}
.hero-avatar-wrap:hover { transform: scale(1.09); box-shadow: 0 10px 28px rgba(0,0,0,.38); }
.hero-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.hero-avatar-wrap img.loaded { opacity: 1; }

.hero-text { flex: 1; min-width: 0; }
.hero-title { font-weight: 900; font-size: 1.58rem; color: #fff; margin: 0; letter-spacing: -.8px; line-height: 1.1; }
.hero-sub   { font-size: .76rem; color: rgba(255,255,255,.78); margin-top: 4px; font-weight: 500; letter-spacing: .01em; }

.hero-badges { display: flex; gap: 8px; flex-shrink: 0; }
.hero-stat-pill {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px; padding: 11px 14px; min-width: 64px; text-align: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), background .18s;
}
.hero-stat-pill:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.hero-stat-pill i { font-size: 1rem; margin-bottom: 3px; }
.hero-stat-pill.points i { color: #FCD34D; }
.hero-stat-pill.streak i { color: #FCA5A5; }
.hsp-val { font-size: 1.05rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.5px; }
.hsp-tag { font-size: .52rem; font-weight: 800; color: rgba(255,255,255,.74); text-transform: uppercase; letter-spacing: .9px; margin-top: 3px; }

/* ── Stats Bar (desktop only) ──────────────────────────────── */
.stats-bar {
  display: flex; gap: 6px; padding: 10px 22px 9px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--bg-card); border-bottom: 0.5px solid var(--border-strong);
}
.stats-bar::-webkit-scrollbar { display: none; }

.stat-pill {
  background: var(--bg-main);
  border: 1.5px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  padding: 6px 14px; border-radius: 50px;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  cursor: default;
  transition: border-color .18s, background .18s, transform .2s var(--ease);
}
.stat-pill:hover { border-color: rgba(200,16,46,.3); background: var(--primary-soft); transform: translateY(-1px); }
.stat-pill strong { font-weight: 900; color: var(--text); font-size: .88rem; }
.stat-pill .s-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.s-dot { display: none; }

.stat-pill-locked {
  background: var(--bg-main); border: 1.5px dashed var(--border-strong);
  cursor: pointer; font-family: inherit;
  transition: border-color .18s, background .18s, transform .2s var(--ease);
}
.stat-pill-locked:hover { border-color: #f59e0b; background: #fffbeb; transform: translateY(-1px); }
@media (max-width: 600px) { .stats-bar { display: none; } }

/* ── Section Subtitle ──────────────────────────────────────── */
.sh-sub { font-size: .72rem; color: var(--text-muted); font-weight: 500; margin-top: 3px; line-height: 1.45; }
.feed .section-head {
  align-items: flex-start;
  padding: 8px 18px 4px;
  border-top: none;
  margin-top: 4px;
}
#recommended-section .section-head,
#sec-pasal.section-head { border-top: none; margin-top: 0; padding-top: 14px; margin-left: 10px; }

/* ── Section head icon bar — removed on home page ──────────── */
.section-head > div:first-child {
  padding-left: 0;
}
.section-head > div:first-child::before {
  content: none;
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* ── Live Dot ──────────────────────────────────────────────── */
.live-dot {
  width: 7px; height: 7px; background: var(--primary);
  border-radius: 50%; animation: pulse-red-dot 2s infinite; flex-shrink: 0;
}
@keyframes pulse-red-dot {
  0%   { transform: scale(.9);  box-shadow: 0 0 0 0 rgba(200,16,46,.6); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 7px rgba(200,16,46,0); }
  100% { transform: scale(.9);  box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}

/* ── Feed List ─────────────────────────────────────────────── */
.section-feed-list { padding: 0 22px 24px; display: flex; flex-direction: column; gap: 10px; }

/* ── Radar Home Card ───────────────────────────────────────── */
.radar-home-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), box-shadow .18s, border-color .18s;
}
.radar-home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(5,150,105,.2); }
.rh-icon {
  width: 46px; height: 46px; border-radius: 13px; background: #F0FDF4;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #059669; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(5,150,105,.12);
  transition: transform .2s var(--ease);
}
.radar-home-card:hover .rh-icon { transform: scale(1.1) rotate(-5deg); }
.rh-body { flex: 1; min-width: 0; }
.rh-title { font-weight: 800; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.rh-meta  { font-size: .70rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
.rh-discount {
  font-size: .66rem; font-weight: 800; padding: 4px 11px; border-radius: 20px;
  background: #dcfce7; color: #059669; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(5,150,105,.15);
}

/* ── Bhariya Home Card ─────────────────────────────────────── */
.bhariya-home-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-left: 4px solid #fdba74;
  border-radius: 18px; padding: 14px 16px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), box-shadow .18s;
}
.bhariya-home-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(249,115,22,.14), var(--shadow-sm); }
.bh-home-icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--orange-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--orange-deep); flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.bh-home-icon.offer { background: var(--purple-soft); color: var(--purple); }
.bhariya-home-card:hover .bh-home-icon { transform: scale(1.1) rotate(-4deg); }
.bh-home-body  { flex: 1; min-width: 0; }
.bh-home-title { font-weight: 800; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-home-meta  { font-size: .70rem; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
.bh-home-badge { font-size: .66rem; font-weight: 800; padding: 4px 11px; border-radius: 20px; background: var(--orange-soft); color: var(--orange-deep); white-space: nowrap; flex-shrink: 0; }
.bh-home-bids  { font-size: .62rem; color: var(--text-muted); font-weight: 600; }
.bh-home-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

/* ── Leaderboard Rows ──────────────────────────────────────── */
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: background .15s;
}
.lb-row:hover  { background: var(--bg-main); }
.lb-row.lb-me  { background: var(--primary-soft); outline: 1.5px solid rgba(200,16,46,.14); border-radius: 12px; }
.lb-rank       { width: 22px; text-align: center; font-size: .82rem; font-weight: 900; flex-shrink: 0; }
.lb-avatar     {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg-main);
  border: 2px solid var(--border-strong); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .72rem; flex-shrink: 0;
}
.lb-av-me  { background: var(--primary); border-color: var(--primary); color: #fff; }
.lb-info   { flex: 1; min-width: 0; }
.lb-name   { font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you    { color: var(--primary); font-size: .64rem; font-weight: 700; }
.lb-pts    { font-size: .68rem; color: var(--gold-deep); font-weight: 800; margin-top: 1px; }

/* ── Hero Carousel (welcome banner) ──────────────────────────
   Photo-free "ambient" hero: layered brand-colored glows behind
   a dark scrim, matching the crimson→violet scene on the login
   page. Three slides, auto-rotating, dot navigation. ────────── */
.hero-carousel {
  margin: 14px 16px 0;
  border-radius: 20px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: opacity .3s, transform .3s;
  background: #17101a;
}
.hero-track {
  display: flex; width: 300%;
  transition: transform .5s var(--ease-smooth);
}
.hero-slide {
  width: 33.333%; flex-shrink: 0;
  padding: 30px 26px 26px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 210px;
}
.hero-slide-a { background:
  radial-gradient(560px 260px at 12% -10%, rgba(200,16,46,.55) 0%, transparent 62%),
  radial-gradient(480px 260px at 92% 105%, rgba(124,58,237,.45) 0%, transparent 60%),
  #17101a; }
.hero-slide-b { background:
  radial-gradient(560px 260px at 8% -10%, rgba(200,16,46,.55) 0%, transparent 62%),
  radial-gradient(480px 260px at 95% 105%, rgba(244,180,0,.40) 0%, transparent 60%),
  #191108; }
.hero-slide-c { background:
  radial-gradient(560px 260px at 10% -10%, rgba(124,58,237,.50) 0%, transparent 62%),
  radial-gradient(480px 260px at 92% 105%, rgba(34,197,94,.30) 0%, transparent 60%),
  #10141a; }
.hero-slide::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 75%);
}
.hc-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; margin-bottom: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
}
.hc-eyebrow {
  font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.68); margin-bottom: 8px;
}
.hc-title { font-weight: 900; font-size: 1.28rem; color: #fff; margin-bottom: 8px; letter-spacing: -.4px; line-height: 1.2; }
.hc-body  { font-size: .85rem; color: rgba(255,255,255,.78); line-height: 1.6; margin-bottom: 18px; max-width: 440px; }
.hc-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.hc-btn {
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .8rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .18s var(--ease), box-shadow .18s;
}
.hc-btn.primary {
  background: #fff; color: #17101a; box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.hc-btn.primary:hover  { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); }
.hc-btn.secondary {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1.5px solid rgba(255,255,255,.28);
}
.hc-btn.secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }

.welcome-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; border: none;
  background: rgba(255,255,255,.14); width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; color: #fff; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.welcome-close:hover { background: rgba(255,255,255,.26); }

.hero-dots {
  position: absolute; left: 26px; bottom: 16px; z-index: 2;
  display: flex; gap: 6px;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background .2s, width .25s var(--ease-out);
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.active { width: 20px; border-radius: 4px; background: #fff; }

/* ── Local Buzz Button ─────────────────────────────────────── */
.radar-pulse {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-card); border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 8px 15px;
  text-decoration: none; color: var(--text);
  font-size: .82rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-spring);
}
.radar-pulse:hover  { border-color: rgba(200,16,46,.3); background: var(--primary-soft); color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.radar-pulse:active { transform: translateY(1px); box-shadow: none; }
.rp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  flex-shrink: 0; box-shadow: 0 0 0 2px rgba(34,197,94,.25);
  animation: rp-pulse 2.5s ease-in-out infinite;
}
@keyframes rp-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  60%     { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
@media (max-width: 780px) { .rp-label { display: none; } .radar-pulse { padding: 9px 11px; } }

/* ── Post Button + Dropdown ────────────────────────────────── */
.topbar-post-wrap { position: relative; flex-shrink: 0; }
.topbar-ai-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: .95rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(124,58,237,.32);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.topbar-ai-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 18px rgba(124,58,237,.45); }
.topbar-ai-btn:active { transform: scale(.94); }
@media (max-width: 600px) { .topbar-ai-btn { display: none; } }
.topbar-post-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--primary);
  color: #fff; border: none;
  border-bottom: 3px solid var(--primary-active);
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-size: .84rem; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-red);
  transition: transform var(--transition-bounce), box-shadow var(--transition);
  white-space: nowrap; position: relative; overflow: hidden;
}
.topbar-post-btn::after {
  content: ''; position: absolute; top: -50%; left: -60%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); transition: left .5s var(--ease-smooth);
}
.topbar-post-btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-red-lg); }
.topbar-post-btn:hover::after { left: 130%; }
.topbar-post-btn:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: var(--shadow-xs); }
@media (max-width: 600px) { .topbar-post-btn span { display: none; } .topbar-post-btn { padding: 9px 13px; } }

.topbar-post-menu {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  background: #fef6f8; border: 1px solid var(--border-card);
  border-radius: 20px; overflow: hidden; z-index: 500; min-width: 250px;
  box-shadow: var(--shadow-lg); transform-origin: top right;
  animation: dropdown-pop .2s var(--ease-spring);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.topbar-post-menu.open { display: block; }
@keyframes dropdown-pop {
  from { opacity: 0; transform: scale(.92) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.tpm-item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px; text-decoration: none; color: var(--text);
  border-bottom: 0.5px solid var(--border-strong); transition: background .12s;
}
.tpm-item:last-child { border-bottom: none; }
.tpm-item:hover { background: var(--bg-main); }
.tpm-item i { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.tpm-item div { display: flex; flex-direction: column; gap: 1px; }
.tpm-item strong { font-size: .85rem; font-weight: 700; color: var(--text); }
.tpm-item span   { font-size: .68rem; color: var(--text-muted); }
.tpm-pasal   i { background: #FEF2F2; color: var(--primary); }
.tpm-boli    i { background: #FFFBEB; color: #B45309; }
.tpm-tank    i { background: var(--blue-soft); color: var(--blue); }
.tpm-bhariya i { background: var(--orange-soft); color: var(--orange-deep); }
.tpm-locked  { background: none; border: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; border-bottom: 0.5px solid var(--border-strong); }
.tpm-locked:last-child { border-bottom: none; }
.tpm-locked:hover { background: var(--bg-main); }
.tpm-locked-icon-opacity  { opacity: .48; }
.tpm-locked-label-opacity { opacity: .48; }
.tpm-unlocking-soon { color: #f59e0b !important; font-weight: 700 !important; font-size: .68rem; }

/* ── Sidebar Widget Density Overrides ──────────────────────── */
.widget             { margin-bottom: 10px; padding: 12px 14px; box-shadow: none; }
.widget:hover        { box-shadow: none; }
.vault-card          { box-shadow: none !important; }
.vault-card:hover     { box-shadow: none !important; }
.right               { gap: unset; padding-left: 6px; }
.widget-title       { margin-bottom: 10px; font-size: .8rem; }
#live-activity-list { max-height: none !important; }
.activity-item      { padding: 4px 0; margin-bottom: 2px; }
.activity-icon      { width: 28px; height: 28px; font-size: .75rem; }
.activity-content   { font-size: .72rem; }
.activity-time      { font-size: .62rem; }
.trend-item         { padding: 6px; margin-bottom: 4px; }
.trend-thumb        { width: 32px; height: 32px; font-size: .8rem; }
.trend-label        { font-size: .6rem; }
.trend-name         { font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.trend-meta         { font-size: .65rem; }
.lb-row             { padding: 5px 7px; }
.lb-avatar          { width: 30px; height: 30px; font-size: .66rem; }
.lb-name            { font-size: .76rem; }
.lb-pts             { font-size: .63rem; }

.widget-title-row   { display: flex; align-items: center; gap: 8px; }
.widget-title-space { display: flex; align-items: center; justify-content: space-between; }
.widget-period-badge { font-size: .65rem; font-weight: 700; color: var(--text-muted); background: var(--bg-main); padding: 2px 8px; border-radius: 10px; }
.widget-skel-list   { display: flex; flex-direction: column; gap: 4px; }
.widget-trend-list  { display: flex; flex-direction: column; gap: 2px; }
.widget-lb-list     { display: flex; flex-direction: column; gap: 4px; }
.widget-view-all    { display: block; text-align: center; font-size: .65rem; font-weight: 700; color: var(--text-muted); text-decoration: none; margin-top: 6px; transition: color .15s; }
.widget-view-all:hover { color: var(--primary); }

/* ── Coming Soon Section ───────────────────────────────────── */
.coming-soon-header {
  padding: 0 32px; margin-bottom: 8px; margin-top: 10px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.coming-soon-title { font-size: .92rem; font-weight: 900; color: var(--text); margin: 0; letter-spacing: -.3px; }
.coming-soon-sub   { font-size: .7rem; color: var(--text-muted); margin: 3px 0 0; }
.coming-soon-badge { font-size: .62rem; font-weight: 800; color: #d97706; background: #fef3c7; padding: 4px 11px; border-radius: 20px; border: 1px solid #fde68a; white-space: nowrap; margin-top: 3px; }
.coming-soon-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; padding: 0 22px 28px; }

/* ── Locked Feature Cards ──────────────────────────────────── */
.locked-feat-card {
  border-radius: 18px; padding: 18px 16px; text-align: left;
  cursor: pointer; font-family: inherit;
  transition: transform .22s var(--ease), box-shadow .2s;
  position: relative; overflow: hidden; border: 1.5px solid transparent;
}
.locked-feat-card:hover { transform: translateY(-4px); }
.locked-feat-icon-wrap { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.locked-feat-icon  { opacity: .52; filter: blur(1px); font-size: 1rem; }
.locked-feat-name  { font-weight: 800; font-size: .84rem; color: var(--text); margin-bottom: 4px; }
.locked-feat-hint  { font-size: .68rem; color: var(--text-muted); line-height: 1.45; }
.locked-feat-pulse { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; animation: nl-pulse-anim 2.2s infinite; }
.locked-feat-soon  { position: absolute; bottom: 11px; right: 12px; font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* ── Guff Teaser Card ──────────────────────────────────────── */
.guff-teaser-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #f3e8ff, #ede9fe);
  border: 1.5px solid #c4b5fd; border-radius: 20px; padding: 18px;
  text-decoration: none; color: inherit;
  box-shadow: 0 4px 16px rgba(124,58,237,.10);
  transition: transform .2s var(--ease), box-shadow .18s;
}
.guff-teaser-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(124,58,237,.20); }
.guff-teaser-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-radius: 15px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
  transition: transform .2s var(--ease);
}
.guff-teaser-card:hover .guff-teaser-icon { transform: scale(1.1) rotate(-6deg); }
.guff-teaser-body  { flex: 1; }
.guff-teaser-title { font-weight: 900; font-size: .92rem; color: #4c1d95; letter-spacing: -.3px; }
.guff-teaser-sub   { font-size: .74rem; color: #6d28d9; margin-top: 3px; opacity: .85; }
.guff-teaser-live  { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.guff-live-label   { font-size: .72rem; font-weight: 700; color: #7c3aed; }

/* ── Image blur-up ─────────────────────────────────────────── */
.img-blurup         { opacity: 0; transition: opacity .4s ease; }
.img-blurup.loaded  { opacity: 1; }

/* ── Mobile Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
  .section-loader     { padding: 0 12px; gap: 10px; }
  .skel-card          { width: 160px; height: 220px; border-radius: 18px; }
  .section-feed-list  { padding: 0 12px 20px; }
  .coming-soon-header { padding: 0 12px; }
  .coming-soon-grid   { padding: 0 8px 22px; gap: 8px; }
  .hero-carousel      { margin: 10px 8px 0; }
  .hero-slide         { padding: 22px 18px 20px; min-height: 190px; }
  .hc-title           { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .hero-title     { font-size: 1.22rem; letter-spacing: -.5px; }
  .home-hero      { padding: 14px 14px 12px; gap: 10px; }
  .hero-main-row  { gap: 10px; }
  .hero-stat-pill { padding: 7px 9px; min-width: 50px; }
  .hsp-val        { font-size: .88rem; }
  .hero-badges    { gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   NEW LAYOUT — hero action row, category tabs, quest, online
═══════════════════════════════════════════════════════════ */

/* ── Hero "What's happening" action row ────────────────────── */
.hero-whats-happening { position: relative; z-index: 1; }
.hero-whats-label {
  font-size: .68rem; font-weight: 700;
  color: rgba(255,255,255,.62); margin-bottom: 10px;
  letter-spacing: .15px;
}
.hero-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: 50px;
  font-size: .8rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
  transition: transform .2s var(--ease), box-shadow .18s, filter .18s;
}
.hero-action-btn:hover  { transform: translateY(-2px); filter: brightness(1.08); }
.hero-action-btn:active { transform: translateY(1px); }
.hero-action-btn i { font-size: .82rem; }

.ha-sell  { background: rgba(255,255,255,.95); color: #C8102E; box-shadow: 0 4px 14px rgba(0,0,0,.20); }
.ha-deal  { background: rgba(5,150,105,.88);   color: #fff;    box-shadow: 0 4px 14px rgba(5,150,105,.30); }
.ha-ask   { background: rgba(124,58,237,.88);  color: #fff;    box-shadow: 0 4px 14px rgba(124,58,237,.28); }
.ha-share { background: rgba(37,99,235,.88);   color: #fff;    box-shadow: 0 4px 14px rgba(37,99,235,.28); }

@media (max-width: 600px) {
  .hero-action-btn span { display: none; }
  .hero-action-btn { padding: 10px 13px; border-radius: 50%; min-width: 42px; justify-content: center; }
  .hero-action-row { gap: 6px; }
}

/* ── Category Tabs — pill style (blueprint) ──────────── */
.cat-tabs {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 18px 10px;
  overflow-x: auto; scrollbar-width: none;
  background: transparent;
  border-bottom: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  font-size: .8rem; font-weight: 500; white-space: nowrap;
  cursor: pointer; flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 99px;
  background: none; color: #4b5563;
  text-decoration: none; font-family: inherit;
  transition: all .13s;
}
.cat-tab:hover { background: rgba(0,0,0,0.05); }
.cat-tab.active {
  background: #111827; color: #fff;
  border-color: #111827; font-weight: 600;
}
.cat-tab-locked { opacity: .6; cursor: pointer; }
.cat-tab-locked:hover { opacity: .85; background: rgba(0,0,0,.05); }
.cat-tab-mystery { color: #ec4899 !important; }
.ct-lock { font-size: .42rem !important; opacity: .65; margin-left: 1px; }
.cat-tab-more { color: #9ca3af; }

/* ── Daily Quest Widget ─────────────────────────────────────── */
.quest-xp-badge {
  font-size: .62rem; font-weight: 800;
  color: var(--gold-deep); background: var(--gold-soft);
  padding: 2px 9px; border-radius: 20px;
  border: 1px solid rgba(212,154,0,.2);
}
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest-item { display: flex; align-items: center; gap: 10px; }

/* Colored icon tiles */
.quest-tile {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
}
.quest-tile-1 { background: #FEE2E2; color: var(--primary); }
.quest-tile-2 { background: #D1FAE5; color: #059669; }
.quest-tile-3 { background: #DBEAFE; color: #2563EB; }
.quest-tile.quest-done-tile {
  background: var(--green); color: #fff; font-size: .76rem;
}

.quest-body { flex: 1; min-width: 0; }
.quest-label { font-size: .74rem; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.quest-done .quest-label { color: var(--text-muted); text-decoration: line-through; }
.quest-bar-wrap { height: 4px; background: var(--border-strong); border-radius: 10px; overflow: hidden; }
.quest-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-deep) 100%);
  border-radius: 10px; transition: width .6s var(--ease-smooth);
  width: 0;
}
.quest-bar-empty { width: 0 !important; }
.quest-pts { font-size: .62rem; font-weight: 800; color: var(--gold-deep); white-space: nowrap; flex-shrink: 0; }

/* ── Who's Online Widget — horizontal avatar row ─────────── */
.online-list {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.online-user {
  position: relative; flex-shrink: 0;
}
.online-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .66rem;
  border: 2.5px solid var(--bg-card);
  cursor: default;
  transition: transform .18s var(--ease);
  box-shadow: 0 2px 6px rgba(200,16,46,0.25);
}
.online-avatar:hover { transform: scale(1.12); }
/* Hide text info — just show avatar circles */
.online-info  { display: none; }
.online-green-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 9px; height: 9px; background: var(--green); border-radius: 50%;
  border: 2px solid var(--bg-card);
  animation: rp-pulse 2.5s ease-in-out infinite;
}
.online-more-badge {
  width: 38px; height: 38px; border-radius: 50%;
  background: #EEEDF1; border: 2.5px solid var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 900; color: var(--text-muted);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   COMPOSE CARD — replaces red gradient hero
═══════════════════════════════════════════════════════════ */
.home-compose {
  background: var(--bg-card);
  border: none;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.05);
  margin: 14px 18px 0;
  padding: 13px 14px;
}
.compose-top-row {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.compose-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem; text-decoration: none;
  overflow: hidden; transition: transform .18s var(--ease);
}
.compose-av:hover { transform: scale(1.06); }
.compose-av img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.compose-av img.loaded { opacity: 1; }
.compose-input-mock {
  flex: 1;
  font-size: .96rem; font-weight: 500; color: #9ca3af;
  cursor: text;
}
.compose-action-row {
  display: flex; gap: 7px; flex-wrap: wrap;
}
.compose-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 99px;
  font-size: .76rem; font-weight: 500; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
  transition: opacity .13s;
  white-space: nowrap; flex-shrink: 0;
}
.compose-action-btn:hover  { opacity: .8; }
.ca-sell  { background: rgba(220,32,32,.1);  color: #dc2020; }
.ca-deal  { background: rgba(34,197,94,.1);  color: #15803d; }
.ca-ask   { background: rgba(59,130,246,.1); color: #1d4ed8; }
.ca-share { background: rgba(251,146,60,.1); color: #c2410c; }

@media (max-width: 600px) {
  .home-compose { padding: 12px; }
  .compose-action-btn span { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP FLOATING DOCK (mockup) — centered bottom pill
═══════════════════════════════════════════════════════════ */
.home-dock {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(255,255,255,0.6);
  z-index: 900;
}
.dock-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 74px; padding: 6px 10px; border-radius: 16px;
  text-decoration: none; color: #6b7280;
  font-size: .68rem; font-weight: 700;
  transition: color .15s, background .15s, transform .15s;
}
.dock-item i { font-size: 1.12rem; }
.dock-item:hover { color: var(--primary); transform: translateY(-2px); }
.dock-item.active { color: var(--primary); }
.dock-plus {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; font-size: 1.3rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(200,16,46,0.42);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.dock-plus:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(200,16,46,0.55); }
.dock-plus:active { transform: scale(.93); }
[data-theme="dark"] .home-dock { background: rgba(28,30,38,0.9); border-color: rgba(255,255,255,0.08); }
/* Desktop dock removed — it duplicated the left sidebar nav and floated over feed
   content. Sidebar + top "Post" button already cover all of its actions. */
.home-dock { display: none; }

/* ═══════════════════════════════════════════════════════════
   TIMELINE FEED — vertical card layout (mockup style)
   Header → large rounded inset image (overlays) → info → actions
═══════════════════════════════════════════════════════════ */
.timeline-feed {
  display: flex; flex-direction: column;
  gap: 14px; padding: 6px 18px 24px;
}
.tl-skel-item {
  height: 360px; border-radius: 18px;
}

.timeline-post {
  display: block; text-decoration: none; color: inherit;
  /* Frosted glass — solid fallback first, then glass where supported */
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(80,30,50,0.05), 0 8px 26px rgba(80,30,50,0.10);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .timeline-post {
    /* Single blur layer + saturation boost so the card reads bright, not dim */
    background: rgba(255,255,255,0.62);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }
}
.timeline-post:hover {
  box-shadow: 0 10px 34px rgba(80,30,50,0.16);
  transform: translateY(-2px);
}
[data-theme="dark"] .timeline-post {
  background: rgba(29,33,43,0.92);
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 26px rgba(0,0,0,0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .timeline-post {
    background: rgba(29,33,43,0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
}
/* Budget-device guard: drop the blur on small screens to keep scroll smooth */
@media (max-width: 640px) {
  .timeline-post {
    background: #ffffff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  [data-theme="dark"] .timeline-post { background: #1d212b; }
}

/* Header row */
.tl-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 7px;
}
.tl-av {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
  box-shadow: 0 3px 10px rgba(200,16,46,.22);
}
.tl-av-radar {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 3px 10px rgba(16,185,129,.24);
}
.tl-meta { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.35; }
.tl-poster { font-weight: 800; color: var(--text); }
.tl-action-txt { color: var(--text-muted); font-weight: 500; }
.tl-time { color: var(--text-faint); font-size: .82rem; }
.tl-more {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 5px 8px; border-radius: 8px;
  font-size: 1rem; align-self: flex-start;
  transition: background .12s, color .12s;
}
.tl-more:hover { background: var(--bg-main); color: var(--text); }

/* Body — horizontal row: fixed rounded image left, info right */
.tl-body {
  display: flex; gap: 18px;
  padding: 0 16px;
  align-items: center;
}
.tl-img {
  position: relative;
  width: 250px; flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: #eef0f3;
  display: flex; align-items: center; justify-content: center;
}
.tl-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.tl-img img.loaded { opacity: 1; }
.tl-img-icon { font-size: 3rem; color: var(--text-faint); }
.tl-img-radar {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #059669; font-size: 2.8rem;
}

/* Condition tag — top-left chip on image */
.tl-cond-tag {
  position: absolute; top: 11px; left: 11px;
  font-size: .6rem; font-weight: 900; padding: 4px 10px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: .5px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.tl-cond-new         { background: rgba(220,252,231,.94); color: #059669; }
.tl-cond-used        { background: rgba(255,255,255,.94);  color: #4b5563; }
.tl-cond-refurbished { background: rgba(219,234,254,.94); color: #2563eb; }
.tl-cond-deal        { background: rgba(254,226,226,.94); color: #b91c1c; }

/* Bookmark — top-right button on image */
.tl-img-save {
  position: absolute; top: 9px; right: 9px;
  width: 29px; height: 29px; border-radius: 9px; border: none;
  background: rgba(255,255,255,.92); color: #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; box-shadow: 0 2px 8px rgba(0,0,0,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .15s, color .15s, transform .15s;
}
.tl-img-save:hover { background: #fff; color: var(--primary); transform: scale(1.08); }
.tl-img-save.saved { color: var(--primary); }

/* Price — pill overlay on image bottom-left (Pasal listings) */
.tl-price-overlay {
  position: absolute; left: 9px; bottom: 9px;
  background: rgba(255,255,255,.95); color: #0f172a;
  font-weight: 800; font-size: .84rem; letter-spacing: -.2px;
  padding: 5px 10px; border-radius: 9px;
  box-shadow: 0 3px 10px rgba(0,0,0,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Info column — right side of the image */
.tl-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 2px 0;
}
/* Meta row (location · condition · spec chips) */
.tl-meta-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: .76rem; color: var(--text-muted); font-weight: 500;
  margin-top: 1px;
}
.tl-meta-row .tl-loc { margin: 0; }
.tl-meta-dot { color: var(--text-faint); }
.tl-spec-chip {
  font-size: .68rem; font-weight: 700; padding: 2px 9px;
  background: var(--bg-main); color: var(--text-muted); border-radius: 7px;
}
.tl-badge {
  display: inline-flex; align-items: center;
  font-size: var(--card-badge-size); font-weight: 900; padding: 4px 10px;
  border-radius: 7px; letter-spacing: .6px; align-self: flex-start;
}
.tl-badge-sale { background: #dcfce7; color: #166534; }
.tl-badge-deal { background: #f3e8ff; color: #7c3aed; }
.tl-title {
  font-weight: var(--card-title-weight); font-size: var(--card-title-size); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.3px; line-height: 1.3;
}
.tl-desc {
  font-size: var(--card-desc-size); color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tl-loc {
  font-size: var(--card-loc-size); color: var(--text-muted); font-weight: 500;
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.tl-loc i { color: var(--text-faint); }
.tl-price {
  font-size: var(--card-price-size); font-weight: var(--card-price-weight);
  color: var(--card-price-color); letter-spacing: -.3px;
}
.tl-price-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.tl-orig-price { font-size: .86rem; color: var(--text-muted); text-decoration: line-through; }
.tl-discount-chip {
  font-size: var(--card-badge-size); font-weight: 800; padding: 2px 8px;
  background: #fee2e2; color: #b91c1c; border-radius: 8px;
}

/* Footer actions */
.tl-actions {
  display: flex; align-items: center; gap: 24px;
  padding: 7px 16px 9px;
  border-top: 1px solid rgba(0,0,0,0.035);
  margin-top: 12px;
}
.tl-act {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: #6b7280;
  font-family: inherit; transition: color .13s, transform .13s;
}
.tl-act i { font-size: .84rem; }
.tl-act:hover { color: var(--primary); }
.tl-act:active { transform: scale(.92); }
.tl-act-like.liked { color: #e0203e; }
.tl-act-like.liked i { color: #e0203e; }
.tl-act-more { margin-left: auto; }
.tl-act-share { margin-left: auto; }

@media (max-width: 600px) {
  .timeline-feed { gap: 11px; padding: 4px 10px 14px; }
  .timeline-post { border-radius: 16px; }
  .tl-header { padding: 13px 13px 9px; }
  .tl-body { padding: 0 13px; gap: 11px; }
  .tl-img { width: 132px; aspect-ratio: 1 / 1; border-radius: 12px; }
  .tl-actions { padding: 11px 15px 13px; gap: 20px; }
  .tl-title { font-size: .84rem; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .tl-price { font-size: .96rem; }
  .tl-price-overlay { font-size: .8rem; padding: 4px 9px; }
  .tl-img-save { width: 27px; height: 27px; }
}

/* ═══════════════════════════════════════════════════════════
   HOME — BEAUTIFY PASS (exciting / passionate / trustworthy)
   UI/UX polish only — no markup or JS behavior changed.
═══════════════════════════════════════════════════════════ */

/* ── Location pill — theme-aware, was hardcoded white/black ── */
.loc-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.loc-pill:hover { border-color: rgba(200,16,46,.35); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ── Category tabs — brand gradient + glow instead of flat slate ── */
.cat-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 14px rgba(200,16,46,.32);
}
.cat-tab { font-weight: 600; }
[data-theme="dark"] .cat-tab { color: var(--text-secondary); }
[data-theme="dark"] .cat-tab:hover { background: rgba(255,255,255,.06); }

/* ── Search overlay / post menu — theme-aware (was hardcoded #fef6f8) ── */
#search-results-overlay, #search-results-list, .topbar-post-menu {
  background: #FFFFFF !important; /* solid: --bg-card is translucent glass globally */
}
.topbar-post-menu { z-index: 1000; isolation: isolate; box-shadow: 0 18px 40px -12px rgba(20,20,40,.28), 0 2px 6px rgba(0,0,0,.06); }
.topbar-post-menu .tpm-item { background: #FFFFFF; }
.topbar-post-menu .tpm-item:hover { background: #F6F5F8; }
[data-theme="dark"] .topbar-post-menu .tpm-item { background: #1D212B; }
[data-theme="dark"] .topbar-post-menu .tpm-item:hover { background: #262B37; }
[data-theme="dark"] #search-results-list,
[data-theme="dark"] .topbar-post-menu { background: #1D212B !important; }

/* ── Compose card — inviting gradient ring on focus/hover, feels alive ── */
.home-compose {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, rgba(200,16,46,.18), rgba(124,58,237,.14)) border-box;
  transition: box-shadow .22s var(--ease), transform .18s var(--ease), border-color .22s;
}
.home-compose:hover {
  box-shadow: 0 4px 4px rgba(0,0,0,0.04), 0 14px 32px rgba(200,16,46,.10);
  transform: translateY(-2px);
}
.compose-input-mock { transition: color .15s; }
.home-compose:hover .compose-input-mock { color: var(--text-muted); }
.compose-action-btn { font-weight: 700; }
.compose-action-btn:hover { transform: translateY(-1px); opacity: 1; }
.ca-sell:hover  { background: rgba(220,32,32,.16); }
.ca-deal:hover  { background: rgba(34,197,94,.16); }
.ca-ask:hover   { background: rgba(59,130,246,.16); }
.ca-share:hover { background: rgba(251,146,60,.16); }

/* ── Timeline post cards — category-tinted glow on hover, trust-badge feel ── */
.timeline-post:hover { border-color: rgba(200,16,46,.16); }
#recent-pasal-feed .timeline-post:hover,
#recommended-feed .timeline-post:hover { box-shadow: 0 14px 36px rgba(200,16,46,.16); }
#radar-offers-feed .timeline-post:hover { box-shadow: 0 14px 36px rgba(5,150,105,.16); }
.tl-av { transition: transform .2s var(--ease); }
.timeline-post:hover .tl-av { transform: scale(1.08) rotate(-4deg); }
.tl-act-like:hover i { transform: scale(1.15); }
.tl-act-like.liked i { animation: like-pop .3s var(--ease); }
@keyframes like-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ── Locked / coming-soon cards — bounce + glowing "SOON" pulse ── */
.locked-feat-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.locked-feat-soon { animation: soon-pulse 2s ease-in-out infinite; }
@keyframes soon-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.coming-soon-badge {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  box-shadow: 0 2px 10px rgba(217,119,6,.18);
}

/* ── Guff teaser — richer gradient + stronger presence on hover ── */
.guff-teaser-card { background: linear-gradient(135deg, #f3e8ff, #ede9fe, #f3e8ff); background-size: 200% 200%; }
.guff-teaser-card:hover { background-position: 100% 50%; }
.guff-teaser-live { padding: 4px 10px; background: rgba(124,58,237,.10); border-radius: 20px; }

/* ── Sidebar widgets — gamified Duolingo-style progress + presence ── */
.quest-item:hover .quest-tile { transform: scale(1.08); }
.quest-tile { transition: transform .18s var(--ease); }
.quest-bar { background: linear-gradient(90deg, var(--green) 0%, var(--gold) 100%); }
.online-avatar { box-shadow: 0 2px 8px rgba(200,16,46,.3), 0 0 0 3px var(--bg-card); }
.lb-row.lb-me { box-shadow: 0 2px 10px rgba(200,16,46,.12); }
.widget:hover { transform: none; }

/* ── Dark mode — richer glass + glow so home matches the app's dark aurora ── */
[data-theme="dark"] .loc-pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .home-compose {
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(227,35,79,.45), rgba(139,92,246,.35)) border-box;
}
[data-theme="dark"] .timeline-post:hover { border-color: rgba(227,35,79,.28); }
[data-theme="dark"] .guff-teaser-card { background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(109,40,217,.16)); border-color: rgba(196,181,253,.25); }
[data-theme="dark"] .guff-teaser-title { color: #d8b4fe; }
[data-theme="dark"] .guff-teaser-sub { color: #c4b5fd; }

/* ═══════════════════════════════════════════════════════════
   HOME — BEAUTIFY PASS ROUND 2 (Duolingo / Discord / X / macOS)
   Visual polish only — no markup or JS behavior changed.
═══════════════════════════════════════════════════════════ */

/* ── Ambient brand glow behind the top of the feed — the same
   warm crimson→violet scene established on the login page ── */
.feed { position: relative; }
.feed::before {
  content: '';
  position: absolute; top: -40px; left: 8%; right: 8%; height: 240px;
  background:
    radial-gradient(480px 200px at 18% 0%, rgba(200,16,46,.08) 0%, transparent 70%),
    radial-gradient(420px 200px at 88% 12%, rgba(124,58,237,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-carousel, .home-compose, .cat-tabs { position: relative; z-index: 1; }
[data-theme="dark"] .feed::before {
  background:
    radial-gradient(480px 200px at 18% 0%, rgba(227,35,79,.16) 0%, transparent 70%),
    radial-gradient(420px 200px at 88% 12%, rgba(139,92,246,.13) 0%, transparent 70%);
}

/* ── Duolingo-style pressable feedback on primary CTAs ── */
.hc-btn.primary:active { transform: translateY(1px) scale(.98); }
.hero-action-btn:active { transform: translateY(1px) scale(.97); }

/* ── Category tabs — glossy top highlight on the active pill ── */
.cat-tab.active { position: relative; overflow: hidden; }
.cat-tab.active::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
[data-theme="dark"] .cat-tab.active::after { background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%); }

/* ── Timeline cards — macOS-style glass edge highlight ── */
.timeline-post { border-top-color: rgba(255,255,255,.75); }
[data-theme="dark"] .timeline-post { border-top-color: rgba(255,255,255,.07); }

/* ── Locked / mystery cards — one-shot loot-box sheen on hover ── */
.locked-feat-icon-wrap { position: relative; overflow: hidden; }
.locked-feat-icon-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  background-size: 220% 100%; background-position: 130% 0;
  transition: background-position .6s var(--ease-out);
}
.locked-feat-card:hover .locked-feat-icon-wrap::after { background-position: -30% 0; }

/* ── Daily Quest bar — the one signature Duolingo XP shimmer ── */
.quest-bar { position: relative; overflow: hidden; }
.quest-bar:not(.quest-bar-empty)::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 60px 100%; animation: xp-shimmer 1.8s linear infinite;
}
@keyframes xp-shimmer { from { background-position: -60px 0; } to { background-position: 160px 0; } }
.quest-tile.quest-done-tile { box-shadow: 0 0 0 4px rgba(34,197,94,.18), 0 3px 10px rgba(34,197,94,.35); animation: quest-done-pop .4s var(--ease); }
@keyframes quest-done-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── Who's Online — lively presence lift on hover ── */
.online-user:hover .online-avatar { transform: scale(1.14) translateY(-2px); box-shadow: 0 6px 16px rgba(200,16,46,.4); }

/* ── Leaderboard — accent bar for the "you" row ── */
.lb-row.lb-me { position: relative; }
.lb-row.lb-me::before {
  content: ''; position: absolute; left: -2px; top: 4px; bottom: 4px; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--gold));
}

/* ── Widget cards — hairline edge for macOS-style card definition ── */
.widget { border: 1px solid rgba(0,0,0,.03); }
[data-theme="dark"] .widget { border-color: rgba(255,255,255,.05); }

/* ═══════════════════════════════════════════════════════════
   HOME — BEAUTIFY PASS ROUND 3
   1) Fix the orphaned last card in "Coming Soon"
   2) One shared glossy "material" across every icon tile on the
      page (nav tiles, quest, trending, locked cards, post avatars)
      so they read as one design system instead of three.
═══════════════════════════════════════════════════════════ */

/* ── Coming Soon grid — flex + center instead of a grid that
   strands the last card alone on its own row ── */
.coming-soon-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; padding: 0 22px 28px;
}
.coming-soon-grid .locked-feat-card { flex: 1 1 150px; max-width: 210px; }

/* ── Shared glossy tile "material" — one consistent top-highlight
   finish across every colored icon tile, without disturbing the
   colored drop-shadows some of them already earned per-category ── */
.locked-feat-icon-wrap,
.quest-tile,
.trend-thumb,
.tl-av,
.rh-icon,
.bh-home-icon,
.compose-av {
  position: relative;
  overflow: hidden;
}
.locked-feat-icon-wrap::before,
.quest-tile::before,
.trend-thumb::before,
.tl-av::before,
.rh-icon::before,
.bh-home-icon::before,
.compose-av::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 55%);
  pointer-events: none;
}
/* Tiles that didn't already have their own colored lift get one now */
.locked-feat-icon-wrap,
.quest-tile,
.trend-thumb,
.bh-home-icon,
.compose-av {
  box-shadow: 0 3px 10px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ── Locked feature icons — crisp instead of muddy; the pale card
   background already signals "not unlocked yet" on its own ── */
.locked-feat-icon { opacity: .85; filter: none; }

/* ── Feed image fallback — soft gradient instead of a flat block
   when a listing has no photo yet ── */
.tl-img { background: linear-gradient(135deg, #f6f3f6, #eef0f3); }
[data-theme="dark"] .tl-img { background: linear-gradient(135deg, #23262f, #1a1d24); }

/* ── Section tag pills — hairline ring to match the icon-tile finish ── */
.sh-tag { box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset; }
[data-theme="dark"] .sh-tag { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }

/* ── Search overlay v2: solid, sticky under the topbar (fixed was resolving against .main's blur) ── */
#search-results-overlay {
  position: sticky; top: 66px; left: auto; right: auto; bottom: auto;
  height: calc(100vh - 92px);
  margin: 0 14px calc(-1 * (100vh - 92px));
  z-index: 120;
  background: #ffffff !important;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(20,10,30,.28);
  padding: 18px 20px 24px;
}
#search-results-list { background: transparent !important; }
[data-theme="dark"] #search-results-overlay { background: #1D212B !important; }
.search-overlay-head { position: sticky; top: -18px; background: inherit; z-index: 2; padding-top: 4px; }
@media (max-width: 600px) {
  #search-results-overlay { top: 64px; height: calc(100vh - 150px); margin: 0 8px calc(-1 * (100vh - 150px)); padding: 14px; }
}


/* Coming Soon cards: room for the SOON tag so it never overlaps the hint text */
.locked-feat-card { padding-bottom: 34px !important; }


/* Guff teaser: brand-red family (was purple) so Home reads as one palette */
.guff-teaser-card { background: linear-gradient(135deg, #FFF1F3, #FFE4E8, #FFF1F3); background-size: 200% 200%; border-color: rgba(200,16,46,.16); }
.guff-teaser-card:hover { box-shadow: 0 10px 30px rgba(200,16,46,.18); }
.guff-teaser-icon { background: linear-gradient(135deg, #E8192C, #A00D25); box-shadow: 0 4px 14px rgba(200,16,46,.3); }
.guff-teaser-title { color: #7A0A1E; }
.guff-teaser-sub { color: #A00D25; }
.guff-teaser-live { background: rgba(200,16,46,.08); }
[data-theme="dark"] .guff-teaser-card { background: linear-gradient(135deg, rgba(200,16,46,.22), rgba(139,11,31,.18)); border-color: rgba(255,120,140,.25); }
[data-theme="dark"] .guff-teaser-title { color: #FFB3C0; }
[data-theme="dark"] .guff-teaser-sub { color: #FF8FA3; }

/* The feed glow had a hard rectangular edge (read as a stray strip behind the tabs) — feather it out */
.feed::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 35%, transparent 78%);
}

.search-foot { text-align: center; font-size: .72rem; color: var(--text-faint); padding: 14px 0 2px; }
.search-foot kbd { font: 700 .68rem inherit; background: var(--bg-main); border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px 6px; }
#search-results-overlay { transition: height .15s ease; }

/* ═══════════════════════════════════════════════════════════
   HOME v3 — greeting · composer · featured grid · activity ·
   calm right rail · login-matched navy theme + skyline.
   Everything is scoped to body.home-v3 so no other page changes.
═══════════════════════════════════════════════════════════ */

/* ── Login-matched dark theme (deep navy + pink-red glow) ── */
[data-theme="dark"] body.home-v3 {
  --primary: #F23A5C;  --maroon: #F23A5C;  --radar: #F23A5C;  --primary-hover: #D92D4D;  --card-price-color: #FF7C99;
  --bg-main: #061329;  --bg: #061329;
  --bg-card: #0D2044;  --white: #0D2044;
  --bg-elevated: #0A1A38;  --bg-sidebar: #081A38;
  --bg-input: rgba(255,255,255,.06);
  --text: #F4F7FF;  --text-secondary: #B6C3DE;  --text-muted: #8798BB;  --text-faint: #4C5D82;
  --border: rgba(135,152,187,.14);  --border-strong: #29416B;  --border-card: rgba(135,152,187,.18);
  --glass: rgba(13,32,68,.82);  --glass-strong: rgba(8,26,56,.95);  --glass-nav: rgba(8,26,56,.96);
  --primary-soft: rgba(255,32,93,.12);
  background-color: #061329;
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(255,32,93,.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 95% 10%, rgba(64,110,255,.16) 0%, transparent 65%);
}
[data-theme="dark"] body.home-v3 .topbar { background: rgba(6,19,41,.88); }
[data-theme="dark"] body.home-v3 .search-input { background: rgba(255,255,255,.06); }
[data-theme="dark"] body.home-v3 .widget,
[data-theme="dark"] body.home-v3 .home-compose,
[data-theme="dark"] body.home-v3 .fcard,
[data-theme="dark"] body.home-v3 .activity-card,
[data-theme="dark"] body.home-v3 .timeline-post { background: rgba(13,32,68,.78); border-color: rgba(135,152,187,.16); }
[data-theme="dark"] body.home-v3 #search-results-overlay,
[data-theme="dark"] body.home-v3 #search-results-list,
[data-theme="dark"] body.home-v3 .topbar-post-menu,
[data-theme="dark"] body.home-v3 .topbar-post-menu .tpm-item { background: #0D2044 !important; }

/* ── Nepal skyline atmosphere (same artwork as the login page) ── */
body.home-v3 .app { position: relative; z-index: 1; }
body.home-v3::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 240px;
  background: url('/images/login/skyline.jpg') center bottom / cover no-repeat;
  opacity: .16; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
}
[data-theme="dark"] body.home-v3::after { opacity: .5; }
@media (max-width: 860px) { body.home-v3::after { height: 140px; } }

/* ── Greeting ── */
.home-greet { padding: 8px 18px 0; position: relative; z-index: 1; }
.home-greet-title { font-size: clamp(1.45rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); margin: 0; }
.home-greet-wave { display: inline-block; transform-origin: 70% 70%; animation: greet-wave 2.4s ease-in-out 1; }
@keyframes greet-wave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(14deg); } 20%,40% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.home-greet-stat { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .88rem; font-weight: 500; color: var(--text-secondary); }
.home-greet-stat strong { color: var(--text); font-weight: 800; }
.home-greet-stat .live-dot { background: #22C55E; animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* ── Composer ── */
.home-compose { margin: 16px 18px 0; padding: 14px 16px 16px; border-radius: 18px; }
.compose-input-mock {
  flex: 1; text-align: left; background: var(--bg-input, rgba(0,0,0,.04)); border: 1px solid var(--border);
  border-radius: 999px; padding: 11px 16px; font: inherit; font-size: .9rem; font-weight: 500; color: var(--text-muted); cursor: text;
}
.compose-input-mock:hover { border-color: var(--border-strong); }
.compose-top-row { border-bottom: none; padding-bottom: 0; margin-bottom: 12px; }
.compose-action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compose-action-btn { justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: .84rem; font-weight: 700; }
.ca-sell  { background: rgba(200,16,46,.09);  color: #B50E29; }
.ca-deal  { background: rgba(22,134,83,.10);  color: #137545; }
.ca-guff  { background: rgba(118,81,213,.11); color: #6642C4; }
.ca-sell:hover  { background: rgba(200,16,46,.16); }
.ca-deal:hover  { background: rgba(22,134,83,.18); }
.ca-guff:hover  { background: rgba(118,81,213,.19); }
[data-theme="dark"] body.home-v3 .ca-sell  { background: rgba(255,32,93,.16);  color: #FF7C9C; }
[data-theme="dark"] body.home-v3 .ca-deal  { background: rgba(34,197,94,.16);  color: #5EE39A; }
[data-theme="dark"] body.home-v3 .ca-guff  { background: rgba(139,92,246,.20); color: #B9A0FF; }
.compose-action-btn:focus-visible, .compose-input-mock:focus-visible, .fcard:focus-visible, .act-row:focus-visible, .trend-item:focus-visible, .featured-state-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
[data-theme="dark"] body.home-v3 .compose-action-btn:focus-visible { outline-color: #FF4D83; }

/* ── Section headings (Featured / Activity) ── */
.featured-sec, .activity-sec { padding: 0 18px; margin-top: 26px; position: relative; z-index: 1; }
.featured-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.featured-head h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; }
.city-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-card); }
.city-chip i { color: var(--primary); font-size: .68rem; }
[data-theme="dark"] body.home-v3 .city-chip i { color: #FF4D83; }
.featured-see-all { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--primary); }
.featured-see-all:hover { text-decoration: underline; }
[data-theme="dark"] body.home-v3 .featured-see-all { color: #FF6B93; }

/* ── Featured grid ── */
.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fcard { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 12px rgba(20,29,50,.05); transition: transform .2s var(--ease-out), box-shadow .2s; }
.fcard:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20,29,50,.12); }
.fcard-img { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #eef0f5, #e4e7ef); overflow: hidden; }
[data-theme="dark"] body.home-v3 .fcard-img { background: linear-gradient(135deg, #0F2750, #0A1B3C); }
.fcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-out); }
.fcard:hover .fcard-img img { transform: scale(1.04); }
.fcard-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 2rem; }
.fcard-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 8px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.fcard-heart { top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; font-size: .84rem; }
.fcard-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fcard-title { font-size: .94rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard-loc { font-size: .76rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard-loc i { font-size: .68rem; flex-shrink: 0; }
.fcard-price { font-size: 1.04rem; font-weight: 900; color: var(--text); letter-spacing: -.02em; margin-top: 2px; }
.fcard-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.fcard-chips span { font-size: .72rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-input, rgba(0,0,0,.04)); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.fcard-skel { aspect-ratio: 4 / 4.4; border-radius: 16px; }
.featured-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 20px; border: 1px dashed var(--border-strong); border-radius: 16px; background: var(--bg-card); color: var(--text-muted); font-size: .84rem; }
.featured-state i { font-size: 1.5rem; color: var(--text-faint); margin-bottom: 4px; }
.featured-state strong { color: var(--text); font-size: .96rem; }
.featured-state-btn { margin-top: 10px; min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--primary); background: transparent; color: var(--primary); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.featured-state-btn:hover { background: var(--primary); color: #fff; }
[data-theme="dark"] body.home-v3 .featured-state-btn { color: #FF6B93; border-color: #FF4D83; }
[data-theme="dark"] body.home-v3 .featured-state-btn:hover { background: #FF2B66; color: #fff; }

/* ── Recent Activity ── */
.activity-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px; padding: 6px; box-shadow: 0 3px 12px rgba(20,29,50,.04); }
.act-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; min-height: 56px; color: inherit; }
a.act-row:hover { background: var(--bg-input, rgba(0,0,0,.04)); }
.act-row + .act-row { border-top: 1px solid var(--border); }
.act-av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-size: .74rem; font-weight: 800; }
.act-text { flex: 1; min-width: 0; font-size: .86rem; color: var(--text-secondary); line-height: 1.35; }
.act-text strong { color: var(--text); font-weight: 800; }
.act-time { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 1px; }
.act-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.act-tag-pasal { background: rgba(200,16,46,.09); color: #B50E29; }
.act-tag-radar { background: rgba(22,134,83,.10); color: #137545; }
.act-tag-guff  { background: rgba(118,81,213,.11); color: #6642C4; }
[data-theme="dark"] body.home-v3 .act-tag-pasal { background: rgba(255,32,93,.16); color: #FF7C9C; }
[data-theme="dark"] body.home-v3 .act-tag-radar { background: rgba(34,197,94,.16); color: #5EE39A; }
[data-theme="dark"] body.home-v3 .act-tag-guff  { background: rgba(139,92,246,.20); color: #B9A0FF; }
.act-skel { height: 56px; border-radius: 12px; margin: 4px; }
.act-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 14px; font-size: .84rem; color: var(--text-muted); }
.act-empty button, .widget-empty button { background: none; border: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 8px; }

/* ── Existing browse feeds sit below, with calmer headers ── */
.feed .section-head { margin-top: 26px; }

/* ── Right rail: Vault → Quest → Trending ── */
body.home-v3 .right .vault-card { padding: 22px; border-radius: 20px; background: linear-gradient(135deg, #B7192B 0%, #8F1025 58%, #430B1B 100%); }
body.home-v3 .right .vault-rs { color: #F8CDD3; font-size: .78rem; }
body.home-v3 .right .vault-balance { font-size: 2.6rem; }
body.home-v3 .right .vault-progress-label { color: #F8CDD3; font-size: .68rem; }
body.home-v3 .right .vault-dual-label { color: #F8CDD3; font-size: .6rem; }
body.home-v3 .right .widget { padding: 18px; border-radius: 16px; margin-bottom: 12px; border: 1px solid var(--border-card); box-shadow: 0 3px 12px rgba(20,29,50,.04); }
body.home-v3 .right .widget-title { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
body.home-v3 .quest-list { gap: 14px; }
body.home-v3 .quest-tile { width: 38px; height: 38px; border-radius: 12px; }
body.home-v3 .quest-label { font-size: .84rem; margin-bottom: 6px; }
body.home-v3 .quest-bar-wrap { height: 5px; background: var(--border-strong); }
body.home-v3 .quest-pts { font-size: .74rem; color: #A96500; }
body.home-v3 .quest-xp-badge { font-size: .72rem; color: #A96500; background: #FFF4DB; border-color: rgba(169,101,0,.2); }
[data-theme="dark"] body.home-v3 .quest-pts { color: #FFC24A; }
[data-theme="dark"] body.home-v3 .quest-xp-badge { color: #FFC24A; background: rgba(255,194,74,.12); border-color: rgba(255,194,74,.25); }
body.home-v3 .widget-period-badge { font-size: .72rem; }

body.home-v3 .widget-trend-list { gap: 4px; }
body.home-v3 .trend-item { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0; border-radius: 12px; min-height: 56px; }
body.home-v3 .trend-thumb { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; font-size: 1rem; background: var(--bg-input, #eee); }
body.home-v3 .trend-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.home-v3 .trend-thumb-pasal { background: linear-gradient(135deg, #D8232A, #9E1220); }
body.home-v3 .trend-thumb-radar { background: linear-gradient(135deg, #1AA26A, #0E7C4C); }
body.home-v3 .trend-thumb::before { display: none; }
body.home-v3 .trend-label { font-size: .64rem; letter-spacing: .08em; }
body.home-v3 .trend-name { font-size: .86rem; max-width: none; }
body.home-v3 .trend-meta { font-size: .8rem; color: var(--primary); }
[data-theme="dark"] body.home-v3 .trend-meta { color: #FF7C9C; }
body.home-v3 .trend-go { font-size: .68rem; color: var(--text-faint); }
.widget-empty { display: flex; flex-direction: column; gap: 4px; padding: 10px 2px; font-size: .8rem; color: var(--text-muted); }
.widget-empty strong { color: var(--text); font-size: .86rem; }

/* ── Mystery cards: keep, but restrained ── */
body.home-v3 .coming-soon-grid { padding-bottom: 150px; }

/* ── Mobile ── */
@media (max-width: 860px) {
  .home-greet { padding: 4px 16px 0; }
  .home-compose, .featured-sec, .activity-sec { margin-left: 0; margin-right: 0; }
  .home-compose { margin: 14px 16px 0; }
  .featured-sec, .activity-sec { padding: 0 16px; margin-top: 22px; }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; }
  .fcard-img { aspect-ratio: 16 / 10; }
  .compose-action-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compose-action-btn { flex-direction: column; gap: 4px; font-size: .74rem; padding: 8px 4px; min-height: 56px; }
  .act-tag { display: none; }
  .featured-head { flex-wrap: nowrap; gap: 8px; }
  .featured-head h2 { font-size: 1rem; white-space: nowrap; }
  .featured-see-all { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .home-greet-wave { animation: none; }
  .fcard, .fcard-img img { transition: none; }
}

/* ── Mobile: points chip up top; right rail (Quest + Trending) flows below the feed ── */
.home-pts-chip { display: none; }
@media (max-width: 860px) {
  .home-pts-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, #B7192B, #6E0F22); box-shadow: 0 6px 16px rgba(143,16,37,.28); }
  .home-pts-chip[hidden] { display: none; }
  .home-pts-chip i:first-child { color: #FFD166; }
  .home-pts-chip i:nth-of-type(2) { color: #FFB3A0; }
  .home-pts-sep { opacity: .6; }
  body.home-v3 .app { flex-wrap: wrap; }
  body.home-v3 .right { display: flex; order: 3; width: 100%; position: static; height: auto; overflow: visible; padding: 0 16px calc(var(--bottom-nav-height, 64px) + 90px); }
  body.home-v3 .right .vault-card { display: none; }
  body.home-v3 .right > div[style] { display: none; }
}

/* v3 refinements after visual QA */
.fcard-img { aspect-ratio: auto; height: 156px; }
.home-greet-title #home-hello-name { text-transform: capitalize; }
@media (max-width: 600px) { .fcard-img { aspect-ratio: auto; height: 190px; } }

/* Dark mode: mystery "coming soon" cards keep their light inline tints — put them on theme surfaces */
[data-theme="dark"] body.home-v3 .locked-feat-card { background: var(--bg-card) !important; border-color: var(--border-strong) !important; }
[data-theme="dark"] body.home-v3 .locked-feat-name { color: var(--text) !important; }
[data-theme="dark"] body.home-v3 .locked-feat-hint { color: var(--text-secondary) !important; }
[data-theme="dark"] body.home-v3 .coming-soon-badge { background: rgba(255,178,62,.14); color: #FFC24A; border-color: rgba(255,178,62,.3); }

/* ═══════════════════════════════════════════════════════════
   HOME v3.1 — made for first-time visitors:
   get-started card · category shortcuts · 3-up listings · hot deals row
═══════════════════════════════════════════════════════════ */
body.home-v3 .gs-card[hidden], body.home-v3 .deals-sec[hidden], body.home-v3 .cat-strip-sec[hidden] { display: none !important; }

/* Get started */
.gs-card { position: relative; margin: 16px 18px 0; padding: 20px 20px 16px; border-radius: 16px; border: 1px solid var(--border-card);
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--bg-card) 70%); box-shadow: 0 3px 12px rgba(25,29,41,.045); z-index: 1; }
.gs-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .9rem; }
.gs-close:hover { background: rgba(0,0,0,.06); color: var(--text); }
.gs-head h2 { margin: 0 36px 4px 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.gs-head p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-secondary); }
.gs-head strong { color: var(--primary); }
.gs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.gs-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; min-height: 124px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-card); color: inherit; transition: transform .18s var(--ease-out), box-shadow .18s; }
.gs-step:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(25,29,41,.10); }
.gs-num { position: absolute; top: 10px; right: 12px; font-size: .72rem; font-weight: 800; color: var(--text-faint); }
.gs-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.gs-sell .gs-ico { background: rgba(200,16,46,.10); color: var(--primary); }
.gs-deal .gs-ico { background: rgba(22,134,83,.12); color: #168653; }
.gs-guff .gs-ico { background: rgba(118,81,213,.13); color: #7651D5; }
.gs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-txt strong { font-size: .92rem; font-weight: 800; color: var(--text); }
.gs-txt em { font-style: normal; font-size: .76rem; line-height: 1.4; color: var(--text-muted); }
.gs-pts { margin-top: auto; align-self: flex-start; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg-input, rgba(0,0,0,.05)); color: var(--text-secondary); }
.gs-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; font-size: .78rem; color: var(--text-secondary); }
.gs-trust li { display: flex; align-items: center; gap: 7px; }
.gs-trust i { color: var(--primary); font-size: .74rem; }

/* Category shortcuts */
.cat-strip-sec { margin: 14px 18px 0; position: relative; z-index: 1; }
.cat-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
.cat-strip::-webkit-scrollbar { display: none; }
.cat-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; scroll-snap-align: start; font-size: .72rem; font-weight: 700; color: var(--text-secondary); text-align: center; }
.cat-chip span:last-child { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-chip-ico { width: 54px; height: 54px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--bg-card); border: 1px solid var(--border-card); color: var(--primary); box-shadow: 0 3px 10px rgba(25,29,41,.05); transition: transform .18s var(--ease-out), background .18s, color .18s; }
.cat-chip:hover .cat-chip-ico { transform: translateY(-3px); background: var(--primary); color: #fff; }
.cat-chip-all .cat-chip-ico { background: var(--primary-soft); }

/* Featured: 3 per row */
body.home-v3 .featured-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
body.home-v3 .fcard-img { height: 128px; }
body.home-v3 .fcard-title { font-size: .88rem; }
body.home-v3 .fcard-price { font-size: .98rem; color: var(--primary); }
body.home-v3 .fcard-body { padding: 11px 13px 13px; }

/* Hot deals row */
.deals-sec { padding: 0 18px; margin-top: 26px; position: relative; z-index: 1; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #168653; background: rgba(22,134,83,.10); }
.live-pill .live-dot { background: #22C55E; animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.deals-row { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.dcard { flex: 0 0 210px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: 0 3px 12px rgba(25,29,41,.045); color: inherit; transition: transform .18s var(--ease-out), box-shadow .18s; }
.dcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(25,29,41,.11); }
.dcard-img { position: relative; height: 118px; background: var(--bg-input, #eee); }
.dcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard-ph { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--text-faint); }
.dcard-save { position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 8px; font-size: .7rem; font-weight: 800; color: #fff; background: #168653; }
.dcard-flash { position: absolute; bottom: 8px; left: 8px; padding: 3px 9px; border-radius: 8px; font-size: .68rem; font-weight: 800; color: #fff; background: #191B23; }
.dcard-flash i { color: #F59E0B; }
.dcard-body { padding: 10px 13px 13px; display: flex; flex-direction: column; gap: 3px; }
.dcard-title { font-size: .88rem; font-weight: 800; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.dcard-biz { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard-biz i { font-size: .62rem; margin-right: 3px; }
.dcard-price { font-size: .96rem; font-weight: 900; color: var(--primary); letter-spacing: -.02em; }
.dcard-price s { margin-left: 7px; font-size: .74rem; font-weight: 600; color: var(--text-muted); }

/* Dark */
[data-theme="dark"] body.home-v3 .gs-card { background: linear-gradient(135deg, rgba(255,32,93,.12) 0%, rgba(13,32,68,.8) 70%); }
[data-theme="dark"] body.home-v3 .gs-close:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] body.home-v3 .gs-deal .gs-ico { color: #5EE39A; background: rgba(34,197,94,.16); }
[data-theme="dark"] body.home-v3 .gs-guff .gs-ico { color: #B9A0FF; background: rgba(139,92,246,.2); }
[data-theme="dark"] body.home-v3 .gs-sell .gs-ico { background: rgba(255,32,93,.16); }
[data-theme="dark"] body.home-v3 .live-pill { color: #5EE39A; background: rgba(34,197,94,.14); }
[data-theme="dark"] body.home-v3 .dcard-save { background: #159B62; }

/* Mobile */
@media (max-width: 860px) {
  .gs-card, .cat-strip-sec, .deals-sec { margin-left: 0; margin-right: 0; }
  .gs-card { margin: 14px 16px 0; }
  .cat-strip-sec, .deals-sec { padding: 0 16px; }
  .gs-steps { grid-template-columns: 1fr; }
  .gs-step { flex-direction: row; align-items: center; min-height: 0; gap: 12px; }
  .gs-num { display: none; }
  .gs-pts { margin: 0 0 0 auto; }
  .dcard { flex-basis: 78%; }
}
@media (max-width: 600px) { body.home-v3 .featured-grid { grid-template-columns: 1fr 1fr; gap: 10px; } body.home-v3 .fcard-img { height: 110px; } }
@media (max-width: 360px) { body.home-v3 .featured-grid { grid-template-columns: 1fr; } }

/* views counter replaces the (unbuilt) comments button */
.tl-act.tl-views { cursor: default; pointer-events: none; }
.tl-act.tl-views:hover { color: #6b7280; }
/* share button under the save heart on featured cards */
body.home-v3 .fcard-share { top: 48px; right: 8px; width: 34px; height: 34px; border-radius: 50%; font-size: .82rem; }


/* ═══════════════════════════════════════════════════════════
   HOME — POLISH v5  (keeps the warm identity; removes colour noise)
   Duolingo: tactile primary button, one reward colour, chunky bars.
   Discord: compact community list, quiet locked rows.
   X / Airbnb: image-first cards, strict text hierarchy, calm chrome.
═══════════════════════════════════════════════════════════ */

/* ── Composer: Sell is the one primary; the others are quiet white ── */
body.home-v3 .home-compose { background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: 0 2px 10px rgba(25,25,31,.04); }
html:not([data-theme="dark"]) body.home-v3 .home-compose { background: #fff; background-image: none; }
.compose-action-btn { transition: transform .12s, box-shadow .12s, background .15s; }
html:not([data-theme="dark"]) .ca-sell { background: var(--primary); color: #fff; box-shadow: 0 3px 0 #9E0C24; }
html:not([data-theme="dark"]) .ca-sell:hover { background: #D6112F; }
html:not([data-theme="dark"]) .ca-sell:active { transform: translateY(3px); box-shadow: 0 0 0 #9E0C24; }
html:not([data-theme="dark"]) .ca-sell i { color: #fff; }
html:not([data-theme="dark"]) .ca-deal, html:not([data-theme="dark"]) .ca-guff { background: #fff; color: var(--text); border: 1.5px solid #EBD9DB; box-shadow: 0 3px 0 #EBD9DB; }
html:not([data-theme="dark"]) .ca-deal:hover, html:not([data-theme="dark"]) .ca-guff:hover { background: var(--primary-soft); }
html:not([data-theme="dark"]) .ca-deal:active, html:not([data-theme="dark"]) .ca-guff:active { transform: translateY(3px); box-shadow: 0 0 0 #EBD9DB; }
html:not([data-theme="dark"]) .ca-deal i, html:not([data-theme="dark"]) .ca-guff i { color: var(--primary); }
[data-theme="dark"] body.home-v3 .ca-sell { background: var(--primary); color: #fff; }
[data-theme="dark"] body.home-v3 .ca-deal, [data-theme="dark"] body.home-v3 .ca-guff { background: rgba(255,255,255,.07); color: var(--text); }
[data-theme="dark"] body.home-v3 .ca-deal i, [data-theme="dark"] body.home-v3 .ca-guff i { color: #FF8FA9; }

/* ── Daily Quest: one tile colour, gold reward, chunky highlighted bar ── */
html:not([data-theme="dark"]) .quest-tile-1, html:not([data-theme="dark"]) .quest-tile-2, html:not([data-theme="dark"]) .quest-tile-3 { background: var(--primary-soft); color: var(--primary); }
body.home-v3 .quest-tile { box-shadow: none; }
body.home-v3 .quest-tile::before { display: none; }
body.home-v3 .quest-bar-wrap { height: 10px; border-radius: 999px; background: #F1E6E8; }
[data-theme="dark"] body.home-v3 .quest-bar-wrap { background: rgba(255,255,255,.08); }
body.home-v3 .quest-bar { background: #F2B01E; border-radius: 999px; position: relative; }
body.home-v3 .quest-bar:not(.quest-bar-empty)::after { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.4); animation: none; transform: none; width: auto; }
body.home-v3 .quest-pts { font-variant-numeric: tabular-nums; }

/* ── Left sidebar: calmer glow, quiet + compact locked rows ── */
.nav-locked ~ .nav-locked ~ .nav-locked { display: none !important; }   /* 2 teasers are enough; the rest live in Coming Soon */
html:not([data-theme="dark"]) .nav-locked { opacity: .7; }
html:not([data-theme="dark"]) .nav-locked:hover { background: rgba(25,25,31,.04) !important; }

/* ── Product cards: image-first, level titles, calm meta ── */
body.home-v3 .fcard { border-color: var(--border-card); box-shadow: none; }
body.home-v3 .fcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(25,25,31,.08); }
body.home-v3 .fcard:hover .fcard-img img { transform: none; }
body.home-v3 .fcard-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; font-weight: 700; }
body.home-v3 .fcard-price { font-variant-numeric: tabular-nums; }
html:not([data-theme="dark"]) .fcard-chips span { background: #F4EFF0; border-color: transparent; color: var(--text-muted); font-weight: 600; }
.fcard-heart, .fcard-share { box-shadow: none !important; }

/* ── Headings & misc ── */
.featured-head h2, .section-head h3 { font-weight: 800; letter-spacing: -.02em; }
.featured-see-all:hover { text-decoration: underline; }
body.home-v3 .home-pts-chip { box-shadow: none; }
html:not([data-theme="dark"]) .gs-sell .gs-ico, html:not([data-theme="dark"]) .gs-deal .gs-ico, html:not([data-theme="dark"]) .gs-guff .gs-ico { background: var(--primary-soft); color: var(--primary); }
[data-theme="dark"] body.home-v3 .gs-deal .gs-ico, [data-theme="dark"] body.home-v3 .gs-guff .gs-ico { background: rgba(255,32,93,.16); color: #FF8FA9; }
[data-theme="dark"] body.home-v3 .quest-tile-1, [data-theme="dark"] body.home-v3 .quest-tile-2, [data-theme="dark"] body.home-v3 .quest-tile-3 { background: rgba(255,32,93,.16); color: #FF8FA9; }

/* ── Polish pass 2026-10-14 ── */
/* Card chips: visible pills instead of faint text */
body.home-v3 .fcard-chips span { color: var(--text); background: var(--primary-soft); border-color: transparent; font-weight: 700; }
[data-theme="dark"] body.home-v3 .fcard-chips span { background: rgba(255,255,255,.08); color: var(--text-secondary); }
/* Contrast: secondary text on tinted background */
body.home-v3 .fcard-loc { color: var(--text-secondary); }
body.home-v3 .nl-sub, body.home-v3 .quest-label { color: var(--text-secondary); }
/* Category row: clearer "more to scroll" fade */
body.home-v3 .cat-strip { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
/* Daily Quest: compact — hide empty progress bars until there is progress */
body.home-v3 .quest-list { gap: 10px; }
body.home-v3 .quest-item:has(.quest-bar-empty) .quest-bar-wrap { display: none; }
body.home-v3 .quest-item:has(.quest-bar-empty) .quest-label { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   HOME v4 — the guideline (see docs/DESIGN_GUIDELINE.md)
   One job per block · one accent (red) · one heading style · 32px rhythm
   Scoped to body.home-v3 so no other page is affected.
═══════════════════════════════════════════════════════════════ */
body.home-v3 { --sec-gap: 32px; }

/* Retired / duplicate blocks */
body.home-v3 #welcome-card, body.home-v3 .activity-sec { display: none !important; }

/* Greeting: the first thing you read */
body.home-v3 .home-greet { padding: 18px 18px 0; }
body.home-v3 .home-greet-title { font-size: clamp(1.75rem, 3vw, 2.3rem); letter-spacing: -.035em; line-height: 1.05; }
body.home-v3 .home-greet-stat { font-size: .95rem; color: var(--text-muted); margin-top: 8px; }

/* Section rhythm + one heading style */
body.home-v3 .feed > section, body.home-v3 .feed > .section-head, body.home-v3 .feed > nav, body.home-v3 .feed > .soon-card { margin-top: var(--sec-gap); }
body.home-v3 .featured-head h2, body.home-v3 .section-head h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.025em; color: var(--text); margin: 0; }
body.home-v3 .sh-sub { font-size: .88rem; color: var(--text-muted); margin: 4px 0 0; }
body.home-v3 .section-head > div:first-child::before { display: none; }
body.home-v3 .sh-tag { display: none; }                           /* rainbow tags removed: the heading says it already */
body.home-v3 .featured-see-all, body.home-v3 .section-head > a {
  font-size: .86rem; font-weight: 700; color: var(--primary); background: transparent; border: 0; padding: 6px 0;
}
body.home-v3 .featured-see-all:hover, body.home-v3 .section-head > a:hover { text-decoration: underline; background: transparent; }
body.home-v3 .city-chip, body.home-v3 .live-pill { font-size: .76rem; font-weight: 700; }

/* Composer: one clear primary action, two quiet ones */
body.home-v3 .home-compose { border-radius: 20px; }
body.home-v3 .compose-action-btn { border-radius: 14px; font-weight: 800; min-height: 46px; }

/* Listing cards: consistent corners, and a real placeholder when there is no photo */
body.home-v3 .fcard, body.home-v3 .dcard, body.home-v3 .timeline-feed > * { border-radius: 18px; }
body.home-v3 .fcard-ph {
  flex-direction: column; gap: 8px; font-size: 1.6rem; color: var(--text-faint);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(127,140,170,.07) 10px 11px);
}
body.home-v3 .fcard-title { font-size: 1rem; }
body.home-v3 .fcard-price { font-size: 1.1rem; color: var(--card-price-color, var(--primary)); }

/* Guff teaser: a plain row, not a tinted banner */
body.home-v3 .guff-teaser-card { background: var(--bg-card); border: 1px solid var(--border-card); box-shadow: none; border-radius: 18px; }
body.home-v3 .guff-teaser-icon { background: var(--primary); color: #fff; border-radius: 14px; }
body.home-v3 .guff-teaser-title { font-size: 1.02rem; font-weight: 800; color: var(--text); }
body.home-v3 .guff-teaser-sub { color: var(--text-muted); }
[data-theme="dark"] body.home-v3 .guff-teaser-card { background: #0D2044; }

/* Coming soon: one calm card instead of five coloured ones */
body.home-v3 .soon-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: var(--sec-gap) 16px 28px; padding: 20px 22px; border-radius: 20px;
  background: var(--bg-card); border: 1px dashed var(--border-strong);
}
body.home-v3 .soon-copy h3 { font-size: 1.02rem; font-weight: 800; color: var(--text); margin: 0 0 4px; letter-spacing: -.02em; }
body.home-v3 .soon-copy p { font-size: .86rem; color: var(--text-muted); margin: 0; max-width: 360px; }
body.home-v3 .soon-locks { display: flex; gap: 10px; }
body.home-v3 .soon-lock {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: .95rem; cursor: pointer;
  background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border-card); transition: color .15s, border-color .15s, transform .1s;
}
body.home-v3 .soon-lock:hover { color: var(--primary); border-color: var(--primary); }
body.home-v3 .soon-lock:active { transform: scale(.94); }

/* one accent: sale / deal / live tags all use the brand tint */
body.home-v3 .tl-badge-sale, body.home-v3 .tl-badge-deal { background: rgba(255,47,94,.12); color: var(--primary); }
[data-theme="dark"] body.home-v3 .tl-badge-sale, [data-theme="dark"] body.home-v3 .tl-badge-deal { color: #FF8FA9; }
body.home-v3 .guff-teaser-live { background: rgba(34,197,94,.12); }
body.home-v3 .guff-live-label { color: #16A34A; }
[data-theme="dark"] body.home-v3 .guff-live-label { color: #4ADE80; }
body.home-v3 .guff-teaser-live .live-dot { background: #22C55E; }

@media (max-width: 640px) {
  body.home-v3 { --sec-gap: 26px; }
  body.home-v3 .featured-head { flex-wrap: wrap; row-gap: 6px; }
  body.home-v3 .featured-head h2 { font-size: 1.15rem; flex: 1 1 auto; min-width: 0; }
  body.home-v3 .city-chip { order: 3; }
  body.home-v3 .featured-see-all { margin-left: auto; white-space: nowrap; }
  body.home-v3 .soon-card { margin-inline: 12px; padding: 18px; }
  body.home-v3 .home-greet-title { font-size: 1.85rem; }
}

/* Category strip: only fade/arrow while there's more to scroll to */
body.home-v3 .cat-strip { -webkit-mask-image: none; mask-image: none; }
body.home-v3 .cat-strip-sec.has-more .cat-strip { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.cat-next { display: none; position: absolute; right: 0; top: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-card, var(--bg-main)); color: var(--text); cursor: pointer; place-items: center; font-size: .72rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 2; }
.cat-next:hover { border-color: var(--primary); color: var(--primary); }
.cat-strip-sec.has-more .cat-next { display: grid; }
@media (hover: none) { .cat-next { display: none !important; } }

/* ── Homepage polish pass ── */
/* Category chips: labels wrap to two lines instead of "Sports & Fi…" */
body.home-v3 .cat-chip { width: 80px; align-items: flex-start; }
body.home-v3 .cat-chip-ico { align-self: center; }
body.home-v3 .cat-chip span:last-child { max-width: 80px; white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: center; }
body.home-v3 .cat-strip { gap: 6px; align-items: flex-start; padding-right: 44px; }
/* Featured cards: two-line title clamp, equal reserved height so prices line up */
body.home-v3 .fcard-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
body.home-v3 .fcard-body { flex: 1; }
body.home-v3 .fcard-price { margin-top: auto; padding-top: 4px; white-space: nowrap; }
body.home-v3 .fcard-img img { display: block; }
/* Trending: fixed thumb, one-line title with ellipsis */
body.home-v3 .trend-thumb { flex: 0 0 44px; }
body.home-v3 .trend-body { min-width: 0; flex: 1; }
body.home-v3 .trend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tablet: keep the feed usable when the right rail is squeezed */
@media (min-width: 861px) and (max-width: 1100px) { body.home-v3 .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }