/* Purple/Blue chromatic animated text (KEEP FONT/VIBE SAME) */
.chromatic-text {
  /* ✅ IMPORTANT: DO NOT change font settings at all (keeps Featured/Boosted/Plus same) */

  /* ✅ Enable “chosen colors” while keeping purple/blue as fallback */
  background: linear-gradient(
    90deg,
    var(--c1, #7c3aed),
    var(--c2, #2563eb),
    var(--c1, #7c3aed),
    var(--c2, #2563eb)
  );
  background-size: 300% 100%;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  /* ✅ keep the same animation + glow */
  animation: chromaMove 2.4s linear infinite;
  text-shadow: 0 0 12px rgba(124, 58, 237, 0.25);

  /* ✅ prevent “invisible/blurred” chromatic text issues */
  filter: none;
  opacity: 1;
  visibility: visible;
}

@keyframes chromaMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Boosted pill should look clean, not pulse weirdly */
.boost-glow {
  animation: none !important;
  box-shadow: none !important;
}

.sc-boost-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(124,58,237,0.14);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.45);
  color:#4c1d95;
  flex-wrap: wrap;
}

.sc-boost-pill .boost-main{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  color:#5b21b6;
  white-space: nowrap;
}

.sc-boost-pill .boost-plus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,0.16);
  background: linear-gradient(180deg, #ffffff, #f6f1ff);
  color:#7c3aed;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .03em;
  white-space: nowrap;
}

.sc-boost-pill .boost-timer{
  font-size: 12px;
  font-weight: 800;
  color:#7c3aed;
  opacity: 1;
  white-space: nowrap;
}

/* clean little icon holders */
.sc-btn-icon,
.sc-ship-icon{
  width: 19px;
  height: 19px;
  display:inline-block;
  flex: 0 0 auto;
}

.sc-btn-icon svg,
.sc-ship-icon svg{
  width: 100%;
  height: 100%;
  display:block;
}

.sc-btn-icon svg{
  stroke: currentColor;
}

.sc-ship-icon svg{
  stroke: #6d28d9;
}

/* headings stronger + easier to see */
.sc-section-title{
  font-size: clamp(2rem, 3vw, 2.7rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em;
  color: #ffffff !important;
  text-shadow:
    0 8px 24px rgba(124,58,237,0.18),
    0 0 16px rgba(37,99,235,0.12);
}

.sc-section-title.chromatic-text{
  text-shadow:
    0 8px 24px rgba(124,58,237,0.20),
    0 0 16px rgba(37,99,235,0.14);
}

.sc-section-subtext{
  color: rgba(232,225,255,0.74) !important;
}

/* shipping badge icon + text alignment */
.sc-card-ship-badge{
  gap: 9px !important;
  font-size: 13px !important;
}

/* add/buy buttons icon spacing */
.sc-listing-card .add-btn,
.sc-listing-card .buy-btn,
#products-grid > div .add-btn,
#products-grid > div .buy-btn,
#featured-row > div .add-btn,
#featured-row > div .buy-btn,
#grid > div .add-btn,
#grid > div .buy-btn,
#product-wrap #add-to-cart,
#product-wrap #buy-now{
  gap: 10px !important;
}

/* product page buttons should not inject emoji anymore */
#product-wrap #add-to-cart::before,
#product-wrap #buy-now::before{
  content: none !important;
}

/* Optional helper */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   ✅ Background vibe (safe version)
   ========================================================= */

:root{
  --sc-purple: #7c3aed;
  --sc-blue: #2563eb;
}

body{
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ✅ FIX (NECESSARY):
   DO NOT override Tailwind bg-* utilities on body.
   The old rule was forcing background-color: inherit which breaks bg-gray-100 / bg-white pages. */
/* (removed) body.bg-white/body.bg-gray-100/body[class*="bg-"] inherit override */

/* Main animated glow layer */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(850px 520px at 88% 18%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(800px 520px at 55% 92%, rgba(124,58,237,.22), transparent 58%),
    linear-gradient(180deg, rgba(245,247,255,1), rgba(236,242,255,1));

  filter: saturate(1.15);
  animation: scGlowMove 14s ease-in-out infinite alternate;
}

/* Subtle animated tech grid overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: .45;
  background-image:
    linear-gradient(rgba(124,58,237,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.08) 1px, transparent 1px);
  background-size: 72px 72px;

  mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 68%);
  animation: scGridDrift 18s linear infinite;
}

@keyframes scGlowMove{
  0%{
    transform: scale(1) translate3d(0, 0, 0);
  }
  50%{
    transform: scale(1.03) translate3d(-10px, 12px, 0);
  }
  100%{
    transform: scale(1.05) translate3d(14px, -10px, 0);
  }
}

@keyframes scGridDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-72px, 72px, 0); }
}

/* =========================================================
   ✅ HARD FIX: If any page uses blur overlays / “locked” states,
   never blur chromatic text or navbar text.
   ========================================================= */

.blurred .chromatic-text,
.locked .chromatic-text,
.dim .chromatic-text,
.blurred nav *,
.locked nav *,
.dim nav *{
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce){
  body::after, body::before { animation: none !important; }
  .chromatic-text { animation: none !important; }
}

/* =========================================================
   ✅ NEW (GAME ONLY): Neon retro grid background like screenshot
   - applies ONLY on pages that have: <body data-hide-inbox="1">
     (your game page already has this)
   - does NOT touch other pages
   ========================================================= */

body[data-hide-inbox="1"]{
  /* force a dark base for the game vibe */
  background-color: #05070d !important;
}

/* Override the global glow layer on the GAME page */
body[data-hide-inbox="1"]::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* dark vignette + neon glows */
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0, 255, 214, 0.18), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(800px 520px at 55% 85%, rgba(56, 189, 248, 0.12), transparent 62%),
    radial-gradient(1200px 700px at 50% 55%, rgba(255,255,255,0.03), transparent 60%),
    linear-gradient(180deg, #03040a 0%, #050817 55%, #02030a 100%);

  filter: saturate(1.25) contrast(1.05);
  animation: scGameGlowMove 12s ease-in-out infinite alternate;
}

/* Override the global grid on the GAME page with perspective neon grid */
body[data-hide-inbox="1"]::before{
  content:"";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;

  /* two-tone neon grid */
  background-image:
    linear-gradient(rgba(0, 255, 214, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.22) 1px, transparent 1px);
  background-size: 70px 70px;

  /* perspective + tilt like the screenshot floor */
  transform-origin: 50% 75%;
  transform:
    perspective(900px)
    rotateX(68deg)
    translate3d(0, 140px, 0);

  /* fade toward the horizon */
  mask-image: linear-gradient(to top, black 0%, black 40%, transparent 78%);
  opacity: 0.9;

  /* little drift so it feels alive */
  animation: scGameGridDrift 10s linear infinite;
}

/* extra vignette layer (so edges are darker like screenshot) */
body[data-hide-inbox="1"]::selection{ background: rgba(139,92,246,.35); }

@keyframes scGameGridDrift{
  0%{ background-position: 0px 0px; }
  100%{ background-position: 0px 70px; }
}

@keyframes scGameGlowMove{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-10px, 8px, 0) scale(1.02); }
  100%{ transform: translate3d(12px, -10px, 0) scale(1.04); }
}

/* Respect reduced motion on GAME background too */
@media (prefers-reduced-motion: reduce){
  body[data-hide-inbox="1"]::before,
  body[data-hide-inbox="1"]::after{
    animation: none !important;
  }
}

/* =========================================================
   ✅ NEW (PRODUCT PAGE): Long description safety
   - prevents long descriptions from stretching the page
   - preserves line breaks (Enter) from the seller
   - optional scroll container if super long
   ========================================================= */

/* Apply safely to the product content area without changing layout */
#product-wrap{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Preserve formatting for description-like blocks */
#product-wrap p,
#product-wrap .description,
#product-wrap .desc,
#product-wrap .product-desc,
#product-wrap [data-desc],
#product-wrap [data-field="description"]{
  white-space: pre-wrap;         /* keeps user line breaks */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* If product.js uses <pre> for description, keep it readable */
#product-wrap pre{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* OPTIONAL: if you later add class="sc-desc-scroll" to the description element */
.sc-desc-scroll{
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;            /* room for scrollbar */
}

/* =========================================================
   ✅ Sell City: seller link underline fix (works for chromatic text too)
========================================================= */
.sc-seller-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none; /* we draw our own underline */
}

/* underline “bar” that shows on hover */
.sc-seller-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  border-radius:999px;
  opacity:0;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
  background: rgba(17,24,39,.85); /* default: black-ish */
}

/* when chromatic, underline becomes gradient so it shows */
.sc-seller-link.sc-seller-link--chroma::after{
  background: linear-gradient(90deg, var(--c1,#7c3aed), var(--c2,#3b82f6));
}

.sc-seller-link:hover::after{
  opacity:1;
  transform: translateY(0);
}

/* =========================================================
   ✅ ONLY FIX YOU ASKED FOR:
   Out-of-stock "Manage" menu hover text turning white.
   We ONLY target the OOS modal container by its ids,
   and force text color to stay dark on hover.
   (No other styling changes.)
========================================================= */
#sc-oos-modal-backdrop button,
#sc-oos-modal-backdrop a{
  color:#111827;
  -webkit-text-fill-color: initial;
}

#sc-oos-modal-backdrop button:hover,
#sc-oos-modal-backdrop a:hover,
#sc-oos-modal-backdrop button:focus,
#sc-oos-modal-backdrop a:focus{
  color:#111827;
  -webkit-text-fill-color: initial;
}

/* Keep delete red (so it doesn't go white) */
#sc-oos-modal-backdrop #sc-oos-delete{
  color:#000000;
}
#sc-oos-modal-backdrop #sc-oos-delete:hover,
#sc-oos-modal-backdrop #sc-oos-delete:focus{
  color:#b91c1c;
}

/* =========================================================
   ✅ NEW (NECESSARY): MOBILE NAVBAR + BROWSE PAGE FIXES
   - Phones only (desktop + iPad stay the same)
   - Fixes navbar wrapping / cramped links
   - Fixes “browse/view all listings only shows 1 row / weird scroll”
========================================================= */

@media (max-width: 768px){

  /* -------------------------
     1) NAVBAR: stack cleanly on phone
     ------------------------- */

  nav{
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* brand on its own row */
  nav > a{
    width: 100% !important;
  }

  /* link row becomes a scrollable chip row instead of wrapping ugly */
  nav > div{
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
    scrollbar-width: none; /* Firefox */
  }
  nav > div::-webkit-scrollbar{ display:none; }

  /* keep nav links readable + not shrinking */
  nav > div a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* keep auth slot from squishing everything */
  #nav-auth-slot{
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* ✅ NEW (NECESSARY): “scroll hint” slider under nav links (phones only) */
  nav > div{
    position: relative !important;
  }

  /* base track */
  nav > div::after{
    content:"";
    position:absolute;
    left: 10px;
    right: 10px;
    bottom: 0px;
    height: 3px;
    border-radius: 999px;
    background: rgba(17,24,39,0.10);
    pointer-events:none;
  }

  /* moving thumb */
  nav > div::before{
    content:"";
    position:absolute;
    left: 10px;
    bottom: 0px;
    height: 3px;
    width: 44px;
    border-radius: 999px;
    background: rgba(124,58,237,0.55);
    animation: scNavHint 1.8s ease-in-out infinite;
    pointer-events:none;
  }

  @keyframes scNavHint{
    0%{ transform: translateX(0); opacity: .65; }
    50%{ transform: translateX(70px); opacity: 1; }
    100%{ transform: translateX(0); opacity: .65; }
  }

  /* -------------------------
     2) BROWSE / VIEW ALL LISTINGS:
        If any container is accidentally horizontal scrolling,
        force it back to normal vertical flow on phones.
     ------------------------- */

  /* common “listings rows” that get forced into a single row by overflow */
  #products,
  #listings,
  #listing-grid,
  #browse-grid,
  #results-grid,
  #viewall-grid,
  .product-grid,
  .products-grid,
  .listings-grid{
    overflow-x: visible !important;
  }

  /* If script.js uses a horizontal flex row, make it wrap on mobile */
  #products,
  #listings,
  #listing-grid,
  #browse-grid,
  #results-grid,
  #viewall-grid{
    flex-wrap: wrap !important;
  }

  /* If it’s a grid already, lock it to 1 column on phone */
  .product-grid,
  .products-grid,
  .listings-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Any big cards should fit screen width */
  .product-card,
  .listing-card,
  .card{
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =========================================================
   ✅ NEW (NECESSARY): MOBILE DASHBOARD EDIT SCROLL FIX
   - Fixes “can’t scroll / can’t close” when editing on iPhone
   - Only affects mobile
   - Works with most modal/backdrop ids/classes
========================================================= */

@media (max-width: 640px){

  /* Backdrops/overlays should allow vertical scroll */
  .modal-backdrop,
  .sc-modal-backdrop,
  #edit-backdrop,
  #modal-backdrop,
  #edit-modal-backdrop,
  [data-modal-backdrop]{
    position: fixed !important;
    inset: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    touch-action: pan-y !important;
  }

  /* Modal containers should NOT trap scroll with fixed height + hidden overflow */
  .modal,
  .sc-modal,
  #edit-modal,
  #editModal,
  [data-modal]{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* If your modal has an inner body container, make that the scroll area */
  .modal-body,
  .sc-modal-body,
  #edit-modal-body,
  #editModalBody,
  [data-modal-body]{
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  /* If your JS adds a "modal-open" class, keep body locked but let modal scroll */
  body.modal-open{
    overflow: hidden !important;
    touch-action: none !important;
  }
}

/* =========================================================
   ✅ NEW (NECESSARY): PRODUCT CAROUSEL "1 PHOTO AT A TIME" + FULL IMAGE VIEW
   - Fixes iPad showing multiple big photos / messy layout
   - Ensures only one main image area exists and behaves consistently
   - Forces contained image (no weird stretch/crop)
   - Makes arrow taps always stable
   - Does NOT change desktop layout vibe
========================================================= */

/* Carousel container safety */
#sc-carousel{
  overflow: hidden;
  position: relative;
}

/* Only the #main-img is allowed to be the big photo */
#sc-carousel img{
  max-width: 100%;
  height: auto;
}

/* Main image display: show full photo */
#sc-carousel #main-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Prevent any accidental second “main image” from showing big */
#sc-carousel img:not(#main-img){
  max-height: 100%;
}

/* iOS/iPad tap stability */
#img-prev,
#img-next{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =========================================================
   ✅ NEW (TABLET / IPAD PRODUCT PAGE ONLY)
   - Fixes ugly stretched product layout on iPad/tablet
   - Makes price darker/bolder and easier to see
   - Makes Add to Cart / Buy Now buttons look clean and even
   - ONLY tablet range, desktop + phone stay the same
========================================================= */

@media (min-width: 768px) and (max-width: 1180px){

  /* product page main card spacing */
  #product-wrap{
    min-width: 0;
  }

  /* big main image area looks balanced on iPad */
  #sc-carousel{
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 8px 26px rgba(15,23,42,0.06);
  }

  #sc-carousel .sc-carousel-stage{
    height: clamp(320px, 42vh, 500px) !important;
    max-height: 500px !important;
    background: #f8fafc !important;
  }

  #sc-carousel #main-img{
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px !important;
  }

  #sc-carousel .sc-carousel-arrow,
  .sc-carousel-arrow{
    width: 50px !important;
    height: 50px !important;
    font-size: 28px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
  }

  #sc-carousel .sc-carousel-count,
  .sc-carousel-count{
    font-size: 13px !important;
    padding: 7px 12px !important;
    font-weight: 900 !important;
  }

  #sc-carousel .sc-carousel-thumbs,
  .sc-carousel-thumbs{
    gap: 12px !important;
    margin-top: 12px !important;
  }

  #sc-carousel .sc-thumb,
  .sc-thumb{
    width: 84px !important;
    height: 84px !important;
    border-radius: 14px !important;
  }

  /* title looks cleaner on iPad */
  #product-wrap .sc-product-title{
    font-size: 2rem !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  /* description readability */
  #product-wrap .sc-product-desc{
    font-size: 1rem !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
  }

  /* meta / price card */
  #product-wrap .sc-product-card{
    border-radius: 20px !important;
    padding: 18px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }

  #product-wrap .sc-price-strong{
    color: #111827 !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: none !important;
  }

  #product-wrap .sc-meta-stack{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  #product-wrap .sc-meta-chip,
  #product-wrap .sc-stock-badge{
    min-height: 40px !important;
  }

  /* seller row spacing */
  #product-wrap .sc-seller-row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
    margin-bottom: 20px !important;
  }

  /* buttons row on iPad */
  #product-wrap .sc-product-actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  #product-wrap .sc-product-actions > *{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #product-wrap #add-to-cart,
  #product-wrap #buy-now,
  #product-wrap .add-btn,
  #product-wrap .buy-btn{
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    box-shadow: none !important;
  }

  #product-wrap #add-to-cart,
  #product-wrap .add-btn{
    border: 1px solid rgba(0,0,0,0.12) !important;
    background: #fff !important;
    color: #111827 !important;
  }

  #product-wrap #buy-now,
  #product-wrap .buy-btn{
    color: #fff !important;
  }
}

/* =========================================================
   ✅ HOME PAGE ONLY — Sell City Futuristic Hero
   - Keeps the rest of the website the same
   - Purple/blue brand colors
   - White line pattern like the screenshot
========================================================= */

.sc-home-hero{
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 86px 28px 92px;
  color: #fff;
  background:
    radial-gradient(720px 430px at 18% 35%, rgba(18, 0, 46, 0.72), transparent 68%),
    radial-gradient(760px 470px at 88% 32%, rgba(124, 58, 237, 0.78), transparent 66%),
    linear-gradient(135deg, #2b0054 0%, #5b0bb8 44%, #7c3aed 72%, #2563eb 100%);
  isolation: isolate;
}

/* dark left fade so the white text pops */
.sc-home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(17, 0, 35, 0.56), rgba(17, 0, 35, 0.12) 52%, rgba(37, 99, 235, 0.10)),
    radial-gradient(620px 360px at 50% 42%, rgba(255,255,255,0.08), transparent 68%);
}

/* the clean white futuristic line/rain pattern */
.sc-home-hero-lines{
  position:absolute;
  inset:-80px;
  z-index:1;
  pointer-events:none;
  opacity:.38;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scHomeLinesDrift 18s linear infinite;
}

/* soft right glow */
.sc-home-hero::after{
  content:"";
  position:absolute;
  width: 620px;
  height: 620px;
  right: -170px;
  top: -180px;
  z-index:0;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 62%);
  filter: blur(8px);
  animation: scHomeOrbFloat 7s ease-in-out infinite alternate;
}

.sc-home-hero-inner{
  position: relative;
  z-index:2;
  max-width: 760px;
  margin: 0 auto;
  transform: translateX(-120px);
}

.sc-home-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 17px;
  margin-bottom: 28px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow:
    0 14px 34px rgba(17,0,35,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .14em;
}

.sc-home-hero h1{
  margin: 0;
  font-size: clamp(58px, 8vw, 96px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: -0.075em;
  color: #fff;
  text-shadow: 0 20px 56px rgba(17,0,35,0.42);
}

.sc-home-hero h2{
  margin: 14px 0 18px;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.045em;
  color: #ffffff;
  text-shadow: 0 16px 42px rgba(17,0,35,0.34);
}

.sc-home-hero p{
  max-width: 660px;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.88);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 700;
  text-shadow: 0 12px 34px rgba(17,0,35,0.28);
}

.sc-home-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.sc-home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 15px;
  font-weight: 950;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sc-home-btn-primary{
  color: #2b0054 !important;
  background: linear-gradient(135deg, #ffffff, #f3e8ff);
  box-shadow: 0 18px 42px rgba(17,0,35,0.28);
}

.sc-home-btn-secondary{
  color: #ffffff !important;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 18px 42px rgba(17,0,35,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sc-home-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 24px 62px rgba(17,0,35,0.34),
    0 0 28px rgba(124,58,237,0.28);
}

@keyframes scHomeLinesDrift{
  0%{ background-position: 0 0; }
  100%{ background-position: 220px 420px; }
}

@keyframes scHomeOrbFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-36px,28px,0) scale(1.08); }
}

/* Mobile: keep same scrolling, just center hero nicely */
@media (max-width: 768px){
  .sc-home-hero{
    min-height: 520px;
    padding: 76px 22px 82px;
  }

  .sc-home-hero-inner{
    transform: none;
    margin: 0;
    max-width: 100%;
  }

  .sc-home-hero h1{
    font-size: clamp(52px, 16vw, 76px);
  }

  .sc-home-hero h2{
    font-size: clamp(28px, 9vw, 38px);
  }

  .sc-home-hero p{
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-home-hero-lines,
  .sc-home-hero::after{
    animation: none !important;
  }
}





/* =========================================================
   ✅ SELL CITY DARK NEON LISTING CARD UI
   - dark futuristic site background
   - listing cards like the reference photo
   - Hot Deal / Fast Shipping / Out of Stock badges
   - Buy Now animation for ALL listing cards
   - Product page Add/Buy buttons match too
========================================================= */

:root{
  --sc-card-bg: #120a23;
  --sc-card-bg-2: #1a0f33;
  --sc-card-border-a: #cf35ff;
  --sc-card-border-b: #22d3ee;
  --sc-card-purple: #7c3aed;
  --sc-card-blue: #2563eb;
  --sc-card-pink: #d946ef;
  --sc-card-cyan: #06b6d4;
}

/* Main site background like the photo */
html{
  background: #080516 !important;
}

body{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.15), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
}

/* Keep normal white panels readable on dark background */
.bg-white,
.bg-gray-50,
.card{
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}

/* ===============================
   LISTING CARD SHELL
================================ */

.sc-listing-card,
#products-grid > div,
#featured-row > div,
#grid > div,
#products > div,
#featured-products > div{
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
  padding: 18px !important;
  color: #fff !important;

  background:
    radial-gradient(520px 260px at 20% 0%, rgba(124,58,237,0.22), transparent 62%),
    radial-gradient(520px 260px at 100% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.98), rgba(10,7,24,0.98)) !important;

  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow:
    0 0 0 1px rgba(124,58,237,0.42),
    0 0 32px rgba(124,58,237,0.24),
    0 0 46px rgba(37,99,235,0.16),
    0 24px 60px rgba(0,0,0,0.34) !important;

  transition:
    transform .24s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease;
}

/* Neon border glow */
.sc-listing-card::before,
#products-grid > div::before,
#featured-row > div::before,
#grid > div::before,
#products > div::before,
#featured-products > div::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(217,70,239,0.95), rgba(124,58,237,0.70), rgba(34,211,238,0.88));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .72;
}

/* Subtle glowing atmosphere inside card */
.sc-listing-card::after,
#products-grid > div::after,
#featured-row > div::after,
#grid > div::after,
#products > div::after,
#featured-products > div::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(360px 150px at 50% 0%, rgba(255,255,255,0.08), transparent 70%),
    linear-gradient(120deg, rgba(255,255,255,0.02), transparent 42%);
  opacity:.95;
}

.sc-listing-card:hover,
#products-grid > div:hover,
#featured-row > div:hover,
#grid > div:hover,
#products > div:hover,
#featured-products > div:hover{
  transform: translateY(-6px) scale(1.015);
  filter: saturate(1.06);
  box-shadow:
    0 0 0 1px rgba(217,70,239,0.62),
    0 0 38px rgba(217,70,239,0.28),
    0 0 54px rgba(37,99,235,0.22),
    0 30px 74px rgba(0,0,0,0.42) !important;
}

/* keep content above overlays */
.sc-listing-card > *,
#products-grid > div > *,
#featured-row > div > *,
#grid > div > *,
#products > div > *,
#featured-products > div > *{
  position: relative;
  z-index: 2;
}

/* ===============================
   IMAGE AREA
================================ */

.sc-card-img-wrap{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 18px 36px rgba(0,0,0,0.22);
}

.sc-card-img-wrap img{
  margin: 0 !important;
  border-radius: 22px !important;
  height: 230px !important;
  width: 100% !important;
  object-fit: cover !important;
  background: #fff;
  transition: transform .35s ease, filter .35s ease;
}

.sc-listing-card:hover .sc-card-img-wrap img,
#products-grid > div:hover .sc-card-img-wrap img,
#featured-row > div:hover .sc-card-img-wrap img,
#grid > div:hover .sc-card-img-wrap img{
  transform: scale(1.035);
  filter: contrast(1.04) saturate(1.08);
}

/* ===============================
   HOT DEAL / OUT OF STOCK / SHIPPING BADGES
================================ */

.sc-card-top-badge{
  position:absolute;
  top: 14px;
  left: 0;
  z-index: 5;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 16px 10px 18px;
  border-radius: 0 999px 999px 0;
  font-weight: 950;
  font-size: 13px;
  color: #fff;
  letter-spacing: .02em;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.28),
    0 0 22px rgba(217,70,239,0.28);
}

.sc-card-top-badge.hot{
  background: linear-gradient(90deg, #7c3aed, #d946ef);
}

.sc-card-top-badge.sold{
  background: linear-gradient(90deg, #ef4444, #991b1b);
}

.sc-card-top-badge::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width: 14px;
  height: 14px;
  background: rgba(31,7,61,0.95);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.sc-card-ship-badge{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  color: #5b21b6;
  background: rgba(245,240,255,0.92);
  border: 1px solid rgba(124,58,237,0.14);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===============================
   CARD TEXT
================================ */

.sc-listing-card h4,
#products-grid > div h4,
#featured-row > div h4,
#grid > div h4,
#products > div h4,
#featured-products > div h4{
  margin-top: 18px !important;
  color: #fff !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em;
}

.sc-listing-card p,
#products-grid > div p,
#featured-row > div p,
#grid > div p,
#products > div p,
#featured-products > div p{
  color: rgba(232,225,255,0.72) !important;
  font-size: 15px;
  line-height: 1.65;
}

.sc-listing-card .text-gray-500,
.sc-listing-card .text-gray-600,
#products-grid > div .text-gray-500,
#products-grid > div .text-gray-600,
#featured-row > div .text-gray-500,
#featured-row > div .text-gray-600,
#grid > div .text-gray-500,
#grid > div .text-gray-600{
  color: rgba(232,225,255,0.68) !important;
}

/* Seller avatar like the Z circle */
.sc-seller-avatar,
.sc-listing-card img.w-9.h-9,
#products-grid > div img.w-9.h-9,
#featured-row > div img.w-9.h-9,
#grid > div img.w-9.h-9{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(124,58,237,0.90) !important;
  box-shadow:
    0 0 0 3px rgba(124,58,237,0.14),
    0 0 22px rgba(124,58,237,0.32) !important;
}

.sc-listing-card .sc-name-link,
#products-grid > div .sc-name-link,
#featured-row > div .sc-name-link,
#grid > div .sc-name-link{
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.sc-listing-card .text-lg.font-bold,
#products-grid > div .text-lg.font-bold,
#featured-row > div .text-lg.font-bold,
#grid > div .text-lg.font-bold{
  color: #fff !important;
  font-size: 27px !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ===============================
   ADD + BUY BUTTONS ON ALL LISTING CARDS
================================ */

.sc-listing-card .add-btn,
.sc-listing-card .buy-btn,
#products-grid > div .add-btn,
#products-grid > div .buy-btn,
#featured-row > div .add-btn,
#featured-row > div .buy-btn,
#grid > div .add-btn,
#grid > div .buy-btn,
#products > div .add-btn,
#products > div .buy-btn,
#featured-products > div .add-btn,
#featured-products > div .buy-btn{
  min-height: 58px !important;
  border-radius: 18px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .18s ease,
    border-color .18s ease !important;
}

/* Add button */
.sc-listing-card .add-btn,
#products-grid > div .add-btn,
#featured-row > div .add-btn,
#grid > div .add-btn,
#products > div .add-btn,
#featured-products > div .add-btn{
  background: rgba(20,12,40,0.70) !important;
  color: #fff !important;
  border: 1px solid rgba(124,58,237,0.70) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 12px 26px rgba(0,0,0,0.20) !important;
}

.sc-listing-card .add-btn:hover,
#products-grid > div .add-btn:hover,
#featured-row > div .add-btn:hover,
#grid > div .add-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(217,70,239,0.75) !important;
  box-shadow:
    0 0 22px rgba(124,58,237,0.24),
    0 16px 32px rgba(0,0,0,0.26) !important;
}

/* Buy Now button */
.sc-listing-card .buy-btn,
#products-grid > div .buy-btn,
#featured-row > div .buy-btn,
#grid > div .buy-btn,
#products > div .buy-btn,
#featured-products > div .buy-btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 16px 34px rgba(124,58,237,0.28),
    0 12px 28px rgba(6,182,212,0.20) !important;
}

.sc-listing-card .buy-btn::before,
#products-grid > div .buy-btn::before,
#featured-row > div .buy-btn::before,
#grid > div .buy-btn::before,
#products > div .buy-btn::before,
#featured-products > div .buy-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 17px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 54%);
}

.sc-listing-card .buy-btn::after,
#products-grid > div .buy-btn::after,
#featured-row > div .buy-btn::after,
#grid > div .buy-btn::after,
#products > div .buy-btn::after,
#featured-products > div .buy-btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(18deg);
  opacity: 0;
  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

.sc-listing-card .buy-btn:hover,
#products-grid > div .buy-btn:hover,
#featured-row > div .buy-btn:hover,
#grid > div .buy-btn:hover,
#products > div .buy-btn:hover,
#featured-products > div .buy-btn:hover{
  transform: translateY(-2px) scale(1.025);
  filter: brightness(1.06) saturate(1.12);
  box-shadow:
    0 20px 42px rgba(217,70,239,0.34),
    0 16px 36px rgba(6,182,212,0.26),
    0 0 24px rgba(124,58,237,0.26) !important;
}

.sc-listing-card .buy-btn:hover::after,
#products-grid > div .buy-btn:hover::after,
#featured-row > div .buy-btn:hover::after,
#grid > div .buy-btn:hover::after,
#products > div .buy-btn:hover::after,
#featured-products > div .buy-btn:hover::after{
  left: 135%;
  opacity: 1;
}

.sc-listing-card .buy-btn:active,
#products-grid > div .buy-btn:active,
#featured-row > div .buy-btn:active,
#grid > div .buy-btn:active{
  transform: translateY(0) scale(.985);
}

/* Disabled / out of stock */
.sc-listing-card .buy-btn:disabled,
.sc-listing-card .add-btn:disabled,
#products-grid > div .buy-btn:disabled,
#products-grid > div .add-btn:disabled,
#featured-row > div .buy-btn:disabled,
#featured-row > div .add-btn:disabled,
#grid > div .buy-btn:disabled,
#grid > div .add-btn:disabled{
  opacity: .50 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(.25) !important;
}

.sc-listing-card .buy-btn:disabled::after,
#products-grid > div .buy-btn:disabled::after,
#featured-row > div .buy-btn:disabled::after,
#grid > div .buy-btn:disabled::after{
  display:none;
}

/* ===============================
   PRODUCT PAGE ACTION BUTTONS MATCH
================================ */

#product-wrap #add-to-cart,
#product-wrap #buy-now{
  min-height: 60px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#product-wrap #add-to-cart{
  background: rgba(20,12,40,0.82) !important;
  color: #fff !important;
  border: 1px solid rgba(124,58,237,0.70) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.22) !important;
}

#product-wrap #add-to-cart::before{
  content:"🛒";
}

#product-wrap #buy-now{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.28),
    0 12px 28px rgba(6,182,212,0.20) !important;
}

#product-wrap #buy-now::before{
  content:"⚡";
  position: relative;
  z-index: 2;
}

#product-wrap #buy-now::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), rgba(255,255,255,0.64), rgba(255,255,255,0.16), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: left 1.25s cubic-bezier(.16,1,.3,1), opacity .30s ease;
}

#product-wrap #buy-now:hover{
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.06) saturate(1.12);
}

#product-wrap #buy-now:hover::after{
  left: 135%;
  opacity: 1;
}

/* Product page badges */
.sc-product-deal-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 18px;
}

.sc-product-deal-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:9px 13px;
  font-size:13px;
  font-weight:950;
  border:1px solid rgba(255,255,255,0.16);
}

.sc-product-deal-badge.hot{
  color:#fff;
  background:linear-gradient(90deg,#7c3aed,#d946ef);
}

.sc-product-deal-badge.ship{
  color:#5b21b6;
  background:rgba(245,240,255,0.92);
}

.sc-product-deal-badge.sold{
  color:#fff;
  background:linear-gradient(90deg,#ef4444,#991b1b);
}

@media (max-width: 640px){
  .sc-card-img-wrap img{
    height: 210px !important;
  }

  .sc-listing-card,
  #products-grid > div,
  #featured-row > div,
  #grid > div{
    border-radius: 26px !important;
    padding: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-listing-card,
  .sc-listing-card *,
  #products-grid > div,
  #products-grid > div *,
  #featured-row > div,
  #featured-row > div *,
  #grid > div,
  #grid > div *,
  #product-wrap #buy-now,
  #product-wrap #buy-now::after{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   ✅ SELL CITY AUTH UI — PURPLE NEON LOGIN/SIGNUP
   - Applies only to login/signup pages using body.sc-auth-page
   - Keeps Google login/signup
   - Keeps existing JS/auth IDs
========================================================= */

body.sc-auth-page{
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  color: #fff;
  background:
    radial-gradient(700px 520px at 20% 18%, rgba(217,70,239,0.38), transparent 62%),
    radial-gradient(760px 560px at 78% 24%, rgba(124,58,237,0.42), transparent 64%),
    radial-gradient(700px 520px at 48% 92%, rgba(255,0,140,0.22), transparent 66%),
    linear-gradient(135deg, #0c0618 0%, #3b075f 34%, #6d0495 66%, #1b0b36 100%) !important;
  isolation: isolate;
}

/* Override older global background layers only on auth pages */
body.sc-auth-page::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background:
    repeating-linear-gradient(
      118deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.08) 19px,
      rgba(255,255,255,0.08) 20px,
      rgba(255,255,255,0.00) 21px,
      rgba(255,255,255,0.00) 38px
    );
  mask-image: radial-gradient(circle at 55% 45%, black 0%, transparent 70%);
}

body.sc-auth-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(500px 420px at 45% 42%, rgba(255,0,200,0.20), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28));
}


/* login page wrapper */
body.sc-auth-page > .flex{
  min-height: calc(100vh - 74px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 62px 20px 46px !important;
}

/* signup page direct card centering */
body.sc-auth-page > .bg-white{
  margin: 62px auto 46px !important;
}

/* auth card itself */
body.sc-auth-page > .flex > .bg-white,
body.sc-auth-page > .bg-white{
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  padding: 30px 30px 32px !important;
  border-radius: 28px !important;

  background: rgba(18,8,35,0.34) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* avatar circle like reference */
.auth-avatar{
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(135deg, #d946ef, #7c3aed);
  box-shadow:
    0 20px 44px rgba(217,70,239,0.28),
    0 0 34px rgba(124,58,237,0.26);
}

.auth-avatar svg{
  width: 38px;
  height: 38px;
  stroke: currentColor;
}

/* titles */
body.sc-auth-page h2{
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 950 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

body.sc-auth-page h2 + p{
  color: rgba(255,255,255,0.68) !important;
}

/* Google button stays, but matches vibe */
body.sc-auth-page #google-login,
body.sc-auth-page #google-signup{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.sc-auth-page #google-login:hover,
body.sc-auth-page #google-signup:hover{
  background: rgba(255,255,255,0.16) !important;
  transform: translateY(-2px);
}

/* OR divider */
body.sc-auth-page .h-px{
  background: rgba(255,255,255,0.22) !important;
}

body.sc-auth-page .text-xs.text-gray-500{
  color: rgba(255,255,255,0.58) !important;
}

/* form fields become neon underline inputs */
body.sc-auth-page form label{
  color: rgba(255,255,255,0.72) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
}

body.sc-auth-page input[type="email"],
body.sc-auth-page input[type="password"],
body.sc-auth-page input[type="text"],
body.sc-auth-page #su-name,
body.sc-auth-page #su-email,
body.sc-auth-page #su-pass,
body.sc-auth-page #li-email,
body.sc-auth-page #li-pass{
  width: 100%;
  border: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,0.62) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  padding: 12px 4px 12px 4px !important;
  box-shadow: none !important;
  outline: none !important;
}

body.sc-auth-page input::placeholder{
  color: rgba(255,255,255,0.48) !important;
}

body.sc-auth-page input:focus{
  border-bottom-color: #ff38d4 !important;
  box-shadow: 0 10px 26px rgba(217,70,239,0.10) !important;
}

/* password eye */
body.sc-auth-page .pw-eye-btn{
  top: 30px !important;
  color: rgba(255,255,255,0.74) !important;
}

body.sc-auth-page .pw-eye-btn:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* forgot password */
body.sc-auth-page #forgot-pass{
  color: rgba(255,255,255,0.74) !important;
}

body.sc-auth-page #forgot-pass:hover{
  color: #fff !important;
}

/* Terms box on signup */
body.sc-auth-page .bg-gray-50{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.78) !important;
}

body.sc-auth-page .bg-gray-50 span{
  color: rgba(255,255,255,0.78) !important;
}

body.sc-auth-page .bg-gray-50 a{
  color: #ff79e9 !important;
}

/* main login/create buttons */
body.sc-auth-page #login-submit,
body.sc-auth-page #signup-form > button{
  border: 0 !important;
  border-radius: 2px !important;
  padding: 14px 18px !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950 !important;
  background: linear-gradient(90deg, #d000c8, #b000e8) !important;
  color: #fff !important;
  box-shadow:
    0 18px 36px rgba(217,70,239,0.22),
    0 0 24px rgba(124,58,237,0.18) !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

body.sc-auth-page #login-submit:hover,
body.sc-auth-page #signup-form > button:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 22px 46px rgba(217,70,239,0.30),
    0 0 30px rgba(124,58,237,0.24) !important;
}

/* Register / Login switch button */
.auth-switch{
  margin-top: 18px;
  text-align: center;
}

.auth-switch span{
  display: block;
  color: rgba(255,255,255,0.60);
  font-size: 13px;
  margin-bottom: 10px;
}

.auth-switch a{
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  color: rgba(255,255,255,0.84) !important;
  text-decoration: none !important;
  background: rgba(217,70,239,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

.auth-switch a:hover{
  color: #fff !important;
  background: rgba(217,70,239,0.34);
}

/* back link */
body.sc-auth-page a[href="index.html"].block{
  color: rgba(255,255,255,0.58) !important;
}

/* error text */
body.sc-auth-page #auth-error{
  color: #fecaca !important;
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 14px;
  padding: 10px 12px;
}

/* referral note */
body.sc-auth-page .ref-note{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.86) !important;
}

/* keep verification/MFA popups readable */
body.sc-auth-page .su-flow-card,
body.sc-auth-page .mfa-card{
  color: #111827 !important;
}

/* mobile */
@media (max-width: 640px){
  
  body.sc-auth-page > .flex{
    padding: 34px 16px 34px !important;
  }

  body.sc-auth-page > .flex > .bg-white,
  body.sc-auth-page > .bg-white{
    padding: 26px 22px 28px !important;
    border-radius: 24px !important;
  }
}
/* =========================================================
   ✅ AUTH PAGE LAYOUT FIX — keeps purple neon design
   ✅ FIXED: navbar is NOT treated like the auth card anymore
   - fixes tiny/shrunk login box
   - keeps normal white navbar
   - keeps Google login/signup
   - only affects login/signup pages with body.sc-auth-page
========================================================= */

body.sc-auth-page{
  min-height: 100dvh !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
}

/* ✅ CRITICAL FIX:
   The navbar also has .bg-white, so we reset it back to normal.
   This prevents the login/signup card styles from turning nav into a purple box. */
body.sc-auth-page > nav{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  align-self: stretch !important;
  margin: 0 !important;
  padding: 1rem 2rem !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;

  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;

  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transform: none !important;
  scale: 1 !important;
  flex: 0 0 auto !important;
}

/* ✅ Keep navbar text/buttons normal */
body.sc-auth-page > nav a,
body.sc-auth-page > nav button,
body.sc-auth-page > nav div{
  color: inherit;
}

/* ✅ Keep active/hover nav links blue */
body.sc-auth-page > nav a.text-blue-600,
body.sc-auth-page > nav a:hover{
  color: #2563eb !important;
}

/* ✅ Make sure navbar never gets fake card overlays */
body.sc-auth-page > nav::before,
body.sc-auth-page > nav::after{
  content: none !important;
  display: none !important;
}

/* ✅ Center login wrapper correctly */
body.sc-auth-page > .flex{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: calc(100dvh - 72px) !important;

  display: grid !important;
  place-items: center !important;

  padding: clamp(32px, 5vh, 62px) 20px !important;
  margin: 0 !important;

  transform: none !important;
}

/* ✅ Signup page direct card only — NOT the navbar */
body.sc-auth-page > div.bg-white:not(nav){
  align-self: center !important;
  margin: clamp(32px, 5vh, 62px) auto !important;
}

/* ✅ Auth card cannot shrink tiny — NOT the navbar */
body.sc-auth-page > .flex > .bg-white,
body.sc-auth-page > div.bg-white:not(nav){
  width: min(92vw, 430px) !important;
  min-width: min(92vw, 320px) !important;
  max-width: 430px !important;

  height: auto !important;
  min-height: 0 !important;

  transform: none !important;
  scale: 1 !important;

  padding: 30px 30px 32px !important;
  border-radius: 28px !important;

  background: rgba(18,8,35,0.42) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  box-shadow:
    0 34px 90px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ✅ Stop old Tailwind/card styles from forcing weird white backgrounds — card only */
body.sc-auth-page > .flex > .bg-white *,
body.sc-auth-page > div.bg-white:not(nav) *{
  max-width: 100%;
}

/* ✅ Inputs should not look squeezed */
body.sc-auth-page form{
  width: 100% !important;
}

body.sc-auth-page input{
  font-size: 15px !important;
}

/* ✅ Buttons full width and normal size */
body.sc-auth-page #google-login,
body.sc-auth-page #google-signup,
body.sc-auth-page #login-submit,
body.sc-auth-page #signup-form > button,
body.sc-auth-page .auth-switch a{
  width: 100% !important;
  min-height: 46px !important;
}

/* ✅ Mobile: keep navbar normal + keep auth card clean */
@media (max-width: 640px){

  body.sc-auth-page > nav{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.sc-auth-page > .flex{
    min-height: calc(100dvh - 112px) !important;
    padding: 28px 16px !important;
  }

  body.sc-auth-page > .flex > .bg-white,
  body.sc-auth-page > div.bg-white:not(nav){
    width: min(94vw, 430px) !important;
    min-width: 0 !important;
    padding: 26px 22px 28px !important;
    border-radius: 24px !important;
  }
}

/* =========================================================
   ✅ PLUS PAGE — MATCH HOME PAGE HERO + FOUNDER BUTTON ANIMATION
   - Only affects plus.html with body.sc-plus-page
   - Does NOT touch navbar styling
   - Adds Buy Now-style shine animation to Claim $20 Founder Deal Now
========================================================= */

body.sc-plus-page{
  background:
    radial-gradient(720px 430px at 18% 12%, rgba(18, 0, 46, 0.72), transparent 68%),
    radial-gradient(760px 470px at 88% 18%, rgba(124, 58, 237, 0.62), transparent 66%),
    linear-gradient(135deg, #2b0054 0%, #5b0bb8 44%, #7c3aed 72%, #2563eb 100%) !important;
  color: #111827;
}

/* home-page style line pattern */
body.sc-plus-page::before{
  content:"";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scPlusLinesDrift 24s linear infinite;
}

/* override the global light background layer only on Plus */
body.sc-plus-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(820px 480px at 16% 8%, rgba(17,0,35,0.50), transparent 70%),
    radial-gradient(820px 480px at 88% 10%, rgba(255,255,255,0.10), transparent 70%),
    linear-gradient(180deg, rgba(17,0,35,0.10), rgba(17,0,35,0.30)) !important;
}

/* Plus main area floats cleanly on hero background */
body.sc-plus-page main{
  position: relative;
  z-index: 1;
}

/* Main white panel becomes premium glass */
body.sc-plus-page main > .bg-white{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow:
    0 30px 90px rgba(17,0,35,0.28),
    inset 0 1px 0 rgba(255,255,255,0.60) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Founder card border looks more like Sell City hero */
body.sc-plus-page .plus-founders-border{
  border-radius: 26px !important;
}

body.sc-plus-page .plus-founders-border::before{
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.48), rgba(124,58,237,0.72), rgba(37,99,235,0.72)) !important;
}

/* little founder badge stronger */
body.sc-plus-page .plus-founder-badge{
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.92), rgba(37,99,235,0.84)) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: 0 14px 34px rgba(124,58,237,0.22) !important;
}

/* benefit pills and mini stats match the home page vibe */
body.sc-plus-page .plus-benefit-pill,
body.sc-plus-page .plus-mini-stat,
body.sc-plus-page .plus-soft-card,
body.sc-plus-page .plus-subtle-bg,
body.sc-plus-page .plus-analytics-chart{
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  box-shadow:
    0 16px 38px rgba(17,0,35,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

/* progress bar glow */
body.sc-plus-page .plus-progress-track{
  background: rgba(17,0,35,0.10) !important;
}

body.sc-plus-page .plus-progress-fill{
  background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
  box-shadow:
    0 8px 24px rgba(124,58,237,0.32),
    0 0 18px rgba(37,99,235,0.22) !important;
}

/* Save colors button also cleaner */
body.sc-plus-page #btn-save-colors{
  border-radius: 14px !important;
  border: 1px solid rgba(124,58,237,0.16) !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 12px 26px rgba(17,0,35,0.08) !important;
}

body.sc-plus-page #btn-save-colors:hover{
  background: #f7f3ff !important;
  transform: translateY(-1px);
}

/* =========================================================
   ✅ Founder checkout button: same slow shine animation as Buy Now
========================================================= */

body.sc-plus-page #btn-plus-checkout,
body.sc-plus-page .sc-plus-checkout-btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 56px !important;
  border-radius: 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;

  font-weight: 950 !important;
  letter-spacing: .01em;

  box-shadow:
    0 18px 38px rgba(124,58,237,0.30),
    0 12px 28px rgba(6,182,212,0.22) !important;

  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .18s ease !important;
}

/* glossy top layer */
body.sc-plus-page #btn-plus-checkout::before,
body.sc-plus-page .sc-plus-checkout-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 15px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.00) 54%);
  z-index: 0;
}

/* slow moving dash */
body.sc-plus-page #btn-plus-checkout::after,
body.sc-plus-page .sc-plus-checkout-btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );

  transform: rotate(18deg);
  opacity: 0;

  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

/* keep icon/text above shine */
body.sc-plus-page #btn-plus-checkout > *,
body.sc-plus-page .sc-plus-checkout-btn > *{
  position: relative;
  z-index: 2;
}

body.sc-plus-page #btn-plus-checkout:hover,
body.sc-plus-page .sc-plus-checkout-btn:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06) saturate(1.12);
  box-shadow:
    0 22px 46px rgba(217,70,239,0.34),
    0 18px 40px rgba(6,182,212,0.26),
    0 0 24px rgba(124,58,237,0.26) !important;
}

body.sc-plus-page #btn-plus-checkout:hover::after,
body.sc-plus-page .sc-plus-checkout-btn:hover::after{
  left: 135%;
  opacity: 1;
}

body.sc-plus-page #btn-plus-checkout:active,
body.sc-plus-page .sc-plus-checkout-btn:active{
  transform: translateY(0) scale(.985);
}

body.sc-plus-page #btn-plus-checkout:disabled,
body.sc-plus-page .sc-plus-checkout-btn:disabled{
  opacity: .65 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(.1) !important;
}

body.sc-plus-page #btn-plus-checkout:disabled::after,
body.sc-plus-page .sc-plus-checkout-btn:disabled::after{
  display: none;
}

.sc-plus-bolt{
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex: 0 0 auto;
}

.sc-plus-bolt svg{
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes scPlusLinesDrift{
  0%{ background-position: 0 0; }
  100%{ background-position: 220px 420px; }
}

@media (prefers-reduced-motion: reduce){
  body.sc-plus-page::before,
  body.sc-plus-page #btn-plus-checkout,
  body.sc-plus-page #btn-plus-checkout::after{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ✅ SELL PAGE UI — MATCH HOME HERO + FIX GRAY TEXT
   - Only affects sell.html with body.sc-sell-page
   - Keeps normal white navbar
   - Makes labels/headings readable
   - Makes form cards pop on dark purple/blue background
   - UI only, no JS/functionality changes
========================================================= */

body.sc-sell-page{
  background:
    radial-gradient(720px 430px at 18% 12%, rgba(18, 0, 46, 0.72), transparent 68%),
    radial-gradient(760px 470px at 88% 18%, rgba(124, 58, 237, 0.62), transparent 66%),
    linear-gradient(135deg, #10051f 0%, #2b0054 38%, #5b0bb8 66%, #2563eb 100%) !important;
  color: #ffffff;
}

/* ✅ SELL PAGE NAV RESET
   Keeps the sell page dark, but leaves the normal white navbar/nav-auth readable.
   Do NOT style nav-auth itself. Just stop it from inheriting white text. */
body.sc-sell-page nav{
  color: #111827 !important;
  background: #ffffff !important;
}

/* ✅ Keep normal nav links/auth dropdown readable */
body.sc-sell-page nav a,
body.sc-sell-page nav button,
body.sc-sell-page #nav-auth-slot{
  color: inherit;
}

/* ✅ Keep active/hover nav links blue */
body.sc-sell-page nav a.text-blue-600,
body.sc-sell-page nav a:hover{
  color: #2563eb !important;
}

/* Home-page style line pattern */
body.sc-sell-page::before{
  content:"";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scSellLinesDrift 24s linear infinite;
}

/* Dark glow layer */
body.sc-sell-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(850px 520px at 18% 0%, rgba(17,0,35,0.58), transparent 68%),
    radial-gradient(850px 520px at 90% 6%, rgba(255,255,255,0.10), transparent 72%),
    linear-gradient(180deg, rgba(17,0,35,0.18), rgba(17,0,35,0.42)) !important;
}



/* Main area */
body.sc-sell-page main{
  position: relative;
  z-index: 1;
}

/* Top listing count */
body.sc-sell-page main > .text-sm{
  color: rgba(255,255,255,0.78) !important;
}

body.sc-sell-page #my-listing-count{
  color: #ffffff !important;
}

/* Main headings */
body.sc-sell-page #sell-section h2,
body.sc-sell-page #verify-section h2{
  color: #ffffff !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em;
  text-shadow:
    0 14px 34px rgba(0,0,0,0.32),
    0 0 20px rgba(124,58,237,0.28);
}

/* Subtitle under seller verification */
body.sc-sell-page #verify-section > p{
  color: rgba(255,255,255,0.74) !important;
}

/* Glass container for the whole sell form */
body.sc-sell-page #sell-form{
  padding: 26px;
  border-radius: 28px;
  background: rgba(18,8,35,0.34);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 34px 90px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Make labels readable on dark background */
/* ✅ scoped to MAIN only so navbar/dropdown/bell never get affected */
body.sc-sell-page main label,
body.sc-sell-page main .block.font-semibold{
  color: rgba(255,255,255,0.94) !important;
  font-weight: 900 !important;
}

/* Helper text readable */
/* ✅ scoped to MAIN only so navbar/dropdown/bell never get affected */
body.sc-sell-page main .text-gray-500,
body.sc-sell-page main .text-gray-600,
body.sc-sell-page main .sc-help,
body.sc-sell-page main .boost-note,
body.sc-sell-page main .boost-subtext{
  color: rgba(255,255,255,0.70) !important;
}

/* Inputs stay bright and clear */
body.sc-sell-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.sc-sell-page textarea,
body.sc-sell-page select{
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

body.sc-sell-page input::placeholder,
body.sc-sell-page textarea::placeholder{
  color: #9ca3af !important;
}

body.sc-sell-page input:focus,
body.sc-sell-page textarea:focus,
body.sc-sell-page select:focus{
  outline: none !important;
  border-color: rgba(147,197,253,0.85) !important;
  box-shadow:
    0 0 0 4px rgba(59,130,246,0.18),
    0 16px 34px rgba(0,0,0,0.18) !important;
}

/* File inputs visible on dark bg */
body.sc-sell-page input[type="file"]{
  color: rgba(255,255,255,0.82) !important;
}

/* White cards inside the form stay readable */
body.sc-sell-page main .bg-white,
body.sc-sell-page main .bg-gray-50,
body.sc-sell-page main .boost-card,
body.sc-sell-page main .border.rounded-xl{
  background: rgba(255,255,255,0.95) !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* Text inside white cards should be dark/readable */
body.sc-sell-page main .bg-white label,
body.sc-sell-page main .bg-gray-50 label,
body.sc-sell-page main .boost-card label,
body.sc-sell-page main .border.rounded-xl label,
body.sc-sell-page main .bg-white .font-semibold,
body.sc-sell-page main .bg-gray-50 .font-semibold,
body.sc-sell-page main .boost-card .font-semibold,
body.sc-sell-page main .border.rounded-xl .font-semibold{
  color: #111827 !important;
}

body.sc-sell-page main .bg-white .text-gray-500,
body.sc-sell-page main .bg-white .text-gray-600,
body.sc-sell-page main .bg-gray-50 .text-gray-500,
body.sc-sell-page main .bg-gray-50 .text-gray-600,
body.sc-sell-page main .boost-card .text-gray-500,
body.sc-sell-page main .boost-card .text-gray-600,
body.sc-sell-page main .border.rounded-xl .text-gray-500,
body.sc-sell-page main .border.rounded-xl .text-gray-600,
body.sc-sell-page main .sc-help,
body.sc-sell-page main .boost-subtext,
body.sc-sell-page main .boost-note{
  color: #6b7280 !important;
}

/* Pills inside cards */
body.sc-sell-page .sc-pill,
body.sc-sell-page .ship-pill,
body.sc-sell-page .boost-price-pill{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border-color: rgba(124,58,237,0.16) !important;
  box-shadow: 0 10px 22px rgba(17,0,35,0.08);
}

/* Submit / continue buttons get Sell City glow */
body.sc-sell-page button[type="submit"]{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px !important;
  min-height: 52px;
  font-weight: 950 !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.30),
    0 12px 28px rgba(6,182,212,0.22) !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .18s ease !important;
}

/* Slow shine animation on submit buttons */
body.sc-sell-page button[type="submit"]::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );

  transform: rotate(18deg);
  opacity: 0;

  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

body.sc-sell-page button[type="submit"]:hover{
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06) saturate(1.12);
  box-shadow:
    0 22px 46px rgba(217,70,239,0.34),
    0 18px 40px rgba(6,182,212,0.26),
    0 0 24px rgba(124,58,237,0.26) !important;
}

body.sc-sell-page button[type="submit"]:hover::after{
  left: 135%;
  opacity: 1;
}

/* Status text */
body.sc-sell-page #submit-status,
body.sc-sell-page #verify-status{
  color: rgba(255,255,255,0.78) !important;
  font-weight: 700;
}

/* Keep image previews clean */
body.sc-sell-page #cover-preview,
body.sc-sell-page #verify-photo-preview,
body.sc-sell-page #images-preview img{
  box-shadow: 0 18px 38px rgba(0,0,0,0.20);
}

/* Mobile */
@media (max-width: 640px){
  body.sc-sell-page main{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.sc-sell-page #sell-form{
    padding: 18px;
    border-radius: 22px;
  }
}

@keyframes scSellLinesDrift{
  0%{ background-position: 0 0; }
  100%{ background-position: 220px 420px; }
}

@media (prefers-reduced-motion: reduce){
  body.sc-sell-page::before,
  body.sc-sell-page button[type="submit"],
  body.sc-sell-page button[type="submit"]::after{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ✅ SELL PAGE SELECT OPTION FIX ONLY
   - Does NOT touch navbar
   - Fixes dropdown options being white / invisible
========================================================= */

body.sc-sell-page main select,
body.sc-sell-page main select option,
body.sc-sell-page main option{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.sc-sell-page main select:focus{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* =========================================================
   ✅ FINAL AUTH NAV FIX — MUST STAY AT VERY BOTTOM
   Fixes login/signup navbar being styled like the auth card
   Keeps navbar same as normal pages
========================================================= */

body.sc-auth-page > nav,
body.sc-auth-page > nav.bg-white{
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  align-self: stretch !important;
  margin: 0 !important;
  padding: 1rem 2rem !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;

  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;

  background: #ffffff !important;
  color: #111827 !important;

  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transform: none !important;
  scale: 1 !important;
  overflow: visible !important;
}

/* ✅ Logo reset */
body.sc-auth-page > nav > a{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;

  color: #111827 !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* ✅ Nav links row reset */
body.sc-auth-page > nav > div{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1.5rem !important;

  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ✅ Remove fake mobile slider/lines from auth nav */
body.sc-auth-page > nav > div::before,
body.sc-auth-page > nav > div::after,
body.sc-auth-page > nav::before,
body.sc-auth-page > nav::after{
  content: none !important;
  display: none !important;
}

/* ✅ Normal nav text */
body.sc-auth-page > nav a,
body.sc-auth-page > nav button,
body.sc-auth-page > nav #nav-auth-slot{
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* ✅ Active + hover stays blue */
body.sc-auth-page > nav a.text-blue-600,
body.sc-auth-page > nav a:hover{
  color: #2563eb !important;
  -webkit-text-fill-color: initial !important;
}

/* ✅ Mobile auth nav still normal, not side-card */
@media (max-width: 768px){
  body.sc-auth-page > nav,
  body.sc-auth-page > nav.bg-white{
    padding: 14px !important;
    flex-wrap: wrap !important;
  }

  body.sc-auth-page > nav > a{
    width: 100% !important;
  }

  body.sc-auth-page > nav > div{
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 6px !important;
  }

  body.sc-auth-page > nav > div a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   ✅ PRODUCT PAGE UI — MATCH HOME / SELL CITY VIBE
   ✅ Does NOT touch nav-auth.js
   ✅ Does NOT edit #nav-auth-slot
   ✅ Only affects product.html with body.sc-product-page
========================================================= */

body.sc-product-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.36), transparent 60%),
    radial-gradient(850px 520px at 88% 18%, rgba(37,99,235,.32), transparent 60%),
    radial-gradient(800px 520px at 55% 92%, rgba(124,58,237,.26), transparent 58%),
    linear-gradient(135deg, #10051f 0%, #2b0054 38%, #5b0bb8 66%, #2563eb 100%) !important;
  color: #111827 !important;
}

/* ✅ keep the normal navbar readable — no nav-auth changes */
body.sc-product-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ page spacing */
body.sc-product-page > section{
  max-width: 1280px !important;
  padding-top: clamp(28px, 4vw, 56px) !important;
  padding-bottom: clamp(42px, 6vw, 82px) !important;
}

/* ✅ layout grid */
body.sc-product-page #product-layout-grid{
  gap: clamp(18px, 2vw, 30px) !important;
  align-items: start !important;
}

/* ✅ main product card + message seller card */
body.sc-product-page #product-main-card,
body.sc-product-page #product-side-card{
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  overflow: hidden !important;
}

/* ✅ make side card sticky on desktop */
@media (min-width: 1280px){
  body.sc-product-page #product-side-card{
    position: sticky !important;
    top: 96px !important;
  }
}

/* ✅ top product breadcrumb/action row */
body.sc-product-page .sc-breadcrumb{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,0.08) !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.sc-product-page .sc-breadcrumb a{
  color: #2563eb !important;
  font-weight: 900 !important;
}

/* ✅ Share / Copy / Report buttons */
body.sc-product-page .sc-icon-btn{
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,0.10) !important;
  background: rgba(255,255,255,0.88) !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06) !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}

body.sc-product-page .sc-icon-btn:hover{
  transform: translateY(-1px) !important;
  background: #ffffff !important;
  box-shadow: 0 16px 34px rgba(124,58,237,0.14) !important;
}

/* ✅ carousel/image area */
body.sc-product-page .sc-carousel,
body.sc-product-page #sc-carousel{
  border-radius: 28px !important;
  border: 1px solid rgba(124,58,237,0.16) !important;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
  box-shadow:
    0 24px 55px rgba(15,23,42,0.16),
    0 0 0 1px rgba(255,255,255,0.55) inset !important;
  overflow: hidden !important;
}

body.sc-product-page .sc-carousel-stage{
  background:
    radial-gradient(550px 260px at 50% 20%, rgba(124,58,237,0.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

/* ✅ thumbnail row */
body.sc-product-page .sc-carousel-thumbs img,
body.sc-product-page #product-wrap img{
  box-shadow: 0 8px 22px rgba(15,23,42,0.06);
}

/* ✅ boosted/deal badges area */
body.sc-product-page .sc-product-deal-row{
  margin-top: 22px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* ✅ product title — home page bold vibe */
body.sc-product-page .sc-product-title{
  margin-top: 14px !important;
  margin-bottom: 12px !important;
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  color: #111827 !important;
}

/* ✅ description */
body.sc-product-page .sc-product-desc{
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #4b5563 !important;
  background: rgba(248,250,252,0.82) !important;
  border: 1px solid rgba(17,24,39,0.07) !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
}

/* ✅ info card under description */
body.sc-product-page .sc-product-card{
  border-radius: 26px !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96)) !important;
  box-shadow:
    0 18px 46px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
  padding: 20px !important;
}

/* ✅ meta chips */
body.sc-product-page .sc-meta-stack{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

body.sc-product-page .sc-meta-chip,
body.sc-product-page .sc-stock-badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  border: 1px solid rgba(124,58,237,0.13) !important;
  background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(59,130,246,0.08)) !important;
  color: #374151 !important;
}

body.sc-product-page .sc-stock-badge{
  color: #991b1b !important;
  background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(249,115,22,0.10)) !important;
  border-color: rgba(239,68,68,0.18) !important;
}

/* ✅ price */
body.sc-product-page .sc-price-strong{
  color: #111827 !important;
  font-size: clamp(2.4rem, 4vw, 4.2rem) !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
  text-shadow: 0 14px 32px rgba(124,58,237,0.12) !important;
}

/* ✅ seller row */
body.sc-product-page .sc-seller-row{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 18px 0 22px !important;
  padding: 14px 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  background: rgba(255,255,255,0.72) !important;
  color: #4b5563 !important;
}

body.sc-product-page .sc-seller-link{
  color: #111827 !important;
  font-weight: 950 !important;
}

/* ✅ Add to cart / Buy now area */
body.sc-product-page .sc-product-actions{
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 14px !important;
  margin-top: 18px !important;
  margin-bottom: 30px !important;
}

body.sc-product-page #add-to-cart,
body.sc-product-page #buy-now{
  min-height: 62px !important;
  border-radius: 20px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}

body.sc-product-page #add-to-cart{
  background: rgba(17,24,39,0.96) !important;
  color: #ffffff !important;
  border: 1px solid rgba(124,58,237,0.38) !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.sc-product-page #buy-now{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    0 22px 46px rgba(124,58,237,0.34),
    0 16px 36px rgba(6,182,212,0.22) !important;
}

body.sc-product-page #add-to-cart:hover,
body.sc-product-page #buy-now:hover{
  transform: translateY(-2px) scale(1.01) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* ✅ disabled */
body.sc-product-page #add-to-cart:disabled,
body.sc-product-page #buy-now:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: grayscale(.2) !important;
}

/* ✅ item specifics + review sections */
body.sc-product-page #product-wrap > section{
  border-radius: 30px !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94)) !important;
  box-shadow:
    0 20px 50px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* ✅ message seller card */
body.sc-product-page #product-side-card h3{
  font-size: 1.55rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  color: #111827 !important;
}

body.sc-product-page #msg-hint{
  color: #6b7280 !important;
  line-height: 1.55 !important;
}

body.sc-product-page #msg-text{
  border-radius: 20px !important;
  min-height: 132px !important;
  border: 1px solid rgba(124,58,237,0.16) !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

body.sc-product-page #msg-text:focus{
  outline: none !important;
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12) !important;
}

body.sc-product-page #msg-send{
  min-height: 54px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  background: linear-gradient(100deg, #7c3aed, #2563eb) !important;
  box-shadow: 0 18px 34px rgba(37,99,235,0.22) !important;
}

/* ✅ safety info box */
body.sc-product-page .sc-info-box{
  border-radius: 22px !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  background: linear-gradient(180deg, rgba(124,58,237,0.06), rgba(37,99,235,0.05)) !important;
}

/* ✅ mobile */
@media (max-width: 768px){
  body.sc-product-page > section{
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 24px !important;
  }

  body.sc-product-page #product-main-card,
  body.sc-product-page #product-side-card{
    border-radius: 24px !important;
    padding: 18px !important;
  }

  body.sc-product-page .sc-product-actions{
    grid-template-columns: 1fr !important;
  }

  body.sc-product-page .sc-price-strong{
    font-size: 2.7rem !important;
  }

  body.sc-product-page .sc-product-title{
    font-size: 2.35rem !important;
  }
}

/* =========================================================
   ✅ INBOX PAGE UI — MATCH HOME / SELL CITY VIBE
   ✅ Does NOT touch nav-auth.js
   ✅ Does NOT edit #nav-auth-slot
   ✅ Only affects inbox.html with body.sc-inbox-page
========================================================= */

body.sc-inbox-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 12% 12%, rgba(124,58,237,.36), transparent 60%),
    radial-gradient(850px 520px at 88% 18%, rgba(37,99,235,.32), transparent 60%),
    radial-gradient(800px 520px at 55% 92%, rgba(124,58,237,.26), transparent 58%),
    linear-gradient(135deg, #10051f 0%, #2b0054 38%, #5b0bb8 66%, #2563eb 100%) !important;
  color: #111827 !important;
}

/* ✅ keep normal navbar readable — no nav-auth changes */
body.sc-inbox-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ home-page style line pattern */
body.sc-inbox-page::before{
  content:"";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scInboxLinesDrift 24s linear infinite;
}

/* ✅ dark glow layer */
body.sc-inbox-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(850px 520px at 18% 0%, rgba(17,0,35,0.58), transparent 68%),
    radial-gradient(850px 520px at 90% 6%, rgba(255,255,255,0.10), transparent 72%),
    linear-gradient(180deg, rgba(17,0,35,0.18), rgba(17,0,35,0.42)) !important;
}

@keyframes scInboxLinesDrift{
  0%{ transform: translate3d(0,0,0) skewX(-8deg); }
  100%{ transform: translate3d(-120px, 0, 0) skewX(-8deg); }
}

/* ✅ page shell */
body.sc-inbox-page .page-wrap{
  position: relative !important;
  z-index: 1 !important;
  max-width: 88rem !important;
  padding-top: clamp(28px, 4vw, 54px) !important;
  padding-bottom: clamp(42px, 6vw, 82px) !important;
}

/* ✅ Inbox title */
body.sc-inbox-page h2{
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  text-shadow:
    0 20px 54px rgba(0,0,0,0.32),
    0 0 24px rgba(124,58,237,0.32) !important;
}

/* ✅ Game promo banner */
body.sc-inbox-page .promo{
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.95), rgba(248,250,252,0.88)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.sc-inbox-page .promo .title{
  color: #111827 !important;
  font-weight: 950 !important;
}

body.sc-inbox-page .promo .btn{
  border-radius: 18px !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  box-shadow:
    0 18px 34px rgba(124,58,237,0.28),
    0 12px 26px rgba(6,182,212,0.18) !important;
  transition: transform .16s ease, filter .16s ease !important;
}

body.sc-inbox-page .promo .btn:hover{
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* ✅ main inbox cards */
body.sc-inbox-page .card{
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  overflow: hidden !important;
}

/* ✅ card headers */
body.sc-inbox-page .cardHead{
  border-bottom: 1px solid rgba(124,58,237,0.12) !important;
}

body.sc-inbox-page .cardHead h3,
body.sc-inbox-page #chat-title{
  color: #111827 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

body.sc-inbox-page #chat-subtitle{
  color: #6b7280 !important;
  font-weight: 700 !important;
}

/* ✅ unread badge */
body.sc-inbox-page #unread-badge{
  border: 1px solid rgba(124,58,237,0.18) !important;
  background: linear-gradient(90deg, rgba(124,58,237,0.10), rgba(59,130,246,0.10)) !important;
  color: #5b21b6 !important;
  font-weight: 950 !important;
}

/* ✅ notification box injected by inbox.js */
body.sc-inbox-page #notif-list{
  display: grid !important;
  gap: 10px !important;
}

body.sc-inbox-page #notif-list > div{
  border-radius: 18px !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.07), rgba(59,130,246,0.06)) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.06) !important;
}

body.sc-inbox-page #clear-notifs,
body.sc-inbox-page #mark-all-read{
  font-weight: 900 !important;
}

/* ✅ thread list scrollbar */
body.sc-inbox-page #threads,
body.sc-inbox-page #messages{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(124,58,237,0.35) transparent !important;
}

body.sc-inbox-page #threads::-webkit-scrollbar,
body.sc-inbox-page #messages::-webkit-scrollbar{
  width: 10px !important;
}

body.sc-inbox-page #threads::-webkit-scrollbar-thumb,
body.sc-inbox-page #messages::-webkit-scrollbar-thumb{
  background: rgba(124,58,237,0.28) !important;
  border-radius: 999px !important;
}

/* ✅ conversation rows from inbox.js */
body.sc-inbox-page #threads > div{
  position: relative !important;
  border-radius: 22px !important;
  margin-bottom: 10px !important;
}

body.sc-inbox-page #threads > div > div:first-child{
  cursor: pointer !important;
  border-radius: 22px !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  background: rgba(255,255,255,0.78) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,0.06) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

body.sc-inbox-page #threads > div > div:first-child:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(124,58,237,0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 36px rgba(124,58,237,0.13) !important;
}

/* ✅ delete conversation button */
body.sc-inbox-page .thread-del{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6b7280 !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  opacity: .72 !important;
  transition: opacity .14s ease, background .14s ease, color .14s ease, transform .14s ease !important;
}

body.sc-inbox-page .thread-del:hover{
  opacity: 1 !important;
  color: #b91c1c !important;
  background: #fff1f2 !important;
  transform: translateY(-1px) !important;
}

body.sc-inbox-page .thread-del svg{
  width: 16px !important;
  height: 16px !important;
}

/* ✅ messages area */
body.sc-inbox-page #messages{
  border-radius: 24px !important;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(124,58,237,0.08), transparent 70%),
    linear-gradient(180deg, rgba(248,250,252,0.76), rgba(255,255,255,0.62)) !important;
  border: 1px solid rgba(17,24,39,0.06) !important;
  padding: 16px !important;
}

/* ✅ message bubbles from inbox.js */
body.sc-inbox-page #messages > div > div{
  border-radius: 22px !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,0.08) !important;
}

/* ✅ your messages */
body.sc-inbox-page #messages > .justify-end > div{
  background: linear-gradient(100deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
}

body.sc-inbox-page #messages > .justify-end .text-gray-400,
body.sc-inbox-page #messages > .justify-end .text-gray-600,
body.sc-inbox-page #messages > .justify-end .msg-meta{
  color: rgba(255,255,255,0.80) !important;
}

/* ✅ other person's messages */
body.sc-inbox-page #messages > .justify-start > div{
  background: rgba(255,255,255,0.96) !important;
  color: #111827 !important;
}

/* ✅ system messages */
body.sc-inbox-page #messages > .justify-start > div.bg-yellow-50{
  background:
    linear-gradient(100deg, rgba(255,251,235,0.98), rgba(124,58,237,0.07)) !important;
  border-color: rgba(245,158,11,0.20) !important;
}

/* ✅ message meta */
body.sc-inbox-page .msg-meta{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  color: #6b7280 !important;
}

/* ✅ claim buttons inside system messages */
body.sc-inbox-page .claim-badge-btn,
body.sc-inbox-page .claim-plus-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
  background: linear-gradient(90deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(124,58,237,0.18) !important;
}

body.sc-inbox-page .claim-badge-btn:disabled,
body.sc-inbox-page .claim-plus-btn:disabled{
  opacity: .65 !important;
  cursor: not-allowed !important;
}

/* ✅ send form */
body.sc-inbox-page #send-form{
  border-top: 1px solid rgba(124,58,237,0.12) !important;
}

body.sc-inbox-page #message-input{
  min-height: 52px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(124,58,237,0.16) !important;
  background: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

body.sc-inbox-page #message-input:focus{
  outline: none !important;
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12) !important;
}

/* ✅ send button */
body.sc-inbox-page #send-btn{
  min-height: 52px !important;
  border-radius: 18px !important;
  font-weight: 950 !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  box-shadow:
    0 18px 34px rgba(124,58,237,0.24),
    0 10px 24px rgba(6,182,212,0.16) !important;
  transition: transform .16s ease, filter .16s ease !important;
}

body.sc-inbox-page #send-btn:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

body.sc-inbox-page #send-btn:disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ✅ mobile */
@media (max-width: 768px){
  body.sc-inbox-page .page-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 24px !important;
  }

  body.sc-inbox-page .promo{
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.sc-inbox-page .promo .btn{
    width: 100% !important;
  }

  body.sc-inbox-page .card{
    border-radius: 24px !important;
  }

  body.sc-inbox-page #messages{
    min-height: 420px !important;
  }

  body.sc-inbox-page #send-form{
    flex-direction: column !important;
  }

  body.sc-inbox-page #send-btn{
    width: 100% !important;
  }

  body.sc-inbox-page h2{
    font-size: 2.7rem !important;
  }
}

/* =========================================================
   ✅ FINAL INBOX + BOOSTED PLUS FIX
   - Inbox background matches Sell City/home dark neon vibe
   - Removes split/two-color background issue
   - Fixes YOU badge being white/covered on your messages
   - Makes Boosted + PLUS chromatic purple/blue with shimmer
   - Does NOT touch nav-auth.js or #nav-auth-slot
========================================================= */

/* ✅ Inbox background: one clean full-page dark neon background */
body.sc-inbox-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.15), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
  background-attachment: fixed !important;
  color: #111827 !important;
}

/* ✅ Kill the old split purple/blue + black overlay */
body.sc-inbox-page::after{
  content: none !important;
  display: none !important;
}

/* ✅ Keep only the subtle white line pattern like home page */
body.sc-inbox-page::before{
  content:"" !important;
  position: fixed !important;
  inset: -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .16 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.16) 19px,
      rgba(255,255,255,0.16) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;
  transform: skewX(-8deg) !important;
  animation: scHomeLinesDrift 18s linear infinite !important;
}

/* ✅ Navbar stays normal white */
body.sc-inbox-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ Make inbox cards feel glassy but not huge white blocks */
body.sc-inbox-page .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* ✅ Your message bubble */
body.sc-inbox-page #messages > .justify-end > div{
  background: linear-gradient(100deg, #7c3aed, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* ✅ Your name/meta text on your own messages */
body.sc-inbox-page #messages > .justify-end .msg-meta,
body.sc-inbox-page #messages > .justify-end .msg-meta span:first-child{
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}

/* ✅ FIX: the YOU pill should NOT look like a white cover */
body.sc-inbox-page #messages > .justify-end .msg-meta span.text-\[10px\],
body.sc-inbox-page #messages > .justify-end .msg-meta span.bg-white{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow:
    0 0 14px rgba(255,255,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ✅ Your message body + timestamp readable */
body.sc-inbox-page #messages > .justify-end .text-sm,
body.sc-inbox-page #messages > .justify-end .whitespace-pre-wrap{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.sc-inbox-page #messages > .justify-end .text-\[11px\],
body.sc-inbox-page #messages > .justify-end .text-gray-400{
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
}

/* =========================================================
   ✅ BOOSTED / PLUS TAG — CHROMATIC + SHIMMER
========================================================= */

.sc-boost-pill{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,241,255,0.96)) !important;
  border: 1px solid rgba(124,58,237,0.28) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    0 0 18px rgba(124,58,237,0.24),
    0 0 26px rgba(37,99,235,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.45) !important;
}

/* ✅ shimmer sweep around boosted pill */
.sc-boost-pill::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:-1 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    rgba(124,58,237,0.0),
    rgba(124,58,237,0.55),
    rgba(37,99,235,0.55),
    rgba(217,70,239,0.45),
    rgba(124,58,237,0.0)
  ) !important;
  background-size: 240% 100% !important;
  animation: scBoostRingMove 2.2s linear infinite !important;
  opacity: .9 !important;
}

/* ✅ shine crossing inside */
.sc-boost-pill::after{
  content:"" !important;
  position:absolute !important;
  top:-45% !important;
  left:-70% !important;
  width: 42% !important;
  height: 190% !important;
  z-index: 1 !important;
  pointer-events:none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent) !important;
  transform: rotate(18deg) !important;
  animation: scBoostShimmer 2.6s linear infinite !important;
}

/* ✅ keep text above shimmer */
.sc-boost-pill > *{
  position: relative !important;
  z-index: 2 !important;
}

/* ✅ Boosted text becomes chromatic */
.sc-boost-pill .boost-main,
.sc-boost-pill .boost-main span,
.sc-boost-pill .boost-timer{
  background: linear-gradient(90deg, #7c3aed, #2563eb, #d946ef, #7c3aed) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: chromaMove 2.4s linear infinite !important;
  text-shadow: 0 0 12px rgba(124,58,237,0.18) !important;
}

/* ✅ PLUS tag becomes premium chromatic pill */
.sc-boost-pill .boost-plus{
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow:
    0 0 14px rgba(124,58,237,0.32),
    0 0 18px rgba(37,99,235,0.20),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* ✅ PLUS tag shimmer */
.sc-boost-pill .boost-plus::after{
  content:"" !important;
  position:absolute !important;
  top:-50% !important;
  left:-70% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) !important;
  transform: rotate(18deg) !important;
  animation: scBoostShimmer 2.1s linear infinite !important;
  pointer-events:none !important;
}

@keyframes scBoostRingMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 240% 50%; }
}

@keyframes scBoostShimmer{
  0%{ left:-75%; }
  100%{ left:145%; }
}

/* =========================================================
   ✅ FINAL PRODUCT PAGE BACKGROUND + BOOSTED CHROMATIC FIX
   - Product page background matches home/listing dark neon vibe
   - Removes wrong split purple/blue background
   - Boosted tag gets Plus-style chromatic animated text
   - Does NOT touch nav-auth.js or #nav-auth-slot
========================================================= */

/* ✅ Product page: same dark neon background as home/listings */
html{
  background: #080516 !important;
}

body.sc-product-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.15), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
  background-attachment: fixed !important;
  color: #111827 !important;
}

/* ✅ Kill old product overlay/split color layer */
body.sc-product-page::after{
  content: none !important;
  display: none !important;
}

/* ✅ Keep subtle home-style line pattern only */
body.sc-product-page::before{
  content:"" !important;
  position: fixed !important;
  inset: -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .16 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.16) 19px,
      rgba(255,255,255,0.16) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;
  transform: skewX(-8deg) !important;
  animation: scHomeLinesDrift 18s linear infinite !important;
}

/* ✅ Navbar stays normal white — nav-auth untouched */
body.sc-product-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ Product page cards stay readable on dark background */
body.sc-product-page #product-main-card,
body.sc-product-page #product-side-card,
body.sc-product-page #product-wrap > section{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* =========================================================
   ✅ BOOSTED / PLUS TAG — PLUS-STYLE CHROMATIC ANIMATION
========================================================= */

.sc-boost-pill{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,241,255,0.96)) !important;
  border: 1px solid rgba(124,58,237,0.30) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    0 0 18px rgba(124,58,237,0.28),
    0 0 28px rgba(37,99,235,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.48) !important;
}

/* ✅ animated glowing ring around boosted badge */
.sc-boost-pill::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:-1 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    rgba(124,58,237,0.0),
    rgba(124,58,237,0.65),
    rgba(37,99,235,0.65),
    rgba(217,70,239,0.55),
    rgba(124,58,237,0.0)
  ) !important;
  background-size: 260% 100% !important;
  animation: scBoostRingMove 2.2s linear infinite !important;
  opacity: .95 !important;
}

/* ✅ shimmer slash across whole boosted pill */
.sc-boost-pill::after{
  content:"" !important;
  position:absolute !important;
  top:-45% !important;
  left:-75% !important;
  width: 42% !important;
  height: 190% !important;
  z-index: 1 !important;
  pointer-events:none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) !important;
  transform: rotate(18deg) !important;
  animation: scBoostShimmer 2.6s linear infinite !important;
}

/* ✅ keep boosted text above shimmer */
.sc-boost-pill > *{
  position: relative !important;
  z-index: 2 !important;
}

/* ✅ Boosted text uses same chromatic animation vibe as Plus chromatic text */
.sc-boost-pill .boost-main,
.sc-boost-pill .boost-main span,
.sc-boost-pill .boost-timer{
  background: linear-gradient(
    90deg,
    var(--c1, #7c3aed),
    var(--c2, #2563eb),
    var(--c1, #7c3aed),
    var(--c2, #2563eb)
  ) !important;
  background-size: 300% 100% !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  animation: chromaMove 2.4s linear infinite !important;
  text-shadow: 0 0 12px rgba(124,58,237,0.25) !important;
}

/* ✅ PLUS mini tag becomes premium chromatic pill */
.sc-boost-pill .boost-plus{
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  border: 1px solid rgba(255,255,255,0.44) !important;
  box-shadow:
    0 0 14px rgba(124,58,237,0.34),
    0 0 18px rgba(37,99,235,0.22),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* ✅ shimmer inside PLUS mini tag */
.sc-boost-pill .boost-plus::after{
  content:"" !important;
  position:absolute !important;
  top:-50% !important;
  left:-75% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) !important;
  transform: rotate(18deg) !important;
  animation: scBoostShimmer 2.1s linear infinite !important;
  pointer-events:none !important;
}

@keyframes scBoostRingMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 260% 50%; }
}

@keyframes scBoostShimmer{
  0%{ left:-75%; }
  100%{ left:145%; }
}

/* =========================================================
   ✅ DASHBOARD PAGE UI — MATCH HOME / LISTING DARK NEON VIBE
   ✅ Does NOT touch nav-auth.js
   ✅ Does NOT edit #nav-auth-slot
   ✅ Only affects dashboard.html with body.sc-dashboard-page
========================================================= */

html{
  background: #080516 !important;
}

body.sc-dashboard-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.15), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
  background-attachment: fixed !important;
  color: #111827 !important;
}

/* ✅ Kill any old split/light overlay on dashboard */
body.sc-dashboard-page::after{
  content: none !important;
  display: none !important;
}

/* ✅ Subtle home-style line pattern */
body.sc-dashboard-page::before{
  content:"" !important;
  position: fixed !important;
  inset: -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .16 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.16) 19px,
      rgba(255,255,255,0.16) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;
  transform: skewX(-8deg) !important;
  animation: scHomeLinesDrift 18s linear infinite !important;
}

/* ✅ Navbar stays normal white — nav-auth untouched */
body.sc-dashboard-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ Dashboard shell */
body.sc-dashboard-page main{
  position: relative !important;
  z-index: 1 !important;
  max-width: 88rem !important;
  padding-top: clamp(28px, 4vw, 54px) !important;
  padding-bottom: clamp(42px, 6vw, 82px) !important;
}

/* ✅ Dashboard title */
body.sc-dashboard-page h2{
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  line-height: .95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  text-shadow:
    0 20px 54px rgba(0,0,0,0.32),
    0 0 24px rgba(124,58,237,0.32) !important;
}

body.sc-dashboard-page main > div:first-child p{
  color: rgba(232,225,255,0.78) !important;
  font-weight: 700 !important;
}

/* ✅ Sell new item button */
body.sc-dashboard-page main > div:first-child a[href="sell.html"],
body.sc-dashboard-page a[href="sell.html"].bg-blue-600{
  border-radius: 18px !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.30),
    0 10px 26px rgba(6,182,212,0.18) !important;
  transition: transform .16s ease, filter .16s ease !important;
}

body.sc-dashboard-page main > div:first-child a[href="sell.html"]:hover{
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.06) saturate(1.08) !important;
}

/* ✅ Plus passes pill */
body.sc-dashboard-page #dash-plus-pill{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ✅ Main white dashboard panels */
body.sc-dashboard-page main > section,
body.sc-dashboard-page main > div.bg-white,
body.sc-dashboard-page main section.bg-white,
body.sc-dashboard-page .bg-white.border,
body.sc-dashboard-page .sc-plus-shell,
body.sc-dashboard-page .sc-plus-locked{
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  overflow: hidden !important;
}

/* ✅ Section titles inside cards */
body.sc-dashboard-page main h3,
body.sc-dashboard-page .sc-plus-title,
body.sc-dashboard-page .sc-panel-title{
  color: #111827 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

/* ✅ Muted text inside cards */
body.sc-dashboard-page .text-gray-600,
body.sc-dashboard-page .sc-plus-sub,
body.sc-dashboard-page .sc-panel-sub,
body.sc-dashboard-page .sc-stat-sub,
body.sc-dashboard-page .sc-mini-muted{
  color: #6b7280 !important;
}

/* ✅ PayPal connect / warning boxes */
body.sc-dashboard-page #seller-alerts-banner,
body.sc-dashboard-page #pp-connect-ok,
body.sc-dashboard-page #pp-connect-err,
body.sc-dashboard-page .bg-yellow-50,
body.sc-dashboard-page .bg-green-50,
body.sc-dashboard-page .bg-red-50{
  border-radius: 22px !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.08) !important;
}

/* ✅ Listing cards inside dashboard */
body.sc-dashboard-page #my-listings > div,
body.sc-dashboard-page .sc-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 18px !important;
  color: #ffffff !important;

  background:
    radial-gradient(520px 260px at 20% 0%, rgba(124,58,237,0.22), transparent 62%),
    radial-gradient(520px 260px at 100% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.98), rgba(10,7,24,0.98)) !important;

  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow:
    0 0 0 1px rgba(124,58,237,0.42),
    0 0 32px rgba(124,58,237,0.24),
    0 0 46px rgba(37,99,235,0.16),
    0 24px 60px rgba(0,0,0,0.34) !important;
}

/* ✅ Neon border for listing cards */
body.sc-dashboard-page #my-listings > div::before,
body.sc-dashboard-page .sc-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  pointer-events:none !important;
  background: linear-gradient(135deg, rgba(217,70,239,0.95), rgba(124,58,237,0.70), rgba(34,211,238,0.88)) !important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: .72 !important;
}

body.sc-dashboard-page #my-listings > div > *,
body.sc-dashboard-page .sc-card > *{
  position: relative !important;
  z-index: 2 !important;
}

/* ✅ Listing card text readability */
body.sc-dashboard-page #my-listings > div h3,
body.sc-dashboard-page #my-listings > div h4,
body.sc-dashboard-page .sc-card h3,
body.sc-dashboard-page .sc-card h4{
  color: #ffffff !important;
  font-weight: 950 !important;
}

body.sc-dashboard-page #my-listings > div p,
body.sc-dashboard-page #my-listings > div span,
body.sc-dashboard-page .sc-card p,
body.sc-dashboard-page .sc-card span{
  color: rgba(255,255,255,0.78) !important;
}

/* ✅ Keep price/counts bright */
body.sc-dashboard-page #my-listings .font-bold,
body.sc-dashboard-page #my-listings .font-black,
body.sc-dashboard-page .sc-card .font-bold,
body.sc-dashboard-page .sc-card .font-black{
  color: #ffffff !important;
}

/* ✅ Listing images */
body.sc-dashboard-page #my-listings img,
body.sc-dashboard-page .sc-card img{
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 18px 36px rgba(0,0,0,0.22) !important;
}

/* ✅ Dashboard listing action buttons */
body.sc-dashboard-page #my-listings button,
body.sc-dashboard-page .sc-card button{
  border-radius: 14px !important;
  font-weight: 950 !important;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

body.sc-dashboard-page #my-listings button:hover,
body.sc-dashboard-page .sc-card button:hover{
  transform: translateY(-1px) !important;
}

/* ✅ Normal light buttons on dark cards */
body.sc-dashboard-page #my-listings button.border,
body.sc-dashboard-page .sc-card button.border{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.sc-dashboard-page #my-listings button.border:hover,
body.sc-dashboard-page .sc-card button.border:hover{
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
}

/* ✅ Delete / red buttons stay red */
body.sc-dashboard-page #my-listings button.text-red-600,
body.sc-dashboard-page .sc-card button.text-red-600{
  background: rgba(239,68,68,0.12) !important;
  border-color: rgba(239,68,68,0.28) !important;
  color: #fecaca !important;
}

body.sc-dashboard-page #my-listings button.text-red-600:hover,
body.sc-dashboard-page .sc-card button.text-red-600:hover{
  background: rgba(239,68,68,0.20) !important;
  color: #ffffff !important;
}

/* ✅ Order cards */
body.sc-dashboard-page #ship-orders > div,
body.sc-dashboard-page #buy-orders > div,
body.sc-dashboard-page .sc-order-card{
  border-radius: 24px !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94)) !important;
  box-shadow:
    0 18px 46px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

/* ✅ Plus analytics cards */
body.sc-dashboard-page .sc-stat,
body.sc-dashboard-page .sc-panel,
body.sc-dashboard-page .sc-mini-row,
body.sc-dashboard-page .sc-plus-badge,
body.sc-dashboard-page .sc-plus-kicker{
  border-radius: 20px !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)) !important;
  box-shadow:
    0 12px 30px rgba(15,23,42,0.07),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

body.sc-dashboard-page .sc-stat-value{
  background: linear-gradient(90deg, #7c3aed, #2563eb, #d946ef, #7c3aed) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: chromaMove 2.4s linear infinite !important;
}

/* ✅ Charts */
body.sc-dashboard-page .sc-chart{
  border-radius: 22px !important;
  border: 1px solid rgba(124,58,237,0.12) !important;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(124,58,237,0.08), transparent 70%),
    linear-gradient(180deg, rgba(248,250,252,0.95), rgba(255,255,255,0.88)) !important;
}

/* ✅ Modals still clean */
body.sc-dashboard-page .sc-modal,
body.sc-dashboard-page #edit-modal,
body.sc-dashboard-page #boost-modal,
body.sc-dashboard-page #refund-modal,
body.sc-dashboard-page #return-request-modal{
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

body.sc-dashboard-page .sc-modal-backdrop{
  background: rgba(5,3,13,0.68) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ✅ Inputs in dashboard/edit modal */
body.sc-dashboard-page input,
body.sc-dashboard-page textarea,
body.sc-dashboard-page select{
  border-radius: 14px !important;
}

body.sc-dashboard-page input:focus,
body.sc-dashboard-page textarea:focus,
body.sc-dashboard-page select:focus{
  outline: none !important;
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.12) !important;
}

/* ✅ Toast */
body.sc-dashboard-page .sc-toast{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.28) !important;
}

/* ✅ Mobile */
@media (max-width: 768px){
  body.sc-dashboard-page main{
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 24px !important;
  }

  body.sc-dashboard-page main > div:first-child{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.sc-dashboard-page h2{
    font-size: 2.55rem !important;
  }

  body.sc-dashboard-page main > section,
  body.sc-dashboard-page main > div.bg-white,
  body.sc-dashboard-page main section.bg-white{
    border-radius: 24px !important;
  }

  body.sc-dashboard-page #my-listings > div,
  body.sc-dashboard-page .sc-card{
    border-radius: 24px !important;
  }
}

/* =========================================================
   ✅ PLUS PAGE BACKGROUND FIX — MATCH HOME / LISTING DARK NEON
   ✅ Does NOT touch nav-auth.js
   ✅ Does NOT edit #nav-auth-slot
   ✅ Only affects plus.html with body.sc-plus-page
========================================================= */

html{
  background: #080516 !important;
}

body.sc-plus-page{
  min-height: 100vh !important;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.15), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
  background-attachment: fixed !important;
  color: #111827 !important;
}

/* ✅ Remove the old light/gray glow layer only on Plus page */
body.sc-plus-page::after{
  content: none !important;
  display: none !important;
}

/* ✅ Add the same subtle line pattern vibe as home */
body.sc-plus-page::before{
  content:"" !important;
  position: fixed !important;
  inset: -80px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .16 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.16) 19px,
      rgba(255,255,255,0.16) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;
  transform: skewX(-8deg) !important;
  animation: scHomeLinesDrift 18s linear infinite !important;
}

/* ✅ Navbar stays normal white — nav-auth untouched */
body.sc-plus-page nav{
  background: #ffffff !important;
  color: #111827 !important;
}

/* ✅ Main Plus content floats cleanly over dark background */
body.sc-plus-page main{
  position: relative !important;
  z-index: 1 !important;
}

/* ✅ Big Plus page cards stay readable but feel premium */
body.sc-plus-page main > .bg-white,
body.sc-plus-page .plus-glass,
body.sc-plus-page .plus-soft-card,
body.sc-plus-page .plus-mini-stat,
body.sc-plus-page .plus-subtle-bg{
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92)) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* ✅ Main founder box */
body.sc-plus-page main > .bg-white{
  border-radius: 30px !important;
  overflow: hidden !important;
}

/* ✅ Keep Plus title text chromatic and strong */
body.sc-plus-page h1 .chromatic-text,
body.sc-plus-page #chroma-preview{
  background: linear-gradient(
    90deg,
    var(--c1, #7c3aed),
    var(--c2, #2563eb),
    var(--c1, #7c3aed),
    var(--c2, #2563eb)
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: chromaMove 2.4s linear infinite !important;
}

/* ✅ Founder badge looks cleaner on dark background */
body.sc-plus-page .plus-founder-badge{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.18),
    0 0 24px rgba(124,58,237,0.14) !important;
}

/* ✅ Benefit pills */
body.sc-plus-page .plus-benefit-pill{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  color: #111827 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

/* ✅ Progress fill uses the same purple/blue brand glow */
body.sc-plus-page .plus-progress-fill{
  background: linear-gradient(90deg, #d946ef, #7c3aed, #2563eb, #06b6d4) !important;
  background-size: 240% 100% !important;
  animation: chromaMove 2.4s linear infinite !important;
  box-shadow:
    0 8px 24px rgba(124,58,237,.35),
    0 0 18px rgba(37,99,235,.22) !important;
}

/* ✅ PayPal / checkout area buttons if present */
body.sc-plus-page button,
body.sc-plus-page .plus-glass a,
body.sc-plus-page #btn-save-colors{
  border-radius: 16px !important;
}

/* ✅ Mobile cleanup */
@media (max-width: 768px){
  body.sc-plus-page main{
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 24px !important;
  }

  body.sc-plus-page main > .bg-white{
    border-radius: 24px !important;
  }
}

/* =========================================================
   ✅ PLUS FOUNDER BADGE TEXT FIX
   - Removes the white shimmer covering the text
   - Leaves the green dot animation alone
   - Does NOT touch nav-auth.js or #nav-auth-slot
========================================================= */

/* ✅ Keep the founder badge readable */
body.sc-plus-page .plus-founder-badge{
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;

  background: linear-gradient(
    90deg,
    #7c3aed,
    #2563eb,
    #d946ef,
    #06b6d4,
    #7c3aed
  ) !important;
  background-size: 320% 100% !important;
  animation: chromaMove 2.4s linear infinite !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ✅ REMOVE the white shimmer that was covering the text */
body.sc-plus-page .plus-founder-badge::after{
  content: none !important;
  display: none !important;
}

/* ✅ Text inside badge stays clean and above everything */
body.sc-plus-page .plus-founder-badge span:not(.plus-founder-live-dot){
  position: relative !important;
  z-index: 10 !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: transparent !important;

  font-weight: 950 !important;
  letter-spacing: .03em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.34) !important;
}

/* ✅ Do not mess with the green live dot animation */
body.sc-plus-page .plus-founder-badge .plus-founder-live-dot{
  z-index: 12 !important;
}

/* =========================================================
   ✅ AUTH PASSWORD EYE FIX
   - Removes the browser/native black password eye
   - Keeps our custom white eye button
   - Applies to login + signup only
========================================================= */

body.sc-auth-page input[type="password"]::-ms-reveal,
body.sc-auth-page input[type="password"]::-ms-clear{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.sc-auth-page input[type="password"]::-webkit-credentials-auto-fill-button,
body.sc-auth-page input[type="password"]::-webkit-contacts-auto-fill-button,
body.sc-auth-page input[type="password"]::-webkit-caps-lock-indicator{
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

body.sc-auth-page .pw-wrap{
  position: relative !important;
}

body.sc-auth-page .pw-input{
  padding-right: 52px !important;
}

body.sc-auth-page .pw-eye-btn{
  z-index: 10 !important;
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}

body.sc-auth-page .pw-eye-btn svg{
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}

body.sc-auth-page .pw-eye-btn:hover{
  background: rgba(255,255,255,0.10) !important;
}

/* =========================================================
   ✅ FINAL AUTH NAV SPACING FIX
   Fixes login/signup nav being weirdly spaced from Tailwind space-x + CSS gap.
   Keeps navbar matching normal pages.
========================================================= */

body.sc-auth-page > nav > div.space-x-6 > :not([hidden]) ~ :not([hidden]){
  margin-left: 0 !important;
}

body.sc-auth-page > nav > div{
  gap: 1.5rem !important;
}

body.sc-auth-page #nav-auth-slot{
  margin-left: 0 !important;
}

/* =========================================================
   ✅ BROWSE + FEATURED + CART + PROFILE UI
   - Matches Sell City home hero vibe
   - Does NOT touch navbar
   - Fixes Browse title black text
   - Fixes boosted timer visibility
   - Updates cart/profile page UI
========================================================= */

/* ===============================
   SHARED PAGE BACKGROUND
================================ */

body.sc-browse-page,
body.sc-cart-page,
body.sc-profile-page{
  background:
    radial-gradient(820px 460px at 18% 6%, rgba(18,0,46,0.76), transparent 68%),
    radial-gradient(860px 520px at 88% 12%, rgba(124,58,237,0.62), transparent 66%),
    linear-gradient(135deg, #10051f 0%, #2b0054 38%, #5b0bb8 66%, #2563eb 100%) !important;
  color: #ffffff;
}

/* ✅ NAV READABILITY FIX
   The pages above use white body text, but the navbar is white.
   This keeps the navbar normal/readable without redesigning nav-auth. */
body.sc-browse-page > nav,
body.sc-cart-page > nav,
body.sc-profile-page > nav,
body.sc-browse-page > nav.bg-white,
body.sc-cart-page > nav.bg-white,
body.sc-profile-page > nav.bg-white{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* ✅ Normal nav links readable */
body.sc-browse-page > nav a,
body.sc-cart-page > nav a,
body.sc-profile-page > nav a,
body.sc-browse-page > nav button,
body.sc-cart-page > nav button,
body.sc-profile-page > nav button,
body.sc-browse-page > nav #nav-auth-slot,
body.sc-cart-page > nav #nav-auth-slot,
body.sc-profile-page > nav #nav-auth-slot{
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* ✅ Keep active/hover blue like before */
body.sc-browse-page > nav a.text-blue-600,
body.sc-cart-page > nav a.text-blue-600,
body.sc-profile-page > nav a.text-blue-600,
body.sc-browse-page > nav a:hover,
body.sc-cart-page > nav a:hover,
body.sc-profile-page > nav a:hover{
  color: #2563eb !important;
  -webkit-text-fill-color: initial !important;
}

/* ✅ Nav auth dropdown/buttons must stay readable */
body.sc-browse-page #nav-auth-slot *,
body.sc-cart-page #nav-auth-slot *,
body.sc-profile-page #nav-auth-slot *{
  -webkit-text-fill-color: initial;
}

body.sc-browse-page #nav-dd,
body.sc-cart-page #nav-dd,
body.sc-profile-page #nav-dd,
body.sc-browse-page #nav-dd *,
body.sc-cart-page #nav-dd *,
body.sc-profile-page #nav-dd *{
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* white diagonal line vibe like home hero */
body.sc-browse-page::before,
body.sc-cart-page::before,
body.sc-profile-page::before{
  content:"";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scPageLinesDrift 24s linear infinite;
}

body.sc-browse-page::after,
body.sc-cart-page::after,
body.sc-profile-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(17,0,35,0.58), transparent 68%),
    radial-gradient(900px 520px at 90% 6%, rgba(255,255,255,0.10), transparent 72%),
    linear-gradient(180deg, rgba(17,0,35,0.18), rgba(17,0,35,0.42)) !important;
}

@keyframes scPageLinesDrift{
  0%{ background-position: 0 0; }
  100%{ background-position: 220px 420px; }
}

/* ===============================
   BOOSTED TAG FIX — HOME + BROWSE
================================ */

.sc-boost-pill,
.boosted-card .sc-boost-pill,
#grid .sc-boost-pill,
#featured-row .sc-boost-pill,
#products-grid .sc-boost-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 10px 0 14px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.50) !important;
  color: #4c1d95 !important;
  flex-wrap: wrap !important;
  animation: none !important;
}

.sc-boost-pill .boost-main{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 950 !important;
  color: #5b21b6 !important;
  white-space: nowrap !important;
}

.sc-boost-pill .boost-star{
  color: #5b21b6 !important;
  text-shadow: 0 0 12px rgba(124,58,237,0.24);
}

.sc-boost-pill .boost-plus{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 23px !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
  background: linear-gradient(180deg, #ffffff, #f6f1ff) !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

.sc-boost-pill .boost-timer{
  font-size: 12px !important;
  font-weight: 850 !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

/* fallback: old boost-glow layout still readable while cache updates */
.boost-glow{
  animation: none !important;
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(124,58,237,0.18) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.50) !important;
}

.boost-glow .text-gray-600,
.boost-glow .text-gray-500{
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  opacity: 1 !important;
}

/* ===============================
   BROWSE / FEATURED PAGE
================================ */

body.sc-browse-page main.page-wrap{
  position: relative;
  z-index: 1;
}

body.sc-browse-page #page-title{
  color: #ffffff !important;
  font-size: clamp(2.35rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em;
  text-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 26px rgba(124,58,237,0.30);
}

body.sc-browse-page #page-title.chromatic-text{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body.sc-browse-page #page-subtitle{
  color: rgba(255,255,255,0.76) !important;
  font-weight: 700;
}

/* ✅ Back to Home button — normal, readable, no animation */
body.sc-browse-page main.page-wrap .sc-back-home-btn,
body main.page-wrap .sc-back-home-btn,
body.sc-browse-page main > .flex a.sc-back-home-btn[href="index.html"],
body main > .flex a.sc-back-home-btn[href="index.html"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;

  background: #111827 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: none !important;

  font-weight: 900 !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  transform: none !important;
  filter: none !important;
  transition: none !important;
}

body.sc-browse-page main.page-wrap .sc-back-home-btn:hover,
body main.page-wrap .sc-back-home-btn:hover,
body.sc-browse-page main.page-wrap .sc-back-home-btn:focus,
body main.page-wrap .sc-back-home-btn:focus{
  background: #1f2937 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 640px){
  body.sc-browse-page main.page-wrap .sc-back-home-btn,
  body main.page-wrap .sc-back-home-btn{
    width: 100% !important;
  }
}

body.sc-browse-page .card,
body.sc-browse-page #filters-panel,
body.sc-browse-page #mode-banner{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 70px rgba(17,0,35,0.22),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-browse-page .card .muted,
body.sc-browse-page #filters-panel .muted,
body.sc-browse-page #mode-banner .muted{
  color: #6b7280 !important;
}

body.sc-browse-page #filters-panel input,
body.sc-browse-page #filters-panel select{
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  box-shadow:
    0 12px 26px rgba(17,0,35,0.08),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

body.sc-browse-page #filters-panel input::placeholder{
  color: #9ca3af !important;
}

/* Browse listing grid cards use the same neon card vibe */
body.sc-browse-page #grid > div{
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
  padding: 18px !important;
  color: #fff !important;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(124,58,237,0.22), transparent 62%),
    radial-gradient(520px 260px at 100% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.98), rgba(10,7,24,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.42),
    0 0 32px rgba(124,58,237,0.24),
    0 0 46px rgba(37,99,235,0.16),
    0 24px 60px rgba(0,0,0,0.34) !important;
  transition:
    transform .24s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease !important;
}

body.sc-browse-page #grid > div:hover{
  transform: translateY(-6px) scale(1.015) !important;
  filter: saturate(1.06);
  box-shadow:
    0 0 0 1px rgba(217,70,239,0.62),
    0 0 38px rgba(217,70,239,0.28),
    0 0 54px rgba(37,99,235,0.22),
    0 30px 74px rgba(0,0,0,0.42) !important;
}

body.sc-browse-page #grid > div h4,
body.sc-browse-page #grid > div h3{
  color: #ffffff !important;
  font-weight: 950 !important;
}

body.sc-browse-page #grid > div p,
body.sc-browse-page #grid > div .text-gray-600,
body.sc-browse-page #grid > div .text-gray-500{
  color: rgba(232,225,255,0.72) !important;
}

body.sc-browse-page #grid > div img{
  border-radius: 22px !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

/* ===============================
   CART PAGE
================================ */

body.sc-cart-page section{
  position: relative;
  z-index: 1;
}

body.sc-cart-page h2{
  color: #ffffff !important;
  font-size: clamp(2.4rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em;
  text-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 26px rgba(124,58,237,0.30);
}

body.sc-cart-page #cart-items > div{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 24px !important;
  box-shadow:
    0 22px 60px rgba(17,0,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-cart-page #cart-items img{
  width: 116px !important;
  height: 82px !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 28px rgba(17,0,35,0.13);
}

body.sc-cart-page #cart-items h3{
  font-size: 1.05rem;
  font-weight: 950 !important;
  color: #111827 !important;
}

body.sc-cart-page #cart-items .text-gray-600,
body.sc-cart-page #cart-items .text-gray-500,
body.sc-cart-page #cart-items .text-gray-400{
  color: #6b7280 !important;
}

body.sc-cart-page #cart-items button.dec,
body.sc-cart-page #cart-items button.inc{
  min-width: 34px;
  min-height: 34px;
  border-radius: 12px !important;
  font-weight: 950;
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
}

body.sc-cart-page #cart-items button.remove{
  font-weight: 900;
}

body.sc-cart-page section > .mt-8.bg-white{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 26px !important;
  box-shadow:
    0 26px 70px rgba(17,0,35,0.22),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-cart-page #clear-cart{
  min-height: 54px;
  border-radius: 16px !important;
  font-weight: 950 !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(124,58,237,0.18) !important;
}

body.sc-cart-page #checkout-btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 54px;
  border-radius: 16px !important;
  font-weight: 950 !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.30),
    0 12px 28px rgba(6,182,212,0.22) !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .18s ease !important;
}

body.sc-cart-page #checkout-btn::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(18deg);
  opacity: 0;
  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

body.sc-cart-page #checkout-btn:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06) saturate(1.12);
}

body.sc-cart-page #checkout-btn:hover::after{
  left: 135%;
  opacity: 1;
}

/* ===============================
   PROFILE PAGE
================================ */

body.sc-profile-page section{
  position: relative;
  z-index: 1;
}

body.sc-profile-page section > .bg-white,
body.sc-profile-page .mt-6 > .bg-white,
body.sc-profile-page .sec-card,
body.sc-profile-page .border.rounded-2xl{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow:
    0 24px 70px rgba(17,0,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-profile-page section > .bg-white{
  border-radius: 28px !important;
}

body.sc-profile-page .mt-6 > .bg-white{
  border-radius: 28px !important;
}

body.sc-profile-page #pf-photo{
  border-radius: 24px !important;
  border: 2px solid rgba(124,58,237,0.20) !important;
  box-shadow:
    0 18px 42px rgba(17,0,35,0.16),
    0 0 28px rgba(124,58,237,0.12) !important;
}

body.sc-profile-page #pf-name{
  font-size: 2rem !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em;
}

body.sc-profile-page #pf-email,
body.sc-profile-page #pf-uid,
body.sc-profile-page .text-gray-500,
body.sc-profile-page .text-gray-600{
  color: #6b7280 !important;
}

body.sc-profile-page .tab-btn{
  min-height: 44px;
  border-radius: 14px !important;
  font-weight: 950 !important;
}

body.sc-profile-page .tab-btn.bg-gradient-to-r,
body.sc-profile-page button.bg-gradient-to-r,
body.sc-profile-page a.bg-gradient-to-r{
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(124,58,237,0.24),
    0 12px 26px rgba(6,182,212,0.18) !important;
}

body.sc-profile-page input,
body.sc-profile-page textarea,
body.sc-profile-page select{
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
}

body.sc-profile-page input::placeholder,
body.sc-profile-page textarea::placeholder{
  color: #9ca3af !important;
}

@media (max-width: 640px){
  body.sc-cart-page #cart-items > div{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.sc-cart-page #cart-items img{
    width: 100% !important;
    height: 180px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.sc-browse-page::before,
  body.sc-cart-page::before,
  body.sc-profile-page::before,
  body.sc-cart-page #checkout-btn,
  body.sc-cart-page #checkout-btn::after{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ✅ SELLER PAGE UI — MATCH HOME/BROWSE VIBE
   - ONLY affects seller.html with body.sc-seller-page
   - DOES NOT touch nav
   - DOES NOT touch #nav-auth-slot
   - Keeps nav-auth bar exactly as-is
========================================================= */

/* ===============================
   PAGE BACKGROUND
================================ */

body.sc-seller-page{
  background:
    radial-gradient(820px 460px at 18% 6%, rgba(18,0,46,0.76), transparent 68%),
    radial-gradient(860px 520px at 88% 12%, rgba(124,58,237,0.62), transparent 66%),
    linear-gradient(135deg, #10051f 0%, #2b0054 38%, #5b0bb8 66%, #2563eb 100%) !important;
  color: #111827;
}

/* home/browse diagonal line texture */
body.sc-seller-page::before{
  content:"";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
  animation: scSellerLinesDrift 24s linear infinite;
}

body.sc-seller-page::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(17,0,35,0.58), transparent 68%),
    radial-gradient(900px 520px at 90% 6%, rgba(255,255,255,0.10), transparent 72%),
    linear-gradient(180deg, rgba(17,0,35,0.18), rgba(17,0,35,0.42)) !important;
}

@keyframes scSellerLinesDrift{
  0%{ background-position: 0 0; }
  100%{ background-position: 220px 420px; }
}

/* ===============================
   MAIN SELLER PAGE CONTENT ONLY
================================ */

body.sc-seller-page section{
  position: relative;
  z-index: 1;
}

/* seller header card */
body.sc-seller-page section #seller-header{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 30px !important;
  padding: 28px !important;
  box-shadow:
    0 26px 80px rgba(17,0,35,0.24),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: visible !important;
}

/* seller header avatar/images */
body.sc-seller-page section #seller-header img{
  border-radius: 24px !important;
  border: 2px solid rgba(124,58,237,0.20) !important;
  box-shadow:
    0 18px 42px rgba(17,0,35,0.16),
    0 0 28px rgba(124,58,237,0.12) !important;
}

/* seller header name */
body.sc-seller-page section #seller-header h1,
body.sc-seller-page section #seller-header h2,
body.sc-seller-page section #seller-header .seller-name-row,
body.sc-seller-page section #seller-header .sellerNameRow,
body.sc-seller-page section #seller-header .sellerNameLine,
body.sc-seller-page section #seller-header .seller-name-line{
  color: #111827 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em;
}

/* text inside seller header */
body.sc-seller-page section #seller-header p,
body.sc-seller-page section #seller-header .text-gray-500,
body.sc-seller-page section #seller-header .text-gray-600,
body.sc-seller-page section #seller-header .text-gray-700{
  color: #6b7280 !important;
}

/* page section headings */
body.sc-seller-page section > h2,
body.sc-seller-page section .mt-12 h2{
  color: #ffffff !important;
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em;
  text-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 26px rgba(124,58,237,0.30);
}

body.sc-seller-page section .mt-12 p.text-sm{
  color: rgba(255,255,255,0.76) !important;
  font-weight: 700;
}

body.sc-seller-page section #no-listings{
  color: rgba(255,255,255,0.76) !important;
  font-weight: 800;
}

/* ===============================
   SELLER LISTING CARDS
================================ */

body.sc-seller-page section #seller-listings > div{
  position: relative;
  overflow: hidden;
  border-radius: 30px !important;
  padding: 18px !important;
  color: #fff !important;

  background:
    radial-gradient(520px 260px at 20% 0%, rgba(124,58,237,0.22), transparent 62%),
    radial-gradient(520px 260px at 100% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.98), rgba(10,7,24,0.98)) !important;

  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow:
    0 0 0 1px rgba(124,58,237,0.42),
    0 0 32px rgba(124,58,237,0.24),
    0 0 46px rgba(37,99,235,0.16),
    0 24px 60px rgba(0,0,0,0.34) !important;

  transition:
    transform .24s ease,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease !important;
}

body.sc-seller-page section #seller-listings > div:hover{
  transform: translateY(-6px) scale(1.015);
  filter: saturate(1.06);
  box-shadow:
    0 0 0 1px rgba(217,70,239,0.62),
    0 0 38px rgba(217,70,239,0.28),
    0 0 54px rgba(37,99,235,0.22),
    0 30px 74px rgba(0,0,0,0.42) !important;
}

/* listing images */
body.sc-seller-page section #seller-listings > div img{
  border-radius: 22px !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

/* listing card text */
body.sc-seller-page section #seller-listings > div h3,
body.sc-seller-page section #seller-listings > div h4,
body.sc-seller-page section #seller-listings > div .font-bold,
body.sc-seller-page section #seller-listings > div .font-semibold{
  color: #ffffff !important;
}

body.sc-seller-page section #seller-listings > div p,
body.sc-seller-page section #seller-listings > div .text-gray-500,
body.sc-seller-page section #seller-listings > div .text-gray-600,
body.sc-seller-page section #seller-listings > div .text-gray-700{
  color: rgba(232,225,255,0.72) !important;
}

/* listing card buttons */
body.sc-seller-page section #seller-listings > div button,
body.sc-seller-page section #seller-listings > div a.bg-gradient-to-r{
  min-height: 48px;
  border-radius: 16px !important;
  font-weight: 950 !important;
}

/* buy buttons / gradient links */
body.sc-seller-page section #seller-listings > div .buy-btn,
body.sc-seller-page section #seller-listings > div a.bg-gradient-to-r,
body.sc-seller-page section #seller-listings > div button.bg-gradient-to-r{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.30),
    0 12px 28px rgba(6,182,212,0.22) !important;
}

/* slow shine animation */
body.sc-seller-page section #seller-listings > div .buy-btn::after,
body.sc-seller-page section #seller-listings > div a.bg-gradient-to-r::after,
body.sc-seller-page section #seller-listings > div button.bg-gradient-to-r::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(18deg);
  opacity: 0;
  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

body.sc-seller-page section #seller-listings > div .buy-btn:hover,
body.sc-seller-page section #seller-listings > div a.bg-gradient-to-r:hover,
body.sc-seller-page section #seller-listings > div button.bg-gradient-to-r:hover{
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06) saturate(1.12);
}

body.sc-seller-page section #seller-listings > div .buy-btn:hover::after,
body.sc-seller-page section #seller-listings > div a.bg-gradient-to-r:hover::after,
body.sc-seller-page section #seller-listings > div button.bg-gradient-to-r:hover::after{
  left: 135%;
  opacity: 1;
}

/* ===============================
   REVIEWS AREA
================================ */

body.sc-seller-page section #review-form{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 28px !important;
  padding: 22px !important;
  box-shadow:
    0 24px 70px rgba(17,0,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-seller-page section #review-form .text-gray-500,
body.sc-seller-page section #review-form .text-gray-600,
body.sc-seller-page section #review-result,
body.sc-seller-page section #review-eligibility{
  color: #6b7280 !important;
}

/* review form fields */
body.sc-seller-page section #review-form select,
body.sc-seller-page section #review-form textarea,
body.sc-seller-page section #review-form input{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid rgba(124,58,237,0.14) !important;
  border-radius: 16px !important;
  box-shadow:
    0 12px 26px rgba(17,0,35,0.08),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
}

body.sc-seller-page section #review-form select option,
body.sc-seller-page section #review-form option{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.sc-seller-page section #review-form textarea::placeholder{
  color: #9ca3af !important;
}

/* Post button */
body.sc-seller-page section #review-form button{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 46px;
  border-radius: 16px !important;
  font-weight: 950 !important;
  background: linear-gradient(100deg, #d946ef 0%, #7c3aed 48%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow:
    0 18px 38px rgba(124,58,237,0.24),
    0 12px 28px rgba(6,182,212,0.18) !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    filter .18s ease !important;
}

body.sc-seller-page section #review-form button::after{
  content:"";
  position:absolute;
  top:-45%;
  left:-115%;
  width:42%;
  height:200%;
  pointer-events:none;
  z-index:1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.14),
    rgba(255,255,255,0.62),
    rgba(255,255,255,0.14),
    transparent
  );
  transform: rotate(18deg);
  opacity: 0;
  transition:
    left 1.25s cubic-bezier(.16,1,.3,1),
    opacity .30s ease;
}

body.sc-seller-page section #review-form button:hover{
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.06) saturate(1.12);
}

body.sc-seller-page section #review-form button:hover::after{
  left: 135%;
  opacity: 1;
}

/* reviews list cards */
body.sc-seller-page section #reviews-list > div{
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow:
    0 22px 60px rgba(17,0,35,0.18),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.sc-seller-page section #reviews-list > div img{
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(17,0,35,0.12);
}

body.sc-seller-page section #reviews-list > div .text-gray-500,
body.sc-seller-page section #reviews-list > div .text-gray-600,
body.sc-seller-page section #reviews-list > div .text-gray-700{
  color: #6b7280 !important;
}

body.sc-seller-page section #reviews-list > div a,
body.sc-seller-page section #reviews-list > div .font-bold,
body.sc-seller-page section #reviews-list > div .font-semibold{
  color: #111827 !important;
}

/* reply cards inside reviews */
body.sc-seller-page section #reviews-list > div .bg-gray-50{
  background: rgba(249,250,251,0.95) !important;
  color: #111827 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(124,58,237,0.10) !important;
}

/* mobile */
@media (max-width: 640px){
  body.sc-seller-page section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.sc-seller-page section #seller-header{
    padding: 22px !important;
    border-radius: 26px !important;
  }

  body.sc-seller-page section #review-form{
    padding: 18px !important;
    border-radius: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.sc-seller-page::before,
  body.sc-seller-page section #seller-listings > div,
  body.sc-seller-page section #seller-listings > div .buy-btn,
  body.sc-seller-page section #review-form button{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ✅ BROWSE + FEATURED ONLY: iPhone horizontal rows of 5
   - Does NOT touch index.html / home page
   - Does NOT touch nav-auth
   - Keeps same card UI
   - Locks page width so the whole page does not slide sideways
========================================================= */

@media only screen and (max-width: 640px){

  html,
  body{
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.sc-browse-page{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.sc-browse-page .page-wrap{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* Keep top content aligned and professional */
  body.sc-browse-page main > .flex,
  body.sc-browse-page #mode-banner,
  body.sc-browse-page #filters-panel,
  body.sc-browse-page .sticky-filters,
  body.sc-browse-page section.card{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Only these two grids get the row behavior */
  body.sc-browse-page #grid.sc-mobile-rows-enabled,
  body.sc-browse-page #featured-grid.sc-mobile-rows-enabled{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* One horizontal row containing up to 5 products */
  body.sc-browse-page .sc-mobile-product-row{
    display: flex !important;
    align-items: stretch !important;
    gap: 16px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;

    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;

    padding: 0 2px 22px 2px !important;
    margin: 0 0 28px 0 !important;

    border-bottom: 1px solid rgba(255,255,255,0.18) !important;

    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  body.sc-browse-page .sc-mobile-product-row::-webkit-scrollbar{
    display: none !important;
  }

  /* Each product keeps the same UI, just sized cleanly for swipe */
  body.sc-browse-page .sc-mobile-product-row > .sc-listing-card{
    flex: 0 0 min(84vw, 360px) !important;
    width: min(84vw, 360px) !important;
    min-width: min(84vw, 360px) !important;
    max-width: min(84vw, 360px) !important;

    height: auto !important;
    margin: 0 !important;

    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }

  /* End breathing room without making page wider */
  body.sc-browse-page .sc-mobile-product-row::after{
    content: "";
    flex: 0 0 2px;
  }

  /* Better spacing after final row */
  body.sc-browse-page .sc-mobile-product-row:last-child{
    margin-bottom: 10px !important;
  }
}

@media only screen and (max-width: 390px){
  body.sc-browse-page .sc-mobile-product-row > .sc-listing-card{
    flex-basis: 86vw !important;
    width: 86vw !important;
    min-width: 86vw !important;
    max-width: 86vw !important;
  }
}

/* =========================================================
   ✅ SELL CITY PERFORMANCE PACK
   - Faster image rendering
   - Smoother product grids
   - Less lag on mobile
========================================================= */

/* Images should not cause weird layout shifts */
img{
  max-width: 100%;
}

/* Smooth image appearance after load */
img{
  opacity: 1;
}

img.sc-img-loaded{
  opacity: 1;
}

/* Let browser skip rendering off-screen listing cards until needed */
.sc-listing-card,
.product-card,
.listing-card,
#products-grid > div,
#featured-row > div,
#grid > div,
#my-listings > div{
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

/* Prevent huge cards/images from forcing layout lag */
.sc-listing-card img,
.product-card img,
.listing-card img,
#products-grid img,
#featured-row img,
#grid img,
#my-listings img{
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Mobile: reduce animation pressure so iPhone feels smoother */
@media (max-width: 640px){
  body::before,
  body::after{
    animation-duration: 28s !important;
  }

  .chromatic-text{
    animation-duration: 4s !important;
  }

  .sc-listing-card,
  .product-card,
  .listing-card,
  #products-grid > div,
  #featured-row > div,
  #grid > div,
  #my-listings > div{
    contain-intrinsic-size: 520px;
  }
}

 /* =========================================================
   ✅ SELL CITY INFO / TRUST / FAQ PAGES
   - Used for How It Works, Buyer FAQ, Seller FAQ,
     Secure Payments, Buyer Protection, Verified Sellers, Privacy
   - Matches dark Sell City gaming marketplace vibe
========================================================= */

body.sc-info-page{
  min-height: 100vh;
  color: #ffffff;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.32), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.24), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.18), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
}

body.sc-info-page::before{
  opacity: .22;
}

.sc-info-nav{
  background: rgba(8,5,22,0.82) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sc-info-nav a{
  color: rgba(255,255,255,0.82);
}

.sc-info-nav a:hover{
  color: #ffffff;
}

.sc-info-hero{
  position: relative;
  overflow: hidden;
  padding: 92px 28px 76px;
  isolation: isolate;
}

.sc-info-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(820px 420px at 18% 25%, rgba(124,58,237,.40), transparent 66%),
    radial-gradient(820px 420px at 86% 18%, rgba(37,99,235,.32), transparent 66%),
    linear-gradient(135deg, rgba(43,0,84,.50), rgba(37,99,235,.12));
}

.sc-info-hero::after{
  content:"";
  position:absolute;
  inset:-90px;
  z-index:1;
  pointer-events:none;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
}

.sc-info-hero-inner{
  position:relative;
  z-index:2;
  max-width: 1120px;
  margin: 0 auto;
}

.sc-info-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  color:#ffffff;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
  box-shadow: 0 18px 46px rgba(0,0,0,0.22);
}

.sc-info-title{
  margin-top: 22px;
  font-size: clamp(44px, 7vw, 76px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -0.065em;
  color:#ffffff;
  text-shadow: 0 24px 68px rgba(0,0,0,0.42);
}

.sc-info-subtitle{
  margin-top: 20px;
  max-width: 760px;
  color: rgba(232,225,255,0.78);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 650;
}

.sc-info-main{
  max-width: 1120px;
  margin: 0 auto;
  padding: 54px 28px 74px;
}

.sc-info-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.sc-info-card{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 26px;
  color:#ffffff;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(420px 220px at 100% 0%, rgba(37,99,235,0.18), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.92), rgba(10,7,24,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.20),
    0 20px 54px rgba(0,0,0,0.26);
}

.sc-info-card h2,
.sc-info-card h3{
  color:#ffffff;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.sc-info-card p,
.sc-info-card li{
  color: rgba(232,225,255,0.74);
  line-height: 1.7;
}

.sc-info-number{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 20px;
  color:#fff;
  background: linear-gradient(135deg, #d946ef, #7c3aed 50%, #2563eb);
  box-shadow: 0 18px 42px rgba(124,58,237,0.28);
}

.sc-info-panel{
  margin-top: 24px;
  border-radius: 30px;
  padding: 30px;
  color:#ffffff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 64px rgba(0,0,0,0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sc-info-panel h2{
  font-size: 30px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.035em;
  color:#ffffff;
}

.sc-info-panel p,
.sc-info-panel li{
  color: rgba(232,225,255,0.74);
  line-height: 1.75;
}

.sc-info-list{
  display:grid;
  gap: 14px;
  margin-top: 22px;
}

.sc-info-list-item{
  border-radius: 20px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
}

.sc-info-list-item b{
  color:#ffffff;
}

.sc-info-alert{
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 22px;
  color: #fff7ed;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.22);
}

.sc-info-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-top: 26px;
}

.sc-info-btn-primary,
.sc-info-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 15px;
  font-weight: 950;
  text-decoration:none;
}

.sc-info-btn-primary{
  color:#fff !important;
  background: linear-gradient(100deg, #d946ef, #7c3aed 48%, #2563eb);
  box-shadow: 0 18px 44px rgba(124,58,237,0.26);
}

.sc-info-btn-secondary{
  color:#fff !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
}

.sc-info-footer{
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(8,5,22,0.88);
  color: rgba(232,225,255,0.62);
  padding: 34px 28px;
}

.sc-info-footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.sc-info-footer a{
  color: rgba(232,225,255,0.68);
}

.sc-info-footer a:hover{
  color:#ffffff;
}

@media (max-width: 900px){
  .sc-info-grid{
    grid-template-columns: 1fr;
  }

  .sc-info-hero{
    padding: 72px 20px 58px;
  }

  .sc-info-main{
    padding: 38px 20px 56px;
  }

  .sc-info-title{
    font-size: clamp(42px, 13vw, 58px);
  }
}

/* =========================================================
   ✅ HOW IT WORKS PAGE — PRO VERSION
   - Does NOT touch navbar/auth
   - Smaller than homepage hero
   - Matches Sell City purple/blue gaming vibe
========================================================= */

body.sc-how-page{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,58,237,0.26), transparent 62%),
    radial-gradient(760px 520px at 88% 18%, rgba(37,99,235,0.20), transparent 64%),
    radial-gradient(700px 520px at 50% 96%, rgba(217,70,239,0.14), transparent 68%),
    linear-gradient(180deg, #080516 0%, #10091f 52%, #080516 100%) !important;
  color:#fff;
}

/* compact hero */
.sc-how-compact-hero{
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 72px 28px 70px;
  color:#fff;
  background:
    radial-gradient(720px 430px at 18% 35%, rgba(18, 0, 46, 0.72), transparent 68%),
    radial-gradient(760px 470px at 88% 32%, rgba(124, 58, 237, 0.52), transparent 66%),
    linear-gradient(135deg, #2b0054 0%, #4c0c96 44%, #5b21b6 72%, #1d4ed8 100%);
  isolation:isolate;
}

.sc-how-compact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(17, 0, 35, 0.70), rgba(17, 0, 35, 0.24) 52%, rgba(37, 99, 235, 0.12)),
    radial-gradient(620px 360px at 50% 42%, rgba(255,255,255,0.08), transparent 68%);
}

.sc-how-hero-lines{
  position:absolute;
  inset:-80px;
  z-index:1;
  pointer-events:none;
  opacity:.28;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    );
  transform: skewX(-8deg);
}

.sc-how-hero-inner{
  position:relative;
  z-index:2;
  max-width: 980px;
  margin:0 auto;
}

.sc-how-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  color:#ffffff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    0 14px 34px rgba(17,0,35,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .14em;
}

.sc-how-compact-hero h1{
  margin: 20px 0 0;
  font-size: clamp(44px, 6vw, 70px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -0.065em;
  color:#fff;
  text-shadow: 0 20px 56px rgba(17,0,35,0.42);
}

.sc-how-compact-hero p{
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255,255,255,0.86);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 700;
}

/* main layout */
.sc-how-main{
  max-width: 1120px;
  margin:0 auto;
  padding: 58px 28px 76px;
}

.sc-how-heading{
  text-align:center;
  max-width: 760px;
  margin:0 auto 34px;
}

.sc-how-heading span{
  display:inline-flex;
  padding: 9px 14px;
  border-radius:999px;
  color:#d8b4fe;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(216,180,254,0.18);
  font-size: 12px;
  font-weight: 950;
  letter-spacing:.12em;
}

.sc-how-heading h2{
  margin-top:16px;
  font-size: clamp(32px, 4vw, 48px);
  line-height:1.04;
  font-weight:950;
  letter-spacing:-0.045em;
  color:#fff;
}

.sc-how-heading p{
  margin-top:14px;
  color: rgba(232,225,255,0.72);
  font-size: 17px;
  line-height:1.7;
}

/* step cards */
.sc-how-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.sc-how-step-card{
  position:relative;
  overflow:hidden;
  min-height: 300px;
  border-radius: 28px;
  padding: 26px;
  background:
    radial-gradient(420px 220px at 10% 0%, rgba(124,58,237,0.22), transparent 62%),
    radial-gradient(420px 220px at 100% 0%, rgba(37,99,235,0.16), transparent 62%),
    linear-gradient(180deg, rgba(25,14,48,0.96), rgba(10,7,24,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.20),
    0 24px 64px rgba(0,0,0,0.28);
}

.sc-how-step-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(217,70,239,0.55), rgba(124,58,237,0.28), rgba(37,99,235,0.42));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.sc-how-step-top{
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
  z-index:2;
}

.sc-how-step-number{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  font-weight:950;
  background: linear-gradient(135deg, #d946ef, #7c3aed 50%, #2563eb);
  box-shadow: 0 18px 42px rgba(124,58,237,0.28);
  flex:0 0 auto;
}

.sc-how-step-card h3{
  color:#fff;
  font-size: 24px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-0.025em;
}

.sc-how-step-card p{
  color: rgba(232,225,255,0.72);
  margin-top:4px;
  line-height:1.5;
}

.sc-how-step-card ul{
  position:relative;
  z-index:2;
  margin-top:22px;
  display:grid;
  gap:12px;
}

.sc-how-step-card li{
  color: rgba(232,225,255,0.76);
  line-height:1.55;
  padding-left: 20px;
  position:relative;
}

.sc-how-step-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#93c5fd;
  font-weight:950;
}

/* split panels */
.sc-how-split{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:20px;
  margin-top:22px;
}

.sc-how-panel{
  border-radius:28px;
  padding:28px;
  background: rgba(255,255,255,0.065);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 64px rgba(0,0,0,0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.sc-how-panel-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.12);
  font-size:22px;
}

.sc-how-panel h3{
  margin-top:18px;
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-how-panel p{
  color: rgba(232,225,255,0.74);
  margin-top:10px;
  line-height:1.7;
}

.sc-how-panel a{
  display:inline-flex;
  margin-top:18px;
  color:#93c5fd;
  font-weight:950;
}

.sc-how-panel a:hover{
  color:#fff;
}

/* trust box */
.sc-how-trust-box{
  margin-top:22px;
  padding:26px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:
    linear-gradient(135deg, rgba(124,58,237,0.18), rgba(37,99,235,0.12)),
    rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.12);
}

.sc-how-trust-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-how-trust-box p{
  color: rgba(232,225,255,0.72);
  margin-top:8px;
  max-width:640px;
  line-height:1.65;
}

.sc-how-trust-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.sc-how-trust-links a{
  color:#fff;
  font-weight:950;
  padding:11px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  white-space:nowrap;
}

.sc-how-trust-links a:hover{
  background: rgba(255,255,255,0.14);
}

/* footer */
.sc-how-footer{
  border-top:1px solid rgba(255,255,255,0.10);
  background: rgba(8,5,22,0.88);
  color: rgba(232,225,255,0.66);
  padding:34px 28px;
}

.sc-how-footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.sc-how-footer p{
  margin-top:8px;
  color: rgba(232,225,255,0.60);
}

.sc-how-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-how-footer-links a{
  color: rgba(232,225,255,0.70);
  font-weight:800;
}

.sc-how-footer-links a:hover{
  color:#fff;
}

/* mobile */
@media (max-width: 900px){
  .sc-how-compact-hero{
    min-height: 300px;
    padding: 58px 20px 56px;
  }

  .sc-how-main{
    padding: 40px 20px 58px;
  }

  .sc-how-steps,
  .sc-how-split{
    grid-template-columns:1fr;
  }

  .sc-how-trust-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-how-trust-links{
    justify-content:flex-start;
  }
}

/* =========================================================
   ✅ HOW IT WORKS — FINAL HELP CENTER STYLE
   - Matches the reference screenshot
   - Does NOT touch nav-auth.js
   - Keeps normal top navbar visible
========================================================= */

body.sc-how-final-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* force normal navbar text to stay visible on this dark page */
body.sc-how-final-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
}

body.sc-how-final-page .sc-normal-nav a,
body.sc-how-final-page .sc-normal-nav span{
  color:inherit;
}

body.sc-how-final-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-how-final-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

/* full page wrapper */
.sc-how-final-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* hero */
.sc-how-final-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.08);
  min-height: 360px;
  isolation:isolate;
}

.sc-how-final-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 46%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.46), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-how-final-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  opacity:.22;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-how-final-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:64px 32px 58px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:42px;
}

.sc-how-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:26px;
}

.sc-how-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-how-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-how-final-copy h1{
  color:#fff;
  font-size: clamp(46px, 6vw, 70px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-how-final-copy p{
  margin-top:20px;
  max-width:650px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

/* hero graphic */
.sc-how-visual{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-how-orb{
  position:absolute;
  width:360px;
  height:110px;
  bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.36);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-how-shield{
  position:absolute;
  left:50%;
  top:20px;
  transform:translateX(-42%);
  width:155px;
  height:170px;
  color:#d8b4fe;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.36));
  border:1px solid rgba(255,255,255,0.20);
  border-radius:38px 38px 60px 60px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 24px 70px rgba(124,58,237,0.36),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.sc-how-shield svg{
  width:95px;
  height:95px;
  color:#f5e8ff;
}

.sc-how-controller{
  position:absolute;
  right:60px;
  top:112px;
  width:150px;
  height:95px;
  color:#f5e8ff;
  background:linear-gradient(145deg, rgba(31,20,64,0.98), rgba(69,36,130,0.92));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 26px 70px rgba(0,0,0,0.36);
}

.sc-how-controller svg{
  width:115px;
  height:70px;
}

.sc-how-card-visual{
  position:absolute;
  left:70px;
  top:95px;
  width:155px;
  height:110px;
  border-radius:24px;
  background:linear-gradient(145deg, rgba(30,20,60,0.95), rgba(37,99,235,0.24));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 24px 70px rgba(0,0,0,0.34);
  padding:18px;
}

.sc-how-card-visual div{
  height:12px;
  border-radius:999px;
  background:rgba(168,85,247,0.55);
  margin-bottom:18px;
}

.sc-how-card-visual div:last-child{
  width:70%;
  background:rgba(96,165,250,0.36);
}

/* sections */
.sc-how-final-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-how-section-head{
  margin-bottom:24px;
}

.sc-how-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-how-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-how-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* process */
.sc-how-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:82px;
  padding:8px 16px;
}

.sc-how-line{
  position:absolute;
  left:22%;
  right:22%;
  top:98px;
  border-top:2px dashed rgba(124,58,237,0.45);
  z-index:0;
}

.sc-how-process-card{
  position:relative;
  z-index:1;
  min-height:250px;
  border-radius:20px;
  padding:26px 22px;
  text-align:center;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-how-card-num{
  position:absolute;
  top:22px;
  left:22px;
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
}

.sc-how-icon{
  width:82px;
  height:82px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  color:#c4b5fd;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.48), rgba(40,22,83,0.88));
  border:1px solid rgba(168,85,247,0.34);
  box-shadow:0 18px 44px rgba(124,58,237,0.22);
}

.sc-how-icon svg{
  width:44px;
  height:44px;
}

.sc-how-process-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  letter-spacing:-0.02em;
}

.sc-how-process-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:12px;
}

/* buyer/seller cards */
.sc-how-two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

.sc-how-large-card{
  position:relative;
  overflow:hidden;
  min-height:350px;
  border-radius:22px;
  padding:30px;
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(124,58,237,0.16), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.30);
}

.sc-how-large-card::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:20px;
  bottom:-40px;
  opacity:.08;
  background:linear-gradient(135deg, #a855f7, #2563eb);
  border-radius:38px;
  transform:rotate(-8deg);
}

.sc-how-large-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.sc-how-large-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  box-shadow:0 18px 44px rgba(124,58,237,0.24);
  flex:0 0 auto;
}

.sc-how-large-icon svg{
  width:36px;
  height:36px;
}

.sc-how-large-card h3{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-how-large-card p{
  color:rgba(232,225,255,0.70);
  margin-top:5px;
}

.sc-how-check-list{
  margin-top:28px;
  display:grid;
  gap:15px;
}

.sc-how-check-list li{
  position:relative;
  color:rgba(232,225,255,0.78);
  padding-left:34px;
  line-height:1.45;
}

.sc-how-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 10px 26px rgba(124,58,237,0.22);
}

.sc-how-card-link{
  display:inline-flex;
  margin-top:26px;
  color:#a78bfa;
  font-weight:950;
}

.sc-how-card-link:hover{
  color:#fff;
}

/* trust row */
.sc-how-trust-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border-radius:22px;
  overflow:hidden;
  background:rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.28);
}

.sc-how-trust-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:28px;
  color:#fff;
  text-decoration:none;
  border-right:1px solid rgba(255,255,255,0.08);
}

.sc-how-trust-item:last-child{
  border-right:0;
}

.sc-how-trust-item:hover{
  background:rgba(124,58,237,0.10);
}

.sc-how-trust-icon{
  width:70px;
  height:70px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
  flex:0 0 auto;
}

.sc-how-trust-icon svg{
  width:36px;
  height:36px;
}

.sc-how-trust-item h3{
  color:#fff;
  font-weight:950;
  font-size:18px;
}

.sc-how-trust-item p{
  color:rgba(232,225,255,0.70);
  margin-top:7px;
  line-height:1.55;
}

/* help CTA */
.sc-how-help-box{
  margin-top:24px;
  margin-bottom:52px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-how-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-how-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-how-help-icon svg{
  width:38px;
  height:38px;
}

.sc-how-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-how-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-how-help-btn{
  color:#fff;
  font-weight:950;
  padding:15px 22px;
  border-radius:12px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
  white-space:nowrap;
}

.sc-how-help-btn:hover{
  filter:brightness(1.08);
}

/* footer */
.sc-how-final-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-how-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-how-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-how-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-how-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-how-footer-links a:hover{
  color:#fff;
}

/* responsive */
@media (max-width: 980px){
  .sc-how-final-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-how-visual{
    min-height:220px;
  }

  .sc-how-process,
  .sc-how-two-col,
  .sc-how-trust-row{
    grid-template-columns:1fr;
  }

  .sc-how-process{
    gap:20px;
    padding:0;
  }

  .sc-how-line{
    display:none;
  }

  .sc-how-trust-item{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  .sc-how-trust-item:last-child{
    border-bottom:0;
  }

  .sc-how-help-box{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .sc-how-final-copy h1{
    font-size:46px;
  }

  .sc-how-final-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-how-controller,
  .sc-how-card-visual{
    display:none;
  }

  .sc-how-shield{
    left:50%;
    transform:translateX(-50%);
  }

  .sc-how-help-left{
    align-items:flex-start;
  }
}

/* =========================================================
   ✅ BUYER FAQ — FINAL HELP CENTER STYLE
   - Keeps dark Sell City background
   - Does NOT touch nav-auth.js
   - Uses normal white nav like homepage
========================================================= */

body.sc-buyer-faq-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* keep normal nav visible */
body.sc-buyer-faq-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
}

body.sc-buyer-faq-page .sc-normal-nav a,
body.sc-buyer-faq-page .sc-normal-nav span{
  color:inherit;
}

body.sc-buyer-faq-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-buyer-faq-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

.sc-faq-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* hero */
.sc-faq-hero{
  position:relative;
  overflow:hidden;
  min-height:340px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  isolation:isolate;
}

.sc-faq-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 48%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.42), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-faq-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-faq-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:62px 32px 56px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}

.sc-faq-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:24px;
}

.sc-faq-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-faq-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-faq-copy h1{
  color:#fff;
  font-size:clamp(46px, 6vw, 70px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-faq-copy p{
  margin-top:20px;
  max-width:660px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

/* hero graphic */
.sc-faq-visual{
  position:relative;
  min-height:245px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-faq-glow-ring{
  position:absolute;
  width:330px;
  height:100px;
  bottom:22px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.32);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-faq-main-icon{
  position:relative;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:40px;
  color:#f5e8ff;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.36));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:
    0 24px 70px rgba(124,58,237,0.36),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.sc-faq-main-icon svg{
  width:86px;
  height:86px;
}

.sc-faq-mini-card{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  background:rgba(11,8,30,0.88);
  border:1px solid rgba(168,85,247,0.26);
  box-shadow:0 20px 50px rgba(0,0,0,0.30);
}

.sc-faq-mini-card span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-faq-mini-card.one{
  left:38px;
  bottom:40px;
}

.sc-faq-mini-card.two{
  right:28px;
  top:42px;
}

/* sections */
.sc-faq-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-faq-section-head{
  margin-bottom:24px;
}

.sc-faq-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-faq-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-faq-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* top cards */
.sc-faq-top-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.sc-faq-top-card{
  min-height:210px;
  border-radius:22px;
  padding:26px;
  color:#fff;
  text-decoration:none;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.sc-faq-top-card:hover{
  transform:translateY(-4px);
  border-color:rgba(168,85,247,0.50);
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.26), transparent 70%),
    rgba(8,10,32,0.88);
}

.sc-faq-top-icon{
  width:66px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
}

.sc-faq-top-icon svg{
  width:34px;
  height:34px;
}

.sc-faq-top-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.sc-faq-top-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:10px;
}

/* layout */
.sc-faq-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:26px;
  align-items:start;
}

.sc-faq-sidebar{
  position:sticky;
  top:96px;
}

.sc-faq-sidebar-card{
  border-radius:22px;
  padding:22px;
  background:rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.25);
}

.sc-faq-sidebar-card h3{
  color:#fff;
  font-size:20px;
  font-weight:950;
  margin-bottom:14px;
}

.sc-faq-sidebar-card a{
  display:block;
  color:rgba(232,225,255,0.70);
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.07);
  font-weight:800;
}

.sc-faq-sidebar-card a:hover{
  color:#fff;
}

.sc-faq-list{
  display:grid;
  gap:18px;
}

.sc-faq-item{
  scroll-margin-top:110px;
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(380px 180px at 90% 0%, rgba(124,58,237,0.14), transparent 68%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.24);
}

.sc-faq-question{
  display:flex;
  align-items:center;
  gap:16px;
}

.sc-faq-question span{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
  flex:0 0 auto;
}

.sc-faq-question h3{
  color:#fff;
  font-size:24px;
  font-weight:950;
  letter-spacing:-0.025em;
}

.sc-faq-item p{
  margin-top:16px;
  color:rgba(232,225,255,0.74);
  line-height:1.75;
  font-size:16px;
}

/* help box */
.sc-faq-help-box{
  margin-bottom:54px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-faq-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-faq-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-faq-help-icon svg{
  width:38px;
  height:38px;
}

.sc-faq-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-faq-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-faq-help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sc-faq-help-actions a{
  color:#fff;
  font-weight:950;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;
}

.sc-faq-help-actions a:first-child{
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
}

/* footer */
.sc-faq-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-faq-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-faq-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-faq-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-faq-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-faq-footer-links a:hover{
  color:#fff;
}

/* responsive */
@media (max-width: 980px){
  .sc-faq-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-faq-visual{
    min-height:210px;
  }

  .sc-faq-top-grid,
  .sc-faq-layout{
    grid-template-columns:1fr;
  }

  .sc-faq-sidebar{
    position:relative;
    top:auto;
  }

  .sc-faq-help-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-faq-help-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .sc-faq-copy h1{
    font-size:46px;
  }

  .sc-faq-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-faq-mini-card{
    display:none;
  }

  .sc-faq-help-left{
    align-items:flex-start;
  }
}

/* =========================================================
   ✅ SECURE PAYMENTS — FINAL PRO HELP CENTER STYLE
   - Matches Sell City dark gaming marketplace vibe
   - Does NOT touch nav-auth.js
   - Uses normal white navbar
========================================================= */

body.sc-payments-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* normal navbar */
body.sc-payments-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #e5e7eb !important;
}

body.sc-payments-page .sc-normal-nav a,
body.sc-payments-page .sc-normal-nav span,
body.sc-payments-page .sc-normal-nav button{
  color:inherit;
  -webkit-text-fill-color:initial;
}

body.sc-payments-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-payments-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

.sc-payments-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* HERO */
.sc-payments-hero{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  isolation:isolate;
}

.sc-payments-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 48%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.42), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-payments-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-payments-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:62px 32px 58px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}

.sc-payments-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:22px;
}

.sc-payments-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-payments-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-payments-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  box-shadow:0 18px 46px rgba(0,0,0,0.22);
}

.sc-payments-copy h1{
  margin-top:18px;
  color:#fff;
  font-size:clamp(46px, 6vw, 72px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-payments-copy p{
  margin-top:20px;
  max-width:680px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

.sc-payments-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.sc-payments-primary,
.sc-payments-secondary{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
}

.sc-payments-primary{
  color:#fff !important;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.30);
}

.sc-payments-secondary{
  color:#fff !important;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
}

.sc-payments-primary:hover,
.sc-payments-secondary:hover{
  filter:brightness(1.08);
}

/* HERO VISUAL */
.sc-payments-visual{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-payments-ring{
  position:absolute;
  width:350px;
  height:108px;
  bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.32);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-payments-card{
  position:relative;
  z-index:2;
  width:265px;
  height:170px;
  border-radius:28px;
  padding:24px;
  background:
    linear-gradient(145deg, rgba(20,13,50,0.98), rgba(37,99,235,0.22));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.34),
    0 0 40px rgba(124,58,237,0.26);
}

.sc-payments-card-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.sc-payments-card-top span{
  height:12px;
  border-radius:999px;
  background:rgba(168,85,247,0.55);
}

.sc-payments-card-top span:first-child{
  width:72px;
}

.sc-payments-card-top span:last-child{
  width:42px;
  background:rgba(96,165,250,0.45);
}

.sc-payments-card-chip{
  width:52px;
  height:38px;
  border-radius:12px;
  margin-top:28px;
  background:linear-gradient(135deg, #d946ef, #7c3aed 52%, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.30);
}

.sc-payments-card-lines{
  margin-top:22px;
  display:grid;
  gap:9px;
}

.sc-payments-card-lines i{
  display:block;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
}

.sc-payments-card-lines i:nth-child(1){
  width:90%;
}

.sc-payments-card-lines i:nth-child(2){
  width:62%;
}

.sc-payments-card-lines i:nth-child(3){
  width:76%;
}

.sc-payments-shield{
  position:absolute;
  left:40px;
  top:34px;
  z-index:3;
  width:88px;
  height:88px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f5e8ff;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.36));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 24px 70px rgba(124,58,237,0.36);
}

.sc-payments-shield svg{
  width:52px;
  height:52px;
}

.sc-payments-lock{
  position:absolute;
  right:45px;
  bottom:48px;
  z-index:3;
  width:78px;
  height:78px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:rgba(11,8,30,0.88);
  border:1px solid rgba(168,85,247,0.26);
  box-shadow:0 20px 50px rgba(0,0,0,0.30);
}

.sc-payments-lock svg{
  width:44px;
  height:44px;
}

/* SECTIONS */
.sc-payments-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-payments-section-head{
  margin-bottom:24px;
}

.sc-payments-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-payments-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-payments-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* FEATURE CARDS */
.sc-payments-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.sc-payments-feature-card{
  min-height:230px;
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-payments-feature-icon{
  width:66px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
}

.sc-payments-feature-icon svg{
  width:34px;
  height:34px;
}

.sc-payments-feature-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.sc-payments-feature-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:10px;
}

/* PROCESS */
.sc-payments-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:82px;
  padding:8px 16px;
}

.sc-payments-line{
  position:absolute;
  left:22%;
  right:22%;
  top:44px;
  border-top:2px dashed rgba(124,58,237,0.45);
  z-index:0;
}

.sc-payments-step{
  position:relative;
  z-index:1;
  min-height:210px;
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-payments-step-num{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  margin:0 auto 18px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
}

.sc-payments-step h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  letter-spacing:-0.02em;
}

.sc-payments-step p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:12px;
}

/* PANELS */
.sc-payments-two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

.sc-payments-panel{
  position:relative;
  overflow:hidden;
  min-height:350px;
  border-radius:22px;
  padding:30px;
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(124,58,237,0.16), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.30);
}

.sc-payments-panel.danger{
  border-color:rgba(251,191,36,0.24);
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(251,191,36,0.10), transparent 70%),
    rgba(8,10,32,0.78);
}

.sc-payments-panel-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
}

.sc-payments-panel-icon.danger{
  color:#fde68a;
  background:radial-gradient(circle at 35% 25%, rgba(251,191,36,0.32), rgba(49,22,96,0.92));
  border-color:rgba(251,191,36,0.28);
}

.sc-payments-panel-icon svg{
  width:36px;
  height:36px;
}

.sc-payments-panel h3{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
  margin-top:20px;
}

.sc-payments-panel p{
  color:rgba(232,225,255,0.72);
  margin-top:14px;
  line-height:1.7;
}

.sc-payments-check-list{
  margin-top:24px;
  display:grid;
  gap:15px;
}

.sc-payments-check-list li{
  position:relative;
  color:rgba(232,225,255,0.78);
  padding-left:34px;
  line-height:1.45;
}

.sc-payments-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-payments-warning-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.sc-payments-warning-list span{
  color:#fff7ed;
  font-weight:900;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.18);
}

/* HELP CTA */
.sc-payments-help-box{
  margin-bottom:54px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-payments-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-payments-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-payments-help-icon svg{
  width:38px;
  height:38px;
}

.sc-payments-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-payments-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-payments-help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sc-payments-help-actions a{
  color:#fff;
  font-weight:950;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;
}

.sc-payments-help-actions a:first-child{
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
}

/* FOOTER */
.sc-payments-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-payments-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-payments-footer-inner b{
  color:#fff;
}

.sc-payments-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-payments-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-payments-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-payments-footer-links a:hover{
  color:#fff;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .sc-payments-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-payments-visual{
    min-height:220px;
  }

  .sc-payments-grid,
  .sc-payments-process,
  .sc-payments-two-col{
    grid-template-columns:1fr;
  }

  .sc-payments-process{
    gap:20px;
    padding:0;
  }

  .sc-payments-line{
    display:none;
  }

  .sc-payments-help-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-payments-help-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .sc-payments-copy h1{
    font-size:46px;
  }

  .sc-payments-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-payments-shield,
  .sc-payments-lock{
    display:none;
  }

  .sc-payments-help-left{
    align-items:flex-start;
  }

  .sc-payments-actions a,
  .sc-payments-help-actions a{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-payments-page *,
  .sc-payments-page *::before,
  .sc-payments-page *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   ✅ VERIFIED SELLERS — FINAL PRO HELP CENTER STYLE
   - Matches Sell City dark gaming marketplace vibe
   - Does NOT touch nav-auth.js
   - Uses normal white navbar
========================================================= */

body.sc-verified-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* normal navbar */
body.sc-verified-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #e5e7eb !important;
}

body.sc-verified-page .sc-normal-nav a,
body.sc-verified-page .sc-normal-nav span,
body.sc-verified-page .sc-normal-nav button{
  color:inherit;
  -webkit-text-fill-color:initial;
}

body.sc-verified-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-verified-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

.sc-verified-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* HERO */
.sc-verified-hero{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  isolation:isolate;
}

.sc-verified-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 48%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.42), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-verified-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-verified-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:62px 32px 58px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}

.sc-verified-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:22px;
}

.sc-verified-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-verified-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-verified-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  box-shadow:0 18px 46px rgba(0,0,0,0.22);
}

.sc-verified-copy h1{
  margin-top:18px;
  color:#fff;
  font-size:clamp(46px, 6vw, 72px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-verified-copy p{
  margin-top:20px;
  max-width:680px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

.sc-verified-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.sc-verified-primary,
.sc-verified-secondary{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
}

.sc-verified-primary{
  color:#fff !important;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.30);
}

.sc-verified-secondary{
  color:#fff !important;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
}

.sc-verified-primary:hover,
.sc-verified-secondary:hover{
  filter:brightness(1.08);
}

/* HERO VISUAL */
.sc-verified-visual{
  position:relative;
  min-height:270px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-verified-ring{
  position:absolute;
  width:350px;
  height:108px;
  bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.32);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-verified-profile-card{
  position:relative;
  z-index:2;
  width:275px;
  min-height:210px;
  border-radius:30px;
  padding:26px;
  background:
    linear-gradient(145deg, rgba(20,13,50,0.98), rgba(37,99,235,0.22));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.34),
    0 0 40px rgba(124,58,237,0.26);
}

.sc-verified-avatar{
  width:76px;
  height:76px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f5e8ff;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.55));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 24px 70px rgba(124,58,237,0.36);
}

.sc-verified-avatar svg{
  width:44px;
  height:44px;
}

.sc-verified-lines{
  margin-top:24px;
  display:grid;
  gap:10px;
}

.sc-verified-lines span{
  display:block;
  height:11px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
}

.sc-verified-lines span:nth-child(1){
  width:92%;
}

.sc-verified-lines span:nth-child(2){
  width:68%;
}

.sc-verified-lines span:nth-child(3){
  width:80%;
}

.sc-verified-badge{
  display:inline-flex;
  margin-top:22px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg, #d946ef, #7c3aed 52%, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.30);
}

.sc-verified-mini-card{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  background:rgba(11,8,30,0.88);
  border:1px solid rgba(168,85,247,0.26);
  box-shadow:0 20px 50px rgba(0,0,0,0.30);
}

.sc-verified-mini-card span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-verified-mini-card.one{
  left:32px;
  bottom:42px;
}

.sc-verified-mini-card.two{
  right:28px;
  top:42px;
}

/* SECTIONS */
.sc-verified-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-verified-section-head{
  margin-bottom:24px;
}

.sc-verified-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-verified-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-verified-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* FEATURE CARDS */
.sc-verified-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.sc-verified-card{
  min-height:230px;
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-verified-icon{
  width:66px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
}

.sc-verified-icon svg{
  width:34px;
  height:34px;
}

.sc-verified-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.sc-verified-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:10px;
}

/* LARGE CARDS */
.sc-verified-two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

.sc-verified-large-card{
  position:relative;
  overflow:hidden;
  min-height:370px;
  border-radius:22px;
  padding:30px;
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(124,58,237,0.16), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.30);
}

.sc-verified-large-card.warning{
  border-color:rgba(251,191,36,0.24);
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(251,191,36,0.10), transparent 70%),
    rgba(8,10,32,0.78);
}

.sc-verified-large-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.sc-verified-large-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-verified-large-icon.warning{
  color:#fde68a;
  background:radial-gradient(circle at 35% 25%, rgba(251,191,36,0.32), rgba(49,22,96,0.92));
  border-color:rgba(251,191,36,0.28);
}

.sc-verified-large-icon svg{
  width:36px;
  height:36px;
}

.sc-verified-large-card h3{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-verified-large-card p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.7;
}

.sc-verified-check-list{
  margin-top:28px;
  display:grid;
  gap:15px;
}

.sc-verified-check-list li{
  position:relative;
  color:rgba(232,225,255,0.78);
  padding-left:34px;
  line-height:1.45;
}

.sc-verified-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-verified-warning-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.sc-verified-warning-list span{
  color:#fff7ed;
  font-weight:900;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.18);
}

.sc-verified-warning-text{
  margin-top:22px !important;
}

/* PROCESS */
.sc-verified-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:82px;
  padding:8px 16px;
}

.sc-verified-line{
  position:absolute;
  left:22%;
  right:22%;
  top:44px;
  border-top:2px dashed rgba(124,58,237,0.45);
  z-index:0;
}

.sc-verified-step{
  position:relative;
  z-index:1;
  min-height:210px;
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-verified-step-num{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  margin:0 auto 18px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
}

.sc-verified-step h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  letter-spacing:-0.02em;
}

.sc-verified-step p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:12px;
}

/* HELP CTA */
.sc-verified-help-box{
  margin-bottom:54px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-verified-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-verified-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-verified-help-icon svg{
  width:38px;
  height:38px;
}

.sc-verified-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-verified-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-verified-help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sc-verified-help-actions a{
  color:#fff;
  font-weight:950;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;
}

.sc-verified-help-actions a:first-child{
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
}

/* FOOTER */
.sc-verified-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-verified-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-verified-footer-inner b{
  color:#fff;
}

.sc-verified-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-verified-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-verified-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-verified-footer-links a:hover{
  color:#fff;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .sc-verified-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-verified-visual{
    min-height:220px;
  }

  .sc-verified-grid,
  .sc-verified-two-col,
  .sc-verified-process{
    grid-template-columns:1fr;
  }

  .sc-verified-process{
    gap:20px;
    padding:0;
  }

  .sc-verified-line{
    display:none;
  }

  .sc-verified-help-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-verified-help-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .sc-verified-copy h1{
    font-size:46px;
  }

  .sc-verified-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-verified-mini-card{
    display:none;
  }

  .sc-verified-help-left{
    align-items:flex-start;
  }

  .sc-verified-actions a,
  .sc-verified-help-actions a{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-verified-page * ,
  .sc-verified-page *::before,
  .sc-verified-page *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   ✅ BUYER PROTECTION — FINAL PRO HELP CENTER STYLE
   - Matches Sell City dark gaming marketplace vibe
   - Does NOT touch nav-auth.js
   - Uses normal white navbar
========================================================= */

body.sc-buyer-protection-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* normal navbar */
body.sc-buyer-protection-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #e5e7eb !important;
}

body.sc-buyer-protection-page .sc-normal-nav a,
body.sc-buyer-protection-page .sc-normal-nav span,
body.sc-buyer-protection-page .sc-normal-nav button{
  color:inherit;
  -webkit-text-fill-color:initial;
}

body.sc-buyer-protection-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-buyer-protection-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

.sc-bp-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* HERO */
.sc-bp-hero{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  isolation:isolate;
}

.sc-bp-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 48%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.42), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-bp-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-bp-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:62px 32px 58px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}

.sc-bp-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:22px;
}

.sc-bp-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-bp-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-bp-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  box-shadow:0 18px 46px rgba(0,0,0,0.22);
}

.sc-bp-copy h1{
  margin-top:18px;
  color:#fff;
  font-size:clamp(46px, 6vw, 72px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-bp-copy p{
  margin-top:20px;
  max-width:680px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

.sc-bp-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.sc-bp-primary,
.sc-bp-secondary{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
}

.sc-bp-primary{
  color:#fff !important;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.30);
}

.sc-bp-secondary{
  color:#fff !important;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
}

.sc-bp-primary:hover,
.sc-bp-secondary:hover{
  filter:brightness(1.08);
}

/* HERO VISUAL */
.sc-bp-visual{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-bp-ring{
  position:absolute;
  width:350px;
  height:108px;
  bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.32);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-bp-shield{
  position:absolute;
  z-index:4;
  left:52px;
  top:36px;
  width:104px;
  height:104px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f5e8ff;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.36));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 24px 70px rgba(124,58,237,0.36);
}

.sc-bp-shield svg{
  width:62px;
  height:62px;
}

.sc-bp-order-card{
  position:relative;
  z-index:2;
  width:285px;
  min-height:190px;
  border-radius:30px;
  padding:26px;
  background:
    linear-gradient(145deg, rgba(20,13,50,0.98), rgba(37,99,235,0.22));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.34),
    0 0 40px rgba(124,58,237,0.26);
}

.sc-bp-order-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.sc-bp-order-top span{
  height:12px;
  border-radius:999px;
  background:rgba(168,85,247,0.55);
}

.sc-bp-order-top span:first-child{
  width:80px;
}

.sc-bp-order-top span:last-child{
  width:46px;
  background:rgba(96,165,250,0.45);
}

.sc-bp-order-lines{
  margin-top:34px;
  display:grid;
  gap:10px;
}

.sc-bp-order-lines i{
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
}

.sc-bp-order-lines i:nth-child(1){
  width:92%;
}

.sc-bp-order-lines i:nth-child(2){
  width:68%;
}

.sc-bp-order-lines i:nth-child(3){
  width:80%;
}

.sc-bp-order-status{
  display:inline-flex;
  margin-top:24px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg, #d946ef, #7c3aed 52%, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.30);
}

.sc-bp-mini-card{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  background:rgba(11,8,30,0.88);
  border:1px solid rgba(168,85,247,0.26);
  box-shadow:0 20px 50px rgba(0,0,0,0.30);
}

.sc-bp-mini-card span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-bp-mini-card.one{
  left:22px;
  bottom:42px;
}

.sc-bp-mini-card.two{
  right:18px;
  top:44px;
}

/* SECTIONS */
.sc-bp-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-bp-section-head{
  margin-bottom:24px;
}

.sc-bp-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-bp-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-bp-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* FEATURE CARDS */
.sc-bp-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.sc-bp-card{
  min-height:230px;
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-bp-icon{
  width:66px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
}

.sc-bp-icon svg{
  width:34px;
  height:34px;
}

.sc-bp-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.sc-bp-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:10px;
}

/* LARGE CARDS */
.sc-bp-two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

.sc-bp-large-card{
  position:relative;
  overflow:hidden;
  min-height:370px;
  border-radius:22px;
  padding:30px;
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(124,58,237,0.16), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.30);
}

.sc-bp-large-card.warning{
  border-color:rgba(251,191,36,0.24);
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(251,191,36,0.10), transparent 70%),
    rgba(8,10,32,0.78);
}

.sc-bp-large-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.sc-bp-large-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-bp-large-icon.warning{
  color:#fde68a;
  background:radial-gradient(circle at 35% 25%, rgba(251,191,36,0.32), rgba(49,22,96,0.92));
  border-color:rgba(251,191,36,0.28);
}

.sc-bp-large-icon svg{
  width:36px;
  height:36px;
}

.sc-bp-large-card h3{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-bp-large-card p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.7;
}

.sc-bp-check-list{
  margin-top:28px;
  display:grid;
  gap:15px;
}

.sc-bp-check-list li{
  position:relative;
  color:rgba(232,225,255,0.78);
  padding-left:34px;
  line-height:1.45;
}

.sc-bp-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-bp-warning-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.sc-bp-warning-list span{
  color:#fff7ed;
  font-weight:900;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.18);
}

.sc-bp-warning-text{
  margin-top:22px !important;
}

/* PROCESS */
.sc-bp-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:82px;
  padding:8px 16px;
}

.sc-bp-line{
  position:absolute;
  left:22%;
  right:22%;
  top:44px;
  border-top:2px dashed rgba(124,58,237,0.45);
  z-index:0;
}

.sc-bp-step{
  position:relative;
  z-index:1;
  min-height:210px;
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-bp-step-num{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  margin:0 auto 18px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
}

.sc-bp-step h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  letter-spacing:-0.02em;
}

.sc-bp-step p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:12px;
}

/* HELP CTA */
.sc-bp-help-box{
  margin-bottom:54px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-bp-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-bp-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-bp-help-icon svg{
  width:38px;
  height:38px;
}

.sc-bp-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-bp-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-bp-help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sc-bp-help-actions a{
  color:#fff;
  font-weight:950;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;
}

.sc-bp-help-actions a:first-child{
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
}

/* FOOTER */
.sc-bp-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-bp-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-bp-footer-inner b{
  color:#fff;
}

.sc-bp-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-bp-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-bp-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-bp-footer-links a:hover{
  color:#fff;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .sc-bp-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-bp-visual{
    min-height:230px;
  }

  .sc-bp-grid,
  .sc-bp-two-col,
  .sc-bp-process{
    grid-template-columns:1fr;
  }

  .sc-bp-process{
    gap:20px;
    padding:0;
  }

  .sc-bp-line{
    display:none;
  }

  .sc-bp-help-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-bp-help-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .sc-bp-copy h1{
    font-size:46px;
  }

  .sc-bp-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-bp-mini-card{
    display:none;
  }

  .sc-bp-shield{
    left:20px;
  }

  .sc-bp-help-left{
    align-items:flex-start;
  }

  .sc-bp-actions a,
  .sc-bp-help-actions a{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-buyer-protection-page * ,
  .sc-buyer-protection-page *::before,
  .sc-buyer-protection-page *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   ✅ PRIVACY POLICY — FINAL PRO HELP CENTER STYLE
   - Stronger marketplace privacy + platform separation wording
   - Matches Sell City dark gaming marketplace vibe
   - Does NOT touch nav-auth.js
   - Uses normal white navbar
========================================================= */

body.sc-privacy-page{
  background:
    radial-gradient(850px 520px at 14% 4%, rgba(124,58,237,0.24), transparent 62%),
    radial-gradient(850px 520px at 86% 10%, rgba(37,99,235,0.18), transparent 64%),
    linear-gradient(180deg, #070416 0%, #09061a 44%, #070416 100%) !important;
  color:#fff;
}

/* normal navbar */
body.sc-privacy-page .sc-normal-nav{
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #e5e7eb !important;
}

body.sc-privacy-page .sc-normal-nav a,
body.sc-privacy-page .sc-normal-nav span,
body.sc-privacy-page .sc-normal-nav button{
  color:inherit;
  -webkit-text-fill-color:initial;
}

body.sc-privacy-page .sc-normal-nav > div > a{
  color:#374151 !important;
  -webkit-text-fill-color:#374151 !important;
}

body.sc-privacy-page .sc-normal-nav > div > a:hover{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important;
}

.sc-privacy-wrap{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(124,58,237,0.28), transparent 66%),
    radial-gradient(900px 420px at 85% 10%, rgba(37,99,235,0.20), transparent 66%),
    linear-gradient(180deg, #080516 0%, #09071b 42%, #070416 100%);
}

/* HERO */
.sc-privacy-hero{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  isolation:isolate;
}

.sc-privacy-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg, rgba(6,4,18,0.94) 0%, rgba(17,7,47,0.82) 48%, rgba(37,99,235,0.18) 100%),
    radial-gradient(650px 340px at 75% 45%, rgba(124,58,237,0.42), transparent 62%),
    radial-gradient(440px 280px at 88% 30%, rgba(96,165,250,0.18), transparent 64%);
}

.sc-privacy-hero-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.20;
  background-image:
    repeating-linear-gradient(
      125deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 42px
    );
}

.sc-privacy-hero-inner{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto;
  padding:62px 32px 58px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  align-items:center;
}

.sc-privacy-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(232,225,255,0.70);
  font-size:14px;
  font-weight:800;
  margin-bottom:22px;
}

.sc-privacy-breadcrumb a{
  color:rgba(232,225,255,0.78);
}

.sc-privacy-breadcrumb span:last-child{
  color:#a78bfa;
}

.sc-privacy-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  box-shadow:0 18px 46px rgba(0,0,0,0.22);
}

.sc-privacy-copy h1{
  margin-top:18px;
  color:#fff;
  font-size:clamp(46px, 6vw, 72px);
  line-height:.96;
  letter-spacing:-0.065em;
  font-weight:950;
  text-shadow:0 22px 62px rgba(0,0,0,0.45);
}

.sc-privacy-copy p{
  margin-top:20px;
  max-width:680px;
  color:rgba(232,225,255,0.78);
  font-size:18px;
  line-height:1.75;
  font-weight:650;
}

.sc-privacy-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.sc-privacy-actions.lower{
  margin-top:24px;
}

.sc-privacy-primary,
.sc-privacy-secondary{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:14px;
  font-weight:950;
  text-decoration:none;
}

.sc-privacy-primary{
  color:#fff !important;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.30);
}

.sc-privacy-secondary{
  color:#fff !important;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
}

.sc-privacy-primary:hover,
.sc-privacy-secondary:hover{
  filter:brightness(1.08);
}

/* HERO VISUAL */
.sc-privacy-visual{
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sc-privacy-ring{
  position:absolute;
  width:350px;
  height:108px;
  bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(168,85,247,0.36), transparent 64%),
    linear-gradient(90deg, rgba(124,58,237,0.12), rgba(37,99,235,0.12));
  border:1px solid rgba(168,85,247,0.32);
  box-shadow:
    0 0 34px rgba(124,58,237,0.35),
    inset 0 0 30px rgba(168,85,247,0.18);
}

.sc-privacy-lock{
  position:absolute;
  z-index:4;
  left:52px;
  top:36px;
  width:104px;
  height:104px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f5e8ff;
  background:linear-gradient(145deg, rgba(124,58,237,0.95), rgba(37,99,235,0.36));
  border:1px solid rgba(255,255,255,0.20);
  box-shadow:0 24px 70px rgba(124,58,237,0.36);
}

.sc-privacy-lock svg{
  width:62px;
  height:62px;
}

.sc-privacy-data-card{
  position:relative;
  z-index:2;
  width:285px;
  min-height:190px;
  border-radius:30px;
  padding:26px;
  background:
    linear-gradient(145deg, rgba(20,13,50,0.98), rgba(37,99,235,0.22));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.34),
    0 0 40px rgba(124,58,237,0.26);
}

.sc-privacy-data-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.sc-privacy-data-top span{
  height:12px;
  border-radius:999px;
  background:rgba(168,85,247,0.55);
}

.sc-privacy-data-top span:first-child{
  width:80px;
}

.sc-privacy-data-top span:last-child{
  width:46px;
  background:rgba(96,165,250,0.45);
}

.sc-privacy-data-lines{
  margin-top:34px;
  display:grid;
  gap:10px;
}

.sc-privacy-data-lines i{
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
}

.sc-privacy-data-lines i:nth-child(1){
  width:92%;
}

.sc-privacy-data-lines i:nth-child(2){
  width:68%;
}

.sc-privacy-data-lines i:nth-child(3){
  width:80%;
}

.sc-privacy-data-status{
  display:inline-flex;
  margin-top:24px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  font-weight:950;
  background:linear-gradient(135deg, #d946ef, #7c3aed 52%, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.30);
}

.sc-privacy-mini-card{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  color:#fff;
  font-weight:900;
  background:rgba(11,8,30,0.88);
  border:1px solid rgba(168,85,247,0.26);
  box-shadow:0 20px 50px rgba(0,0,0,0.30);
}

.sc-privacy-mini-card span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-privacy-mini-card.one{
  left:22px;
  bottom:42px;
}

.sc-privacy-mini-card.two{
  right:18px;
  top:44px;
}

/* SECTIONS */
.sc-privacy-section{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 0;
}

.sc-privacy-section-head{
  margin-bottom:24px;
}

.sc-privacy-section-head h2{
  color:#fff;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-0.035em;
  font-weight:950;
  position:relative;
  display:inline-block;
}

.sc-privacy-section-head h2::after{
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(90deg, #a855f7, #2563eb);
}

.sc-privacy-section-head p{
  color:rgba(232,225,255,0.72);
  margin-top:12px;
  font-weight:650;
}

/* IMPORTANT ALERT */
.sc-privacy-alert{
  display:flex;
  gap:20px;
  border-radius:24px;
  padding:28px;
  background:
    linear-gradient(90deg, rgba(251,191,36,0.14), rgba(124,58,237,0.10)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(251,191,36,0.28);
  box-shadow:
    0 0 28px rgba(251,191,36,0.08),
    0 28px 80px rgba(0,0,0,0.28);
}

.sc-privacy-alert-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff7ed;
  font-weight:950;
  font-size:24px;
  background:rgba(251,191,36,0.16);
  border:1px solid rgba(251,191,36,0.24);
  flex:0 0 auto;
}

.sc-privacy-alert h2{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-privacy-alert p{
  color:rgba(255,247,237,0.82);
  line-height:1.75;
  margin-top:8px;
}

/* FEATURE CARDS */
.sc-privacy-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}

.sc-privacy-card{
  min-height:245px;
  border-radius:22px;
  padding:26px;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-privacy-icon{
  width:66px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8b4fe;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.42), rgba(30,18,70,0.92));
  border:1px solid rgba(168,85,247,0.28);
}

.sc-privacy-icon svg{
  width:34px;
  height:34px;
}

.sc-privacy-card h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.sc-privacy-card p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:10px;
}

/* LARGE CARDS */
.sc-privacy-two-col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
}

.sc-privacy-large-card{
  position:relative;
  overflow:hidden;
  min-height:370px;
  border-radius:22px;
  padding:30px;
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(124,58,237,0.16), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.30);
}

.sc-privacy-large-card.warning{
  border-color:rgba(251,191,36,0.24);
  background:
    radial-gradient(360px 180px at 85% 90%, rgba(251,191,36,0.10), transparent 70%),
    rgba(8,10,32,0.78);
}

.sc-privacy-large-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.sc-privacy-large-icon{
  width:74px;
  height:74px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-privacy-large-icon.warning{
  color:#fde68a;
  background:radial-gradient(circle at 35% 25%, rgba(251,191,36,0.32), rgba(49,22,96,0.92));
  border-color:rgba(251,191,36,0.28);
}

.sc-privacy-large-icon svg{
  width:36px;
  height:36px;
}

.sc-privacy-large-card h3{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-privacy-large-card p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.7;
}

.sc-privacy-check-list{
  margin-top:28px;
  display:grid;
  gap:15px;
}

.sc-privacy-check-list li{
  position:relative;
  color:rgba(232,225,255,0.78);
  padding-left:34px;
  line-height:1.45;
}

.sc-privacy-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
}

.sc-privacy-warning-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.sc-privacy-warning-list span{
  color:#fff7ed;
  font-weight:900;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(251,191,36,0.10);
  border:1px solid rgba(251,191,36,0.18);
}

.sc-privacy-warning-text{
  margin-top:22px !important;
}

/* PANEL */
.sc-privacy-panel{
  border-radius:24px;
  padding:30px;
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(124,58,237,0.14), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.26);
  box-shadow:0 28px 80px rgba(0,0,0,0.26);
}

.sc-privacy-panel h2{
  color:#fff;
  font-size:28px;
  font-weight:950;
  letter-spacing:-0.035em;
}

.sc-privacy-panel p{
  color:rgba(232,225,255,0.74);
  line-height:1.75;
  margin-top:12px;
}

.sc-privacy-list{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.sc-privacy-list div{
  border-radius:18px;
  padding:18px 20px;
  color:rgba(232,225,255,0.76);
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.09);
  line-height:1.6;
}

.sc-privacy-list b{
  color:#fff;
}

/* PROCESS */
.sc-privacy-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:82px;
  padding:8px 16px;
}

.sc-privacy-line{
  position:absolute;
  left:22%;
  right:22%;
  top:44px;
  border-top:2px dashed rgba(124,58,237,0.45);
  z-index:0;
}

.sc-privacy-step{
  position:relative;
  z-index:1;
  min-height:230px;
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  background:
    radial-gradient(320px 160px at 50% 0%, rgba(124,58,237,0.18), transparent 70%),
    rgba(8,10,32,0.78);
  border:1px solid rgba(124,58,237,0.28);
  box-shadow:
    0 0 0 1px rgba(37,99,235,0.10),
    0 26px 70px rgba(0,0,0,0.28);
}

.sc-privacy-step-num{
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:950;
  margin:0 auto 18px;
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 16px 36px rgba(124,58,237,0.32);
}

.sc-privacy-step h3{
  color:#fff;
  font-size:22px;
  font-weight:950;
  letter-spacing:-0.02em;
}

.sc-privacy-step p{
  color:rgba(232,225,255,0.72);
  line-height:1.65;
  margin-top:12px;
}

/* HELP CTA */
.sc-privacy-help-box{
  margin-bottom:54px;
  border-radius:22px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:
    linear-gradient(90deg, rgba(124,58,237,0.22), rgba(37,99,235,0.12)),
    rgba(8,10,32,0.82);
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:
    0 0 28px rgba(124,58,237,0.18),
    0 28px 80px rgba(0,0,0,0.30);
}

.sc-privacy-help-left{
  display:flex;
  align-items:center;
  gap:22px;
}

.sc-privacy-help-icon{
  width:76px;
  height:76px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e9d5ff;
  background:radial-gradient(circle at 35% 25%, rgba(168,85,247,0.58), rgba(49,22,96,0.92));
  border:1px solid rgba(168,85,247,0.34);
  flex:0 0 auto;
}

.sc-privacy-help-icon svg{
  width:38px;
  height:38px;
}

.sc-privacy-help-box h3{
  color:#fff;
  font-size:26px;
  font-weight:950;
  letter-spacing:-0.03em;
}

.sc-privacy-help-box p{
  color:rgba(232,225,255,0.72);
  margin-top:6px;
  line-height:1.6;
}

.sc-privacy-help-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sc-privacy-help-actions a{
  color:#fff;
  font-weight:950;
  padding:14px 18px;
  border-radius:12px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  white-space:nowrap;
}

.sc-privacy-help-actions a:first-child{
  background:linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow:0 18px 44px rgba(124,58,237,0.28);
}

/* FOOTER */
.sc-privacy-footer{
  border-top:1px solid rgba(255,255,255,0.08);
  background:#050311;
  color:rgba(232,225,255,0.62);
  padding:34px 32px;
}

.sc-privacy-footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}

.sc-privacy-footer-inner b{
  color:#fff;
}

.sc-privacy-footer-inner p{
  color:rgba(232,225,255,0.62);
  margin-top:8px;
}

.sc-privacy-footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.sc-privacy-footer-links a{
  color:rgba(232,225,255,0.72);
  font-weight:800;
}

.sc-privacy-footer-links a:hover{
  color:#fff;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .sc-privacy-hero-inner{
    grid-template-columns:1fr;
    padding:54px 22px 46px;
  }

  .sc-privacy-visual{
    min-height:230px;
  }

  .sc-privacy-grid,
  .sc-privacy-two-col,
  .sc-privacy-process{
    grid-template-columns:1fr;
  }

  .sc-privacy-process{
    gap:20px;
    padding:0;
  }

  .sc-privacy-line{
    display:none;
  }

  .sc-privacy-help-box{
    flex-direction:column;
    align-items:flex-start;
  }

  .sc-privacy-help-actions{
    justify-content:flex-start;
  }

  .sc-privacy-alert{
    flex-direction:column;
  }
}

@media (max-width: 640px){
  .sc-privacy-copy h1{
    font-size:46px;
  }

  .sc-privacy-section{
    padding-left:20px;
    padding-right:20px;
  }

  .sc-privacy-mini-card{
    display:none;
  }

  .sc-privacy-lock{
    left:20px;
  }

  .sc-privacy-help-left{
    align-items:flex-start;
  }

  .sc-privacy-actions a,
  .sc-privacy-help-actions a{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .sc-privacy-page * ,
  .sc-privacy-page *::before,
  .sc-privacy-page *::after{
    animation:none !important;
    transition:none !important;
  }
}



/* =========================================================
   🚨 SELL CITY FOOTER TEXT VISIBILITY HARD FIX
   Paste this at the VERY BOTTOM of style.css
   Fixes: Sell City, Marketplace, Support, Trust & Safety too dark
========================================================= */

footer.sc-site-footer{
  background:
    radial-gradient(700px 320px at 18% 0%, rgba(124,58,237,0.28), transparent 62%),
    radial-gradient(720px 340px at 86% 12%, rgba(37,99,235,0.22), transparent 64%),
    linear-gradient(180deg, #0b061f 0%, #050311 100%) !important;

  border-top: 1px solid rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}

/* ✅ Make sure the footer overlay NEVER covers text */
footer.sc-site-footer::before,
footer.sc-site-footer::after{
  z-index: 0 !important;
  pointer-events: none !important;
}

footer.sc-site-footer .sc-site-footer-inner,
footer.sc-site-footer .sc-footer-top,
footer.sc-site-footer .sc-footer-bottom,
footer.sc-site-footer .sc-footer-brand,
footer.sc-site-footer .sc-footer-col{
  position: relative !important;
  z-index: 5 !important;
}

/* ✅ FORCE MAIN FOOTER TITLES TO BE BRIGHT */
footer.sc-site-footer .sc-footer-logo-row,
footer.sc-site-footer .sc-footer-logo-row span,
footer.sc-site-footer .sc-footer-col h4,
footer.sc-site-footer h4{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;

  font-weight: 950 !important;
  text-shadow:
    0 0 14px rgba(255,255,255,0.22),
    0 0 22px rgba(124,58,237,0.45),
    0 0 18px rgba(37,99,235,0.28) !important;
}

/* ✅ Sell City logo text */
footer.sc-site-footer .sc-footer-logo-row span{
  font-size: 24px !important;
  letter-spacing: -0.03em !important;
}

/* ✅ Column titles: Marketplace, Support, Trust & Safety */
footer.sc-site-footer .sc-footer-col h4{
  margin-bottom: 12px !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}

/* ✅ Description text */
footer.sc-site-footer .sc-footer-brand p{
  color: rgba(232,225,255,0.86) !important;
  -webkit-text-fill-color: rgba(232,225,255,0.86) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ✅ Footer links */
footer.sc-site-footer .sc-footer-col a,
footer.sc-site-footer a{
  color: rgba(245,240,255,0.88) !important;
  -webkit-text-fill-color: rgba(245,240,255,0.88) !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  text-decoration: none !important;
}

footer.sc-site-footer .sc-footer-col a:hover,
footer.sc-site-footer a:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ✅ Bottom copyright text */
footer.sc-site-footer .sc-footer-bottom p{
  color: rgba(232,225,255,0.76) !important;
  -webkit-text-fill-color: rgba(232,225,255,0.76) !important;
  opacity: 1 !important;
}

/* ✅ Stop chromatic/old styles from making footer text transparent */
footer.sc-site-footer .chromatic-text,
footer.sc-site-footer h4.chromatic-text,
footer.sc-site-footer span.chromatic-text{
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ✅ Extra hard reset for any Tailwind text-gray/text-black inside footer */
footer.sc-site-footer .text-gray-500,
footer.sc-site-footer .text-gray-600,
footer.sc-site-footer .text-gray-700,
footer.sc-site-footer .text-gray-800,
footer.sc-site-footer .text-gray-900,
footer.sc-site-footer .text-black{
  color: rgba(245,240,255,0.88) !important;
  -webkit-text-fill-color: rgba(245,240,255,0.88) !important;
}

/* ✅ Make footer logo image pop */
footer.sc-site-footer .sc-footer-logo{
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================================================
   ✅ SELL CITY GLOBAL FOOTER — FINAL VISIBLE VERSION
   Paste at the VERY BOTTOM of style.css
   Fixes dark / gray footer titles completely
========================================================= */

.sc-site-footer,
footer.sc-site-footer{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  padding: 62px 28px 34px !important;

  background:
    radial-gradient(760px 360px at 18% 0%, rgba(124,58,237,0.34), transparent 62%),
    radial-gradient(760px 360px at 88% 10%, rgba(37,99,235,0.30), transparent 64%),
    radial-gradient(640px 330px at 50% 100%, rgba(217,70,239,0.18), transparent 68%),
    linear-gradient(180deg, #09051a 0%, #070416 48%, #04020d 100%) !important;

  border-top: 1px solid rgba(255,255,255,0.16) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: initial !important;
}

/* background line pattern */
.sc-site-footer::before{
  content: "" !important;
  position: absolute !important;
  inset: -80px !important;
  z-index: 0 !important;
  pointer-events: none !important;

  opacity: .18 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;
  transform: skewX(-8deg) !important;
}

/* glow layer */
.sc-site-footer::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(90deg, rgba(124,58,237,0.12), transparent 42%, rgba(37,99,235,0.10)),
    radial-gradient(500px 220px at 50% 0%, rgba(255,255,255,0.08), transparent 70%) !important;
}

/* footer container */
.sc-footer-inner{
  position: relative !important;
  z-index: 5 !important;

  max-width: 1120px !important;
  margin: 0 auto !important;
}

/* top grid */
.sc-footer-top{
  display: grid !important;
  grid-template-columns: 1.25fr .85fr .85fr 1fr !important;
  gap: 54px !important;
  align-items: start !important;
}

/* brand */
.sc-footer-logo-row{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin-bottom: 14px !important;
}

.sc-footer-logo{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  object-fit: contain !important;

  background: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(124,58,237,0.24),
    0 0 24px rgba(37,99,235,0.16) !important;
}

/* 🚨 FORCE SELL CITY TITLE WHITE */
.sc-footer-brand-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 24px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;

  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;

  text-shadow:
    0 0 12px rgba(255,255,255,0.22),
    0 0 22px rgba(124,58,237,0.52),
    0 0 18px rgba(37,99,235,0.34) !important;
}

.sc-footer-desc{
  max-width: 300px !important;

  color: rgba(236,232,255,0.88) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.88) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;

  opacity: 1 !important;
  filter: none !important;
}

/* 🚨 FORCE COLUMN TITLES WHITE */
.sc-footer-title{
  display: block !important;

  margin: 0 0 15px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;

  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;

  text-shadow:
    0 0 12px rgba(255,255,255,0.20),
    0 0 20px rgba(124,58,237,0.46),
    0 0 16px rgba(37,99,235,0.30) !important;
}

/* links */
.sc-footer-links{
  display: grid !important;
  gap: 10px !important;
}

.sc-footer-links a{
  display: inline-flex !important;
  width: fit-content !important;

  color: rgba(236,232,255,0.86) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.86) !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;

  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;

  transition: color .15s ease, transform .15s ease !important;
}

.sc-footer-links a:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* bottom */
.sc-footer-bottom{
  position: relative !important;
  z-index: 5 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;

  margin-top: 46px !important;
  padding-top: 24px !important;

  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

.sc-footer-bottom p{
  margin: 0 !important;

  color: rgba(236,232,255,0.76) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.76) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  opacity: 1 !important;
  filter: none !important;
}

/* 🚨 HARD RESET: stop Tailwind / old CSS from making footer text gray/black/transparent */
.sc-site-footer *,
.sc-site-footer h1,
.sc-site-footer h2,
.sc-site-footer h3,
.sc-site-footer h4,
.sc-site-footer p,
.sc-site-footer a,
.sc-site-footer span,
.sc-site-footer div{
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

/* Kill chromatic transparency inside footer */
.sc-site-footer .chromatic-text{
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  animation: none !important;
}

/* Kill Tailwind gray/black classes inside footer */
.sc-site-footer .text-gray-400,
.sc-site-footer .text-gray-500,
.sc-site-footer .text-gray-600,
.sc-site-footer .text-gray-700,
.sc-site-footer .text-gray-800,
.sc-site-footer .text-gray-900,
.sc-site-footer .text-black{
  color: rgba(236,232,255,0.86) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.86) !important;
}

/* Exact title classes win last */
.sc-site-footer .sc-footer-brand-title,
.sc-site-footer .sc-footer-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* mobile */
@media (max-width: 900px){
  .sc-footer-top{
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
}

@media (max-width: 640px){
  .sc-site-footer{
    padding: 44px 20px 30px !important;
  }

  .sc-footer-top{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .sc-footer-bottom{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .sc-footer-brand-title{
    font-size: 23px !important;
  }
}

/* =========================================================
   🚨 SELL CITY FOOTER FINAL FIX — DARK BACKGROUND + VISIBLE TEXT
   Paste at the VERY BOTTOM of style.css
========================================================= */

footer.sc-site-footer,
.sc-site-footer{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  padding: 62px 28px 34px !important;

  background:
    radial-gradient(850px 420px at 16% 0%, rgba(124,58,237,0.34), transparent 62%),
    radial-gradient(800px 420px at 88% 8%, rgba(37,99,235,0.28), transparent 64%),
    radial-gradient(720px 360px at 52% 100%, rgba(217,70,239,0.16), transparent 68%),
    linear-gradient(180deg, #09051a 0%, #070416 48%, #03020a 100%) !important;

  border-top: 1px solid rgba(255,255,255,0.16) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: initial !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 -28px 80px rgba(124,58,237,0.10) !important;
}

/* stop Tailwind old footer backgrounds */
footer.sc-site-footer.bg-white,
footer.sc-site-footer.bg-gray-50,
footer.sc-site-footer.bg-gray-100,
.sc-site-footer.bg-white,
.sc-site-footer.bg-gray-50,
.sc-site-footer.bg-gray-100{
  background:
    radial-gradient(850px 420px at 16% 0%, rgba(124,58,237,0.34), transparent 62%),
    radial-gradient(800px 420px at 88% 8%, rgba(37,99,235,0.28), transparent 64%),
    linear-gradient(180deg, #09051a 0%, #070416 48%, #03020a 100%) !important;
}

/* diagonal line pattern */
footer.sc-site-footer::before,
.sc-site-footer::before{
  content: "" !important;
  position: absolute !important;
  inset: -80px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .20 !important;

  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 18px,
      rgba(255,255,255,0.18) 19px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.00) 22px,
      rgba(255,255,255,0.00) 38px
    ) !important;

  transform: skewX(-8deg) !important;
}

/* soft glow overlay */
footer.sc-site-footer::after,
.sc-site-footer::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(90deg, rgba(124,58,237,0.10), transparent 45%, rgba(37,99,235,0.10)),
    radial-gradient(600px 260px at 50% 0%, rgba(255,255,255,0.08), transparent 70%) !important;
}

/* content above overlays */
.sc-footer-inner,
.sc-footer-top,
.sc-footer-bottom,
.sc-footer-brand,
.sc-footer-col{
  position: relative !important;
  z-index: 5 !important;
}

/* layout */
.sc-footer-inner{
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.sc-footer-top{
  display: grid !important;
  grid-template-columns: 1.25fr .85fr .85fr 1fr !important;
  gap: 54px !important;
  align-items: start !important;
}

.sc-footer-logo-row{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  text-decoration: none !important;
}

.sc-footer-logo{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(124,58,237,0.26),
    0 0 24px rgba(37,99,235,0.18) !important;
}

/* MAIN TITLES — forced bright */
.sc-footer-brand-title,
.sc-footer-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;

  font-weight: 950 !important;

  text-shadow:
    0 0 12px rgba(255,255,255,0.20),
    0 0 22px rgba(124,58,237,0.48),
    0 0 18px rgba(37,99,235,0.34) !important;
}

.sc-footer-brand-title{
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.sc-footer-title{
  display: block !important;
  margin: 0 0 15px !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
}

/* description */
.sc-footer-desc{
  max-width: 300px !important;
  color: rgba(236,232,255,0.88) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.88) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

/* links */
.sc-footer-links{
  display: grid !important;
  gap: 10px !important;
}

.sc-footer-links a{
  display: inline-flex !important;
  width: fit-content !important;
  color: rgba(236,232,255,0.86) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.86) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.sc-footer-links a:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(3px) !important;
}

/* bottom */
.sc-footer-bottom{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;

  margin-top: 46px !important;
  padding-top: 24px !important;

  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

.sc-footer-bottom p{
  margin: 0 !important;
  color: rgba(236,232,255,0.76) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.76) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* SUPER HARD RESET: no old gray/black footer text */
.sc-site-footer *,
.sc-site-footer h1,
.sc-site-footer h2,
.sc-site-footer h3,
.sc-site-footer h4,
.sc-site-footer p,
.sc-site-footer a,
.sc-site-footer span,
.sc-site-footer div{
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

.sc-site-footer .text-gray-400,
.sc-site-footer .text-gray-500,
.sc-site-footer .text-gray-600,
.sc-site-footer .text-gray-700,
.sc-site-footer .text-gray-800,
.sc-site-footer .text-gray-900,
.sc-site-footer .text-black{
  color: rgba(236,232,255,0.86) !important;
  -webkit-text-fill-color: rgba(236,232,255,0.86) !important;
}

.sc-site-footer .sc-footer-brand-title,
.sc-site-footer .sc-footer-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* mobile */
@media (max-width: 900px){
  .sc-footer-top{
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
}

@media (max-width: 640px){
  footer.sc-site-footer,
  .sc-site-footer{
    padding: 44px 20px 30px !important;
  }

  .sc-footer-top{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .sc-footer-bottom{
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   ✅ SELL CITY FOOTER — FULL WIDTH DARK PRO VERSION
   ✅ Fixes boxed footer
   ✅ Fixes white footer background
   ✅ Makes titles visible
   ✅ Works even if footer is accidentally inside a max-width section
========================================================= */

footer.sc-site-footer,
.sc-site-footer{
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate !important;
  overflow: hidden !important;

  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 62px 28px 34px !important;

  background:
    radial-gradient(850px 420px at 16% 0%, rgba(124,58,237,0.34), transparent 62%),
    radial-gradient(900px 420px at 88% 10%, rgba(37,99,235,0.24), transparent 64%),
    linear-gradient(105deg, #17062f 0%, #10081f 42%, #071a46 100%) !important;

  border-top: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 -24px 70px rgba(124,58,237,0.14) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: initial !important;
}

/* diagonal line pattern */
footer.sc-site-footer::before,
.sc-site-footer::before{
  content:"" !important;
  position: absolute !important;
  inset: -90px !important;
  z-index: 0 !important;
  pointer-events: none !important;

  opacity: .18 !important;
  background-image:
    repeating-linear-gradient(
      103deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 20px,
      rgba(255,255,255,0.18) 21px,
      rgba(255,255,255,0.18) 23px,
      rgba(255,255,255,0.00) 24px,
      rgba(255,255,255,0.00) 44px
    ) !important;
  transform: skewX(-8deg) !important;
}

/* keep footer content centered, but NOT boxed */
.sc-footer-inner{
  position: relative !important;
  z-index: 2 !important;

  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.sc-footer-top{
  display: grid !important;
  grid-template-columns: 1.35fr .9fr .9fr 1fr !important;
  gap: 54px !important;
  align-items: start !important;
}

.sc-footer-logo-row{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.sc-footer-logo-row img{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow:
    0 0 18px rgba(255,255,255,0.22),
    0 0 30px rgba(124,58,237,0.22) !important;
}

.sc-footer-brand-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  text-shadow:
    0 0 10px rgba(255,255,255,0.45),
    0 0 22px rgba(168,85,247,0.55),
    0 0 34px rgba(37,99,235,0.35) !important;
}

.sc-footer-brand p{
  margin-top: 18px !important;
  max-width: 310px !important;

  color: rgba(238,232,255,0.82) !important;
  -webkit-text-fill-color: rgba(238,232,255,0.82) !important;

  font-size: 14px !important;
  line-height: 1.65 !important;
  font-weight: 750 !important;
}

.sc-footer-col{
  display: grid !important;
  gap: 12px !important;
}

.sc-footer-col h4{
  margin: 0 0 4px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;

  text-shadow:
    0 0 10px rgba(255,255,255,0.38),
    0 0 22px rgba(168,85,247,0.42),
    0 0 30px rgba(37,99,235,0.25) !important;
}

.sc-footer-col a{
  width: fit-content !important;

  color: rgba(238,232,255,0.84) !important;
  -webkit-text-fill-color: rgba(238,232,255,0.84) !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  transition:
    color .16s ease,
    transform .16s ease,
    text-shadow .16s ease !important;
}

.sc-footer-col a:hover{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateX(3px) !important;
  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 18px rgba(168,85,247,0.35) !important;
}

.sc-footer-bottom{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;

  margin-top: 48px !important;
  padding-top: 24px !important;

  border-top: 1px solid rgba(255,255,255,0.18) !important;
}

.sc-footer-bottom p{
  margin: 0 !important;

  color: rgba(238,232,255,0.76) !important;
  -webkit-text-fill-color: rgba(238,232,255,0.76) !important;

  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
}

/* kill old gray/black/transparent footer text */
.sc-site-footer *,
.sc-site-footer h1,
.sc-site-footer h2,
.sc-site-footer h3,
.sc-site-footer h4,
.sc-site-footer p,
.sc-site-footer a,
.sc-site-footer span,
.sc-site-footer div{
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

.sc-site-footer .text-gray-400,
.sc-site-footer .text-gray-500,
.sc-site-footer .text-gray-600,
.sc-site-footer .text-gray-700,
.sc-site-footer .text-gray-800,
.sc-site-footer .text-gray-900,
.sc-site-footer .text-black{
  color: rgba(238,232,255,0.84) !important;
  -webkit-text-fill-color: rgba(238,232,255,0.84) !important;
}

@media (max-width: 900px){
  .sc-footer-top{
    grid-template-columns: 1fr 1fr !important;
    gap: 34px !important;
  }
}

@media (max-width: 640px){
  footer.sc-site-footer,
  .sc-site-footer{
    padding: 44px 20px 30px !important;
  }

  .sc-footer-top{
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .sc-footer-bottom{
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   ✅ HOME FILTER + WORD GAME ONLY FIX
   ✅ Does NOT touch listing cards
   ✅ Does NOT touch footer
========================================================= */

/* ===============================
   FILTER BAR FIX ONLY
================================ */

body.sc-home-page .sc-home-filter-shell{
  width: calc(100% - 56px) !important;
  max-width: 1060px !important;
  margin: -28px auto 30px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(135deg, rgba(14, 8, 34, 0.98), rgba(20, 16, 52, 0.96)) !important;

  border: 1px solid rgba(255,255,255,0.13) !important;

  box-shadow:
    0 22px 60px rgba(0,0,0,0.36),
    0 0 0 1px rgba(124,58,237,0.24),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.sc-home-page .sc-home-filter-grid{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(230px, 260px) minmax(160px, 190px) !important;
  gap: 14px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

body.sc-home-page .sc-home-filter-search{
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.sc-home-page .sc-filter-icon{
  position: absolute !important;
  left: 17px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(216,180,254,0.75) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

body.sc-home-page .sc-home-filter-input,
body.sc-home-page .sc-home-filter-select{
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;

  border: 1px solid rgba(255,255,255,0.14) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045)) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  outline: none !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 850 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.18) !important;
}

body.sc-home-page .sc-home-filter-input{
  padding: 0 16px 0 50px !important;
}

body.sc-home-page .sc-home-filter-select{
  padding: 0 42px 0 16px !important;
  cursor: pointer !important;
}

body.sc-home-page .sc-home-filter-input::placeholder{
  color: rgba(232,225,255,0.56) !important;
  -webkit-text-fill-color: rgba(232,225,255,0.56) !important;
}

body.sc-home-page .sc-home-filter-input:focus,
body.sc-home-page .sc-home-filter-select:focus{
  border-color: rgba(168,85,247,0.75) !important;
  box-shadow:
    0 0 0 4px rgba(124,58,237,0.18),
    0 0 28px rgba(124,58,237,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.sc-home-page .sc-home-filter-select option{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
}

/* Tablet */
@media (max-width: 900px){
  body.sc-home-page .sc-home-filter-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  body.sc-home-page .sc-home-filter-search{
    grid-column: 1 / -1 !important;
  }
}

/* Phone */
@media (max-width: 640px){
  body.sc-home-page .sc-home-filter-shell{
    width: calc(100% - 32px) !important;
    margin-top: -20px !important;
  }

  body.sc-home-page .sc-home-filter-grid{
    grid-template-columns: 1fr !important;
  }

  body.sc-home-page .sc-home-filter-search{
    grid-column: auto !important;
  }
}

/* ===============================
   WORD GAME TAG WIDTH FIX ONLY
================================ */

body.sc-home-page .sc-wordgame-promo{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  width: calc(100% - 56px) !important;
  max-width: 1060px !important;
  margin: 30px auto 56px !important;

  padding: 14px 18px !important;
  border-radius: 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;

  color: #ffffff !important;

  background:
    radial-gradient(220px 120px at 8% 50%, rgba(168,85,247,0.32), transparent 72%),
    radial-gradient(360px 160px at 92% 45%, rgba(37,99,235,0.20), transparent 72%),
    linear-gradient(90deg, rgba(78,16,155,0.94), rgba(45,12,110,0.94) 48%, rgba(19,17,70,0.96)) !important;

  border: 1px solid rgba(168,85,247,0.36) !important;

  box-shadow:
    0 18px 46px rgba(0,0,0,0.28),
    0 0 0 1px rgba(124,58,237,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.sc-home-page .sc-wordgame-promo::before{
  content:"" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 94px !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(217,70,239,0.30), transparent 62%),
    linear-gradient(90deg, rgba(124,58,237,0.30), transparent) !important;

  clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%) !important;
}

body.sc-home-page .sc-wordgame-promo::after{
  content:"" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 22%, transparent 74%, rgba(255,255,255,0.045)),
    repeating-linear-gradient(
      105deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 25px,
      rgba(255,255,255,0.045) 26px,
      rgba(255,255,255,0.045) 27px,
      rgba(255,255,255,0.00) 28px,
      rgba(255,255,255,0.00) 50px
    ) !important;

  opacity: .55 !important;
}

body.sc-home-page .sc-wordgame-left,
body.sc-home-page .sc-wordgame-right{
  position: relative !important;
  z-index: 2 !important;
}

body.sc-home-page .sc-wordgame-left{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body.sc-home-page .sc-wordgame-right{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

body.sc-home-page .sc-wordgame-trophy{
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 17px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 28px !important;

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.30), transparent 32%),
    radial-gradient(circle, rgba(251,191,36,0.36), rgba(124,58,237,0.24) 58%, rgba(17,8,40,0.30)) !important;

  border: 1px solid rgba(255,255,255,0.16) !important;

  box-shadow:
    0 0 18px rgba(251,191,36,0.18),
    0 0 30px rgba(124,58,237,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;

  flex: 0 0 auto !important;
  overflow: hidden !important;
}

body.sc-home-page .sc-wordgame-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -0.025em !important;
}

body.sc-home-page .sc-wordgame-title span{
  background: linear-gradient(90deg, #d8b4fe, #c084fc, #60a5fa) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: chromaMove 2.6s linear infinite !important;
}

body.sc-home-page .sc-wordgame-subtitle{
  margin-top: 5px !important;
  max-width: 560px !important;

  color: rgba(232,225,255,0.70) !important;
  -webkit-text-fill-color: rgba(232,225,255,0.70) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

body.sc-home-page .sc-wordgame-badge{
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  min-width: 178px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;

  color: #ffffff !important;
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 28px rgba(0,0,0,0.14) !important;
}

body.sc-home-page .sc-wordgame-badge-icon{
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 17px !important;

  background:
    radial-gradient(circle at 30% 30%, #fff7cc 0%, #fbbf24 44%, #7c3aed 95%) !important;

  border: 1px solid rgba(255,255,255,0.50) !important;
}

body.sc-home-page .sc-wordgame-badge-title{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .025em !important;
}

body.sc-home-page .sc-wordgame-badge-sub{
  margin-top: 2px !important;
  color: rgba(232,225,255,0.70) !important;
  -webkit-text-fill-color: rgba(232,225,255,0.70) !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

body.sc-home-page .sc-wordgame-play-btn{
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: 42px !important;
  min-width: 110px !important;
  padding: 10px 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;

  border-radius: 12px !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;

  background: linear-gradient(100deg, #7c3aed 0%, #a855f7 48%, #d946ef 100%) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  font-size: 13px !important;
  font-weight: 950 !important;

  box-shadow:
    0 14px 30px rgba(124,58,237,0.28),
    0 10px 22px rgba(217,70,239,0.18) !important;
}

body.sc-home-page .sc-wordgame-arrow{
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Keep featured title breathing room, but nothing else */
body.sc-home-page .sc-section-title{
  overflow: visible !important;
  line-height: 1.18 !important;
  padding-bottom: 8px !important;
}

/* Tablet / phone */
@media (max-width: 900px){
  body.sc-home-page .sc-wordgame-promo{
    width: calc(100% - 36px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    margin-bottom: 42px !important;
  }

  body.sc-home-page .sc-wordgame-right{
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.sc-home-page .sc-wordgame-badge,
  body.sc-home-page .sc-wordgame-play-btn{
    width: 100% !important;
  }
}

@media (max-width: 640px){
  body.sc-home-page .sc-wordgame-promo{
    width: calc(100% - 32px) !important;
  }

  body.sc-home-page .sc-wordgame-left{
    align-items: flex-start !important;
  }

  body.sc-home-page .sc-wordgame-trophy{
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
  }

  body.sc-home-page .sc-wordgame-title{
    font-size: 1rem !important;
  }

  body.sc-home-page .sc-wordgame-subtitle{
    font-size: 12px !important;
  }
}

/* =========================================================
   ✅ HOME PAGE ONLY — FINAL TINY FIX
   ✅ Moves filters down off hero
   ✅ Removes transparent box behind boosted/featured card row
   ✅ Does NOT touch cards, footer, word game, or layout
========================================================= */

/* 1) Move filter bar down onto the black section */
body.sc-home-page .sc-home-filter-shell{
  margin-top: 24px !important;
}

/* 2) Remove weird transparent box behind boosted cards */
body.sc-home-page #featured-row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* kill any accidental row overlay/pseudo background */
body.sc-home-page #featured-row::before,
body.sc-home-page #featured-row::after{
  content: none !important;
  display: none !important;
}

/* make sure the section holding featured row has no box either */
body.sc-home-page section:has(#featured-row){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================================================
   ✅ NAV AUTH COLOR FIX FOR TRUST / SAFETY / LEGAL PAGES
   Fixes:
   - chromatic username not showing chosen Plus colors
   - Plus badge/pill losing purple styling
   - verified badge losing proper color
   Only touches #nav-auth-slot
========================================================= */

/* Keep normal nav auth readable */
#nav-auth-slot{
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* Normal username/dropdown text stays dark */
#nav-auth-slot a,
#nav-auth-slot button,
#nav-auth-slot span:not(.chromatic-text){
  color: inherit;
  -webkit-text-fill-color: initial;
}

/* ✅ Restore chromatic username colors inside nav auth */
#nav-auth-slot .chromatic-text{
  background: linear-gradient(
    90deg,
    var(--c1, #7c3aed),
    var(--c2, #2563eb),
    var(--c1, #7c3aed),
    var(--c2, #2563eb)
  ) !important;
  background-size: 300% 100% !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  animation: chromaMove 2.4s linear infinite !important;
  text-shadow: 0 0 12px rgba(124,58,237,0.22) !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ PLUS badge/pill fix:
   Do NOT force Plus colors here.
   Let nav-auth.js / existing Plus CSS use its real original styling.
   Chromatic username + verified badge fixes stay unchanged. */

/* ✅ Restore verified check/badge color */
#nav-auth-slot .verified-check,
#nav-auth-slot .verified-badge,
#nav-auth-slot .nav-verified-badge,
#nav-auth-slot .mini-vseller-badge,
#nav-auth-slot .mini-vseller-badge *,
#nav-auth-slot [aria-label*="Verified" i]{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ✅ Verified badge background stays blue */
#nav-auth-slot .verified-check,
#nav-auth-slot .verified-badge,
#nav-auth-slot .nav-verified-badge,
#nav-auth-slot .mini-vseller-badge{
  background:
    radial-gradient(circle at 30% 30%, #93c5fd 0%, #2563eb 45%, #4f46e5 100%) !important;

  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 10px 18px rgba(37,99,235,0.20) !important;
}

/* =========================================================
   ✅ GLOBAL REFERRAL POPUP FIX
   Fixes the white-covered referral link/input on ALL pages
   Does NOT touch listing cards, navbar, footer, or page layout
========================================================= */

/* Referral popup/card safety */
.sc-referral-card,
.sc-referral-popup,
.sc-referral-banner,
.sc-plus-referral-card,
.sc-plus-referral-popup,
[id*="referral" i],
[class*="referral" i]{
  color: #111827 !important;
  -webkit-text-fill-color: initial !important;
}

/* Keep paragraph text readable inside the referral popup */
.sc-referral-card p,
.sc-referral-popup p,
.sc-referral-banner p,
.sc-plus-referral-card p,
.sc-plus-referral-popup p,
[id*="referral" i] p,
[class*="referral" i] p{
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* Referral link input fix */
.sc-referral-card input,
.sc-referral-popup input,
.sc-referral-banner input,
.sc-plus-referral-card input,
.sc-plus-referral-popup input,
[id*="referral" i] input,
[class*="referral" i] input{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;

  border: 1px solid rgba(17,24,39,0.14) !important;
  border-radius: 14px !important;

  opacity: 1 !important;
  visibility: visible !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 18px rgba(15,23,42,0.06) !important;
}

/* Placeholder/link should not disappear */
.sc-referral-card input::placeholder,
.sc-referral-popup input::placeholder,
.sc-referral-banner input::placeholder,
.sc-plus-referral-card input::placeholder,
.sc-plus-referral-popup input::placeholder,
[id*="referral" i] input::placeholder,
[class*="referral" i] input::placeholder{
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  opacity: 1 !important;
}

/* Copy button next to referral link */
.sc-referral-card button,
.sc-referral-popup button,
.sc-referral-banner button,
.sc-plus-referral-card button,
.sc-plus-referral-popup button,
[id*="referral" i] button,
[class*="referral" i] button{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,0.12) !important;
  opacity: 1 !important;
}

/* Keep the View Plus button gradient if it is inside referral popup */
.sc-referral-card a[href*="plus"],
.sc-referral-popup a[href*="plus"],
.sc-referral-banner a[href*="plus"],
.sc-plus-referral-card a[href*="plus"],
.sc-plus-referral-popup a[href*="plus"],
[id*="referral" i] a[href*="plus"],
[class*="referral" i] a[href*="plus"]{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(90deg, #9333ea, #3b82f6) !important;
  border: 0 !important;
}

/* Make the referral row fit cleanly */
.sc-referral-card .flex,
.sc-referral-popup .flex,
.sc-referral-banner .flex,
.sc-plus-referral-card .flex,
.sc-plus-referral-popup .flex,
[id*="referral" i] .flex,
[class*="referral" i] .flex{
  min-width: 0 !important;
}

.sc-referral-card input,
.sc-referral-popup input,
.sc-referral-banner input,
.sc-plus-referral-card input,
.sc-plus-referral-popup input,
[id*="referral" i] input,
[class*="referral" i] input{
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}