/* YoungPG Media — supplemental CSS.
   Light gray theme. Canvas is gray, containers are a lighter gray (or white
   on raised surfaces), body text is near-black. Hierarchy comes from the
   step between the two grays + crisp 1px borders.
   Mobile-first throughout. */

html { scroll-behavior: smooth; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  letter-spacing: -0.011em;
  color: #1c1c20;
  background-color: #ececef;
}

:root {
  --canvas:     #ececef;  /* page background */
  --container:  #f5f5f7;  /* card surface */
  --raised:     #fafafa;  /* hover / contrast */
  --hairline:   rgba(0, 0, 0, 0.07);
  --hairline-strong: rgba(0, 0, 0, 0.12);
  --text:       #1c1c20;
  --text-dim:   #4f4f55;
  --text-muted: #6a6a70;
  --text-faint: #8a8a91;
  --brand-500:  #6366f1;
  --brand-600:  #4f46e5;
  --brand-700:  #4338ca;
}

/* ============================================================
   CANVAS — washed-out brand-color blobs + faint dot grid, layered
   over the light gray base. Subtle enough to read as texture, not
   loud enough to compete with content. Fixed attachment so it
   doesn't scroll with the page.
   ============================================================ */

.bg-mesh {
  background-color: var(--canvas);
  background-image:
    /* tiled social-media glyph illustration — the real "this is a social
       marketplace" cue. Scattered brand icons at low opacity, ~720px tile. */
    url('../img/social-bg.svg'),
    /* indigo wash, top-left */
    radial-gradient(ellipse 80% 60% at 0% 0%,   rgba(99, 102, 241, 0.20), transparent 70%),
    /* pink wash, top-right */
    radial-gradient(ellipse 70% 55% at 100% 8%, rgba(236,  72, 153, 0.16), transparent 70%),
    /* emerald wash, bottom-left */
    radial-gradient(ellipse 80% 60% at 0% 92%,  rgba( 16, 185, 129, 0.16), transparent 70%),
    /* amber wash, bottom-right */
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(245, 158,  11, 0.16), transparent 70%);
  background-size: 720px 720px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

.bg-mesh-dark { background-color: var(--canvas); }

/* Dashboard variant — keeps the subtle radial color washes for life,
   drops the tiled social-icon illustration so admin/user dashboards
   don't get visually noisy under all those tables and forms. */
.bg-mesh-plain {
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse 80% 60% at 0% 0%,   rgba(99, 102, 241, 0.12), transparent 70%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(245, 158, 11, 0.10), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat, no-repeat;
}

/* Legacy `.orbs` element from old views — render as nothing in light mode. */
.orbs { display: none; }

/* ============================================================
   SURFACES — solid panels with crisp 1px borders.
   Override Tailwind's bg-ink-* on the surface levels so we can move
   to light mode without rewriting every view. The intent stays:
   ink-950 / ink-900 = canvas-ish, ink-800 = raised surface.
   ============================================================ */

.bg-ink-950, .bg-ink-900 { background-color: var(--container) !important; }
.bg-ink-800              { background-color: var(--raised)    !important; }
.bg-ink-700              { background-color: var(--canvas)    !important; }

/* Text utility overrides — in our views .text-white means "primary body
   text", .text-ink-400/500 means "muted". Map them to light-mode values.
   Tailwind compiles .text-white/80 etc. into separate classes so we have
   to override each opacity step explicitly. */
.text-white,
.text-white\/50, .text-white\/60, .text-white\/70,
.text-white\/75, .text-white\/80, .text-white\/85,
.text-white\/90, .text-white\/95 { color: var(--text) !important; }

/* The /50–/70 opacity steps were originally used for secondary text on a
   dark background. Map those to the dim/muted colors instead of body
   text, so visual hierarchy is preserved. */
.text-white\/50, .text-white\/60 { color: var(--text-muted) !important; }
.text-white\/70, .text-white\/75 { color: var(--text-dim)   !important; }

.text-ink-200,
.text-ink-300   { color: var(--text-dim)   !important; }
.text-ink-400   { color: var(--text-muted) !important; }
.text-ink-500   { color: var(--text-faint) !important; }
.text-ink-600   { color: var(--text-muted) !important; }

/* Gradient-text headings ("bg-clip-text text-transparent" with a brand
   gradient): under light mode, just fall back to a solid brand color so
   the text stays readable. */
.bg-clip-text.text-transparent { color: var(--brand-600) !important; -webkit-text-fill-color: var(--brand-600) !important; background: none !important; }

/* ============================================================
   BRAND PANEL — intentional dark indigo surface (auth layout
   left side, marketing accent panels). White text is by design
   here, so the global text-white overrides have to step back.
   ============================================================ */
.brand-panel {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(99,102,241,0.45), transparent 60%),
    radial-gradient(120% 100% at 0% 100%, rgba(16,185,129,0.30), transparent 55%),
    linear-gradient(180deg, #312e81, #1e1b4b);
  color: #ffffff;
}
.brand-panel,
.brand-panel a,
.brand-panel h1,
.brand-panel h2,
.brand-panel h3,
.brand-panel p,
.brand-panel .text-white,
.brand-panel .text-white\/50,
.brand-panel .text-white\/60,
.brand-panel .text-white\/70,
.brand-panel .text-white\/75,
.brand-panel .text-white\/80,
.brand-panel .text-white\/85,
.brand-panel .text-white\/90,
.brand-panel .text-white\/95 { color: #ffffff !important; }
.brand-panel .brand-panel-sub  { color: rgba(255,255,255,0.80) !important; }
.brand-panel .brand-panel-meta { color: rgba(255,255,255,0.55) !important; }

/* Generic "this surface is intentionally dark" marker. Applies to the
   admin + user sidebars (bg-slate-950) so the white text inside them
   stays white against the dark background. Only re-asserts text-white*
   variants — leaves text-slate-*, text-emerald-*, etc. alone so the
   sidebar's slate scale renders normally. */
.dark-surface .text-white       { color: #ffffff !important; }
.dark-surface .text-white\/50   { color: rgba(255,255,255,0.50) !important; }
.dark-surface .text-white\/60   { color: rgba(255,255,255,0.60) !important; }
.dark-surface .text-white\/70   { color: rgba(255,255,255,0.70) !important; }
.dark-surface .text-white\/75   { color: rgba(255,255,255,0.75) !important; }
.dark-surface .text-white\/80   { color: rgba(255,255,255,0.80) !important; }
.dark-surface .text-white\/85   { color: rgba(255,255,255,0.85) !important; }
.dark-surface .text-white\/90   { color: rgba(255,255,255,0.90) !important; }
.dark-surface .text-white\/95   { color: rgba(255,255,255,0.95) !important; }

/* Sidebar active item — bold orange highlight that wins regardless of
   class order, Tailwind compile state, or browser CSS cache. Bumped to
   orange-600 (#ea580c) with a bright orange-200 ring + thick left bar so
   it's unmistakable against the slate-950 sidebar. */
.dark-surface a.is-active,
.dark-surface [data-sidebar-link].is-active {
  position: relative;
  background-color: #ea580c !important;     /* orange-600 */
  color: #ffffff !important;
  box-shadow:
    0 10px 20px -4px rgba(194, 65, 12, 0.55),
    inset 0 0 0 2px #fb923c !important;     /* orange-400 inner ring */
  z-index: 1;
}
.dark-surface a.is-active::before,
.dark-surface [data-sidebar-link].is-active::before {
  content: '';
  position: absolute;
  left: -0.75rem; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 70%;
  background: #fed7aa;                     /* orange-200 left bar */
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(254, 215, 170, 0.6);
}
.dark-surface a.is-active *,
.dark-surface [data-sidebar-link].is-active * { color: #ffffff !important; }
/* Override slate text colors for the active item's icon/label */
.dark-surface a.is-active .text-slate-100,
.dark-surface a.is-active .text-slate-200,
.dark-surface a.is-active .text-slate-300 { color: #ffffff !important; }

/* Coloured-background buttons / pills — when an element itself carries a
   solid (or translucent) brand / status background colour, its text-white
   was always meant to stay white. Same goes for any bg-gradient-to-* pill.
   These selectors win against the global .text-white override because
   they're more specific. */
[class*="bg-brand-"].text-white,
[class*="bg-indigo-"].text-white,
[class*="bg-rose-"].text-white,
[class*="bg-red-"].text-white,
[class*="bg-emerald-"].text-white,
[class*="bg-green-"].text-white,
[class*="bg-amber-"].text-white,
[class*="bg-orange-"].text-white,
[class*="bg-sky-"].text-white,
[class*="bg-cyan-"].text-white,
[class*="bg-pink-"].text-white,
[class*="bg-violet-"].text-white,
[class*="bg-purple-"].text-white,
[class*="bg-fuchsia-"].text-white,
[class*="bg-teal-"].text-white,
[class*="bg-slate-9"].text-white,
[class*="bg-zinc-9"].text-white,
[class*="bg-neutral-9"].text-white,
[class*="bg-gradient-"].text-white { color: #ffffff !important; }
[class*="bg-brand-"].text-white\/85,
[class*="bg-gradient-"].text-white\/85 { color: rgba(255,255,255,0.85) !important; }
[class*="bg-brand-"].text-white\/70,
[class*="bg-gradient-"].text-white\/70 { color: rgba(255,255,255,0.70) !important; }
[class*="bg-brand-"].text-white\/60,
[class*="bg-gradient-"].text-white\/60 { color: rgba(255,255,255,0.60) !important; }

/* Brand text — keep indigo readable on light. */
.text-brand-400 { color: var(--brand-600) !important; }
.text-brand-300 { color: var(--brand-600) !important; }

/* Borders that were tuned for the old dark theme. The views use
   border-white/[opacity] — under light mode those vanish, so map them
   to dark hairlines. */
[class*="border-white\\/\\["], [class*="border-white/"] { border-color: var(--hairline) !important; }
[class*="ring-white\\/\\["],   [class*="ring-white/"]   { --tw-ring-color: var(--hairline) !important; }

/* Hairline grid dividers — many cards use bg-white/[0.06] as the inter-tile
   line. Map to a real visible gray. */
.bg-white\/\[0\.04\],
.bg-white\/\[0\.05\],
.bg-white\/\[0\.06\],
.bg-white\/\[0\.08\],
.bg-white\/\[0\.10\] { background-color: var(--hairline) !important; }

/* Container surface inside hover/group states (was bg-white/[0.07]) */
.bg-white\/\[0\.07\]       { background-color: var(--raised) !important; }
.hover\:bg-white\/\[0\.07\]:hover,
.hover\:bg-white\/\[0\.08\]:hover,
.hover\:bg-white\/\[0\.10\]:hover,
.hover\:bg-white\/\[0\.15\]:hover { background-color: var(--raised) !important; }

/* Sticky header. */
.glass-bar {
  background: rgba(245, 245, 247, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.glass, .glass-soft, .glass-dark {
  background: var(--container);
  border: 1px solid var(--hairline);
  color: var(--text);
}

/* ============================================================
   PROSE — markdown content inside cards.
   ============================================================ */

.prose code {
  background: rgba(99, 102, 241, 0.10);
  color: var(--brand-600);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}
.prose pre {
  background: #0b0b10;
  color: #e4e4e7;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,0.08);
}
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose a { color: var(--brand-500); }
.prose a:hover { color: var(--brand-600); }

.prose-on-dark p, .prose-on-dark li, .prose-on-dark blockquote { color: var(--text-dim); }
.prose-on-dark h1, .prose-on-dark h2, .prose-on-dark h3 { color: var(--text); }

/* ============================================================
   UTILITIES
   ============================================================ */

.on-dark { color: var(--text); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ============================================================
   PLATFORM TILE — square that holds the real brand SVG.
   Base = white surface with hairline border; per-platform tint
   stays subtle and tuned for light backgrounds.
   ============================================================ */

.platform-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  background: var(--raised);
  color: var(--text-muted);
}
.platform-tile svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* Per-platform tints. Backgrounds are translucent so they sit on top of
   the white tile naturally; text color carries the brand identity. */
.pt-facebook   { color: #1877f2; background: #e7f0fe; border-color: #c2d8fb; }
.pt-instagram  { color: #c81e62; background: #fde6ef; border-color: #f9c2d6; }
.pt-twitter    { color: #0f0f0f; background: #ececef; border-color: #d4d4d8; }
.pt-tiktok     { color: #ff2e63; background: #fde7ec; border-color: #fbc6d1; }
.pt-youtube    { color: #ff0000; background: #ffe5e5; border-color: #ffb8b8; }
.pt-linkedin   { color: #0a66c2; background: #e3f0fb; border-color: #b9d6f3; }
.pt-reddit     { color: #ff4500; background: #ffe9dd; border-color: #ffc4a3; }
.pt-gmail      { color: #c5221f; background: #fde6e5; border-color: #f9bcb9; }
.pt-telegram   { color: #229ed9; background: #def0fa; border-color: #b1dcf2; }
.pt-discord    { color: #5865f2; background: #e7e9fe; border-color: #c4c8fb; }
.pt-quora      { color: #b92b27; background: #fbe1e0; border-color: #f4b6b3; }
.pt-trustpilot { color: #00875a; background: #d9f3e6; border-color: #a6e1c2; }
.pt-indeed     { color: #1a4ec2; background: #e4ebfa; border-color: #b8c8f1; }
.pt-cashapp    { color: #00a82d; background: #d8f3df; border-color: #a4e2b6; }
.pt-netflix    { color: #c4070d; background: #fde0e2; border-color: #f8b4b8; }
.pt-dating     { color: #db2777; background: #fde6f0; border-color: #f9c2d9; }
.pt-vpn        { color: #4f46e5; background: #e6e7fb; border-color: #c4c6f3; }
.pt-whatsapp   { color: #25d366; background: #dcf8e6; border-color: #a7e9c2; }
.pt-snapchat   { color: #d9b400; background: #fff7c4; border-color: #f1dd6e; }
.pt-pinterest  { color: #e60023; background: #ffe1e5; border-color: #f9b8c0; }
.pt-spotify    { color: #1db954; background: #dcf3e1; border-color: #a6e3b6; }
.pt-apple      { color: #0f0f0f; background: #ececef; border-color: #d4d4d8; }
.pt-crypto     { color: #f0b90b; background: #fff3cc; border-color: #f1de7c; }
.pt-globe      { color: #4f46e5; background: #e0e7ff; border-color: #c4c6f3; }
.pt-gift       { color: #b45309; background: #fde9c8; border-color: #f3c98c; }
.pt-email      { color: #4f4f55; background: var(--raised); border-color: var(--hairline-strong); }
.pt-default    { color: #4f4f55; background: var(--raised); border-color: var(--hairline-strong); }
/* 2026-05-24 — brand tints for newly-added platform icons. */
.pt-threads    { color: #0f0f0f; background: #ececef; border-color: #d4d4d8; }
.pt-truthsocial{ color: #5d2bd9; background: #ece6fb; border-color: #c8b8f3; }
.pt-etsy       { color: #d56627; background: #fdebdc; border-color: #f5c69b; }
.pt-bluesky    { color: #0285ff; background: #dceeff; border-color: #9fc8f5; }
.pt-craigslist { color: #4f3da5; background: #e4e1f4; border-color: #b9b1e1; }
.pt-outlook    { color: #0072c6; background: #dceeff; border-color: #a1cef0; }
.pt-google     { color: #4285f4; background: #e3eefe; border-color: #b3cbf5; }

/* Image-backed tile — replaces the SVG glyph with an uploaded category logo.
   The image fills the whole tile (object-fit: cover) so the platform-tile
   sizes (sm/md/lg) keep their familiar dimensions and rounded corners. */
.pt-image      { background: #ffffff; border-color: var(--hairline-strong); padding: 0; overflow: hidden; }
.pt-image img  { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Size variants */
.platform-tile.sm { width: 2rem;   height: 2rem;   border-radius: 0.5rem; }
.platform-tile.sm svg { width: 0.875rem; height: 0.875rem; }
.platform-tile.lg { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; }
.platform-tile.lg svg { width: 1.625rem; height: 1.625rem; }

/* ============================================================
   PLATFORM TABS — horizontal scroll pills above the catalog.
   Inactive: white tile + brand-colored icon + dark label.
   Active:   filled with that platform's brand color, white text.
   This is where the page picks up real color without going neon.
   ============================================================ */

.platform-tabs::-webkit-scrollbar { display: none; }
.platform-tabs { scrollbar-width: none; }

.platform-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--hairline-strong);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-decoration: none;
}
.platform-tab svg { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; }
.platform-tab:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px -6px rgba(0,0,0,0.08); }

/* Brand color for the SVG on the inactive state — gives the row life. */
.platform-tab.pt-all       { color: var(--text); }
.platform-tab.pt-all svg   { color: var(--brand-600); }
.platform-tab.pt-facebook svg   { color: #1877f2; }
.platform-tab.pt-instagram svg  { color: #c81e62; }
.platform-tab.pt-twitter svg    { color: #0f0f0f; }
.platform-tab.pt-tiktok svg     { color: #ff2e63; }
.platform-tab.pt-youtube svg    { color: #ff0000; }
.platform-tab.pt-linkedin svg   { color: #0a66c2; }
.platform-tab.pt-reddit svg     { color: #ff4500; }
.platform-tab.pt-gmail svg      { color: #c5221f; }
.platform-tab.pt-telegram svg   { color: #229ed9; }
.platform-tab.pt-discord svg    { color: #5865f2; }
.platform-tab.pt-quora svg      { color: #b92b27; }
.platform-tab.pt-trustpilot svg { color: #00875a; }
.platform-tab.pt-indeed svg     { color: #1a4ec2; }
.platform-tab.pt-cashapp svg    { color: #00a82d; }
.platform-tab.pt-netflix svg    { color: #c4070d; }
.platform-tab.pt-threads svg    { color: #0f0f0f; }
.platform-tab.pt-truthsocial svg{ color: #5d2bd9; }
.platform-tab.pt-etsy svg       { color: #d56627; }
.platform-tab.pt-bluesky svg    { color: #0285ff; }
.platform-tab.pt-craigslist svg { color: #4f3da5; }
.platform-tab.pt-outlook svg    { color: #0072c6; }
.platform-tab.pt-google svg     { color: #4285f4; }
.platform-tab.pt-email svg,
.platform-tab.pt-globe svg,
.platform-tab.pt-gift svg,
.platform-tab.pt-default svg    { color: var(--brand-600); }

/* Active state — saturated brand fill, white text + icon. */
.platform-tab.is-active           { color: #fff; }
.platform-tab.is-active svg       { color: #fff !important; }
.platform-tab.pt-all.is-active        { background: var(--brand-600); border-color: var(--brand-700); }
.platform-tab.pt-facebook.is-active   { background: #1877f2; border-color: #1462cb; }
.platform-tab.pt-instagram.is-active  { background: #c81e62; border-color: #a01950; }
.platform-tab.pt-twitter.is-active    { background: #0f0f0f; border-color: #000; }
.platform-tab.pt-tiktok.is-active     { background: #ff2e63; border-color: #d62352; }
.platform-tab.pt-youtube.is-active    { background: #ff0000; border-color: #cc0000; }
.platform-tab.pt-linkedin.is-active   { background: #0a66c2; border-color: #08549c; }
.platform-tab.pt-reddit.is-active     { background: #ff4500; border-color: #cc3700; }
.platform-tab.pt-gmail.is-active      { background: #c5221f; border-color: #9e1b19; }
.platform-tab.pt-telegram.is-active   { background: #229ed9; border-color: #1c84b3; }
.platform-tab.pt-discord.is-active    { background: #5865f2; border-color: #4751c9; }
.platform-tab.pt-quora.is-active      { background: #b92b27; border-color: #962220; }
.platform-tab.pt-trustpilot.is-active { background: #00875a; border-color: #006a48; }
.platform-tab.pt-indeed.is-active     { background: #1a4ec2; border-color: #163e9c; }
.platform-tab.pt-cashapp.is-active    { background: #00a82d; border-color: #008724; }
.platform-tab.pt-netflix.is-active    { background: #c4070d; border-color: #9a060a; }
.platform-tab.pt-email.is-active,
.platform-tab.pt-globe.is-active,
.platform-tab.pt-gift.is-active,
.platform-tab.pt-default.is-active    { background: var(--brand-600); border-color: var(--brand-700); }

/* Subcategory pill — secondary filter row under the platform tabs. */
.sub-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--raised);
  border: 1px solid var(--hairline);
  color: var(--text-dim);
  transition: background 0.12s ease;
  text-decoration: none;
}
.sub-pill:hover { background: #fff; color: var(--text); }
.sub-pill.is-active { background: var(--text); color: var(--canvas); border-color: var(--text); }

/* ============================================================
   LISTING ROW — AccsZone-style wide row layout.
   Container draws the outer border + rounding; rows are
   separated by hairlines and hover-lift to white.
   ============================================================ */

.listing-table {
  background: var(--container);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.75rem;
  overflow: hidden;
}
.listing-table-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.625rem 1rem;
  background: var(--raised);
  border-bottom: 1px solid var(--hairline-strong);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.listing-table-head .h-product { grid-column: 1 / 3; }
.listing-table-head .h-stock   { text-align: right; min-width: 70px; }
.listing-table-head .h-price   { text-align: right; min-width: 90px; }
.listing-table-head .h-cta     { width: 64px; text-align: right; }
@media (max-width: 640px) {
  .listing-table-head { display: none; }
}

.listing-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--container);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.12s ease;
  text-decoration: none;
  color: var(--text);
}
.listing-row:hover { background: #fff; }
.listing-row:last-child { border-bottom: none; }

.lr-platform { display: flex; align-items: center; }
.lr-main { min-width: 0; }
.lr-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.lr-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  margin-top: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve space for 2 lines so single-line titles still take the same
     vertical space as two-line titles — keeps every listing row aligned
     on mobile. Pat 2026-05-24. */
  min-height: 2.8em;
}
.lr-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 0.25rem;
}

.lr-stock { text-align: right; min-width: 70px; }
.lr-stock-num { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.1; }
.lr-stock-out { color: var(--text-faint); }
.lr-stock-label { font-size: 10.5px; color: var(--text-faint); margin-top: 0.125rem; }

.lr-price { text-align: right; min-width: 90px; }
.lr-price-num { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.1; }
.lr-price-label { font-size: 10.5px; color: var(--text-faint); margin-top: 0.125rem; }

.lr-cta { display: flex; justify-content: flex-end; }
.lr-buy {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.875rem;
  border-radius: 0.4rem;
  background: var(--brand-600);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--brand-700);
  transition: background 0.12s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.listing-row:hover .lr-buy { background: var(--brand-500); }

@media (max-width: 640px) {
  .listing-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "platform main cta"
      "platform stock price";
    row-gap: 0.5rem;
    column-gap: 0.75rem;
  }
  .lr-platform { grid-area: platform; align-self: start; }
  .lr-main     { grid-area: main; }
  .lr-cta      { grid-area: cta; align-self: start; }
  .lr-stock    { grid-area: stock; text-align: left; min-width: 0; }
  .lr-price    { grid-area: price; text-align: right; min-width: 0; }
  .lr-stock-label, .lr-price-label { display: inline; margin-left: 0.25rem; }
  .lr-stock-num, .lr-price-num { display: inline; font-size: 13px; }
}

/* ============================================================
   BUTTONS — primary is solid indigo, secondary is a near-white
   gray with a 1px border. No glow, no gradient.
   ============================================================ */

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  border: 1px solid var(--brand-700);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 0 rgba(99,102,241,0.0);
  transition: background 160ms ease, box-shadow 200ms ease, transform 160ms ease;
}
.btn-primary:hover {
  background: var(--brand-500);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 10px 24px -10px rgba(99,102,241,0.55);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  transition: background 0.12s ease;
}
.btn-secondary:hover { background: #ffffff; }

/* Become-a-Reseller button — brand purple/indigo with a soft outer glow,
   tying it to the rest of the dashboard's primary color rather than
   shouting in amber. */
.btn-reseller {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #4f46e5 100%);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 14px -6px rgba(99,102,241,0.55);
  transition: filter 160ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.btn-reseller:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 14px 30px -10px rgba(124,58,237,0.65),
    0 0 0 4px rgba(139,92,246,0.20);
  transform: translateY(-1px);
}
.btn-reseller:active { transform: translateY(0); }
.btn-reseller svg { stroke: currentColor; }

/* Sidebar scrim — fade in/out alongside the sidebar's transform slide. */
.ypg-scrim { transition: opacity 220ms ease; opacity: 1; }
.ypg-scrim.hidden { opacity: 0; }

/* ============================================================
   HOME — colored stat counters, live ticker, accent strip.
   This is where the light-gray index "comes alive".
   ============================================================ */

/* Slim multi-color accent strip pinned just below the sticky header.
   Three brand-aligned bands so the page reads as a real product, not
   another flat gray template. */
.hero-accent-strip {
  height: 3px;
  background: linear-gradient(90deg,
    #4f46e5 0%, #4f46e5 25%,
    #c81e62 25%, #c81e62 50%,
    #00875a 50%, #00875a 75%,
    #f59e0b 75%, #f59e0b 100%);
}

/* Colored stat numbers. */
.stat-emerald { color: #047857; }
.stat-brand   { color: var(--brand-600); }
.stat-amber   { color: #b45309; }
.stat-pink    { color: #be185d; }

/* Hero platform mosaic — 3x3 grid of brand-tinted tiles, used as the
   "what we sell" illustration on the right side of the hero. Each tile
   reuses the existing .pt-* brand colors so the page picks up real
   platform identity without inventing new palette. */
.platform-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  width: 296px;
}
.mosaic-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 1rem;
  border: 1px solid var(--hairline-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  background: var(--raised);
  color: var(--text-muted);
}
.mosaic-tile svg { width: 1.625rem; height: 1.625rem; fill: currentColor; }
.mosaic-tile .mosaic-tile-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mosaic-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -8px rgba(0,0,0,0.12);
  border-color: var(--text-faint);
}

/* Live pulse dot on the currently-restocking tile. */
.mosaic-tile.is-live::after {
  content: '';
  position: absolute;
  top: 0.55rem; right: 0.55rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(16,185,129,0.30);
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* Gentle staggered float so the mosaic feels alive without being noisy. */
.mosaic-tile { animation: mosaic-float 7s ease-in-out infinite; }
.platform-mosaic > .mosaic-tile:nth-child(1) { animation-delay: 0s; }
.platform-mosaic > .mosaic-tile:nth-child(2) { animation-delay: 0.5s; }
.platform-mosaic > .mosaic-tile:nth-child(3) { animation-delay: 1.0s; }
.platform-mosaic > .mosaic-tile:nth-child(4) { animation-delay: 1.5s; }
.platform-mosaic > .mosaic-tile:nth-child(5) { animation-delay: 2.0s; }
.platform-mosaic > .mosaic-tile:nth-child(6) { animation-delay: 2.5s; }
.platform-mosaic > .mosaic-tile:nth-child(7) { animation-delay: 3.0s; }
.platform-mosaic > .mosaic-tile:nth-child(8) { animation-delay: 3.5s; }
.platform-mosaic > .mosaic-tile:nth-child(9) { animation-delay: 4.0s; }
@keyframes mosaic-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.platform-mosaic:hover .mosaic-tile { animation-play-state: paused; }

/* Reuse the platform tile color palette so each tile carries real brand
   identity. The tile root + svg both pull from the .pt-* color so the
   icon stays brand-tinted on its own background. */
.mosaic-tile.pt-facebook   { color: #1877f2; background: #e7f0fe; border-color: #c2d8fb; }
.mosaic-tile.pt-instagram  { color: #c81e62; background: #fde6ef; border-color: #f9c2d6; }
.mosaic-tile.pt-twitter    { color: #0f0f0f; background: #ececef; border-color: #d4d4d8; }
.mosaic-tile.pt-tiktok     { color: #ff2e63; background: #fde7ec; border-color: #fbc6d1; }
.mosaic-tile.pt-youtube    { color: #ff0000; background: #ffe5e5; border-color: #ffb8b8; }
.mosaic-tile.pt-linkedin   { color: #0a66c2; background: #e3f0fb; border-color: #b9d6f3; }
.mosaic-tile.pt-reddit     { color: #ff4500; background: #ffe9dd; border-color: #ffc4a3; }
.mosaic-tile.pt-gmail      { color: #c5221f; background: #fde6e5; border-color: #f9bcb9; }
.mosaic-tile.pt-telegram   { color: #229ed9; background: #def0fa; border-color: #b1dcf2; }
.mosaic-tile.pt-discord    { color: #5865f2; background: #e7e9fe; border-color: #c4c8fb; }
.mosaic-tile.pt-quora      { color: #b92b27; background: #fbe1e0; border-color: #f4b6b3; }
.mosaic-tile.pt-trustpilot { color: #00875a; background: #d9f3e6; border-color: #a6e1c2; }
.mosaic-tile.pt-indeed     { color: #1a4ec2; background: #e4ebfa; border-color: #b8c8f1; }
.mosaic-tile.pt-cashapp    { color: #00a82d; background: #d8f3df; border-color: #a4e2b6; }
.mosaic-tile.pt-netflix    { color: #c4070d; background: #fde0e2; border-color: #f8b4b8; }
.mosaic-tile.pt-email,
.mosaic-tile.pt-globe,
.mosaic-tile.pt-gift,
.mosaic-tile.pt-default    { color: var(--brand-600); background: #eef2ff; border-color: #c7d2fe; }
.mosaic-tile .mosaic-tile-label { color: inherit; opacity: 0.85; }

/* Live-activity ticker — horizontal scrolling row of recent orders. */
.live-ticker-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  background: var(--container);
  border: 1px solid var(--hairline-strong);
  border-radius: 0.625rem;
  overflow: hidden;
  max-width: 100%;
}
.live-ticker-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #ecfdf5;
  border-right: 1px solid #a7f3d0;
  color: #047857;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.live-ticker-label .live-dot {
  position: relative;
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #10b981;
}
.live-ticker-label .live-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: #10b981;
  opacity: 0.5;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50%      { transform: scale(1.4); opacity: 0; }
}
.live-ticker-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.live-ticker-row {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  animation: live-marquee 42s linear infinite;
}
.live-ticker-wrap:hover .live-ticker-row { animation-play-state: paused; }
@keyframes live-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.live-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: var(--text-dim);
}
.live-ticker-item .platform-tile {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
}
.live-ticker-item .platform-tile svg { width: 0.75rem; height: 0.75rem; }
.live-ticker-item .lt-text strong { color: var(--text); font-weight: 700; }
.live-ticker-item .lt-ago {
  color: var(--text-faint);
  font-size: 11px;
  padding-left: 0.5rem;
  border-left: 1px solid var(--hairline);
  margin-left: 0.25rem;
}

/* Listing-row badges — colored chips next to the title. */
.lr-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.lr-badge-hot { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.lr-badge-low { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.lr-badge-new { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.lr-badge-legacy { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }