/* ================================================================
   Sertrus2 — PREMIUM MARKETPLACE EDITION  v8
   eBay clarity · Heritage Auctions elegance · XRPL digital identity
   Light surfaces · Elevated cards · Editorial typography
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Light surface palette ── */
  --bg:     #F8FAFC;
  --bg2:    #F1F5F9;
  --bg3:    #E9EFF7;
  --bg4:    #FFFFFF;
  --bg5:    #EEF2FF;
  --bg6:    #F0F9FF;
  --surface: #FFFFFF;

  /* ── Primary text ── */
  --t:   #0F172A;
  --t2:  #334155;
  --t3:  #64748B;
  --t4:  #94A3B8;
  --t5:  #CBD5E1;

  /* ── Brand accents ── */
  --cyan:    #0891B2;
  --cyan2:   #06B6D4;
  --cyan3:   #67E8F9;
  --emerald: #059669;
  --emr2:    #10B981;
  --emr3:    #6EE7B7;
  --violet:  #6D28D9;
  --vio2:    #7C3AED;
  --vio3:    #A78BFA;
  --amber:   #D97706;
  --amb2:    #F59E0B;
  --red:     #DC2626;
  --red2:    #EF4444;
  --blue:    #1D4ED8;
  --blue2:   #3B82F6;

  /* ── Borders ── */
  --b1: #E2E8F0;
  --b2: #CBD5E1;
  --b3: #94A3B8;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 8px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:  0 10px 24px rgba(15,23,42,0.09), 0 4px 8px rgba(15,23,42,0.05);
  --shadow-xl:  0 20px 32px rgba(15,23,42,0.1), 0 8px 12px rgba(15,23,42,0.05);
  --shadow-2xl: 0 32px 60px rgba(15,23,42,0.14);
  --shadow-card-hover: 0 20px 48px rgba(15,23,42,0.13), 0 8px 18px rgba(15,23,42,0.07);

  /* ── Accent glows ── */
  --glow-cyan:    0 0 0 3px rgba(6,182,212,0.18);
  --glow-violet:  0 0 0 3px rgba(124,58,237,0.18);
  --glow-emerald: 0 0 0 3px rgba(16,185,129,0.18);

  /* ── Gradients ── */
  --grd-hero:    linear-gradient(150deg, #EEF2FF 0%, #F0F9FF 45%, #ECFDF5 100%);
  --grd-brand:   linear-gradient(135deg, #0891B2 0%, #6D28D9 100%);
  --grd-cyan:    linear-gradient(135deg, #0891B2, #06B6D4);
  --grd-emerald: linear-gradient(135deg, #059669, #10B981);
  --grd-premium: linear-gradient(140deg, #0F172A 0%, #1E293B 100%);
  --grd-xrpl:    linear-gradient(135deg, #6D28D9 0%, #0891B2 100%);
  --grd-amber:   linear-gradient(135deg, #D97706, #F59E0B);
  --grd-card-hover: linear-gradient(135deg, #F0F9FF 0%, #EEF2FF 100%);

  /* ── Radii ── */
  --rad:    18px;
  --rad-sm: 12px;
  --rad-xs: 8px;
  --rad-lg: 24px;
  --pill:   999px;

  /* ── Category Colors ── */
  --cat-5:   #8B5CF6;
  --cat-10:  #0891B2;
  --cat-20:  #059669;
  --cat-50:  #7C3AED;
  --cat-100: #D97706;
}

/* ── Smooth scroll ── */
html { font-size: 16px; scroll-behavior: smooth; }

/* ── Body: bright premium surface ── */
body {
  background: var(--bg);
  color: var(--t);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Subtle dot grid background ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(100,116,139,0.06) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

a { cursor: pointer; text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; outline: none; position: relative; overflow: hidden; }
input, select, textarea { font-family: inherit; }
img { display: block; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--b3); }

/* ══════════════════════════════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════════════════════════════ */
.loading-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; flex-direction: column; gap: 20px;
  background: var(--bg);
}
.loader {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--b1);
  border-top-color: var(--cyan2);
  border-right-color: var(--violet);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-screen p { color: var(--t3); font-size: 0.9rem; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR — clean white premium header
══════════════════════════════════════════════════════════════════ */
.navbar {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--b1);
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  box-shadow: 0 1px 0 var(--b1), 0 4px 20px rgba(15,23,42,0.05);
}
.nav-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 32px;
  height: 70px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.55rem; font-weight: 900; letter-spacing: -0.5px;
  color: var(--t);
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.8; }
.nav-logo span {
  background: var(--grd-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-logo-xrp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grd-brand);
  font-size: 0.55rem; font-weight: 900; color: #fff;
  margin-left: 6px; letter-spacing: 0; flex-shrink: 0;
}
.nav-search {
  flex: 1; max-width: 440px;
  display: flex; align-items: center;
  background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--pill); overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav-search:focus-within {
  border-color: var(--cyan2); box-shadow: var(--glow-cyan);
  background: #fff;
}
.nav-search input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 10px 18px; font-size: 0.875rem; color: var(--t);
}
.nav-search input::placeholder { color: var(--t4); }
.nav-search-btn {
  background: var(--grd-brand); border: none;
  padding: 9px 20px; color: #fff;
  font-size: 0.82rem; font-weight: 700;
  border-radius: 0 var(--pill) var(--pill) 0;
  transition: filter 0.2s;
  white-space: nowrap;
}
.nav-search-btn:hover { filter: brightness(1.1); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-wallet {
  color: var(--t3); font-size: 0.77rem; font-family: 'Space Grotesk', monospace;
  background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--pill); padding: 6px 14px;
  font-weight: 600; letter-spacing: 0.02em;
}
.nav-btn {
  background: transparent; color: var(--t2);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 8px 18px;
  font-size: 0.84rem; font-weight: 600;
  transition: all 0.18s ease;
}
.nav-btn:hover {
  background: var(--bg2); color: var(--t);
  border-color: var(--b2);
}
.nav-btn.primary {
  background: var(--grd-brand); color: #fff;
  border: none; padding: 9px 22px;
  box-shadow: 0 2px 10px rgba(8,145,178,0.25);
  font-weight: 700;
}
.nav-btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(8,145,178,0.35);
  transform: translateY(-1px);
}
.admin-badge-nav {
  font-size: 0.56rem; background: var(--grd-brand); color: #fff;
  border-radius: 4px; padding: 2px 6px;
  margin-left: 6px; vertical-align: middle; font-weight: 800;
}

/* ── Category nav bar ── */
.cat-nav-bar {
  background: #fff; border-bottom: 1px solid var(--b1);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.cat-nav-bar::-webkit-scrollbar { display: none; }
/* Fade hint — only on the RIGHT edge so the last item never clips */
.cat-nav-bar::after {
  content: '';
  position: sticky;
  right: 0; top: 0;
  display: block;
  height: 100%;
  width: 32px;
  flex-shrink: 0;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
  z-index: 1;
}
.cat-nav-inner {
  padding: 0 24px;
  display: flex; gap: 0; align-items: stretch;
  width: max-content; min-width: 100%;
}
.cat-nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; font-size: 0.82rem; font-weight: 600;
  color: var(--t2); white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: all 0.18s;
  cursor: pointer;
  flex-shrink: 0;
}
.cat-nav-link:hover { color: var(--cyan); border-color: var(--cyan2); }
.cat-nav-link.active { color: var(--cyan); border-color: var(--cyan2); }

/* ══════════════════════════════════════════════════════════════════
   LIVE TICKER — light announcement bar
══════════════════════════════════════════════════════════════════ */
.ticker-bar {
  background: linear-gradient(90deg, #EEF2FF 0%, #F0F9FF 50%, #EEF2FF 100%);
  border-bottom: 1px solid var(--b1);
  padding: 10px 0;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
}
.ticker-live-dot {
  flex-shrink: 0; margin-left: 24px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); position: relative;
}
.ticker-live-dot::before {
  content: '';
  position: absolute; inset: -4px; border-radius: 50%;
  background: rgba(34,211,238,0.25);
  animation: ping 1.5s ease-out infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.ticker-label {
  flex-shrink: 0; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.2em;
  color: var(--cyan);
  background: rgba(8,145,178,0.1); border: 1px solid rgba(8,145,178,0.25);
  border-radius: 4px; padding: 2px 9px;
}
.ticker-track {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.ticker-inner { display: inline-flex; align-items: center; white-space: nowrap; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
.tick-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 36px; font-size: 0.8rem; color: var(--t3);
  border-right: 1px solid var(--b1);
}
.tick-item b  { color: var(--t); font-weight: 700; }
.tick-item em { font-style: normal; color: var(--cyan); }
.tick-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   TRUST BAR — social proof strip
══════════════════════════════════════════════════════════════════ */
.trust-bar {
  background: #fff; border-bottom: 1px solid var(--b1);
  padding: 14px 28px;
}
.trust-inner {
  max-width: 1360px; margin: 0 auto;
  display: flex; gap: 32px; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.79rem; font-weight: 600; color: var(--t2);
}
.trust-icon { font-size: 1rem; }

/* ── Trust bar: divider pip ────────────────────────────────────── */
.trust-divider {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--b2, #e2e8f0);
  flex-shrink: 0;
  padding: 0; gap: 0;
}
/* Solana chain divider — purple tint */
.trust-chain-divider {
  background: rgba(153,69,255,0.35);
  width: 3px; height: 14px;
  border-radius: 2px;
}

/* ── Solana / Phantom items — purple-violet accent ─────────────── */
.trust-chain-sol {
  color: #7c3aed;
  font-weight: 700;
}
.trust-chain-sol .trust-icon {
  filter: saturate(1.3);
}

/* ══════════════════════════════════════════════════════════════════
   HERO — eBay-style two-column: text left, product grid right
══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--grd-hero);
  border-bottom: 1px solid var(--b1);
  overflow: hidden;
  padding: 56px 24px 60px;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 65% 55% at 5% 50%, rgba(8,145,178,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 65% at 96% 15%, rgba(109,40,217,0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Hide old orbs/particles */
.hero-orb, .hero-particles, .fp, .hero-flow, .flow-step,
.flow-icon-wrap, .flow-arrow { display: none; }

/* Two-column inner layout */
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1360px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Left column */
.hero-left { display: flex; flex-direction: column; gap: 0; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.67rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 22px;
  background: rgba(8,145,178,0.07); border: 1.5px solid rgba(8,145,178,0.2);
  border-radius: var(--pill); padding: 6px 18px;
  width: fit-content;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald); flex-shrink: 0;
  animation: glow-pulse 2.5s ease infinite;
}
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900; letter-spacing: -2px; color: var(--t);
  margin-bottom: 18px; line-height: 1.1;
}
.hero-accent {
  background: var(--grd-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  color: var(--t2); font-size: 1.02rem; line-height: 1.7;
  max-width: 500px; margin-bottom: 32px;
}

/* Hero CTA row */
.hero-cta-row {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}

/* Hero stats */
.hero-stats {
  display: inline-flex; align-items: center;
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-lg); padding: 18px 28px;
  box-shadow: var(--shadow-xl);
  width: fit-content;
}
.hero-stat { text-align: center; padding: 0 20px; }
.hs-div { width: 1px; height: 40px; background: var(--b1); }
.hs-val {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem; font-weight: 900; color: var(--t);
  font-variant-numeric: tabular-nums;
}
.hs-val-accent { color: var(--cyan); }
.hs-lbl {
  font-size: 0.6rem; color: var(--t3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 3px; display: block;
}

/* ── Right column: product showcase grid ─────────────────────── */
.hero-right { display: flex; flex-direction: column; gap: 12px; }

.hero-prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-prod-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.22s ease;
  cursor: default;
}
.hero-prod-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--cyan2);
}
.hero-prod-card--featured {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0;
}
.hero-prod-card--featured .hero-prod-img-wrap {
  width: 180px; flex-shrink: 0;
  height: 130px;
}
.hero-prod-card--featured .hero-prod-info { padding: 20px 20px; }

.hero-prod-img-wrap {
  background: #F8FAFC;
  display: flex; align-items: center; justify-content: center;
  height: 130px; overflow: hidden;
  border-bottom: 1px solid var(--b1);
}
.hero-prod-card--featured .hero-prod-img-wrap {
  border-bottom: none;
  border-right: 1px solid var(--b1);
}
.hero-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.hero-prod-card:hover .hero-prod-img { transform: scale(1.05); }

.hero-prod-info { padding: 12px 14px; }
.hero-prod-name {
  font-size: 0.78rem; font-weight: 700; color: var(--t);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-prod-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-prod-won {
  font-size: 0.62rem; color: var(--t3); font-weight: 500;
}
.hero-prod-price {
  font-size: 0.9rem; font-weight: 900; color: var(--emerald);
  font-family: 'Space Grotesk', sans-serif;
}
.hero-prod-retail {
  font-size: 0.62rem; color: var(--t4); text-decoration: line-through;
}

.hero-prod-note {
  font-size: 0.7rem; color: var(--t3); font-weight: 600;
  text-align: center; padding: 6px 0;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — clean premium CTAs
══════════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 13px 28px; font-size: 0.9rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28), 0 1px 2px rgba(0,0,0,0.06);
  transition: all 0.22s ease;
  cursor: pointer; text-decoration: none; letter-spacing: 0.01em;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(8,145,178,0.38), 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b2); border-radius: var(--rad-xs);
  padding: 12px 24px; font-size: 0.88rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
  cursor: pointer;
}
.btn-secondary:hover {
  border-color: var(--cyan2); color: var(--cyan);
  box-shadow: var(--shadow-md); transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--cyan);
  border: 1.5px solid var(--cyan2); border-radius: var(--rad-xs);
  padding: 10px 22px; font-size: 0.87rem; font-weight: 700;
  transition: all 0.18s;
  cursor: pointer;
}
.btn-outline:hover {
  background: rgba(6,182,212,0.06);
  box-shadow: var(--glow-cyan);
}

.btn-bid {
  background: var(--grd-emerald); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 13px 30px; font-size: 0.92rem; font-weight: 800;
  box-shadow: 0 2px 12px rgba(5,150,105,0.32);
  transition: all 0.22s;
  cursor: pointer;
}
.btn-bid:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(5,150,105,0.4);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   SECTIONS — bright structured layout
══════════════════════════════════════════════════════════════════ */
.section { padding: 60px 0; }
.section-white { background: #fff; border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
.section-alt { background: var(--bg2); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
.section-dark {
  background: var(--bg2); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  color: var(--t);
}
.section-dark .section-title { color: var(--t); }
.section-dark .section-sub { color: var(--t3); }
.section-fire {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 50%, #FFFBEB 100%);
  border-top: 1px solid #FDE68A; border-bottom: 1px solid #FDE68A;
}
.section-fire .section-title { color: var(--amber); }
.section-trending { background: var(--bg5); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
.section-won {
  background: linear-gradient(180deg, #ECFDF5 0%, #F0FDF4 100%);
  border-top: 1px solid #A7F3D0; border-bottom: 1px solid #A7F3D0;
}

.section-inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px; flex-wrap: wrap; gap: 12px;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.55rem; font-weight: 800; color: var(--t);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.4px;
}
.section-sub { font-size: 0.82rem; color: var(--t3); font-weight: 500; }

.see-all-btn {
  background: #fff; color: var(--cyan);
  border: 1.5px solid rgba(8,145,178,0.25);
  border-radius: var(--pill); padding: 7px 18px;
  font-size: 0.8rem; font-weight: 700;
  transition: all 0.18s;
}
.see-all-btn:hover {
  background: rgba(6,182,212,0.05);
  border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
}

/* Live chip */
.live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(220,38,38,0.07); color: var(--red);
  border: 1.5px solid rgba(220,38,38,0.2); border-radius: var(--pill);
  padding: 5px 14px; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.1em;
}
.live-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red2); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.scroll-hint { font-size: 0.72rem; color: var(--t4); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL
══════════════════════════════════════════════════════════════════ */
.h-scroll-wrap { position: relative; }
.h-scroll {
  display: flex; gap: 22px;
  overflow-x: auto; padding: 8px 4px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--b1);
  color: var(--t); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: all 0.2s;
  box-shadow: var(--shadow-md);
}
.h-scroll-btn:hover {
  background: var(--grd-brand); color: #fff;
  border-color: transparent;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 24px rgba(8,145,178,0.32);
}
.h-scroll-btn.left  { left: -22px; }
.h-scroll-btn.right { right: -22px; }
@media (max-width: 640px) { .h-scroll-btn { display: none; } }

/* ══════════════════════════════════════════════════════════════════
   BIG CARD — premium trending card
══════════════════════════════════════════════════════════════════ */
.big-card {
  flex: 0 0 280px; width: 280px;
  border-radius: var(--rad);
  background: var(--surface);
  border: 1.5px solid var(--b1);
  overflow: hidden; cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.28s ease, box-shadow 0.28s, border-color 0.28s;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.big-card:hover {
  transform: translateY(-10px);
  border-color: rgba(8,145,178,0.25);
  box-shadow: var(--shadow-card-hover);
}
.big-card-img-wrap { position: relative; height: 200px; overflow: hidden; }
.big-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.big-card:hover .big-card-img { transform: scale(1.06); }
.big-card-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* Real product image in big-card placeholder */
.big-card-prod-wrap {
  background: #F8FAFC;
}
.big-card-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.big-card:hover .big-card-prod-img { transform: scale(1.05); }
.big-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(15,23,42,0.52) 100%);
  z-index: 1;
}
.big-card-body { padding: 16px 18px 18px; }
.big-card-title {
  font-weight: 700; font-size: 0.96rem; color: var(--t);
  margin-bottom: 10px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-pool-track {
  height: 5px; background: var(--bg2); border-radius: 99px;
  margin-bottom: 7px; overflow: hidden;
}
.bc-pool-fill {
  height: 100%; background: var(--grd-cyan);
  border-radius: 99px; transition: width 0.4s ease;
}
.bc-meta { font-size: 0.72rem; color: var(--t3); font-weight: 500; }
.bc-countdown {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.76rem; color: var(--t2); margin-top: 3px;
}
.bc-countdown b { color: var(--red2); font-weight: 700; }
.card-cd-row {
  font-size: 0.72rem; color: var(--t3); margin-top: 4px;
  font-weight: 500;
}
.card-cd-row b { color: var(--red2); font-weight: 700; }
.bc-bid-live {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--t2); font-weight: 600;
}
.bc-bid-live b { color: var(--t); }
.bid-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red2); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
.big-card-phase {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 700; margin-top: 9px;
  padding: 4px 11px; border-radius: var(--pill);
}
.big-card-cat-chip {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,0.97); color: var(--t);
  font-size: 0.7rem; font-weight: 800;
  border-radius: var(--pill); padding: 3px 11px;
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════════════
   STANDARD AUCTION CARD — white elevated premium
══════════════════════════════════════════════════════════════════ */
.auction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.auction-card {
  background: var(--surface);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad);
  overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.26s ease, box-shadow 0.26s, border-color 0.26s;
  position: relative;
  display: flex; flex-direction: column;
}
.auction-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(8,145,178,0.2);
}

/* Card image area */
.card-img-wrap {
  position: relative;
  padding-top: 62%;
  overflow: hidden; background: var(--bg2);
}
.card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.42s ease;
}
.auction-card:hover .card-img { transform: scale(1.05); }
.card-img-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Real product image in standard card */
.card-prod-wrap { background: #F8FAFC; }
.card-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.auction-card:hover .card-prod-img { transform: scale(1.05); }

/* Standalone prod-photo used by renderMockup fallback */
.prod-photo {
  max-width: 85%; max-height: 85%;
  object-fit: contain;
}
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(15,23,42,0.22) 100%);
}

/* Badges */
.img-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 0.63rem; font-weight: 900; letter-spacing: 0.07em;
  border-radius: var(--pill); padding: 4px 12px;
  display: flex; align-items: center; gap: 4px;
}
.badge-hot {
  background: var(--red2); color: #fff;
  box-shadow: 0 2px 12px rgba(239,68,68,0.45);
  animation: badge-pulse 1.5s ease infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 2px 12px rgba(239,68,68,0.45); }
  50%      { box-shadow: 0 2px 20px rgba(239,68,68,0.75); }
}
.badge-ending {
  background: var(--amber); color: #fff;
  box-shadow: 0 2px 12px rgba(217,119,6,0.45);
}
.badge-new {
  background: var(--emerald); color: #fff;
  box-shadow: 0 2px 12px rgba(5,150,105,0.45);
}
.badge-popular {
  background: var(--violet); color: #fff;
  box-shadow: 0 2px 12px rgba(109,40,217,0.45);
}

.card-cat-chip {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  background: rgba(255,255,255,0.97); color: var(--t);
  font-size: 0.7rem; font-weight: 800;
  border-radius: var(--pill); padding: 3px 11px;
  box-shadow: var(--shadow-sm);
}
.card-phase-chip {
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  font-size: 0.65rem; font-weight: 700;
  border-radius: var(--pill); padding: 3px 10px;
}
.card-hover-cta {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.52);
  color: #fff; font-size: 0.9rem; font-weight: 800;
  opacity: 0; transition: opacity 0.22s;
  backdrop-filter: blur(2px);
}
.auction-card:hover .card-hover-cta { opacity: 1; }

/* Card body */
.card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 9px;
  flex: 1;
}
.card-title {
  font-weight: 700; font-size: 0.96rem; color: var(--t);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pool row */
.pool-row-sm {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--t3); font-weight: 600;
}
.pool-pct { color: var(--cyan); font-weight: 700; }
.pool-track-sm {
  height: 4px; background: var(--bg2); border-radius: 99px; overflow: hidden;
}
.pool-fill-sm {
  height: 100%; background: var(--grd-cyan);
  border-radius: 99px; transition: width 0.4s ease;
}

.bidding-row-sm {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.75rem; color: var(--red); font-weight: 700;
}
.live-pulse-sm {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red2);
  animation: blink 0.85s ease infinite;
  flex-shrink: 0;
}
.sold-txt {
  font-size: 0.75rem; color: var(--emerald); font-weight: 700;
}

.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--b1);
}
.entry-cnt { font-size: 0.72rem; color: var(--t3); font-weight: 500; }
.card-cta-lnk {
  font-size: 0.75rem; color: var(--cyan); font-weight: 700;
  transition: color 0.18s;
}
.auction-card:hover .card-cta-lnk { color: var(--violet); }

/* Phase chips */
.phase-entry    { background: rgba(5,150,105,0.1);  color: var(--emerald); border: 1px solid rgba(5,150,105,0.2); }
.phase-bidding  { background: rgba(220,38,38,0.1);  color: var(--red2);    border: 1px solid rgba(220,38,68,0.2); animation: blink 1.2s ease infinite; }
.phase-pending  { background: rgba(217,119,6,0.1);  color: var(--amber);   border: 1px solid rgba(217,119,6,0.2); }
.phase-sold     { background: rgba(5,150,105,0.1);  color: var(--emerald); border: 1px solid rgba(5,150,105,0.2); }
.phase-expired  { background: var(--bg2);           color: var(--t3);      border: 1px solid var(--b1); }
.live-ring-anim {
  position: absolute; bottom: 10px; left: 10px; z-index: 3;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red2);
  animation: blink 0.85s ease infinite;
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY TILES — rich premium category grid
══════════════════════════════════════════════════════════════════ */
/* ── Category tiles: eBay-style product image cards ──────────── */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }

.cat-tile {
  border-radius: 14px;
  cursor: pointer;
  position: relative; overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--b1);
  box-shadow: var(--shadow-sm);
  transition: all 0.22s ease;
  display: flex; flex-direction: column;
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan2);
}

/* Product image area */
.cat-tile-img-wrap {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  background: #F8FAFC;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cat-tile-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cat-tile:hover .cat-tile-img { transform: scale(1.06); }

/* Accent color bar at bottom of image */
.cat-tile-color-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; opacity: 0.85;
}

/* Text body */
.cat-tile-body {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--b1);
}
.cat-tile-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem; font-weight: 800; color: var(--t);
  margin-bottom: 2px; letter-spacing: -0.2px;
}
.cat-tile-pool-size {
  font-size: 0.65rem; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.cat-tile-sub { font-size: 0.68rem; color: var(--t3); font-weight: 500; }
.cat-browse-lbl {
  font-size: 0.68rem; color: var(--cyan); font-weight: 700;
}
.cat-live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(220,38,38,0.08); color: var(--red);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--pill); padding: 2px 8px;
  font-size: 0.62rem; font-weight: 800;
}
.cat-live-ring { display: none; }
.cat-tile-glow { display: none; }
.cat-tile-emoji { display: none; }
.cat-tile-icon-wrap { display: none; }

/* ══════════════════════════════════════════════════════════════════
   TOP SELLERS — light seller cards
══════════════════════════════════════════════════════════════════ */
.sellers-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.seller-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm);
  padding: 22px 14px 18px;
  text-align: center; position: relative;
  transition: all 0.24s;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.seller-card:hover {
  background: var(--bg5);
  border-color: var(--cyan2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.seller-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg2); border: 2px solid var(--b1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 12px;
  transition: transform 0.24s;
}
.seller-card:hover .seller-avatar { transform: scale(1.08); }
.seller-name { font-size: 0.9rem; font-weight: 700; color: var(--t); margin-bottom: 2px; }
.seller-tag { font-size: 0.68rem; color: var(--t3); margin-bottom: 10px; }
.seller-wins {
  font-size: 0.72rem; font-weight: 800;
  color: var(--cyan); background: rgba(8,145,178,0.08);
  border: 1px solid rgba(8,145,178,0.2);
  border-radius: var(--pill); padding: 2px 11px; display: inline-block;
}
.seller-vol { font-size: 0.67rem; color: var(--t4); margin-top: 5px; }

/* ══════════════════════════════════════════════════════════════════
   RECENTLY WON — clean win cards
══════════════════════════════════════════════════════════════════ */
.won-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.won-card {
  background: #fff; border-radius: var(--rad);
  border: 1.5px solid var(--b1);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: all 0.24s;
  cursor: pointer;
}
.won-card:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-xl);
  border-color: rgba(5,150,105,0.25);
}
.won-img-wrap {
  position: relative; height: 200px; overflow: hidden;
  background: #F8FAFC;
  display: flex; align-items: center; justify-content: center;
}
.won-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.won-card:hover .won-prod-img { transform: scale(1.06); }
.won-overlay { display: none; }
.won-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--emerald); color: #fff;
  font-size: 0.62rem; font-weight: 900;
  border-radius: var(--pill); padding: 3px 10px;
}
.won-body { padding: 14px 16px 16px; }
.won-title {
  font-size: 0.92rem; font-weight: 700; color: var(--t);
  margin-bottom: 4px; line-height: 1.3;
}
.won-retail {
  font-size: 0.68rem; color: var(--t4); margin-bottom: 8px;
}
.won-retail s { color: var(--t3); }
.won-meta { display: flex; justify-content: space-between; align-items: center; }
.won-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 900; color: var(--emerald);
}
.won-winner { font-size: 0.68rem; color: var(--t3); }
.won-savings-badge {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: #DC2626; color: #fff;
  font-size: 0.6rem; font-weight: 800;
  border-radius: var(--pill); padding: 3px 10px;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT MOCKUPS — refined floating devices
══════════════════════════════════════════════════════════════════ */
.mock-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* Phone */
.mock-phone {
  width: 66px; height: 112px;
  border-radius: 15px;
  background: #1E293B; border: 2px solid rgba(255,255,255,0.14);
  position: relative; overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.4);
  animation: mock-float 5s ease-in-out infinite;
}
.mock-phone-notch {
  width: 28px; height: 7px; background: rgba(0,0,0,0.6);
  border-radius: 0 0 7px 7px; margin: 0 auto;
}
.mock-phone-screen {
  flex: 1; background: linear-gradient(160deg, #0EA5E9 0%, #6366F1 100%);
  height: 84px; margin: 4px 4px 0; border-radius: 7px;
}
.mock-phone-btn {
  width: 22px; height: 3px; background: rgba(255,255,255,0.2);
  border-radius: 99px; margin: 5px auto 0;
}
/* Laptop */
.mock-laptop {
  position: relative; animation: mock-float 5.5s ease-in-out infinite;
}
.mock-laptop-screen {
  width: 124px; height: 80px;
  background: linear-gradient(160deg, #0369A1 0%, #4F46E5 100%);
  border-radius: 8px 8px 2px 2px;
  border: 2px solid #334155;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.mock-laptop-base {
  width: 140px; height: 9px; background: #334155;
  border-radius: 0 0 4px 4px; margin: 0 auto;
}
/* Watch */
.mock-watch {
  width: 62px; height: 72px; border-radius: 17px;
  background: #1E293B; border: 2px solid rgba(255,255,255,0.14);
  position: relative; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  animation: mock-float 4.5s ease-in-out infinite;
}
.mock-watch-screen {
  width: 46px; height: 46px; border-radius: 11px;
  background: linear-gradient(160deg, #0284C7, #7C3AED);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.mock-watch-time { font-size: 0.56rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.mock-watch-date { font-size: 0.33rem; color: rgba(255,255,255,0.7); }
.mock-watch-crown {
  position: absolute; right: -3px; top: 20px;
  width: 4px; height: 15px; background: #475569; border-radius: 2px;
}
.mock-watch-btn1 {
  position: absolute; right: -3px; top: 40px;
  width: 4px; height: 9px; background: #475569; border-radius: 2px;
}
/* Headphones */
.mock-headphones {
  position: relative; width: 82px; height: 82px;
  animation: mock-float 6s ease-in-out infinite;
}
.mock-hp-arc {
  width: 66px; height: 38px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 5px solid #334155; border-bottom: none;
  position: absolute; top: 4px; left: 8px;
  background: linear-gradient(180deg, #0891B2, #6D28D9);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.mock-hp-left {
  width: 23px; height: 30px; border-radius: 6px;
  background: #1E293B; border: 2px solid #475569;
  position: absolute; bottom: 6px; left: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.mock-hp-right {
  width: 23px; height: 30px; border-radius: 6px;
  background: #1E293B; border: 2px solid #475569;
  position: absolute; bottom: 6px; right: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* Gamepad */
.mock-gamepad {
  width: 92px; height: 58px; border-radius: 12px 12px 19px 19px;
  background: #1E293B; border: 2px solid rgba(255,255,255,0.1);
  position: relative; display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: mock-float 5.2s ease-in-out infinite;
}
.mock-gp-screen {
  width: 30px; height: 19px; border-radius: 4px;
  background: linear-gradient(135deg, #0EA5E9, #4F46E5);
  position: absolute; top: 10px; left: 31px;
}
.mock-gp-dpad {
  width: 19px; height: 19px; position: relative; margin-top: 7px;
  background: rgba(255,255,255,0.06); border-radius: 4px;
}
.mock-gp-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: 21px; margin-top: 7px;
}
.mock-gp-btn {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
}
@keyframes mock-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS — clean numbered steps (light bg)
══════════════════════════════════════════════════════════════════ */
.hiw-intro {
  text-align: center; color: var(--t3); margin-bottom: 40px;
  font-size: 1rem; max-width: 500px; margin-left: auto; margin-right: auto;
}
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.hiw-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 32px 24px;
  position: relative; text-align: center;
  transition: all 0.24s;
  box-shadow: var(--shadow-sm);
}
.hiw-card:hover {
  background: var(--bg5); transform: translateY(-4px);
  border-color: var(--cyan2);
  box-shadow: var(--shadow-md);
}
.hiw-num {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grd-brand); color: #fff;
  font-size: 0.75rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(8,145,178,0.45);
}
.hiw-icon-lg { font-size: 2.2rem; margin-bottom: 16px; }
.hiw-card h3 { font-size: 0.96rem; font-weight: 800; color: var(--t); margin-bottom: 9px; }
.hiw-card p  { font-size: 0.82rem; color: var(--t3); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   FILTERS
══════════════════════════════════════════════════════════════════ */
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-sel {
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b1); border-radius: var(--rad-xs);
  padding: 8px 34px 8px 13px; font-size: 0.82rem; font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 16px;
  cursor: pointer;
  transition: border-color 0.18s;
}
.filter-sel:focus { outline: none; border-color: var(--cyan2); box-shadow: var(--glow-cyan); }

/* Empty state */
.empty-state {
  text-align: center; padding: 72px 20px;
  background: #fff; border: 1.5px dashed var(--b2);
  border-radius: var(--rad); margin-top: 8px;
}
.empty-icon { font-size: 3.2rem; margin-bottom: 16px; }
.empty-text { font-size: 1.15rem; font-weight: 700; color: var(--t); margin-bottom: 7px; }
.empty-sub  { font-size: 0.9rem; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════
   DETAIL PAGE
══════════════════════════════════════════════════════════════════ */
.phase-tracker {
  background: #fff; border-bottom: 1px solid var(--b1);
  padding: 0; position: sticky; top: 70px; z-index: 100;
  box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
.tracker-inner {
  max-width: 700px; margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.tracker-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 72px;
}
.tracker-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg2); border: 2px solid var(--b1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; transition: all 0.26s;
  color: var(--t3);
}
.tracker-step.active .tracker-dot {
  background: var(--grd-brand); border-color: transparent;
  color: #fff; box-shadow: 0 4px 16px rgba(8,145,178,0.38);
}
.tracker-step.done .tracker-dot {
  background: var(--emerald); border-color: transparent; color: #fff;
}
.tracker-lbl { font-size: 0.64rem; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.tracker-step.active .tracker-lbl { color: var(--cyan); }
.tracker-step.done  .tracker-lbl  { color: var(--emerald); }
.tracker-line {
  flex: 1; height: 2px; background: var(--b1);
  margin-bottom: 20px; min-width: 22px;
  transition: background 0.26s;
}
.tracker-line.done { background: var(--emerald); }

.detail-wrap {
  max-width: 1360px; margin: 0 auto;
  padding: 32px 32px 90px;
}
.detail-grid {
  display: grid; grid-template-columns: 1fr 368px;
  gap: 36px; align-items: start;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

/* Gallery */
.gallery { margin-bottom: 26px; }
.gallery-main-wrap {
  position: relative; border-radius: var(--rad); overflow: hidden;
  background: var(--bg2); border: 1.5px solid var(--b1);
  box-shadow: var(--shadow-md);
}
.gallery-main {
  width: 100%; max-height: 440px; object-fit: cover; display: block;
}
.gallery-placeholder {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rad); overflow: hidden;
}
/* Real product image in gallery placeholder */
.gallery-prod-wrap {
  background: #F8FAFC;
  width: 100%; height: 340px;
  border-radius: var(--rad);
}
.gallery-prod-img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.gallery-overlay-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(15,23,42,0.42) 0%, transparent 100%);
}
.gallery-badges { display: flex; gap: 8px; align-items: center; }
.back-btn {
  background: rgba(255,255,255,0.92); color: var(--t);
  border: none; border-radius: var(--pill);
  padding: 7px 18px; font-size: 0.8rem; font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s; cursor: pointer;
}
.back-btn:hover { background: #fff; transform: translateX(-2px); }
.cat-chip-lg {
  background: rgba(255,255,255,0.97); color: var(--t);
  font-size: 0.75rem; font-weight: 900;
  border-radius: var(--pill); padding: 4px 14px;
  box-shadow: var(--shadow-sm);
}
.thumb-strip { display: flex; gap: 9px; margin-top: 12px; }
.thumb {
  width: 62px; height: 62px; border-radius: var(--rad-xs);
  object-fit: cover; cursor: pointer;
  border: 2px solid var(--b1); opacity: 0.7;
  transition: all 0.18s;
}
.thumb:hover, .thumb.act { opacity: 1; border-color: var(--cyan2); }

/* Detail content */
.detail-phase-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  border-radius: var(--pill); padding: 4px 14px; margin-bottom: 11px;
}
.detail-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 900; color: var(--t); line-height: 1.18;
  margin-bottom: 11px; letter-spacing: -0.5px;
}
.detail-desc { font-size: 0.92rem; color: var(--t2); line-height: 1.68; margin-bottom: 22px; }

/* Phase card */
.phase-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 26px;
  margin-top: 24px; box-shadow: var(--shadow-sm);
}
.phase-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.phase-step-badge {
  background: var(--grd-brand); color: #fff;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.1em;
  border-radius: var(--pill); padding: 3px 11px;
}
.phase-step-badge.fire { background: var(--grd-amber); }
.phase-step-title { font-size: 0.9rem; font-weight: 700; color: var(--t); }

/* Pool block */
.pool-block {
  background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 20px; margin-bottom: 18px;
}
.pool-top { display: flex; justify-content: space-between; margin-bottom: 13px; }
.pool-lbl { font-size: 0.78rem; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: 0.07em; }
.pool-val { font-size: 0.82rem; font-weight: 700; color: var(--t); }
.pool-val b { color: var(--cyan); }
.pool-track-lg {
  height: 9px; background: var(--b1); border-radius: 99px; overflow: hidden; margin-bottom: 11px;
}
.pool-fill-lg {
  height: 100%; background: var(--grd-cyan);
  border-radius: 99px; transition: width 0.6s ease;
}
.pool-bot { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--t3); }
.urgent-txt { color: var(--red); font-weight: 700; }

/* Rule box */
.rule-box {
  background: rgba(8,145,178,0.05); border: 1.5px solid rgba(8,145,178,0.14);
  border-radius: var(--rad-xs); padding: 13px 18px;
  font-size: 0.82rem; color: var(--t2); line-height: 1.58; margin-bottom: 22px;
}
.rule-box b { color: var(--cyan); }

/* Bid stats */
.bid-stats-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 18px;
}
.bid-stat-box {
  background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 16px 12px; text-align: center;
}
.bid-stat-box.highlight {
  background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.18);
}
.bsb-lbl { font-size: 0.64rem; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px; }
.bsb-val { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--t); }
.bsb-val.gold { color: var(--amber); }
.bsb-val.urgent { color: var(--red); animation: blink 0.7s ease infinite; }

.finalist-you-row {
  background: rgba(5,150,105,0.07); border: 1.5px solid rgba(5,150,105,0.18);
  border-radius: var(--rad-xs); padding: 11px 16px;
  font-size: 0.83rem; font-weight: 800; color: var(--emerald);
  margin-bottom: 15px;
}

.bid-form { display: flex; gap: 10px; margin-bottom: 11px; }
.bid-input {
  flex: 1; background: #fff; border: 1.5px solid var(--b2);
  border-radius: var(--rad-xs); padding: 12px 14px;
  font-size: 1rem; font-weight: 700; color: var(--t);
  transition: border-color 0.18s;
}
.bid-input:focus { outline: none; border-color: var(--cyan2); box-shadow: var(--glow-cyan); }
.bid-hint { font-size: 0.72rem; color: var(--t3); }

.not-finalist {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 13px 16px;
  font-size: 0.84rem; color: var(--t2);
}

/* Center cards */
.center-card { text-align: center; }
.big-anim { font-size: 3rem; margin-bottom: 16px; animation: float-step 3s ease-in-out infinite; }
.center-title { font-size: 1.3rem; font-weight: 800; color: var(--t); margin-bottom: 9px; }
.center-sub { font-size: 0.9rem; color: var(--t3); }

/* Winner card */
.winner-card { text-align: center; background: linear-gradient(135deg, #ECFDF5, #F0FDF4); border-color: rgba(5,150,105,0.22); }
.winner-burst { font-size: 3.6rem; margin-bottom: 14px; animation: float-step 3s ease-in-out infinite; }
.winner-title { font-family: 'Space Grotesk'; font-size: 1.45rem; font-weight: 900; color: var(--t); margin-bottom: 9px; }
.winner-price { font-family: 'Space Grotesk'; font-size: 2.5rem; font-weight: 900; color: var(--emerald); margin-bottom: 9px; }
.winner-sub { font-size: 0.9rem; color: var(--t3); }

/* Entry block */
.entry-block { margin-top: 0; }
.entry-my-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; font-size: 0.85rem; color: var(--t2); font-weight: 600;
}
.my-num {
  font-family: 'Space Grotesk'; font-size: 1.2rem; font-weight: 900; color: var(--t);
}
.finalist-chip {
  background: rgba(5,150,105,0.1); color: var(--emerald);
  border: 1px solid rgba(5,150,105,0.2);
  font-size: 0.67rem; font-weight: 800; border-radius: var(--pill); padding: 2px 11px;
}
.qty-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 11px;
}
.qty-btn {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 13px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: all 0.2s; cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.qty-btn:hover {
  border-color: var(--cyan2); background: rgba(6,182,212,0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.qty-n { font-size: 0.94rem; font-weight: 800; color: var(--t); }
.qty-p { font-size: 0.78rem; font-weight: 700; color: var(--cyan); }
.qty-xrp { font-size: 0.62rem; color: var(--t3); }
.custom-row { display: flex; gap: 8px; margin-bottom: 11px; }
.custom-inp {
  flex: 1; background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 10px 14px;
  font-size: 0.88rem; color: var(--t);
  transition: border-color 0.18s;
}
.custom-inp:focus { outline: none; border-color: var(--cyan2); box-shadow: var(--glow-cyan); }
.cap-note { font-size: 0.72rem; color: var(--amber); font-weight: 600; }
.urgency-bar {
  background: rgba(220,38,38,0.07); border: 1.5px solid rgba(220,38,38,0.18);
  border-radius: var(--rad-xs); padding: 9px 14px;
  font-size: 0.8rem; color: var(--red); font-weight: 800;
  text-align: center;
}

/* Sign-in block */
.signin-block {
  text-align: center; padding: 22px;
  background: var(--bg5); border: 1.5px solid rgba(109,40,217,0.14);
  border-radius: var(--rad-sm);
}
.signin-block p { color: var(--t2); margin-bottom: 14px; font-size: 0.9rem; }

/* Sidebar */
.sidebar-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.sc-title {
  font-size: 0.82rem; font-weight: 800; color: var(--t);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.sc-sub { font-size: 0.7rem; color: var(--t3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.sc-empty { font-size: 0.8rem; color: var(--t3); text-align: center; padding: 10px 0; }

/* Leaderboard */
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--b1);
  font-size: 0.82rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.t5 { background: rgba(8,145,178,0.04); border-radius: var(--rad-xs); padding: 8px; margin: -4px; }
.lb-r  { width: 20px; text-align: center; font-weight: 800; color: var(--t3); font-size: 0.7rem; }
.lb-n  { flex: 1; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-e  { font-weight: 800; color: var(--cyan); font-size: 0.78rem; }
.lb-s  { font-size: 0.7rem; }

/* Finalists */
.finalist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--b1);
}
.finalist-row.me { background: rgba(5,150,105,0.05); border-radius: var(--rad-xs); padding: 8px; }
.medal { font-size: 1rem; flex-shrink: 0; }
.fi { flex: 1; }
.fi-name { display: block; font-size: 0.83rem; font-weight: 700; color: var(--t); }
.fi-ent  { font-size: 0.68rem; color: var(--t3); }
.you-tag {
  font-size: 0.62rem; font-weight: 800; color: var(--emerald);
  background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--pill); padding: 2px 9px;
}

/* Bid history */
.bid-list { display: flex; flex-direction: column; gap: 6px; }
.bid-row-i {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--rad-xs);
  font-size: 0.82rem; background: var(--bg2);
}
.bid-row-i.top { background: rgba(8,145,178,0.06); border: 1px solid rgba(8,145,178,0.14); }
.bid-ri { width: 18px; text-align: center; font-weight: 700; color: var(--t3); font-size: 0.7rem; }
.bid-rn { flex: 1; font-weight: 600; color: var(--t); font-size: 0.82rem; }
.bid-ra { font-weight: 800; font-size: 0.85rem; color: var(--t2); }
.bid-ra.gold { color: var(--amber); }

/* How It Works sidebar rows */
.hiw-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid var(--b1);
  font-size: 0.82rem; color: var(--t2);
}
.hiw-row:last-child { border-bottom: none; }
.hiw-row > span:first-child { flex-shrink: 0; }

/* Mobile bar */
.mob-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: rgba(255,255,255,0.98); border-top: 1px solid var(--b1);
  padding: 12px 16px 16px; backdrop-filter: blur(16px);
  box-shadow: 0 -6px 24px rgba(15,23,42,0.1);
  display: none;
}
@media (max-width: 900px) { .mob-bar { display: block; } }
.mob-qty-row { display: flex; gap: 8px; }
.mob-qty {
  flex: 1; background: var(--bg2); border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 12px 6px;
  font-size: 0.85rem; font-weight: 700; color: var(--t);
  transition: all 0.18s;
}
.mob-qty:hover { border-color: var(--cyan2); background: rgba(6,182,212,0.04); }
.mob-bid-row { display: flex; gap: 10px; }
.mob-cd-row {
  text-align: center; font-size: 0.78rem; color: var(--t3);
  margin-bottom: 8px; letter-spacing: 0.02em;
}
.mob-cd-row b { color: var(--t); font-weight: 700; }
.mob-cd-row b.urgent { color: var(--red); animation: blink 0.7s ease infinite; }

/* ══════════════════════════════════════════════════════════════════
   QR MODAL
══════════════════════════════════════════════════════════════════ */
#qr-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,23,42,0.68); backdrop-filter: blur(10px);
  align-items: center; justify-content: center; padding: 20px;
}
.qr-box {
  background: #fff; border-radius: var(--rad-lg);
  padding: 36px 30px; max-width: 390px; width: 100%;
  box-shadow: var(--shadow-2xl);
  text-align: center; display: flex; flex-direction: column; gap: 16px;
}
.qr-title { font-family: 'Space Grotesk'; font-size: 1.18rem; font-weight: 900; color: var(--t); }
.qr-sub { font-size: 0.85rem; color: var(--t3); }
.qr-img { width: 200px; height: 200px; margin: 0 auto; border-radius: var(--rad-sm); border: 2px solid var(--b1); }
.qr-cancel {
  background: transparent; border: none; color: var(--t3);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: color 0.18s; padding: 4px;
}
.qr-cancel:hover { color: var(--red); }

/* ══════════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════════ */
.toast {
  background: var(--t); color: #fff;
  border-radius: var(--rad-sm); padding: 13px 20px;
  font-size: 0.85rem; font-weight: 600;
  box-shadow: var(--shadow-xl);
  animation: slide-in 0.3s ease;
  transition: opacity 0.4s; max-width: 320px;
  border-left: 4px solid var(--cyan2);
}
.toast.success { border-left-color: var(--emerald); }
.toast.error   { border-left-color: var(--red2); background: #FFF1F2; color: var(--t); }
.toast.info    { border-left-color: var(--violet); }
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9998;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   SELLER CTA / PROMO BANNER
══════════════════════════════════════════════════════════════════ */
.seller-cta-section {
  background: linear-gradient(150deg, #EEF2FF 0%, #F0F9FF 50%, #ECFDF5 100%);
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  padding: 64px 28px; text-align: center;
  position: relative; overflow: hidden;
}
.seller-cta-section::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(8,145,178,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.seller-cta-eyebrow {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 18px; display: block;
}
.seller-cta-title {
  font-family: 'Space Grotesk'; font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 900; color: var(--t); margin-bottom: 16px; letter-spacing: -0.5px;
  line-height: 1.18;
}
.seller-cta-sub {
  font-size: 1rem; color: var(--t3); margin-bottom: 32px; max-width: 500px;
  margin-left: auto; margin-right: auto; line-height: 1.65;
}
.seller-cta-stats {
  display: flex; gap: 44px; justify-content: center; flex-wrap: wrap;
  margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--b1);
  position: relative; z-index: 1;
}
.scs-item { text-align: center; }
.scs-val {
  display: block; font-family: 'Space Grotesk'; font-size: 1.7rem; font-weight: 900;
  color: var(--cyan); margin-bottom: 4px;
}
.scs-lbl { font-size: 0.72rem; color: var(--t3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN
══════════════════════════════════════════════════════════════════ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.admin-header { margin-bottom: 28px; }
.admin-title { font-size: 1.55rem; font-weight: 900; color: var(--t); font-family: 'Space Grotesk'; }
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-bottom: 28px;
}
.admin-stat-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.admin-stat-label { font-size: 0.72rem; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.admin-stat-value { font-family: 'Space Grotesk'; font-size: 2rem; font-weight: 900; color: var(--t); }
.admin-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 26px; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.admin-card h2 { font-size: 1.1rem; font-weight: 800; color: var(--t); margin-bottom: 20px; }
.admin-form { display: grid; gap: 14px; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 0.78rem; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: 0.05em; }
.form-input, .form-select, .form-textarea {
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b1); border-radius: var(--rad-xs);
  padding: 11px 14px; font-size: 0.88rem;
  transition: border-color 0.18s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--cyan2); box-shadow: var(--glow-cyan);
}
.form-textarea { resize: vertical; min-height: 80px; }
.admin-auction-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px; border: 1.5px solid var(--b1); border-radius: var(--rad-xs);
  margin-bottom: 10px; background: var(--bg);
  flex-wrap: wrap; gap: 10px;
}
.admin-auction-row:hover { background: var(--bg2); }
.aar-title { font-weight: 700; color: var(--t); font-size: 0.9rem; flex: 1; }
.aar-status { font-size: 0.7rem; }
.aar-actions { display: flex; gap: 8px; }
.btn-admin-sm {
  background: var(--bg2); color: var(--t); border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 6px 14px;
  font-size: 0.75rem; font-weight: 700;
  transition: all 0.18s; cursor: pointer;
}
.btn-admin-sm:hover { background: var(--grd-brand); color: #fff; border-color: transparent; }
.btn-admin-sm.danger:hover { background: var(--red2); }
.admin-badge-nav { font-size: 0.58rem; background: var(--grd-brand); color: #fff; border-radius: 4px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; font-weight: 900; }
.admin-token-input {
  width: 100%; background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs); padding: 12px 16px;
  font-size: 0.9rem; margin-bottom: 12px; color: var(--t);
}
.admin-token-input:focus { outline: none; border-color: var(--cyan2); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first tweaks
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-right { order: -1; }
  .hero-prod-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-prod-card--featured {
    grid-column: auto;
    flex-direction: column;
  }
  .hero-prod-card--featured .hero-prod-img-wrap {
    width: 100%; height: 100px;
    border-right: none; border-bottom: 1px solid var(--b1);
  }
  .hero-left { text-align: center; }
  .hero-eyebrow { margin: 0 auto 22px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta-row { justify-content: center; }
  .hero-stats { margin: 0 auto; }
}

@media (max-width: 768px) {
  .nav-inner { padding: 0 14px; gap: 10px; height: 58px; }
  .nav-search { display: none; }
  .hero { padding: 40px 18px 44px; }
  .hero-title { font-size: 2.2rem; letter-spacing: -1.5px; }
  .hero-prod-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-prod-card--featured { grid-column: 1 / -1; }
  .hero-prod-card--featured .hero-prod-img-wrap { height: 110px; }
  .hero-stats { padding: 14px 20px; flex-wrap: wrap; gap: 0; }
  .hero-stat { padding: 0 14px; }
  .hs-val { font-size: 1.5rem; }
  .section-inner { padding: 0 18px; }
  .section { padding: 44px 0; }
  .cat-tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .auction-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .won-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .sellers-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .detail-wrap { padding: 18px 18px 110px; }
  .section-title { font-size: 1.25rem; }
  .hiw-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-inner { gap: 18px; }
  .trust-item { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .hero { padding: 44px 14px 44px; }
  .hero-title { font-size: 1.9rem; letter-spacing: -1px; }
  .hero-stats { padding: 14px 14px; gap: 0; }
  .hero-stat { padding: 0 12px; }
  .hs-val { font-size: 1.35rem; }
  .hs-div { height: 32px; }
  .auction-grid { grid-template-columns: 1fr; }
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  .won-grid { grid-template-columns: 1fr; }
  .sellers-row { grid-template-columns: repeat(2, 1fr); }
  .hiw-grid { grid-template-columns: 1fr; }
  .section-title { font-size: 1.15rem; }
  .bid-stats-row { grid-template-columns: 1fr; }
  .detail-wrap { padding: 14px 14px 110px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn-primary, .hero-cta-row .btn-secondary { justify-content: center; }
}

/* ── w-full utility ── */
.w-full { width: 100%; display: block; }

/* ================================================================
   Sertrus2 v3 — Phased Auction System Styles
   ================================================================ */

/* ── Admin Table ─────────────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.admin-table th {
  background: var(--bg2);
  padding: 10px 12px;
  text-align: left;
  font-size: .7rem;
  font-weight: 800;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--b1);
  vertical-align: middle;
  color: var(--t);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg2); }
.admin-row-risk td { background: rgba(239,68,68,.04); }
.admin-row-risk:hover td { background: rgba(239,68,68,.08); }

/* ── Admin Stats Bar ─────────────────────────────────────────── */
.admin-stats-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.admin-stat-box {
  flex: 1;
  min-width: 110px;
  background: var(--surface);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.admin-stat-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.admin-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--t);
  line-height: 1;
}

/* ── Admin Tabs ──────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg2);
  padding: 4px;
  border-radius: var(--rad);
  flex-wrap: wrap;
}
.admin-tab {
  padding: 8px 16px;
  border-radius: calc(var(--rad) - 2px);
  font-size: .8rem;
  font-weight: 700;
  color: var(--t2);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.admin-tab:hover { background: var(--surface); color: var(--t); }
.admin-tab.active {
  background: var(--surface);
  color: var(--cyan2);
  box-shadow: var(--shadow-xs);
}
.admin-tab-panel { display: block; }

/* ── Mini Progress Bar ───────────────────────────────────────── */
.mini-progress {
  height: 4px;
  background: var(--b1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 2px;
}
.mini-progress.large { height: 8px; }
.mini-progress > div {
  height: 100%;
  border-radius: 99px;
  background: var(--cyan2);
  transition: width .4s ease;
}

/* ── Phase Badge ─────────────────────────────────────────────── */
.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.phase-entry   { background: rgba(6,182,212,.12);  color: #0891B2; border: 1px solid rgba(6,182,212,.25); }
.phase-bidding { background: rgba(239,68,68,.12);  color: #DC2626; border: 1px solid rgba(239,68,68,.25); }
.phase-pending { background: rgba(245,158,11,.12); color: #D97706; border: 1px solid rgba(245,158,11,.25); }
.phase-sold    { background: rgba(5,150,105,.12);  color: #059669; border: 1px solid rgba(5,150,105,.25); }
.phase-expired { background: rgba(100,116,139,.1); color: #64748B; border: 1px solid rgba(100,116,139,.2); }

/* ── Status Badge ────────────────────────────────────────────── */
.status-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.status-pending    { background: rgba(245,158,11,.12); color: #D97706; }
.status-processing { background: rgba(6,182,212,.12);  color: #0891B2; }
.status-complete   { background: rgba(5,150,105,.12);  color: #059669; }
.status-failed     { background: rgba(239,68,68,.12);  color: #DC2626; }

/* ── Risk Badge ──────────────────────────────────────────────── */
.risk-badge { display: inline-block; font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; }
.risk-low    { background: rgba(245,158,11,.12); color: #D97706; }
.risk-medium { background: rgba(234,88,12,.12);  color: #EA580C; }
.risk-high   { background: rgba(239,68,68,.12);  color: #DC2626; }

/* ── Seller Stat Row ─────────────────────────────────────────── */
.seller-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--b1);
  font-size: .83rem;
}
.seller-stat-row:last-child { border-bottom: none; }
.seller-stat-row > span:first-child { color: var(--t3); font-weight: 600; }
.seller-stat-row > span:last-child  { color: var(--t);  font-weight: 700; text-align: right; }

/* ── Phase Tracker Seller ────────────────────────────────────── */
.phase-tracker-seller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pts-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pts-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: var(--surface);
  color: var(--t3);
  font-weight: 800;
  transition: all .2s;
}
.pts-label { font-size: .68rem; font-weight: 700; color: var(--t3); text-align: center; white-space: nowrap; }
.pts-connector { flex: 1; min-width: 32px; max-width: 72px; height: 2px; background: var(--b2); margin: 0 4px; margin-bottom: 22px; }
.pts-done .pts-icon  { background: var(--emr); border-color: var(--emr); color: #fff; }
.pts-done .pts-label { color: var(--emr); }
.pts-done + .pts-connector { background: var(--emr); }
.pts-active .pts-icon  { background: var(--cyan2); border-color: var(--cyan2); color: #fff; box-shadow: 0 0 0 4px rgba(6,182,212,.2); }
.pts-active .pts-label { color: var(--cyan2); font-weight: 900; }

/* ── Phase Timeline ──────────────────────────────────────────── */
.phase-timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-left: 2px solid var(--b1);
  margin-left: 10px;
  padding-left: 20px;
  position: relative;
}
.timeline-dot {
  position: absolute;
  left: -7px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan2);
  border: 2px solid var(--surface);
}
.timeline-body { flex: 1; }

/* ── Seller Dashboard Forms ──────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .78rem; font-weight: 700; color: var(--t2); }
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs);
  background: var(--surface);
  color: var(--t);
  font-size: .88rem;
  font-family: inherit;
  transition: border-color .15s;
  outline: none;
}
.form-input:focus { border-color: var(--cyan2); }
.form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs);
  background: var(--surface);
  color: var(--t);
  font-size: .88rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.form-select:focus { border-color: var(--cyan2); }
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs);
  background: var(--surface);
  color: var(--t);
  font-size: .88rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 72px;
}
.form-textarea:focus { border-color: var(--cyan2); }
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .admin-row { grid-template-columns: 1fr; } }

/* ── Delivery Modal ──────────────────────────────────────────── */
#delivery-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; align-items: center; justify-content: center; }
#delivery-modal > div { max-height: 90vh; overflow-y: auto; }


/* ================================================================
   LEGAL / TRUST CONTENT SYSTEM CSS
   ================================================================ */

/* ── Legal page wrapper ───────────────────────────────────────── */
.legal-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  min-height: 80vh;
}

/* ── Legal layout (sidebar + main) ──────────────────────────────── */
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar { display: none; }
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.legal-sidebar {
  background: var(--card-bg, #1a1d2e);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem;
  position: sticky;
  top: 80px;
}
.legal-sidebar-header {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.legal-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.legal-sidebar-link {
  display: block;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid transparent;
}
.legal-sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.legal-sidebar-link.active {
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.3);
  color: #60a5fa;
  font-weight: 600;
}
.legal-sidebar-support {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
  opacity: .6;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.legal-sidebar-support a { color: #60a5fa; }

/* ── Main article area ────────────────────────────────────────── */
.legal-main {
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
}
.legal-meta-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--b1);
  flex-wrap: wrap;
}
.legal-version-badge {
  background: rgba(8,145,178,0.1);
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 6px;
}
.legal-effective {
  font-size: .8rem;
  opacity: .6;
}
.legal-back {
  margin-left: auto;
}

/* ── Prose styles for rendered markdown ──────────────────────── */
.legal-article.prose {
  color: var(--t2);
  line-height: 1.75;
  font-size: .95rem;
}
.legal-article.prose h1 {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 1rem;
  line-height: 1.3;
}
.legal-article.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cyan);
  margin: 1.75rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--b1);
}
.legal-article.prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--violet);
  margin: 1.25rem 0 .5rem;
}
.legal-article.prose p {
  margin: 0 0 1rem;
}
.legal-article.prose ul, .legal-article.prose ol {
  margin: .5rem 0 1rem 1.5rem;
}
.legal-article.prose li { margin-bottom: .3rem; }
.legal-article.prose strong { color: var(--t); font-weight: 700; }
.legal-article.prose em { color: var(--violet); }
.legal-article.prose code {
  background: var(--bg2);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: .88em; color: var(--cyan);
}
.legal-article.prose pre {
  background: var(--bg2);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}
.legal-article.prose a { color: var(--cyan); text-decoration: underline; }
.legal-article.prose hr {
  border: none;
  border-top: 1px solid var(--b1);
  margin: 1.5rem 0;
}
.legal-article.prose blockquote {
  border-left: 3px solid var(--cyan);
  padding-left: 1rem;
  color: var(--t3);
  margin: 1rem 0;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .875rem;
}
.legal-table td, .legal-table th {
  padding: .5rem .75rem;
  border: 1px solid var(--b1);
  text-align: left;
}
.legal-table th { background: var(--bg2); font-weight: 700; }
.legal-table tr:nth-child(even) td { background: var(--bg); }

.legal-article-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--b1);
  font-size: .85rem;
  color: var(--t3);
}
.legal-version-info { font-size: .8rem; margin-top: .25rem; }

/* ── Legal index page ────────────────────────────────────────── */
.legal-index-header {
  text-align: center;
  padding: 2rem 0 3rem;
}
.legal-index-header i {
  font-size: 2.5rem;
  opacity: .4;
  display: block;
  margin-bottom: 1rem;
}
.legal-index-header h1 {
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.legal-index-header p {
  opacity: .6;
  font-size: 1.05rem;
}
.legal-index-grid {
  display: grid;
  gap: 1.5rem;
}
.legal-group {
  background: var(--card-bg, #1a1d2e);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 1.5rem;
}
.legal-group-title {
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .5;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.legal-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}
.legal-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: all .15s;
  display: block;
}
.legal-card:hover {
  background: rgba(96,165,250,.1);
  border-color: rgba(96,165,250,.3);
  transform: translateY(-1px);
}
.legal-card-title {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .25rem;
}
.legal-card-meta {
  font-size: .75rem;
  opacity: .5;
}
.legal-support-banner {
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.2);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  margin-top: 1.5rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.legal-support-banner a { color: #60a5fa; }
.legal-not-found {
  text-align: center;
  padding: 4rem 2rem;
  opacity: .6;
}
.legal-not-found h2 { font-size: 1.5rem; margin: 1rem 0 .5rem; }

/* ── Site Footer ──────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   SITE FOOTER — full rewrite, light theme, mobile-first
══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: #F1F5F9;
  border-top: 1px solid #E2E8F0;
  margin-top: 3rem;
  color: #0F172A;
}
/* ── Inner wrapper ── */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
}
/* ── Brand column ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0F172A;
}
.footer-tagline {
  font-size: 0.8rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}
.footer-support {
  font-size: 0.8rem;
  color: #64748B;
  margin: 0;
}
.footer-support a {
  color: #0891B2;
  text-decoration: none;
}
.footer-support a:hover { color: #06B6D4; text-decoration: underline; }

/* ── Links area — 3 equal columns ── */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 16px;
}
/* ── Single column ── */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-col-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94A3B8;
  margin-bottom: 10px;
}
.footer-col a {
  font-size: 0.83rem;
  color: #334155;
  cursor: pointer;
  transition: color 0.14s;
  line-height: 1;
  padding: 5px 0;
  display: block;
  text-decoration: none;
}
.footer-col a:hover { color: #0891B2; }

/* ── Bottom bar ── */
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 32px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94A3B8;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom-links {
  display: flex;
  gap: 16px;
}
.footer-bottom-links a {
  cursor: pointer;
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.14s;
}
.footer-bottom-links a:hover { color: #0891B2; }

/* ── Desktop responsive tweaks ── */
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 36px 24px 20px;
  }
}
@media (max-width: 768px) {
  .site-footer {
    margin-bottom: calc(62px + env(safe-area-inset-bottom));
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 16px 20px;
  }
  .footer-brand { gap: 6px; }
  .footer-logo { font-size: 1.1rem; }
  .footer-tagline, .footer-support { font-size: 0.76rem; }
  .footer-links {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 10px;
  }
  .footer-col-title { font-size: 0.62rem; margin-bottom: 8px; }
  .footer-col a { font-size: 0.76rem; padding: 4px 0; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 16px;
    gap: 6px;
    font-size: 0.7rem;
  }
  .footer-bottom-links { justify-content: center; gap: 12px; }
}
@media (max-width: 400px) {
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-col:last-child { grid-column: 1 / -1; }
}

/* ── Consent checkboxes ──────────────────────────────────────── */
.consent-block {
  background: rgba(96,165,250,.06);
  border: 1px solid rgba(96,165,250,.2);
  border-radius: 10px;
  padding: 1rem;
  margin-top: .75rem;
}
.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
}
.consent-checkbox-row input[type="checkbox"] {
  margin-top: .2rem;
  accent-color: #60a5fa;
  flex-shrink: 0;
}
.consent-label {
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255,255,255,.8);
}
.consent-link {
  color: #60a5fa;
  text-decoration: underline;
  cursor: pointer;
}
.consent-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.consent-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .25rem .7rem;
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: all .15s;
}
.consent-pill:hover {
  background: rgba(96,165,250,.15);
  border-color: rgba(96,165,250,.4);
  color: #60a5fa;
}

/* ── Admin Legal Editor ──────────────────────────────────────── */
.admin-legal-wrap { padding: .5rem; }
.admin-legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.admin-legal-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.admin-legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.25rem;
  min-height: 500px;
}
@media (max-width: 900px) {
  .admin-legal-layout { grid-template-columns: 1fr; }
}
.admin-legal-list {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
}
.admin-legal-list-item {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: background .15s;
}
.admin-legal-list-item:hover { background: rgba(255,255,255,.04); }
.admin-legal-list-item.active { background: rgba(96,165,250,.1); border-left: 3px solid #60a5fa; }
.alp-slug { font-size: .7rem; font-family: monospace; opacity: .5; margin-bottom: .15rem; }
.alp-title { font-size: .875rem; font-weight: 600; margin-bottom: .3rem; }
.alp-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-legal-editor {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 1.25rem;
  min-height: 300px;
}
.legal-editor-form {}
.legal-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-wrap: wrap;
  gap: .5rem;
}
.legal-editor-info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.legal-editor-actions { display: flex; gap: .5rem; }
.badge-footer {
  background: rgba(34,197,94,.15);
  color: #4ade80;
  font-size: .7rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  font-weight: 700;
}
.badge-active {
  background: rgba(34,197,94,.15);
  color: #4ade80;
  font-size: .7rem;
  padding: .2rem .5rem;
  border-radius: 4px;
}
.badge-inactive {
  background: rgba(239,68,68,.15);
  color: #f87171;
  font-size: .7rem;
  padding: .2rem .5rem;
  border-radius: 4px;
}
.version-badge {
  background: rgba(96,165,250,.15);
  color: #60a5fa;
  font-size: .7rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  font-weight: 700;
}
.legal-editor-md-wrap { margin-top: .75rem; }
.legal-editor-tabs {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
}
.le-tab {
  padding: .35rem .75rem;
  border-radius: 6px 6px 0 0;
  font-size: .8rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .15s;
}
.le-tab.active {
  background: rgba(96,165,250,.15);
  border-color: rgba(96,165,250,.3);
  color: #60a5fa;
  font-weight: 600;
}
.legal-md-textarea {
  font-family: 'Courier New', monospace;
  font-size: .8rem;
  line-height: 1.6;
  resize: vertical;
  border-radius: 0 6px 6px 6px;
}
.markdown-hint {
  display: inline-block;
  font-size: .75rem;
  opacity: .5;
  font-weight: 400;
  margin-left: .5rem;
}

/* ── Auction Disclosures ─────────────────────────────────────── */
.auction-disclosures {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  margin-top: 1rem;
  overflow: hidden;
}
.disclosures-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .875rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  transition: background .15s;
  user-select: none;
}
.disclosures-header:hover { background: rgba(255,255,255,.03); }
.disc-chevron { transition: transform .2s; }
.rotate-180 { transform: rotate(180deg); }
.disclosures-body { padding: 1rem; }
.disclosure-item {
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.disclosure-item:last-child { border-bottom: none; }
.disclosure-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .5;
  margin-bottom: .3rem;
}
.disclosure-text { font-size: .875rem; line-height: 1.5; }
.disclosure-legal-links {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .8rem;
  opacity: .6;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
}
.disclosure-legal-links a { color: #60a5fa; cursor: pointer; }
.disclosure-editor {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 1.25rem;
}
.disclosure-header {
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.required-badge {
  background: rgba(239,68,68,.12);
  color: #f87171;
  font-size: .65rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  font-weight: 700;
  margin-left: .35rem;
}
.optional-badge {
  background: rgba(156,163,175,.1);
  color: #9ca3af;
  font-size: .65rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  margin-left: .35rem;
}
.field-hint {
  display: block;
  font-size: .75rem;
  opacity: .4;
  margin-top: .25rem;
}

/* ── Modal overlay ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: 14px;
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--b1);
  font-weight: 700;
}
.modal-header button {
  background: transparent;
  border: none;
  color: var(--t3);
  font-size: 1.25rem;
  cursor: pointer;
  padding: .25rem;
}
.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}


/* ================================================================
   SERTRUS2 — MOBILE-FIRST APP LAYER  v1
   Stable layout · Touch-first · Zero CLS · App-like polish
   Builds ON TOP of existing desktop styles without breaking them
   ================================================================ */

/* ── Mobile spacing / sizing tokens ─────────────────────────────── */
:root {
  --mob-nav-h:    56px;   /* top navbar height on mobile   */
  --mob-bot-h:    62px;   /* bottom nav height             */
  --mob-pad:      16px;   /* standard mobile padding       */
  --mob-pad-lg:   20px;
  --mob-card-img: 56%;    /* aspect-ratio lock for cards   */
  --mob-radius:   14px;
  --mob-trans:    0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ================================================================
   SECTION 1 — TOP NAVBAR  (mobile compact header)
================================================================ */
@media (max-width: 768px) {
  .navbar {
    position: sticky; top: 0; z-index: 300;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--b1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .nav-inner {
    height: var(--mob-nav-h);
    padding: 0 var(--mob-pad);
    gap: 8px;
  }
  /* Hide search bar on mobile — reserved for future search page */
  .nav-search { display: none !important; }

  /* Compact logo */
  .nav-logo { font-size: 1.3rem; }

  /* Right side: only show wallet/connect + hamburger-style pill */
  .nav-right { gap: 8px; }
  .nav-btn[style*="opacity:.7"] { display: none; } /* hide Policies link in nav */

  /* Wallet pill compact */
  .nav-wallet {
    font-size: 0.7rem;
    padding: 5px 10px;
    max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Sell / Sign-in button */
  .nav-btn {
    padding: 7px 12px;
    font-size: 0.78rem;
  }
  .nav-btn.primary {
    background: var(--grd-brand); color: #fff;
    border-color: transparent;
    padding: 7px 14px;
  }

  /* Category nav bar — horizontal scroll, no wrap, compact */
  .cat-nav-bar {
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--b1);
    background: #fff;
  }
  .cat-nav-bar::-webkit-scrollbar { display: none; }
  .cat-nav-inner {
    display: flex; gap: 0;
    padding: 0 var(--mob-pad);
    white-space: nowrap;
  }
  .cat-nav-link {
    padding: 8px 14px;
    font-size: 0.72rem;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
  }
  .cat-nav-link.active, .cat-nav-link:active {
    border-bottom-color: var(--cyan2);
    color: var(--cyan);
  }

  /* Ticker bar — compress */
  .ticker-bar {
    padding: 6px var(--mob-pad);
    font-size: 0.72rem;
  }
  .ticker-label { font-size: 0.6rem; }

  /* Trust bar — compact single line scroll */
  .trust-bar {
    padding: 8px 0;
    overflow-x: auto; scrollbar-width: none;
  }
  .trust-bar::-webkit-scrollbar { display: none; }
  .trust-inner {
    gap: 20px;
    padding: 0 var(--mob-pad);
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .trust-item {
    font-size: 0.68rem;
    flex-shrink: 0;
  }
}

/* ================================================================
   SECTION 2 — HERO (mobile app-style)
================================================================ */
@media (max-width: 768px) {
  .hero {
    padding: 28px var(--mob-pad) 32px;
    /* Remove large gradient bg on mobile — keep light */
    background: linear-gradient(160deg, #EEF2FF 0%, #F8FAFC 70%);
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  /* Eyebrow pill */
  .hero-eyebrow {
    font-size: 0.65rem;
    padding: 5px 14px;
    margin: 0 auto 14px;
    display: inline-flex;
  }
  /* Title — tight, readable */
  .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: -1.5px;
    line-height: 1.12;
    margin-bottom: 12px;
  }
  /* Subtitle — smaller, controlled */
  .hero-sub {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--t2);
    margin-bottom: 20px;
    max-width: 320px;
    margin-left: auto; margin-right: auto;
  }
  /* CTA row — stacked, full-width */
  .hero-cta-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    max-width: 320px;
    margin: 0 auto 20px;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-secondary {
    justify-content: center;
    min-height: 46px;
    font-size: 0.9rem;
    border-radius: var(--rad-sm);
  }
  /* Stats strip — scrollable pills row */
  .hero-stats {
    gap: 0;
    padding: 12px var(--mob-pad);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    max-width: none;
    border-radius: var(--rad-sm);
    margin: 0;
  }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stat {
    flex-shrink: 0;
    padding: 0 14px;
  }
  .hs-val { font-size: 1.25rem; }
  .hs-lbl { font-size: 0.6rem; }
  .hs-div { height: 28px; }

  /* Hide the hero-right product grid on mobile — adds clutter */
  .hero-right { display: none; }
}

/* ================================================================
   SECTION 3 — SWIPEABLE CARD CAROUSEL (Big Cards)
================================================================ */
@media (max-width: 768px) {
  /* Horizontal scroll container gets proper snap + padding */
  .h-scroll {
    gap: 14px;
    padding: 6px var(--mob-pad) 16px;
    scroll-padding-left: var(--mob-pad);
    /* momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* Big card — fixed mobile width */
  .big-card {
    flex: 0 0 240px;
    width: 240px;
    border-radius: var(--mob-radius);
    /* NO transform hover on mobile — reduce jank */
    transition: box-shadow var(--mob-trans);
  }
  /* Fixed image height — prevents reflow */
  .big-card-img-wrap {
    height: 160px; /* fixed, no CLS */
  }
  /* Title: clamp to 2 lines */
  .big-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-size: 0.87rem;
    line-height: 1.3;
    min-height: 2.6em; /* reserve space for 2 lines always */
  }
  /* No hover lift on touch */
  @media (hover: none) {
    .big-card:hover {
      transform: none;
      box-shadow: var(--shadow-sm);
    }
  }
}

/* ================================================================
   SECTION 4 — STANDARD AUCTION GRID (fixed card system)
================================================================ */
@media (max-width: 768px) {
  /* Single column on mobile, side padding */
  .auction-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 var(--mob-pad);
  }

  /* Fixed-structure card */
  .auction-card {
    border-radius: var(--mob-radius);
    display: flex;
    flex-direction: row;       /* side-by-side on mobile */
    height: 100px;             /* fixed height — zero CLS */
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--mob-trans);
  }
  /* No lift hover on touch */
  @media (hover: none) {
    .auction-card:hover {
      transform: none;
      box-shadow: var(--shadow-xs);
      border-color: var(--b1);
    }
  }

  /* LEFT: square image column */
  .card-img-wrap {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;             /* exact square */
    padding-top: 0;            /* override the % padding trick */
    position: relative;
    overflow: hidden;
    background: var(--bg2);
  }

  /* RIGHT: content column */
  .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    min-width: 0; /* prevent overflow */
  }

  /* Title: 2-line clamp */
  .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    min-height: 2.15em; /* always reserve 2 lines */
    color: var(--t);
  }

  /* Pool row compact */
  .pool-row-sm {
    font-size: 0.68rem;
    color: var(--t3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
  }
  .pool-pct {
    font-weight: 700;
    color: var(--cyan);
    font-size: 0.68rem;
    flex-shrink: 0;
  }
  .pool-track-sm {
    height: 3px;
    background: var(--bg3);
    border-radius: 99px;
    overflow: hidden;
    margin: 4px 0;
  }
  .pool-fill-sm {
    height: 100%;
    background: var(--grd-cyan);
    border-radius: 99px;
    transition: width 0.35s ease;
  }

  /* Footer row: entries + CTA pinned to bottom */
  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border-top: none;
    margin-top: auto;
  }
  .entry-cnt {
    font-size: 0.65rem;
    color: var(--t3);
  }
  .card-cta-lnk {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--cyan);
    padding: 4px 10px;
    background: rgba(8,145,178,0.08);
    border-radius: var(--pill);
    white-space: nowrap;
    min-height: 26px;
    display: flex; align-items: center;
  }

  /* Sold text compact */
  .sold-txt {
    font-size: 0.68rem;
    color: var(--emerald);
    font-weight: 700;
  }

  /* Bidding row compact */
  .bidding-row-sm {
    font-size: 0.68rem;
    display: flex; align-items: center; gap: 5px;
    color: var(--red2); font-weight: 700;
  }
  .live-pulse-sm {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--red2);
    animation: blink 0.85s ease infinite;
    flex-shrink: 0;
  }

  /* Overlay badges — hide hover CTA on mobile */
  .card-hover-cta { display: none !important; }

  /* Image chips remain visible */
  .card-cat-chip {
    top: 6px; right: 6px;
    font-size: 0.6rem;
    padding: 2px 7px;
  }
  .card-phase-chip {
    bottom: 6px; right: 6px;
    font-size: 0.57rem;
    padding: 2px 7px;
  }
  .img-badge {
    top: 6px; left: 6px;
    font-size: 0.57rem;
    padding: 2px 8px;
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .auction-card { height: 92px; }
  .card-img-wrap { flex: 0 0 92px; width: 92px; height: 92px; }
  .card-title { font-size: 0.78rem; }
}

/* ================================================================
   SECTION 5 — BOTTOM NAV BAR (sticky mobile navigation)
================================================================ */
.mob-bottom-nav {
  display: none; /* hidden by default on desktop */
}
@media (max-width: 768px) {
  .mob-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--mob-bot-h);
    background: rgba(255,255,255,0.98);
    border-top: 1px solid var(--b1);
    z-index: 500;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-items: stretch;
    /* safe area for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border: none;
    background: transparent;
    padding: 6px 4px;
    transition: color var(--mob-trans);
    position: relative;
    min-height: 44px; /* touch target */
    color: var(--t3);
  }
  .mob-nav-item.active { color: var(--cyan); }
  .mob-nav-item:active { color: var(--cyan2); }
  .mob-nav-icon {
    font-size: 1.15rem;
    line-height: 1;
    display: block;
  }
  .mob-nav-label {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  /* Active dot indicator */
  .mob-nav-item.active::before {
    content: '';
    position: absolute;
    top: 4px;
    width: 20px; height: 3px;
    background: var(--cyan2);
    border-radius: 0 0 3px 3px;
    transform-origin: top;
  }

  /* Push page content above bottom nav */
  #app > *:last-child {
    padding-bottom: calc(var(--mob-bot-h) + env(safe-area-inset-bottom));
  }
  /* footer uses margin-bottom instead (set in footer block) */
  /* Body padding for bottom nav */
  body.has-mob-nav {
    padding-bottom: 0; /* handled per-element */
  }
}

/* ================================================================
   SECTION 6 — SECTION LAYOUT (mobile sections)
================================================================ */
@media (max-width: 768px) {
  .section {
    padding: 28px 0 24px;
  }
  .section-inner {
    padding: 0; /* remove horizontal padding — handled per child */
  }
  .section-header {
    padding: 0 var(--mob-pad);
    margin-bottom: 16px;
    align-items: flex-end;
  }
  .section-title {
    font-size: 1.05rem;
    letter-spacing: -0.3px;
    gap: 7px;
  }
  .section-sub { font-size: 0.72rem; }
  .see-all-btn {
    padding: 6px 14px;
    font-size: 0.72rem;
  }
}

/* ================================================================
   SECTION 7 — HOW IT WORKS (compact 3-step)
================================================================ */
@media (max-width: 768px) {
  /* Override from 2-col to single column */
  .hiw-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 0 var(--mob-pad);
  }
  .hiw-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--mob-radius);
  }
  .hiw-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    font-size: 0.85rem;
  }
  .hiw-icon { font-size: 1.2rem; flex-shrink: 0; }
  .hiw-body { flex: 1; }
  .hiw-title { font-size: 0.88rem; margin-bottom: 4px; }
  .hiw-desc { font-size: 0.75rem; line-height: 1.45; }
}

/* ================================================================
   SECTION 8 — SELLER CTA CARD (mobile)
================================================================ */
@media (max-width: 768px) {
  .seller-cta {
    margin: 0 var(--mob-pad);
    padding: 24px 20px;
    border-radius: var(--mob-radius);
  }
  .seller-cta-title { font-size: 1.15rem; margin-bottom: 10px; }
  .seller-cta-sub   { font-size: 0.78rem; margin-bottom: 16px; }
  .seller-cta-stats {
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -20px;
    padding: 0 20px;
  }
  .seller-cta-stats::-webkit-scrollbar { display: none; }
  .scs-item { flex-shrink: 0; padding: 0 14px; }
  .scs-val  { font-size: 1.1rem; }
  .scs-lbl  { font-size: 0.6rem; }
}

/* ================================================================
   SECTION 9 — AUCTION DETAIL PAGE (mobile)
================================================================ */
@media (max-width: 768px) {
  .detail-wrap {
    padding: 12px var(--mob-pad) calc(var(--mob-bot-h) + 80px + env(safe-area-inset-bottom));
  }
  .detail-grid { grid-template-columns: 1fr !important; }
  .detail-left { order: 0; }
  .detail-right { order: 1; }

  /* Image gallery */
  .detail-gallery {
    border-radius: var(--mob-radius);
    overflow: hidden;
    /* Reserve aspect ratio space before image loads */
    aspect-ratio: 4/3;
    background: var(--bg2);
  }
  .detail-main-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: var(--mob-radius);
  }

  /* Phase tracker — compact */
  .phase-tracker { padding: 10px var(--mob-pad); }
  .tracker-inner { gap: 4px; }
  .tracker-step-label { font-size: 0.6rem; }
  .pts-connector { min-width: 16px; max-width: 32px; }

  /* Phase card */
  .phase-card {
    border-radius: var(--mob-radius);
    padding: 16px;
    margin-bottom: 12px;
  }
  /* Bid stats row — 3-col grid on mobile */
  .bid-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }
  .bid-stat-box { padding: 10px 8px; }
  .bsb-lbl { font-size: 0.6rem; }
  .bsb-val { font-size: 1rem; }

  /* Bid form */
  .bid-form {
    display: flex; gap: 8px; align-items: center;
  }
  .bid-input { min-height: 44px; font-size: 0.9rem; }
  .btn-bid   { min-height: 44px; padding: 0 16px; font-size: 0.88rem; }

  /* Entry block */
  .entry-block { padding: 12px 0; }
  .qty-grid { gap: 8px; grid-template-columns: repeat(3, 1fr); }
  .qty-btn  { min-height: 54px; border-radius: var(--mob-radius); }
  .qty-n    { font-size: 0.9rem; }
  .qty-p    { font-size: 0.75rem; }
  .qty-xrp  { font-size: 0.6rem; }
  .custom-row { gap: 8px; }
  .custom-inp { min-height: 44px; font-size: 0.9rem; }

  /* Sidebar cards — full width below main content */
  .sidebar-card {
    border-radius: var(--mob-radius);
    margin-bottom: 10px;
  }

  /* Mobile sticky bid bar */
  .mob-bar {
    padding: 10px var(--mob-pad);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* SECTION 10 footer mobile — merged into main footer block above */

/* ================================================================
   SECTION 11 — QR / MODAL (mobile)
================================================================ */
@media (max-width: 768px) {
  .qr-modal-inner {
    padding: 24px 20px 28px;
    max-width: 340px;
    border-radius: var(--rad-lg);
  }
  .qr-img { width: 220px; height: 220px; }
}

/* ================================================================
   SECTION 12 — SELLER DASHBOARD (mobile)
================================================================ */
@media (max-width: 768px) {
  .seller-wrap {
    padding: 16px var(--mob-pad) calc(var(--mob-bot-h) + 16px);
  }
  .seller-tabs {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 16px;
  }
  .seller-tabs::-webkit-scrollbar { display: none; }
  .seller-tab-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 0.78rem;
    min-height: 40px;
  }
  .auctions-table-wrap { overflow-x: auto; }
}

/* ── Admin nav wrapper ────────────────────────────────────────── */
.admin-nav-wrap { margin-bottom: 20px; }

/* Mobile dropdown — hidden on desktop */
.admin-tab-select {
  display: none;
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--rad);
  border: 1.5px solid var(--b1);
  background: var(--surface);
  color: var(--t);
  cursor: pointer;
  margin-bottom: 0;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ================================================================
   SECTION 13 — ADMIN PANEL (mobile)
================================================================ */
@media (max-width: 768px) {
  .admin-wrap {
    padding: 12px var(--mob-pad) calc(var(--mob-bot-h) + 12px);
  }
  /* Show dropdown, hide button tabs on mobile */
  .admin-tab-select { display: block; }
  .admin-tabs { display: none !important; }

  /* Stats bar — 2 column grid on mobile */
  .admin-stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .admin-stat-box {
    padding: 12px 10px;
    min-width: unset;
  }
  .admin-stat-value { font-size: 1.3rem; }
  .admin-stat-label { font-size: 0.62rem; }

  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-row { grid-template-columns: 1fr 1fr !important; }
  /* Tables scroll horizontally */
  .admin-card { overflow-x: auto; }
  .admin-table { font-size: 0.75rem; min-width: 480px; }
}

/* ================================================================
   SECTION 14 — GLOBAL TOUCH TARGETS & BUTTON SIZES
================================================================ */
@media (max-width: 768px) {
  /* All interactive buttons — minimum 44px touch target */
  .btn-primary,
  .btn-secondary,
  .btn-bid,
  .see-all-btn,
  .admin-btn,
  .phase-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 0.88rem;
  }
  .btn-primary  { border-radius: var(--rad-sm); }
  .btn-secondary { border-radius: var(--rad-sm); }

  /* Input fields */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  select, textarea {
    min-height: 44px;
    font-size: 16px !important; /* prevent iOS zoom on focus */
    border-radius: var(--rad-xs);
  }

  /* Form labels */
  .form-label {
    font-size: 0.78rem;
    margin-bottom: 6px;
    display: block;
  }
  .form-group { margin-bottom: 16px; }

  /* Phase events / audit rows */
  .phase-event-row { padding: 10px 12px; }
}

/* ================================================================
   SECTION 15 — APP-LIKE TRANSITIONS & POLISH
================================================================ */

/* Smooth page-level fade — applies to any route change */
@keyframes mob-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  /* Fade in page content */
  #app > * {
    animation: mob-fadein 0.2s ease-out both;
  }
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    #app > * { animation: none; }
    * { transition-duration: 0.01ms !important; }
  }

  /* Card press feedback */
  .auction-card:active,
  .big-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Remove excessive dot background on mobile — cleaner */
  body::before { display: none; }

  /* Section divider line */
  .section + .section {
    border-top: 1px solid var(--b1);
  }

  /* Horizontal rule replacement for mobile */
  .mob-divider {
    height: 8px;
    background: var(--bg2);
    margin: 0;
    border: none;
    width: 100%;
  }
}

/* ================================================================
   SECTION 16 — PREVENT CLS (cumulative layout shift)
================================================================ */

/* Reserve space for all image wrappers before load */
.card-img-wrap[style*="padding-top"] {
  /* Override % trick with explicit dimensions on mobile */
}
@media (max-width: 768px) {
  /* Image placeholder background — prevents white flash */
  .card-img-wrap,
  .big-card-img-wrap,
  .detail-gallery {
    background-color: var(--bg2);
    background-image: linear-gradient(
      90deg,
      var(--bg2) 25%,
      var(--bg3) 37%,
      var(--bg2) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
  }
  /* Stop shimmer once image loads — handled via JS class */
  .img-loaded .card-img-wrap,
  .img-loaded .big-card-img-wrap {
    animation: none;
    background: none;
  }
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Countdown pill — fixed width to prevent reflowing text */
.countdown-pill {
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  justify-content: center;
}

/* Badge container — reserve space */
.img-badge-slot {
  position: absolute; top: 6px; left: 6px;
  min-width: 52px; min-height: 20px;
  z-index: 3;
}

/* ================================================================
   SECTION 17 — LEGAL PAGES (mobile)
================================================================ */
@media (max-width: 768px) {
  .legal-wrap { padding: 0 !important; }
  .legal-layout {
    flex-direction: column !important;
    gap: 0;
  }
  .legal-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--b1);
    padding: 12px var(--mob-pad);
    position: static !important;
  }
  .legal-sidebar-nav {
    display: flex;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 0;
  }
  .legal-sidebar-nav::-webkit-scrollbar { display: none; }
  .legal-sidebar-link {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 6px 12px;
    white-space: nowrap;
    border-radius: var(--pill);
    border-left: none !important;
  }
  .legal-sidebar-link.active {
    background: rgba(8,145,178,0.1);
    color: var(--cyan);
  }
  .legal-sidebar-support { display: none; }
  .legal-article {
    padding: 20px var(--mob-pad) !important;
    max-width: 100% !important;
  }
  .legal-title { font-size: 1.3rem !important; }
  .legal-article-footer {
    flex-direction: column;
    gap: 8px;
  }
  .legal-index-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 0 var(--mob-pad);
  }
}

/* ================================================================
   SECTION 18 — PWA / INSTALLABLE SHELL PREP
================================================================ */
/* Respect standalone display mode (PWA installed) */
@media (display-mode: standalone) {
  .navbar {
    padding-top: env(safe-area-inset-top);
  }
  .mob-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--mob-bot-h) + env(safe-area-inset-bottom));
  }
}

/* ================================================================
   SECTION 19 — CATEGORY FILTER TILES (mobile)
================================================================ */
@media (max-width: 768px) {
  .cat-tiles {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
    padding: 0 var(--mob-pad);
  }
  .cat-tile {
    padding: 12px 8px;
    border-radius: var(--mob-radius);
    min-height: 64px;
  }
  .cat-tile-icon { font-size: 1.4rem; }
  .cat-tile-label { font-size: 0.62rem; }
  .cat-tile-val { font-size: 0.7rem; }
}

/* ================================================================
   SECTION 20 — SECTION PADDING & OVERFLOW CLEANUP
================================================================ */
@media (max-width: 768px) {
  /* Prevent horizontal overflow from any element */
  #app, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Sections with grid content — add side padding to title only */
  .section-header { padding: 0 var(--mob-pad); }

  /* Won grid */
  .won-grid {
    grid-template-columns: 1fr !important;
    padding: 0 var(--mob-pad);
    gap: 10px;
  }

  /* Sellers row */
  .sellers-row {
    grid-template-columns: repeat(3, 1fr) !important;
    padding: 0 var(--mob-pad);
    gap: 8px;
  }

  /* Phase tracker */
  .phase-tracker { padding: 8px var(--mob-pad) 0; }
}

/* ── Toast: avoid overlap with mobile bottom nav ── */
@media (max-width: 768px) {
  #toast-container {
    bottom: calc(var(--mob-bot-h) + 12px + env(safe-area-inset-bottom));
    right: 12px;
    left: 12px;
    align-items: center;
  }
  .toast { max-width: 100%; width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════
   UPLOAD ZONES  — drag-and-drop image & delivery file uploads
   ══════════════════════════════════════════════════════════════════ */

/* Tab buttons (Upload / URL toggle) */
.tab-btn {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--b1);
  border-radius: var(--rad);
  background: var(--bg2);
  color: var(--t2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tab-btn.tab-active {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
}
.tab-btn:hover:not(.tab-active) { border-color: var(--cyan); color: var(--cyan); }

/* Upload drop-zone */
.upload-zone {
  border: 2px dashed var(--b1);
  border-radius: var(--rad);
  background: var(--bg2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--cyan);
  background: rgba(6, 182, 212, .06);
}
.upload-zone-delivery { min-height: 110px; }

.upload-zone-inner {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.upload-zone-inner.upload-zone-success { gap: 8px; }

.upload-zone-icon {
  font-size: 1.8rem;
  color: var(--t3);
  display: block;
}
.upload-zone-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--t2);
  margin: 0;
}
.upload-zone-link {
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}
.upload-zone-hint {
  font-size: .72rem;
  color: var(--t3);
  margin: 0;
}

/* Thumbnail preview after upload */
.upload-zone-thumb {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--b1);
}

/* Mobile upload zones */
@media (max-width: 768px) {
  .upload-zone { min-height: 100px; }
  .upload-zone-icon { font-size: 1.5rem; }
  .upload-zone-thumb { width: 90px; height: 60px; }
}

/* ── Seller Rank Badges ─────────────────────────────────────────── */
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.rank-new          { background: rgba(148,163,184,.18); color: var(--t2); border: 1px solid rgba(148,163,184,.3); }
.rank-green        { background: rgba(34,197,94,.15);   color: #16a34a;   border: 1px solid rgba(34,197,94,.35); }
.rank-intermediate { background: rgba(59,130,246,.15);  color: #2563eb;   border: 1px solid rgba(59,130,246,.35); }
.rank-top          { background: rgba(245,158,11,.15);  color: #b45309;   border: 1px solid rgba(245,158,11,.4); }

/* ── Review UI ──────────────────────────────────────────────────── */
.review-submitted-card {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.review-form-card {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 16px;
}
.star-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0;
}
.star-btn {
  font-size: 1.8rem;
  cursor: pointer;
  transition: transform .12s;
  line-height: 1;
  user-select: none;
}
.star-btn:hover,
.star-btn.active {
  transform: scale(1.25);
}

/* ── Auth Gate Modal — v11 redesign ─────────────────────────────── */
.ag-overlay,
#auth-gate-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 600px) {
  .ag-overlay, #auth-gate-modal { align-items: center; padding: 20px; }
}
.ag-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 440px;
  padding: 28px 24px 36px;
  position: relative;
  transform: translateY(48px);
  opacity: 0;
  transition: transform 0.24s cubic-bezier(0.4,0,0.2,1), opacity 0.24s;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (min-width: 600px) {
  .ag-card {
    border-radius: 24px;
    transform: scale(0.96) translateY(4px);
    max-height: 92vh;
  }
}
.ag-card.ag-in { transform: translateY(0); opacity: 1; }
@media (min-width: 600px) {
  .ag-card.ag-in { transform: scale(1) translateY(0); }
}

.ag-close {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  color: var(--t3);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.88rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.16s;
  z-index: 1;
}
.ag-close:hover { background: var(--bg); color: var(--t); border-color: var(--b2); }

/* Header */
.ag-header { text-align: center; margin-bottom: 20px; }
.ag-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--grd-brand);
  font-size: 1.8rem; color: #fff;
  box-shadow: 0 8px 24px rgba(8,145,178,0.3);
  margin-bottom: 14px;
}
.ag-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.45rem; font-weight: 900; letter-spacing: -0.5px;
  color: var(--t); margin: 0 0 8px;
}
.ag-sub {
  font-size: 0.86rem; color: var(--t3); line-height: 1.6;
  margin: 0; max-width: 340px; margin: 0 auto;
}
.ag-sub em { font-style: normal; font-weight: 700; color: var(--t2); }

/* Primary CTA */
.ag-actions { margin-bottom: 18px; }
.ag-btn-primary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--grd-brand);
  border: none; border-radius: 14px; color: #fff;
  cursor: pointer; font-size: 0.95rem; font-weight: 600;
  transition: filter 0.18s, transform 0.14s;
  text-align: left; width: 100%;
  box-shadow: 0 4px 16px rgba(8,145,178,0.35);
}
.ag-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ag-btn-primary:active { transform: translateY(0); }
/* Phantom wallet button — purple Solana brand color */
.ag-btn-phantom {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #ab9ff2 0%, #9945ff 100%);
  border: none; border-radius: 14px; color: #fff;
  cursor: pointer; font-size: 0.95rem; font-weight: 600;
  transition: filter 0.18s, transform 0.14s;
  text-align: left; width: 100%; margin-top: 10px;
  box-shadow: 0 4px 16px rgba(153,69,255,0.35);
}
.ag-btn-phantom:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ag-btn-phantom:active { transform: translateY(0); }
.ag-btn-text { flex: 1; }
.ag-btn-text strong { display: block; font-size: 1rem; }
.ag-btn-text small { display: block; font-size: 0.75rem; opacity: 0.85; margin-top: 2px; }
.ag-btn-icon { font-size: 1.5rem; flex-shrink: 0; }

/* Perks grid */
.ag-perks {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 20px;
}
.ag-perk {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.77rem; color: var(--t2); font-weight: 500;
  background: var(--bg); border: 1px solid var(--b1);
  border-radius: 10px; padding: 9px 10px; line-height: 1.45;
}
.ag-perk-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Help toggles */
.ag-help-toggle {
  font-size: 0.8rem; font-weight: 600; color: var(--cyan);
  cursor: pointer; margin-top: 10px; padding: 6px 0;
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--b1);
  transition: color 0.15s;
  user-select: none;
}
.ag-help-toggle:hover { color: var(--t); }
.ag-help-arrow { transition: transform 0.2s; display: inline-block; }
.ag-help-toggle + .ag-help-panel.open .ag-help-arrow { transform: rotate(90deg); }

/* We can't easily target parent's sibling arrow via CSS so use JS-free approach: */
.ag-help-panel .ag-help-arrow { display: none; }

.ag-help-panel {
  display: none; padding: 14px 0 4px;
  font-size: 0.82rem; color: var(--t2); line-height: 1.6;
}
.ag-help-panel.open { display: block; }
.ag-help-panel p { margin: 0 0 8px; }
.ag-help-steps {
  margin: 8px 0 10px; padding-left: 18px;
}
.ag-help-steps li { margin-bottom: 5px; }
.ag-help-links {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.ag-help-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--cyan);
  background: rgba(8,145,178,0.07); border: 1px solid rgba(8,145,178,0.2);
  border-radius: 8px; padding: 5px 10px; text-decoration: none;
  transition: background 0.15s;
}
.ag-help-link:hover { background: rgba(8,145,178,0.14); }
.ag-help-note {
  background: rgba(8,145,178,0.06); border-left: 3px solid var(--cyan2);
  border-radius: 6px; padding: 8px 12px; font-size: 0.8rem;
  color: var(--t2); margin-top: 8px;
}
.ag-fine { display: none; }

/* Watchlist button */
.wl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--bdr, rgba(255,255,255,.15));
  background: transparent;
  color: var(--t2, #94a3b8);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.wl-btn:hover { border-color: rgba(239,68,68,.5); color: #ef4444; }
.wl-btn.wl-active { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #ef4444; }

/* ── Buyer Profile Dashboard ─────────────────────────────────────── */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--bdr);
  flex-shrink: 0;
  background: var(--bg3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--t);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: .6;
  transition: opacity .15s;
}
.profile-edit-btn:hover { opacity: 1; }
.profile-wallet {
  font-family: monospace;
  font-size: .78rem;
  color: var(--t3);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stats bar */
.profile-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .profile-stats-bar { grid-template-columns: repeat(3, 1fr); }
}
.profile-stat {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
}
.profile-stat-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--t);
  line-height: 1;
}
.profile-stat-lbl {
  font-size: .68rem;
  color: var(--t3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Tab panels */
.profile-tab-panel {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 0 0 16px 16px;
  padding: 20px;
  min-height: 180px;
}

/* Auction cards grid */
.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.profile-auction-card {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.profile-auction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.pac-img-wrap { position: relative; }
.pac-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}
.pac-img-placeholder {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--bg4);
}
.pac-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.pac-won { background: rgba(245,158,11,.85) !important; }
.pac-body { padding: 12px; }
.pac-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pac-meta {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--t3);
  flex-wrap: wrap;
  gap: 4px;
}
.pac-price { color: var(--emr); font-weight: 700; }
.pac-download-btn {
  display: block;
  margin-top: 10px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity .15s;
}
.pac-download-btn:hover { opacity: .85; }

/* Nav wallet as link */
a.nav-wallet {
  cursor: pointer;
  text-decoration: none;
  font-size: .82rem;
  color: var(--t2);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--bdr);
  transition: border-color .15s, color .15s;
}
a.nav-wallet:hover { border-color: var(--cyan2); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════
   SERTRUS2 MARKETPLACE MODULE CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Marketplace Hero ────────────────────────────────────────── */
.mp-hero {
  background: linear-gradient(135deg, #EEF2FF 0%, #F0F9FF 50%, #ECFDF5 100%);
  border-bottom: 1px solid var(--b1);
  padding: 56px 16px 48px;
  text-align: center;
  color: var(--t);
}
.mp-hero-inner { max-width: 640px; margin: 0 auto; }
.mp-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 10px; }
.mp-hero p  { color: var(--t3); margin-bottom: 24px; font-size: 1rem; }

.mp-search-bar {
  display: flex; gap: 8px; max-width: 520px; margin: 0 auto;
}
.mp-search-input {
  flex: 1; padding: 12px 16px; border-radius: 10px;
  border: 1.5px solid var(--b1); background: #fff;
  color: var(--t); font-size: .95rem; outline: none;
}
.mp-search-input::placeholder { color: var(--t4); }
.mp-search-input:focus { border-color: var(--cyan,#00e5ff); }
.mp-search-btn {
  padding: 12px 20px; border-radius: 10px; border: none;
  background: var(--grd-brand); color: #fff; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}

/* ── Top Bar ─────────────────────────────────────────────────── */
.mp-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.mp-cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-cat-tab {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid #e2e8f0;
  background: #fff; font-size: .82rem; cursor: pointer; transition: all .2s;
}
.mp-cat-tab.active, .mp-cat-tab:hover {
  background: var(--cyan2); border-color: var(--cyan2); color: #fff;
}
.mp-become-seller-btn { white-space: nowrap; }

/* ── Service Grid ────────────────────────────────────────────── */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.mp-service-card {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.mp-service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.mp-card-img {
  width: 100%; height: 160px; object-fit: cover; display: block;
}
.mp-card-img-placeholder {
  background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.mp-card-body { padding: 14px 16px 16px; }
.mp-card-seller {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: .8rem; color: #555;
}
.mp-card-avatar {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #e2e8f0;
}
.mp-card-title {
  font-size: .92rem; font-weight: 700; color: #1e293b; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mp-card-rating { display: flex; align-items: center; gap: 4px; font-size: .8rem; color: #f59e0b; margin-bottom: 6px; }
.mp-card-reviews { color: #94a3b8; }
.mp-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.mp-tag { background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 10px; font-size: .73rem; }
.mp-card-footer { display: flex; justify-content: space-between; align-items: center; }
.mp-card-price { font-size: .85rem; color: #64748b; }
.mp-card-price strong { color: #0f172a; font-size: 1rem; }
.mp-card-delivery { font-size: .75rem; color: #94a3b8; }
.mp-empty { text-align: center; padding: 48px; color: #94a3b8; grid-column: 1/-1; }

/* ── Rank Badges ─────────────────────────────────────────────── */
.mp-rank-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.mp-rank-new     { background: #f1f5f9; color: #64748b; }
.mp-rank-rising  { background: #dbeafe; color: #1d4ed8; }
.mp-rank-level1  { background: #d1fae5; color: #065f46; }
.mp-rank-level2  { background: #fef3c7; color: #92400e; }
.mp-rank-top     { background: linear-gradient(90deg,#f59e0b,#ef4444); color: #fff; }

/* ── Stars ───────────────────────────────────────────────────── */
.mp-stars { color: #f59e0b; letter-spacing: .03em; }

/* ── Service Detail ──────────────────────────────────────────── */
.mp-service-detail { max-width: 1080px; }
.mp-back-btn {
  background: none; border: none; color: var(--cyan,#00e5ff);
  font-size: .9rem; cursor: pointer; padding: 0; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 4px;
}
.mp-detail-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  align-items: start;
}
@media (max-width: 768px) { .mp-detail-layout { grid-template-columns: 1fr; } }
.mp-detail-cover { width: 100%; border-radius: 12px; margin-bottom: 20px; }
.mp-detail-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.mp-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-detail-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; color: #475569; margin-bottom: 12px; }
.mp-detail-desc { font-size: .9rem; color: #475569; line-height: 1.7; }
.mp-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

/* ── Order Card (sidebar) ────────────────────────────────────── */
.mp-order-card {
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,.1); position: sticky; top: 80px;
}
.mp-order-card-price { font-size: 1.8rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.mp-order-card-price span { font-size: 1rem; color: #64748b; }
.mp-order-card-meta { display: flex; gap: 16px; font-size: .85rem; color: #64748b; margin-bottom: 12px; }
.mp-order-card-desc { font-size: .85rem; color: #64748b; margin-bottom: 14px; }
.mp-escrow-badge {
  background: #d1fae5; color: #065f46; padding: 8px 12px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; margin-bottom: 14px; text-align: center;
}
.mp-order-btn { width: 100%; margin-bottom: 8px; }
.mp-order-card-note { font-size: .74rem; color: #94a3b8; text-align: center; }
.mp-seller-card-mini { display: flex; gap: 12px; align-items: flex-start; }
.mp-link { color: var(--cyan,#00e5ff); text-decoration: none; font-weight: 600; }

/* ── Reviews ─────────────────────────────────────────────────── */
.mp-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.mp-review-item { background: #f8fafc; padding: 14px; border-radius: 10px; }
.mp-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mp-review-avatar { width: 32px; height: 32px; border-radius: 50%; }
.mp-review-buyer { font-weight: 600; font-size: .85rem; }
.mp-review-date { font-size: .75rem; color: #94a3b8; }
.mp-empty-text { color: #94a3b8; font-style: italic; }

/* ── Orders List ─────────────────────────────────────────────── */
.mp-orders-list { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
.mp-order-row {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.mp-order-row:hover { transform: translateX(3px); border-color: var(--cyan2); box-shadow: 0 4px 16px rgba(15,23,42,0.08); }
.mp-order-row-num { font-size: 0.72rem; color: var(--t4); margin-bottom: 3px; font-weight: 600; letter-spacing: 0.04em; }
.mp-order-row-title { font-weight: 700; color: var(--t); font-size: 0.93rem; margin-bottom: 4px; }
.mp-order-row-parties { font-size: 0.79rem; color: var(--t3); font-weight: 500; }

/* ── Order Workspace ─────────────────────────────────────────── */
.mp-workspace { max-width: 820px; }
.mp-workspace-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.mp-workspace-num { font-size: .78rem; color: #94a3b8; }
.mp-workspace-title { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin: 4px 0; }
.mp-workspace-amount { font-size: 1.8rem; font-weight: 800; color: #0f172a; white-space: nowrap; }
.mp-workspace-amount span { font-size: .9rem; color: #64748b; }

.mp-escrow-info {
  background: #ecfdf5; border: 1.5px solid #86efac; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px; font-size: .85rem; color: #166534;
}
.mp-tx-hash { font-family: monospace; font-size: .78rem; }

.mp-deadline-bar {
  background: #eff6ff; border-radius: 10px; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-size: .85rem; flex-wrap: wrap;
}
.mp-ext-btn {
  background: none; border: 1px solid #93c5fd; color: #1d4ed8;
  padding: 4px 10px; border-radius: 6px; font-size: .78rem; cursor: pointer;
}

.mp-seller-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.mp-dispute-btn { margin-top: 24px; background: none; border: 1.5px solid #ef4444; color: #ef4444; }
.mp-dispute-btn:hover { background: #fef2f2; }

.mp-section { margin-bottom: 24px; }
.mp-section h4 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 12px; }

/* ── Progress ────────────────────────────────────────────────── */
.mp-progress-item { margin-bottom: 14px; }
.mp-progress-bar-wrap { background: #f1f5f9; border-radius: 99px; height: 6px; margin-bottom: 6px; }
.mp-progress-bar-fill { background: var(--cyan,#00e5ff); border-radius: 99px; height: 100%; transition: width .5s; }

/* ── Deliveries ──────────────────────────────────────────────── */
.mp-delivery-card {
  background: #f8fafc; border-radius: 10px; padding: 14px; margin-bottom: 12px;
  border: 1.5px solid #e2e8f0;
}
.mp-delivery-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.mp-delivery-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.mp-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mp-file-chip { background: #dbeafe; color: #1d4ed8; padding: 4px 10px; border-radius: 20px; font-size: .78rem; }

/* ── Timeline ────────────────────────────────────────────────── */
.mp-timeline { position: relative; padding-left: 20px; }
.mp-timeline-item {
  position: relative; padding: 0 0 16px 16px;
  border-left: 2px solid #e2e8f0;
}
.mp-timeline-item:last-child { border-left-color: transparent; }
.mp-timeline-dot {
  position: absolute; left: -6px; top: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cyan,#00e5ff); border: 2px solid #fff;
}

/* ── Chat ────────────────────────────────────────────────────── */
.mp-chat-section { background: #f8fafc; border-radius: 12px; padding: 16px; }
.mp-chat-msgs {
  min-height: 180px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;
  scroll-behavior: smooth;
}
.mp-msg-bubble {
  max-width: 76%; padding: 10px 13px; border-radius: 14px;
  font-size: .88rem; line-height: 1.5;
}
.mp-msg-mine    { align-self: flex-end; background: var(--cyan2); color: #fff; border-bottom-right-radius: 4px; }
.mp-msg-theirs  { align-self: flex-start; background: #fff; color: #1e293b; border-bottom-left-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.mp-msg-system  { align-self: center; background: #fffbeb; color: #92400e; font-size: .78rem; padding: 6px 12px; border-radius: 20px; font-style: italic; }
.mp-msg-sender  { font-size: .7rem; font-weight: 700; opacity: .7; margin-bottom: 3px; }
.mp-msg-time    { font-size: .68rem; opacity: .55; margin-top: 4px; text-align: right; }
.mp-msg-flag    { font-size: .7rem; color: #dc2626; margin-top: 2px; }
.mp-chat-input-row { display: flex; gap: 8px; }
.mp-chat-input {
  flex: 1; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  font-size: .88rem; resize: none; font-family: inherit;
}
.mp-chat-send { align-self: flex-end; padding: 10px 16px; }
.mp-chat-policy { font-size: .73rem; color: #94a3b8; margin-top: 8px; }

/* ── Seller Setup / New Service forms ────────────────────────── */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 120px; }

/* ── Admin Marketplace table overrides ───────────────────────── */
.admin-row-danger { background: #fef2f2; }
.admin-row-warn   { background: #fffbeb; }
.admin-stat-chip {
  display: inline-block; background: #f1f5f9; border-radius: 6px;
  padding: 2px 8px; font-size: .8rem; margin: 2px;
}

/* ── Responsive fixes ────────────────────────────────────────── */
@media (max-width: 600px) {
  .mp-hero { padding: 36px 16px 32px; }
  .mp-search-bar { flex-direction: column; }
  .mp-grid { grid-template-columns: 1fr; }
  .mp-workspace-header { flex-direction: column; }
  .mp-workspace-amount { font-size: 1.4rem; }
  .mp-top-bar { flex-direction: column; align-items: stretch; }
  .mp-cat-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .mp-become-seller-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   SERTRUS2 — PREMIUM REDESIGN v9
   Fiverr clarity · eBay accessibility · Modern SaaS polish
   Bright · Active · Trustworthy · Premium
   ================================================================ */

/* ── Root overrides ─────────────────────────────────────────── */
:root {
  --grd-hero: linear-gradient(160deg, #F8FAFF 0%, #F0F7FF 40%, #F0FDF8 100%);
  --surface: #FFFFFF;
  --bg:  #F6F8FB;
  --bg2: #EFF3F8;
  --shadow-card-hover: 0 24px 52px rgba(15,23,42,0.14), 0 8px 20px rgba(15,23,42,0.07);
}

/* ── Body dot grid – lighter ─────────────────────────────────── */
body::before {
  background-image: radial-gradient(circle, rgba(100,116,139,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ════════════════════════════════════════════════════════════════
   NAVBAR — v9 polish
════════════════════════════════════════════════════════════════ */
.navbar { box-shadow: 0 1px 0 var(--b1), 0 2px 16px rgba(15,23,42,0.04); }

.nav-logo {
  font-size: 1.6rem;
  letter-spacing: -0.8px;
}
.nav-logo-xrp {
  background: var(--grd-xrpl);
  width: 24px; height: 24px; font-size: 0.6rem;
}

/* Nav pill for Marketplace link — superseded by .nav-switch in v10.1 */
.nav-mp-pill { display: none; }
.nav-mp-pill:hover {}

/* ════════════════════════════════════════════════════════════════
   TRUST BAR — v9: accent strip with icons
════════════════════════════════════════════════════════════════ */
.trust-bar {
  background: linear-gradient(90deg, #fff 0%, #F8FAFF 50%, #fff 100%);
  border-top: none;
  border-bottom: 1.5px solid var(--b1);
  padding: 12px 28px;
}
.trust-item {
  font-size: 0.8rem; font-weight: 600; color: var(--t2);
  display: flex; align-items: center; gap: 7px;
}
.trust-icon { font-size: 1.05rem; }

/* ════════════════════════════════════════════════════════════════
   HERO — v9: taller, richer gradients, bigger title
════════════════════════════════════════════════════════════════ */
.hero {
  padding: 68px 24px 72px;
  background: var(--grd-hero);
}
.hero::before {
  background:
    radial-gradient(ellipse 60% 60% at 2% 50%, rgba(8,145,178,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 98% 10%, rgba(109,40,217,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 110%, rgba(5,150,105,0.06) 0%, transparent 70%);
}

.hero-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.2em;
  background: linear-gradient(135deg,rgba(8,145,178,0.09),rgba(109,40,217,0.09));
  border: 1.5px solid rgba(8,145,178,0.24);
  margin-bottom: 24px;
}

.hero-title {
  font-size: clamp(2.5rem, 4.8vw, 4.2rem);
  letter-spacing: -2.5px;
  line-height: 1.08;
  margin-bottom: 20px;
}

.hero-sub { font-size: 1.06rem; line-height: 1.72; margin-bottom: 34px; }

.hero-cta-row { gap: 14px; margin-bottom: 36px; }

/* Stats box — v9 cleaner */
.hero-stats {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 20px;
  padding: 20px 32px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04);
}
.hs-val { font-size: 1.85rem; }

/* ── Dual path selector ──────────────────────────────────────── */
.dual-path-section {
  background: #fff;
  border-top: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
  padding: 48px 24px;
}
.dual-path-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 700px) { .dual-path-inner { grid-template-columns: 1fr; } }

.dual-path-card {
  border-radius: 20px; padding: 36px 32px; cursor: pointer;
  border: 2px solid var(--b1); position: relative; overflow: hidden;
  transition: all 0.24s ease;
  display: flex; flex-direction: column;
}
.dual-path-card:hover {
  border-color: var(--cyan2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.dual-path-card.auctions {
  background: linear-gradient(145deg, #F0F9FF 0%, #EEF2FF 100%);
}
.dual-path-card.services {
  background: linear-gradient(145deg, #F0FDF4 0%, #ECFDF5 100%);
}
.dual-path-card.auctions:hover { border-color: var(--cyan2); }
.dual-path-card.services:hover { border-color: var(--emr2); }

.dp-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 20px;
  flex-shrink: 0;
}
.dp-icon.auction { background: linear-gradient(135deg,rgba(8,145,178,0.15),rgba(109,40,217,0.12)); }
.dp-icon.service { background: linear-gradient(135deg,rgba(5,150,105,0.15),rgba(6,182,212,0.1)); }

.dp-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem; font-weight: 800; color: var(--t);
  margin-bottom: 8px; letter-spacing: -0.4px;
}
.dp-desc {
  font-size: 0.9rem; color: var(--t2); line-height: 1.6;
  margin-bottom: 24px; flex: 1;
}
.dp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 700;
  padding: 10px 20px; border-radius: var(--pill);
  border: none; cursor: pointer; width: fit-content;
  transition: all 0.18s;
}
.dp-cta.auction {
  background: var(--grd-brand); color: #fff;
  box-shadow: 0 4px 16px rgba(8,145,178,0.32);
}
.dp-cta.auction:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(8,145,178,0.4);
  transform: translateY(-1px);
}
.dp-cta.service {
  background: var(--grd-emerald); color: #fff;
  box-shadow: 0 4px 16px rgba(5,150,105,0.32);
}
.dp-cta.service:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(5,150,105,0.4);
  transform: translateY(-1px);
}
.dp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  border-radius: var(--pill); padding: 4px 12px;
  margin-bottom: 14px; width: fit-content;
}
.dp-badge.auction {
  background: rgba(8,145,178,0.1); color: var(--cyan);
  border: 1px solid rgba(8,145,178,0.22);
}
.dp-badge.service {
  background: rgba(5,150,105,0.1); color: var(--emerald);
  border: 1px solid rgba(5,150,105,0.22);
}
.dp-stat-row {
  display: flex; gap: 20px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid rgba(15,23,42,0.07);
  margin-top: 20px;
}
.dp-stat { text-align: left; }
.dp-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 900;
  color: var(--t); display: block;
}
.dp-stat-lbl { font-size: 0.64rem; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

/* ════════════════════════════════════════════════════════════════
   AUCTION CARD — v9: urgency indicators stronger
════════════════════════════════════════════════════════════════ */
.auction-card {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
}
.auction-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 56px rgba(15,23,42,0.14), 0 8px 20px rgba(15,23,42,0.07);
  border-color: rgba(8,145,178,0.28);
}

/* Countdown urgency strip */
.card-urgency-strip {
  background: linear-gradient(90deg, rgba(220,38,38,0.06), rgba(220,38,38,0.02));
  border-top: 1px solid rgba(220,38,38,0.12);
  padding: 7px 14px;
  display: flex; align-items: center; gap: 7px;
  font-size: 0.74rem; font-weight: 700; color: var(--red);
}
.urgency-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red2); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}

/* Bid activity bar */
.card-bid-activity {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; color: var(--t3); font-weight: 500;
}
.bid-activity-dots {
  display: flex; gap: 3px; align-items: flex-end;
}
.bad { width: 3px; border-radius: 2px; background: var(--cyan); }
.bad:nth-child(1) { height: 8px; animation: bar-pulse 1.2s ease infinite 0s; }
.bad:nth-child(2) { height: 12px; animation: bar-pulse 1.2s ease infinite 0.15s; }
.bad:nth-child(3) { height: 6px; animation: bar-pulse 1.2s ease infinite 0.3s; }
.bad:nth-child(4) { height: 10px; animation: bar-pulse 1.2s ease infinite 0.45s; }
@keyframes bar-pulse {
  0%,100% { opacity: 0.4; transform: scaleY(0.8); }
  50%      { opacity: 1; transform: scaleY(1); }
}

/* Pool fill — gradient v9 */
.pool-fill-sm { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.pool-pct { color: var(--cyan); }

/* ════════════════════════════════════════════════════════════════
   SERVICE CARD — v9: seller identity, rating, delivery prominent
════════════════════════════════════════════════════════════════ */
.mp-service-card {
  border-radius: 18px;
  border: 1.5px solid var(--b1);
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  transition: transform 0.26s ease, box-shadow 0.26s, border-color 0.26s;
}
.mp-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(15,23,42,0.13), 0 8px 18px rgba(15,23,42,0.07);
  border-color: rgba(5,150,105,0.28);
}

/* Service card image overlay with category */
.mp-card-img-wrap {
  position: relative; overflow: hidden;
  height: 180px;
}
.mp-card-img-wrap img,
.mp-card-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.mp-service-card:hover .mp-card-img { transform: scale(1.04); }
.mp-card-img { transition: transform 0.32s ease; }
.mp-card-cat-overlay {
  position: absolute; top: 10px; left: 10px;
  background: rgba(255,255,255,0.96); color: var(--t);
  font-size: 0.68rem; font-weight: 800;
  border-radius: var(--pill); padding: 3px 10px;
  box-shadow: var(--shadow-sm);
}

.mp-card-img-placeholder {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg5), var(--bg6));
  font-size: 3rem;
}

.mp-card-body { padding: 14px 16px 16px; }
.mp-card-seller {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.mp-card-seller span { font-size: 0.82rem; font-weight: 600; color: var(--t2); }
.mp-card-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--b1); flex-shrink: 0;
}

/* Verified badge on avatar */
.mp-seller-verified {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--emr2); color: #fff;
  font-size: 0.6rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.mp-card-title {
  font-size: 0.94rem; font-weight: 700; color: var(--t);
  line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Star rating row */
.mp-card-rating {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px; font-size: 0.8rem;
}
.mp-stars-row { display: flex; gap: 1px; }
.mp-star-full  { color: #F59E0B; font-size: 0.72rem; }
.mp-star-empty { color: var(--b2); font-size: 0.72rem; }
.mp-rating-num { font-weight: 700; color: var(--t); font-size: 0.82rem; }
.mp-card-reviews { color: var(--t3); font-size: 0.76rem; }

.mp-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-tag {
  background: var(--bg2); color: var(--t2);
  font-size: 0.68rem; font-weight: 600;
  border-radius: var(--pill); padding: 3px 9px;
  border: 1px solid var(--b1);
}

.mp-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--b1);
}
.mp-card-price { font-size: 0.88rem; color: var(--t2); }
.mp-card-price strong { font-weight: 800; color: var(--t); font-family: 'Space Grotesk'; font-size: 0.98rem; }
.mp-card-delivery {
  font-size: 0.76rem; color: var(--t3); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}

/* ════════════════════════════════════════════════════════════════
   MARKETPLACE HERO — v9: bright, trustworthy
════════════════════════════════════════════════════════════════ */
.mp-hero {
  /* Override old dark background with bright gradient */
  background: linear-gradient(150deg, #F0F9FF 0%, #EEF2FF 50%, #ECFDF5 100%) !important;
  color: var(--t) !important;
  border-bottom: 1px solid var(--b1);
  padding: 52px 16px 44px;
  text-align: center;
}
.mp-hero h1 {
  color: var(--t);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900; letter-spacing: -0.8px;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: 12px;
}
.mp-hero p { color: var(--t2); margin-bottom: 24px; font-size: 1rem; }

.mp-hero-trust {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--b1);
}
.mp-hero-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--t2);
}

.mp-search-input {
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b1);
  font-size: 0.95rem;
  border-radius: 10px;
  padding: 12px 16px;
  outline: none;
  flex: 1;
}
.mp-search-input::placeholder { color: var(--t4); }
.mp-search-input:focus { border-color: var(--cyan2); box-shadow: var(--glow-cyan); }
.mp-search-btn {
  background: var(--grd-brand); color: #fff;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28);
  border-radius: 10px;
  transition: all 0.18s;
}
.mp-search-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.mp-cat-tab {
  border: 1.5px solid var(--b1);
  transition: all 0.18s;
}
.mp-cat-tab.active, .mp-cat-tab:hover {
  background: var(--grd-cyan); border-color: transparent; color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   TRUST SECTION — full-width escrow guarantee block
════════════════════════════════════════════════════════════════ */
.trust-section {
  background: #fff;
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  padding: 56px 24px;
}
.trust-section-inner {
  max-width: 1100px; margin: 0 auto;
}
.trust-section-header {
  text-align: center; margin-bottom: 40px;
}
.trust-section-title {
  font-family: 'Space Grotesk'; font-size: 1.5rem; font-weight: 800; color: var(--t);
  margin-bottom: 10px; letter-spacing: -0.3px;
}
.trust-section-sub { font-size: 0.9rem; color: var(--t3); }

.trust-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
}
.trust-card {
  background: var(--bg); border: 1.5px solid var(--b1);
  border-radius: 18px; padding: 28px 24px;
  transition: all 0.22s;
}
.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(8,145,178,0.2);
}
.trust-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 18px;
}
.trust-card-icon.cyan   { background: linear-gradient(135deg,rgba(8,145,178,0.12),rgba(6,182,212,0.08)); }
.trust-card-icon.emerald { background: linear-gradient(135deg,rgba(5,150,105,0.12),rgba(16,185,129,0.08)); }
.trust-card-icon.violet  { background: linear-gradient(135deg,rgba(109,40,217,0.12),rgba(124,58,237,0.08)); }
.trust-card-icon.amber   { background: linear-gradient(135deg,rgba(217,119,6,0.12),rgba(245,158,11,0.08)); }

.trust-card-title { font-size: 0.98rem; font-weight: 800; color: var(--t); margin-bottom: 8px; }
.trust-card-desc  { font-size: 0.85rem; color: var(--t2); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS — v9: bright section
════════════════════════════════════════════════════════════════ */
.section-dark .hiw-card {
  background: #fff;
  border: 1.5px solid var(--b1);
}
.section-dark .hiw-card:hover {
  background: var(--bg5);
  border-color: var(--cyan2);
  box-shadow: var(--shadow-md);
}

/* ════════════════════════════════════════════════════════════════
   SELLER CTA — v9: more premium
════════════════════════════════════════════════════════════════ */
.seller-cta-section {
  position: relative;
  overflow: hidden;
}
.seller-cta-section::after {
  content: '';
  position: absolute; bottom: -80px; right: -80px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(109,40,217,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   FEATURED SERVICES SECTION (on homepage)
════════════════════════════════════════════════════════════════ */
.mp-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* ════════════════════════════════════════════════════════════════
   REVIEW SYSTEM — v9: polished star ratings
════════════════════════════════════════════════════════════════ */
.review-section {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: 18px; padding: 28px; margin-top: 24px;
}
.review-section-title {
  font-family: 'Space Grotesk'; font-size: 1.1rem; font-weight: 800;
  color: var(--t); margin-bottom: 6px;
}
.review-summary {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--b1); margin-bottom: 20px;
}
.review-avg-big {
  font-family: 'Space Grotesk'; font-size: 3.2rem; font-weight: 900;
  color: var(--t); line-height: 1;
}
.review-stars-big {
  display: flex; gap: 3px; margin: 4px 0;
}
.review-stars-big .mp-star-full  { font-size: 1rem; }
.review-stars-big .mp-star-empty { font-size: 1rem; }
.review-count-lbl { font-size: 0.8rem; color: var(--t3); }

.review-list { display: flex; flex-direction: column; gap: 16px; }
.review-item {
  padding: 16px; background: var(--bg); border-radius: 12px;
  border: 1px solid var(--b1);
}
.review-item-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.review-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--b1); flex-shrink: 0;
}
.review-buyer-name { font-weight: 700; font-size: 0.88rem; color: var(--t); }
.review-date { font-size: 0.72rem; color: var(--t4); }
.review-stars { display: flex; gap: 2px; }
.review-stars .mp-star-full  { font-size: 0.82rem; }
.review-stars .mp-star-empty { font-size: 0.82rem; }
.review-body { font-size: 0.88rem; color: var(--t2); line-height: 1.6; margin-top: 6px; }
.review-seller-reply {
  margin-top: 10px; padding: 10px 14px;
  background: rgba(8,145,178,0.05); border-left: 3px solid var(--cyan2);
  border-radius: 0 8px 8px 0; font-size: 0.84rem; color: var(--t2);
}
.review-reply-label { font-weight: 700; font-size: 0.72rem; color: var(--cyan); margin-bottom: 4px; }

/* Review form card v9 */
.review-form-card {
  background: var(--bg); border: 1.5px solid var(--b1);
  border-radius: 16px; padding: 20px;
}
.review-form-title { font-weight: 800; font-size: 0.98rem; color: var(--t); margin-bottom: 14px; }
.star-picker { gap: 6px; justify-content: flex-start; }
.star-btn { font-size: 1.6rem; }
.review-submit-btn {
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--pill);
  padding: 10px 24px; font-weight: 700; font-size: 0.88rem;
  cursor: pointer; transition: all 0.18s;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28);
}
.review-submit-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Rank badges v9 */
.rank-badge {
  padding: 3px 10px; border-radius: var(--pill);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.rank-new          { background: rgba(100,116,139,0.1); color: var(--t3); border: 1px solid rgba(100,116,139,0.2); }
.rank-green        { background: rgba(5,150,105,0.1); color: var(--emerald); border: 1px solid rgba(5,150,105,0.25); }
.rank-intermediate { background: rgba(29,78,216,0.1); color: var(--blue); border: 1px solid rgba(29,78,216,0.25); }
.rank-top          { background: rgba(217,119,6,0.12); color: var(--amber); border: 1px solid rgba(217,119,6,0.3); }

/* ════════════════════════════════════════════════════════════════
   POPULAR SERVICES SECTION (homepage)
════════════════════════════════════════════════════════════════ */
.section-services { background: var(--bg); }

/* ════════════════════════════════════════════════════════════════
   MOBILE — v9 improvements
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 40px 16px 44px; }
  .hero-title { letter-spacing: -1.5px; }
  .hero-stats { padding: 14px 18px; border-radius: 16px; }
  .hs-val { font-size: 1.45rem; }
  .hero-stat { padding: 0 12px; }

  .dual-path-section { padding: 32px 16px; }
  .dual-path-card { padding: 24px 20px; }

  .trust-section { padding: 36px 16px; }
  .trust-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .trust-card { padding: 20px 16px; }
  .trust-card-icon { width: 42px; height: 42px; font-size: 1.3rem; margin-bottom: 12px; }

  .mp-hero { padding: 36px 16px 28px; }
  .mp-featured-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Sticky CTA on mobile for auction card */
  .mob-sticky-cta {
    position: fixed; bottom: 70px; left: 0; right: 0;
    padding: 12px 16px; background: rgba(255,255,255,0.97);
    border-top: 1px solid var(--b1); z-index: 400;
    display: flex; gap: 10px; align-items: center;
    backdrop-filter: blur(16px);
  }
  .mob-sticky-cta .btn-primary { flex: 1; text-align: center; }

  /* Bottom nav v9 improvements */
  .mob-bottom-nav {
    background: rgba(255,255,255,0.99);
    border-top: 1.5px solid var(--b1);
    box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
  }
  .mob-nav-item.active { color: var(--cyan); }
  .mob-nav-item.active .mob-nav-icon {
    background: rgba(8,145,178,0.1); border-radius: 8px;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .mp-featured-grid { grid-template-columns: 1fr; }
  .trust-cards { grid-template-columns: 1fr; }
  .dual-path-inner { gap: 14px; }
  .dp-title { font-size: 1.15rem; }
}

/* ════════════════════════════════════════════════════════════════
   MOTION — hover lifts & transitions improved
════════════════════════════════════════════════════════════════ */
.big-card, .auction-card, .mp-service-card, .won-card,
.cat-tile, .trust-card, .dual-path-card {
  will-change: transform;
}

/* Smooth entrance animation for grids */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auction-grid .auction-card,
.mp-featured-grid .mp-service-card,
.mp-grid .mp-service-card {
  animation: fade-up 0.38s ease both;
}
.auction-grid .auction-card:nth-child(1),
.mp-featured-grid .mp-service-card:nth-child(1) { animation-delay: 0.0s; }
.auction-grid .auction-card:nth-child(2),
.mp-featured-grid .mp-service-card:nth-child(2) { animation-delay: 0.05s; }
.auction-grid .auction-card:nth-child(3),
.mp-featured-grid .mp-service-card:nth-child(3) { animation-delay: 0.1s; }
.auction-grid .auction-card:nth-child(4),
.mp-featured-grid .mp-service-card:nth-child(4) { animation-delay: 0.15s; }
.auction-grid .auction-card:nth-child(5),
.mp-grid .mp-service-card:nth-child(5) { animation-delay: 0.2s; }
.auction-grid .auction-card:nth-child(6),
.mp-grid .mp-service-card:nth-child(6) { animation-delay: 0.25s; }

/* ════════════════════════════════════════════════════════════════
   VERIFIED SELLER BADGE on cards
════════════════════════════════════════════════════════════════ */
.mp-card-verified-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: var(--emerald); font-weight: 600;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════
   XRPL ESCROW HIGHLIGHT BADGE
════════════════════════════════════════════════════════════════ */
.xrpl-escrow-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(109,40,217,0.08), rgba(8,145,178,0.08));
  border: 1.5px solid rgba(109,40,217,0.2);
  border-radius: var(--pill); padding: 5px 14px;
  font-size: 0.76rem; font-weight: 700; color: var(--violet);
}

/* ════════════════════════════════════════════════════════════════
   SECTION TRANSITIONS
════════════════════════════════════════════════════════════════ */
.section-services .section-title,
.trust-section-title { position: relative; }

/* ════════════════════════════════════════════════════════════════
   TOAST — v9 cleaner
════════════════════════════════════════════════════════════════ */
.toast {
  background: #fff;
  border-left: 4px solid var(--cyan2);
  color: var(--t);
  box-shadow: 0 8px 32px rgba(15,23,42,0.14);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.88rem; font-weight: 600;
  animation: toast-in 0.28s ease;
}
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast.success { border-left-color: var(--emerald); }
.toast.error   { border-left-color: var(--red2); }
.toast.warning { border-left-color: var(--amber); }

/* ════════════════════════════════════════════════════════════════
   SELLER PROFILE PAGE — v9
════════════════════════════════════════════════════════════════ */
.seller-profile-banner {
  height: 180px; border-radius: 20px;
  background: var(--grd-brand); overflow: hidden;
  position: relative; margin-bottom: -50px;
}
.seller-profile-avatar-wrap {
  position: relative; width: 100px; height: 100px; z-index: 2;
  margin-left: 28px;
}
.seller-profile-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  border: 4px solid #fff; box-shadow: var(--shadow-lg);
}
.seller-profile-rank { position: absolute; bottom: 0; right: 0; }

/* ════════════════════════════════════════════════════════════════
   BIG CARD — v9 improved badge
════════════════════════════════════════════════════════════════ */
.big-card {
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.07);
}
.big-card:hover {
  box-shadow: 0 28px 56px rgba(15,23,42,0.15), 0 8px 20px rgba(15,23,42,0.07);
  border-color: rgba(8,145,178,0.3);
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — v9
════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 2px solid var(--b1);
}

/* ════════════════════════════════════════════════════════════════
   FORM INPUTS — v9 unified
════════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], textarea, select {
  transition: border-color 0.18s, box-shadow 0.18s;
}
input[type="text"]:focus, input[type="email"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
}


/* ════════════════════════════════════════════════════════════════
   MODE SWITCH — Premium segmented hero toggle (v10)
════════════════════════════════════════════════════════════════ */

/* ── Segmented pill container ── */
.hero-mode-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.88);
  border: 1.5px solid rgba(15,23,42,0.10);
  border-radius: var(--pill);
  padding: 5px;
  gap: 2px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  width: fit-content;
}

.hms-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--pill);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--t3);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  outline: none;
  letter-spacing: -0.01em;
  min-width: 150px;
  justify-content: center;
}

.hms-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(8,145,178,0.35);
}

.hms-tab-icon {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-tab:hover .hms-tab-icon {
  transform: scale(1.18);
}

.hms-tab-label { line-height: 1; }

.hms-tab.active {
  color: #fff;
  box-shadow: 0 4px 18px rgba(8,145,178,0.35);
}

.hms-tab.active[data-mode="auctions"] {
  background: linear-gradient(135deg, #0891B2 0%, #6D28D9 100%);
  box-shadow: 0 4px 20px rgba(8,145,178,0.4);
}

.hms-tab.active[data-mode="marketplace"] {
  background: linear-gradient(135deg, #059669 0%, #0891B2 100%);
  box-shadow: 0 4px 20px rgba(5,150,105,0.4);
}

.hms-tab.active .hms-tab-icon {
  transform: scale(1.12);
}

/* Live dot on auctions tab */
.hms-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: hmsDotPulse 1.4s ease infinite;
}

@keyframes hmsDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.75); }
}

/* ── Hero content panels (swap in/out) ── */
.hero-panel {
  display: none;
  animation: heroPanelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-panel.active {
  display: contents;
}

@keyframes heroPanelIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero left/right wrapper with transition */
.hero-content-wrap {
  display: contents;
}

/* ── Sticky compact mode switch (appears in navbar on scroll) ── */
.sticky-mode-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 2px 20px rgba(15,23,42,0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  transform: translateY(-110%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  height: 58px;
}

.sticky-mode-bar.visible {
  transform: translateY(0);
}

.smb-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--t);
  text-decoration: none;
  letter-spacing: -0.5px;
}

.smb-switch {
  display: inline-flex;
  align-items: center;
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  border-radius: var(--pill);
  padding: 4px;
  gap: 2px;
}

.smb-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: var(--pill);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  outline: none;
}

.smb-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(8,145,178,0.35);
}

.smb-tab.active[data-mode="auctions"] {
  background: linear-gradient(135deg, #0891B2, #6D28D9);
  color: #fff;
  box-shadow: 0 2px 12px rgba(8,145,178,0.32);
}

.smb-tab.active[data-mode="marketplace"] {
  background: linear-gradient(135deg, #059669, #0891B2);
  color: #fff;
  box-shadow: 0 2px 12px rgba(5,150,105,0.32);
}

.smb-cta {
  font-size: 0.8rem; font-weight: 700;
  padding: 8px 18px; border-radius: var(--pill);
  background: var(--grd-brand); color: #fff;
  border: none; cursor: pointer;
  transition: filter 0.18s, transform 0.18s;
}

.smb-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Hero right panel: marketplace preview cards ── */
.hero-mp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-mp-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hero-mp-card:hover {
  border-color: rgba(5,150,105,0.4);
  box-shadow: 0 8px 28px rgba(5,150,105,0.12);
  transform: translateY(-3px);
}

.hero-mp-card--featured {
  grid-column: 1 / -1;
}

.hmp-cover {
  width: 100%; aspect-ratio: 16/9;
  border-radius: 10px; overflow: hidden;
  background: var(--bg3); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}

.hmp-cover img {
  width: 100%; height: 100%; object-fit: cover;
}

.hmp-seller {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
}

.hmp-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--b1); flex-shrink: 0;
}

.hmp-seller-name {
  font-size: 0.72rem; font-weight: 600; color: var(--t3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hmp-verified {
  font-size: 0.65rem; background: rgba(5,150,105,0.1);
  color: var(--emerald); border-radius: var(--pill);
  padding: 2px 6px; font-weight: 700; flex-shrink: 0;
}

.hmp-title {
  font-size: 0.82rem; font-weight: 700; color: var(--t);
  margin-bottom: 7px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.hmp-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}

.hmp-stars {
  display: flex; align-items: center; gap: 3px;
  font-size: 0.7rem; color: var(--amber);
  font-weight: 700;
}

.hmp-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem; font-weight: 900;
  color: var(--emerald);
}

.hmp-escrow-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(5,150,105,0.12);
  color: var(--emerald);
  font-size: 0.6rem; font-weight: 700;
  padding: 3px 7px; border-radius: var(--pill);
  border: 1px solid rgba(5,150,105,0.2);
  backdrop-filter: blur(4px);
}

/* Hero right: animated accent bar for mode identity */
.hero-mode-accent {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 0 0 var(--rad) var(--rad);
  transition: background 0.4s;
}

.hero-mode-accent.auctions {
  background: linear-gradient(90deg, #0891B2, #6D28D9);
}

.hero-mode-accent.marketplace {
  background: linear-gradient(90deg, #059669, #0891B2);
}

/* ── Animated hero background gradient shift per mode ── */
.hero {
  transition: background 0.5s ease;
}

.hero.mode-auctions {
  /* default – existing grd-hero */
  background: var(--grd-hero);
}

.hero.mode-marketplace {
  background: linear-gradient(145deg, #F0FDF4 0%, #ECFDF5 40%, #EFF6FF 70%, #F8FAFC 100%);
}

/* ── Hero title accent span color per mode ── */
.hero-accent-auctions { color: var(--cyan); }
.hero-accent-marketplace { color: var(--emerald); }

/* ── Slide/fade animation on hero content switch ── */
.hero-left-inner {
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-left-inner.switching {
  opacity: 0;
  transform: translateX(-16px);
}

.hero-right-inner {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-right-inner.switching {
  opacity: 0;
  transform: translateX(16px);
}

/* ── Mobile: make switch full-width, touch-friendly ── */
@media (max-width: 640px) {
  .hero-mode-switch {
    width: 100%;
    max-width: 360px;
  }

  .hms-tab {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    font-size: 0.82rem;
  }

  .sticky-mode-bar {
    padding: 8px 16px;
    height: 54px;
  }

  .smb-tab {
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .smb-cta {
    display: none; /* hide extra CTA on very small screens */
  }

  .smb-logo { font-size: 1rem; }
}

@media (max-width: 480px) {
  .hero-mp-grid {
    grid-template-columns: 1fr;
  }
  .hero-mp-card--featured {
    grid-column: 1;
  }
}

/* ── Hero eyebrow per mode ── */
.hero-eyebrow-mp {
  background: rgba(5,150,105,0.12);
  border-color: rgba(5,150,105,0.22);
  color: var(--emerald);
}

.hero-eyebrow-mp .eyebrow-dot {
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(5,150,105,0.18);
}


/* ════════════════════════════════════════════════════════════════
   NAV MODE SWITCH — global header segmented control (v10.1)
   Sliding pill highlight, route-aware active state, mobile-ready
════════════════════════════════════════════════════════════════ */

/* ── outer wrapper sits in the nav-inner flex row ── */
.nav-switch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── the pill track ── */
.nav-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  border-radius: var(--pill);
  padding: 4px;
  gap: 0;
  box-shadow: inset 0 1px 3px rgba(15,23,42,0.06);
  transition: box-shadow 0.2s;
}

.nav-switch:focus-within {
  box-shadow: 0 0 0 3px rgba(8,145,178,0.18),
              inset 0 1px 3px rgba(15,23,42,0.06);
}

/* ── sliding highlight (pseudo-element on the track) ──
   JS moves --ns-x (translateX) and --ns-w (width) to match
   the active tab. Falls back gracefully without JS. */
.nav-switch::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: var(--ns-w, 50%);
  transform: translateX(var(--ns-x, 0px));
  border-radius: var(--pill);
  background: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.06);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.26s;
  z-index: 0;
  pointer-events: none;
}

/* Suppress ::before transition during initial positioning */
.nav-switch.ns-no-transition::before {
  transition: none !important;
}

/* Active-auctions: highlight becomes brand-blue gradient */
.nav-switch[data-active="auctions"]::before {
  background: linear-gradient(135deg, #0891B2 0%, #6D28D9 100%);
  box-shadow: 0 3px 14px rgba(8,145,178,0.38), 0 1px 3px rgba(15,23,42,0.06);
}

/* Active-marketplace: highlight becomes emerald gradient */
.nav-switch[data-active="marketplace"]::before {
  background: linear-gradient(135deg, #059669 0%, #0891B2 100%);
  box-shadow: 0 3px 14px rgba(5,150,105,0.36), 0 1px 3px rgba(15,23,42,0.06);
}

/* ── individual tab buttons ── */
.ns-tab {
  position: relative; z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--pill);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--t3);
  white-space: nowrap;
  transition: color 0.22s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  letter-spacing: -0.01em;
}

/* When the sliding track is underneath this tab, text becomes white */
.nav-switch[data-active="auctions"]   .ns-tab[data-tab="auctions"],
.nav-switch[data-active="marketplace"] .ns-tab[data-tab="marketplace"] {
  color: #fff;
}

/* Inactive tab hover: subtle text darkening */
.ns-tab:hover { color: var(--t); }
.nav-switch[data-active="auctions"]   .ns-tab[data-tab="auctions"]:hover,
.nav-switch[data-active="marketplace"] .ns-tab[data-tab="marketplace"]:hover {
  color: rgba(255,255,255,0.9);
}

/* Focus ring (keyboard nav) */
.ns-tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(8,145,178,0.35);
  border-radius: var(--pill);
}

/* ── tab icon ── */
.ns-icon {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
}

.ns-tab:hover .ns-icon,
.nav-switch[data-active="auctions"]   .ns-tab[data-tab="auctions"]   .ns-icon,
.nav-switch[data-active="marketplace"] .ns-tab[data-tab="marketplace"] .ns-icon {
  transform: scale(1.15);
}

/* ── live dot on auctions tab ── */
.ns-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: nsLivePulse 1.5s ease infinite;
  transition: background 0.2s;
}

/* When auctions is active, dot is white (on dark bg) */
.nav-switch[data-active="auctions"] .ns-tab[data-tab="auctions"] .ns-live {
  background: rgba(255,255,255,0.9);
}

@keyframes nsLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.72); }
}

/* ── optional sub-label below the switch ── */
.nav-switch-label {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--t4);
  text-align: center;
  white-space: nowrap;
  transition: color 0.28s, opacity 0.28s;
  opacity: 0.85;
  line-height: 1;
  min-height: 0.9em;       /* reserve space to prevent layout jump */
}

.nav-switch-label.mode-auctions  { color: var(--cyan); opacity: 1; }
.nav-switch-label.mode-marketplace { color: var(--emerald); opacity: 1; }

/* ── Medium screens: tighten switch tabs ── */
@media (max-width: 900px) {
  .ns-tab { padding: 7px 14px; font-size: 0.79rem; }
  .nav-switch-label { display: none; }
}

@media (max-width: 768px) {
  /* On mobile the search bar is hidden, so the switch gets more room */
  .nav-switch-wrap {
    flex: 1;
    align-items: center;
  }

  .nav-switch {
    width: 100%;
    max-width: 280px;
  }

  .ns-tab {
    flex: 1;
    justify-content: center;
    padding: 9px 10px;
    font-size: 0.77rem;
    gap: 5px;
    min-height: 40px;   /* comfortable tap target */
  }

  .ns-icon { font-size: 0.88rem; }
  .ns-live  { width: 5px; height: 5px; }
}

@media (max-width: 400px) {
  .ns-tab { font-size: 0.72rem; padding: 8px 8px; }
  /* Hide tab text on very small screens, keep icons only */
  .ns-tab-label { display: none; }
  .ns-icon { font-size: 1rem; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — complete responsive overhaul
   Layout: [Logo] [Switch·flex:1] [Right]
   Right = wallet pill OR compact connect button
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-inner {
    padding: 0 14px;
    height: 58px;
    gap: 10px;
    justify-content: space-between;
  }

  /* Logo — compact */
  .nav-logo {
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    flex-shrink: 0;
    gap: 1px;
  }
  .nav-logo-xrp { width: 18px; height: 18px; font-size: 0.5rem; margin-left: 4px; }

  /* Search hidden on mobile */
  .nav-search { display: none !important; }

  /* Switch — fills remaining space, centered */
  .nav-switch-wrap {
    flex: 1;
    align-items: center;
    min-width: 0;
  }
  .nav-switch {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }
  /* Sub-label hidden on mobile */
  .nav-switch-label { display: none !important; }

  .ns-tab {
    flex: 1;
    justify-content: center;
    padding: 8px 8px;
    font-size: 0.76rem;
    gap: 4px;
    min-height: 38px;
  }
  .ns-icon { font-size: 0.85rem; }
  .ns-live  { width: 5px; height: 5px; }

  /* Right side — compact, flex-shrink:0 */
  .nav-right {
    flex-shrink: 0;
    gap: 6px;
  }
  /* Hide Sell and Out/non-primary buttons */
  .nav-right .nav-btn:not(.primary) { display: none; }
  /* But keep Out when signed in, very compact */
  .nav-right button.nav-btn:not(.primary) { display: none; }
  /* Primary connect button — very compact */
  .nav-right .nav-btn.primary {
    display: inline-flex;
    font-size: 0.68rem;
    padding: 6px 10px;
    white-space: nowrap;
    max-width: 120px;
  }
  /* Wallet pill — compact */
  .nav-right .nav-wallet {
    display: inline-flex;
    font-size: 0.68rem;
    padding: 5px 9px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Hide Policies link always */
  #nav-legal-link { display: none !important; }
}

/* ── 480px and below: hide tab text, icons only ── */
@media (max-width: 480px) {
  .ns-tab-label { display: none; }
  .ns-icon { font-size: 1rem; }
  .ns-tab { padding: 8px 12px; }
  .nav-switch { max-width: 96px; }
}

/* ── Very small ── */
@media (max-width: 360px) {
  .nav-inner { padding: 0 10px; gap: 8px; }
  .nav-logo { font-size: 1.15rem; }
  .nav-switch { max-width: 88px; }
  .nav-right .nav-btn.primary { font-size: 0.62rem; padding: 5px 8px; }
}


/* ════════════════════════════════════════════════════════════════
   PROFESSIONAL OVERHAUL v11 — layout, alignment, polish
════════════════════════════════════════════════════════════════ */

/* ── Hamburger / mobile menu ── */
.nav-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs);
  background: var(--bg2);
  color: var(--t2);
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s;
}
.nav-menu-btn:hover { background: var(--bg); border-color: var(--b2); color: var(--t); }

/* Mobile slide-down drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--b1);
  padding: 12px 16px 16px;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  position: relative;
  z-index: 190;
}
.nav-drawer.open { display: flex; }
.nav-drawer .drawer-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; color: var(--t2);
  transition: all 0.16s;
  cursor: pointer;
  text-decoration: none;
}
.nav-drawer .drawer-link:hover { background: var(--bg2); color: var(--t); }
.nav-drawer .drawer-link.primary-link {
  background: var(--grd-brand); color: #fff;
  box-shadow: 0 2px 10px rgba(8,145,178,0.25);
}
.nav-drawer .drawer-link.primary-link:hover { filter: brightness(1.08); }
.nav-drawer .drawer-divider {
  height: 1px; background: var(--b1); margin: 4px 0;
}

/* ── Show hamburger on medium screens ── */
@media (max-width: 900px) {
  .nav-menu-btn { display: inline-flex; }
  /* Hide Sell, Policies in main navbar — they go in drawer */
  .nav-right .nav-btn:not(.primary),
  .nav-right a.nav-btn:not(.primary) {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Drawer covers wallet too — show compact wallet in nav for signed-in users */
  .nav-right .nav-btn.primary { max-width: 130px; }
}

/* ── Marketplace hero refinements ── */
.mp-hero {
  background: linear-gradient(150deg, #F0F9FF 0%, #EEF2FF 55%, #ECFDF5 100%) !important;
  color: var(--t) !important;
  border-bottom: 1px solid var(--b1);
  padding: 56px 24px 48px;
  text-align: center;
}
.mp-hero-inner {
  max-width: 660px;
  margin: 0 auto;
}
.mp-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: -1px;
  color: var(--t);
  margin-bottom: 14px;
  line-height: 1.15;
}
.mp-hero p {
  color: var(--t2);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Centered search bar */
.mp-search-bar {
  display: flex;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto 0;
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: var(--pill);
  padding: 4px 4px 4px 16px;
  box-shadow: 0 2px 16px rgba(15,23,42,0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mp-search-bar:focus-within {
  border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
}
.mp-search-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: var(--t) !important;
  font-size: 0.95rem;
  padding: 10px 0 !important;
  border-radius: 0 !important;
  outline: none;
  box-shadow: none !important;
}
.mp-search-input::placeholder { color: var(--t4); }
.mp-search-btn {
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--pill);
  padding: 10px 22px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.18s, transform 0.18s;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28);
}
.mp-search-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Trust badges */
.mp-hero-trust {
  display: flex;
  gap: 8px 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--b1);
}
.mp-hero-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--t2);
  white-space: nowrap;
}

/* ── Marketplace top-bar (category tabs + become seller) ── */
.mp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--b1);
}
.mp-cat-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  flex: 1;
  min-width: 0;
}
.mp-cat-tabs::-webkit-scrollbar { display: none; }
.mp-cat-tab {
  padding: 7px 16px;
  border-radius: var(--pill);
  border: 1.5px solid var(--b1);
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s;
}
.mp-cat-tab:hover {
  border-color: var(--cyan2);
  color: var(--cyan);
  background: rgba(8,145,178,0.04);
}
.mp-cat-tab.active {
  background: var(--grd-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(8,145,178,0.25);
}
.mp-become-seller-btn {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.84rem;
  padding: 9px 20px;
}

/* ── Service grid card improvements ── */
.mp-service-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.mp-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,23,42,0.12);
  border-color: var(--cyan2);
}
.mp-card-img-wrap { position: relative; overflow: hidden; }
.mp-card-img {
  width: 100%; height: 168px; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.mp-service-card:hover .mp-card-img { transform: scale(1.04); }
.mp-card-img-placeholder {
  background: linear-gradient(135deg, #e0f2fe 0%, #ddd6fe 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  height: 168px;
}
.mp-card-cat-overlay {
  position: absolute;
  bottom: 8px; left: 10px;
  background: rgba(15,23,42,0.65);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--pill);
  letter-spacing: 0.02em;
}
.mp-card-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mp-card-seller {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px; font-size: 0.79rem; color: var(--t3);
  font-weight: 600;
}
.mp-card-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--b1); flex-shrink: 0;
}
.mp-card-title {
  font-size: 0.93rem; font-weight: 700; color: var(--t);
  margin-bottom: 8px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.mp-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid var(--b1); margin-top: auto;
}
.mp-empty {
  text-align: center; padding: 64px 24px; color: var(--t3);
  grid-column: 1/-1; font-size: 0.96rem;
}
.mp-empty p { margin-bottom: 16px; }

/* ── Grid: 3 cols desktop, 2 tablet, 1 mobile ── */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Seller setup / form page hero band ── */
.page-hero-band {
  background: var(--grd-hero);
  border-bottom: 1px solid var(--b1);
  padding: 32px 24px 28px;
}
.page-hero-band-inner {
  max-width: 640px;
  margin: 0 auto;
}
.page-hero-band .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: var(--t3);
  margin-bottom: 12px; cursor: pointer;
  transition: color 0.16s;
}
.page-hero-band .back-link:hover { color: var(--cyan); }
.page-hero-band h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900; letter-spacing: -0.5px;
  color: var(--t); margin-bottom: 6px;
}
.page-hero-band p { color: var(--t2); font-size: 0.93rem; line-height: 1.55; }

/* ── Form card container ── */
.form-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 20px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(15,23,42,0.04);
}
.form-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 800; color: var(--t);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--b1);
  display: flex; align-items: center; gap: 8px;
}
.form-group {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  font-size: 0.78rem; font-weight: 700; color: var(--t2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.form-input, .form-select, .form-textarea {
  border: 1.5px solid var(--b1);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--t);
  background: var(--bg);
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  font-family: inherit;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
  background: #fff;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--t4); }

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--t3); flex-wrap: wrap;
}
.breadcrumb-item { cursor: pointer; transition: color 0.15s; }
.breadcrumb-item:hover { color: var(--cyan); }
.breadcrumb-sep { color: var(--t4); }

/* ── Page layout wrapper ── */
.page-layout {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 16px 120px;
}
.page-layout-wide {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px 120px;
}

/* ── Section headings ── */
.section-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem; font-weight: 800; color: var(--t);
  letter-spacing: -0.4px; margin-bottom: 6px;
}
.section-sub {
  font-size: 0.9rem; color: var(--t3); margin-bottom: 24px;
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--bg);
  border: 1.5px dashed var(--b1);
  border-radius: 20px;
}
.empty-state-icon { font-size: 3rem; margin-bottom: 14px; }
.empty-state h3 { font-size: 1.05rem; font-weight: 700; color: var(--t); margin-bottom: 8px; }
.empty-state p  { font-size: 0.88rem; color: var(--t3); margin-bottom: 20px; }

/* ── Responsive marketplace ── */
@media (max-width: 768px) {
  .mp-hero { padding: 40px 16px 36px; }
  .mp-hero h1 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .mp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .mp-top-bar { padding: 12px 0 10px; gap: 10px; }
  .mp-become-seller-btn { font-size: 0.79rem; padding: 8px 14px; }
}
@media (max-width: 600px) {
  .mp-hero { padding: 32px 14px 28px; }
  .mp-search-bar { padding: 3px 3px 3px 12px; }
  .mp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mp-card-img, .mp-card-img-placeholder { height: 130px; }
  .mp-card-body { padding: 10px 12px 12px; }
  .mp-top-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .mp-cat-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .mp-become-seller-btn { width: 100%; justify-content: center; text-align: center; }
  .form-card { padding: 20px 16px; }
  .page-layout { padding: 20px 12px 120px; }
}
@media (max-width: 400px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-card-img, .mp-card-img-placeholder { height: 160px; }
}

/* ── Bottom nav proper padding ── */
.mob-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Desktop: ensure nav items never overflow ── */
@media (min-width: 901px) {
  .nav-menu-btn { display: none !important; }
  .nav-drawer { display: none !important; }
  .nav-right .nav-btn { display: inline-flex; }
  .nav-right a.nav-btn { display: inline-flex; }
}

/* ── Marketplace service detail layout ── */
.mp-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .mp-detail-layout { grid-template-columns: 1fr; }
}

/* ── Orders page ── */
.mp-orders-tabs {
  display: flex; gap: 6px; margin-bottom: 24px;
  border-bottom: 1.5px solid var(--b1);
  padding-bottom: 0;
}
.mp-orders-tab {
  padding: 10px 20px; font-size: 0.85rem; font-weight: 700;
  color: var(--t3); border: none; background: none; cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: all 0.18s;
}
.mp-orders-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.mp-orders-tab:hover { color: var(--t); }

/* ── Toast container position ── */
#toast-container {
  position: fixed;
  top: 78px; right: 16px;
  z-index: 9000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: 320px;
}

/* ── Page transition fade ── */
#app { animation: pageFadeIn 0.18s ease; }
@keyframes pageFadeIn {
  from { opacity: 0.6; transform: translateY(4px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* ── Scrollbar refinement (Webkit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--t4); }


/* ── "Become a Seller" nav link — accent pill ── */
.cat-nav-link--seller {
  color: var(--emerald) !important;
  font-weight: 700;
  border-bottom-color: transparent !important;
  background: rgba(5,150,105,0.07);
  border-radius: 6px;
  margin-left: 8px;
}
.cat-nav-link--seller:hover {
  background: rgba(5,150,105,0.15) !important;
  color: var(--emerald) !important;
  border-color: transparent !important;
}

/* ── mp-link ── */
.mp-link {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.mp-link:hover { color: var(--cyan2); text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════
   WELCOME MODAL — shown to brand-new users after first sign-up
════════════════════════════════════════════════════════════════ */
.wm-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.wm-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 24px;
  width: 100%; max-width: 460px;
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(15,23,42,0.2);
  transform: scale(0.94) translateY(16px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1), opacity 0.24s ease;
  max-height: 90vh; overflow-y: auto;
}
.wm-card.wm-in {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Step 1 — Name setup */
.wm-confetti {
  font-size: 3.2rem; margin-bottom: 12px;
  animation: wmBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
@keyframes wmBounce {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.wm-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem; font-weight: 900; letter-spacing: -0.6px;
  color: var(--t); margin: 0 0 10px;
}
.wm-sub {
  font-size: 0.9rem; color: var(--t3); line-height: 1.6;
  margin: 0 0 24px; max-width: 320px; margin-left: auto; margin-right: auto;
}

.wm-username-wrap {
  background: var(--bg);
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 16px;
  text-align: left;
  overflow: visible;
}
.wm-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  color: var(--t2); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.wm-input-row {
  display: flex; gap: 8px;
}
.wm-input {
  flex: 1;
  border: 1.5px solid var(--b1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.93rem; color: var(--t);
  background: #fff;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
}
.wm-input:focus {
  border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
}
.wm-input::placeholder { color: var(--t4); }
.wm-save-btn {
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: 10px;
  padding: 10px 22px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: filter 0.18s;
  box-shadow: 0 2px 8px rgba(8,145,178,0.3);
  flex-shrink: 0; min-width: 110px;
  overflow: visible;
}
.wm-save-btn:hover { filter: brightness(1.1); }
.wm-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wm-input-hint {
  font-size: 0.72rem; color: var(--t4); margin-top: 6px; margin-bottom: 0;
}
.wm-error {
  font-size: 0.79rem; color: #ef4444; font-weight: 600;
  margin-top: 6px; margin-bottom: 0;
}
.wm-skip {
  background: none; border: none; cursor: pointer;
  font-size: 0.82rem; color: var(--t4);
  transition: color 0.15s; padding: 4px 8px;
  text-decoration: underline;
}
.wm-skip:hover { color: var(--t3); }

/* Step 2 — Features overview */
.wm-check {
  font-size: 3rem; margin-bottom: 12px;
  animation: wmBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.05s both;
}
.wm-features {
  display: flex; flex-direction: column; gap: 12px;
  margin: 4px 0 24px; text-align: left;
}
.wm-feature {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg); border: 1.5px solid var(--b1);
  border-radius: 14px; padding: 14px 16px;
  transition: border-color 0.16s;
}
.wm-feature:hover { border-color: var(--cyan2); }
.wm-feature-icon {
  font-size: 1.5rem; flex-shrink: 0; margin-top: 1px;
}
.wm-feature div { flex: 1; }
.wm-feature strong {
  display: block; font-size: 0.9rem; font-weight: 700;
  color: var(--t); margin-bottom: 2px;
}
.wm-feature span {
  font-size: 0.8rem; color: var(--t3); line-height: 1.45;
}
.wm-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.wm-actions .btn-primary,
.wm-actions .btn-secondary {
  width: 100%; justify-content: center;
}

@media (max-width: 600px) {
  .wm-card { padding: 28px 18px 28px; border-radius: 20px; }
  .wm-title { font-size: 1.4rem; }
  .wm-input-row { flex-direction: column; gap: 10px; }
  .wm-save-btn { width: 100%; min-width: unset; padding: 14px 20px; font-size: 1rem; }
}


/* ── Logo image styles ─────────────────────────────────────────────────────── */
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  /* Keep the glow crisp on dark nav */
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.35));
  transition: filter 0.2s, transform 0.2s;
}
.nav-logo:hover .nav-logo-img {
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
  transform: scale(1.04);
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.3));
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .nav-logo-img { height: 30px; }
  .footer-logo-img { height: 36px; }
}

/* ── Field Info Tooltips ─────────────────────────────────────────────────── */
.field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: .85rem;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 6px;
}
.field-required {
  color: #ef4444;
  font-weight: 700;
}
.field-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.field-info-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--cyan);
  font-size: .85rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity .15s;
}
.field-info-btn:hover { opacity: 1; }
.field-info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--bg);
  border: 1px solid var(--b1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 10px 14px;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--t2);
  min-width: 220px;
  max-width: 300px;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
/* Arrow */
.field-info-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--b1);
}

@media (max-width: 480px) {
  .field-info-tip {
    left: 0;
    transform: none;
    max-width: 260px;
  }
}

/* ── Marketplace: EscrowFinish approval overlay ─────────────────── */
#mp-finish-overlay {
  animation: fadeIn .2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Marketplace: payout status badges ──────────────────────────── */
.mp-payout-status { margin-top: 8px; font-size: .82rem; padding: 6px 10px; border-radius: 6px; }
.mp-payout-scheduled  { background: rgba(255,200,0,.1);  color: #f5c400; }
.mp-payout-processing { background: rgba(100,149,237,.1); color: #6495ed; }
.mp-payout-paid       { background: rgba(40,200,80,.1);  color: #28c850; }
.mp-payout-failed     { background: rgba(220,50,50,.1);  color: #dc3232; }


/* ── Bid transaction status bar ─────────────────────────────────── */
.bid-tx-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .88rem;
  margin-top: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  animation: fadeIn .2s ease;
}
.bid-tx-icon  { font-size: 1.1rem; flex-shrink: 0; }
.bid-tx-text  { flex: 1; }
.bid-tx-pending { border-color: rgba(100,149,237,.4); background: rgba(100,149,237,.08); color: #6495ed; }
.bid-tx-success { border-color: rgba(40,200,80,.4);  background: rgba(40,200,80,.08);  color: #28c850; }
.bid-tx-error   { border-color: rgba(220,50,50,.4);  background: rgba(220,50,50,.08);  color: #dc3232; }

/* ── Footer external blockchain links ───────────────────────────── */
.footer-ext-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  color: var(--t3, #aaa) !important;
}
.footer-ext-link:hover { color: var(--emr, #f60) !important; }

/* ── Auth gate: secondary mobile button ─────────────────────────── */
.ag-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.ag-btn-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.35);
}
#ag-mobile-hint { padding: 0 4px 8px; }


/* ── Ghost button for dark-background seller CTA section ───────── */
.btn-seller-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--rad-xs, 10px);
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-seller-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.65);
  transform: translateY(-1px);
}


/* ════════════════════════════════════════════════════════════════
   2050 HUD COUNTDOWN SYSTEM
   Futuristic glass-panel timer with state-driven glow + animations
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframe animations ─────────────────────────────────────── */
@keyframes countdownBlinkSoft {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.65; }
}
@keyframes countdownBlinkHard {
  0%,100% { opacity: 1; }
  45%     { opacity: 1; }
  50%     { opacity: 0.15; }
  55%     { opacity: 1; }
}
@keyframes countdownBlinkHyper {
  0%,100% { opacity: 1; }
  20%     { opacity: 1; }
  25%     { opacity: 0.05; }
  50%     { opacity: 1; }
  70%     { opacity: 1; }
  75%     { opacity: 0.05; }
}
@keyframes countdownPulseWarning {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  50%     { box-shadow: 0 0 0 8px rgba(251,191,36,0.18); }
}
@keyframes countdownPulseCritical {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%     { box-shadow: 0 0 0 12px rgba(239,68,68,0.22); }
}
@keyframes countdownRingPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes countdownScanline {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* ── Base shell ───────────────────────────────────────────────── */
.countdown-hud {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(8, 12, 22, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(6, 182, 212, 0.28);
  border-radius: 14px;
  padding: 14px 22px 12px;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  user-select: none;
}
.countdown-shell { /* alias — same as .countdown-hud */ }

/* ── Scanline overlay ─────────────────────────────────────────── */
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  animation: countdownScanline 8s linear infinite;
  opacity: 0.5;
  z-index: 0;
}

/* ── Text layers ──────────────────────────────────────────────── */
.countdown-label {
  position: relative; z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.75);
  margin-bottom: 2px;
}
.countdown-subtext {
  position: relative; z-index: 1;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(165, 243, 252, 0.45);
  margin-top: 2px;
}

/* ── Digit display ────────────────────────────────────────────── */
.countdown-digits {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.countdown-unit {
  display: inline-block;
  font-family: 'Space Grotesk', 'Courier New', monospace;
  font-size: 2.4rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  width: 2.8ch;
  text-align: center;
  letter-spacing: -0.02em;
  color: #e0f2fe;
  text-shadow: 0 0 12px rgba(6,182,212,0.6);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.countdown-sep {
  font-family: 'Space Grotesk', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: rgba(6,182,212,0.55);
  margin: 0 1px;
  align-self: center;
  line-height: 1;
  transition: color 0.3s ease;
}

/* ── Danger ring ──────────────────────────────────────────────── */
.danger-ring {
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  pointer-events: none;
  border: 2px solid rgba(239,68,68,0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ── Layout helpers ───────────────────────────────────────────── */
.countdown-centered  { margin: 0 auto; }
.countdown-full      { width: 100%; }
.countdown-inline    { display: inline-flex; }
.countdown-compact .countdown-unit { font-size: 1.6rem; width: 2.2ch; }
.countdown-compact .countdown-sep  { font-size: 1.4rem; }
.countdown-compact               { padding: 8px 14px 6px; }

/* ── State: NORMAL (cyan/blue) ────────────────────────────────── */
.timer-normal {
  border-color: rgba(6, 182, 212, 0.32);
}
.glow-normal {
  box-shadow:
    0 0 0 1px rgba(6,182,212,0.12) inset,
    0 4px 24px rgba(6,182,212,0.18),
    0 0 40px rgba(6,182,212,0.08);
}
.timer-normal .countdown-unit { color: #e0f2fe; text-shadow: 0 0 12px rgba(6,182,212,0.55); }
.timer-normal .countdown-sep  { color: rgba(6,182,212,0.5); }
.timer-normal .countdown-label,
.timer-normal .countdown-subtext { color: rgba(165,243,252,0.7); }

/* ── State: WARNING (amber/orange) ───────────────────────────── */
.timer-warning {
  border-color: rgba(251,191,36,0.45);
}
.glow-warning {
  box-shadow:
    0 0 0 1px rgba(251,191,36,0.15) inset,
    0 4px 24px rgba(251,146,60,0.25),
    0 0 40px rgba(251,191,36,0.12);
}
.timer-warning .countdown-unit { color: #fef3c7; text-shadow: 0 0 14px rgba(251,191,36,0.75); }
.timer-warning .countdown-sep  { color: rgba(251,191,36,0.6); }
.timer-warning .countdown-label,
.timer-warning .countdown-subtext { color: rgba(254,243,199,0.75); }
.pulse-warning { animation: countdownPulseWarning 1.6s ease-in-out infinite; }

/* ── State: CRITICAL (red/magenta) ───────────────────────────── */
.timer-critical {
  border-color: rgba(239,68,68,0.6);
  background: rgba(20, 8, 8, 0.88);
}
.glow-critical {
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.2) inset,
    0 4px 28px rgba(239,68,68,0.35),
    0 0 50px rgba(220,38,38,0.18);
}
.timer-critical .countdown-unit { color: #fee2e2; text-shadow: 0 0 16px rgba(239,68,68,0.9); }
.timer-critical .countdown-sep  { color: rgba(239,68,68,0.65); }
.timer-critical .countdown-label,
.timer-critical .countdown-subtext { color: rgba(254,202,202,0.8); }
.timer-critical .danger-ring    { opacity: 1; animation: countdownRingPulse 1.2s ease-out infinite; }
.pulse-critical { animation: countdownPulseCritical 0.9s ease-in-out infinite; }

/* ── Blink states ─────────────────────────────────────────────── */
.blink-soft .countdown-digits {
  animation: countdownBlinkSoft 2.4s ease-in-out infinite;
}
.blink-hard .countdown-digits {
  animation: countdownBlinkHard 1.0s steps(1, end) infinite;
}
.blink-hyper .countdown-digits {
  animation: countdownBlinkHyper 0.45s steps(1, end) infinite;
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blink-soft .countdown-digits,
  .blink-hard .countdown-digits,
  .blink-hyper .countdown-digits { animation: none; }
  .pulse-warning  { animation: none; }
  .pulse-critical { animation: none; }
  .timer-critical .danger-ring { animation: none; opacity: 0.6; }
  .scanline-overlay { animation: none; }
}

/* ── Bid stats row integration ────────────────────────────────── */
/* Replace old .bid-stat-box.highlight + #countdown with HUD */
.bid-stat-box .countdown-hud {
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
  box-shadow: none;
  gap: 0;
}
.bid-stat-box .countdown-hud .scanline-overlay { display: none; }
.bid-stat-box .countdown-hud .countdown-label  { display: none; }
.bid-stat-box .countdown-hud .countdown-subtext { display: none; }
.bid-stat-box .countdown-hud .danger-ring       { display: none; }
.bid-stat-box .countdown-hud .countdown-unit    { font-size: 1.6rem; width: 2.2ch; }
.bid-stat-box .countdown-hud .countdown-sep     { font-size: 1.4rem; }

/* ── HUD row layout (HUD + side stats) ───────────────────────── */
.hud-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}
.hud-row .countdown-hud {
  flex: 0 0 auto;
}
.hud-side-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.hud-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hud-stat-lbl {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 600;
}
.hud-stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t);
}
.hud-stat-val.gold { color: #f59e0b; }
@media (max-width: 480px) {
  .hud-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hud-side-stats { flex-direction: row; gap: 18px; }
  .countdown-hud { width: 100%; }
  .countdown-hud .countdown-unit { font-size: 2.0rem; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN FINANCE / TREASURY UI
   ════════════════════════════════════════════════════════════════ */

.admin-finance-shell {
  margin-top: 8px;
}

/* Sub-tabs for Finance section */
.af-sub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.af-sub-tab {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--t2);
  transition: all 0.18s ease;
}
.af-sub-tab:hover { background: rgba(255,255,255,0.09); color: var(--t); }
.af-sub-tab.active { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.55); color: #a5b4fc; }

.finance-sub-panel { }

/* Section headings */
.finance-section-head { margin-bottom: 16px; }
.finance-section-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--t); margin: 0 0 4px; }
.finance-section-sub { font-size: 0.78rem; color: var(--t3); margin: 0; }

/* Treasury / fee routes table */
.treasury-table th, .treasury-table td { white-space: nowrap; }
.treasury-table .addr-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; }
.treasury-table .mono { font-family: 'Courier New', monospace; }
.treasury-table .fw-600 { font-weight: 600; }

/* Finance badge pills */
.finance-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
}
.finance-badge-blue   { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.finance-badge-green  { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.finance-badge-amber  { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.finance-badge-purple { background: rgba(139,92,246,0.18); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3); }
.finance-badge-grey   { background: rgba(150,150,150,0.12); color: #9ca3af; border: 1px solid rgba(150,150,150,0.2); }

/* Chain badges */
.chain-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.chain-xrpl   { background: rgba(0,180,240,0.18); color: #67e8f9; border: 1px solid rgba(0,180,240,0.35); }
.chain-solana { background: rgba(147,51,234,0.18); color: #d8b4fe; border: 1px solid rgba(147,51,234,0.35); }

/* Status pill extras (reusing phase-badge) */
.phase-badge-red  { background: rgba(239,68,68,0.18); color: #fca5a5; }
.phase-badge-grey { background: rgba(107,114,128,0.18); color: #9ca3af; }

/* Inactive row dimming */
.finance-row-inactive { opacity: 0.45; }

/* Admin action button variants */
.btn-admin-ok     { background: rgba(34,197,94,0.2); border-color: rgba(34,197,94,0.4); color: #86efac; }
.btn-admin-danger { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.btn-admin-ok:hover     { background: rgba(34,197,94,0.35); }
.btn-admin-danger:hover { background: rgba(239,68,68,0.35); }

/* ── HUD inside auction cards (compact embedded mode) ─────────── */
/* Big card */
.big-card-body .countdown-hud {
  margin-top: 8px;
  padding: 8px 14px 6px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}
.big-card-body .countdown-hud .scanline-overlay { display: none; }
.big-card-body .countdown-hud .countdown-subtext { display: none; }
.big-card-body .countdown-hud .countdown-unit { font-size: 1.3rem; width: 2.2ch; }
.big-card-body .countdown-hud .countdown-sep  { font-size: 1.1rem; }
.big-card-body .countdown-hud .countdown-label {
  font-size: 0.55rem; letter-spacing: 0.14em; margin-bottom: 1px;
}

/* Standard card */
.card-body .countdown-hud {
  margin-top: 6px;
  padding: 6px 12px 5px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}
.card-body .countdown-hud .scanline-overlay { display: none; }
.card-body .countdown-hud .countdown-subtext { display: none; }
.card-body .countdown-hud .countdown-unit { font-size: 1.1rem; width: 2.2ch; }
.card-body .countdown-hud .countdown-sep  { font-size: 0.95rem; }
.card-body .countdown-hud .countdown-label {
  font-size: 0.52rem; letter-spacing: 0.13em; margin-bottom: 1px;
}
.card-body .countdown-hud .danger-ring { border-radius: 10px; }

/* ════════════════════════════════════════════════════════════════
   CARD COUNTDOWN HUD (.chud) — 2025 Glass-Morphism Segmented HUD
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes chudFlip {
  0%   { transform: scaleY(1)    translateY(0);     opacity: 1; }
  40%  { transform: scaleY(0.05) translateY(-2px);  opacity: 0; }
  60%  { transform: scaleY(0.05) translateY(2px);   opacity: 0; }
  100% { transform: scaleY(1)    translateY(0);     opacity: 1; }
}
@keyframes chudBlink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0.15; }
}
@keyframes chudNeonPulse {
  0%,100% { box-shadow:
    0 0 0 1px rgba(6,182,212,0.18),
    0 0 16px rgba(6,182,212,0.08),
    inset 0 0 12px rgba(6,182,212,0.04); }
  50%     { box-shadow:
    0 0 0 1px rgba(6,182,212,0.32),
    0 0 28px rgba(6,182,212,0.18),
    inset 0 0 18px rgba(6,182,212,0.08); }
}
@keyframes chudWarnPulse {
  0%,100% { box-shadow:
    0 0 0 1px rgba(245,158,11,0.2),
    0 0 18px rgba(245,158,11,0.10),
    inset 0 0 12px rgba(245,158,11,0.04); }
  50%     { box-shadow:
    0 0 0 1px rgba(245,158,11,0.38),
    0 0 32px rgba(245,158,11,0.22),
    inset 0 0 18px rgba(245,158,11,0.08); }
}
@keyframes chudCritPulse {
  0%,100% { box-shadow:
    0 0 0 1px rgba(239,68,68,0.28),
    0 0 22px rgba(239,68,68,0.14),
    inset 0 0 14px rgba(239,68,68,0.06); }
  50%     { box-shadow:
    0 0 0 1px rgba(239,68,68,0.55),
    0 0 38px rgba(239,68,68,0.28),
    inset 0 0 22px rgba(239,68,68,0.12); }
}
@keyframes chudScanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ── Root shell ─────────────────────────────────────────────────── */
.chud {
  position: relative;
  margin-top: 10px;
  padding: 9px 12px 10px;
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* Frosted glass base */
  background: linear-gradient(
    135deg,
    rgba(2, 10, 24, 0.82) 0%,
    rgba(4, 16, 36, 0.88) 50%,
    rgba(2, 10, 24, 0.82) 100%
  );
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  /* Neon border + glow */
  border: 1px solid rgba(6,182,212,0.22);
  animation: chudNeonPulse 3.5s ease-in-out infinite;
}

/* Scanline shimmer — subtle sweep effect */
.chud::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(6,182,212,0.04) 50%,
    transparent 100%
  );
  height: 40%;
  animation: chudScanline 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Top edge light streak */
.chud::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.6) 50%, transparent 100%);
  z-index: 1;
}

/* ── State variants ─────────────────────────────────────────────── */
.chud-warning {
  border-color: rgba(245,158,11,0.28);
  animation: chudWarnPulse 2.5s ease-in-out infinite;
}
.chud-warning::before {
  background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.6) 50%, transparent 100%);
}

.chud-critical {
  border-color: rgba(239,68,68,0.38);
  animation: chudCritPulse 1.1s ease-in-out infinite;
}
.chud-critical::before {
  background: linear-gradient(90deg, transparent 0%, rgba(239,68,68,0.7) 50%, transparent 100%);
}

/* ── Header row ─────────────────────────────────────────────────── */
.chud-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 7px;
  position: relative;
  z-index: 2;
}
.chud-lbl {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(103,232,249,0.72);
  white-space: nowrap;
}
.chud-warning  .chud-lbl { color: rgba(253,211,77,0.78); }
.chud-critical .chud-lbl { color: rgba(252,165,165,0.82); }

/* Decorative dot flanking the label */
.chud-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(6,182,212,0.5);
  box-shadow: 0 0 5px rgba(6,182,212,0.7);
  flex-shrink: 0;
}
.chud-warning  .chud-dot { background: rgba(245,158,11,0.6); box-shadow: 0 0 5px rgba(245,158,11,0.8); }
.chud-critical .chud-dot { background: rgba(239,68,68,0.65); box-shadow: 0 0 5px rgba(239,68,68,0.9); }

/* ── Body row (units + colons) ──────────────────────────────────── */
.chud-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* ── One time-unit block (pair of digits + label) ───────────────── */
.chud-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.chud-pair {
  display: flex;
  gap: 2px;
  justify-content: center;
}

/* ── Individual digit cell ──────────────────────────────────────── */
.chud-d {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fluid sizing: fills unit width, stays proportional */
  width: clamp(22px, 10vw, 34px);
  height: clamp(30px, 13vw, 44px);
  /* Segmented-display panel */
  background:
    linear-gradient(180deg,
      rgba(6,182,212,0.13) 0%,
      rgba(6,182,212,0.06) 49%,
      rgba(6,182,212,0.10) 51%,
      rgba(6,182,212,0.04) 100%
    );
  border: 1px solid rgba(6,182,212,0.22);
  border-radius: 5px;
  /* Fold-line effect at centre */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.35);
  /* LCD / segmented look */
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: clamp(1.1rem, 5.5vw, 1.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #cffafe;
  text-shadow:
    0 0 8px  rgba(6,182,212,0.9),
    0 0 18px rgba(6,182,212,0.5),
    0 0 32px rgba(6,182,212,0.25);
  position: relative;
  will-change: transform, opacity;
}

/* Centre fold line */
.chud-d::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Warning state */
.chud-warning .chud-d {
  border-color: rgba(245,158,11,0.28);
  background:
    linear-gradient(180deg,
      rgba(245,158,11,0.14) 0%,
      rgba(245,158,11,0.07) 49%,
      rgba(245,158,11,0.11) 51%,
      rgba(245,158,11,0.04) 100%
    );
  color: #fef3c7;
  text-shadow:
    0 0 8px  rgba(245,158,11,0.95),
    0 0 18px rgba(245,158,11,0.55),
    0 0 32px rgba(245,158,11,0.28);
}

/* Critical state */
.chud-critical .chud-d {
  border-color: rgba(239,68,68,0.32);
  background:
    linear-gradient(180deg,
      rgba(239,68,68,0.14) 0%,
      rgba(239,68,68,0.07) 49%,
      rgba(239,68,68,0.11) 51%,
      rgba(239,68,68,0.04) 100%
    );
  color: #fee2e2;
  text-shadow:
    0 0 8px  rgba(239,68,68,1),
    0 0 18px rgba(239,68,68,0.65),
    0 0 32px rgba(239,68,68,0.35);
}

/* Seconds — slightly smaller/softer for depth */
.chud-d-sec {
  width:   clamp(19px, 8.5vw, 29px);
  height:  clamp(26px, 11vw,  38px);
  font-size: clamp(0.9rem, 4.5vw, 1.3rem);
  opacity: 0.85;
}

/* ── Flip animation ─────────────────────────────────────────────── */
.chud-d.chud-flip {
  animation: chudFlip 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Colon separator ────────────────────────────────────────────── */
.chud-colon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 18px;
  flex-shrink: 0;
  /* Align dots with digit mid-point, offset from top for sub-label space */
  padding-top: 6px;
  padding-bottom: 16px;
}
.chud-colon span {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(6,182,212,0.85);
  box-shadow: 0 0 7px rgba(6,182,212,0.9), 0 0 14px rgba(6,182,212,0.4);
  animation: chudBlink 1s steps(1, end) infinite;
}
.chud-colon span:nth-child(2) { animation-delay: 0s; }
.chud-colon span:nth-child(1) { animation-delay: 0.5s; }

.chud-warning  .chud-colon span {
  background: rgba(245,158,11,0.9);
  box-shadow: 0 0 7px rgba(245,158,11,0.9), 0 0 14px rgba(245,158,11,0.4);
}
.chud-critical .chud-colon span {
  background: rgba(239,68,68,0.95);
  box-shadow: 0 0 7px rgba(239,68,68,1), 0 0 14px rgba(239,68,68,0.5);
}

/* ── Unit sub-label (HRS / MIN / SEC) ───────────────────────────── */
.chud-unit-lbl {
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(103,232,249,0.42);
  text-align: center;
  white-space: nowrap;
}
.chud-warning  .chud-unit-lbl { color: rgba(253,211,77,0.45); }
.chud-critical .chud-unit-lbl { color: rgba(252,165,165,0.5); }

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chud-d.chud-flip   { animation: none; }
  .chud-colon span    { animation: none; }
  .chud, .chud::after { animation: none; }
}

/* ── Compact override when inside narrow card-body ──────────────── */
.card-body .chud,
.big-card-body .chud {
  margin-top: 8px;
  padding: 8px 10px 9px;
}

/* ══════════════════════════════════════════════════════════════════
   S2 DESIGN SYSTEM — 2025 Arena Auction UI
   High-conversion, urgency-forward, mobile-first
══════════════════════════════════════════════════════════════════ */

/* ── S2 HERO ────────────────────────────────────────────────────── */
.s2-hero {
  position: relative;
  background: linear-gradient(150deg, #EEF2FF 0%, #F0F9FF 45%, #ECFDF5 100%);
  border-bottom: 1px solid var(--b1);
  overflow: hidden;
  padding: 52px 24px 56px;
}
.s2-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 50%, rgba(8,145,178,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 96% 15%, rgba(109,40,217,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.s2-hero-inner {
  position: relative; z-index: 1;
  max-width: 1360px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}
.s2-hero-left { display: flex; flex-direction: column; gap: 0; }

.s2-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.67rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 20px;
  background: rgba(8,145,178,0.07); border: 1.5px solid rgba(8,145,178,0.2);
  border-radius: var(--pill); padding: 6px 18px;
  width: fit-content;
}
.s2-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald); flex-shrink: 0;
  animation: glow-pulse 2.5s ease infinite;
}
.s2-eyebrow-live {
  background: var(--red2); color: #fff;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.1em;
  border-radius: var(--pill); padding: 2px 8px;
  animation: badge-pulse 1.5s ease infinite;
}

.s2-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900; letter-spacing: -2px; color: var(--t);
  margin-bottom: 18px; line-height: 1.1;
}
.s2-hero-accent {
  background: var(--grd-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s2-hero-sub {
  color: var(--t2); font-size: 1rem; line-height: 1.7;
  max-width: 520px; margin-bottom: 24px;
}

/* Hero auction flow steps */
.s2-hero-flow {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 28px;
}
.s2-hf-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--t2);
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--pill); padding: 5px 12px;
  white-space: nowrap;
}
.s2-hf-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--grd-brand); color: #fff;
  font-size: 0.62rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.s2-hf-step-win { border-color: var(--emerald); color: var(--emerald); font-weight: 700; }
.s2-hf-step-win .s2-hf-num { background: var(--grd-emerald); }
.s2-hf-arrow { font-size: 0.9rem; color: var(--t4); }

.s2-hero-actions {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}

/* Hero stats */
.s2-hero-stats {
  display: inline-flex; align-items: center;
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-lg); padding: 16px 24px;
  box-shadow: var(--shadow-xl);
  width: fit-content; flex-wrap: wrap; gap: 0;
}
.s2-hero-stat { text-align: center; padding: 0 16px; }
.s2-hs-div { width: 1px; height: 36px; background: var(--b1); }
.s2-hs-val {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem; font-weight: 900; color: var(--t);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.s2-hs-live { color: var(--red2); }
.s2-hs-price { color: var(--emerald); }
.s2-hs-urgent { color: var(--amber); animation: badge-pulse 2s ease infinite; }
.s2-hs-lbl {
  font-size: 0.58rem; color: var(--t3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 4px; display: block;
}

/* Hero right / featured card */
.s2-hero-right { display: flex; flex-direction: column; }

/* Hero empty state */
.s2-hero-placeholder {
  background: #fff; border: 2px dashed var(--b2);
  border-radius: var(--rad-lg); padding: 48px 32px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.s2-hp-icon { font-size: 3rem; }
.s2-hp-title { font-size: 1.1rem; font-weight: 700; color: var(--t); }
.s2-hp-sub   { font-size: 0.85rem; color: var(--t3); }

/* ── S2 SECTIONS ────────────────────────────────────────────────── */
.s2-section { padding: 52px 0; }
.s2-section-inner { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
.s2-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.s2-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem; font-weight: 800; color: var(--t);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.4px;
}
.s2-section-sub { font-size: 0.8rem; color: var(--t3); font-weight: 500; }
.s2-see-all {
  background: #fff; color: var(--cyan);
  border: 1.5px solid rgba(8,145,178,0.25);
  border-radius: var(--pill); padding: 7px 18px;
  font-size: 0.8rem; font-weight: 700;
  transition: all 0.18s;
}
.s2-see-all:hover {
  background: rgba(6,182,212,0.05); border-color: var(--cyan2);
  box-shadow: var(--glow-cyan);
}

/* Section variants */
.s2-section-white { background: #fff; border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
.s2-section-alt   { background: var(--bg2); border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1); }
.s2-section-dark  {
  background: var(--bg2);
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  color: var(--t);
}
.s2-section-dark .s2-section-title { color: var(--t); }
.s2-section-dark .s2-section-sub   { color: var(--t3); }
.s2-section-won {
  background: linear-gradient(180deg, #ECFDF5 0%, #F0FDF4 100%);
  border-top: 1px solid #A7F3D0; border-bottom: 1px solid #A7F3D0;
}

/* Urgent section — amber glow */
/* Final bidding section — hot red, always visible on all screen sizes */
.s2-section-bidding {
  background: linear-gradient(180deg, #1a0a0a 0%, #2d0808 100%);
  border-top: 2px solid rgba(220,38,38,0.5); border-bottom: 2px solid rgba(220,38,38,0.5);
}
.s2-section-bidding .s2-section-title { color: #fff; }
.s2-section-bidding .s2-section-sub   { color: rgba(255,255,255,0.6); }
/* On desktop (≥960px): hide the mobile bidding strip since hero card already shows it */
@media (min-width: 961px) {
  .s2-mobile-bidding-section { display: none; }
}

.s2-section-urgent {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border-top: 2px solid #FDE68A; border-bottom: 2px solid #FDE68A;
}
.s2-section-urgent .s2-section-title { color: var(--amber); }

/* Live badge */
.s2-live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(220,38,38,0.08); color: var(--red2);
  border: 1.5px solid rgba(220,38,38,0.22); border-radius: var(--pill);
  padding: 5px 14px; font-size: 0.67rem; font-weight: 900; letter-spacing: 0.1em;
}
.s2-live-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red2); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
/* Small inline live dot */
.s2-live-dot-sm {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red2); animation: blink 0.85s ease infinite;
}
.s2-live-dot-green { background: var(--emerald); }

/* Urgent pulsing dot for section title */
.s2-urgent-pulse-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); animation: blink 0.85s ease infinite;
}

/* ── S2 GRID ─────────────────────────────────────────────────────── */
.s2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.s2-grid-tight { gap: 16px; }
@media (max-width: 600px) {
  .s2-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── S2 CARDS ────────────────────────────────────────────────────── */
.s2-card {
  background: var(--surface);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad);
  overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s ease, box-shadow 0.24s, border-color 0.24s;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 320px;
}
.s2-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(8,145,178,0.22);
}

/* Urgent card border glow */
.s2-card-urgent {
  border-color: rgba(245,158,11,0.35);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(245,158,11,0.12);
}
.s2-card-urgent:hover {
  border-color: rgba(245,158,11,0.55);
  box-shadow: var(--shadow-card-hover), 0 0 16px rgba(245,158,11,0.18);
}

/* Final bidding card */
.s2-card.s2-card-featured { min-height: 380px; }

/* Card image area */
.s2-card-image {
  position: relative;
  overflow: hidden; background: var(--bg2);
  height: 220px;
}
.s2-card-image-sm { height: 180px; }

.s2-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.42s ease;
}
.s2-card:hover .s2-card-img { transform: scale(1.05); }

.s2-card-img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; background: var(--bg3);
}

.s2-card-img-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(15,23,42,0.25) 100%);
}

/* Image badges */
.s2-badge {
  position: absolute; top: 11px; left: 11px; z-index: 3;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em;
  border-radius: var(--pill); padding: 4px 11px;
  display: flex; align-items: center; gap: 5px;
}
.s2-badge-hot {
  background: var(--red2); color: #fff;
  box-shadow: 0 2px 10px rgba(239,68,68,0.45);
  animation: badge-pulse 1.5s ease infinite;
}
.s2-badge-urgent {
  background: var(--amber); color: #fff;
  box-shadow: 0 2px 10px rgba(217,119,6,0.45);
}
.s2-badge-popular {
  background: var(--violet); color: #fff;
  box-shadow: 0 2px 10px rgba(109,40,217,0.45);
}

/* Pool chip top-right */
.s2-card-pool-chip {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  background: rgba(255,255,255,0.95); color: var(--t);
  font-size: 0.68rem; font-weight: 800;
  border-radius: var(--pill); padding: 3px 11px;
  box-shadow: var(--shadow-sm);
}

/* Estimated value overlay (bottom of image) */
.s2-card-value-tag {
  position: absolute; bottom: 11px; left: 11px; z-index: 3;
  background: rgba(15,23,42,0.78); color: #fff;
  font-size: 0.68rem; font-weight: 600;
  border-radius: var(--pill); padding: 4px 12px;
  backdrop-filter: blur(4px);
}
.s2-card-value-tag strong { color: #67E8F9; }

/* Hover CTA overlay */
.s2-card-hover-cta {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.55);
  color: #fff; font-size: 0.9rem; font-weight: 800;
  opacity: 0; transition: opacity 0.22s;
  backdrop-filter: blur(2px);
  border-bottom: none;
}
.s2-card:hover .s2-card-hover-cta { opacity: 1; }

/* Live ring */
.s2-live-ring {
  position: absolute; bottom: 11px; right: 11px; z-index: 3;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red2);
  animation: blink 0.85s ease infinite;
}

/* Pulse dot */
.s2-pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red2);
  animation: blink 0.85s ease infinite; flex-shrink: 0;
}

/* ── Card body ─────────────────────────────────────────────────── */
.s2-card-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}

.s2-card-title {
  font-weight: 700; font-size: 0.95rem; color: var(--t);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Estimated value badge inside card body */
.s2-est-value-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--t2); font-weight: 600;
  background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.18);
  border-radius: var(--rad-xs); padding: 3px 10px;
  width: fit-content;
}
.s2-est-value-badge strong { color: var(--emerald); font-weight: 800; }

/* Competition stats row */
.s2-card-competition {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--t3);
}
.s2-comp-bidders { font-weight: 600; color: var(--t2); }
.s2-comp-bidders strong { color: var(--cyan); }
.s2-comp-entry { font-weight: 700; color: var(--emerald); }
.s2-text-hot { color: var(--red2); font-weight: 700; }

/* Progress bar */
.s2-progress { display: flex; flex-direction: column; gap: 4px; }
.s2-progress-sm {}
.s2-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; color: var(--t3); font-weight: 600;
}
.s2-progress-label {}
.s2-progress-pct { font-weight: 800; color: var(--cyan); }
.s2-progress-track {
  height: 6px; background: var(--bg2); border-radius: 99px; overflow: hidden;
}
.s2-progress-fill {
  height: 100%; background: var(--grd-cyan);
  border-radius: 99px; transition: width 0.5s ease;
}
.s2-progress-warn { background: linear-gradient(90deg, var(--amber), #FBBF24); }
.s2-progress-urgent {
  background: linear-gradient(90deg, var(--red), var(--red2));
  animation: badge-pulse 1.5s ease infinite;
}
.s2-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: var(--t3); font-weight: 500;
}
.s2-progress-meta-sm { font-size: 0.65rem; }
.s2-text-urgent { color: var(--red2) !important; font-weight: 700; }

/* Stats chips */
.s2-card-stats-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.s2-stat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600;
  background: var(--bg2); border: 1px solid var(--b1);
  border-radius: var(--rad-xs); padding: 4px 10px;
}
.s2-stat-icon { font-size: 0.85rem; }
.s2-stat-chip strong { font-weight: 800; color: var(--t); }
.s2-stat-chip-bidders { background: rgba(8,145,178,0.06); border-color: rgba(8,145,178,0.15); }
.s2-stat-chip-bidders strong { color: var(--cyan); }
.s2-stat-chip-price { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.15); }
.s2-stat-chip-price strong { color: var(--emerald); }
.s2-stat-chip-bid { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.15); }
.s2-stat-chip-bid strong { color: var(--red2); }
.s2-stat-chip-hot { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.15); color: var(--red2); }
.s2-stat-chip-hot strong { color: var(--red2); }

/* Final bidding panel */
.s2-final-live-panel {
  background: rgba(220,38,38,0.04); border: 1px solid rgba(220,38,38,0.14);
  border-radius: var(--rad-xs); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.s2-final-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800; color: var(--red2);
}
.s2-final-label { font-weight: 800; color: var(--red2); font-size: 0.78rem; }

/* Final row (compact) */
.s2-final-row-sm {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.75rem; color: var(--red2); font-weight: 700;
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.14);
  border-radius: var(--rad-xs); padding: 6px 10px;
}
.s2-final-label-sm { font-weight: 700; flex: 1; }
.s2-top-bid-sm { font-size: 0.72rem; color: var(--t2); font-weight: 600; }
.s2-top-bid-sm strong { color: var(--t); font-weight: 800; }

/* Sold row */
.s2-sold-row {
  font-size: 0.75rem; color: var(--emerald); font-weight: 700;
  background: rgba(5,150,105,0.07); border: 1px solid rgba(5,150,105,0.15);
  border-radius: var(--rad-xs); padding: 6px 10px;
}

/* Card footer */
.s2-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--b1);
}
.s2-card-phase {
  font-size: 0.65rem; font-weight: 700;
  border-radius: var(--pill); padding: 3px 10px;
}
.s2-card-cta-link {
  font-size: 0.74rem; color: var(--cyan); font-weight: 700;
  transition: color 0.18s;
}
.s2-card:hover .s2-card-cta-link { color: var(--violet); }

/* Card CTA button */
.s2-card-cta {
  width: 100%; justify-content: center;
  margin-top: auto; padding: 11px 18px;
}

/* Urgency strip at bottom of card */
.s2-urgency-strip {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, rgba(245,158,11,0.1), rgba(245,158,11,0.06));
  border-top: 1px solid rgba(245,158,11,0.22);
  padding: 7px 14px;
  font-size: 0.68rem; font-weight: 700; color: var(--amber);
}
.s2-urgency-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
/* Red urgency for final bidding */
.s2-card.s2-card-urgent .s2-urgency-strip {
  background: linear-gradient(90deg, rgba(220,38,38,0.08), rgba(220,38,38,0.04));
  border-top-color: rgba(220,38,38,0.2);
  color: var(--red2);
}
.s2-card.s2-card-urgent .s2-urgency-dot { background: var(--red2); }

/* ── S2 BUTTONS ──────────────────────────────────────────────────── */
.s2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--rad-xs);
  font-family: inherit; font-weight: 700; cursor: pointer;
  transition: all 0.22s ease; text-decoration: none;
  font-size: 0.9rem; padding: 13px 26px;
  position: relative; overflow: hidden;
}
.s2-btn-primary {
  background: var(--grd-brand); color: #fff;
  box-shadow: 0 2px 12px rgba(8,145,178,0.28);
}
.s2-btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(8,145,178,0.38);
  transform: translateY(-2px);
}
.s2-btn-secondary {
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b2);
  box-shadow: var(--shadow-sm);
}
.s2-btn-secondary:hover {
  border-color: var(--cyan2); color: var(--cyan);
  box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.s2-btn-hot {
  background: linear-gradient(135deg, #DC2626, #EF4444); color: #fff;
  box-shadow: 0 2px 12px rgba(220,38,38,0.3);
  animation: badge-pulse 1.8s ease infinite;
}
.s2-btn-hot:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 24px rgba(220,38,38,0.4);
  transform: translateY(-2px);
  animation: none;
}

/* ── CATEGORY BADGE RAIL ─────────────────────────────────────────── */
.s2-cat-rail {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px;
}
.s2-cat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--t2);
  border: 1.5px solid var(--b1); border-radius: var(--pill);
  padding: 7px 16px; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.s2-cat-badge:hover {
  border-color: var(--cyan2); color: var(--cyan);
  background: rgba(6,182,212,0.04);
  box-shadow: var(--glow-cyan);
}

/* ── MOBILE RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .s2-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .s2-hero-right {
    display: none; /* hide featured card on mobile to keep hero clean */
  }
  .s2-hero { padding: 40px 20px 44px; }
  .s2-hero-stats {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
  }
  .s2-hero-stat { padding: 0 10px; }
  .s2-hs-val { font-size: 1.35rem; }
}

@media (max-width: 640px) {
  .s2-hero-title { font-size: 2rem; letter-spacing: -1px; }
  .s2-hero-sub { font-size: 0.9rem; }
  .s2-hero-flow { display: none; } /* hide on very small screens */
  .s2-hero-stats { gap: 0; }
  .s2-hs-div { display: none; }
  .s2-hero-stat { padding: 6px 10px; border: 1px solid var(--b1); border-radius: var(--rad-xs); }
  .s2-hero-stats {
    background: transparent; border: none; box-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 0;
  }

  .s2-section { padding: 36px 0; }
  .s2-section-inner { padding: 0 16px; }
  .s2-section-title { font-size: 1.2rem; }

  .s2-card-image { height: 160px; }
  .s2-card-image-sm { height: 150px; }
  .s2-card { min-height: 300px; }

  .s2-cat-rail { gap: 8px; }
  .s2-cat-badge { font-size: 0.74rem; padding: 6px 12px; }

  .s2-hero-actions { gap: 10px; }
  .s2-btn { font-size: 0.84rem; padding: 11px 20px; }
}

@media (max-width: 480px) {
  .s2-grid { grid-template-columns: 1fr; }
  .s2-card-stats-row { gap: 6px; }
  .s2-stat-chip { font-size: 0.68rem; padding: 3px 8px; }
}

/* Ensure hero right-panel card looks good in featured size */
.s2-hero-right .s2-card { min-height: 420px; }
.s2-hero-right .s2-card-image { height: 240px; }
.s2-hero-right .s2-card-body { padding: 16px 18px 18px; }

/* ══════════════════════════════════════════════════════════════════
   S2 DESIGN SYSTEM — SUPPLEMENT v2
   Missing classes, polished components, live feed, timer, strip
   ═══════════════════════════════════════════════════════════════ */

/* ── Missing: comp-avatar ──────────────────────────────────────── */
.s2-comp-avatar {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
}

/* ── Live Status Strip (below navbar) ──────────────────────────── */
.s2-status-strip {
  background: linear-gradient(90deg, #EEF2FF 0%, #F0F9FF 50%, #EEF2FF 100%);
  border-bottom: 1px solid var(--b1);
  padding: 8px 0;
  display: flex;
  overflow: hidden;
}
.s2-status-strip-inner {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.s2-status-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; color: var(--t3);
  letter-spacing: 0.02em;
}
.s2-status-item strong { color: var(--t); font-weight: 900; }
.s2-status-item-live strong { color: var(--cyan); }
.s2-status-item-urgent strong { color: var(--amber); }
.s2-status-item-entries strong { color: var(--emerald); }
.s2-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
.s2-status-dot-red { background: #f43f5e; }
.s2-status-sep {
  width: 1px; height: 14px; background: var(--b2);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .s2-status-strip-inner { gap: 8px; padding: 0 14px; }
  .s2-status-sep { display: none; }
  .s2-status-item { font-size: 0.67rem; }
}

/* ── Inline s2-timer (simple mm:ss countdown) ──────────────────── */
.s2-timer {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 0.88rem; font-weight: 700;
  color: var(--cyan);
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.2);
  border-radius: 6px; padding: 3px 10px;
  letter-spacing: 0.06em;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}
.s2-timer::before {
  content: '⏱';
  font-size: 0.78rem;
  font-family: inherit;
}
.s2-timer-urgent {
  color: #fda4af !important;
  background: rgba(244,63,94,0.12) !important;
  border-color: rgba(244,63,94,0.35) !important;
  animation: s2-timer-blink 0.6s ease infinite !important;
}
@keyframes s2-timer-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Floating Activity Feed ────────────────────────────────────── */
.s2-activity-feed {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 9000;
  width: 290px;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.s2-activity-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(15,23,42,0.92);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: s2-feed-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: bottom left;
}
.s2-activity-item.s2-feed-out {
  animation: s2-feed-out 0.35s ease forwards;
}
@keyframes s2-feed-in {
  from { opacity: 0; transform: translateX(-24px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes s2-feed-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-24px) scale(0.88); height: 0; padding: 0; margin: 0; }
}
.s2-activity-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(34,211,238,0.15);
  border: 1.5px solid rgba(34,211,238,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.s2-activity-content {
  flex: 1; min-width: 0;
}
.s2-activity-msg {
  font-size: 0.72rem; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2-activity-sub {
  font-size: 0.63rem; color: #64748b; margin-top: 1px;
}
.s2-activity-badge {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(34,211,238,0.15); color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.25);
  flex-shrink: 0; white-space: nowrap;
}
.s2-activity-badge-bid {
  background: rgba(244,63,94,0.15); color: #f43f5e;
  border-color: rgba(244,63,94,0.25);
}
.s2-activity-badge-win {
  background: rgba(52,211,153,0.15); color: #34d399;
  border-color: rgba(52,211,153,0.25);
}
@media (max-width: 600px) {
  .s2-activity-feed {
    width: 250px; bottom: 16px; left: 12px;
  }
  .s2-activity-msg { font-size: 0.68rem; }
}

/* ── Sort bar for "All Auctions" ───────────────────────────────── */
.s2-sort-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.s2-sort-label {
  font-size: 0.72rem; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.s2-sort-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 700; color: #94a3b8;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px; padding: 5px 14px; cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.s2-sort-btn:hover {
  color: #22d3ee; border-color: rgba(34,211,238,0.35);
  background: rgba(34,211,238,0.06);
}
.s2-sort-btn.active {
  color: #22d3ee; background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.35);
}

/* ── Timer display in card footer ──────────────────────────────── */
.s2-card-timer {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 700;
  color: #67e8f9; letter-spacing: 0.04em;
}
.s2-card-timer-urgent {
  color: #fda4af;
  animation: s2-timer-blink 0.6s ease infinite;
}

/* ── Section "Ending Soon" improvements ───────────────────────── */
.s2-section-urgent {
  background: linear-gradient(135deg, #1c1409 0%, #1a1200 50%, #1c1409 100%);
  border-top: 1px solid rgba(245,158,11,0.2);
  border-bottom: 1px solid rgba(245,158,11,0.2);
}
.s2-section-urgent .s2-section-title { color: #fbbf24; }
.s2-section-urgent .s2-card {
  border-color: rgba(245,158,11,0.28);
}
.s2-section-urgent .s2-card:hover {
  border-color: rgba(245,158,11,0.5);
  box-shadow: var(--shadow-card-hover), 0 0 20px rgba(245,158,11,0.15);
}

/* ── Card CTA — bigger, more prominent ────────────────────────── */
.s2-card-cta {
  width: 100%; margin-top: auto;
  padding: 11px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
}

/* ── Hero improvements — brighter look ────────────────────────── */
.s2-hero {
  background: linear-gradient(150deg, #EEF2FF 0%, #F0F9FF 45%, #ECFDF5 100%);
  border-bottom: 1px solid var(--b1);
}
.s2-hero-title {
  color: var(--t);
  /* gradient text removed for readability on light bg */
}
.s2-hero-accent {
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s2-hero-sub { color: #94a3b8; }

/* ── Navbar improvements ───────────────────────────────────────── */
/* Ensure navbar has proper dark style for the new design */
.nav-wrap {
  background: rgba(15,23,42,0.95) !important;
  border-bottom: 1px solid rgba(34,211,238,0.12) !important;
  backdrop-filter: blur(16px) !important;
}

/* ── Card hover CTA text fix ───────────────────────────────────── */
.s2-card-hover-cta {
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* ── Section dark improvements ─────────────────────────────────── */
.s2-section-dark {
  background: var(--bg2);
  border-top: 1px solid var(--b1);
  border-bottom: 1px solid var(--b1);
}

/* ── Section alt (All Auctions) ────────────────────────────────── */
.s2-section-alt {
  background: var(--bg);
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
}

/* ── Section won ───────────────────────────────────────────────── */
.s2-section-won {
  background: linear-gradient(180deg, #ECFDF5 0%, #F0FDF4 100%);
  border-top: 1px solid #A7F3D0;
  border-bottom: 1px solid #A7F3D0;
}

/* ── Improvement: card-body background gradient on dark sections ─ */
.s2-section-dark .s2-card,
.s2-section-alt .s2-card {
  background: #fff;
  border-color: var(--b1);
}
.s2-section-dark .s2-card:hover,
.s2-section-alt .s2-card:hover {
  background: var(--bg5);
  border-color: var(--cyan2);
}

/* ── Section inner / header defaults ──────────────────────────── */
.s2-section { padding: 48px 0; }
.s2-section-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.s2-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px; flex-wrap: wrap;
}
.s2-section-title {
  font-size: 1.45rem; font-weight: 900; color: var(--t);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.s2-section-sub {
  font-size: 0.8rem; color: var(--t3); font-weight: 600;
}
.s2-see-all {
  font-size: 0.78rem; font-weight: 800; color: var(--cyan);
  background: transparent; border: 1px solid rgba(8,145,178,0.25);
  border-radius: 99px; padding: 5px 16px; cursor: pointer;
  transition: background 0.2s;
}
.s2-see-all:hover {
  background: rgba(8,145,178,0.06);
}

/* ── Hero placeholder panel ───────────────────────────────────── */
.s2-hero-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 40px;
  background: #fff;
  border: 1.5px dashed var(--b2);
  border-radius: var(--rad); min-height: 320px;
  text-align: center;
}
.s2-hp-icon { font-size: 3rem; }
.s2-hp-title { font-size: 1.1rem; font-weight: 800; color: var(--t); }
.s2-hp-sub { font-size: 0.85rem; color: var(--t3); }

/* ── Hero eyebrow badge ────────────────────────────────────────── */
.s2-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #67e8f9;
  background: rgba(6,182,212,0.08);
  border: 1.5px solid rgba(6,182,212,0.22);
  border-radius: 99px; padding: 6px 16px;
  margin-bottom: 18px;
}
.s2-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22d3ee; flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
.s2-eyebrow-live {
  background: rgba(220,38,38,0.2); color: #fca5a5;
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 99px; padding: 1px 8px; font-size: 0.62rem;
}

/* ── Hero flow strip ───────────────────────────────────────────── */
.s2-hero-flow {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin: 14px 0;
}
.s2-hf-step {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: #94a3b8;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 5px 10px;
}
.s2-hf-step-win { color: #34d399; border-color: rgba(52,211,153,0.25); background: rgba(52,211,153,0.06); }
.s2-hf-num {
  display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.15); color: #22d3ee;
  border-radius: 50%; font-size: 0.7rem; font-weight: 900;
}
.s2-hf-arrow { font-size: 0.8rem; color: #475569; }

/* ── Hero CTA actions ──────────────────────────────────────────── */
.s2-hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}

/* ── Hero stats panel ──────────────────────────────────────────── */
.s2-hero-stats {
  display: inline-flex; align-items: stretch;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: var(--rad-sm);
  overflow: hidden; margin-top: 20px;
}
.s2-hero-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 20px; gap: 3px;
}
.s2-hs-val {
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
  font-size: 1.65rem; font-weight: 900; color: #f1f5f9;
  letter-spacing: -0.02em; line-height: 1;
}
.s2-hs-lbl { font-size: 0.65rem; font-weight: 700; color: #64748b; text-align: center; white-space: nowrap; }
.s2-hs-live  { color: #22d3ee; }
.s2-hs-price { color: #34d399; }
.s2-hs-urgent{ color: #f59e0b; }
.s2-hs-div {
  width: 1px; background: rgba(255,255,255,0.08); flex-shrink: 0;
  align-self: stretch;
}

/* ── Hero title size ───────────────────────────────────────────── */
.s2-hero-title {
  font-family: 'Space Grotesk', 'Poppins', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900; line-height: 1.12;
  letter-spacing: -0.04em; margin-bottom: 14px;
  color: #f1f5f9;
}
.s2-hero-sub {
  font-size: 1.0rem; line-height: 1.6;
  color: #94a3b8; max-width: 520px;
  margin-bottom: 4px;
}
.s2-hero-sub strong { color: #e2e8f0; }

/* ── Hero layout ───────────────────────────────────────────────── */
.s2-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 48px; align-items: start;
}
.s2-hero { padding: 56px 0 64px; }
.s2-hero-left { display: flex; flex-direction: column; }
.s2-hero-right { position: relative; }

@media (max-width: 960px) {
  .s2-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .s2-hero-right { display: none; }
  .s2-hero { padding: 40px 0 44px; }
  .s2-hero-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
  .s2-hs-div { display: none; }
}
@media (max-width: 640px) {
  .s2-hero-title { font-size: 2rem; }
  .s2-hero-sub { font-size: 0.9rem; }
  .s2-hero-flow { display: none; }
}

/* ── Category badge rail ───────────────────────────────────────── */
.s2-cat-rail {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.s2-cat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 800;
  padding: 7px 16px; border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #e2e8f0; cursor: pointer;
  transition: all 0.22s; white-space: nowrap;
}
.s2-cat-badge:hover {
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.35);
  color: #22d3ee;
}
.s2-cat-badge.active {
  background: rgba(34,211,238,0.15);
  border-color: rgba(34,211,238,0.45);
  color: #22d3ee;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.s2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 0.9rem; font-weight: 800;
  border: none; border-radius: 10px; padding: 13px 26px;
  cursor: pointer; transition: all 0.22s; text-decoration: none;
  letter-spacing: 0.01em; line-height: 1;
}
.s2-btn-primary {
  background: linear-gradient(135deg, #0891b2, #22d3ee);
  color: #fff;
  box-shadow: 0 4px 20px rgba(34,211,238,0.3);
}
.s2-btn-primary:hover {
  background: linear-gradient(135deg, #0e7490, #06b6d4);
  box-shadow: 0 6px 28px rgba(34,211,238,0.45);
  transform: translateY(-1px);
}
.s2-btn-secondary {
  background: rgba(255,255,255,0.06); color: #cbd5e1;
  border: 1.5px solid rgba(255,255,255,0.12);
}
.s2-btn-secondary:hover {
  background: rgba(255,255,255,0.1); color: #f1f5f9;
  border-color: rgba(255,255,255,0.22);
}
.s2-btn-hot {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  box-shadow: 0 4px 20px rgba(220,38,38,0.35);
  animation: badge-pulse 2s ease infinite;
}
.s2-btn-hot:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626);
  box-shadow: 0 6px 28px rgba(220,38,38,0.5);
  transform: translateY(-1px);
}

/* ── Timer in s2-card footer ───────────────────────────────────── */
.s2-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: auto; gap: 8px; flex-wrap: wrap;
}
.s2-card-phase {
  font-size: 0.67rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 99px;
}
.s2-card-cta-link {
  font-size: 0.72rem; font-weight: 800; color: #22d3ee;
  letter-spacing: 0.02em;
}
.s2-card:hover .s2-card-cta-link { color: #818cf8; }

/* ── Urgency strip ─────────────────────────────────────────────── */
.s2-urgency-strip {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px;
  background: rgba(245,158,11,0.1);
  border-top: 1px solid rgba(245,158,11,0.2);
  font-size: 0.7rem; font-weight: 700; color: #fbbf24;
}
.s2-card-urgent .s2-urgency-strip {
  background: rgba(244,63,94,0.1);
  border-color: rgba(244,63,94,0.22);
  color: #fda4af;
}
.s2-urgency-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex-shrink: 0;
  animation: blink 0.85s ease infinite;
}
.s2-card-urgent .s2-urgency-dot { background: #f43f5e; }

/* ── Sold row ──────────────────────────────────────────────────── */
.s2-sold-row {
  font-size: 0.72rem; font-weight: 700; color: #34d399;
  background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2);
  border-radius: var(--rad-xs); padding: 6px 10px;
}

/* ── Final live panel (small) ──────────────────────────────────── */
.s2-final-row-sm {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: var(--rad-xs); padding: 6px 10px;
}
.s2-final-label-sm { flex: 1; color: #fca5a5; }
.s2-top-bid-sm { font-size: 0.72rem; color: #94a3b8; }
.s2-top-bid-sm strong { color: #f1f5f9; font-weight: 800; }

/* ── Final live panel (big card) ───────────────────────────────── */
.s2-final-live-panel {
  background: rgba(220,38,38,0.05);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--rad-xs); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.s2-final-header {
  display: flex; align-items: center; gap: 7px;
}
.s2-final-label { font-weight: 900; color: #f87171; font-size: 0.8rem; }


/* ══════════════════════════════════════════════════════════════════
   MOBILE READABILITY & NAV BAR FIX  (2026-04 patch)
   Only fixes: 1) mobile category nav scroll  2) unreadable light text
══════════════════════════════════════════════════════════════════ */

/* ── 1. Category nav bar – proper mobile horizontal scroll ─────── */
.cat-nav-bar {
  overflow-x: scroll !important;          /* force scrollable on iOS */
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scroll-snap-type: none;
  overscroll-behavior-x: contain;
}
.cat-nav-bar::-webkit-scrollbar { display: none !important; }
.cat-nav-inner {
  display: flex !important;
  flex-wrap: nowrap !important;           /* never wrap to next line  */
  width: max-content !important;          /* grow as wide as needed   */
  min-width: 100% !important;
}
.cat-nav-link {
  flex-shrink: 0 !important;             /* each tab keeps its width */
  white-space: nowrap !important;
}

/* ── 2. Hero eyebrow badge – readable on light background ──────── */
.s2-hero-eyebrow {
  color: #0e7490 !important;                /* dark teal, readable     */
  background: rgba(8,145,178,0.1) !important;
  border-color: rgba(8,145,178,0.3) !important;
}

/* ── 3. Hero main title – stays dark on light bg ──────────────── */
.s2-hero-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
/* Keep accent word gradient but ensure it's visible */
.s2-hero-accent {
  background: linear-gradient(90deg, #0891b2, #6366f1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 4. Hero subtitle – replace near-invisible #94a3b8 ─────────── */
.s2-hero-sub {
  color: #334155 !important;              /* dark slate, very readable */
}
.s2-hero-sub strong { color: #0f172a !important; }

/* ── 5. Hero flow steps – fix invisible ghost-white style ──────── */
.s2-hf-step {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.s2-hf-step-win {
  color: #065f46 !important;
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
}
.s2-hf-num {
  background: #0891b2 !important;
  color: #fff !important;
}
.s2-hf-arrow { color: #94a3b8 !important; }

/* ── 6. "How It Works" / secondary button – visible on light bg ── */
.s2-btn-secondary {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1.5px solid #cbd5e1 !important;
}
.s2-btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ── 7. Hero stats panel – light card style ────────────────────── */
.s2-hero-stats {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(15,23,42,0.08) !important;
}
.s2-hs-val    { color: #0f172a !important; }
.s2-hs-lbl    { color: #64748b !important; }
.s2-hs-div    { background: #e2e8f0 !important; }
.s2-hs-live   { color: #0e7490 !important; }
.s2-hs-price  { color: #065f46 !important; }
.s2-hs-urgent { color: #b45309 !important; }

/* ── 8. Eyebrow LIVE badge – readable on light bg ──────────────── */
.s2-eyebrow-live {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

/* ── 9. Cat-badge (section filter pills) – light theme ─────────── */
.s2-cat-badge {
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.s2-cat-badge:hover, .s2-cat-badge.active {
  color: #0e7490 !important;
  background: rgba(8,145,178,0.08) !important;
  border-color: rgba(8,145,178,0.3) !important;
}

/* ── 10. General very-light text helpers used site-wide ─────────── */
/* var(--t2) on light bg is already fine; fix hard-coded pale values */
[style*="color: #94a3b8"],
[style*="color:#94a3b8"] { color: #475569 !important; }


/* ══════════════════════════════════════════════════════════════════
   eBay-INSPIRED TYPOGRAPHY SYSTEM  (Poppins · Market Sans mirror)
   Rules sourced from eBay Playbook — playbook.ebay.com/foundations/typography
   ──────────────────────────────────────────────────────────────────
   Font:    Poppins  (eBay's official alternate for Market Sans)
   Titles:  Bold (700)   — strong, confident, clear hierarchy
   Subtitles: SemiBold (600)
   Body:    Regular (400) — approachable, readable
   Captions:Regular (400), slightly muted color
   Numbers: Space Grotesk (tabular, monospaced feel for bids/prices)
══════════════════════════════════════════════════════════════════ */

/* ── Base font stack ────────────────────────────────────────────── */
body, html {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ── Page-level title hierarchy (eBay: bold titles, regular body) ── */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;          /* eBay: Bold for all titles */
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;          /* eBay: SemiBold for sub-headings */
  letter-spacing: -0.01em;
  line-height: 1.3;
}
p, li, td, th, label, span, a {
  font-family: 'Poppins', sans-serif !important;
}

/* ── Hero section titles (large display) ───────────────────────── */
/* eBay uses tight letter-spacing at large sizes */
.hero-title,
.s2-hero-title {
  font-family: 'Space Grotesk', sans-serif !important; /* keep Space Grotesk for display impact */
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.hero-accent, .s2-hero-accent {
  background: linear-gradient(90deg, #0891b2 0%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Section headings ───────────────────────────────────────────── */
.section-title, .s2-section-title,
.hiw-title, .seller-section-title,
.sc-title, .trust-section-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--t) !important;
}

/* ── Sub-headings / card titles ─────────────────────────────────── */
.card-title, .s2-card-title, .auction-title,
.seller-name, .hiw-card h3,
.s2-section-sub, .section-sub,
.s2-hp-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Body text & descriptions (eBay: Regular 400) ───────────────── */
.hero-sub, .s2-hero-sub,
.card-desc, .s2-card-desc,
.section-desc, .trust-card-desc,
.hiw-desc, .seller-tag, .seller-vol,
.legal-article p, .legal-article li {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #334155 !important;
}

/* ── Captions & small labels (eBay: Regular 400, muted) ─────────── */
.hs-lbl, .s2-hs-lbl,
.seller-wins, .cat-nav-link,
.badge, .s2-status-item,
.tick-item, .s2-card-phase,
.legal-meta, .s2-top-bid-sm {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* ── Buttons (eBay: bold action text, clear CTA) ────────────────── */
button, .btn, .btn-primary, .btn-outline,
.s2-btn, .s2-btn-primary, .s2-btn-secondary, .s2-btn-hot,
.cat-nav-link, .s2-cat-badge {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;          /* SemiBold for buttons — eBay standard */
  letter-spacing: 0.01em !important;
}

/* ── Numeric / price display — keep Space Grotesk ───────────────── */
/* eBay uses tabular numbers for prices — Space Grotesk handles this */
.hs-val, .s2-hs-val,
.bsb-val, .winner-price,
.stat-num, .admin-stat-value,
.s2-timer, .bid-amount,
.price, .current-bid {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* ── Navigation links ───────────────────────────────────────────── */
.nav-link, .nav-wrap a,
.cat-nav-link {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
}

/* ── eBay-style body line-height for readability ────────────────── */
/* eBay guidelines: line-height pre-defined per style */
body { line-height: 1.6 !important; }
p    { line-height: 1.7 !important; margin-bottom: 0.75rem; }

/* ── Letter spacing: tighter at large sizes (eBay standard) ─────── */
/* eBay: "wider spacing at smaller sizes, tighter at larger" */
.hero-title, .s2-hero-title { letter-spacing: -0.04em !important; }
h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.015em; }
small, .caption, .label-sm { letter-spacing: 0.02em; }

/* ── Bold eyebrow / badges (eBay: small caps, slightly spaced) ──── */
.hero-eyebrow, .s2-hero-eyebrow,
.hero-eyebrow-mp, .s2-live-badge,
.badge-section, .payout-status-badge {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.65rem !important;
}

/* ── Admin / form labels ────────────────────────────────────────── */
.form-label, label,
.admin-title, .admin-tab-btn,
.panel-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

/* ── Monospaced elements — keep existing ───────────────────────── */
code, pre, .s2-timer,
.alp-slug, .wallet-address {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}


/* ================================================================
   Sertrus2 UX Enhancement Layer — status banners, trust row,
   engagement messages, boost button, timer warn, pulse-red
   ================================================================ */

/* ── Section 6: Timer warn (orange, 5 min) ── */
.s2-timer-warn {
  color: #fb923c !important;
  background: rgba(251,146,60,0.12) !important;
  border-color: rgba(251,146,60,0.35) !important;
}

/* ── Section 6: Pulse-red (used on status banner countdown) ── */
.s2-pulse-red {
  color: #f43f5e !important;
  animation: s2-pulse-red 0.8s ease-in-out infinite !important;
}
@keyframes s2-pulse-red {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.06); }
}

/* ================================================================
   Section 2: Status Banner
   ================================================================ */
.s2-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.9rem;
  line-height: 1.4;
}
.s2-status-banner--entry   { background: rgba(99,102,241,0.10); border-left: 3px solid #6366f1; }
.s2-status-banner--full    { background: rgba(245,158,11,0.12); border-left: 3px solid #f59e0b; }
.s2-status-banner--final   { background: rgba(239,68,68,0.10);  border-left: 3px solid #ef4444; }
.s2-status-banner--ending  { background: rgba(239,68,68,0.15);  border-left: 3px solid #f43f5e;
                              animation: s2-banner-pulse 1.6s ease-in-out infinite; }
.s2-status-banner--winner  { background: rgba(16,185,129,0.12); border-left: 3px solid #10b981; }
.s2-status-banner--pending { background: rgba(99,102,241,0.08); border-left: 3px solid #818cf8; }
.s2-status-banner--neutral { background: rgba(100,116,139,0.10); border-left: 3px solid #64748b; }

@keyframes s2-banner-pulse {
  0%, 100% { background: rgba(239,68,68,0.15); }
  50%       { background: rgba(239,68,68,0.25); }
}

.s2-status-banner-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}
.s2-status-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-status-banner-body strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--t1);
}
.s2-status-banner-body span {
  font-size: 0.8rem;
  color: var(--t2);
}
.s2-status-banner-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(244,63,94,0.15);
  color: #f43f5e;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* mini progress bar inside the banner (State A with user joined) */
.s2-status-banner-progress {
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  width: 100%;
  max-width: 300px;
}
.s2-status-banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* ================================================================
   Section 3: Trust Row
   ================================================================ */
.s2-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 10px;
  font-size: 0.78rem;
  color: #6ee7b7;
  font-weight: 500;
}
.s2-trust-row span {
  white-space: nowrap;
}

/* ================================================================
   Section 4: Engagement Message
   ================================================================ */
.s2-engagement-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(99,102,241,0.09);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 10px;
  margin-bottom: 14px;
}
.s2-engagement-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.s2-engagement-msg div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s2-engagement-msg strong {
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--t1);
}
.s2-engagement-msg span {
  font-size: 0.76rem;
  color: var(--t2);
}

/* ================================================================
   Section 5: Position Boost Button
   ================================================================ */
.s2-boost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 16px;
  background: rgba(139,92,246,0.12);
  border: 1.5px dashed rgba(139,92,246,0.45);
  border-radius: 10px;
  color: #c4b5fd;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.s2-boost-btn:hover:not(:disabled) {
  background: rgba(139,92,246,0.22);
  border-color: rgba(139,92,246,0.7);
  color: #ddd6fe;
}
.s2-boost-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.s2-boost-price {
  background: rgba(139,92,246,0.25);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .s2-status-banner {
    padding: 11px 14px;
    gap: 10px;
  }
  .s2-status-banner-icon { font-size: 1.25rem; }
  .s2-trust-row { font-size: 0.72rem; gap: 5px 10px; }
  .s2-engagement-msg { padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v1 — Homepage + Bidder Dashboard
   Fintech-grade · Mobile-first · No horizontal scroll
   Breakpoints: 480px / 768px / 960px / 1180px
══════════════════════════════════════════════════════════════════ */

/* ── Page shell wrappers ─────────────────────────────────────────── */
.s2-home-page-shell  { --page-accent: var(--cyan);   }
.s2-bidder-shell     { --page-accent: var(--cyan);   }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM HERO — Credits-first redesign
══════════════════════════════════════════════════════════════════ */
.s2-hero-premium {
  position: relative;
  background: linear-gradient(150deg, #EEF2FF 0%, #F0F9FF 42%, #ECFDF5 100%);
  border-bottom: 1px solid var(--b1);
  overflow: hidden;
  padding: 56px 24px 60px;
}
.s2-hero-premium::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 55% at 4% 50%, rgba(8,145,178,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 95% 15%, rgba(109,40,217,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 80% 85%, rgba(5,150,105,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.s2-hero-premium-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}
.s2-hero-premium-left  { display: flex; flex-direction: column; gap: 0; }
.s2-hero-premium-right { display: flex; flex-direction: column; gap: 16px; }

/* Eyebrow badge */
.s2-hero-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 22px;
  background: rgba(8,145,178,0.07); border: 1.5px solid rgba(8,145,178,0.22);
  border-radius: var(--pill); padding: 6px 18px;
  width: fit-content;
}
.s2-eyebrow-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald); flex-shrink: 0;
  animation: glow-pulse 2.5s ease infinite;
}
.s2-eyebrow-live-badge {
  background: var(--red2); color: #fff;
  font-size: 0.57rem; font-weight: 900; letter-spacing: 0.1em;
  border-radius: var(--pill); padding: 2px 8px;
  animation: badge-pulse 1.5s ease infinite;
}

/* Hero headline */
.s2-hero-premium-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.25rem, 4.5vw, 3.7rem);
  font-weight: 900; letter-spacing: -2px; color: var(--t);
  margin-bottom: 18px; line-height: 1.08;
}
.s2-hero-premium-accent {
  background: var(--grd-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s2-hero-premium-sub {
  color: var(--t2); font-size: 1.02rem; line-height: 1.75;
  max-width: 520px; margin-bottom: 28px;
}

/* Trust strip — inline within hero */
.s2-hero-trust-strip {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-bottom: 30px;
}
.s2-hts-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--t2);
  background: rgba(255,255,255,0.7); border: 1px solid var(--b1);
  border-radius: var(--pill); padding: 4px 12px;
  backdrop-filter: blur(4px);
}
.s2-hts-item svg, .s2-hts-item span.ico { font-size: 0.85rem; }

/* CTA row */
.s2-hero-premium-actions {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}
.s2-btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 14px 30px; font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 4px 18px rgba(8,145,178,0.35), 0 1px 3px rgba(0,0,0,0.07);
  transition: all 0.22s ease; cursor: pointer; letter-spacing: 0.01em;
  min-height: 48px;
}
.s2-btn-hero-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 28px rgba(8,145,178,0.45), 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.s2-btn-hero-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--t);
  border: 1.5px solid var(--b2); border-radius: var(--rad-xs);
  padding: 13px 24px; font-size: 0.88rem; font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease; cursor: pointer;
  min-height: 48px;
}
.s2-btn-hero-secondary:hover {
  border-color: var(--cyan2); color: var(--cyan);
  box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.s2-btn-hero-wallet {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #6D28D9, #7C3AED); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 13px 22px; font-size: 0.87rem; font-weight: 700;
  box-shadow: 0 3px 14px rgba(109,40,217,0.28);
  transition: all 0.2s ease; cursor: pointer;
  min-height: 48px;
}
.s2-btn-hero-wallet:hover {
  filter: brightness(1.1);
  box-shadow: 0 7px 22px rgba(109,40,217,0.38);
  transform: translateY(-2px);
}

/* Live stats row */
.s2-hero-premium-stats {
  display: inline-flex; align-items: center;
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-lg); padding: 16px 24px;
  box-shadow: var(--shadow-xl); width: fit-content;
  flex-wrap: wrap; gap: 0;
}
.s2-hps-stat { text-align: center; padding: 0 18px; }
.s2-hps-div  { width: 1px; height: 36px; background: var(--b1); flex-shrink: 0; }
.s2-hps-val  {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 1.65rem; font-weight: 900; color: var(--t);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.s2-hps-val-live   { color: var(--red2); }
.s2-hps-val-green  { color: var(--emerald); }
.s2-hps-val-amber  { color: var(--amber); animation: badge-pulse 2s ease infinite; }
.s2-hps-lbl {
  font-size: 0.57rem; color: var(--t3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 4px; display: block;
}

/* Right column — placeholder or featured card */
.s2-hero-premium-placeholder {
  background: #fff; border: 2px dashed var(--b2);
  border-radius: var(--rad-lg); padding: 40px 28px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.s2-hpph-icon  { font-size: 3rem; }
.s2-hpph-title { font-size: 1.05rem; font-weight: 700; color: var(--t); }
.s2-hpph-sub   { font-size: 0.83rem; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════
   S2 CREDIT EXPLAINER SECTION — homepage
══════════════════════════════════════════════════════════════════ */
.s2-credit-explainer-section {
  background: linear-gradient(135deg, #F0F9FF 0%, #EEF2FF 50%, #ECFDF5 100%);
  border-top: 1px solid var(--b1); border-bottom: 1px solid var(--b1);
  padding: 64px 0;
}
.s2-credit-explainer-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
}
.s2-ce-header {
  text-align: center; margin-bottom: 44px;
}
.s2-ce-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 16px;
  background: rgba(8,145,178,0.07); border: 1.5px solid rgba(8,145,178,0.2);
  border-radius: var(--pill); padding: 5px 16px;
}
.s2-ce-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900; letter-spacing: -1px; color: var(--t);
  margin-bottom: 12px; line-height: 1.15;
}
.s2-ce-sub {
  font-size: 1rem; color: var(--t2); max-width: 560px; margin: 0 auto; line-height: 1.7;
}

/* Credit cards grid */
.s2-credit-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.s2-credit-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 28px 22px;
  text-align: center; position: relative;
  box-shadow: var(--shadow-md);
  transition: all 0.22s ease;
}
.s2-credit-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-4px);
  border-color: var(--cyan2);
}
.s2-credit-card--featured {
  border-color: var(--cyan2);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.25), var(--shadow-lg);
  background: linear-gradient(135deg, #F0F9FF, #fff);
}
.s2-credit-card--featured::before {
  content: '⭐ MOST POPULAR';
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grd-cyan); color: #fff;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em;
  border-radius: var(--pill); padding: 4px 14px;
  white-space: nowrap;
}
.s2-credit-card-icon {
  font-size: 2.2rem; margin-bottom: 12px; line-height: 1;
}
.s2-credit-card-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem; font-weight: 900; color: var(--t);
  margin-bottom: 4px; line-height: 1;
}
.s2-credit-card-credits {
  font-size: 1rem; font-weight: 800; color: var(--cyan);
  margin-bottom: 8px;
}
.s2-credit-card-label {
  font-size: 0.72rem; color: var(--t3); font-weight: 600;
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em;
}
.s2-credit-card-rate {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--pill); padding: 3px 10px;
  font-size: 0.67rem; font-weight: 700; color: var(--emerald);
}

/* Credit explainer info strip */
.s2-credit-info-strip {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 24px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; box-shadow: var(--shadow-sm);
}
.s2-cis-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 0 20px;
  border-right: 1px solid var(--b1);
}
.s2-cis-item:last-child { border-right: none; }
.s2-cis-icon { font-size: 1.5rem; line-height: 1; }
.s2-cis-val  {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 900; color: var(--t);
}
.s2-cis-lbl  { font-size: 0.7rem; color: var(--t3); font-weight: 600; text-align: center; line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════════
   REFERRAL PROMO SECTION — homepage
══════════════════════════════════════════════════════════════════ */
.s2-referral-promo-section {
  background: var(--bg2); border-top: 1px solid var(--b1);
  padding: 56px 0;
}
.s2-referral-promo-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.s2-rp-left {}
.s2-rp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--emerald); margin-bottom: 16px;
  background: rgba(5,150,105,0.07); border: 1.5px solid rgba(5,150,105,0.2);
  border-radius: var(--pill); padding: 5px 14px;
}
.s2-rp-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 900; color: var(--t);
  margin-bottom: 14px; letter-spacing: -0.8px;
}
.s2-rp-sub {
  color: var(--t2); font-size: 0.95rem; line-height: 1.72; margin-bottom: 28px;
}
.s2-rp-tiers {
  display: flex; flex-direction: column; gap: 12px;
}
.s2-rp-tier {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.s2-rp-tier-badge {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 900; color: #fff;
}
.s2-rp-tier-badge--l1 { background: var(--grd-cyan); }
.s2-rp-tier-badge--l2 { background: var(--grd-emerald); }
.s2-rp-tier-body {}
.s2-rp-tier-name { font-size: 0.82rem; font-weight: 700; color: var(--t); margin-bottom: 3px; }
.s2-rp-tier-desc { font-size: 0.75rem; color: var(--t3); line-height: 1.5; }
.s2-rp-tier-pct  {
  font-size: 0.82rem; font-weight: 800; color: var(--cyan);
  background: rgba(8,145,178,0.08); border-radius: var(--pill);
  padding: 1px 8px; margin-top: 3px; display: inline-block;
}

.s2-rp-right {}
.s2-rp-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 32px;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.s2-rp-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grd-brand);
}
.s2-rp-card-title { font-size: 1rem; font-weight: 700; color: var(--t); margin-bottom: 6px; }
.s2-rp-card-sub   { font-size: 0.8rem; color: var(--t3); margin-bottom: 20px; }
.s2-rp-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.s2-rp-stat-box {
  background: var(--bg2); border-radius: var(--rad-sm); padding: 16px;
  text-align: center;
}
.s2-rp-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem; font-weight: 900; color: var(--cyan);
  line-height: 1;
}
.s2-rp-stat-lbl { font-size: 0.67rem; color: var(--t3); font-weight: 600; margin-top: 4px; }
.s2-rp-link-box {
  background: var(--bg2); border-radius: var(--rad-sm); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.s2-rp-link-val {
  flex: 1; font-family: monospace; font-size: 0.78rem;
  color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.s2-rp-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 8px 16px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  min-height: 44px;
}
.s2-rp-copy-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   PREMIUM SELLER CTA SECTION
══════════════════════════════════════════════════════════════════ */
.s2-seller-cta-premium {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F2027 100%);
  padding: 72px 0; position: relative; overflow: hidden;
}
.s2-seller-cta-premium::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 5% 50%, rgba(8,145,178,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 70% at 95% 30%, rgba(109,40,217,0.1) 0%, transparent 60%);
}
.s2-seller-cta-premium-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.s2-sctp-left {}
.s2-sctp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan3); margin-bottom: 18px;
  background: rgba(34,211,238,0.1); border: 1.5px solid rgba(34,211,238,0.25);
  border-radius: var(--pill); padding: 5px 14px;
}
.s2-sctp-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 900; color: #fff;
  letter-spacing: -1px; line-height: 1.12; margin-bottom: 18px;
}
.s2-sctp-sub {
  color: rgba(255,255,255,0.7); font-size: 0.97rem; line-height: 1.72; margin-bottom: 32px;
}
.s2-sctp-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.s2-sctp-stat {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--rad-sm); padding: 16px 18px;
}
.s2-sctp-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem; font-weight: 900; color: var(--cyan3); line-height: 1;
}
.s2-sctp-stat-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 4px; }
.s2-sctp-right {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--rad); padding: 36px;
  text-align: center;
}
.s2-sctp-right h3 {
  font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 8px;
}
.s2-sctp-right p  { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 24px; line-height: 1.6; }
.s2-sctp-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 15px 36px; font-size: 1rem; font-weight: 800;
  box-shadow: 0 4px 24px rgba(8,145,178,0.4);
  transition: all 0.22s; cursor: pointer; width: 100%;
  justify-content: center; margin-bottom: 12px;
  min-height: 52px;
}
.s2-sctp-cta-btn:hover {
  filter: brightness(1.1); transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(8,145,178,0.5);
}
.s2-sctp-features {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px; text-align: left;
}
.s2-sctp-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8rem; color: rgba(255,255,255,0.7);
}
.s2-sctp-feature span.chk { color: var(--emr3); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   BIDDER DASHBOARD — Premium Shell
══════════════════════════════════════════════════════════════════ */
.s2-bidder-shell {
  min-height: 100vh; background: var(--bg);
}
.s2-bidder-content {
  max-width: 900px; margin: 0 auto;
  padding: 32px 24px 100px;
}

/* ── Bidder Header ── */
.s2-bidder-header {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.s2-bidder-avatar-wrap {
  flex-shrink: 0; position: relative;
}
.s2-bidder-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--b1); display: block;
}
.s2-bidder-chain-badge {
  position: absolute; bottom: 0; right: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grd-brand); border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.56rem; font-weight: 900; color: #fff;
}
.s2-bidder-meta { flex: 1; min-width: 0; }
.s2-bidder-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem; font-weight: 800; color: var(--t);
  margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.s2-bidder-edit-btn {
  background: transparent; border: 1px solid var(--b2);
  border-radius: var(--rad-xs); padding: 3px 8px;
  font-size: 0.7rem; color: var(--t3); cursor: pointer;
  transition: all 0.15s;
}
.s2-bidder-edit-btn:hover { border-color: var(--cyan2); color: var(--cyan); }
.s2-bidder-wallet-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.s2-bidder-wallet {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem; color: var(--t3); font-weight: 600;
}
.s2-bidder-provider-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(8,145,178,0.08); border: 1px solid rgba(8,145,178,0.2);
  border-radius: var(--pill); padding: 2px 10px;
  font-size: 0.65rem; font-weight: 700; color: var(--cyan);
}
.s2-bidder-network-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(109,40,217,0.08); border: 1px solid rgba(109,40,217,0.2);
  border-radius: var(--pill); padding: 2px 10px;
  font-size: 0.65rem; font-weight: 700; color: var(--vio2);
}
.s2-bidder-network-badge--sol {
  background: rgba(153,69,255,0.08); border-color: rgba(153,69,255,0.2);
  color: #a78bfa;
}
.s2-bidder-network-badge--xrp {
  background: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.2);
  color: var(--cyan);
}
.s2-bidder-member-since {
  font-size: 0.7rem; color: var(--t4); margin-top: 4px;
}

/* Activity stats bar */
.s2-bidder-stats-bar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg2); border: 1px solid var(--b1);
  border-radius: var(--rad-sm); overflow: hidden;
  margin-bottom: 28px;
}
.s2-bidder-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 12px; text-align: center;
  border-right: 1px solid var(--b1); position: relative;
}
.s2-bidder-stat:last-child { border-right: none; }
.s2-bidder-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem; font-weight: 900; color: var(--t); line-height: 1;
}
.s2-bidder-stat-lbl {
  font-size: 0.62rem; color: var(--t3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 5px;
}

/* ── Credit Balance Cards (4-up) ── */
.s2-credit-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.s2-cb-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad-sm); padding: 20px 18px;
  box-shadow: var(--shadow-sm); position: relative;
  transition: all 0.18s ease;
}
.s2-cb-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.s2-cb-card--bid {
  border-top: 3px solid var(--cyan);
}
.s2-cb-card--green {
  border-top: 3px solid var(--emerald);
}
.s2-cb-card--total {
  border-top: 3px solid var(--amber);
}
.s2-cb-card--expiry {
  border-top: 3px solid var(--red2);
}
.s2-cb-card-icon {
  font-size: 1.4rem; margin-bottom: 8px; line-height: 1;
}
.s2-cb-card-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.9rem; font-weight: 900; line-height: 1; margin-bottom: 4px;
}
.s2-cb-card--bid    .s2-cb-card-amount { color: var(--cyan); }
.s2-cb-card--green  .s2-cb-card-amount { color: var(--emerald); }
.s2-cb-card--total  .s2-cb-card-amount { color: var(--amber); }
.s2-cb-card--expiry .s2-cb-card-amount { color: var(--red2); }
.s2-cb-card-usd {
  font-size: 0.73rem; color: var(--t3); font-weight: 600; margin-bottom: 6px;
}
.s2-cb-card-label { font-size: 0.72rem; font-weight: 700; color: var(--t); }
.s2-cb-card-desc  { font-size: 0.65rem; color: var(--t3); margin-top: 3px; line-height: 1.4; }

/* Conversion rate pill */
.s2-credit-conversion-row {
  background: rgba(8,145,178,0.04); border: 1.5px solid rgba(8,145,178,0.14);
  border-radius: var(--rad-sm); padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.s2-conv-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600; color: var(--t2);
}
.s2-conv-item strong { color: var(--cyan); }
.s2-conv-sep { width: 1px; height: 18px; background: var(--b2); }

/* Expiry alert */
.s2-expiry-alert {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(245,158,11,0.07); border: 1.5px solid rgba(245,158,11,0.3);
  border-radius: var(--rad-sm); padding: 14px 18px;
  margin-bottom: 24px; animation: slideDown 0.3s ease;
}
.s2-expiry-alert-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.s2-expiry-alert-body {}
.s2-expiry-alert-title { font-size: 0.83rem; font-weight: 700; color: var(--amber); margin-bottom: 2px; }
.s2-expiry-alert-desc  { font-size: 0.76rem; color: var(--t2); line-height: 1.55; }

/* ── Buy Credits — Premium Pack Grid ── */
.s2-buy-credits-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 28px 28px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.s2-bc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.s2-bc-title {
  font-size: 1.05rem; font-weight: 800; color: var(--t);
  display: flex; align-items: center; gap: 8px;
}
.s2-bc-rate-pill {
  display: inline-flex; align-items: center;
  background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--pill); padding: 4px 12px;
  font-size: 0.68rem; font-weight: 700; color: var(--emerald);
}

/* Purchase packs grid */
.s2-purchase-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.s2-purchase-pack {
  border: 2px solid var(--b1); border-radius: var(--rad-sm);
  padding: 18px 14px; text-align: center; cursor: pointer;
  transition: all 0.2s ease; position: relative;
  background: #fff;
}
.s2-purchase-pack:hover {
  border-color: var(--cyan2); background: rgba(6,182,212,0.04);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.s2-purchase-pack.selected {
  border-color: var(--cyan); background: rgba(8,145,178,0.06);
  box-shadow: 0 0 0 1px var(--cyan), var(--shadow-sm);
}
.s2-purchase-pack--popular {
  border-color: var(--cyan2);
  box-shadow: 0 0 0 1px rgba(6,182,212,0.3), var(--shadow-sm);
}
.s2-purchase-pack--popular::before {
  content: '⭐ POPULAR';
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--grd-cyan); color: #fff;
  font-size: 0.54rem; font-weight: 900; letter-spacing: 0.1em;
  border-radius: var(--pill); padding: 3px 10px;
  white-space: nowrap;
}
.s2-pp-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem; font-weight: 900; color: var(--t); line-height: 1;
}
.s2-pp-credits {
  font-size: 0.88rem; font-weight: 800; color: var(--cyan); margin-top: 4px;
}
.s2-pp-label {
  font-size: 0.65rem; color: var(--t3); font-weight: 600; margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.s2-pp-custom-label {
  font-size: 1rem; font-weight: 800; color: var(--t); line-height: 1; margin-bottom: 4px;
}

/* Buy form */
.s2-buy-form {
  background: var(--bg2); border-radius: var(--rad-sm); padding: 20px;
  margin-top: 4px; display: none;
}
.s2-buy-form.visible { display: block; animation: slideDown 0.2s ease; }
.s2-buy-form-row {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px;
}
.s2-buy-field {
  display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px;
}
.s2-buy-field label {
  font-size: 0.72rem; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em;
}
.s2-buy-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 13px 24px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; width: 100%; margin-top: 4px;
  min-height: 48px;
}
.s2-buy-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.s2-buy-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ── Referral Section — Premium ── */
.s2-referral-premium-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 28px 28px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.s2-ref-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 10px;
}
.s2-ref-title {
  font-size: 1.05rem; font-weight: 800; color: var(--t);
  display: flex; align-items: center; gap: 8px;
}
.s2-ref-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.s2-ref-stat {
  background: var(--bg2); border-radius: var(--rad-sm); padding: 16px 14px;
  text-align: center;
}
.s2-ref-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem; font-weight: 900; color: var(--cyan);
  line-height: 1;
}
.s2-ref-stat-val--green { color: var(--emerald); }
.s2-ref-stat-lbl { font-size: 0.64rem; color: var(--t3); font-weight: 600; margin-top: 5px; }
.s2-ref-link-section {
  background: linear-gradient(135deg, rgba(8,145,178,0.04), rgba(109,40,217,0.04));
  border: 1.5px solid var(--b1); border-radius: var(--rad-sm); padding: 18px 20px;
  margin-bottom: 20px;
}
.s2-ref-link-label { font-size: 0.72rem; font-weight: 700; color: var(--t3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.s2-ref-link-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.s2-ref-link-input {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--b1); border-radius: var(--rad-xs);
  padding: 10px 14px; font-size: 0.8rem; font-family: monospace;
  color: var(--t2); background: #fff;
  transition: border-color 0.18s;
}
.s2-ref-link-input:focus { outline: none; border-color: var(--cyan2); box-shadow: var(--glow-cyan); }
.s2-ref-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 10px 18px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  min-height: 44px;
}
.s2-ref-copy-btn:hover { filter: brightness(1.08); }
.s2-ref-tiers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.s2-ref-tier-box {
  background: var(--bg2); border-radius: var(--rad-sm); padding: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.s2-ref-tier-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900; color: #fff;
}
.s2-ref-tier-ico--l1 { background: var(--grd-cyan); }
.s2-ref-tier-ico--l2 { background: var(--grd-emerald); }
.s2-ref-tier-content {}
.s2-ref-tier-name { font-size: 0.82rem; font-weight: 700; color: var(--t); margin-bottom: 3px; }
.s2-ref-tier-desc { font-size: 0.72rem; color: var(--t3); line-height: 1.5; }
.s2-ref-tier-earn {
  font-size: 0.75rem; font-weight: 800; color: var(--cyan);
  margin-top: 5px; display: inline-block;
}
.s2-ref-tier-earn--green { color: var(--emerald); }

/* ── Credit History — Premium Table ── */
.s2-credit-history-card {
  background: #fff; border: 1.5px solid var(--b1);
  border-radius: var(--rad); padding: 28px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
}
.s2-ch-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.s2-ch-title {
  font-size: 1.05rem; font-weight: 800; color: var(--t);
  display: flex; align-items: center; gap: 8px;
}

/* Desktop table */
.s2-ch-table-wrap {
  overflow-x: auto;
}
.s2-ch-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8rem;
}
.s2-ch-table th {
  text-align: left; padding: 9px 12px;
  font-size: 0.64rem; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 2px solid var(--b1);
  white-space: nowrap;
}
.s2-ch-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--b1);
  color: var(--t2); vertical-align: middle;
}
.s2-ch-table tr:last-child td { border-bottom: none; }
.s2-ch-table tr:hover td { background: var(--bg2); }
.s2-ch-date   { color: var(--t3) !important; font-size: 0.74rem !important; white-space: nowrap; }
.s2-ch-amount-in  { font-weight: 800; color: var(--emerald) !important; }
.s2-ch-amount-out { font-weight: 800; color: var(--red2) !important; }
.s2-ch-status-pill {
  display: inline-flex; align-items: center;
  border-radius: var(--pill); padding: 2px 9px;
  font-size: 0.65rem; font-weight: 700; white-space: nowrap;
}
.s2-ch-status-pill--confirmed { background: rgba(5,150,105,0.1); color: var(--emerald); }
.s2-ch-status-pill--pending   { background: rgba(245,158,11,0.1); color: var(--amber); }
.s2-ch-status-pill--failed    { background: rgba(239,68,68,0.1);  color: var(--red2); }
.s2-ch-type-pill {
  display: inline-flex; align-items: center;
  border-radius: 5px; padding: 2px 8px;
  font-size: 0.65rem; font-weight: 700;
}
.s2-ch-type-pill--bid   { background: rgba(8,145,178,0.1); color: var(--cyan); }
.s2-ch-type-pill--green { background: rgba(5,150,105,0.1); color: var(--emerald); }

/* Mobile stacked cards (hidden desktop) */
.s2-ch-mobile-cards { display: none; }
.s2-ch-mobile-card {
  background: var(--bg2); border-radius: var(--rad-sm);
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
}
.s2-ch-mc-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.s2-ch-mc-icon--in  { background: rgba(5,150,105,0.12); }
.s2-ch-mc-icon--out { background: rgba(239,68,68,0.1); }
.s2-ch-mc-body { flex: 1; min-width: 0; }
.s2-ch-mc-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.s2-ch-mc-source { font-size: 0.8rem; font-weight: 700; color: var(--t); }
.s2-ch-mc-amount { font-size: 0.88rem; font-weight: 900; }
.s2-ch-mc-meta   { font-size: 0.68rem; color: var(--t3); display: flex; gap: 10px; flex-wrap: wrap; }

/* Sticky action strip */
.s2-sticky-action-strip {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: rgba(255,255,255,0.97);
  border-top: 1.5px solid var(--b1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: nowrap;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
}
.s2-sas-credits {
  display: flex; flex-direction: column; gap: 1px;
}
.s2-sas-credits-label { font-size: 0.62rem; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.s2-sas-credits-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 900; color: var(--cyan); line-height: 1;
}
.s2-sas-credits-sub { font-size: 0.63rem; color: var(--t3); }
.s2-sas-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grd-brand); color: #fff;
  border: none; border-radius: var(--rad-xs);
  padding: 12px 24px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
  min-height: 44px; flex-shrink: 0;
}
.s2-sas-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Mobile-first
══════════════════════════════════════════════════════════════════ */

/* Tablet — 960px */
@media (max-width: 960px) {
  /* Homepage hero */
  .s2-hero-premium-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .s2-hero-premium-right { display: none; }
  .s2-hero-premium { padding: 40px 20px 44px; }
  .s2-hero-premium-stats {
    width: 100%; justify-content: center; padding: 12px 16px;
  }
  .s2-hps-stat { padding: 0 10px; }
  .s2-hps-val  { font-size: 1.35rem; }

  /* Credit explainer */
  .s2-credit-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-credit-info-strip { grid-template-columns: repeat(2, 1fr); }
  .s2-cis-item:nth-child(2) { border-right: none; }
  .s2-cis-item:nth-child(3),
  .s2-cis-item:nth-child(4) { border-top: 1px solid var(--b1); border-right: none; }

  /* Referral promo */
  .s2-referral-promo-inner { grid-template-columns: 1fr; gap: 32px; }
  .s2-rp-card { margin-top: 0; }

  /* Seller CTA */
  .s2-seller-cta-premium-inner { grid-template-columns: 1fr; gap: 32px; }
  .s2-sctp-stats { grid-template-columns: repeat(4, 1fr); }

  /* Bidder dashboard */
  .s2-bidder-stats-bar { grid-template-columns: repeat(3, 1fr); }
  .s2-bidder-stat:nth-child(3) { border-right: none; }
  .s2-bidder-stat:nth-child(4),
  .s2-bidder-stat:nth-child(5) { border-top: 1px solid var(--b1); }
  .s2-credit-cards-row { grid-template-columns: repeat(2, 1fr); }
  .s2-ref-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-purchase-pack-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile — 640px */
@media (max-width: 640px) {
  .s2-hero-premium-title { font-size: 2rem; letter-spacing: -1px; }
  .s2-hero-premium-sub   { font-size: 0.9rem; }
  .s2-hero-premium-stats {
    background: transparent; border: none; box-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 0;
  }
  .s2-hps-div   { display: none; }
  .s2-hps-stat  { padding: 8px 10px; border: 1px solid var(--b1); border-radius: var(--rad-xs); }
  .s2-hps-val   { font-size: 1.3rem; }

  .s2-hero-premium { padding: 32px 16px 36px; }
  .s2-hero-premium-actions { gap: 10px; }
  .s2-btn-hero-primary,
  .s2-btn-hero-secondary { width: 100%; justify-content: center; }

  /* Bidder content */
  .s2-bidder-content { padding: 20px 16px 100px; }
  .s2-bidder-header { padding: 18px 18px; gap: 14px; }
  .s2-bidder-stats-bar { grid-template-columns: repeat(3, 1fr); }

  /* Credit history — switch to cards on mobile */
  .s2-ch-table-wrap { display: none; }
  .s2-ch-mobile-cards { display: block; }

  /* Ref section */
  .s2-ref-tiers { grid-template-columns: 1fr; }
  .s2-ref-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Credit cards */
  .s2-credit-cards-row { grid-template-columns: repeat(2, 1fr); }
  .s2-purchase-pack-grid { grid-template-columns: repeat(2, 1fr); }

  /* Info strip */
  .s2-credit-info-strip { grid-template-columns: repeat(2, 1fr); }
  .s2-cis-item { border-right: none; border-bottom: 1px solid var(--b1); }
  .s2-cis-item:nth-child(even) { }
  .s2-cis-item:last-child { border-bottom: none; }

  /* Seller CTA */
  .s2-sctp-stats { grid-template-columns: repeat(2, 1fr); }

  /* Referral promo */
  .s2-rp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .s2-credit-cards-row { grid-template-columns: 1fr 1fr; }
  .s2-purchase-pack-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-bidder-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .s2-bidder-stat:nth-child(2) { border-right: none; }
  .s2-bidder-stat:nth-child(3) { border-top: 1px solid var(--b1); }
  .s2-bidder-stat:nth-child(4) { border-right: none; }
  .s2-bidder-stat:nth-child(5) { grid-column: 1/-1; border-top: 1px solid var(--b1); }
  .s2-sticky-action-strip { padding: 10px 16px; }
  .s2-sas-btn { padding: 10px 18px; font-size: 0.8rem; }

  /* Hero trust strip */
  .s2-hero-trust-strip { gap: 6px 10px; }
  .s2-hts-item { font-size: 0.67rem; padding: 3px 10px; }

  /* Credit explainer */
  .s2-credit-cards-grid { grid-template-columns: 1fr 1fr; }
  .s2-ce-title { font-size: 1.5rem; }
}

/* Accessibility — focus states */
.s2-btn-hero-primary:focus-visible,
.s2-btn-hero-secondary:focus-visible,
.s2-btn-hero-wallet:focus-visible,
.s2-sas-btn:focus-visible,
.s2-buy-submit:focus-visible {
  outline: 3px solid var(--cyan2);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   S2 BIDDER DASHBOARD — Premium Shell & Header
   Added: bidder shell, header, stats bar, tabs, tab panels,
          credit history premium table/cards, review/download panels
══════════════════════════════════════════════════════════════════ */

/* ── Bidder Shell ── */
.s2-bidder-shell {
  background: var(--bg2);
  min-height: 100vh;
  padding-bottom: 120px; /* room for sticky strip */
}
.s2-bidder-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 0;
}

/* ── Bidder Header Card ── */
.s2-bidder-header {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 20px;
  padding: 28px 28px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.s2-bh-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

/* Avatar */
.s2-bh-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.s2-bh-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--cyan2);
  display: block;
}
.s2-bh-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(6,182,212,0.25);
  pointer-events: none;
}

/* Info */
.s2-bh-info {
  flex: 1;
  min-width: 0;
}
.s2-bh-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.s2-bh-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--t);
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.2;
}
.s2-bh-edit-btn {
  background: none;
  border: 1px solid var(--b2);
  border-radius: var(--pill);
  padding: 4px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--t3);
  transition: all 0.18s;
  min-height: 28px;
}
.s2-bh-edit-btn:hover {
  border-color: var(--cyan2);
  color: var(--cyan);
  background: rgba(6,182,212,0.04);
}

/* Wallet row */
.s2-bh-wallet-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.s2-bh-wallet-addr {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.82rem;
  color: var(--t2);
  font-weight: 600;
  cursor: help;
}
.s2-bh-provider-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(8,145,178,0.08);
  color: var(--cyan);
  border: 1px solid rgba(8,145,178,0.2);
  border-radius: var(--pill);
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.s2-bh-network-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill);
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.s2-bh-network-badge--xrp {
  background: rgba(8,145,178,0.06);
  color: #0284c7;
  border: 1px solid rgba(2,132,199,0.25);
}
.s2-bh-network-badge--sol {
  background: rgba(139,92,246,0.08);
  color: #7c3aed;
  border: 1px solid rgba(124,58,237,0.25);
}

/* Member since */
.s2-bh-member-since {
  font-size: 0.75rem;
  color: var(--t3);
  font-weight: 500;
  margin-top: 2px;
}

/* Right — credit chip */
.s2-bh-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.s2-bh-credit-chip {
  background: var(--grd-brand);
  color: #fff;
  border-radius: 16px;
  padding: 14px 22px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(8,145,178,0.32);
  min-width: 100px;
}
.s2-bh-cc-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.s2-bh-cc-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 3px;
}
.s2-bh-get-credits-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  padding: 12px 22px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28);
  transition: all 0.2s;
  min-height: 44px;
}
.s2-bh-get-credits-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ── Bidder Stats Bar ── */
.s2-bidder-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.s2-bidder-stat {
  text-align: center;
  padding: 16px 10px;
  border-right: 1px solid var(--b1);
  transition: background 0.15s;
}
.s2-bidder-stat:last-child { border-right: none; }
.s2-bidder-stat:hover { background: var(--bg2); }
.s2-bidder-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--t);
  line-height: 1;
  margin-bottom: 4px;
}
.s2-bidder-stat-lbl {
  font-size: 0.62rem;
  color: var(--t3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Bidder Tabs ── */
.s2-bidder-tabs {
  display: flex;
  gap: 2px;
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 14px 14px 0 0;
  border-bottom: none;
  padding: 6px 6px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.s2-bidder-tabs::-webkit-scrollbar { display: none; }
.s2-bidder-tab {
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
  min-height: 44px;
  position: relative;
}
.s2-bidder-tab:hover {
  color: var(--cyan);
  background: rgba(6,182,212,0.04);
}
.s2-bidder-tab--active,
.s2-bidder-tab.active {
  color: var(--cyan);
  background: rgba(6,182,212,0.06);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--cyan);
}

/* ── Tab Panels ── */
.s2-bidder-tab-panels {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-top: none;
  border-radius: 0 0 16px 16px;
  min-height: 200px;
  box-shadow: var(--shadow-sm);
}
.s2-bidder-tab-panel {
  padding: 24px;
  display: none;
}
.s2-bidder-tab-panel--active {
  display: block;
}

/* ── Tab Empty States ── */
.s2-tab-empty {
  text-align: center;
  padding: 52px 24px;
}
.s2-tab-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
  display: block;
}
.s2-tab-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--t);
  margin-bottom: 6px;
}
.s2-tab-empty-sub {
  font-size: 0.82rem;
  color: var(--t3);
  line-height: 1.6;
}

/* ── Responsive Table (Entered/Bids/Downloads) ── */
.s2-resp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--b1);
}
.s2-resp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.s2-resp-table thead th {
  background: var(--bg2);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t3);
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
}
.s2-resp-table tbody tr {
  border-bottom: 1px solid var(--b1);
  transition: background 0.12s;
}
.s2-resp-table tbody tr:last-child { border-bottom: none; }
.s2-resp-table tbody tr:hover { background: var(--bg2); }
.s2-resp-table td {
  padding: 11px 14px;
  color: var(--t2);
  vertical-align: middle;
}
.s2-rt-name {
  font-weight: 600;
  color: var(--t) !important;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Reviews list ── */
.s2-reviews-list { }
.s2-review-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--b1);
}
.s2-review-row:last-child { border-bottom: none; }
.s2-review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.s2-review-stars { font-size: 0.9rem; }
.s2-review-date  { font-size: 0.72rem; color: var(--t3); }
.s2-review-title { font-weight: 700; font-size: 0.88rem; color: var(--t); margin: 0 0 4px; }
.s2-review-body  { font-size: 0.82rem; color: var(--t2); margin: 4px 0; line-height: 1.6; }
.s2-review-meta  {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--t3);
}

/* ══════════════════════════════════════════════════════════════════
   CREDIT HISTORY — Premium Table + Mobile Stacked Cards
══════════════════════════════════════════════════════════════════ */
.s2-credit-history-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 20px;
  box-shadow: var(--shadow-sm);
}
.s2-ch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--b1);
  background: var(--bg2);
}
.s2-ch-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--t);
  letter-spacing: -0.1px;
}

/* Table */
.s2-ch-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block; /* desktop default */
}
.s2-ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.s2-ch-thead-row { background: var(--bg2); }
.s2-ch-th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t3);
  border-bottom: 1px solid var(--b1);
  white-space: nowrap;
}
.s2-ch-row { border-bottom: 1px solid var(--b1); transition: background 0.12s; }
.s2-ch-row:last-child { border-bottom: none; }
.s2-ch-row:hover { background: var(--bg2); }
.s2-ch-cell {
  padding: 10px 14px;
  color: var(--t2);
  vertical-align: middle;
}
.s2-ch-cell-date { white-space: nowrap; }
.s2-ch-cell-source {
  font-size: 0.72rem;
  color: var(--t3);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s2-ch-cell-expiry { font-size: 0.72rem; color: var(--t3); white-space: nowrap; }
.s2-ch-date { font-size: 0.78rem; color: var(--t2); font-weight: 600; }
.s2-ch-time { font-size: 0.65rem; color: var(--t4); margin-top: 1px; }

/* Direction badges */
.s2-ch-dir-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill);
  padding: 3px 9px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.s2-ch-dir-in  { background: rgba(5,150,105,0.08); color: var(--emr); border: 1px solid rgba(5,150,105,0.2); }
.s2-ch-dir-out { background: rgba(220,38,38,0.06); color: var(--red2); border: 1px solid rgba(220,38,38,0.18); }

/* Amount values */
.s2-ch-amt-in  { font-weight: 800; color: var(--emr); }
.s2-ch-amt-out { font-weight: 800; color: var(--fg); }

/* Status badges */
.s2-ch-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill);
  padding: 2px 9px;
  font-size: 0.62rem;
  font-weight: 700;
}
.s2-ch-status-active  { background: rgba(5,150,105,0.07); color: var(--emr); border: 1px solid rgba(5,150,105,0.18); }
.s2-ch-status-expired { background: rgba(220,38,38,0.06); color: var(--red2); border: 1px solid rgba(220,38,38,0.15); }
.s2-ch-status-used    { background: rgba(0,0,0,0.04); color: var(--t3); border: 1px solid var(--b2); }

/* Mobile stacked cards — hidden on desktop */
.s2-ch-mobile-list {
  display: none;
  padding: 8px 12px;
}
.s2-ch-mobile-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--b1);
}
.s2-ch-mobile-card:last-child { border-bottom: none; }
.s2-ch-mc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.s2-ch-mc-left { display: flex; flex-direction: column; gap: 4px; }
.s2-ch-mc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.s2-ch-mc-source { font-size: 0.72rem; color: var(--t3); }
.s2-ch-mc-amount { font-size: 1rem !important; }
.s2-ch-mc-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.s2-ch-mc-date { font-size: 0.68rem; color: var(--t3); }
.s2-ch-mc-expiry { font-size: 0.68rem; color: var(--t4); }

/* Empty state */
.s2-ch-empty {
  text-align: center;
  padding: 48px 20px;
}
.s2-ch-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.35;
  display: block;
}
.s2-ch-empty-title {
  font-weight: 700;
  color: var(--t);
  margin-bottom: 4px;
}
.s2-ch-empty-sub { font-size: 0.82rem; color: var(--t3); }

/* Hide desktop table rows from mobile list & vice versa */
.s2-ch-row-desktop { display: table-row; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Bidder Dashboard
══════════════════════════════════════════════════════════════════ */
/* Tablet ≤ 768px */
@media (max-width: 768px) {
  .s2-bidder-inner { padding: 20px 16px 0; }

  .s2-bidder-header { padding: 20px 18px; gap: 14px; }
  .s2-bh-avatar { width: 56px; height: 56px; }
  .s2-bh-name { font-size: 1.1rem; }

  .s2-bidder-stats-bar { grid-template-columns: repeat(3, 1fr); }
  .s2-bidder-stat:nth-child(3) { border-right: none; }
  .s2-bidder-stat:nth-child(4) { border-top: 1px solid var(--b1); }
  .s2-bidder-stat:nth-child(5) { border-top: 1px solid var(--b1); }

  .s2-bidder-tab { padding: 9px 12px; font-size: 0.78rem; }
  .s2-bidder-tab-panel { padding: 18px 16px; }

  /* Switch credit history to mobile cards */
  .s2-ch-table-wrap { display: none; }
  .s2-ch-mobile-list { display: block; }
  .s2-ch-row-desktop { display: none; }
}

/* Mobile ≤ 480px */
@media (max-width: 480px) {
  .s2-bidder-inner { padding: 14px 12px 0; }
  .s2-bidder-header { flex-direction: column; align-items: stretch; padding: 16px 14px; }
  .s2-bh-left { gap: 14px; }
  .s2-bh-right { justify-content: flex-start; }

  .s2-bidder-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .s2-bidder-stat:nth-child(2) { border-right: none; }
  .s2-bidder-stat:nth-child(3) { border-top: 1px solid var(--b1); }
  .s2-bidder-stat:nth-child(4) { border-top: 1px solid var(--b1); border-right: none; }
  .s2-bidder-stat:nth-child(5) { grid-column: 1/-1; border-top: 1px solid var(--b1); }

  .s2-bidder-tab-panel { padding: 14px 12px; }

  /* Responsive table → label-based cards on mobile */
  .s2-resp-table-wrap { border: none; }
  .s2-resp-table thead { display: none; }
  .s2-resp-table tbody tr {
    display: block;
    border: 1.5px solid var(--b1);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: #fff;
  }
  .s2-resp-table tbody tr:last-child { margin-bottom: 0; }
  .s2-resp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border: none;
    font-size: 0.8rem;
  }
  .s2-resp-table td::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--t3);
    flex-shrink: 0;
    margin-right: 10px;
  }
  .s2-rt-name {
    max-width: none;
    white-space: normal;
    font-size: 0.85rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   BIDDER DASHBOARD — Extra Missing Pieces
══════════════════════════════════════════════════════════════════ */

/* Conversion row */
.s2-credit-conversion-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.s2-conv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--t2);
  padding: 6px 18px;
  white-space: nowrap;
}
.s2-conv-sep {
  width: 1px;
  height: 24px;
  background: var(--b2);
  flex-shrink: 0;
}

/* Buy credits card */
.s2-buy-credits-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.s2-bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.s2-bc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--t);
}
.s2-bc-rate-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--emr);
  background: rgba(5,150,105,0.07);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--pill);
  padding: 4px 12px;
}

/* Buy form */
.s2-buy-form { padding-top: 14px; }
.s2-buy-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}
.s2-buy-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 120px;
}
.s2-buy-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.s2-buy-submit {
  width: 100%;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  padding: 14px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(8,145,178,0.28);
  transition: all 0.2s;
  min-height: 44px;
}
.s2-buy-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(8,145,178,0.38);
  transform: translateY(-1px);
}

/* Purchase pack grid */
.s2-purchase-pack-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.s2-purchase-pack {
  border: 1.5px solid var(--b2);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: #fff;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.s2-purchase-pack:hover {
  border-color: var(--cyan2);
  background: rgba(6,182,212,0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8,145,178,0.12);
}
.s2-purchase-pack--popular {
  border-color: var(--cyan);
  background: rgba(6,182,212,0.05);
  box-shadow: 0 2px 12px rgba(8,145,178,0.16);
  position: relative;
}
.s2-purchase-pack--popular::before {
  content: 'POPULAR';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grd-brand);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: var(--pill);
  padding: 2px 8px;
  white-space: nowrap;
}
.s2-purchase-pack--selected {
  border-color: var(--cyan) !important;
  background: rgba(6,182,212,0.07) !important;
}
.s2-pp-usd {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--t);
}
.s2-pp-credits {
  font-size: 0.7rem;
  color: var(--cyan);
  font-weight: 700;
}
.s2-pp-label {
  font-size: 0.6rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.s2-pp-custom-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--t2);
}

/* Expiry alert */
.s2-expiry-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(245,158,11,0.07);
  border: 1.5px solid rgba(245,158,11,0.28);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.s2-expiry-alert-icon { font-size: 1.2rem; flex-shrink: 0; }
.s2-expiry-alert-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 3px;
}
.s2-expiry-alert-desc { font-size: 0.78rem; color: var(--t2); line-height: 1.5; }

/* Referral premium card */
.s2-referral-premium-card {
  background: #fff;
  border: 1.5px solid var(--b1);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.s2-ref-header { margin-bottom: 16px; }
.s2-ref-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--t);
}

/* Referral stats grid */
.s2-ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.s2-ref-stat {
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.s2-ref-stat-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--t);
  line-height: 1;
  margin-bottom: 4px;
}
.s2-ref-stat-val--green { color: var(--emr); }
.s2-ref-stat-lbl { font-size: 0.62rem; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Referral link */
.s2-ref-link-section { margin-bottom: 18px; }
.s2-ref-link-label { font-size: 0.72rem; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.s2-ref-link-row { display: flex; gap: 8px; }
.s2-ref-link-input {
  flex: 1;
  font-family: monospace;
  font-size: 0.78rem;
  padding: 10px 12px;
  border: 1.5px solid var(--b2);
  border-radius: var(--rad-xs);
  color: var(--t2);
  background: var(--bg2);
  min-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s2-ref-copy-btn {
  flex-shrink: 0;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  min-height: 44px;
}
.s2-ref-copy-btn:hover { filter: brightness(1.08); }

/* Tier boxes */
.s2-ref-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.s2-ref-tier-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  border-radius: 12px;
  padding: 14px 14px;
}
.s2-ref-tier-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: 2px;
}
.s2-ref-tier-ico--l1 { background: rgba(6,182,212,0.1); color: var(--cyan); border: 1.5px solid rgba(6,182,212,0.25); }
.s2-ref-tier-ico--l2 { background: rgba(5,150,105,0.08); color: var(--emr); border: 1.5px solid rgba(5,150,105,0.2); }
.s2-ref-tier-name { font-size: 0.82rem; font-weight: 700; color: var(--t); margin-bottom: 3px; }
.s2-ref-tier-desc { font-size: 0.72rem; color: var(--t3); margin-bottom: 5px; }
.s2-ref-tier-earn { font-size: 0.78rem; font-weight: 800; color: var(--cyan); }
.s2-ref-tier-earn--green { color: var(--emr); }

/* ── Sticky action strip (inside dashboard) ── */
.s2-sticky-action-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1.5px solid var(--b1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  gap: 16px;
}
.s2-sas-credits { display: flex; flex-direction: column; gap: 1px; }
.s2-sas-credits-label { font-size: 0.62rem; color: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.s2-sas-credits-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--t);
  line-height: 1;
}
.s2-sas-credits-sub { font-size: 0.65rem; color: var(--t3); }
.s2-sas-btn {
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  padding: 13px 28px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(8,145,178,0.28);
  transition: all 0.2s;
  min-height: 44px;
  white-space: nowrap;
}
.s2-sas-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(8,145,178,0.38);
  transform: translateY(-1px);
}

/* ── Responsive adjustments for all new pieces ── */
@media (max-width: 860px) {
  .s2-purchase-pack-grid { grid-template-columns: repeat(3, 1fr); }
  .s2-ref-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-conv-sep { display: none; }
  .s2-credit-conversion-row { gap: 0; }
  .s2-conv-item { padding: 4px 12px; }
}
@media (max-width: 640px) {
  .s2-purchase-pack-grid { grid-template-columns: repeat(3, 1fr); }
  .s2-ref-tiers { grid-template-columns: 1fr; }
  .s2-sticky-action-strip { padding: 10px 16px; }
  .s2-sas-btn { padding: 11px 20px; font-size: 0.85rem; }
  .s2-ref-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-credit-conversion-row { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .s2-purchase-pack-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-cb-card { padding: 16px 12px; }
}


/* ════════════════════════════════════════════════════════════════
   SERTRUS2 — COMPREHENSIVE UI ENHANCEMENTS
   Live Energy Strip · Value Clarity · Urgency Badges · Winner Feed
   Trust Block · Launch Teaser · Category Hint · Credit Psychology
   Referral Redesign · Micro-animations · Mobile Optimisation
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframe animations ── */
@keyframes s2-pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes s2-fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes s2-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
@keyframes s2-badge-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
@keyframes s2-winner-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes s2-les-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}
@keyframes s2-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes s2-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Live Energy Strip ── */
.s2-live-energy-strip {
  background: linear-gradient(135deg, #0a0f1a 0%, #0e1628 60%, #0d1a2e 100%);
  border-bottom: 1px solid rgba(34,211,238,0.12);
  padding: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.s2-live-energy-strip::-webkit-scrollbar { display: none; }

.s2-les-inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  min-width: max-content;
}
.s2-les-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 18px;
  white-space: nowrap;
}
.s2-les-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.s2-les-pulse-icon {
  display: inline-block;
  font-size: 1rem;
  animation: s2-les-pulse 2s ease-in-out infinite;
}
.s2-les-pulse-gold { animation-delay: 0.3s; }
.s2-les-pulse-green { animation-delay: 0.6s; }
.s2-les-pulse-cyan { animation-delay: 0.9s; }
.s2-les-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -0.01em;
}
.s2-les-lbl {
  font-size: 0.72rem;
  color: var(--t3);
  font-weight: 500;
}

/* ── Value Clarity Section ── */
.s2-value-clarity-section {
  background: linear-gradient(135deg, rgba(8,145,178,0.08) 0%, rgba(16,185,129,0.06) 100%);
  border-bottom: 1px solid rgba(34,211,238,0.1);
  padding: 16px 24px;
}
.s2-vc-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.s2-vc-headline {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--t);
  letter-spacing: -0.01em;
}
.s2-vc-accent {
  font-size: 1.18rem;
  font-weight: 900;
  background: var(--grd-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.s2-vc-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.s2-vc-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.8rem;
  color: var(--t2);
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.s2-vc-pill:hover {
  border-color: var(--cyan);
  background: rgba(34,211,238,0.05);
}
.s2-vc-pill-icon { font-size: 0.9rem; }
.s2-vc-pill-sep {
  color: var(--t3);
  font-size: 1.1rem;
  user-select: none;
}
.s2-vc-microcopy {
  font-size: 0.74rem;
  color: var(--t3);
  font-style: italic;
}

/* ── Trust Block Section ── */
.s2-trust-block-section {
  padding: 56px 24px;
  background: var(--bg);
}
.s2-tb-inner {
  max-width: 1360px;
  margin: 0 auto;
}
.s2-tb-header {
  text-align: center;
  margin-bottom: 36px;
}
.s2-tb-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--t);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.s2-tb-sub {
  font-size: 0.88rem;
  color: var(--t3);
  margin: 0;
}
.s2-tb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.s2-tb-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--rad);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: s2-fade-in-up 0.4s ease both;
}
.s2-tb-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  border-color: rgba(34,211,238,0.25);
}
.s2-tb-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,211,238,0.08);
  border-radius: 12px;
  animation: s2-float 3s ease-in-out infinite;
}
.s2-tb-item:nth-child(2) .s2-tb-icon { animation-delay: 0.4s; }
.s2-tb-item:nth-child(3) .s2-tb-icon { animation-delay: 0.8s; }
.s2-tb-item:nth-child(4) .s2-tb-icon { animation-delay: 1.2s; }
.s2-tb-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--t);
  margin-bottom: 5px;
}
.s2-tb-item-desc {
  font-size: 0.8rem;
  color: var(--t3);
  line-height: 1.5;
}

/* ── Urgency Badges ── */
.s2-badge-ending-soon {
  background: rgba(245,158,11,0.92);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: s2-badge-pulse-amber 2s ease infinite;
}
.s2-badge-almost-full {
  background: rgba(239,68,68,0.92);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: s2-badge-pulse 2s ease infinite;
}
.s2-badge-filling-fast {
  background: rgba(234,88,12,0.92);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.s2-badge-new {
  background: rgba(16,185,129,0.92);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Winner Feed ── */
.s2-winner-feed-wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.s2-winner-feed-wrap::before,
.s2-winner-feed-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.s2-winner-feed-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.s2-winner-feed-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}
.s2-winner-feed {
  display: flex;
  gap: 14px;
  animation: s2-winner-scroll 40s linear infinite;
  width: max-content;
}
.s2-winner-feed:hover {
  animation-play-state: paused;
}
.s2-wf-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--rad);
  padding: 14px 18px;
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  transition: transform 0.2s, border-color 0.2s;
  animation: s2-fade-in-up 0.4s ease both;
}
.s2-wf-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16,185,129,0.3);
}
.s2-wf-card--sample {
  opacity: 0.75;
}
.s2-wf-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16,185,129,0.08);
  border-radius: 10px;
}
.s2-wf-body { flex: 1; min-width: 0; }
.s2-wf-product {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.s2-wf-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--t3);
}
.s2-wf-winner { color: var(--t2); }
.s2-wf-sep { color: var(--t3); }
.s2-wf-amount strong { color: var(--emerald); }
.s2-wf-pool { font-size: 0.68rem; }
.s2-wf-ago {
  font-size: 0.67rem;
  color: var(--t3);
  flex-shrink: 0;
  white-space: nowrap;
}
.s2-wf-badge {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Category Conversion Hint ── */
.s2-cat-conversion-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  background: rgba(34,211,238,0.06);
  border: 1px solid rgba(34,211,238,0.15);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--t2);
  line-height: 1.4;
}
.s2-cch-icon { font-size: 1rem; flex-shrink: 0; }

/* ── Launch Teaser (empty auction state) ── */
.s2-launch-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 14px;
}
.s2-lt-icon {
  font-size: 3.5rem;
  animation: s2-float 3s ease-in-out infinite;
}
.s2-lt-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--t);
  letter-spacing: -0.02em;
}
.s2-lt-sub {
  font-size: 0.88rem;
  color: var(--t3);
  max-width: 440px;
  line-height: 1.5;
}
.s2-lt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.s2-lt-hint {
  font-size: 0.76rem;
  color: var(--t3);
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-style: italic;
}

/* ── Referral Promo — Homepage Redesign ── */
.s2-rp-header-block {
  text-align: center;
  margin-bottom: 28px;
}
.s2-rp-tier-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.s2-rp-tier-card {
  padding: 22px 20px;
  border-radius: var(--rad);
  border: 2px solid transparent;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.s2-rp-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.s2-rp-tier-card--l1 {
  background: rgba(34,211,238,0.07);
  border-color: rgba(34,211,238,0.2);
}
.s2-rp-tier-card--l2 {
  background: rgba(16,185,129,0.07);
  border-color: rgba(16,185,129,0.2);
}
.s2-rp-tc-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  background: rgba(34,211,238,0.15);
  color: var(--cyan);
}
.s2-rp-tc-badge--l2 {
  background: rgba(16,185,129,0.15);
  color: var(--emerald);
}
.s2-rp-tc-pct {
  font-size: 2.4rem;
  font-weight: 900;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 4px;
}
.s2-rp-tc-pct--green { color: var(--emerald); }
.s2-rp-tc-label {
  font-size: 0.7rem;
  color: var(--t3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.s2-rp-tc-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t);
  margin-bottom: 6px;
}
.s2-rp-tc-desc {
  font-size: 0.76rem;
  color: var(--t2);
  line-height: 1.4;
  margin-bottom: 6px;
}
.s2-rp-tc-example {
  font-size: 0.72rem;
  color: var(--t3);
  font-style: italic;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 5px 8px;
}
.s2-rp-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.s2-rp-share-block { display: flex; flex-direction: column; gap: 10px; }
.s2-rp-link-row {
  display: flex;
  gap: 8px;
}
.s2-rp-link-input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.78rem;
  color: var(--t2);
  font-family: monospace;
  min-width: 0;
}
.s2-rp-share-hint {
  font-size: 0.73rem;
  color: var(--t3);
  line-height: 1.4;
}
.s2-rp-connect-cta { display: flex; flex-direction: column; gap: 8px; }

/* ── Dashboard Referral Redesign ── */
.s2-ref-subtitle {
  font-size: 0.8rem;
  color: var(--t3);
  margin-top: 4px;
}
.s2-ref-tier-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 20px;
}
.s2-ref-th-card {
  padding: 18px 16px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.s2-ref-th-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.s2-ref-th-card--l1 { background: rgba(34,211,238,0.06); border-color: rgba(34,211,238,0.18); }
.s2-ref-th-card--l2 { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.18); }
.s2-ref-th-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
  background: rgba(34,211,238,0.12);
  color: var(--cyan);
}
.s2-ref-th-badge--l2 { background: rgba(16,185,129,0.12); color: var(--emerald); }
.s2-ref-th-pct {
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 2px;
}
.s2-ref-th-pct--green { color: var(--emerald); }
.s2-ref-th-label {
  font-size: 0.65rem;
  color: var(--t3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.s2-ref-th-desc {
  font-size: 0.73rem;
  color: var(--t2);
  line-height: 1.4;
}
.s2-ref-share-hint {
  font-size: 0.73rem;
  color: var(--t3);
  margin-top: 6px;
}

/* ── Credit Psychology Messages ── */
.s2-credit-psych {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
  animation: s2-fade-in-up 0.35s ease both;
  flex-wrap: wrap;
}
.s2-credit-psych--empty {
  background: rgba(34,211,238,0.07);
  border: 1px solid rgba(34,211,238,0.2);
}
.s2-credit-psych--active {
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.2);
}
.s2-credit-psych--rich {
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.2);
}
.s2-credit-psych--expiry {
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
}
.s2-cp-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.s2-cp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.s2-cp-body strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--t);
  display: block;
}
.s2-cp-body span {
  font-size: 0.76rem;
  color: var(--t2);
  line-height: 1.4;
}
.s2-cp-cta {
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--t);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  min-height: 36px;
  flex-shrink: 0;
}
.s2-cp-cta:hover { background: rgba(34,211,238,0.12); transform: scale(1.03); }
.s2-cp-cta--primary {
  background: var(--grd-brand);
  color: #fff;
  border-color: transparent;
}
.s2-cp-cta--primary:hover { filter: brightness(1.1); }

/* ── Sticky Bar: no-credit state ── */
.s2-sas-credits-val--hint {
  font-size: 1rem;
  color: var(--cyan);
}
.s2-sas-btn--get {
  background: rgba(34,211,238,0.12);
  border: 1.5px solid rgba(34,211,238,0.35);
  color: var(--cyan);
  box-shadow: none;
}
.s2-sas-btn--get:hover {
  background: rgba(34,211,238,0.2);
  box-shadow: 0 4px 14px rgba(34,211,238,0.2);
}

/* ── Micro-animations: Card hover lift ── */
.s2-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}
/* Tap scale feedback for mobile */
.s2-card:active,
.s2-btn-hero-primary:active,
.s2-btn-hero-secondary:active,
.s2-sas-btn:active,
.s2-cp-cta:active {
  transform: scale(0.97);
}

/* ── Section fade-in animation ── */
.s2-live-energy-strip,
.s2-value-clarity-section,
.s2-trust-block-section,
.s2-winner-feed-wrap,
.s2-launch-teaser {
  animation: s2-fade-in-up 0.5s ease both;
}

/* ── Mobile Optimisations ── */

/* 1180px - wide */
@media (max-width: 1180px) {
  .s2-tb-grid { grid-template-columns: repeat(2, 1fr); }
  .s2-rp-tier-cards { grid-template-columns: repeat(2, 1fr); }
  .s2-rp-bottom-row { grid-template-columns: 1fr; }
}

/* 860px - tablet */
@media (max-width: 860px) {
  .s2-les-inner { padding: 0 16px; }
  .s2-les-item { padding: 4px 12px; }
  .s2-vc-headline { font-size: 0.95rem; }
  .s2-trust-block-section { padding: 36px 20px; }
  .s2-tb-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .s2-tb-title { font-size: 1.25rem; }
  .s2-rp-tier-cards { grid-template-columns: repeat(2, 1fr); }
  .s2-rp-bottom-row { grid-template-columns: 1fr; }
  .s2-ref-tier-highlights { grid-template-columns: repeat(2, 1fr); }
  .s2-winner-feed-wrap::before,
  .s2-winner-feed-wrap::after { width: 30px; }
}

/* 768px */
@media (max-width: 768px) {
  .s2-tb-grid { grid-template-columns: 1fr; }
  .s2-tb-item { padding: 16px; }
  .s2-tb-icon { width: 40px; height: 40px; font-size: 1.4rem; }
  .s2-rp-tier-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .s2-rp-tc-pct { font-size: 1.9rem; }
  .s2-credit-psych { flex-direction: column; align-items: flex-start; gap: 10px; }
  .s2-cp-cta { align-self: stretch; text-align: center; }
  .s2-wf-card { min-width: 240px; padding: 12px 14px; }
}

/* 480px - mobile */
@media (max-width: 480px) {
  .s2-les-sep { display: none; }
  .s2-les-inner { gap: 4px; }
  .s2-les-item { padding: 4px 10px; }
  .s2-les-val { font-size: 0.82rem; }
  .s2-les-lbl { font-size: 0.64rem; }
  .s2-vc-pills { gap: 6px; }
  .s2-vc-pill { font-size: 0.74rem; padding: 4px 10px; }
  .s2-tb-grid { grid-template-columns: 1fr; }
  .s2-tb-item { flex-direction: row; }
  .s2-rp-tier-cards { grid-template-columns: 1fr; }
  .s2-rp-tc-pct { font-size: 1.7rem; }
  .s2-rp-bottom-row { grid-template-columns: 1fr; }
  .s2-ref-tier-highlights { grid-template-columns: 1fr; }
  .s2-lt-title { font-size: 1.15rem; }
  .s2-lt-actions { flex-direction: column; width: 100%; }
  .s2-lt-actions button { width: 100%; justify-content: center; }
  .s2-wf-card { min-width: 220px; }
  .s2-cat-conversion-hint { font-size: 0.72rem; padding: 9px 12px; }
  .s2-credit-psych { padding: 12px 14px; }
  .s2-cp-body strong { font-size: 0.8rem; }
}

/* 420px - smallest mobile */
@media (max-width: 420px) {
  .s2-les-item { padding: 3px 7px; }
  .s2-les-val { font-size: 0.76rem; }
  .s2-vc-headline { font-size: 0.88rem; }
  .s2-vc-pill { padding: 3px 9px; }
  .s2-trust-block-section { padding: 28px 14px; }
  .s2-tb-title { font-size: 1.1rem; }
  .s2-tb-icon { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 9px; }
  .s2-rp-tc-pct { font-size: 1.5rem; }
  .s2-winner-feed-wrap::before,
  .s2-winner-feed-wrap::after { display: none; }
  .s2-wf-card { min-width: 200px; padding: 10px 12px; }
  .s2-wf-emoji { width: 34px; height: 34px; font-size: 1.3rem; }
  .s2-wf-product { font-size: 0.76rem; }
  .s2-launch-teaser { padding: 32px 16px; }
  .s2-lt-icon { font-size: 2.8rem; }
}

/* Prevent any horizontal scroll at all breakpoints */
body, html {
  overflow-x: hidden;
}
.s2-section-inner,
.s2-hero-premium-inner,
.s2-tb-inner,
.s2-referral-promo-inner,
.s2-seller-cta-premium-inner,
.s2-credit-explainer-inner {
  overflow-x: hidden;
}
/* Make all full-width buttons on mobile */
@media (max-width: 480px) {
  .s2-lt-actions .s2-btn-hero-primary,
  .s2-lt-actions .s2-btn-hero-secondary,
  .s2-rp-connect-cta .s2-btn-hero-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DATA-FIRST HERO (eBay / Heritage Auctions style)
   Class prefix: s2-dh-
══════════════════════════════════════════════════════════════════ */
.s2-dh {
  background: #fff;
  border-bottom: 1px solid var(--b1);
  padding: 0;
}
.s2-dh-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 52px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

/* Left column */
.s2-dh-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.s2-dh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.s2-dh-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  animation: glow-pulse 2.5s ease infinite;
}
.s2-dh-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--t);
  line-height: 1.1;
  margin: 0 0 16px;
}
.s2-dh-accent {
  color: var(--cyan);
}
.s2-dh-sub {
  font-size: 0.97rem;
  color: var(--t2);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 0 28px;
}
.s2-dh-sub strong { color: var(--t); }

/* Info row */
.s2-dh-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: var(--bg2);
  border: 1px solid var(--b1);
  border-radius: var(--rad-xs);
  padding: 14px 20px;
  margin-bottom: 28px;
}
.s2-dh-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex: 1;
  min-width: 110px;
}
.s2-dh-info-item:first-child { padding-left: 0; }
.s2-dh-info-item:last-child  { padding-right: 0; }
.s2-dh-info-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.s2-dh-info-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t);
}
.s2-dh-info-lbl {
  font-size: 0.7rem;
  color: var(--t3);
  font-weight: 500;
  margin-top: 1px;
}
.s2-dh-info-sep {
  width: 1px;
  height: 36px;
  background: var(--b1);
  flex-shrink: 0;
}

/* CTA row */
.s2-dh-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.s2-dh-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  padding: 13px 28px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 3px 16px rgba(8,145,178,0.3);
  transition: all 0.2s ease;
  cursor: pointer;
  min-height: 46px;
  letter-spacing: 0.01em;
}
.s2-dh-cta-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 24px rgba(8,145,178,0.4);
  transform: translateY(-1px);
}
.s2-dh-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--t);
  border: 1.5px solid var(--b2);
  border-radius: var(--rad-xs);
  padding: 12px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: all 0.18s ease;
  cursor: pointer;
  min-height: 46px;
}
.s2-dh-cta-secondary:hover {
  border-color: var(--cyan2);
  color: var(--cyan);
  transform: translateY(-1px);
}
.s2-dh-cta-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #EEF2FF;
  color: #4F46E5;
  border: 1.5px solid #C7D2FE;
  border-radius: var(--rad-xs);
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.18s ease;
  cursor: pointer;
  min-height: 46px;
}
.s2-dh-cta-wallet:hover {
  background: #E0E7FF;
  transform: translateY(-1px);
}

/* Live signals strip */
.s2-dh-signals {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--t3);
}
.s2-dh-signal { display: inline-flex; align-items: center; gap: 5px; }
.s2-dh-signal strong { color: var(--t); font-weight: 700; }
.s2-dh-signal-sep { color: var(--b2); }
.s2-dh-signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t3);
}
.s2-dh-signal-dot--live {
  background: var(--emerald);
  animation: glow-pulse 2s ease infinite;
}
.s2-dh-signal--urgent { color: var(--amber); font-weight: 600; }
.s2-dh-signal--urgent strong { color: var(--amber); }

/* Right column — featured auction */
.s2-dh-right {
  position: sticky;
  top: 80px;
}
.s2-dh-placeholder {
  background: var(--bg2);
  border: 2px dashed var(--b2);
  border-radius: var(--rad);
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.s2-dh-ph-icon  { font-size: 3rem; }
.s2-dh-ph-title { font-size: 1.05rem; font-weight: 700; color: var(--t); }
.s2-dh-ph-sub   { font-size: 0.83rem; color: var(--t3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   FEATURED AUCTION CARD (hero right panel)
   Class prefix: s2-fa-
══════════════════════════════════════════════════════════════════ */
.s2-fa {
  background: var(--surface);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s;
}
.s2-fa:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.s2-fa:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.s2-fa-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--bg2);
}
.s2-fa-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.s2-fa:hover .s2-fa-img { transform: scale(1.04); }
.s2-fa-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: var(--bg3);
}
.s2-fa-pool-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.95);
  color: var(--t);
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: var(--pill);
  padding: 3px 11px;
  box-shadow: var(--shadow-sm);
}

/* Featured auction badges */
.s2-fa-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  border-radius: var(--pill);
  padding: 4px 11px;
}
.s2-fa-badge--live    { background: var(--red2); color: #fff; animation: badge-pulse 1.5s ease infinite; }
.s2-fa-badge--ending  { background: var(--amber); color: #fff; }
.s2-fa-badge--almost  { background: var(--red2); color: #fff; }
.s2-fa-badge--filling { background: #f97316; color: #fff; }
.s2-fa-badge--new     { background: var(--violet); color: #fff; }

.s2-fa-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s2-fa-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.s2-fa-cat {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.s2-fa-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t);
  line-height: 1.3;
}
.s2-fa-value {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--emerald);
}

/* Signal row */
.s2-fa-signals {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg2);
  border-radius: var(--rad-xs);
  padding: 10px 14px;
  margin: 4px 0;
}
.s2-fa-sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px;
  flex: 1;
  text-align: center;
}
.s2-fa-sig:first-child { padding-left: 0; }
.s2-fa-sig:last-child  { padding-right: 0; }
.s2-fa-sig-sep {
  width: 1px;
  height: 28px;
  background: var(--b1);
  flex-shrink: 0;
}
.s2-fa-sig-val {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--t);
  font-variant-numeric: tabular-nums;
}
.s2-fa-sig-val--timer { color: var(--amber); }
.s2-fa-sig-lbl {
  font-size: 0.62rem;
  color: var(--t3);
  font-weight: 500;
  margin-top: 2px;
}

/* Progress */
.s2-fa-prog-wrap { margin: 0; }
.s2-fa-prog-track {
  height: 5px;
  background: var(--bg3);
  border-radius: 99px;
  overflow: hidden;
}
.s2-fa-prog-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: 99px;
  transition: width 0.8s ease;
}
.s2-fa-prog-fill--warn   { background: var(--amber); }
.s2-fa-prog-fill--urgent { background: var(--red2); }
.s2-fa-prog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--t3);
  margin-top: 4px;
}

.s2-fa-top5 {
  font-size: 0.72rem;
  color: var(--t3);
  font-weight: 500;
}
.s2-fa-final-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--red2);
  font-weight: 600;
  padding: 8px 12px;
  background: rgba(239,68,68,0.06);
  border-radius: var(--rad-xs);
  border: 1px solid rgba(239,68,68,0.15);
}
.s2-fa-cta {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(8,145,178,0.25);
}
.s2-fa-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 5px 20px rgba(8,145,178,0.35);
}
.s2-fa-cta--live {
  background: linear-gradient(135deg, var(--red2), #b91c1c);
  box-shadow: 0 2px 12px rgba(239,68,68,0.3);
}
.s2-fa-cta--live:hover {
  box-shadow: 0 5px 20px rgba(239,68,68,0.4);
}

/* ══════════════════════════════════════════════════════════════════
   MAIN AUCTION AREA — sort bar + list view + trust layer
   Class prefix: s2-maa-, s2-sfbar-, s2-lr-, s2-listing-trust
══════════════════════════════════════════════════════════════════ */
.s2-maa {
  background: var(--bg2);
  border-top: 1px solid var(--b1);
}
.s2-maa-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 32px 52px;
}

/* ── Sort & Filter bar ── */
.s2-sfbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: var(--rad-xs);
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.s2-sfbar-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.s2-sfbar-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
  white-space: nowrap;
}
.s2-sort-btn {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t2);
  background: transparent;
  border: 1.5px solid var(--b1);
  border-radius: var(--pill);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.s2-sort-btn:hover {
  border-color: var(--cyan2);
  color: var(--cyan);
}
.s2-sort-btn--active {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
  font-weight: 700;
}
.s2-sort-btn--active:hover {
  filter: brightness(1.08);
}
.s2-sfbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.s2-sfbar-sel {
  height: 34px;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t);
  background: var(--bg2);
  border: 1.5px solid var(--b1);
  border-radius: var(--rad-xs);
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 100px;
}
.s2-sfbar-sel:focus {
  outline: none;
  border-color: var(--cyan2);
}

/* Results meta row */
.s2-maa-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.s2-maa-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--t2);
}
.s2-maa-hint {
  font-size: 0.75rem;
  color: var(--t3);
}

/* ── Social-proof activity ticker ── */
.s2-sp-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--b1);
  border-radius: var(--rad-xs);
  padding: 8px 14px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.s2-sp-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  flex-shrink: 0;
  animation: glow-pulse 2s ease infinite;
}
.s2-sp-ticker-track {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.s2-sp-ticker-inner {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: s2-sp-scroll 28s linear infinite;
}
@keyframes s2-sp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.s2-sp-item {
  font-size: 0.77rem;
  color: var(--t2);
  white-space: nowrap;
}
.s2-sp-item em {
  font-style: normal;
  font-weight: 600;
  color: var(--t);
}

/* ── Auction List (eBay-style rows) ── */
.s2-auction-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--b1);
  border: 1px solid var(--b1);
  border-radius: var(--rad);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ── List Row ── */
.s2-lr {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 0;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  align-items: stretch;
  position: relative;
}
.s2-lr:hover {
  background: #F8FAFF;
  z-index: 1;
  box-shadow: 0 0 0 1.5px var(--cyan2);
}
.s2-lr:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
  z-index: 2;
}
.s2-lr--live {
  border-left: 3px solid var(--red2);
}
.s2-lr--urgent {
  border-left: 3px solid var(--amber);
}

/* Thumbnail */
.s2-lr-thumb {
  width: 120px;
  min-height: 110px;
  overflow: hidden;
  background: var(--bg3);
  flex-shrink: 0;
}
.s2-lr-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.s2-lr:hover .s2-lr-thumb-img { transform: scale(1.05); }
.s2-lr-thumb-fallback {
  width: 100%;
  height: 100%;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--bg3);
}

/* Info column */
.s2-lr-info {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.s2-lr-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.s2-lr-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--t);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.s2-lr-worth {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--emerald);
}
.s2-lr-signals {
  font-size: 0.74rem;
  color: var(--t3);
  font-weight: 500;
}
.s2-lr-prog {
  margin-top: 2px;
}
.s2-lr-prog-track {
  height: 4px;
  background: var(--bg3);
  border-radius: 99px;
  overflow: hidden;
  max-width: 280px;
}
.s2-lr-prog-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: 99px;
  transition: width 0.6s ease;
}
.s2-lr-prog-fill--warn   { background: var(--amber); }
.s2-lr-prog-fill--urgent { background: var(--red2); }
.s2-lr-seller {
  font-size: 0.7rem;
  color: var(--t3);
}
.s2-lr-seller strong { color: var(--t2); }

/* Inline badge */
.s2-lr-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: var(--pill);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.s2-lr-badge--live    { background: rgba(239,68,68,0.1); color: var(--red2); border: 1px solid rgba(239,68,68,0.25); animation: badge-pulse 2s ease infinite; }
.s2-lr-badge--ending  { background: rgba(245,158,11,0.1); color: #b45309; border: 1px solid rgba(245,158,11,0.25); }
.s2-lr-badge--almost  { background: rgba(239,68,68,0.08); color: var(--red2); border: 1px solid rgba(239,68,68,0.2); }
.s2-lr-badge--filling { background: rgba(249,115,22,0.1); color: #c2410c; border: 1px solid rgba(249,115,22,0.22); }
.s2-lr-badge--new     { background: rgba(109,40,217,0.1); color: var(--violet); border: 1px solid rgba(109,40,217,0.2); }

/* Right column */
.s2-lr-right {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-width: 160px;
  flex-shrink: 0;
  border-left: 1px solid var(--b1);
}
.s2-lr-pool {
  text-align: right;
}
.s2-lr-pool-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--t);
  font-variant-numeric: tabular-nums;
}
.s2-lr-pool-of {
  font-size: 0.68rem;
  color: var(--t3);
  font-weight: 500;
}
.s2-lr-entries {
  font-size: 0.72rem;
  color: var(--t3);
  font-weight: 500;
}
.s2-lr-timer {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.s2-lr-timer--urgent {
  color: var(--red2);
  animation: badge-pulse 2s ease infinite;
}
.s2-lr-cta {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: var(--rad-xs);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(8,145,178,0.2);
}
.s2-lr-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(8,145,178,0.32);
}
.s2-lr-cta--live {
  background: linear-gradient(135deg, var(--red2), #b91c1c);
  box-shadow: 0 2px 10px rgba(239,68,68,0.25);
}
.s2-lr-cta--live:hover { box-shadow: 0 4px 16px rgba(239,68,68,0.35); }
.s2-lr-cta--view {
  background: #fff;
  color: var(--t2);
  border: 1.5px solid var(--b2);
  box-shadow: none;
}
.s2-lr-cta--view:hover {
  border-color: var(--cyan2);
  color: var(--cyan);
  filter: none;
  box-shadow: none;
}

/* "All shown" notice */
.s2-maa-all-shown {
  text-align: center;
  padding: 28px 16px;
  font-size: 0.85rem;
  color: var(--t3);
}

/* ── Empty state ── */
.s2-maa-empty {
  text-align: center;
  padding: 60px 24px;
  background: #fff;
  border-radius: var(--rad);
  border: 1px solid var(--b1);
}
.s2-maa-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.s2-maa-empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 8px;
}
.s2-maa-empty-sub {
  font-size: 0.85rem;
  color: var(--t3);
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.s2-maa-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.s2-maa-empty-cta {
  margin-top: 8px;
}
.s2-maa-empty-credits-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(8,145,178,0.06);
  border: 1.5px solid rgba(8,145,178,0.2);
  border-radius: var(--pill);
  cursor: pointer;
  transition: all 0.15s ease;
}
.s2-maa-empty-credits-btn:hover {
  background: rgba(8,145,178,0.1);
}

/* ── Trust layer under listings ── */
.s2-listing-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--b1);
  border: 1px solid var(--b1);
  border-radius: var(--rad-xs);
  overflow: hidden;
  margin-top: 28px;
}
.s2-lt-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
}
.s2-lt-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.s2-lt-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--t);
  margin-bottom: 3px;
}
.s2-lt-desc {
  font-size: 0.72rem;
  color: var(--t3);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Data-first redesign breakpoints
══════════════════════════════════════════════════════════════════ */

/* 1180px — narrow inner */
@media (max-width: 1180px) {
  .s2-dh-inner {
    gap: 36px;
  }
  .s2-listing-trust {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 860px — collapse hero to single column */
@media (max-width: 860px) {
  .s2-dh-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 24px 40px;
  }
  .s2-dh-right {
    position: static;
  }
  .s2-dh-headline {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    letter-spacing: -1px;
  }
  .s2-dh-info-row {
    flex-wrap: wrap;
    gap: 10px 0;
  }
  .s2-dh-info-item {
    min-width: 50%;
    padding: 6px 8px;
  }
  .s2-dh-info-sep {
    display: none;
  }
  /* Sort bar: stack */
  .s2-sfbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* List rows: compact */
  .s2-lr {
    grid-template-columns: 90px 1fr auto;
  }
  .s2-lr-right {
    min-width: 130px;
    padding: 12px 14px;
  }
}

/* 768px */
@media (max-width: 768px) {
  .s2-maa-inner {
    padding: 28px 16px 36px;
  }
  .s2-listing-trust {
    grid-template-columns: 1fr 1fr;
  }
  .s2-lr {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
  }
  .s2-lr-thumb {
    width: 80px;
    min-height: 90px;
    grid-row: 1 / 3;
  }
  .s2-lr-info {
    padding: 12px 14px 6px;
  }
  .s2-lr-right {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-left: none;
    border-top: 1px solid var(--b1);
    padding: 8px 14px 12px;
    min-width: unset;
  }
  .s2-lr-pool { text-align: left; }
  .s2-lr-pool-val { font-size: 0.88rem; }
  .s2-lr-cta {
    margin-left: auto;
    width: auto;
    padding: 8px 16px;
  }
  .s2-sp-ticker { display: none; } /* hide on mobile — saves space */
}

/* 480px — full mobile */
@media (max-width: 480px) {
  .s2-dh-inner {
    padding: 28px 16px 32px;
  }
  .s2-dh-headline {
    font-size: 1.65rem;
    letter-spacing: -0.5px;
  }
  .s2-dh-sub { font-size: 0.88rem; }
  .s2-dh-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .s2-dh-cta-primary,
  .s2-dh-cta-secondary,
  .s2-dh-cta-wallet {
    width: 100%;
    justify-content: center;
  }
  .s2-dh-info-row { padding: 12px 14px; }
  .s2-dh-info-item { min-width: 100%; }
  .s2-sfbar-sort { gap: 6px; }
  .s2-sort-btn { padding: 5px 10px; font-size: 0.72rem; }
  .s2-sfbar-filters { gap: 6px; }
  .s2-sfbar-sel { min-width: 80px; font-size: 0.72rem; }
  .s2-listing-trust {
    grid-template-columns: 1fr;
  }
  .s2-lr {
    grid-template-columns: 70px 1fr;
  }
  .s2-lr-thumb { width: 70px; }
  .s2-lr-title { font-size: 0.85rem; }
  .s2-lr-cta { font-size: 0.75rem; }
  .s2-maa-empty { padding: 40px 16px; }
  .s2-maa-empty-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .s2-maa-empty-actions .s2-dh-cta-primary,
  .s2-maa-empty-actions .s2-dh-cta-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* 420px */
@media (max-width: 420px) {
  .s2-dh-headline { font-size: 1.45rem; }
  .s2-sfbar-sort { flex-wrap: wrap; }
  .s2-fa-signals { flex-direction: column; gap: 8px; }
  .s2-fa-sig-sep { display: none; }
  .s2-fa-sig { align-items: flex-start; text-align: left; }
}

/* Prevent any horizontal overflow from new elements */
.s2-dh, .s2-maa, .s2-sfbar, .s2-auction-list, .s2-listing-trust {
  overflow-x: hidden;
}
.s2-dh-inner, .s2-maa-inner {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   COMPACT UTILITY BAR (replaces text-heavy hero)
   Shows immediately under nav — 48px on desktop, auto on mobile
══════════════════════════════════════════════════════════════════ */
.s2-util-bar {
  background: #fff;
  border-bottom: 1.5px solid var(--b1);
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.s2-util-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
}
.s2-util-bar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}
.s2-util-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF2F2;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 20px;
  padding: 3px 10px 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--red2);
  white-space: nowrap;
  flex-shrink: 0;
}
.s2-util-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red2);
  animation: glow-pulse 1.8s ease infinite;
  flex-shrink: 0;
}
.s2-util-bar-tagline {
  font-size: 0.78rem;
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s2-util-bar-tagline strong { color: var(--t); }
.s2-util-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.s2-util-bar-stat {
  font-size: 0.75rem;
  color: var(--t3);
  white-space: nowrap;
}
.s2-util-bar-stat strong { color: var(--t); font-weight: 700; }
.s2-util-bar-urgent {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}
.s2-util-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grd-brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.s2-util-bar-cta:hover { filter: brightness(1.1); }
.s2-util-bar-cta--credits {
  background: #EEF2FF;
  color: #4F46E5;
  border: 1px solid #C7D2FE;
}
.s2-util-bar-cta--credits:hover { background: #E0E7FF; filter: none; }

/* Auction list first — remove top padding on main area */
.s2-maa--top {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.s2-maa--top .s2-maa-inner {
  padding-top: 16px;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .s2-util-bar-inner { height: auto; padding: 8px 0; flex-wrap: wrap; gap: 8px; }
  .s2-util-bar-tagline { display: none; }
  .s2-util-bar-stat { display: none; }
}
@media (max-width: 480px) {
  .s2-util-bar { padding: 0 12px; }
  .s2-util-bar-inner { padding: 6px 0; }
  .s2-util-bar-urgent { display: none; }
}

/* Suppress old hero and strips — they are replaced */
.s2-dh,
.s2-live-energy-strip,
.s2-value-clarity-section,
.s2-trust-block-section {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   eBay-style UI  —  eb-* component system
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties ── */
:root {
  --eb-blue:    #3665f3;
  --eb-blue-dk: #2c56d3;
  --eb-red:     #e53935;
  --eb-green:   #22a06b;
  --eb-amber:   #f59e0b;
  --eb-bg:      #f7f7f7;
  --eb-white:   #ffffff;
  --eb-border:  #e0e0e0;
  --eb-t1:      #191919;
  --eb-t2:      #555555;
  --eb-t3:      #767676;
  --eb-radius:  4px;
  --eb-shadow:  0 1px 4px rgba(0,0,0,.10);
  --eb-max:     1280px;
}

/* ── Page wrapper ── */
.eb-page {
  max-width: var(--eb-max);
  margin: 0 auto;
  padding: 0 16px 48px;
  background: var(--eb-bg);
  min-height: 100vh;
}

/* ── Live ticker strip (top of page, below nav) ── */
.eb-ticker {
  background: #191919;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 0.72rem;
  letter-spacing: .02em;
  overflow: hidden;
  width: 100%;
}
.eb-ticker-dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  animation: eb-pulse 1.8s ease infinite;
}
@keyframes eb-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.25); }
}
.eb-ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.eb-ticker-inner {
  display: inline-flex;
  gap: 40px;
  animation: eb-scroll 32s linear infinite;
  white-space: nowrap;
}
@keyframes eb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Category / quick-filter pills ── */
.eb-cat-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--eb-border);
  background: var(--eb-white);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.eb-cat-pills::-webkit-scrollbar { display: none; }

.eb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--eb-border);
  border-radius: 20px;
  background: var(--eb-white);
  color: var(--eb-t1);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
  flex-shrink: 0;
}
.eb-pill:hover {
  border-color: var(--eb-blue);
  color: var(--eb-blue);
}
.eb-pill--active {
  background: var(--eb-blue);
  border-color: var(--eb-blue);
  color: #fff;
}
.eb-pill--active:hover {
  background: var(--eb-blue-dk);
  border-color: var(--eb-blue-dk);
  color: #fff;
}
.eb-pill--cta {
  background: var(--eb-blue);
  border-color: var(--eb-blue);
  color: #fff;
  margin-left: auto;
  flex-shrink: 0;
}
.eb-pill--cta:hover {
  background: var(--eb-blue-dk);
  border-color: var(--eb-blue-dk);
}
.eb-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.eb-pill-dot--green { background: var(--eb-green); }
.eb-pill-dot--red   { background: var(--eb-red); }

/* ── Sort / filter bar ── */
.eb-sfbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--eb-border);
  background: var(--eb-white);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.eb-sfbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eb-sfbar-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--eb-t1);
}
.eb-sfbar-urgent {
  font-size: 0.75rem;
  color: #c2410c;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 3px;
  padding: 2px 8px;
  font-weight: 500;
}
.eb-sfbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.eb-sfbar-label {
  font-size: 0.8rem;
  color: var(--eb-t3);
}
.eb-sfbar-sel {
  font-size: 0.8rem;
  padding: 5px 10px;
  border: 1px solid var(--eb-border);
  border-radius: var(--eb-radius);
  background: var(--eb-white);
  color: var(--eb-t1);
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.eb-sfbar-sel:focus {
  border-color: var(--eb-blue);
}

/* ── Social proof activity ticker ── */
.eb-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--eb-border);
  font-size: 0.75rem;
  color: var(--eb-t2);
  background: var(--eb-white);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.eb-activity-dot {
  width: 6px; height: 6px;
  background: var(--eb-green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: eb-pulse 2s ease infinite;
}
.eb-activity-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.eb-activity-inner {
  display: inline-flex;
  gap: 32px;
  animation: s2-sp-scroll 28s linear infinite;
  white-space: nowrap;
}

/* ── Main 2-column layout ── */
.eb-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  padding: 16px 0 0;
  align-items: start;
}
@media (max-width: 860px) {
  .eb-layout {
    grid-template-columns: 1fr;
  }
  .eb-sidebar {
    display: none;
  }
}

/* ── Main auction area ── */
.eb-main {
  min-width: 0;
}

/* ── Sidebar ── */
.eb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 68px;
}
.eb-sidebar-card {
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  padding: 16px;
  box-shadow: var(--eb-shadow);
}
.eb-sidebar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--eb-t1);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--eb-border);
}
.eb-sidebar-cta {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: var(--eb-blue);
  color: #fff;
  border: none;
  border-radius: var(--eb-radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.eb-sidebar-cta:hover { background: var(--eb-blue-dk); }

/* How-it-works steps in sidebar */
.eb-how-steps { display: flex; flex-direction: column; gap: 10px; }
.eb-how-step  { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8rem; color: var(--eb-t2); }
.eb-how-num   {
  width: 22px; height: 22px;
  background: var(--eb-blue);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Trust items in sidebar */
.eb-sidebar-trust { display: flex; flex-direction: column; gap: 8px; }
.eb-trust-item    { display: flex; gap: 8px; font-size: 0.78rem; color: var(--eb-t2); }
.eb-trust-item span:first-child { font-size: 1rem; flex-shrink: 0; }

/* Stats in sidebar */
.eb-sidebar-stats { display: flex; flex-direction: column; gap: 8px; }
.eb-stat-row { display: flex; justify-content: space-between; align-items: baseline; }
.eb-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--eb-t1); }
.eb-stat-lbl { font-size: 0.75rem; color: var(--eb-t3); }

/* ── Empty state ── */
.eb-empty {
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  padding: 48px 24px;
  text-align: center;
  box-shadow: var(--eb-shadow);
}
.eb-empty-icon  { font-size: 2.5rem; margin-bottom: 12px; }
.eb-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--eb-t1); margin: 0 0 8px; }
.eb-empty-sub   { font-size: 0.85rem; color: var(--eb-t2); margin: 0 0 20px; }
.eb-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Shared buttons ── */
.eb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--eb-blue);
  color: #fff;
  border: none;
  border-radius: var(--eb-radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.eb-btn-primary:hover { background: var(--eb-blue-dk); }
.eb-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  color: var(--eb-blue);
  border: 1px solid var(--eb-blue);
  border-radius: var(--eb-radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.eb-btn-ghost:hover { background: rgba(54,101,243,.06); }

/* ── Page sections (below fold) ── */
.eb-section {
  margin-top: 32px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  padding: 24px 20px;
  box-shadow: var(--eb-shadow);
}
.eb-section--gray  { background: #f4f4f4; }
.eb-section--blue  { background: #1a3a6b; border-color: #1a3a6b; color: #fff; }
.eb-section--urgent { border-left: 4px solid var(--eb-amber); }

.eb-section-hd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.eb-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
  margin: 0;
}
.eb-section--blue .eb-section-hd { border-color: rgba(255,255,255,.15); }
.eb-section-sub {
  font-size: 0.78rem;
  color: var(--eb-t3);
}
.eb-section--blue .eb-section-sub { color: rgba(255,255,255,.7); }

/* Live badge */
.eb-live-badge {
  display: inline-block;
  background: var(--eb-red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  animation: badge-pulse 2s ease infinite;
}

/* ── Pool size tiles grid ── */
.eb-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.eb-pool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center;
}
.eb-pool-tile:hover {
  border-color: var(--eb-blue);
  box-shadow: 0 2px 10px rgba(54,101,243,.12);
  transform: translateY(-2px);
}
.eb-pool-emoji  { font-size: 1.6rem; }
.eb-pool-label  { font-size: 0.85rem; font-weight: 700; color: var(--eb-t1); }
.eb-pool-tip    { font-size: 0.72rem; color: var(--eb-t3); }

/* ── How it works 4-card grid ── */
.eb-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.eb-how-card {
  background: var(--eb-white);
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  padding: 20px 16px;
  position: relative;
  text-align: center;
}
.eb-how-card-num {
  position: absolute;
  top: -12px; left: 16px;
  width: 24px; height: 24px;
  background: var(--eb-blue);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.eb-how-card-icon { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.eb-how-card strong { font-size: 0.9rem; color: var(--eb-t1); display: block; margin-bottom: 6px; }
.eb-how-card p { font-size: 0.78rem; color: var(--eb-t2); margin: 0; }

/* ── Winner feed ── */
.eb-winner-list { display: flex; flex-direction: column; gap: 10px; }
.eb-winner-row  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--eb-bg);
  border: 1px solid var(--eb-border);
  border-radius: 4px;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.eb-winner-trophy { font-size: 1.1rem; }
.eb-winner-name   { font-weight: 600; color: var(--eb-t1); }
.eb-winner-won    { color: var(--eb-t2); flex: 1; }
.eb-winner-val    {
  font-size: 0.75rem;
  background: rgba(34,160,107,.1);
  color: #15803d;
  border: 1px solid rgba(34,160,107,.25);
  border-radius: 3px;
  padding: 2px 7px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Seller CTA section ── */
.eb-sctp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 680px) {
  .eb-sctp { grid-template-columns: 1fr; }
  .eb-sctp-right { display: none; }
}
.eb-sctp-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.eb-sctp-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.eb-sctp-sub   { font-size: 0.85rem; color: rgba(255,255,255,.8); margin: 0 0 20px; }
.eb-sctp-btn   { background: #fff; color: #1a3a6b; border: none; }
.eb-sctp-btn:hover { background: #f0f4ff; }
.eb-sctp-check {
  font-size: 0.82rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
  padding-left: 4px;
}
.eb-sctp-stats {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.eb-sctp-stat { display: flex; flex-direction: column; }
.eb-sctp-stat strong { font-size: 1rem; font-weight: 800; color: #fff; }
.eb-sctp-stat span   { font-size: 0.72rem; color: rgba(255,255,255,.65); }

/* ── Auction list — reuse s2-auction-list, upgrade the wrapper ── */
.eb-main .s2-auction-list {
  border: 1px solid var(--eb-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--eb-white);
  box-shadow: var(--eb-shadow);
}
.eb-main .s2-lr {
  background: var(--eb-white);
  border-bottom: 1px solid var(--eb-border);
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  margin: 0;
  transition: background .12s;
}
.eb-main .s2-lr:last-child { border-bottom: none; }
.eb-main .s2-lr:hover      { background: #f5f8ff; }

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  .eb-page { padding: 0 10px 32px; }
  .eb-sfbar { flex-direction: column; align-items: flex-start; }
  .eb-sfbar-right { width: 100%; overflow-x: auto; }
  .eb-pool-grid { grid-template-columns: repeat(2, 1fr); }
  .eb-how-grid  { grid-template-columns: 1fr 1fr; }
  .eb-section   { padding: 16px 12px; }
  .eb-ticker    { padding: 5px 10px; }
}
@media (max-width: 400px) {
  .eb-how-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
   SERTRUS2 v3.0 — Language Selector, FAQ, Chat, Support Tickets
   ═══════════════════════════════════════════════════════════════ */

/* ── Language selector ───────────────────────────────── */
.s2-lang-sel {
  background: var(--bg2, #1a1a2e);
  color: var(--text, #e8e8f0);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  min-width: 100px;
}
.s2-lang-sel:hover { border-color: var(--accent, #6c63ff); }
.s2-lang-float {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 999;
  background: var(--bg2, #1a1a2e);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* ── FAQ Page ────────────────────────────────────────── */
.s2-faq-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.s2-faq-header { margin-bottom: 24px; }
.s2-faq-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #e8e8f0);
}
.s2-faq-sub { color: var(--muted, #888); margin: 0; font-size: 15px; }
.s2-faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.s2-faq-cat-btn {
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  color: var(--text, #e8e8f0);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.s2-faq-cat-btn:hover,
.s2-faq-cat-btn.active {
  background: var(--accent, #6c63ff);
  border-color: var(--accent, #6c63ff);
  color: #fff;
}
.s2-faq-search-wrap { margin-bottom: 20px; }
.s2-faq-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  color: var(--text, #e8e8f0);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
}
.s2-faq-search:focus { border-color: var(--accent, #6c63ff); outline: none; }
.s2-faq-section { margin-bottom: 24px; }
.s2-faq-cat-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent, #6c63ff);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #2a2a4a);
}
.s2-faq-item {
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.s2-faq-q {
  width: 100%;
  background: var(--bg2, #1a1a2e);
  border: none;
  color: var(--text, #e8e8f0);
  text-align: left;
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.s2-faq-q:hover { background: var(--bg3, #22223a); }
.s2-faq-chevron { transition: transform 0.2s; flex-shrink: 0; color: var(--muted, #888); }
.s2-faq-a {
  padding: 14px 16px;
  color: var(--muted, #aaa);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg, #0f0f1e);
  border-top: 1px solid var(--border, #2a2a4a);
}
.s2-faq-empty { padding: 32px; text-align: center; color: var(--muted, #888); }
.s2-faq-error { padding: 32px; text-align: center; color: var(--red2, #f55); }
.s2-faq-loading { padding: 32px; text-align: center; color: var(--muted, #888); }
.s2-faq-cta {
  text-align: center;
  padding: 32px 0 0;
  border-top: 1px solid var(--border, #2a2a4a);
  margin-top: 32px;
}
.s2-faq-cta p { color: var(--muted, #888); margin-bottom: 12px; }
.s2-link {
  background: none;
  border: none;
  color: var(--accent, #6c63ff);
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
}

/* ── Chat widget ─────────────────────────────────────── */
.s2-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent, #6c63ff);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(108,99,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.s2-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(108,99,255,0.7);
}
.s2-chat-widget {
  position: fixed;
  bottom: 86px;
  right: 24px;
  z-index: 1001;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: 80vh;
  background: var(--bg, #0f0f1e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.s2-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--accent, #6c63ff);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.s2-chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.s2-chat-faq-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.s2-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s2-chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 90%;
}
.s2-chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.s2-chat-bot-icon { color: var(--accent, #6c63ff); font-size: 16px; margin-top: 4px; flex-shrink: 0; }
.s2-chat-bubble {
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #e8e8f0);
}
.s2-chat-msg-user .s2-chat-bubble {
  background: var(--accent, #6c63ff);
  border-color: var(--accent, #6c63ff);
  color: #fff;
  border-radius: 12px 12px 2px 12px;
}
.s2-chat-msg-bot .s2-chat-bubble { border-radius: 2px 12px 12px 12px; }
.s2-chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}
.s2-chat-typing span {
  width: 6px; height: 6px;
  background: var(--accent, #6c63ff);
  border-radius: 50%;
  animation: chatPulse 1.2s infinite;
}
.s2-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.s2-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.s2-chat-footer {
  border-top: 1px solid var(--border, #2a2a4a);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s2-chat-escalate { display: flex; }
.s2-chat-human-btn {
  background: none;
  border: 1px solid var(--border, #2a2a4a);
  color: var(--muted, #888);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.s2-chat-human-btn:hover { border-color: var(--accent, #6c63ff); color: var(--accent, #6c63ff); }
.s2-chat-input-row { display: flex; gap: 8px; }
.s2-chat-input {
  flex: 1;
  background: var(--bg2, #1a1a2e);
  border: 1px solid var(--border, #2a2a4a);
  color: var(--text, #e8e8f0);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}
.s2-chat-input:focus { outline: none; border-color: var(--accent, #6c63ff); }
.s2-chat-send {
  background: var(--accent, #6c63ff);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}
.s2-chat-send:hover { background: var(--accent-dark, #5a52e0); }

/* ── Support ticket badges ───────────────────────────── */
.s2-ticket-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg2, #1a1a2e);
  color: var(--muted, #888);
}
.s2-ticket-badge--new { background: #1a3a6e; color: #7ab4ff; }
.s2-ticket-badge--open { background: #1a4a2e; color: #6fcf97; }
.s2-ticket-badge--pending { background: #3a3010; color: #f2c94c; }
.s2-ticket-badge--resolved { background: #1a3a1a; color: #27ae60; }
.s2-ticket-badge--closed { background: var(--bg2, #1a1a2e); color: var(--muted, #888); }
.s2-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 4px;
}
.s2-ticket-events {
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg, #0f0f1e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 8px;
  padding: 10px;
}
.s2-ticket-event {
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #2a2a4a);
  font-size: 13px;
}
.s2-ticket-event:last-child { border-bottom: none; }
.s2-ticket-event-actor { font-weight: 600; color: var(--accent, #6c63ff); }
.s2-ticket-event-ts { color: var(--muted, #888); font-size: 11px; margin-left: 8px; }
.s2-ticket-event-msg { color: var(--text, #e8e8f0); margin-top: 4px; }
.s2-ticket-msg-orig,
.s2-ticket-msg-en {
  margin-top: 6px;
  padding: 10px;
  background: var(--bg, #0f0f1e);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text, #e8e8f0);
  white-space: pre-wrap;
}
.s2-ticket-msg-en { border-color: var(--accent, #6c63ff); }
.s2-ticket-table tbody tr:hover { background: var(--bg2, #1a1a2e); }

/* ── Splash loader ───────────────────────────────────── */
.splash-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 20px;
}
.splash-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border, #2a2a4a);
  border-top-color: var(--accent, #6c63ff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .s2-chat-widget { width: calc(100vw - 16px); right: 8px; bottom: 76px; }
  .s2-faq-wrap { padding: 16px 12px 32px; }
  .s2-faq-title { font-size: 22px; }
}

/* ── Footer language selector ─────────────────────────────────── */
.footer-lang-wrap {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-lang-label {
  font-size: .78rem;
  color: var(--t3, #888);
  white-space: nowrap;
}
.footer-lang-sel {
  background: var(--card, #1a1a2e);
  color: var(--t1, #e8e8f0);
  border: 1px solid var(--border, #2a2a4a);
  border-radius: 7px;
  padding: 5px 10px 5px 8px;
  font-size: .82rem;
  cursor: pointer;
  min-width: 130px;
  appearance: auto;        /* show native dropdown arrow */
  -webkit-appearance: auto;
}
.footer-lang-sel:focus {
  outline: 2px solid var(--accent, #6c63ff);
  outline-offset: 2px;
}
/* Remove the old floating lang selector — footer takes over */
.s2-lang-float { display: none !important; }
#s2-lang-selector-wrap:not(.footer-lang-wrap *) { display: none !important; }