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

/* ========== THEME TOKENS ==========
   :root = DARK (default). The dark values reproduce the original hardcoded
   appearance exactly. [data-theme="light"] overrides for a modern light theme.
   Naming: --bg (page), --bg-elevated (cards/surfaces), --text/--text-dim/--text-faint,
   --border (hairlines), --accent (brand green) + soft variants, plus per-surface
   rgba-white channels expressed as semantic tokens so the light block can retune them. */
:root {
  --bg: #000000;
  --bg-elevated: rgba(255,255,255,0.03);
  --bg-elevated-2: rgba(255,255,255,0.04);
  --nav-bg: rgba(0,0,0,0.72);

  --text-pure: #FFFFFF;
  --text-strong: rgba(255,255,255,0.85);
  --text: rgba(255,255,255,0.6);
  --text-2: rgba(255,255,255,0.7);
  --text-dim: rgba(255,255,255,0.5);
  --text-faint: rgba(255,255,255,0.4);
  --text-fainter: rgba(255,255,255,0.35);
  --text-ghost: rgba(255,255,255,0.25);
  --heading: #FFFFFF;

  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);

  --card: rgba(255,255,255,0.03);
  --card-hover: rgba(255,255,255,0.04);

  --fill-subtle: rgba(255,255,255,0.05);
  --fill-faint: rgba(255,255,255,0.02);

  --accent: #10B981;
  --accent-bright: #34D399;
  --accent-light: #6EE7B7;
  --accent-soft: rgba(16,185,129,0.08);
  --accent-soft-border: rgba(16,185,129,0.4);

  --solid-btn-bg: #FFFFFF;
  --solid-btn-text: #000000;
  --solid-btn-shadow: rgba(255,255,255,0.15);

  --page-fade: #000000;
  --shadow-card: none;
  --shadow-card-hover: none;
  color-scheme: dark;
}

/* ========== LIGHT THEME ==========
   Modern Linear/Vercel/Stripe-inspired light surface: white page, soft off-white
   elevated surfaces, near-black text, hairline gray borders, soft depth shadows,
   accent green darkened so it reads on white. */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #fafafa;
  --bg-elevated-2: #f6f6f7;
  --nav-bg: rgba(255,255,255,0.78);

  --text-pure: #16161a;
  --text-strong: #1a1a1a;
  --text: #3c3c43;
  --text-2: #3c3c43;
  --text-dim: #5c5c66;
  --text-faint: #6e6e78;
  --text-fainter: #8a8a94;
  --text-ghost: #a8a8b0;
  --heading: #16161a;

  --border: rgba(17,17,20,0.10);
  --border-soft: rgba(17,17,20,0.07);
  --border-strong: rgba(17,17,20,0.14);

  --card: #ffffff;
  --card-hover: #f6f6f7;

  --fill-subtle: rgba(17,17,20,0.05);
  --fill-faint: rgba(17,17,20,0.025);

  --accent: #059669;
  --accent-bright: #047857;
  --accent-light: #10B981;
  --accent-soft: rgba(5,150,105,0.10);
  --accent-soft-border: rgba(5,150,105,0.45);

  --solid-btn-bg: #16161a;
  --solid-btn-text: #ffffff;
  --solid-btn-shadow: rgba(17,17,20,0.18);

  --page-fade: #ffffff;
  --shadow-card: 0 1px 2px rgba(17,17,20,0.04), 0 4px 16px rgba(17,17,20,0.05);
  --shadow-card-hover: 0 2px 4px rgba(17,17,20,0.05), 0 8px 28px rgba(17,17,20,0.09);
  color-scheme: light;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ========== SCROLL ANIMATIONS ========== */
/* Visible by default so crawlers / no-JS / first paint always see content.
   The hidden start state only applies once JS marks the document. */
.reveal {
  opacity: 1;
  transform: none;
}
html.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ========== NAVBAR ========== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar.scrolled {
  background: rgba(0,0,0,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.navbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
}
.logo svg { width: 24px; height: 24px; flex-shrink: 0; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Adding "Directory" makes 7 links, which overflows to a second row between the
   768px mobile breakpoint and ~900px. The nav must never wrap, so it tightens
   instead of breaking. Below 769px the hamburger takes over and this is moot. */
@media (min-width: 769px) and (max-width: 980px) {
  .nav-right { gap: 17px; }
  .nav-right a { font-size: 12.5px; }
}
.nav-right a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s ease;
  letter-spacing: -0.01em;
}
.nav-right a:hover { color: #FFFFFF; }
.nav-submit {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.1) !important;
  padding: 7px 18px;
  border-radius: 980px;
  transition: background 0.2s ease !important;
}
.nav-submit:hover {
  background: rgba(255,255,255,0.18) !important;
}
.mobile-only-link { display: none; }
.mobile-menu-btn { display: none; padding: 8px; }
.mobile-menu-btn span { display: block; width: 16px; height: 1.5px; background: #FFFFFF; margin: 3.5px 0; border-radius: 1px; transition: transform 0.2s ease; }

/* ========== AUTH NAV ========== */
.nav-user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.nav-avatar-placeholder {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}
.nav-username {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-logout {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35) !important;
  transition: color 0.2s ease;
  margin-left: 4px;
}
.nav-logout:hover { color: rgba(255,255,255,0.7) !important; }

/* ---- Account chip + dropdown (replaces name + separate logout) ---- */
.nav-user-area { position: relative; }
.nav-account-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 980px; padding: 4px 10px 4px 5px; cursor: pointer;
  color: rgba(255,255,255,0.75); font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-account-chip:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }
.nav-account-email {
  font-size: 13px; font-weight: 500; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-chip-caret { opacity: 0.5; transition: transform 0.2s ease; flex-shrink: 0; }
.nav-user-area.open .nav-chip-caret { transform: rotate(180deg); }
.nav-account-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 230px; background: #0d0d0d;
  border: 0.5px solid rgba(255,255,255,0.12); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s; z-index: 200;
}
.nav-user-area.open .nav-account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-account-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; border-bottom: 0.5px solid rgba(255,255,255,0.08); margin-bottom: 6px; }
.nav-account-head-text { display: flex; flex-direction: column; min-width: 0; }
.nav-account-name { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-account-mail { font-size: 12px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-account-menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.7) !important; text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.nav-account-menu a:hover { background: rgba(255,255,255,0.06); color: #fff !important; }
.nav-account-signout { color: rgba(239,68,68,0.85) !important; margin-top: 2px; }
.nav-account-signout:hover { background: rgba(239,68,68,0.1) !important; color: #EF4444 !important; }
[data-theme="light"] .nav-account-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: var(--text-strong); }
[data-theme="light"] .nav-account-chip:hover { background: rgba(0,0,0,0.07); }
[data-theme="light"] .nav-account-menu { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 16px 40px rgba(0,0,0,0.14); }
[data-theme="light"] .nav-account-name { color: var(--heading); }
[data-theme="light"] .nav-account-mail { color: var(--text-faint); }
[data-theme="light"] .nav-account-menu a { color: var(--text-2) !important; }
[data-theme="light"] .nav-account-menu a:hover { background: rgba(0,0,0,0.05); color: var(--heading) !important; }
[data-theme="light"] .nav-account-head { border-color: var(--border); }

/* ========== LOGIN PAGE ========== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
}
.login-card {
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}
.login-card h1 {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.login-card .login-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 32px;
  line-height: 1.6;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
  margin-bottom: 12px;
}
.oauth-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.oauth-google {
  background: #FFFFFF;
  color: #1f1f1f;
}
.oauth-google:hover { background: #f0f0f0; transform: translateY(-1px); }
.oauth-github {
  background: rgba(255,255,255,0.1);
  color: #FFFFFF;
  border: 0.5px solid rgba(255,255,255,0.12);
}
.oauth-github:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.login-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  color: rgba(255,255,255,0.2);
  font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(255,255,255,0.08);
}
.login-footer {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .nav-username { display: none; }
  .login-card { padding: 36px 24px; }
}

/* ========== HERO ========== */
.hero {
  position: relative;
  overflow: hidden;
  background: #000000;
  min-height: 400px;
}
.hero-glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(16,185,129,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 40% 70%, rgba(99,102,241,0.04) 0%, transparent 60%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 70%);
}
.hero-cells {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 10%, transparent 70%);
}
.grid-cell {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  opacity: 0;
  will-change: opacity, transform;
  animation: cellPulse var(--duration) ease-in-out var(--delay) infinite;
}
@keyframes cellPulse {
  0% { opacity: 0; transform: scale(0.95); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}
@keyframes floatSlow {
  0% { transform: translateY(0px) rotateY(-5deg) rotateX(2deg); }
  100% { transform: translateY(-12px) rotateY(-3deg) rotateX(1deg); }
}
.hero-fade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #000000 0%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 140px 32px 64px;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 28px;
  padding: 8px 20px;
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 980px;
}
.hero-eyebrow-dot {
  width: 5px; height: 5px;
  background: #10B981;
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
.hero-content h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #FFFFFF;
  margin-bottom: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.hero-content h1 .gradient-text {
  background: linear-gradient(to right, #10B981, #6EE7B7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.52);
  max-width: 440px;
  margin: 0 auto 26px;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
/* Slots get deduped away, so this is often two cards, sometimes one. A fixed
   three-column grid left a dead column on the right; auto-fit lets whatever
   survives fill the row. */
/* Only phones see this. On desktop the arena still starts on approach, so a
   button would just be a thing to click for no reason. */
.auc-play { display: none; }
@media (max-width: 767px) {
  .auc-play {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 5; padding: 12px 20px; border: 0; border-radius: 980px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    color: #06110c; background: #34D399;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  }
  .auc-play:disabled { opacity: 0.6; cursor: default; }
}
.arena-teaser { max-width: 1140px; margin: 44px auto 0; padding: 0 32px; }
.at-inner { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px;
  align-items: center; padding: 28px 32px; border: 0.5px solid var(--border);
  border-radius: 20px; background: var(--card); }
.at-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent); margin-bottom: 10px; }
.at-title { font-size: 23px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
  color: var(--heading); text-wrap: balance; }
.at-sub { margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--text-faint); }
.at-cta { display: inline-block; margin-top: 18px; padding: 10px 20px; border-radius: 980px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--solid-btn-text); background: var(--solid-btn-bg); }
.at-board { display: flex; flex-direction: column; gap: 2px; }
.at-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 10px; text-decoration: none; transition: background 0.18s; }
.at-row:hover { background: var(--fill-subtle); }
.at-row .at-rank { width: 14px; font-size: 12px; color: var(--text-ghost); }
.at-row .at-ico { width: 20px; height: 20px; border-radius: 5px; overflow: hidden; flex: none; }
.at-row .at-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row .at-amt { font-size: 13px; font-weight: 600; color: var(--text-faint); }
.at-empty { font-size: 13.5px; color: var(--text-faint); }
@media (max-width: 860px) {
  .at-inner { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
}
@media (max-width: 640px) {
  .arena-teaser { padding-left: 20px; padding-right: 20px; margin-top: 32px; }
  .at-title { font-size: 19px; }
}
.hof-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.hofc {
  display: flex; flex-direction: column; gap: 6px; padding: 14px;
  border: 0.5px solid var(--border); border-radius: 14px; background: var(--card);
  text-decoration: none; transition: border-color 0.18s, background 0.18s;
}
.hofc:hover { background: var(--card-hover); border-color: var(--accent); }
.hofc-when { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent); }
.hofc-ico { display: block; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; }
.hofc-name { font-size: 14px; font-weight: 600; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hofc-votes { font-size: 12px; color: var(--text-faint); }
@media (max-width: 560px) {
  .hof-cards { grid-template-columns: 1fr; }
  .hofc { flex-direction: row; align-items: center; gap: 10px; padding: 11px 13px; }
  .hofc-when { min-width: 76px; }
  .hofc-name { flex: 1; }
}
.hero-search-wrap { position: relative; z-index: 60; width: 100%; max-width: 460px; margin: 0 auto 22px; }
.hero-search-wrap .hero-search { max-width: none; margin: 0; }
.hero-sug {
  position: fixed; z-index: 9999;
  background: #14161c; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; overflow: hidden; display: none; text-align: left;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  max-height: 62vh; overflow-y: auto;
}
.hero-sug.open { display: block; }
.hero-sug .hs-row { display: block; padding: 11px 16px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06); }
.hero-sug .hs-row:last-of-type { border-bottom: 0; }
.hero-sug .hs-row:hover, .hero-sug .hs-row.sel { background: rgba(255,255,255,0.06); }
.hero-sug .hs-name { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.hero-sug .hs-tag { display: block; margin-top: 2px; font-size: 12.5px;
  color: rgba(255,255,255,0.42); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-sug .hs-all { display: block; padding: 11px 16px; font-size: 13px; font-weight: 600;
  color: #10B981; text-decoration: none; border-top: 1px solid rgba(255,255,255,0.08); }
.hero-sug .hs-all:hover { background: rgba(255,255,255,0.06); }
.hero-sug .hs-empty { padding: 14px 16px; font-size: 13.5px; color: rgba(255,255,255,0.42); }

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  background: #FFFFFF;
  padding: 13px 28px;
  border-radius: 980px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.01em;
}
.hero-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.1);
}
.hero-cta-primary svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.hero-cta-primary:hover svg { transform: translateX(2px); }

/* ========== PRODUCTS ========== */
.products {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 32px 80px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  text-align: center;
  flex-direction: column;
  gap: 6px;
}
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: -0.025em;
}
/* Featured section header aligns to the page's left-aligned rhythm. */
.featured .section-header { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; margin-bottom: 18px; gap: 12px; }
.featured .section-title { font-size: 18px; letter-spacing: -0.021em; }
.section-date {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.25);
  letter-spacing: -0.01em;
}
.filter-bar {
  max-width: 1080px;
  margin: 0 auto 32px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sort-tabs {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin: 0 auto 20px;
}
.sort-tab {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  padding: 8px 20px;
  border-radius: 8px;
  transition: all 0.15s;
}
.sort-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.sort-tab:hover { color: #fff; }
.cat-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.cat-pill {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.08);
  padding: 5px 14px;
  border-radius: 980px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cat-pill:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); }
.cat-pill.active { color: #10B981; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.filter-search { width: 100%; max-width: 440px; display: flex; justify-content: center; }
.search-input {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 980px;
  padding: 10px 18px;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.search-input::placeholder { color: rgba(255,255,255,0.3); }
.search-input:focus { border-color: var(--accent-soft-border); background: rgba(16,185,129,0.05); box-shadow: 0 0 0 3px var(--accent-soft); }
.section-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  transition: color 0.2s;
  margin-top: 2px;
}
.section-link:hover { color: #FFFFFF; }
.product-list {
  display: flex;
  flex-direction: column;
}
.product-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 16px;
  border-radius: 14px;
  transition: background 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1);
  margin: 0 -16px;
}
.product-row:hover { background: rgba(255,255,255,0.04); transform: translateX(2px); }
.product-divider {
  height: 0.5px;
  background: rgba(255,255,255,0.05);
  margin: 0 16px;
}
.product-rank {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.28);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.product-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.product-icon::after { display: none; }
.product-info { flex: 1; min-width: 0; }
.product-name {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}
.product-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.product-desc {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.product-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.product-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  box-sizing: border-box;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  padding: 5px 12px;
  border-radius: 980px;
  white-space: nowrap;
}
.upvote-btn {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
.upvote-btn:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}
.upvote-btn.active {
  border-color: rgba(16,185,129,0.4);
  background: rgba(16,185,129,0.08);
}
.upvote-btn.active .upvote-arrow { border-bottom-color: #10B981; }
.upvote-btn.active .upvote-count { color: #10B981; }
.upvote-arrow {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s ease;
}
.upvote-count {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

/* ========== TICKER ========== */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border-top: 0.5px solid rgba(255,255,255,0.05);
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  padding: 10px 0;
  position: relative;
}
.ticker-wrap::before, .ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ticker-wrap::before { left: 0; background: linear-gradient(to right, #000000, transparent); }
.ticker-wrap::after { right: 0; background: linear-gradient(to left, #000000, transparent); }
.ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: tickerScroll 160s linear infinite;
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  padding: 0 16px;
  letter-spacing: -0.01em;
}
.ticker-item .ticker-votes {
  color: #10B981;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ticker-dot {
  color: rgba(255,255,255,0.12);
  padding: 0 4px;
  font-size: 8px;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .ticker { animation-duration: 90s; }
}

/* ========== AI BADGE & TIME AGO ========== */
.ai-badge {
  font-size: 11px;
  font-weight: 500;
  color: rgba(168,130,255,0.8);
  background: rgba(139,92,246,0.1);
  border: 0.5px solid rgba(139,92,246,0.15);
  padding: 4px 10px;
  border-radius: 980px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time-ago {
  width: 58px;
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
}
.row-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 980px;
  white-space: nowrap;
  text-transform: uppercase;
}
.row-badge.trending {
  color: #FDA4AF;
  background: rgba(244,63,94,0.10);
  border: 0.5px solid rgba(244,63,94,0.22);
}
.row-badge.new {
  color: #6EE7B7;
  background: rgba(16,185,129,0.10);
  border: 0.5px solid rgba(16,185,129,0.22);
}
/* Liveness signals — only non-live states render anything (live = no noise). */
.row-badge.offline {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
}
.row-dot-risk {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
}
.pd-badge.is-offline { color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); }
.pd-badge.is-atrisk { color: #FBBF24; background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.22); }
.pd-dot.is-amber { background: #F59E0B; box-shadow: none; animation: none; }
.pd-signal-val.is-offline { color: rgba(255,255,255,0.45); }
.pd-signal-val.is-atrisk { color: #FBBF24; }
[data-theme="light"] .row-badge.offline { color: #6B7280; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .row-dot-risk { background: #D97706; }
[data-theme="light"] .pd-badge.is-offline { color: #6B7280; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .pd-badge.is-atrisk { color: #B45309; background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.3); }
[data-theme="light"] .pd-dot.is-amber { background: #D97706; }
[data-theme="light"] .pd-signal-val.is-offline { color: #6B7280; }
[data-theme="light"] .pd-signal-val.is-atrisk { color: #B45309; }


/* ========== STATS STRIP ========== */
.stats-strip {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}
.stats-strip .ss-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.stats-strip b {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.stats-strip .ss-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6EE7B7;
  font-weight: 500;
}
.stats-strip .ss-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: ssPulse 2s infinite;
}
@keyframes ssPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* ========== LOAD MORE / PAGINATION ========== */
.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
}
.load-more-btn {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  padding: 11px 24px;
  border-radius: 980px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.load-more-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}
.load-more-btn[disabled] { opacity: 0.4; cursor: default; }
.search-empty {
  padding: 40px 0;
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 15px;
}

/* ========== SUBMIT CTA ========== */
.submit-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 100px;
}
.submit-inner {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 0;
  padding: 60px 40px;
  text-align: center;
}
.submit-inner h2 {
  position: relative;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.submit-inner p {
  position: relative;
  font-size: 15px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}
.submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  background: #FFFFFF;
  padding: 14px 28px;
  border-radius: 980px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: -0.01em;
}
.submit-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
}
.submit-btn .arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.submit-btn:hover .arrow { transform: translateX(3px); }

/* ========== FOOTER ========== */
.footer {
  max-width: 1080px;
  margin: 0 auto;
  /* The rule used to live on THIS box, which is padded, so it ran 32px past the
     content on both sides and was the widest line on the page. It now sits on
     the content box itself, the same way the developers divider already did. */
  padding: 0 32px 48px;
}
/* The footer was 1080px wide while the homepage column is 860, so its content
   started 110px to the LEFT of everything above it. On a page where every other
   block shares one edge, that reads as broken rather than as a wide footer.
   Scoped to the auction homepage so the 1080 footer other pages are built
   against is untouched. */
/* 52px, not 32px. The section above uses a 980 box with 20px padding, so its
   text and cards start 20px further in than a 32px-padded footer would. Matching
   the PADDING as well as the width is what actually lines the two up. */
section.auc ~ .footer { max-width: 860px; padding-left: 52px; padding-right: 52px; }

.footer-inner {
  border-top: 0.5px solid var(--border-soft);
  padding-top: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Ten links plus the brand do not fit one line at every width. They used to
     overflow and break INSIDE a label, so "Best Of" and "Hall of Kings" each
     sat on two lines while their neighbours sat on one and the whole row went
     ragged. Now the row wraps as whole items, with a real row gap. */
  flex-wrap: wrap;
  gap: 18px 32px;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.footer-left svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer-brand {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.2);
  white-space: nowrap;
}
/* Below this the tagline is the first thing to go: it is decoration, the links
   are navigation. It used to wrap to two lines and drag the brand off centre. */
@media (max-width: 1180px) { .footer-tagline { display: none; } }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.footer-links a:hover { color: #FFFFFF; }
.footer-copy {
  margin-top: 48px;
  font-size: 12px;
  color: rgba(255,255,255,0.12);
  letter-spacing: -0.01em;
}

/* ========== SUBMIT FORM PAGE ========== */
.submit-form-section {
  max-width: 600px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}
.submit-form-section h1 {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.submit-form-section .form-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 48px;
}
.form-group {
  margin-bottom: 24px;
}
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  color: #FFFFFF;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(16,185,129,0.5);
  background: rgba(255,255,255,0.06);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select option { background: #111; color: #fff; }
.form-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  background: #FFFFFF;
  padding: 14px 32px;
  border-radius: 980px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 16px;
}
.form-submit-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
}
.form-message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  display: none;
}
.form-message.success {
  display: block;
  background: rgba(16,185,129,0.1);
  border: 0.5px solid rgba(16,185,129,0.3);
  color: #10B981;
}
.form-message.error {
  display: block;
  background: rgba(239,68,68,0.1);
  border: 0.5px solid rgba(239,68,68,0.3);
  color: #EF4444;
}

/* ========== PRODUCT DETAIL PAGE ========== */
.product-detail {
  max-width: 700px;
  margin: 0 auto;
  padding: 140px 32px 100px;
}
.product-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}
.product-detail-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.product-detail-icon::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}
.product-detail-info h1 {
  font-size: 32px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.product-detail-info .detail-tagline {
  font-size: 17px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
}
.product-detail-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.detail-badge {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  padding: 5px 12px;
  border-radius: 980px;
}
.product-detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}
.product-detail-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.detail-visit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  background: #fff;
  padding: 12px 24px;
  border-radius: 980px;
  transition: transform 0.2s ease;
}
.detail-visit-btn:hover { transform: translateY(-1px); }

/* ========== ENRICHED PRODUCT PAGE ========== */
.pd-wrap { max-width: 1060px; margin: 0 auto; padding: 116px 32px 96px; position: relative; }
.pd-wrap::before { content: ''; position: absolute; top: 36px; left: 50%; width: 760px; max-width: 92%; height: 360px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(16,185,129,0.17), rgba(16,185,129,0.045) 46%, transparent 72%); filter: blur(34px); pointer-events: none; z-index: 0; }
.pd-wrap > * { position: relative; z-index: 1; }
.pd-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.2s ease; }
.pd-breadcrumb a:hover { color: #10B981; }
.pd-breadcrumb .pd-bc-sep { color: rgba(255,255,255,0.2); }
.pd-breadcrumb .pd-bc-current { color: rgba(255,255,255,0.7); }
.pd-grid { display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 24px; align-items: start; }
.pd-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pd-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.pd-card { background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 26px; }
.pd-hero { background: linear-gradient(155deg, rgba(16,185,129,0.13), rgba(255,255,255,0.018) 44%); border-color: rgba(16,185,129,0.22); box-shadow: 0 1px 40px rgba(16,185,129,0.06) inset; }
.pd-card h2 { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 14px; }
.pd-hero-top { display: flex; align-items: flex-start; gap: 18px; }
.pd-icon { width: 60px; height: 60px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; flex-shrink: 0; position: relative; overflow: hidden; }
.pd-icon img { width: 100%; height: 100%; object-fit: cover; }
.pd-icon::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to bottom, rgba(255,255,255,0.22), transparent); pointer-events: none; }
.pd-titlewrap { min-width: 0; flex: 1; }
.pd-titlewrap h1 { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 6px; }
.pd-tagline { font-size: 16px; color: rgba(255,255,255,0.62); line-height: 1.5; }
.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.62); background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.1); padding: 5px 11px; border-radius: 980px; transition: border-color 0.2s ease, color 0.2s ease; }
a.pd-badge:hover { color: #fff; border-color: rgba(16,185,129,0.45); }
.pd-badge.is-online { color: #10B981; background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.22); }
.pd-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); animation: pdPulse 2.4s infinite; }
@keyframes pdPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pd-chip { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 980px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.pd-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 980px; transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
.pd-btn-primary { color: #000; background: #fff; box-shadow: 0 6px 22px rgba(16,185,129,0.22); }
.pd-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(16,185,129,0.36); }
.pd-btn-vote { flex-direction: row; color: #6EE7B7; background: rgba(16,185,129,0.12); border: 0.5px solid rgba(16,185,129,0.3); }
.pd-btn-vote:hover { border-color: rgba(16,185,129,0.55); background: rgba(16,185,129,0.18); color: #fff; transform: translateY(-1px); }
.pd-btn-vote .upvote-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid currentColor; }
.pd-btn-vote .upvote-count { font-weight: 700; color: #fff; }
.pd-btn-vote.active { color: #10B981; border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.16); }
.pd-btn-ghost { color: rgba(255,255,255,0.6); background: transparent; border: 0.5px solid rgba(255,255,255,0.12); }
.pd-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.pd-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; padding-top: 22px; border-top: 0.5px solid rgba(255,255,255,0.07); }
.pd-stat-num { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.pd-stat-num.is-accent { color: #34D399; }
.pd-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 3px; }
.pd-prose { font-size: 15.5px; line-height: 1.8; color: rgba(255,255,255,0.66); letter-spacing: -0.01em; }
.pd-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.pd-drow { display: flex; flex-direction: column; gap: 8px; }
.pd-dlabel { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.pd-dval { font-size: 14px; color: rgba(255,255,255,0.7); display: flex; flex-wrap: wrap; gap: 6px; }
.pd-dval a { color: #10B981; }
.pd-tag { display: inline-flex; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 8px; }
.pd-scard { background: rgba(255,255,255,0.025); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px; }
.pd-scard h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 14px; }
.pd-founder { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pd-favatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #10B981, #059669); flex-shrink: 0; overflow: hidden; }
.pd-favatar img { width: 100%; height: 100%; object-fit: cover; }
.pd-fname { font-size: 15px; font-weight: 600; color: #fff; }
.pd-frole { font-size: 12px; color: rgba(255,255,255,0.4); }
.pd-fhelp { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.45); }
.pd-flinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-flink { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); padding: 5px 11px; border-radius: 980px; transition: border-color 0.2s ease, color 0.2s ease; }
.pd-flink:hover { color: #10B981; border-color: rgba(16,185,129,0.4); }
.pd-fgraph { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(16,185,129,0.04); border: 0.5px solid rgba(16,185,129,0.14); }
.pd-fgraph-title { font-size: 12.5px; font-weight: 700; color: #10B981; margin-bottom: 5px; }
.pd-fgraph-text { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.45); }
.pd-signal-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.pd-signal-row:last-child { border-bottom: none; }
.pd-signal-label { font-size: 13px; color: rgba(255,255,255,0.45); }
.pd-signal-val { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px; }
.pd-signal-val.is-online { color: #10B981; }
.pd-signal-val.is-accent { color: #34D399; }
.pd-ctx-block { margin-bottom: 14px; }
.pd-ctx-block:last-child { margin-bottom: 0; }
.pd-ctx-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.32); margin-bottom: 8px; }
.pd-ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-timeline-row { display: flex; gap: 11px; padding: 7px 0; }
.pd-tl-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(16,185,129,0.5); border: 1.5px solid #10B981; margin-top: 5px; flex-shrink: 0; }
.pd-tl-text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.pd-tl-text b { color: #fff; font-weight: 600; }
.pd-shotcard { padding: 0; overflow: hidden; }
.pd-shot { display: block; line-height: 0; position: relative; }
.pd-shot img { width: 100%; height: auto; display: block; border-radius: 18px; }
.pd-shot::after { content: "Visit site \2192"; position: absolute; bottom: 14px; right: 14px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.55); border: 0.5px solid rgba(255,255,255,0.18); padding: 6px 12px; border-radius: 980px; opacity: 0; transition: opacity 0.2s ease; backdrop-filter: blur(8px); }
.pd-shot:hover::after { opacity: 1; }
.pd-taggroup { margin-bottom: 16px; }
.pd-taggroup:last-child { margin-bottom: 0; }
.pd-tg-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.32); margin-bottom: 9px; }
.pd-tg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-utag { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); padding: 6px 13px; border-radius: 980px; }
.pd-utag.is-aud { color: #93C5FD; background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.25); }
.pd-utag.is-alt { color: #34D399; background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.28); }
.pd-related { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-rel { display: flex; gap: 13px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.022); border: 0.5px solid rgba(255,255,255,0.08); transition: border-color 0.2s ease, background 0.2s ease; }
.pd-rel:hover { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.04); }
.pd-rel-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.pd-rel-icon img { width: 100%; height: 100%; object-fit: cover; }
.pd-rel-body { min-width: 0; }
.pd-rel-name { font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-rel-tag { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.45; margin: 2px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pd-rel-meta { font-size: 11.5px; color: rgba(52,211,153,0.85); font-weight: 600; }
.pd-badge-preview { display: flex; justify-content: center; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 12px; margin-bottom: 12px; }
.pd-badge-preview img { display: block; }
.pd-badge-copy { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.pd-embed { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.35); border: 0.5px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 11px; resize: none; height: 78px; margin-bottom: 10px; }
.pd-embed-btn { width: 100%; justify-content: center; }
@media (max-width: 880px) {
  .pd-related { grid-template-columns: 1fr; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-side { position: static; }
  .pd-wrap { padding: 96px 20px 72px; }
  .pd-titlewrap h1 { font-size: 26px; }
  .pd-details { grid-template-columns: 1fr; }
  .pd-stats { gap: 20px; }
}

/* ========== ACTIVE NAV STATE ========== */
.nav-right a.nav-active { color: #FFFFFF; }

/* ========== RESPONSIVE 768px ========== */
@media (max-width: 768px) {
  .hero { min-height: 300px; }
  .hero-content { padding: 110px 24px 40px; }
  .hero-content h1 { font-size: 40px; }
  .hero-sub { font-size: 15px; }
  .nav-right { display: none; }
  .nav-right.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0; right: 0;
    background: #05060a;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 20px 32px;
    gap: 6px;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
  }
  .mobile-menu-btn { display: block; }
  .mobile-only-link { display: list-item; }
  .product-desc { display: none; }
  .ai-badge { display: none; }
  .time-ago { display: none; }
  /* --- Mobile trending rows: keep one clean single-line row, no broken wrapping. --- */
  .product-row { flex-wrap: nowrap; gap: 12px; align-items: center; }
  .product-info { min-width: 0; flex: 1; }
  /* Stack name (line 1, truncated) above any badge (line 2) so a long name can't push
     the badge/category around or blow up the row height. */
  .product-name-row { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  .product-name {
    display: block;
    font-size: 14px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .row-badge { flex-shrink: 0; }
  .product-meta { margin-left: auto; flex-shrink: 0; }
  /* The category pill's fixed 124px width is the main squeeze on narrow screens — drop it;
     category is already reachable via the filter pills above the list. */
  .product-cat { display: none; }
  .filter-bar { padding: 0 16px; }
  .cat-filters { justify-content: flex-start; }
  .cat-pill { font-size: 11px; padding: 4px 10px; }
  .products { padding: 24px 16px 60px; }
  .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-copy { text-align: center; }
  .submit-section { padding: 20px 24px 60px; }
  .submit-inner { padding: 48px 24px; }
  .navbar-inner { padding: 0 24px; }
  .section-header { flex-direction: column; gap: 6px; }
  .section-title { font-size: 18px; }
}

/* ========== RESPONSIVE 480px ========== */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 32px; }
  .hero-content { padding: 100px 16px 32px; }
  .products { padding-left: 16px; padding-right: 16px; }
  .product-row { gap: 10px; padding: 16px 8px; margin: 0 -8px; }
  .product-rank { width: 22px; font-size: 13px; }
  .product-icon { width: 38px; height: 38px; font-size: 13px; border-radius: 10px; }
  .submit-section { padding: 10px 16px 60px; }
  .submit-inner { padding: 40px 16px; }
  .navbar-inner { padding: 0 16px; }
}

/* ========== ADMIN PANEL ========== */
.admin-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 32px 80px;
}
.admin-page h1 {
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 32px;
}
.admin-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.admin-stat-card {
  flex: 1;
  min-width: 140px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.admin-stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #10B981;
  font-variant-numeric: tabular-nums;
}
.admin-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-section {
  margin-bottom: 40px;
}
.admin-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.admin-table td {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  padding: 12px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.admin-table tr:hover td {
  background: rgba(255,255,255,0.02);
}
.admin-table td:first-child {
  color: #FFFFFF;
  font-weight: 500;
}
.admin-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 980px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-badge.approved {
  background: rgba(16,185,129,0.12);
  color: #10B981;
}
.admin-badge.pending {
  background: rgba(245,158,11,0.12);
  color: #F59E0B;
}
.admin-action-btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  margin-right: 6px;
}
.admin-action-btn.approve {
  background: rgba(16,185,129,0.15);
  color: #10B981;
}
.admin-action-btn.approve:hover {
  background: rgba(16,185,129,0.25);
}
.admin-action-btn.reject {
  background: rgba(239,68,68,0.12);
  color: #EF4444;
}
.admin-action-btn.reject:hover {
  background: rgba(239,68,68,0.22);
}
.admin-action-btn.delete {
  background: rgba(239,68,68,0.12);
  color: #EF4444;
}
.admin-action-btn.delete:hover {
  background: rgba(239,68,68,0.22);
}
.admin-nav-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #10B981 !important;
}
@media (max-width: 768px) {
  .admin-page { padding: 90px 16px 60px; }
  .admin-table { font-size: 12px; }
  .admin-table th, .admin-table td { padding: 8px 6px; }
  .admin-stats { flex-direction: column; }
}

/* ========== PROFILE PAGE ========== */
.profile-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 120px 32px 100px;
}
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1);
  margin-bottom: 16px;
}
.profile-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.profile-name {
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.profile-bio {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 12px;
}
.profile-member-since {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  margin-bottom: 16px;
}
.profile-social-links {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.profile-social-links a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-social-links a:hover { color: #FFFFFF; }
.profile-stats {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin: 24px 0 40px;
  padding: 20px 0;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.profile-stat {
  text-align: center;
}
.profile-stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #10B981;
  font-variant-numeric: tabular-nums;
}
.profile-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.profile-products {
  margin-top: 0;
}
.profile-products-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.profile-private-msg {
  text-align: center;
  padding: 80px 24px;
  color: rgba(255,255,255,0.35);
  font-size: 16px;
}
.profile-private-msg h2 {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
}
.maker-link {
  color: rgba(255,255,255,0.5);
  transition: color 0.2s ease;
}
.maker-link:hover {
  color: #10B981;
}
@media (max-width: 768px) {
  .profile-page { padding: 90px 24px 60px; }
  .profile-name { font-size: 24px; }
  .profile-stats { gap: 20px; }
}
.profile-handle {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-bright);
  margin-bottom: 10px;
}

/* ========== COMMENTS ========== */
.cmt-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 8px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--fill-subtle);
  color: var(--text-faint);
  vertical-align: middle;
}
.cmt-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.cmt { display: flex; gap: 12px; align-items: flex-start; }
.cmt-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 0.5px solid var(--border-strong);
}
.cmt-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff; font-size: 14px; font-weight: 700;
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.cmt-name { font-size: 14px; font-weight: 600; color: var(--heading); }
a.cmt-name:hover { color: var(--accent); }
.cmt-time { font-size: 12px; color: var(--text-ghost); }
.cmt-text { font-size: 14px; line-height: 1.6; color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; }
.cmt-empty { font-size: 14px; color: var(--text-faint); padding: 8px 0 4px; }
.cmt-form { border-top: 0.5px solid var(--border); padding-top: 18px; }
.cmt-input {
  width: 100%; resize: vertical; min-height: 76px;
  background: var(--fill-faint); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  color: var(--heading); font-family: inherit; font-size: 14px; line-height: 1.5;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cmt-input:focus { outline: none; border-color: var(--accent-soft-border); background: var(--accent-soft); }
.cmt-input::placeholder { color: var(--text-fainter); }
.cmt-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cmt-charcount { font-size: 12px; color: var(--text-ghost); font-variant-numeric: tabular-nums; }
.cmt-submit { flex-shrink: 0; }
.cmt-msg { font-size: 13px; margin-top: 10px; color: var(--accent); }
.cmt-msg.is-err { color: #F87171; }
.cmt-login { border-top: 0.5px solid var(--border); padding-top: 18px; font-size: 14px; color: var(--text-faint); }
.cmt-login a { color: var(--accent); font-weight: 600; }
.cmt-login a:hover { text-decoration: underline; }
[data-theme="light"] .cmt-msg.is-err { color: #DC2626; }
/* Guest comments: subtle "guest" tag on the row + optional name field on the form. */
.cmt-guest {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--fill-subtle); color: var(--text-ghost);
  border: 0.5px solid var(--border); line-height: 1.6;
}
.cmt-name-input {
  width: 100%; max-width: 260px; margin-bottom: 10px;
  background: var(--fill-faint); border: 0.5px solid var(--border);
  border-radius: 10px; padding: 9px 12px;
  color: var(--heading); font-family: inherit; font-size: 13px; line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cmt-name-input:focus { outline: none; border-color: var(--accent-soft-border); background: var(--accent-soft); }
.cmt-name-input::placeholder { color: var(--text-fainter); }
/* Honeypot: off-screen, never shown, never focusable for real users. */
.cmt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmt-signin { color: var(--accent); font-weight: 500; }
.cmt-signin:hover { text-decoration: underline; }
@media (max-width: 768px) { .cmt-name-input { max-width: 100%; } }
.cmt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--text-ghost);
  transition: color 0.2s ease;
}
.cmt-badge:hover { color: var(--accent); }

/* ========== BUILDERS DIRECTORY ========== */
.builders-page { max-width: 1080px; margin: 0 auto; padding: 120px 32px 100px; }
.builders-head { text-align: center; margin-bottom: 48px; }
.builders-head h1 { font-size: 36px; font-weight: 800; color: var(--heading); letter-spacing: -0.04em; margin-bottom: 10px; }
.builders-head p { font-size: 16px; color: var(--text-faint); }
.builders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.builder-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 20px; border-radius: 16px;
  background: var(--card); border: 0.5px solid var(--border);
  box-shadow: var(--shadow-card); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.builder-card:hover { transform: translateY(-2px); border-color: var(--accent-soft-border); box-shadow: var(--shadow-card-hover); }
.builder-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border-strong); margin-bottom: 14px;
}
.builder-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff; font-size: 26px; font-weight: 700;
}
.builder-name { font-size: 17px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 6px; }
.builder-tagline { font-size: 13px; color: var(--text-faint); line-height: 1.5; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.builder-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
.builder-pill {
  font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 0.5px solid var(--accent-soft-border);
}
.builder-joined { font-size: 11px; color: var(--text-ghost); }
.builders-empty { text-align: center; padding: 60px 24px; font-size: 15px; color: var(--text-faint); }
.builders-empty a { color: var(--accent); font-weight: 600; }
@media (max-width: 768px) {
  .builders-page { padding: 90px 20px 60px; }
  .builders-head h1 { font-size: 28px; }
  .builders-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .builder-card { padding: 22px 14px; }
  .cmt-form-foot { flex-direction: column; align-items: stretch; }
  .cmt-submit { width: 100%; }
}

/* ========== SETTINGS PAGE ========== */
.settings-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 120px 32px 100px;
}
.settings-page h1 {
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.settings-page .settings-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 40px;
}
.toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toggle-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #10B981;
  cursor: pointer;
}
.toggle-group label {
  margin-bottom: 0 !important;
  cursor: pointer;
}
.char-count {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  text-align: right;
  margin-top: 4px;
}
@media (max-width: 768px) {
  .settings-page { padding: 90px 24px 60px; }
}

/* ========== THEME TOGGLE BUTTON ========== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--fill-faint);
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background: var(--fill-subtle);
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.nav-right .theme-toggle-li { display: flex; align-items: center; }

/* =====================================================================
   ========================  LIGHT THEME OVERRIDES  ====================
   Surface-by-surface retune. Original dark rules above are untouched so
   the dark theme stays byte-identical; this block only applies under
   [data-theme="light"]. Covers nav, hero, stats, rows, badges, pills,
   votes, search, tabs, load-more, detail page, embed/badge, footer,
   forms, profile, admin, settings + mobile.
   ===================================================================== */

[data-theme="light"] body { color: var(--text); background: var(--bg); }

/* --- NAVBAR --- */
[data-theme="light"] .navbar.scrolled {
  background: var(--nav-bg);
  border-bottom: 0.5px solid var(--border);
}
[data-theme="light"] .logo { color: var(--heading); }
[data-theme="light"] .nav-right a { color: var(--text-faint); }
[data-theme="light"] .nav-right a:hover,
[data-theme="light"] .nav-right a.nav-active { color: var(--heading); }
[data-theme="light"] .nav-submit {
  color: var(--heading) !important;
  background: var(--fill-subtle) !important;
  border: 0.5px solid var(--border);
}
[data-theme="light"] .nav-submit:hover { background: rgba(17,17,20,0.09) !important; }
[data-theme="light"] .mobile-menu-btn span { background: var(--heading); }
[data-theme="light"] .nav-username { color: var(--text-dim); }
[data-theme="light"] .nav-avatar { border-color: var(--border-strong); }
[data-theme="light"] .nav-logout { color: var(--text-fainter) !important; }
[data-theme="light"] .nav-logout:hover { color: var(--text-strong) !important; }
[data-theme="light"] .admin-nav-link { color: var(--accent) !important; }
@media (max-width: 768px) {
  [data-theme="light"] .nav-right.open {
    background: #ffffff;
    border-bottom: 0.5px solid var(--border);
    box-shadow: 0 18px 40px rgba(15,25,40,0.14);
  }
}

/* --- HERO --- */
[data-theme="light"] .hero { background: var(--bg); }
[data-theme="light"] .hero-fade { background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%); }
[data-theme="light"] .hero-glow {
  background:
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(5,150,105,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 40% 70%, rgba(99,102,241,0.05) 0%, transparent 60%);
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(17,17,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,20,0.04) 1px, transparent 1px);
}
[data-theme="light"] .hero-eyebrow {
  color: var(--text-fainter);
  border: 0.5px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .hero-content h1 { color: var(--heading); }
[data-theme="light"] .hero-content h1 .gradient-text {
  background: linear-gradient(to right, #059669, #10B981);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .hero-sub { color: var(--text-faint); }
[data-theme="light"] .hero-sug { background: #fff; border-color: rgba(17,17,20,0.12);
  box-shadow: 0 18px 40px rgba(17,17,20,0.12); }
[data-theme="light"] .hero-sug .hs-row { border-bottom-color: rgba(17,17,20,0.07); }
[data-theme="light"] .hero-sug .hs-row:hover,
[data-theme="light"] .hero-sug .hs-row.sel { background: rgba(17,17,20,0.045); }
[data-theme="light"] .hero-sug .hs-name { color: var(--heading); }
[data-theme="light"] .hero-sug .hs-tag { color: var(--text-faint); }
[data-theme="light"] .hero-sug .hs-all { color: var(--accent); border-top-color: rgba(17,17,20,0.08); }
[data-theme="light"] .hero-sug .hs-all:hover { background: rgba(17,17,20,0.045); }
[data-theme="light"] .hero-sug .hs-empty { color: var(--text-faint); }
[data-theme="light"] .hero-cta-primary {
  color: var(--solid-btn-text);
  background: var(--solid-btn-bg);
}
[data-theme="light"] .hero-cta-primary:hover { box-shadow: 0 8px 24px rgba(17,17,20,0.18); }

/* --- SECTION HEADERS / FILTERS --- */
[data-theme="light"] .section-title { color: var(--text-strong); }
[data-theme="light"] .section-date { color: var(--text-ghost); }
[data-theme="light"] .section-link { color: var(--text-fainter); }
[data-theme="light"] .section-link:hover { color: var(--heading); }
[data-theme="light"] .sort-tab { color: var(--text-faint); }
[data-theme="light"] .sort-tab.active { color: var(--heading); background: var(--fill-subtle); }
[data-theme="light"] .sort-tab:hover { color: var(--heading); }
[data-theme="light"] .cat-pill {
  color: var(--text-faint);
  border: 0.5px solid var(--border);
  background: var(--card);
}
[data-theme="light"] .cat-pill:hover { color: var(--text-strong); border-color: var(--border-strong); }
[data-theme="light"] .cat-pill.active {
  color: var(--accent);
  border-color: var(--accent-soft-border);
  background: var(--accent-soft);
}
[data-theme="light"] .search-input {
  color: var(--text-strong);
  background: var(--bg-elevated-2);
  border: 0.5px solid var(--border);
}
[data-theme="light"] .search-input::placeholder { color: var(--text-fainter); }
[data-theme="light"] .search-input:focus { border-color: var(--accent-soft-border); background: var(--accent-soft); }
[data-theme="light"] .search-empty { color: var(--text-fainter); }

/* --- PRODUCT ROWS --- */
[data-theme="light"] .product-row:hover { background: var(--card-hover); }
[data-theme="light"] .product-divider { background: var(--border-soft); }
[data-theme="light"] .product-rank { color: var(--text-ghost); }
[data-theme="light"] .product-name { color: var(--heading); }
[data-theme="light"] .product-desc { color: var(--text-faint); }
[data-theme="light"] .product-desc span[style*="rgba(255,255,255"] { color: var(--text-ghost) !important; }
[data-theme="light"] .maker-link { color: var(--text-dim); }
[data-theme="light"] .maker-link:hover { color: var(--accent); }
[data-theme="light"] .product-icon[style] { background: var(--fill-subtle) !important; color: var(--text-faint); box-shadow: var(--shadow-card); }
[data-theme="light"] .time-ago { color: var(--text-ghost); }

/* --- AI BADGE (purple pill): retuned for light --- */
[data-theme="light"] .ai-badge {
  color: #6D28D9;
  background: rgba(139,92,246,0.10);
  border: 0.5px solid rgba(139,92,246,0.28);
}

/* --- ROW BADGES (Trending / New) — re-saturated so they read on white --- */
[data-theme="light"] .row-badge.trending {
  color: #BE123C;
  background: rgba(244,63,94,0.10);
  border: 0.5px solid rgba(244,63,94,0.30);
}
[data-theme="light"] .row-badge.new {
  color: #047857;
  background: rgba(5,150,105,0.10);
  border: 0.5px solid rgba(5,150,105,0.30);
}

/* --- CATEGORY PILLS (.product-cat / .pd-chip) — these get per-category color
       from server-side inline styles via data-cat; light values are applied by
       the [data-theme="light"] [data-cat="..."] rules further below. The generic
       fallback (no data-cat match) gets a neutral light treatment here. --- */
[data-theme="light"] .product-cat[style] {
  background: var(--fill-subtle) !important;
  color: var(--text-faint) !important;
  border: 0.5px solid var(--border) !important;
}

/* --- VOTE BUTTON --- */
[data-theme="light"] .upvote-btn { border: 0.5px solid var(--border); }
[data-theme="light"] .upvote-btn:hover { border-color: var(--border-strong); background: var(--fill-subtle); }
[data-theme="light"] .upvote-btn.active { border-color: var(--accent-soft-border); background: var(--accent-soft); }
[data-theme="light"] .upvote-arrow { border-bottom-color: var(--text-fainter); }
[data-theme="light"] .upvote-btn.active .upvote-arrow { border-bottom-color: var(--accent); }
[data-theme="light"] .upvote-count { color: var(--heading); }
[data-theme="light"] .upvote-btn.active .upvote-count { color: var(--accent); }

/* --- TICKER --- */
[data-theme="light"] .ticker-wrap {
  background: var(--bg-elevated);
  border-top: 0.5px solid var(--border-soft);
  border-bottom: 0.5px solid var(--border-soft);
}
[data-theme="light"] .ticker-wrap::before { background: linear-gradient(to right, var(--bg), transparent); }
[data-theme="light"] .ticker-wrap::after { background: linear-gradient(to left, var(--bg), transparent); }
[data-theme="light"] .ticker-item { color: var(--text-fainter); }
[data-theme="light"] .ticker-item .ticker-votes { color: var(--accent); }
[data-theme="light"] .ticker-dot { color: var(--border-strong); }

/* --- STATS STRIP --- */
[data-theme="light"] .stats-strip { color: var(--text-fainter); }
[data-theme="light"] .stats-strip .ss-dot { background: var(--border-strong); }
[data-theme="light"] .stats-strip b { color: var(--text-strong); }
[data-theme="light"] .stats-strip .ss-live { color: var(--accent); }
[data-theme="light"] .stats-strip .ss-live::before { background: var(--accent); }

/* --- LOAD MORE --- */
[data-theme="light"] .load-more-btn {
  color: var(--text-2);
  background: var(--bg-elevated-2);
  border: 0.5px solid var(--border);
}
[data-theme="light"] .load-more-btn:hover {
  background: var(--fill-subtle);
  color: var(--heading);
  border-color: var(--border-strong);
}

/* --- SUBMIT CTA SECTION --- */
[data-theme="light"] .submit-inner { border-top: 0.5px solid var(--border-soft); }
[data-theme="light"] .submit-inner h2 { color: var(--text-strong); }
[data-theme="light"] .submit-inner p { color: var(--text-fainter); }
[data-theme="light"] .submit-btn { color: var(--solid-btn-text); background: var(--solid-btn-bg); }
[data-theme="light"] .submit-btn:hover { box-shadow: 0 8px 32px rgba(17,17,20,0.18); }

/* --- FOOTER --- */
/* The light-theme rule drew the same overhanging line the dark one did. The
   divider lives on .footer-inner now, which is theme-aware already. */
[data-theme="light"] .footer { border-top: none; }
[data-theme="light"] .footer-brand { color: var(--heading); }
[data-theme="light"] .footer-tagline { color: var(--text-ghost); }
[data-theme="light"] .footer-links a { color: var(--text-fainter); }
[data-theme="light"] .footer-links a:hover { color: var(--heading); }
[data-theme="light"] .footer-copy { color: var(--border-strong); }

/* --- LOGIN PAGE --- */
[data-theme="light"] .login-card {
  background: var(--card);
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .login-card h1 { color: var(--heading); }
[data-theme="light"] .login-card .login-sub { color: var(--text-faint); }
[data-theme="light"] .oauth-google { background: #16161a; color: #fff; }
[data-theme="light"] .oauth-google:hover { background: #2a2a30; }
[data-theme="light"] .oauth-github {
  background: var(--fill-subtle);
  color: var(--heading);
  border: 0.5px solid var(--border);
}
[data-theme="light"] .oauth-github:hover { background: rgba(17,17,20,0.09); }
[data-theme="light"] .login-divider { color: var(--text-ghost); }
[data-theme="light"] .login-divider::before, [data-theme="light"] .login-divider::after { background: var(--border); }
[data-theme="light"] .login-footer { color: var(--text-ghost); }

/* --- SUBMIT FORM --- */
[data-theme="light"] .submit-form-section h1 { color: var(--heading); }
[data-theme="light"] .submit-form-section .form-subtitle { color: var(--text-faint); }
[data-theme="light"] .form-group label { color: var(--text-dim); }
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
  color: var(--heading);
  background: var(--bg-elevated-2);
  border: 0.5px solid var(--border);
}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
  border-color: var(--accent-soft-border);
  background: var(--card);
}
[data-theme="light"] .form-group select option { background: #fff; color: #16161a; }
[data-theme="light"] .form-submit-btn { color: var(--solid-btn-text); background: var(--solid-btn-bg); }
[data-theme="light"] .form-submit-btn:hover { box-shadow: 0 8px 32px rgba(17,17,20,0.18); }
[data-theme="light"] .form-message.success { background: var(--accent-soft); border: 0.5px solid var(--accent-soft-border); color: var(--accent); }
[data-theme="light"] .form-message.error { background: rgba(220,38,38,0.08); border: 0.5px solid rgba(220,38,38,0.3); color: #DC2626; }
[data-theme="light"] .char-count { color: var(--text-ghost); }

/* --- SIMPLE PRODUCT DETAIL (legacy) --- */
[data-theme="light"] .product-detail-info h1 { color: var(--heading); }
[data-theme="light"] .product-detail-info .detail-tagline { color: var(--text-dim); }
[data-theme="light"] .detail-badge { color: var(--text-faint); background: var(--fill-subtle); border: 0.5px solid var(--border); }
[data-theme="light"] .product-detail-body { color: var(--text-2); }
[data-theme="light"] .detail-visit-btn { color: var(--solid-btn-text); background: var(--solid-btn-bg); }

/* --- ENRICHED PRODUCT DETAIL (.pd-*) --- */
[data-theme="light"] .pd-wrap::before {
  background: radial-gradient(ellipse at center, rgba(5,150,105,0.12), rgba(5,150,105,0.035) 46%, transparent 72%);
}
[data-theme="light"] .pd-breadcrumb { color: var(--text-fainter); }
[data-theme="light"] .pd-breadcrumb a { color: var(--text-dim); }
[data-theme="light"] .pd-breadcrumb a:hover { color: var(--accent); }
[data-theme="light"] .pd-breadcrumb .pd-bc-sep { color: var(--border-strong); }
[data-theme="light"] .pd-breadcrumb .pd-bc-current { color: var(--text-2); }
[data-theme="light"] .pd-card { background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .pd-hero {
  background: linear-gradient(155deg, rgba(5,150,105,0.10), var(--card) 44%);
  border-color: rgba(5,150,105,0.22);
  box-shadow: var(--shadow-card);
}
[data-theme="light"] .pd-card h2 { color: var(--heading); }
[data-theme="light"] .pd-titlewrap h1 { color: var(--heading); }
[data-theme="light"] .pd-tagline { color: var(--text-dim); }
[data-theme="light"] .pd-badge {
  color: var(--text-dim);
  background: var(--fill-subtle);
  border: 0.5px solid var(--border);
}
[data-theme="light"] a.pd-badge:hover { color: var(--heading); border-color: var(--accent-soft-border); }
[data-theme="light"] .pd-badge.is-online { color: var(--accent); background: var(--accent-soft); border-color: rgba(5,150,105,0.25); }
[data-theme="light"] .pd-dot { background: var(--accent); }
[data-theme="light"] .pd-btn-primary { color: var(--solid-btn-text); background: var(--solid-btn-bg); box-shadow: var(--shadow-card-hover); }
[data-theme="light"] .pd-btn-primary:hover { box-shadow: 0 10px 30px rgba(17,17,20,0.18); }
[data-theme="light"] .pd-btn-vote { color: var(--accent); background: var(--accent-soft); border: 0.5px solid var(--accent-soft-border); }
[data-theme="light"] .pd-btn-vote:hover { border-color: rgba(5,150,105,0.6); background: rgba(5,150,105,0.16); color: var(--accent-bright); }
[data-theme="light"] .pd-btn-vote .upvote-count { color: var(--heading); }
[data-theme="light"] .pd-btn-vote.active { color: var(--accent); border-color: rgba(5,150,105,0.6); background: rgba(5,150,105,0.14); }
[data-theme="light"] .pd-btn-ghost { color: var(--text-2); background: transparent; border: 0.5px solid var(--border-strong); }
[data-theme="light"] .pd-btn-ghost:hover { color: var(--heading); border-color: var(--text-fainter); }
[data-theme="light"] .pd-stats { border-top: 0.5px solid var(--border); }
[data-theme="light"] .pd-stat-num { color: var(--heading); }
[data-theme="light"] .pd-stat-num.is-accent { color: var(--accent); }
[data-theme="light"] .pd-stat-label { color: var(--text-fainter); }
[data-theme="light"] .pd-prose { color: var(--text-2); }
[data-theme="light"] .pd-dlabel { color: var(--text-fainter); }
[data-theme="light"] .pd-dval { color: var(--text-2); }
[data-theme="light"] .pd-dval a { color: var(--accent); }
[data-theme="light"] .pd-tag { color: var(--text-dim); background: var(--fill-subtle); border: 0.5px solid var(--border); }
[data-theme="light"] .pd-scard { background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .pd-scard h3 { color: var(--text-faint); }
[data-theme="light"] .pd-fname { color: var(--heading); }
[data-theme="light"] .pd-frole { color: var(--text-faint); }
[data-theme="light"] .pd-fhelp { color: var(--text-dim); }
[data-theme="light"] .pd-flink { color: var(--text-2); background: var(--fill-subtle); border: 0.5px solid var(--border); }
[data-theme="light"] .pd-flink:hover { color: var(--accent); border-color: var(--accent-soft-border); }
[data-theme="light"] .pd-fgraph { background: var(--accent-soft); border: 0.5px solid rgba(5,150,105,0.16); }
[data-theme="light"] .pd-fgraph-title { color: var(--accent); }
[data-theme="light"] .pd-fgraph-text { color: var(--text-dim); }
[data-theme="light"] .pd-signal-row { border-bottom: 0.5px solid var(--border-soft); }
[data-theme="light"] .pd-signal-label { color: var(--text-dim); }
[data-theme="light"] .pd-signal-val { color: var(--heading); }
[data-theme="light"] .pd-signal-val.is-online { color: var(--accent); }
[data-theme="light"] .pd-signal-val.is-accent { color: var(--accent); }
[data-theme="light"] .pd-ctx-label { color: var(--text-fainter); }
[data-theme="light"] .pd-tl-dot { background: rgba(5,150,105,0.5); border: 1.5px solid var(--accent); }
[data-theme="light"] .pd-tl-text { color: var(--text-dim); }
[data-theme="light"] .pd-tl-text b { color: var(--heading); }
[data-theme="light"] .pd-tg-label { color: var(--text-fainter); }
[data-theme="light"] .pd-utag { color: var(--text-2); background: var(--fill-subtle); border: 0.5px solid var(--border); }
[data-theme="light"] .pd-utag.is-aud { color: #4F46E5; background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.28); }
[data-theme="light"] .pd-utag.is-alt { color: var(--accent); background: var(--accent-soft); border-color: rgba(5,150,105,0.3); }
[data-theme="light"] .pd-rel { background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .pd-rel:hover { border-color: var(--accent-soft-border); background: var(--card-hover); }
[data-theme="light"] .pd-rel-name { color: var(--heading); }
[data-theme="light"] .pd-rel-tag { color: var(--text-dim); }
[data-theme="light"] .pd-rel-meta { color: var(--accent); }
[data-theme="light"] .pd-rel-icon[style] { box-shadow: var(--shadow-card); }
[data-theme="light"] .pd-badge-preview { background: var(--bg-elevated-2); }
[data-theme="light"] .pd-badge-copy { color: var(--text-dim); }
[data-theme="light"] .pd-embed {
  color: var(--text-2);
  background: var(--bg-elevated-2);
  border: 0.5px solid var(--border);
}
[data-theme="light"] .pd-shot::after {
  color: #fff;
  background: rgba(17,17,20,0.65);
  border: 0.5px solid rgba(255,255,255,0.2);
}

/* --- PROFILE PAGE --- */
[data-theme="light"] .profile-avatar { border-color: var(--border-strong); }
[data-theme="light"] .profile-name { color: var(--heading); }
[data-theme="light"] .profile-bio { color: var(--text-dim); }
[data-theme="light"] .profile-member-since { color: var(--text-ghost); }
[data-theme="light"] .profile-social-links a { color: var(--text-dim); }
[data-theme="light"] .profile-social-links a:hover { color: var(--heading); }
[data-theme="light"] .profile-stats { border-top: 0.5px solid var(--border-soft); border-bottom: 0.5px solid var(--border-soft); }
[data-theme="light"] .profile-stat-number { color: var(--accent); }
[data-theme="light"] .profile-stat-label { color: var(--text-fainter); }
[data-theme="light"] .profile-products-title { color: var(--text-strong); }
[data-theme="light"] .profile-private-msg { color: var(--text-fainter); }
[data-theme="light"] .profile-private-msg h2 { color: var(--text-dim); }

/* --- ADMIN PANEL --- */
[data-theme="light"] .admin-page h1 { color: var(--heading); }
[data-theme="light"] .admin-stat-card { background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .admin-stat-number { color: var(--accent); }
[data-theme="light"] .admin-stat-label { color: var(--text-fainter); }
[data-theme="light"] .admin-section h2 { color: var(--text-strong); border-bottom: 0.5px solid var(--border-soft); }
[data-theme="light"] .admin-table th { color: var(--text-fainter); border-bottom: 0.5px solid var(--border); }
[data-theme="light"] .admin-table td { color: var(--text-dim); border-bottom: 0.5px solid var(--border-soft); }
[data-theme="light"] .admin-table tr:hover td { background: var(--fill-faint); }
[data-theme="light"] .admin-table td:first-child { color: var(--heading); }
[data-theme="light"] .admin-badge.approved { background: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .admin-badge.pending { background: rgba(217,119,6,0.12); color: #B45309; }
[data-theme="light"] .admin-action-btn.approve { background: var(--accent-soft); color: var(--accent); }
[data-theme="light"] .admin-action-btn.approve:hover { background: rgba(5,150,105,0.2); }
[data-theme="light"] .admin-action-btn.reject,
[data-theme="light"] .admin-action-btn.delete { background: rgba(220,38,38,0.1); color: #DC2626; }
[data-theme="light"] .admin-action-btn.reject:hover,
[data-theme="light"] .admin-action-btn.delete:hover { background: rgba(220,38,38,0.18); }

/* --- SETTINGS --- */
[data-theme="light"] .settings-page h1 { color: var(--heading); }
[data-theme="light"] .settings-page .settings-subtitle { color: var(--text-faint); }
[data-theme="light"] .toggle-group input[type="checkbox"] { accent-color: var(--accent); }

/* ========== LIGHT-THEME CATEGORY PILL COLORS (per data-cat) ==========
   Server renders inline rgba/hex via getCatStyle for DARK. In light we override
   by data-cat with darker, readable text on a soft tint + visible border. */
[data-theme="light"] .product-cat[data-cat="Dev Tools"],
[data-theme="light"] .pd-chip[data-cat="Dev Tools"] { background: rgba(5,150,105,0.10) !important; color: #047857 !important; border: 0.5px solid rgba(5,150,105,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="AI Coding"],
[data-theme="light"] .pd-chip[data-cat="AI Coding"] { background: rgba(99,102,241,0.10) !important; color: #4F46E5 !important; border: 0.5px solid rgba(99,102,241,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="SaaS"],
[data-theme="light"] .pd-chip[data-cat="SaaS"] { background: rgba(2,132,199,0.10) !important; color: #0369A1 !important; border: 0.5px solid rgba(2,132,199,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Productivity"],
[data-theme="light"] .pd-chip[data-cat="Productivity"] { background: rgba(217,119,6,0.12) !important; color: #B45309 !important; border: 0.5px solid rgba(217,119,6,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Marketing"],
[data-theme="light"] .pd-chip[data-cat="Marketing"] { background: rgba(219,39,119,0.10) !important; color: #BE185D !important; border: 0.5px solid rgba(219,39,119,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Design"],
[data-theme="light"] .pd-chip[data-cat="Design"] { background: rgba(147,51,234,0.10) !important; color: #7C3AED !important; border: 0.5px solid rgba(147,51,234,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Lifestyle"],
[data-theme="light"] .pd-chip[data-cat="Lifestyle"] { background: rgba(234,88,12,0.10) !important; color: #C2410C !important; border: 0.5px solid rgba(234,88,12,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Fintech"],
[data-theme="light"] .pd-chip[data-cat="Fintech"] { background: rgba(13,148,136,0.10) !important; color: #0F766E !important; border: 0.5px solid rgba(13,148,136,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Community"],
[data-theme="light"] .pd-chip[data-cat="Community"] { background: rgba(5,150,105,0.10) !important; color: #047857 !important; border: 0.5px solid rgba(5,150,105,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Video"],
[data-theme="light"] .pd-chip[data-cat="Video"] { background: rgba(220,38,38,0.10) !important; color: #B91C1C !important; border: 0.5px solid rgba(220,38,38,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Health"],
[data-theme="light"] .pd-chip[data-cat="Health"] { background: rgba(22,163,74,0.10) !important; color: #15803D !important; border: 0.5px solid rgba(22,163,74,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Education"],
[data-theme="light"] .pd-chip[data-cat="Education"] { background: rgba(37,99,235,0.10) !important; color: #1D4ED8 !important; border: 0.5px solid rgba(37,99,235,0.28) !important; }
[data-theme="light"] .product-cat[data-cat="Search"],
[data-theme="light"] .pd-chip[data-cat="Search"] { background: rgba(147,51,234,0.10) !important; color: #7C3AED !important; border: 0.5px solid rgba(147,51,234,0.28) !important; }

/* ========== MAKER DASHBOARD ========== */
.mk-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(16,185,129,0.08); border: 0.5px solid rgba(16,185,129,0.3);
  color: #34D399; border-radius: 12px; padding: 13px 18px;
  font-size: 14px; line-height: 1.5; margin-bottom: 28px;
}
.mk-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.mk-cards { display: flex; flex-direction: column; gap: 12px; }
.mk-addmore { color: rgba(255,255,255,0.35); }
[data-theme="light"] .mk-addmore { color: var(--text-faint); }
.mk-card {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 16px 18px;
}
.mk-card-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff; overflow: hidden;
}
.mk-card-main { flex: 1; min-width: 0; }
.mk-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.mk-card-name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.mk-card-tag { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-meta { font-size: 12px; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mk-card-cat { color: rgba(255,255,255,0.5); }
.mk-card-dot { color: rgba(255,255,255,0.2); }
.mk-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-btn {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 7px 14px;
  border-radius: 9px; cursor: pointer; border: none; text-decoration: none;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); transition: background 0.2s ease;
}
.mk-btn:hover { background: rgba(255,255,255,0.12); }
.mk-btn-danger { background: rgba(239,68,68,0.12); color: #EF4444; }
.mk-btn-danger:hover { background: rgba(239,68,68,0.22); }
.mk-empty {
  text-align: center; padding: 48px 24px; color: rgba(255,255,255,0.4); font-size: 15px;
  background: rgba(255,255,255,0.02); border: 0.5px dashed rgba(255,255,255,0.1); border-radius: 16px;
}
@media (max-width: 640px) {
  .mk-card { flex-wrap: wrap; }
  .mk-card-actions { width: 100%; margin-top: 6px; }
  .mk-btn { flex: 1; text-align: center; }
}

/* ========== MAKER LISTING PREVIEW ========== */
.ml-wrap { max-width: 720px; margin: 0 auto; padding: 120px 32px 90px; }
.ml-crumb { font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 24px; display: flex; gap: 8px; align-items: center; }
.ml-crumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.ml-crumb a:hover { color: #10B981; }
.ml-crumb span { color: rgba(255,255,255,0.2); }
.ml-banner { border-radius: 14px; padding: 18px 22px; margin-bottom: 30px; border: 0.5px solid; }
.ml-banner-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ml-banner p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; }
.ml-banner a { color: inherit; font-weight: 600; }
.ml-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ml-pending { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
.ml-pending .ml-banner-title { color: #F59E0B; } .ml-pending .ml-dot { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,0.15); }
.ml-live { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); }
.ml-live .ml-banner-title { color: #10B981; } .ml-live .ml-dot { background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.ml-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.ml-icon {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 16px;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff; overflow: hidden;
}
.ml-head-main { flex: 1; min-width: 0; }
.ml-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ml-chip { font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 980px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.ml-head-main h1 { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-bottom: 8px; }
.ml-tagline { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.ml-visit { display: inline-block; font-size: 14px; font-weight: 600; color: #10B981; text-decoration: none; margin-bottom: 24px; }
.ml-desc { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 28px; white-space: pre-wrap; }
.ml-foot { font-size: 13px; color: rgba(255,255,255,0.35); }
.ml-foot a { color: #10B981; }
[data-theme="light"] .mk-card { background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .mk-card-name { color: var(--heading); }
[data-theme="light"] .mk-card-tag { color: var(--text-dim); }
[data-theme="light"] .mk-btn { background: rgba(0,0,0,0.05); color: var(--text-strong); }
[data-theme="light"] .mk-btn:hover { background: rgba(0,0,0,0.09); }
[data-theme="light"] .mk-empty { background: var(--card); color: var(--text-faint); }
[data-theme="light"] .ml-icon { background: rgba(0,0,0,0.05); color: var(--heading); }
[data-theme="light"] .ml-head-main h1 { color: var(--heading); }
[data-theme="light"] .ml-tagline { color: var(--text-dim); }
[data-theme="light"] .ml-desc { color: var(--text-2); }
[data-theme="light"] .ml-banner p { color: #5b6675; }
[data-theme="light"] .mk-card-meta { color: var(--text-faint); }
[data-theme="light"] .mk-card-cat { color: var(--text-dim); }
[data-theme="light"] .mk-banner { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: #059669; }
[data-theme="light"] .ml-chip { background: rgba(0,0,0,0.05); color: var(--text-2); }

/* =====================================================================
   ===== HOMEPAGE OVERHAUL (2026-07-20) — trimmed hero, trending strip,
   live stats, 2-col band + sticky sidebar, category band, FAQ, newsletter,
   expanded footer. Uses semantic --tokens so light theme inherits; explicit
   [data-theme="light"] blocks only where a token can't carry it. Mobile-first
   collapse at 900 (grid) and 640/390 (dense). ================================ */

/* Shared home container width + section rhythm */
.home-wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.home-band { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
.home-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-faint); margin-bottom: 14px;
}
.home-eyebrow .he-flame { font-size: 12px; }

/* ---- Trimmed hero additions: stat line, search, two CTAs ---- */
.hero-statline {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 8px 14px; margin: 0 auto 22px; font-size: 13px; color: rgba(255,255,255,0.42);
}
.hero-statline b { color: rgba(255,255,255,0.9); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-statline .hs-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.hero-search { max-width: 460px; margin: 0 auto 22px; width: 100%; position: relative; }
.hero-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: rgba(255,255,255,0.35); pointer-events: none; }
.hero-search input {
  width: 100%; font-family: inherit; font-size: 14px; color: #fff;
  background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 980px; padding: 13px 20px 13px 42px; outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.hero-search input::placeholder { color: rgba(255,255,255,0.35); }
.hero-search input:focus { border-color: var(--accent-soft-border); background: rgba(16,185,129,0.05); box-shadow: 0 0 0 3px var(--accent-soft); }
.hero-search:focus-within svg { color: var(--accent); }
.hero-cta-secondary {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.85); background: transparent; padding: 13px 24px;
  border: 0.5px solid rgba(255,255,255,0.14); border-radius: 980px;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1); letter-spacing: -0.01em;
}
.hero-cta-secondary:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); transform: translateY(-1px); }

/* ---- TRENDING NOW STRIP (replaces the ticker marquee) ---- */
.trend-strip { max-width: 1140px; margin: 0 auto; padding: 40px 32px 10px; }
.trend-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.trend-strip-title { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -0.015em; }
.trend-strip-title .ts-flame {
  display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
  border-radius: 7px; background: rgba(244,63,94,0.14); font-size: 12px;
}
.trend-strip-link { font-size: 13px; font-weight: 500; color: var(--text-faint); transition: color 0.18s; white-space: nowrap; }
.trend-strip-link:hover { color: var(--accent); }
.trend-scroll { position: relative; }
.trend-track {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.trend-track::-webkit-scrollbar { display: none; }
/* gradient fade edges */
.trend-scroll::before, .trend-scroll::after { content: ''; position: absolute; top: 0; bottom: 8px; width: 44px; z-index: 3; pointer-events: none; }
.trend-scroll::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.trend-scroll::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.trend-card {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 210px; max-width: 240px;
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: var(--card); border: 0.5px solid var(--border); border-radius: 14px;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, background 0.2s;
  box-shadow: var(--shadow-card);
}
.trend-card:hover { transform: translateY(-2px); border-color: var(--accent-soft-border); background: var(--card-hover); }
.trend-rank { font-size: 12px; font-weight: 700; color: var(--text-ghost); width: 16px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.trend-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,0.06);
}
.trend-body { min-width: 0; flex: 1; }
.trend-name { font-size: 13.5px; font-weight: 600; color: var(--heading); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trend-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.trend-votes { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.trend-votes .tv-arrow { display: inline-block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 5px solid var(--accent); }
.trend-cat { font-size: 11px; color: var(--text-fainter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- LIVE STATS strip (4 real counters) ---- */
.live-stats { max-width: 1140px; margin: 36px auto 0; padding: 0 32px; }
.live-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ls-card {
  padding: 24px 20px; border-radius: 16px; text-align: center;
  background: var(--card); border: 0.5px solid var(--border); box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, box-shadow 0.2s;
}
.ls-card:hover { transform: translateY(-2px); border-color: var(--accent-soft-border); box-shadow: var(--shadow-card-hover); }
.ls-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, var(--accent), transparent); opacity: 0.45; }
.ls-num { font-size: 31px; font-weight: 800; color: var(--heading); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.ls-label { font-size: 12px; font-weight: 500; color: var(--text-faint); margin-top: 9px; letter-spacing: 0.02em; text-transform: uppercase; }
.ls-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 5px; animation: ssPulse 2s infinite; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); vertical-align: middle; }

/* ---- TWO-COLUMN BAND (main + sticky sidebar) ---- */
.home-2col { max-width: 1140px; margin: 48px auto 0; padding: 0 32px; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; align-items: start; }
.home-main { min-width: 0; }
.home-side { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }

/* Section headers reused inside the band (left aligned, denser than the centered ones) */
.hm-sec { margin-bottom: 40px; }
.hm-sec:last-child { margin-bottom: 0; }
.hm-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hm-sec-title { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--heading); letter-spacing: -0.021em; line-height: 1.2; }
.hm-sec-title .hm-emo { font-size: 16px; }
.hm-sec-link { font-size: 13px; font-weight: 500; color: var(--text-faint); transition: color 0.18s; white-space: nowrap; }
.hm-sec-link:hover { color: var(--accent); }

/* Product of the Day — hero card */
.potd-card {
  display: flex; gap: 18px; padding: 24px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 58%), var(--card);
  border: 0.5px solid var(--accent-soft-border); box-shadow: var(--shadow-card);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden;
}
.potd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.potd-medal { position: absolute; top: 22px; right: 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.potd-ico {
  width: 60px; height: 60px; border-radius: 15px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,0.06);
}
.potd-body { min-width: 0; flex: 1; }
.potd-name { font-size: 20px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; margin-bottom: 5px; }
.potd-name a { color: inherit; }
.potd-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.potd-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.potd-votes { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.potd-votes .pv-arrow { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--accent); }
.potd-chip { font-size: 12px; font-weight: 500; color: var(--text-faint); background: var(--fill-subtle); padding: 4px 11px; border-radius: 980px; }

/* Medal glyph on ranks 1-3 in the top list */
.product-rank .medal { font-size: 15px; }

/* ---- SIDEBAR MODULES ---- */
.side-mod { background: var(--card); border: 0.5px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-card); transition: border-color 0.2s; }
.side-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 0.5px solid var(--border-soft); }
.side-mod-title { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.07em; }
.side-mod-title .sm-emo { font-size: 13px; }
.side-mod-link { font-size: 12px; font-weight: 500; color: var(--text-faint); transition: color 0.18s; }
.side-mod-link:hover { color: var(--accent); }

/* Hall of Fame mini rows */
.hof-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 0.5px solid var(--border-soft); }
.hof-row:first-of-type { border-top: none; }
.hof-badge { font-size: 11px; font-weight: 700; color: var(--text-faint); width: 44px; flex-shrink: 0; }
.hof-ico { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.06); }
.hof-body { min-width: 0; flex: 1; }
.hof-name { font-size: 13px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-votes { font-size: 11px; color: var(--accent); font-weight: 600; }

/* Trending-by-category list */
.tbc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--border-soft); }
.tbc-row:first-of-type { border-top: none; }
.tbc-cat { font-size: 12.5px; font-weight: 600; color: var(--heading); flex-shrink: 0; }
.tbc-lead { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; text-align: right; }
.tbc-count { font-size: 11px; font-weight: 600; color: var(--text-ghost); background: var(--fill-subtle); padding: 2px 8px; border-radius: 980px; flex-shrink: 0; }

/* New this week compact list */
.snew-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 0.5px solid var(--border-soft); }
.snew-row:first-of-type { border-top: none; }
.snew-ico { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.06); }
.snew-name { font-size: 12.5px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.snew-time { font-size: 11px; color: var(--text-ghost); flex-shrink: 0; }

/* Built-with pill grid */
.bw-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-pill {
  font-size: 12px; font-weight: 500; color: var(--text-2); background: var(--fill-subtle);
  border: 0.5px solid var(--border); padding: 6px 12px; border-radius: 980px; transition: all 0.16s;
}
.bw-pill:hover { color: var(--accent); border-color: var(--accent-soft-border); background: var(--accent-soft); }

/* Meet the builders teaser */
.mb-avatars { display: flex; align-items: center; margin-bottom: 12px; }
.mb-av {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -8px; overflow: hidden;
  border: 2px solid var(--bg); background: var(--fill-subtle); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-2);
}
.mb-av:first-child { margin-left: 0; }
.mb-av img { width: 100%; height: 100%; object-fit: cover; }
.mb-more { width: 34px; height: 34px; border-radius: 50%; margin-left: -8px; border: 2px solid var(--bg); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.mb-cta { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.mb-cta a { color: var(--accent); font-weight: 600; }

/* Newsletter capture */
.nl-mod { background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card); border: 0.5px solid var(--accent-soft-border); }
.nl-title { font-size: 14px; font-weight: 700; color: var(--heading); margin-bottom: 5px; }
.nl-sub { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; margin-bottom: 13px; }
.nl-form { display: flex; gap: 8px; }
.nl-form input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 13px; color: var(--heading);
  background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 10px;
  padding: 9px 12px; outline: none; transition: border-color 0.15s;
}
.nl-form input::placeholder { color: var(--text-fainter); }
.nl-form input:focus { border-color: var(--accent-soft-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.nl-btn { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--solid-btn-text); background: var(--solid-btn-bg); border-radius: 10px; padding: 9px 15px; transition: opacity 0.15s, transform 0.15s; }
.nl-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.nl-msg { font-size: 12px; margin-top: 9px; min-height: 15px; }
.nl-msg.ok { color: var(--accent); }
.nl-msg.err { color: #F87171; }

/* ---- FEATURED ROW (Editor's Picks) ---- */
.featured { max-width: 1140px; margin: 56px auto 0; padding: 0 32px; }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.featured-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--card); border: 0.5px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-card); transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.featured-card:hover { transform: translateY(-3px); border-color: var(--accent-soft-border); background: var(--card-hover); box-shadow: var(--shadow-card-hover); }
.fc-top-border { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, var(--accent), transparent); opacity: 0.6; }
.fc-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 16px; min-width: 0; flex: 1; }
.fc-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff;
}
.fc-icon img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.fc-name { font-size: 15.5px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.fc-cat { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.editors-pick { font-weight: 700; color: var(--accent); }
.fc-votes {
  flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; background: var(--accent-soft); padding: 3px 10px; border-radius: 980px;
}

/* ---- CATEGORY BROWSE BAND ---- */
.cat-band { max-width: 1140px; margin: 56px auto 0; padding: 0 32px; }
.cat-band-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-band-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--text-2); background: var(--card); border: 0.5px solid var(--border);
  padding: 9px 16px; border-radius: 980px; transition: all 0.16s; box-shadow: var(--shadow-card);
}
.cat-band-pill:hover { color: var(--accent); border-color: var(--accent-soft-border); transform: translateY(-1px); }
.cat-band-pill .cbp-count { font-size: 12px; font-weight: 700; color: var(--text-ghost); font-variant-numeric: tabular-nums; }
.cat-band-pill:hover .cbp-count { color: var(--accent); }

/* ---- FAQ ACCORDION ---- */
.faq-sec { max-width: 820px; margin: 56px auto 0; padding: 0 32px; }
.faq-item { border-bottom: 0.5px solid var(--border); }
.faq-item:first-child { border-top: 0.5px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 4px; font-size: 15px; font-weight: 600; color: var(--heading);
  cursor: pointer; letter-spacing: -0.01em;
}
.faq-q .faq-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-faint); transition: transform 0.25s; }
.faq-item.open .faq-q .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 4px 20px; font-size: 14px; color: var(--text-dim); line-height: 1.65; }
.faq-item.open .faq-a { max-height: 340px; }

/* ---- EXPANDED FOOTER SITEMAP ---- */
.footer-map { max-width: 1140px; margin: 0 auto; padding: 60px 32px 0; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; }
.fm-brand-col { max-width: 260px; }
.fm-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fm-brand svg { width: 22px; height: 22px; }
.fm-brand-name { font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -0.02em; }
.fm-tagline { font-size: 13px; color: var(--text-faint); line-height: 1.6; }
.fm-col h4 { font-size: 12px; font-weight: 700; color: var(--heading); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.fm-col a { display: block; font-size: 13px; color: var(--text-faint); padding: 5px 0; transition: color 0.16s; }
.fm-col a:hover { color: var(--accent); }
.footer-map-copy { max-width: 1140px; margin: 44px auto 0; padding: 20px 32px 48px; border-top: 0.5px solid var(--border-soft); font-size: 12px; color: var(--text-ghost); }

/* ===== RESPONSIVE — homepage overhaul ===== */
@media (max-width: 1000px) {
  .home-2col { grid-template-columns: minmax(0,1fr) 300px; gap: 28px; }
}
@media (max-width: 900px) {
  .home-2col { grid-template-columns: 1fr; gap: 0; }
  .home-side { position: static; margin-top: 40px; }
  .live-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-map { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fm-brand-col { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) {
  .home-wrap, .home-band, .trend-strip, .live-stats, .home-2col, .cat-band, .featured { padding-left: 20px; padding-right: 20px; }
  .featured-grid { grid-template-columns: 1fr; gap: 14px; }
  .faq-sec { padding-left: 20px; padding-right: 20px; }
  .footer-map { padding-left: 20px; padding-right: 20px; }
  .footer-map-copy { padding-left: 20px; padding-right: 20px; }
  .ls-num { font-size: 24px; }
  .ls-card { padding: 18px 14px; }
  .potd-card { padding: 18px; gap: 14px; }
  .potd-ico { width: 50px; height: 50px; font-size: 20px; }
  .potd-name { font-size: 18px; }
  .potd-medal { position: static; margin-bottom: 8px; }
  .trend-card { min-width: 180px; }
  .hero-statline { font-size: 12px; }
}
@media (max-width: 400px) {
  .home-wrap, .home-band, .trend-strip, .live-stats, .home-2col, .cat-band, .featured, .faq-sec, .footer-map, .footer-map-copy { padding-left: 16px; padding-right: 16px; }
  .live-stats-grid { gap: 10px; }
  .ls-num { font-size: 22px; }
  .trend-card { min-width: 165px; max-width: 200px; }
  .cat-band-pill { font-size: 12px; padding: 8px 13px; }
}

/* ===== LIGHT THEME — homepage overhaul (only where tokens can't carry) ===== */
[data-theme="light"] .hero-statline { color: var(--text-faint); }
[data-theme="light"] .hero-statline b { color: var(--heading); }
[data-theme="light"] .hero-statline .hs-dot { background: var(--border-strong); }
[data-theme="light"] .hero-search input { color: var(--heading); background: var(--bg-elevated); border-color: var(--border); box-shadow: var(--shadow-card); }
[data-theme="light"] .hero-search input::placeholder { color: var(--text-fainter); }
[data-theme="light"] .hero-search input:focus { border-color: var(--accent-soft-border); background: #fff; }
[data-theme="light"] .hero-search svg { color: var(--text-fainter); }
[data-theme="light"] .hero-cta-secondary { color: var(--text-strong); border-color: var(--border-strong); }
[data-theme="light"] .hero-cta-secondary:hover { border-color: var(--text-fainter); background: var(--fill-subtle); }
[data-theme="light"] .trend-ico, [data-theme="light"] .potd-ico, [data-theme="light"] .hof-ico, [data-theme="light"] .snew-ico { background: var(--fill-subtle); color: var(--text-faint); }
[data-theme="light"] .trend-strip-title .ts-flame { background: rgba(244,63,94,0.12); }
[data-theme="light"] .ls-live-dot { background: var(--accent); }
[data-theme="light"] .nl-btn { color: var(--solid-btn-text); background: var(--solid-btn-bg); }
[data-theme="light"] .mb-av { border-color: #fff; }
[data-theme="light"] .mb-more { border-color: #fff; }
[data-theme="light"] .footer-map { }

/* ========== BEST-OF PAGES ==========
   Theme-safe via CSS variables (dark defaults in :root, light values in
   [data-theme="light"]); explicit light tweaks below where vars aren't enough. */
.bo-breadcrumb { max-width: 1080px; margin: 0 auto; padding: 80px 32px 0; font-size: 13px; color: var(--text-fainter); }
.bo-breadcrumb a { color: var(--text-fainter); }
.bo-breadcrumb a:hover { color: var(--text-strong); }
.bo-breadcrumb .bo-here { color: var(--text-2); }
.bo-intro { font-size: 15px; line-height: 1.7; color: var(--text-dim); max-width: 760px; }
.bo-intro a { color: var(--accent); }
.bo-grid-section { max-width: 1080px; margin: 0 auto; padding: 32px 32px 8px; }
.bo-grid-section:last-of-type { padding-bottom: 56px; }
.bo-grid-title { font-size: 20px; font-weight: 700; color: var(--heading); letter-spacing: -0.03em; margin-bottom: 16px; }
.bo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bo-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; background: var(--card); border: 0.5px solid var(--border); border-radius: 12px; color: var(--text-strong); font-weight: 500; font-size: 14px; transition: background 0.2s, border-color 0.2s; box-shadow: var(--shadow-card); min-width: 0; }
.bo-card:hover { background: var(--card-hover); border-color: var(--border-strong); }
.bo-card .bo-count { font-size: 12px; color: var(--text-fainter); font-weight: 400; white-space: nowrap; }
.bo-browse-all { display: inline-block; margin: 20px 0 8px; font-size: 14px; color: var(--accent); font-weight: 500; }
.bo-browse-all:hover { color: var(--accent-bright); }
.bo-crosslink { margin: 0 0 16px; font-size: 13px; }
.bo-crosslink a { color: var(--accent); font-weight: 500; }
.bo-crosslink a:hover { color: var(--accent-bright); }
[data-theme="light"] .bo-card:hover { box-shadow: var(--shadow-card-hover); }
[data-theme="light"] .bo-browse-all:hover { color: var(--accent); }
@media (max-width: 640px) {
  .bo-breadcrumb { padding: 72px 20px 0; }
  .bo-grid-section { padding: 28px 20px 8px; }
  .bo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .bo-grid { grid-template-columns: 1fr; }
}

/* ==================== EARNED DOFOLLOW (badge unlock) ==================== */
/* Verified Maker mark on a public listing. Only ever shown on listings whose
   badge we have actually seen — nobody is ever publicly marked as lacking it. */
.pd-badge.is-vmaker { color: #10B981; background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.28); }
a.pd-badge.is-vmaker:hover { color: #34D399; border-color: rgba(16,185,129,0.55); }

/* The unlock block: the loudest thing on a maker's own listing card. */
.vkbl { border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; border: 1px solid rgba(16,185,129,0.28); background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.03)); }
.vkbl.is-done { border-color: rgba(16,185,129,0.22); background: rgba(16,185,129,0.06); }
.vkbl-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #34D399; margin-bottom: 9px; }
.vkbl-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0 0 7px; }
.vkbl-copy { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 0 0 14px; }
.vkbl-copy b { color: rgba(255,255,255,0.9); font-weight: 650; }
.vkbl-perks { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.vkbl-perk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #34D399; background: rgba(16,185,129,0.1); border: 0.5px solid rgba(16,185,129,0.22); border-radius: 980px; padding: 4px 10px; }
.vkbl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.vkbl-lbl { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.42); }
.vkbl-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 3px; gap: 3px; }
.vkbl-sb { border: 0; background: transparent; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.vkbl-sb.on { background: rgba(16,185,129,0.16); color: #34D399; }
.vkbl-code { width: 100%; box-sizing: border-box; min-height: 68px; resize: vertical; background: rgba(0,0,0,0.4); border: 0.5px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 11px 13px; color: rgba(255,255,255,0.8); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5; word-break: break-all; }
.vkbl-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.vkbl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; padding: 11px 18px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; }
.vkbl-btn.primary { background: #10B981; color: #04140d; }
.vkbl-btn.primary:hover { background: #34D399; }
.vkbl-btn.primary:disabled { opacity: 0.6; cursor: default; }
.vkbl-btn.ghost { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.78); border: 0.5px solid rgba(255,255,255,0.14); }
.vkbl-btn.ghost:hover { color: #fff; border-color: rgba(16,185,129,0.45); }
.vkbl-note { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.42); margin: 10px 0 0; }
.vkbl-msg { font-size: 12.5px; line-height: 1.55; margin: 9px 0 0; min-height: 16px; }
.vkbl-msg.ok { color: #34D399; }
.vkbl-msg.err { color: #f5836a; }
.vkbl-done-title { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 750; color: #34D399; margin: 0 0 6px; letter-spacing: -0.01em; }
/* Deep-link highlight: /dashboard?verify=<id> lands right on the block. */
@keyframes vkblPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.45); } 70% { box-shadow: 0 0 0 14px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.vkbl.is-flag { animation: vkblPulse 1.5s ease-out 2; border-color: rgba(16,185,129,0.6); }
[data-theme="light"] .vkbl { border-color: rgba(5,150,105,0.28); background: linear-gradient(180deg, rgba(5,150,105,0.08), rgba(5,150,105,0.02)); }
[data-theme="light"] .vkbl.is-done { border-color: rgba(5,150,105,0.22); background: rgba(5,150,105,0.05); }
[data-theme="light"] .vkbl-eyebrow { color: #059669; }
[data-theme="light"] .vkbl-title { color: var(--heading); }
[data-theme="light"] .vkbl-copy { color: var(--text-dim); }
[data-theme="light"] .vkbl-copy b { color: var(--heading); }
[data-theme="light"] .vkbl-perk { color: #059669; background: rgba(5,150,105,0.09); border-color: rgba(5,150,105,0.22); }
[data-theme="light"] .vkbl-lbl { color: var(--text-faint); }
[data-theme="light"] .vkbl-seg { background: #f1f2f4; border-color: #e2e4e8; }
[data-theme="light"] .vkbl-sb { color: #5b6675; }
[data-theme="light"] .vkbl-sb.on { background: rgba(5,150,105,0.12); color: #059669; }
[data-theme="light"] .vkbl-code { background: #fff; border-color: var(--border); color: #2b3543; }
[data-theme="light"] .vkbl-btn.primary { background: #059669; color: #fff; }
[data-theme="light"] .vkbl-btn.primary:hover { background: #10B981; }
[data-theme="light"] .vkbl-btn.ghost { background: rgba(17,17,20,0.04); color: var(--text-dim); border-color: var(--border); }
[data-theme="light"] .vkbl-btn.ghost:hover { color: var(--heading); border-color: rgba(5,150,105,0.4); }
[data-theme="light"] .vkbl-note { color: var(--text-faint); }
[data-theme="light"] .vkbl-msg.ok { color: #059669; }
[data-theme="light"] .vkbl-done-title { color: #059669; }
@media (max-width: 520px) {
  .vkbl { padding: 15px 15px; }
  .vkbl-title { font-size: 16px; }
  .vkbl-actions { flex-direction: column; align-items: stretch; }
  .vkbl-btn { width: 100%; }
}

/* Public Verified Makers page. */
.vfd-page { max-width: 1120px; margin: 0 auto; padding: 112px 20px 72px; }
.vfd-head { text-align: center; margin-bottom: 34px; }
.vfd-head h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin: 0 0 12px; }
.vfd-head p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 560px; margin: 0 auto; }
.vfd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vfd-card { display: flex; gap: 13px; align-items: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 15px; padding: 17px 18px; }
.vfd-icon { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-size: 18px; font-weight: 700; color: #fff; }
.vfd-icon img { width: 100%; height: 100%; object-fit: cover; }
.vfd-main { min-width: 0; flex: 1; }
.vfd-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.vfd-name a { color: inherit; text-decoration: none; }
.vfd-name a:hover { color: #34D399; }
.vfd-tick { font-size: 10.5px; font-weight: 700; color: #34D399; background: rgba(16,185,129,0.12); border: 0.5px solid rgba(16,185,129,0.26); border-radius: 980px; padding: 2px 8px; white-space: nowrap; }
.vfd-tag { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.5); margin: 5px 0 0; word-break: break-word; }
.vfd-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; }
.vfd-links a { color: #10B981; text-decoration: none; font-weight: 600; }
.vfd-links a:hover { color: #34D399; }
.vfd-empty { text-align: center; padding: 46px 20px; color: rgba(255,255,255,0.45); font-size: 14.5px; line-height: 1.7; border: 1px dashed var(--border); border-radius: 16px; }
.vfd-empty a { color: #10B981; text-decoration: none; font-weight: 600; }
.vfd-cta { margin-top: 30px; text-align: center; font-size: 14px; color: rgba(255,255,255,0.5); }
.vfd-cta a { color: #10B981; text-decoration: none; font-weight: 600; }
[data-theme="light"] .vfd-head h1 { color: var(--heading); }
[data-theme="light"] .vfd-head p { color: var(--text-dim); }
[data-theme="light"] .vfd-name { color: var(--heading); }
[data-theme="light"] .vfd-name a:hover { color: #059669; }
[data-theme="light"] .vfd-tick { color: #059669; background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.24); }
[data-theme="light"] .vfd-tag { color: var(--text-dim); }
[data-theme="light"] .vfd-links a { color: #059669; }
[data-theme="light"] .vfd-empty { color: var(--text-dim); }
[data-theme="light"] .vfd-empty a, [data-theme="light"] .vfd-cta a { color: #059669; }
[data-theme="light"] .vfd-cta { color: var(--text-dim); }
@media (max-width: 600px) {
  .vfd-page { padding: 96px 16px 56px; }
  .vfd-head h1 { font-size: 28px; }
  .vfd-grid { grid-template-columns: 1fr; }
}

/* Public developer docs page (/api). */
.apid { max-width: 920px; margin: 0 auto; padding: 112px 20px 80px; }
.apid-hero { margin-bottom: 34px; }
.apid-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 0.5px solid var(--accent-soft-border); border-radius: 980px; padding: 5px 12px; margin-bottom: 18px; }
.apid h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; color: var(--heading); margin: 0 0 14px; line-height: 1.12; }
.apid-lead { font-size: 16.5px; line-height: 1.65; color: var(--text-dim); max-width: 660px; margin: 0 0 22px; }
.apid-lead strong { color: var(--text-strong); font-weight: 600; }
.apid-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.apid-fact { font-size: 12.5px; font-weight: 600; color: var(--text-dim); background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 980px; padding: 6px 13px; }
.apid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.apid-stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.apid-stat-n { display: block; font-size: 23px; font-weight: 800; color: var(--heading); letter-spacing: -0.03em; line-height: 1.1; }
.apid-stat-l { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
.apid-note { font-size: 12.5px; color: var(--text-ghost); margin: 0 0 34px; }
.apid-toc { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 0 30px; border-bottom: 0.5px solid var(--border-soft); margin-bottom: 34px; font-size: 13px; }
.apid-sec { margin-bottom: 44px; scroll-margin-top: 88px; }
.apid h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.025em; color: var(--heading); margin: 0 0 12px; }
.apid h3 { font-size: 15.5px; font-weight: 700; color: var(--heading); margin: 28px 0 9px; letter-spacing: -0.01em; }
.apid h3 code { font-size: 14.5px; }
.apid p { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); margin: 0 0 12px; }
.apid ul { margin: 0 0 14px; padding-left: 20px; }
.apid li { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); margin-bottom: 5px; }
.apid a { color: var(--accent); text-decoration: none; font-weight: 600; }
.apid a:hover { color: var(--accent-bright); text-decoration: underline; }
.apid code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.8px; background: var(--fill-subtle); border: 0.5px solid var(--border-soft); border-radius: 5px; padding: 1.5px 5px; color: var(--text-strong); }
.apid pre { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 15px 17px; overflow-x: auto; margin: 0 0 14px; }
.apid pre code { background: none; border: 0; padding: 0; font-size: 12.6px; line-height: 1.7; color: var(--text-strong); white-space: pre; }
.apid table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13.2px; display: block; overflow-x: auto; }
.apid th, .apid td { text-align: left; padding: 9px 12px; border-bottom: 0.5px solid var(--border-soft); color: var(--text-dim); vertical-align: top; white-space: nowrap; }
.apid td:last-child { white-space: normal; min-width: 220px; }
.apid th { color: var(--heading); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.apid-try { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 19px 20px; }
.apid-try-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 13px; }
.apid-try-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.4px; color: var(--text-faint); word-break: break-all; }
.apid-btn { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--solid-btn-text); background: var(--solid-btn-bg); border: 0; border-radius: 9px; padding: 9px 17px; cursor: pointer; white-space: nowrap; transition: opacity 0.16s; }
.apid-btn:hover { opacity: 0.85; }
.apid-btn[disabled] { opacity: 0.5; cursor: default; }
.apid-out { margin: 0; max-height: 330px; overflow: auto; }
.apid-repos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apid-repo { display: block; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 19px 20px; transition: border-color 0.16s, background 0.16s; }
.apid a.apid-repo:hover { border-color: var(--accent-soft-border); background: var(--card-hover); text-decoration: none; color: var(--accent); }
.apid-repo-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.apid-repo-top svg { width: 17px; height: 17px; flex-shrink: 0; fill: var(--heading); }
.apid-repo-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
.apid-repo p { font-size: 13.2px; line-height: 1.6; color: var(--text-faint); margin: 0; font-weight: 400; }
.apid-faq { display: flex; flex-direction: column; gap: 11px; }
.apid-faq details { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 13px; padding: 15px 18px; }
.apid-faq summary { font-size: 14.5px; font-weight: 600; color: var(--heading); cursor: pointer; list-style: none; }
.apid-faq summary::-webkit-details-marker { display: none; }
.apid-faq details p { margin: 11px 0 0; font-size: 14px; }
.apid-cta { text-align: center; padding: 30px 20px; border: 1px dashed var(--border); border-radius: 16px; }
.apid-cta p { margin: 0; }
.apid-datanote { font-size: 13px; color: var(--text-faint); margin: 18px 0 0; }
.apid-datanote a { font-weight: 600; }
@media (max-width: 760px) {
  .apid-stats { grid-template-columns: 1fr 1fr; }
  .apid-repos { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .apid { padding: 96px 16px 60px; }
  .apid h1 { font-size: 30px; }
  .apid-lead { font-size: 15.5px; }
  .apid h2 { font-size: 20px; }
  .apid pre code { font-size: 11.8px; }
  .apid-try-head { flex-direction: column; align-items: stretch; }
  .apid-btn { width: 100%; }
}


/* Footer developer row: the site-wide link out to /api and the GitHub repos. */
.footer-dev { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; padding-top: 22px; border-top: 0.5px solid var(--border-soft); }
.footer-dev-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-ghost); }
.footer-dev a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-fainter); transition: color 0.18s ease; }
.footer-dev a:hover { color: var(--accent); }
.footer-dev a svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
@media (max-width: 768px) {
  .footer-dev { justify-content: center; }
}
/* One tasteful "this is also an API" line on the best-of hub. */
.bo-apiline { margin-top: 10px; font-size: 14px; color: var(--text-faint); }
.bo-apiline a { color: var(--accent); font-weight: 600; }
.bo-apiline a:hover { color: var(--accent-bright); }

/* (editorial/explainer styles live in VK_EXPLAINER_CSS, emitted only by /what-is-vibe-coding) */

/* ========== PAID RANKED PLACEMENT (the auction) ==========
   Deliberately self-contained: every selector is namespaced .auc-*, nothing
   here reaches into an existing homepage section (the single exception is the
   .auc-home + .hero rule below, which only matches when the block is actually
   mounted). Reuses the site vocabulary -- var(--card) surfaces, hairline
   borders, emerald accent -- and every hardcoded colour has a
   [data-theme="light"] counterpart at the end of the block.
   NOTE: no backticks anywhere in this block -- the whole thing lives inside a
   JS template literal in src/index.js and a stray backtick would end it. */
.auc { max-width: 860px; margin: 0 auto; }
/* The match box is toggled with the [hidden] attribute. A display rule on the
   class would outrank the UA sheet's [hidden] { display: none }, so pin it.
   Scoped to .auc so it cannot affect anything else on the page. */
.auc [hidden] { display: none !important; }
.auc-home { padding: 104px 32px 10px; }
/* Tighten the hero ONLY when the auction leads the page. With
   AUCTION_HOMEPAGE off, .auc-home is never emitted, this never matches, and
   the hero renders exactly as it does today. */
.auc-home + .hero .hero-content { padding-top: 56px; }
.auc-page { padding: 112px 32px 72px; }

/* --- the #1 card: the single focal point --- */
.auc-hero { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 28px 32px 30px; box-shadow: var(--shadow-card); text-align: center; }
.auc-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #059669; }
.auc-page h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.035em; color: var(--heading); margin: 14px 0 10px; line-height: 1.15; }
.auc-page .auc-sub { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0 auto 26px; max-width: 580px; }
.auc-sub a { color: #10B981; font-weight: 600; }
.auc-sub a:hover { color: #34D399; }

/* Three steps, above the bid form. This is the block that answers "what am I
   actually paying for" before someone reaches the price, which is the question
   the hero never used to answer. Numbers are drawn from a counter rather than
   emoji or list markers, per the visual rules. Stacks on mobile, where most of
   the traffic reads it. */
.auc-steps { counter-reset: aucstep; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0 auto 26px; padding: 0; max-width: 720px; text-align: left; }
.auc-steps li { counter-increment: aucstep; position: relative; padding: 0 0 0 30px; }
.auc-steps li::before { content: counter(aucstep); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(5,150,105,0.14); color: #059669; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.auc-steps b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-pure); margin: 0 0 3px; }
.auc-steps span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
@media (max-width: 700px) { .auc-steps { grid-template-columns: 1fr; gap: 14px; max-width: 420px; } }
.auc-ico { width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-size: 26px; font-weight: 700; color: #fff; }
.auc-ico img { width: 100%; height: 100%; object-fit: cover; }
/* A real logo gets a neutral tile and is contained, not cropped. object-fit:cover
   was cutting the edges off wide marks, and the coloured gradient underneath was
   showing through every transparent PNG. */
.auc-ico.has-img { background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-soft); }
.auc-ico.has-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.auc-ico.has-img.is-photo img { object-fit: cover; padding: 0; }
/* The letter sits under the image as the fallback surface. It only becomes
   visible when onerror removes the img. */
.auc-ico.has-img .auc-ico-let { position: absolute; opacity: 0; }
.auc-ico.has-img.img-dead .auc-ico-let { opacity: 1; position: static; }
.auc-ico.has-img.img-dead { box-shadow: none; }
.auc-ico.is-lg { width: 54px; height: 54px; border-radius: 14px; font-size: 22px; }
.auc-ico.is-md { width: 42px; height: 42px; border-radius: 11px; font-size: 17px; }
.auc-ico.is-sm { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }

/* --- podium: the top 3 earn a card each --- */
.auc-podium { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; text-align: left; }
.auc-pcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 44px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.auc-badge { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 12.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
/* Gold, silver, bronze. Each badge is a 3-stop gradient rather than 2: real
   metal has a bright band across the middle, and a flat two-colour ramp reads
   as plastic. */
/* Podium cards get the same treatment as the list rows: the whole card is the
   tap target and the whole card gives the feedback. Same bug otherwise, only
   the name was clickable and only the name reacted.
   .auc-pcard is already position:relative, so the stretched link just works.
   z-index 2 clears the .auc-sheen overlay that sits above the card content. */
/* Whole-card click on the podium, done with a real overlay anchor rather than a
   stretched pseudo-element.
   A pseudo on .auc-pname does not work here: .auc-pbody is position:relative
   (needed so the card's children sit above the z-index:1 sheen), so inset:0
   resolved against the 145x110 body instead of the 312x140 card and left the
   logo and the price dead. .auc-pcover is a direct child of the card, so its
   containing block IS the card, and z-index 5 clears both the children (2) and
   the rank badge (3).
   It is a real <a>, so no JS is involved and middle-click and open-in-new-tab
   behave normally. aria-hidden + tabindex=-1 keep it out of the accessibility
   tree and the tab order, because .auc-pname already exposes the same link. */
.auc-pcard > .auc-pcover { position: absolute; inset: 0; z-index: 5; border-radius: 14px; }
.auc-pcard:hover > .auc-pcover ~ .auc-pbody .auc-pname { color: #059669; }
.auc-pcard { transition: transform .1s ease, background .14s ease; }
.auc-pcard:hover .auc-pname,
.auc-pcard:active .auc-pname,
.auc-pcard:has(.auc-pname:active) .auc-pname { color: #059669; }
.auc-pcard:active,
.auc-pcard:has(.auc-pname:active) { transform: scale(0.99); }
[data-theme="light"] .auc-pcard:hover .auc-pname,
[data-theme="light"] .auc-pcard:active .auc-pname,
[data-theme="light"] .auc-pcard:has(.auc-pname:active) .auc-pname { color: #047857; }
.auc-pcard.is-r1 { border-color: rgba(234,179,8,0.55); animation: aucGlow 3.4s ease-in-out infinite; }
.auc-pcard.is-r1 .auc-badge { background: linear-gradient(140deg,#FEF3C7 6%,#FBBF24 42%,#D97706 100%); }
.auc-pcard.is-r2 { border-color: rgba(148,163,184,0.55); box-shadow: 0 0 0 1px rgba(148,163,184,0.12), 0 0 18px rgba(148,163,184,0.16); }
.auc-pcard.is-r2 .auc-badge { background: linear-gradient(140deg,#F8FAFC 6%,#CBD5E1 42%,#64748B 100%); }
.auc-pcard.is-r3 { border-color: rgba(180,110,60,0.55); box-shadow: 0 0 0 1px rgba(180,110,60,0.12), 0 0 18px rgba(180,110,60,0.15); }
.auc-pcard.is-r3 .auc-badge { background: linear-gradient(140deg,#FBD9B5 6%,#CD7F32 45%,#8A4B12 100%); }
.auc-crown { width: 17px; height: 13px; display: block; color: #7C4A03; }

/* Ported from the Moontok badge treatment (design/anim-gold.html): a narrow
   blurred white bar raked across the face at 18deg, plus a breathing glow on
   the leader. The sweep lives in its own clipping layer so the rank badge,
   which sits outside the card edge, is not clipped with it. */
.auc-sheen { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 1; }
.auc-sheen::before {
  content: ''; position: absolute; top: -30%; left: -15%; width: 46px; height: 165%;
  filter: blur(4px); transform: rotate(18deg); opacity: 0;
  animation: aucSheen 5.5s ease-in-out infinite;
}
/* The sweep is tinted to its metal. A white sheen on a bronze card reads as a
   glitch rather than a reflection -- metal reflects its own colour. */
.auc-pcard.is-r1 .auc-sheen::before { background: linear-gradient(90deg, transparent, rgba(255,231,153,0.55), rgba(255,251,235,0.95), rgba(255,231,153,0.55), transparent); }
.auc-pcard.is-r2 .auc-sheen::before { background: linear-gradient(90deg, transparent, rgba(226,232,240,0.55), rgba(255,255,255,0.95), rgba(226,232,240,0.55), transparent); }
.auc-pcard.is-r3 .auc-sheen::before { background: linear-gradient(90deg, transparent, rgba(240,186,130,0.55), rgba(255,240,220,0.92), rgba(240,186,130,0.55), transparent); }
.auc-pcard.is-r1 .auc-sheen::before { animation-delay: 0s; }
.auc-pcard.is-r2 .auc-sheen::before { animation-delay: 0.9s; }
.auc-pcard.is-r3 .auc-sheen::before { animation-delay: 1.8s; }
/* Lift the content above the sheen WITHOUT touching .auc-badge: a blanket
   child-star rule here outranks the badge's own absolute positioning
   (0,2,0 beats 0,1,0), which dropped it back into flow and knocked the icon
   and name out of alignment. Name the children explicitly instead. */
.auc-pcard > .auc-ico,
.auc-pcard > .auc-pbody,
.auc-pcard > .auc-pamt { position: relative; z-index: 2; }
.auc-badge { z-index: 3; }
/* Animates the left offset, not translateX: a percentage translate resolves
   against the 26px bar itself, moving it a few pixels instead of across the
   card. The left offset resolves against the card, which is what we need. */
@keyframes aucSheen {
  0%   { left: -15%; opacity: 0; }
  6%   { opacity: 0.85; }
  26%  { left: 112%; opacity: 0; }
  100% { left: 112%; opacity: 0; }
}
@keyframes aucGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(234,179,8,0.14), 0 0 18px rgba(234,179,8,0.16); }
  50%      { box-shadow: 0 0 0 1px rgba(234,179,8,0.34), 0 0 34px rgba(234,179,8,0.32); }
}

/* Depth without boxes: a soft coloured wash behind the podium, so the cards sit
   in light rather than on a grey panel. */
.auc { position: relative; }
.auc-ambient { position: absolute; left: 50%; top: 0; width: min(760px, 96%); height: 340px; transform: translateX(-50%); pointer-events: none; z-index: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(234,179,8,0.13), rgba(234,179,8,0) 70%); }
.auc-hero, .auc-list, .auc-div { position: relative; z-index: 1; }

/* Launch banner. Warm amber so it reads as an offer without becoming a grey
   panel, and it sits above the ticker so the first thing read is the reason to
   act now. */
/* No box. A bordered amber panel floating over a dark minimal page reads as a
   cookie banner bolted on top, which is exactly what it looked like. It is one
   line of text now: the label carries the colour, nothing else needs a frame. */
.auc-launch { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 20px; }
.auc-launch-tag { flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #F5C542; }
.auc-launch-txt { font-size: 13px; line-height: 1.5; color: var(--text-ghost); }

/* LIGHT THEME. Everything above was built against the dark palette - gold on
   near-black, white-alpha borders, glows that only read on dark. On white it
   looked washed out and grey. These overrides darken the metals and swap the
   alpha borders for solid ones so the same components hold up in both themes. */
[data-theme="light"] .auc-ring { background: radial-gradient(120% 80% at 50% 0%, rgba(180,120,20,0.10), rgba(180,120,20,0) 60%), radial-gradient(90% 70% at 50% 108%, rgba(5,150,105,0.08), rgba(5,150,105,0) 58%), #14161A; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .auc-throne-crown { color: #A87708; }
[data-theme="light"] .auc-throne-l { color: #8A6206; }
[data-theme="light"] .auc-throne-line { background: linear-gradient(90deg, rgba(168,119,8,0), rgba(168,119,8,0.5), rgba(168,119,8,0)); }
[data-theme="light"] .auc-f-shield { border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .auc-fighter.is-f1 .auc-f-shield { border-color: #C08A0C; box-shadow: none; }
[data-theme="light"] .auc-fighter.is-f2 .auc-f-shield { border-color: #94A3B8; }
[data-theme="light"] .auc-fighter.is-f3 .auc-f-shield { border-color: #B4713C; }
[data-theme="light"] .auc-fighter.is-f1 { background: linear-gradient(90deg, rgba(200,153,43,0.10), rgba(200,153,43,0) 60%); }
[data-theme="light"] .auc-fighter.is-f1 .auc-f-amt, [data-theme="light"] .auc-fighter.is-f1 .auc-f-rank, [data-theme="light"] .auc-fighter.is-f1 .auc-f-gap { color: #A87708; }
[data-theme="light"] .auc-fighter.is-f2 .auc-f-amt { color: #64748B; }
[data-theme="light"] .auc-fighter.is-f3 .auc-f-amt { color: #A9642F; }
[data-theme="light"] .auc-fighter:not(:last-child) { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .auc-f-prog { background: rgba(0,0,0,0.07); }
[data-theme="light"] .auc-rune { color: #A87708; }
[data-theme="light"] .auc-div span { background: var(--bg-elevated); color: var(--text-dim); }
[data-theme="light"] .auc-field::after { background: radial-gradient(50% 60% at 50% 20%, rgba(168,119,8,0.10), rgba(168,119,8,0) 70%); }
[data-theme="light"] .auc-launch-tag { color: #A87708; }
[data-theme="light"] .auc-ring-h { color: #8A6206; }
[data-theme="light"] .auc-axes { color: #059669; }

/* --- THRONE ROW + WINDOW TABS ---------------------------------------------
   The board is three boards now (today / this week / all-time) and the all-time
   #1 is lifted out above them, so a bought top spot is never hidden by whatever
   window a visitor is looking at. Colours come from the shared tokens, so the
   only light-theme overrides needed below are the gold metals, which have to be
   darkened to read on white. */
.auc-throne-row { position: relative; display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; padding: 15px 18px 15px 46px; border: 1px solid rgba(234,179,8,0.5); border-radius: 14px; background: linear-gradient(90deg, rgba(234,179,8,0.10) 0%, rgba(234,179,8,0.03) 46%, transparent 80%), var(--bg-elevated); text-align: left; }
.auc-throne-row > .auc-tr-cover { position: absolute; inset: 0; z-index: 5; border-radius: 14px; }
.auc-tr-crown { position: absolute; left: -9px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg,#FEF3C7 6%,#FBBF24 42%,#D97706 100%); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.auc-tr-body { position: relative; z-index: 2; flex: 1; min-width: 0; }
.auc-tr-label { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #E7B008; margin-bottom: 2px; }
.auc-tr-name { display: block; font-size: 16px; font-weight: 700; color: var(--text-pure); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-throne-row:hover .auc-tr-name { color: var(--accent-bright); }
.auc-tr-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--text-faint); }
.auc-tr-meta strong { color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.auc-tr-amt { position: relative; z-index: 2; flex-shrink: 0; font-size: 19px; font-weight: 800; color: #F5C542; font-variant-numeric: tabular-nums; }

.auc-tabwrap { margin: 4px 0 0; }
.auc-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.auc-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-faint); cursor: pointer; transition: color .14s ease, border-color .14s ease; }
.auc-tab:hover { color: var(--text-strong); }
.auc-tab.is-on { color: var(--text-pure); border-bottom-color: var(--accent); }
.auc-season-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-fainter); padding-bottom: 8px; }
.auc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
.auc-panel[hidden] { display: none !important; }
.auc-tab-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-fainter); text-align: left; }
.auc-tab-empty { margin: 22px 0 8px; font-size: 13.5px; color: var(--text-faint); text-align: left; }
.auc-kings-link { margin: 18px 0 0; font-size: 12.5px; color: var(--text-fainter); text-align: left; }
.auc-kings-link a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auc-kings-link a:hover { text-decoration: underline; }

/* Chips. Same slot, same height, same left edge on every row -- the only thing
   that changes is the glyph and the word, which is what keeps a mixed list from
   looking like six different components. */
.auc-chips-row { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.auc-king-chip, .auc-rise-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 980px; white-space: nowrap; }
.auc-king-chip { position: relative; z-index: 6; color: #F5C542; background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.3); text-decoration: none; }
.auc-king-chip:hover { background: rgba(234,179,8,0.2); }
.auc-king-chip .auc-crown { width: 12px; height: 9px; color: currentColor; }
.auc-rise-chip { color: var(--accent-bright); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.28); }
.auc-row .auc-king-chip, .auc-row .auc-rise-chip { margin-left: 7px; vertical-align: middle; }
@media (max-width: 560px) {
  .auc-throne-row { padding: 13px 14px 13px 40px; gap: 11px; }
  .auc-tr-amt { font-size: 17px; }
  .auc-tab { padding: 8px 9px; font-size: 12.5px; }
  .auc-season-live { margin-left: 0; width: 100%; padding-bottom: 8px; }
}
[data-theme="light"] .auc-throne-row { border-color: rgba(200,153,43,0.55); background: linear-gradient(90deg, rgba(200,153,43,0.14) 0%, rgba(200,153,43,0.04) 46%, transparent 80%), var(--bg-elevated); }
[data-theme="light"] .auc-tr-label { color: #A87708; }
[data-theme="light"] .auc-tr-amt { color: #A87708; }
[data-theme="light"] .auc-throne-row:hover .auc-tr-name { color: #047857; }
[data-theme="light"] .auc-tab.is-on { border-bottom-color: var(--accent); }
[data-theme="light"] .auc-live-dot { box-shadow: 0 0 0 3px rgba(5,150,105,0.14); }
[data-theme="light"] .auc-king-chip { color: #8A6206; background: rgba(200,153,43,0.14); border-color: rgba(200,153,43,0.4); }
[data-theme="light"] .auc-king-chip:hover { background: rgba(200,153,43,0.22); }
[data-theme="light"] .auc-rise-chip { color: #047857; background: rgba(5,150,105,0.1); border-color: rgba(5,150,105,0.3); }
/* DENSITY PASS. Everything below the field was running at hero scale: 42px
   icons, two-line descriptions and 14px padding meant two rows filled a phone
   screen. A ranked list should be scannable, so this halves the vertical cost
   of every row without dropping any information. */
.auc-row { gap: 11px; padding: 9px 6px; }
.auc-row .auc-ico.is-md { width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: 13px !important; }
.auc-rank { width: 24px; font-size: 11.5px; }
.auc-row .auc-row-name { font-size: 16px; }
.auc-rdesc { font-size: 12px; margin-top: 2px; -webkit-line-clamp: 1; }
.auc-row .auc-pmeta { font-size: 10.5px; margin-top: 2px; }
.auc-amt { font-size: 14.5px; }

/* The saga was wrapping mid-sentence and leaving orphans like "for $25" on a
   line of their own. Tighter type and a smaller mark keep each deed on one or
   two clean lines. */
.auc-battle { margin: 22px 0 0; }
.auc-battle-row { padding: 7px 2px; font-size: 12.5px; gap: 8px; }
.auc-sword { width: 12px; height: 12px; opacity: 0.75; }
.auc-battle-when { font-size: 11px; }
.auc-battle-h { margin-bottom: 6px; }

/* The board ended with a large dead gap before the footer. */
.auc-page { padding-bottom: 8px; }
.auc-battle:last-child { margin-bottom: 4px; }
/* THE BOARD, given craft. It was a clean list, which is fine and forgettable.
   Character here comes from material, not from more ornament: a metal frame with
   forged corners, engraved type, and the throne row physically raised out of the
   rest. The rule throughout is that decoration must sit BEHIND the data - a
   name and a price must never be harder to read because of it. */
.auc-board { position: relative; display: flex; flex-direction: column; margin: 8px 0 22px;
  border: 1px solid transparent; border-radius: 14px; overflow: visible;
  background:
    linear-gradient(var(--bg-base), var(--bg-base)) padding-box,
    linear-gradient(160deg, rgba(234,179,8,0.55) 0%, rgba(120,90,20,0.28) 22%, rgba(255,255,255,0.06) 50%, rgba(120,90,20,0.28) 78%, rgba(234,179,8,0.45) 100%) border-box;
  box-shadow: 0 18px 44px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05); }

/* Forged corner studs - four rivets holding the frame together. */
.auc-board::before, .auc-board::after {
  content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #F5DFA0, #A87708 62%, #5C4206);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.auc-board::before { left: -3px; top: -3px; }
.auc-board::after { right: -3px; top: -3px; }

.auc-b-row { position: relative; display: flex; align-items: center; gap: 13px; padding: 13px 18px; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.045); transition: background 0.16s ease; }
.auc-b-row:last-child { border-bottom: 0; border-radius: 0 0 13px 13px; }
.auc-b-row:hover { background: rgba(255,255,255,0.028); }

/* Rank as a struck numeral rather than plain text. */
.auc-b-rank { flex-shrink: 0; width: 26px; text-align: center; font-size: 13px; font-weight: 800;
  color: #6E6E78; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55); }

.auc-b-row .auc-ico.is-md { width: 34px !important; height: 34px !important; border-radius: 9px !important; font-size: 14px !important; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 2px 5px rgba(0,0,0,0.45); }

.auc-b-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.auc-b-name { font-size: 14.5px; font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.auc-b-row:hover .auc-b-name { color: #10B981; }
.auc-b-tag { font-size: 11.5px; color: var(--text-ghost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-b-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.auc-b-amt { font-size: 16px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.auc-b-meta { font-size: 10.5px; color: var(--text-ghost); white-space: nowrap; letter-spacing: 0.02em; }
.auc-b-meta strong { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-faint); }

/* ---- THE THRONE ROW ---- raised, lit, and engraved. */
.auc-b-row.is-top { border-radius: 13px 13px 0 0; border-bottom-color: rgba(234,179,8,0.28);
  background:
    linear-gradient(90deg, rgba(234,179,8,0.13) 0%, rgba(234,179,8,0.045) 42%, rgba(234,179,8,0) 78%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09); }
.auc-b-row.is-top .auc-b-rank { color: #F5C542; text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 0 10px rgba(234,179,8,0.45); }
.auc-b-row.is-top .auc-b-name { font-size: 16px; color: var(--heading); text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.auc-b-row.is-top .auc-b-amt { font-size: 19px; color: #F5C542; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.auc-b-row.is-top .auc-b-meta { color: #C8992B; }
.auc-b-row.is-top .auc-ico.is-md { box-shadow: 0 0 0 1.5px rgba(234,179,8,0.75), 0 0 16px rgba(234,179,8,0.3), 0 2px 5px rgba(0,0,0,0.5); }

/* A crown sits on the throne row instead of a rank numeral. */
.auc-b-crown { display: block; width: 19px; height: 15px; margin: 0 auto; color: #F5C542; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)); }

/* Knotwork divider marking where the throne ends and the challengers begin. */
.auc-b-sep { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 0; background: rgba(0,0,0,0.16); }
.auc-b-sep span { font-size: 9px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(234,179,8,0.6); }
.auc-b-sep i { display: block; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(234,179,8,0), rgba(234,179,8,0.5)); }
.auc-b-sep i:last-child { background: linear-gradient(90deg, rgba(234,179,8,0.5), rgba(234,179,8,0)); }

[data-theme="light"] .auc-board {
  background:
    linear-gradient(var(--bg-base), var(--bg-base)) padding-box,
    linear-gradient(160deg, rgba(168,119,8,0.6) 0%, rgba(168,119,8,0.2) 24%, rgba(0,0,0,0.06) 50%, rgba(168,119,8,0.2) 76%, rgba(168,119,8,0.5) 100%) border-box;
  box-shadow: 0 14px 34px rgba(0,0,0,0.10); }
[data-theme="light"] .auc-b-row { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .auc-b-row:hover { background: rgba(0,0,0,0.022); }
[data-theme="light"] .auc-b-row.is-top { background: linear-gradient(90deg, rgba(200,153,43,0.16) 0%, rgba(200,153,43,0.05) 44%, rgba(200,153,43,0) 78%); }
[data-theme="light"] .auc-b-row.is-top .auc-b-rank,
[data-theme="light"] .auc-b-row.is-top .auc-b-amt { color: #A87708; text-shadow: none; }
[data-theme="light"] .auc-b-row.is-top .auc-b-name { text-shadow: none; }
[data-theme="light"] .auc-b-crown { color: #A87708; }
[data-theme="light"] .auc-b-sep { background: rgba(0,0,0,0.03); }
[data-theme="light"] .auc-b-rank { color: #8A8A93; text-shadow: none; }

@media (max-width: 560px) {
  .auc-b-row { padding: 11px 13px; gap: 10px; }
  .auc-b-tag { display: none; }
  .auc-b-name { font-size: 13.5px; }
  .auc-b-row.is-top .auc-b-name { font-size: 15px; }
  .auc-b-amt { font-size: 15px; }
  .auc-b-row.is-top .auc-b-amt { font-size: 17.5px; }
}

.auc-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
/* Impact shake: the whole ring kicks when the axes meet. */
.auc-ring { animation: aucShake 3.6s ease-out infinite; }
@keyframes aucShake {
  0%, 50%   { transform: translate(0, 0); }
  54%       { transform: translate(-2px, 1px); }
  57%       { transform: translate(2px, -1px); }
  60%       { transform: translate(-1px, 0); }
  64%, 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .auc-ring { animation: none; } }

/* THE 3D ARENA. Centre stage, above the board. Tall on desktop because the
   fight is the feature; the fallback line keeps it meaningful if WebGL or the
   CDN is unavailable. */
.auc-arena-wrap { margin: 10px 0 24px; }
.auc-arena-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #C8992B; }
.auc-arena { position: relative; height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-soft);
  background: radial-gradient(70% 60% at 50% 12%, rgba(234,179,8,0.10), rgba(0,0,0,0) 62%), linear-gradient(180deg, #0C0C10 0%, #08080B 100%); }
.auc-arena canvas { display: block; width: 100%; height: 100%; }
.auc-arena-fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-dim); text-align: center; padding: 0 20px; }
.auc-arena canvas { position: relative; z-index: 2; }
.auc-arena-crown { color: #E8B84B; line-height: 0; }
.auc-arena-crown .auc-crown { width: 30px; height: 23px; }
[data-theme="light"] .auc-arena { border-color: rgba(0,0,0,0.14); }
@media (max-width: 560px) { .auc-arena { height: 300px; } }

/* THE BATTLE RING, rebuilt. The previous version put eight fighters in a box and
   let them drift into each other, which reads as chaos however it is styled.
   A ring only looks composed when the eye knows where to go, so this stages the
   fight that actually matters - the king against the closest challenger - large
   and centred, with everyone else as spectators at the rail. Two focal points,
   not eight. */
.auc-ring-wrap { position: relative; margin: 8px 0 26px; }
.auc-ring-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #C8992B; }

.auc-ring { position: relative; height: 300px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #0E0E12 0%, #0A0A0D 58%, #070709 100%);
  border: 1px solid var(--border-soft); }

/* Torchlit back wall, so the fighters read against depth rather than a flat panel. */
.auc-ring::before { content: ''; position: absolute; left: 50%; top: -60px; width: 620px; height: 320px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 55% at 50% 50%, rgba(234,179,8,0.16), rgba(234,179,8,0) 70%); }

/* The floor: an ellipse in perspective with a lit near edge. */
.auc-ring::after { content: ''; position: absolute; left: 50%; bottom: 26px; width: 520px; height: 132px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(234,179,8,0.10), rgba(234,179,8,0.03) 58%, rgba(234,179,8,0) 78%);
  border-top: 1px solid rgba(234,179,8,0.13); }

/* ---- the two duellists ---- */
.auc-duel { position: absolute; left: 0; right: 0; bottom: 74px; display: flex; align-items: flex-end; justify-content: center; gap: 128px; }
.auc-fig { position: relative; display: flex; flex-direction: column; align-items: center; width: 96px; }
.auc-fig-k { animation: aucLungeL 3.6s cubic-bezier(.4,0,.3,1) infinite; }
.auc-fig-c { animation: aucLungeR 3.6s cubic-bezier(.4,0,.3,1) infinite; }

.auc-fig-helm { width: 46px; height: 46px; margin-bottom: -6px; color: #C2C9D4; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.8)); z-index: 3; }
.auc-fig-helm svg { width: 100%; height: 100%; display: block; }
.auc-fig-shield { position: relative; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.2); background: #15151A; box-shadow: 0 6px 16px rgba(0,0,0,0.6); z-index: 2; }
.auc-fig-shield .auc-ico { width: 100% !important; height: 100% !important; border-radius: 0 !important; }
.auc-fig-axe { position: absolute; top: 34px; width: 42px; color: #97A1AF; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7)); }
.auc-fig-axe svg { width: 100%; height: auto; display: block; }
.auc-fig-k .auc-fig-axe { right: -26px; transform-origin: 30% 78%; animation: aucSwingL 3.6s cubic-bezier(.4,0,.3,1) infinite; }
.auc-fig-c .auc-fig-axe { left: -26px; transform: scaleX(-1); transform-origin: 70% 78%; animation: aucSwingR 3.6s cubic-bezier(.4,0,.3,1) infinite; }

.auc-fig-lvl { margin-top: 9px; padding: 2px 9px; border-radius: 7px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #E8E8EC; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }
.auc-fig-name { margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--text-ghost); max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-fig-k .auc-fig-lvl { color: #2A2003; background: linear-gradient(140deg,#F5C542,#C8992B); border-color: rgba(255,255,255,0.28); }
.auc-fig-k .auc-fig-helm { color: #F0D48A; }
.auc-fig-k .auc-fig-shield { border-color: #E8B84B; box-shadow: 0 0 20px rgba(234,179,8,0.4), 0 6px 16px rgba(0,0,0,0.6); }

/* The clash spark, timed to the moment the axes meet. */
.auc-clash { position: absolute; left: 50%; bottom: 118px; width: 84px; height: 84px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(245,197,66,0.55) 34%, rgba(245,197,66,0) 66%);
  animation: aucClash 3.6s ease-out infinite; }

/* ---- the crowd at the rail ---- */
.auc-crowd { position: absolute; left: 0; right: 0; top: 26px; display: flex; align-items: center; justify-content: center; gap: 16px; opacity: 0.42; }
.auc-crowd .auc-ico { width: 26px !important; height: 26px !important; border-radius: 7px !important; filter: grayscale(0.5); }

@keyframes aucLungeL {
  0%, 42%   { transform: translateX(0); }
  52%       { transform: translateX(30px); }
  60%       { transform: translateX(22px); }
  76%, 100% { transform: translateX(0); }
}
@keyframes aucLungeR {
  0%, 42%   { transform: translateX(0); }
  52%       { transform: translateX(-30px); }
  60%       { transform: translateX(-22px); }
  76%, 100% { transform: translateX(0); }
}
@keyframes aucSwingL {
  0%, 40%   { transform: rotate(16deg); }
  52%       { transform: rotate(-64deg); }
  70%, 100% { transform: rotate(16deg); }
}
@keyframes aucSwingR {
  0%, 40%   { transform: scaleX(-1) rotate(16deg); }
  52%       { transform: scaleX(-1) rotate(-64deg); }
  70%, 100% { transform: scaleX(-1) rotate(16deg); }
}
@keyframes aucClash {
  0%, 48%  { opacity: 0; transform: translateX(-50%) scale(0.4); }
  54%      { opacity: 1; transform: translateX(-50%) scale(1.05); }
  66%      { opacity: 0; transform: translateX(-50%) scale(1.5); }
  100%     { opacity: 0; transform: translateX(-50%) scale(0.4); }
}

[data-theme="light"] .auc-ring { background: linear-gradient(180deg, #16171C 0%, #101116 58%, #0B0C0F 100%); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .auc-ring-h { color: #8A6206; }

@media (max-width: 560px) {
  .auc-ring { height: 240px; }
  .auc-duel { gap: 64px; bottom: 58px; }
  .auc-fig { width: 74px; }
  .auc-fig-helm { width: 36px; height: 36px; }
  .auc-fig-shield { width: 48px; height: 48px; }
  .auc-fig-axe { width: 32px; top: 26px; }
  .auc-fig-k .auc-fig-axe { right: -20px; }
  .auc-fig-c .auc-fig-axe { left: -20px; }
  .auc-crowd { gap: 10px; top: 18px; }
  .auc-crowd .auc-ico { width: 20px !important; height: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .auc-fig-k, .auc-fig-c, .auc-fig-axe, .auc-clash { animation: none; }
  .auc-clash { opacity: 0; }
}

/* THE BATTLEFIELD. A vertical advance on the throne, drawn in perspective:
   the ground widens as it comes toward you, torchlight falls from the throne,
   and the far end sinks into fog. Vertical distance is the dollar gap to the
   leader, so the shape of the field IS the state of the race - a tight fight
   bunches at the top, a runaway leader strings everyone out. */
.auc-field { position: relative; display: flex; flex-direction: column; align-items: center; margin: 4px 0 30px; padding: 6px 0 8px; }

/* The ground: a trapezoid receding to the throne, so the field has depth
   instead of being a list with a line down it. */
.auc-field::before { content: none; }
/* Torchlight from the throne, falling down the field. */
.auc-field::after { content: ''; position: absolute; top: -20px; left: 50%; width: 320px; height: 170px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 60% at 50% 20%, rgba(234,179,8,0.13), rgba(234,179,8,0) 70%); }

.auc-throne { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 10px; }
.auc-throne-crown { color: #E8B84B; line-height: 0; filter: drop-shadow(0 0 14px rgba(234,179,8,0.55)); animation: aucTorch 3.6s ease-in-out infinite; }
.auc-throne-crown .auc-crown { width: 34px; height: 26px; }
.auc-throne-l { font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #E8B84B; }
.auc-throne-line { width: 210px; height: 1px; background: linear-gradient(90deg, rgba(234,179,8,0), rgba(234,179,8,0.7), rgba(234,179,8,0)); }
@keyframes aucTorch {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(234,179,8,0.42)); }
  50%      { filter: drop-shadow(0 0 22px rgba(234,179,8,0.72)); }
}

.auc-fighter { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; text-decoration: none; padding: 8px 16px 8px 9px; border-radius: 14px; transition: background 0.15s ease; }
.auc-fighter:hover { background: rgba(255,255,255,0.045); }

/* Each warrior carries a round shield with their mark on the boss. */
.auc-f-shield { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 45deg, rgba(0,0,0,0.22) 45deg 90deg, rgba(255,255,255,0.05) 90deg 135deg, rgba(0,0,0,0.22) 135deg 180deg, rgba(255,255,255,0.05) 180deg 225deg, rgba(0,0,0,0.22) 225deg 270deg, rgba(255,255,255,0.05) 270deg 315deg, rgba(0,0,0,0.22) 315deg 360deg), var(--bg-elevated);
  border: 1.5px solid rgba(255,255,255,0.16); box-shadow: inset 0 0 0 4px rgba(0,0,0,0.26), 0 4px 12px rgba(0,0,0,0.4); }
.auc-helm { position: absolute; left: -26px; top: -30px; width: 56px; height: 56px; transform: rotate(-22deg); filter: drop-shadow(0 3px 5px rgba(0,0,0,0.6)); pointer-events: none; z-index: 3; }
.auc-f-shield .auc-ico { width: 24px !important; height: 24px !important; border-radius: 6px !important; }


.auc-fighter { border-bottom: 1px solid transparent; }
.auc-fighter:not(:last-child) { border-bottom-color: rgba(255,255,255,0.045); }
.auc-fighter.is-f1 { background: linear-gradient(90deg, rgba(234,179,8,0.07), rgba(234,179,8,0) 62%); border-radius: 12px; }
.auc-fighter { padding: 10px 16px 10px 10px; }
.auc-f-rank { min-width: 20px; }
.auc-f-amt { letter-spacing: -0.02em; }
.auc-f-gap { font-variant-numeric: tabular-nums; }
/* Shields in the ladder match the ring: painted planks, metal rim. */
.auc-f-shield { background: transparent; border-radius: 50%; border: 2px solid var(--border); box-shadow: none; }
.auc-fighter.is-f1 .auc-f-shield { border-color: rgba(234,179,8,0.7); box-shadow: inset 0 0 0 3px rgba(0,0,0,0.22), 0 0 14px rgba(234,179,8,0.25); }
.auc-fighter.is-f2 .auc-f-shield { border-color: rgba(203,213,225,0.5); }
.auc-fighter.is-f3 .auc-f-shield { border-color: rgba(217,160,106,0.5); }
/* Gamified progress: how close this bid is to the leader's, as a bar. A rank
   number is a fact; a bar you can watch yourself fill is a goal. The leader's
   own bar reads full and gold, which is the thing everyone else is chasing. */
.auc-f-body { display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.auc-f-prog { display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; }
.auc-f-progfill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(148,163,184,0.5), rgba(203,213,225,0.85)); transition: width 0.4s ease; }
.auc-fighter.is-f1 .auc-f-progfill { background: linear-gradient(90deg, #C8992B, #F5C542); box-shadow: 0 0 8px rgba(234,179,8,0.45); }
.auc-fighter.is-f2 .auc-f-progfill { background: linear-gradient(90deg, #7C8798, #CBD5E1); }
.auc-fighter.is-f3 .auc-f-progfill { background: linear-gradient(90deg, #8A5A34, #D9A06A); }
@media (max-width: 560px) { .auc-f-body { min-width: 132px; } }
.auc-f-meta { display: flex; align-items: baseline; gap: 11px; }
.auc-f-rank { font-size: 11px; font-weight: 800; color: var(--text-ghost); font-variant-numeric: tabular-nums; }
.auc-f-name { font-size: 15px; font-weight: 700; color: var(--text-2); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-fighter:hover .auc-f-name { color: #10B981; }
.auc-f-amt { font-size: 18px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.auc-f-gap { font-size: 11px; font-weight: 600; color: var(--text-ghost); }

/* The leader stands in the torchlight: gold rim, gold numbers, breathing glow. */
.auc-fighter.is-f1 .auc-f-shield { border-color: rgba(234,179,8,0.8); box-shadow: inset 0 0 0 4px rgba(0,0,0,0.26), 0 0 22px rgba(234,179,8,0.34); }
.auc-fighter.is-f1 .auc-f-amt, .auc-fighter.is-f1 .auc-f-rank, .auc-fighter.is-f1 .auc-f-gap { color: #E8B84B; }
.auc-fighter.is-f1 .auc-f-name { font-size: 17px; color: var(--heading); }
.auc-fighter.is-f1 { animation: aucHold 4.4s ease-in-out infinite; }
@keyframes aucHold {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(234,179,8,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(234,179,8,0.3)); }
}
.auc-fighter.is-f2 .auc-f-shield { border-color: rgba(203,213,225,0.6); }
.auc-fighter.is-f2 .auc-f-amt { color: #CBD5E1; }
.auc-fighter.is-f3 .auc-f-shield { border-color: rgba(217,160,106,0.6); }
.auc-fighter.is-f3 .auc-f-amt { color: #D9A06A; }

@media (max-width: 560px) {
  .auc-field::before { width: 330px; }
  .auc-f-shield { width: 42px; height: 42px; }
  .auc-f-shield .auc-ico { width: 20px !important; height: 20px !important; }
  .auc-f-name { font-size: 13px; max-width: 112px; }
  .auc-fighter.is-f1 .auc-f-name { font-size: 14px; }
  .auc-f-amt { font-size: 15px; }
  .auc-f-meta { gap: 8px; }
  .auc-f-gap { font-size: 10px; }
  .auc-throne-line { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .auc-fighter.is-f1, .auc-throne-crown { animation: none; }
}
/* Viking marks. Crossed axes flank the eyebrow, and the leader's badge takes a
   shield silhouette rather than a rounded square. Drawn, never emoji. */
.auc-axes { width: 20px; height: 14px; display: inline-block; vertical-align: -2px; margin: 0 7px; color: #059669; opacity: 0.8; }
.auc-pcard.is-r1 .auc-badge { border-radius: 11px 11px 15px 15px / 11px 11px 22px 22px; }

/* The throne breathes like firelight. Slower and weaker than the sheen so the
   two do not fight. */
.auc-pcard.is-r1 .auc-ico { animation: aucEmber 4.2s ease-in-out infinite; }
@keyframes aucEmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0); }
  50%      { box-shadow: 0 0 22px 2px rgba(234,179,8,0.28); }
}

/* Dethrone flash: fires when the poll sees a new king, just before the reload.
   Losing the throne should feel like something, not like a page refresh. */
.auc-pcard.is-dethroned { animation: aucDethrone 1.4s ease-out forwards; }
@keyframes aucDethrone {
  0%   { transform: translateY(0); border-color: rgba(234,179,8,0.55); }
  18%  { transform: translateY(-4px); border-color: rgba(239,68,68,0.9); box-shadow: 0 0 34px rgba(239,68,68,0.42); }
  40%  { transform: translateY(2px) rotate(-0.4deg); }
  60%  { transform: translateY(0) rotate(0.3deg); }
  100% { transform: translateY(0); opacity: 0.55; border-color: rgba(239,68,68,0.5); }
}

/* Battle log rows arrive rather than appear. Staggered so the log reads top
   down like a feed catching up. */
.auc-battle-row { animation: aucSlideIn 0.42s ease-out both; }
.auc-battle-row:nth-child(1) { animation-delay: 0.02s; }
.auc-battle-row:nth-child(2) { animation-delay: 0.08s; }
.auc-battle-row:nth-child(3) { animation-delay: 0.14s; }
.auc-battle-row:nth-child(4) { animation-delay: 0.20s; }
.auc-battle-row:nth-child(5) { animation-delay: 0.26s; }
.auc-battle-row:nth-child(6) { animation-delay: 0.32s; }
@keyframes aucSlideIn {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Battle log: the same bids the board already shows, told as conquests. The
   sword marks a seizure; challengers get a dimmed one, because a bid that did
   not take the throne should not look like it did. */
.auc-battle { margin: 28px 0 0; text-align: left; }
.auc-battle-h { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: 10px; }
.auc-battle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.auc-battle-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 0.5px solid var(--border-soft); font-size: 13.5px; color: var(--text-faint); }
.auc-battle-row:last-child { border-bottom: 0; }
.auc-battle-row strong { color: var(--text-2); font-weight: 700; }
.auc-sword { width: 15px; height: 15px; flex-shrink: 0; color: #059669; }
.auc-battle-row.is-challenge .auc-sword { color: var(--text-ghost); }
.auc-battle-txt { flex: 1; min-width: 0; line-height: 1.45; }
.auc-battle-when { flex-shrink: 0; font-size: 12px; color: var(--text-ghost); font-variant-numeric: tabular-nums; }

/* Live strip: what just happened, so the board never reads as abandoned. */
.auc-px-wrap { margin: 16px 0 22px; }
.auc-px-h { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; }
.auc-px-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 260px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #0d0a12; }
.auc-px-wrap.has-log .auc-px-stage { border-radius: 14px 14px 0 0; border-bottom: 0; }
.auc-px-snd { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: rgba(14,10,6,0.55); color: #EDE4D2; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.auc-px-snd svg { width: 15px; height: 15px; display: block; }
.auc-px-snd:hover { background: rgba(14,10,6,0.78); }
    .auc-zoom { position: absolute; right: 10px; top: 46px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
    .auc-zoom-b { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: rgba(14,10,6,0.62); color: #EDE4D2; font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); touch-action: none; user-select: none; transition: background 0.15s; }
    .auc-zoom-b:hover { background: rgba(14,10,6,0.85); }
    .auc-zoom-b:active { background: rgba(245,197,66,0.85); color: #1a1206; }
.auc-px-snd.is-on { background: rgba(245,197,66,0.9); color: #1a1206; border-color: rgba(245,197,66,0.9); }
.auc-px-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 62%, rgba(26,12,4,0.10) 88%, rgba(18,8,2,0.20) 100%); }
.auc-px { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.auc-px-names { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
    /* The name pills are the entry point to first-person. Games put the
       affordance on the character itself rather than in a separate menu, so
       the pill is the button - it just needs to accept clicks again. */
    /* Deliberately NOT interactive. These sit over the canvas, so making
       them clickable meant any drag starting on a warrior was swallowed by
       the label and never reached the camera. Selection is done by
       raycasting the actual 3D body instead - which is what games do. */
    .auc-px-n { pointer-events: none; }
    .auc-pov-exit { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(245,197,66,0.55); background: rgba(20,14,6,0.86); color: #F5C542; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .auc-pov-exit:hover { background: rgba(32,22,8,0.95); }
    .auc-pov-tag { position: absolute; left: 12px; top: 46px; z-index: 6; padding: 5px 10px; border-radius: 7px; background: rgba(20,14,6,0.8); border: 1px solid rgba(245,197,66,0.4); color: #F5C542; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; pointer-events: none; }
    .auc-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; pointer-events: none; background: linear-gradient(180deg, rgba(8,6,10,0.78) 0%, rgba(8,6,10,0.34) 62%, rgba(8,6,10,0) 100%); }
    .auc-hud-l, .auc-hud-r { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
    .auc-hud-crown { display: inline-flex; width: 15px; height: 15px; color: #F5C542; flex: 0 0 auto; }
    .auc-hud-crown svg { width: 100%; height: 100%; display: block; }
    .auc-hud-who { font-size: 12px; font-weight: 800; color: #F2ECE0; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
    .auc-hud-amt { font-size: 12px; font-weight: 900; color: #F5C542; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
    .auc-hud-k { font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(240,232,216,0.62); }
    .auc-hud-next { font-size: 12px; font-weight: 900; color: #3ddc84; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
    @media (max-width: 560px) { .auc-hud { padding: 7px 9px; } .auc-hud-who { max-width: 92px; } }
.auc-px-n { position: absolute; top: 0; left: 0; padding-bottom: 5px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; border-radius: 999px; background: rgba(10,8,14,0.62); border: 1px solid rgba(255,255,255,0.11); font-size: 10px; font-weight: 700; line-height: 1; color: #E9ECF2; white-space: nowrap; text-shadow: 0 1px 2px #000; transition: opacity 0.3s; }
.auc-px-n.is-k { background: rgba(42,28,4,0.78); border-color: rgba(245,197,66,0.5); box-shadow: 0 0 12px rgba(245,197,66,0.26); }
    .auc-px-hpline { position: absolute; left: 3px; right: 3px; bottom: 1px; height: 1.5px; border-radius: 1px; background: rgba(255,255,255,0.16); overflow: hidden; }
    .auc-px-hpline::after { content: ""; position: absolute; inset: 0; width: var(--hp, 100%); border-radius: 1px; background: var(--hpc, #3ddc84); transition: width 0.18s linear, background 0.3s; }
     }
.auc-px-amt { font-variant-numeric: tabular-nums; font-weight: 800; color: #F5C542; }
.auc-px-hp { flex: 0 0 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.15); overflow: hidden; margin-top: 2px; }
.auc-px-hp i { display: block; height: 100%; width: 100%; border-radius: 2px; background: #3ddc84; transition: width 0.18s linear, background 0.3s; }
/* Rank badges sit over a bright arena, so they need their own contrast:
   a dark rim plus a drop shadow, or they vanish against the sand. */
.auc-px-rank { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; flex: 0 0 auto; border-radius: 50%; font-size: 11.5px; font-weight: 900; line-height: 1; border: 1.5px solid rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.auc-px-rank svg { width: 23px; height: 23px; display: block; }
/* the crown is a silhouette, not a disc: no rim, but a hard shadow and a
   warm glow so it reads as gold at any distance */
.auc-px-rank.r1 { width: 23px; height: 23px; border: 0; border-radius: 0; background: none; box-shadow: none; color: #FFD34A; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.85)) drop-shadow(0 0 6px rgba(255,196,60,0.85)); }
.auc-px-rank.r2 { background: linear-gradient(160deg, #f4f6fa, #b4bac6); color: #1a1d22; }
.auc-px-rank.r3 { background: linear-gradient(160deg, #e8ab74, #a96832); color: #2a1607; }
.auc-px-rank.rn { width: 17px; height: 17px; font-size: 10px; background: rgba(16,16,22,0.8); color: #eef1f5; border-color: rgba(255,255,255,0.28); }
.auc-px-ico { width: 12px; height: 12px; border-radius: 3px; object-fit: cover; display: block; flex: 0 0 auto; background: #222; }
.auc-px-n.is-k { color: #F5C542; }
.auc-px-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; text-align: center; font-size: 13px; color: var(--text-dim); }
.auc-px-crown { display: inline-flex; color: #F5C542; }
@media (max-width: 640px) { .auc-px-n { font-size: 9px; } .auc-px-h { font-size: 10px; } }
.auc-zoom-rc svg { width: 15px; height: 15px; display: block; }
.auc-zoom-rc { display: inline-flex; align-items: center; justify-content: center; }
/* Controls step back during introductions: they do nothing while the camera
   is locked, so showing them live would just invite a dead tap. */
.auc-px-stage.is-introducing .auc-zoom { opacity: 0.25; pointer-events: none; transition: opacity 0.3s; }
.auc-zoom { transition: opacity 0.3s; }
/* Announcer. Deliberately SMALL: the warrior is the subject, the card is a
   broadcast lower-third and nothing more. The first version was a 380px
   stacked block with a 27px name that covered the fighter it was meant to
   introduce. One slim row now, minimal chrome, no heavy panel. */
/* Bottom-LEFT, which is the only empty corner and where a broadcast
   lower-third belongs anyway. Centred, it overlapped the SOUND OFF button:
   that control occupies bottom 10-34px and the card sat at 12-45px, so on a
   narrow stage they collided. Top-left holds the crown HUD, top-right the
   next-bid, right edge the zoom buttons, bottom-right the sound toggle. */
.auc-ann { position: absolute; left: 14px; bottom: 14px; z-index: 6;
  max-width: calc(100% - 120px);
  pointer-events: none; animation: aucAnnIn 0.36s cubic-bezier(.2,.9,.25,1) both; }
@keyframes aucAnnIn { from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); } }
.auc-ann-card { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 7px;
  border-radius: 999px; background: rgba(10,8,14,0.72);
  border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); white-space: nowrap; }
.auc-ann-seat { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 10.5px; font-weight: 900; color: #0b0a0f; background: #F5C542; flex: 0 0 auto; }
.auc-ann-logo { width: 21px; height: 21px; border-radius: 6px; object-fit: cover; flex: 0 0 auto;
  background: rgba(255,255,255,0.08); }
.auc-ann-logo.is-blank { display: block; }
.auc-ann-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: #fff;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.auc-ann-bid { font-size: 12px; font-weight: 800; color: #F5C542; font-variant-numeric: tabular-nums; }
.auc-ann-def { font-size: 8.5px; font-weight: 900; letter-spacing: 0.12em; color: #0b0a0f;
  background: #F5C542; border-radius: 3px; padding: 2px 5px; }
.auc-ann-big { font-size: 46px; font-weight: 900; letter-spacing: 0.16em; color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.95), 0 0 48px rgba(245,197,66,0.4); }
.auc-ann.is-fight { left: 50%; bottom: 46%; transform: translateX(-50%); max-width: none;
  animation: aucFightIn 0.36s cubic-bezier(.2,.9,.25,1) both; }
@keyframes aucFightIn { from { opacity: 0; transform: translateX(-50%) translateY(9px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.auc-ann-k { font-size: 9.5px; font-weight: 900; letter-spacing: 0.3em; color: #F5C542;
  text-align: center; margin-bottom: 6px; text-shadow: 0 2px 10px rgba(0,0,0,0.9); }
.auc-ann.is-champ .auc-ann-card { border-color: rgba(245,197,66,0.5);
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 20px rgba(245,197,66,0.25); }
/* Everything else gets out of the way while a fighter is being announced. */
.auc-px-stage.is-introducing .auc-px-names { opacity: 0; }
.auc-px-stage.is-introducing::before { content: ""; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; background: radial-gradient(ellipse at 50% 44%, rgba(0,0,0,0) 26%, rgba(0,0,0,0.42) 74%, rgba(0,0,0,0.66) 100%); }
.auc-px-names { transition: opacity 0.3s; }
@media (max-width: 640px) {
  .auc-ann { left: 10px; bottom: 10px; max-width: calc(100% - 96px); }
  .auc-ann-name { font-size: 13px; max-width: 120px; }
  .auc-ann-big { font-size: 30px; }
}
/* Combat log hidden: not useful at this stage. The markup and the flog()
   calls stay in place so it is one CSS line to bring back. */
.auc-fl { display: none !important; }
/* Combat log: bolted to the bottom of the ring, sharing its border and dark
   field so arena + log read as ONE object rather than a list dumped beneath a
   picture. Height is HARD-CAPPED and scrolls -- the ring needs the vertical
   space more than the history does. */
.auc-fl { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #0d0a12 0%, #100c16 100%); padding: 8px 13px 9px; }
.auc-fl-h { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.19em; text-transform: uppercase; color: rgba(237,228,210,0.32); margin: 0 0 5px; }
.auc-fl-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.13), transparent); }
/* 3 rows visible, the rest scrolls. 66px is the ceiling on purpose. */
.auc-fl-list { list-style: none; margin: 0; padding: 0; height: 66px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent;
  /* The feed auto-scrolls, so the top row is usually clipped mid-line. Fading
     it out makes that read as a stream rather than a broken box. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 100%); }
.auc-fl-list::-webkit-scrollbar { width: 4px; }
.auc-fl-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 3px; }
.auc-fl-row { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1;
  color: rgba(237,228,210,0.42); padding: 3.5px 0; animation: aucFlIn 0.22s ease-out both; }
@keyframes aucFlIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.auc-fl-w { font-weight: 700; color: rgba(237,228,210,0.86); }
.auc-fl-l { color: rgba(237,228,210,0.5); }
.auc-fl-verb { color: rgba(237,228,210,0.3); }
.auc-fl-dmg { margin-left: auto; color: #E4574C; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11.5px; }
.auc-fl-tag { margin-left: auto; font-size: 8.5px; font-weight: 900; letter-spacing: 0.11em;
  color: #0b0a0f; background: #E4574C; border-radius: 3px; padding: 2px 5px; line-height: 1; }
.auc-fl-row.is-down .auc-fl-w { color: #E4574C; }
.auc-fl-row.is-king .auc-fl-w { color: #F5C542; }
.auc-fl-row.is-block, .auc-fl-row.is-dodge { color: rgba(237,228,210,0.3); }
@media (max-width: 640px) {
  .auc-fl { padding: 7px 11px 8px; }
  .auc-fl-list { height: 54px; }
  .auc-fl-row { font-size: 11px; gap: 5px; }
}
}
.auc-xbadge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 4px; border-radius: 3px; background: #0f1419; color: #fff; font-size: 9px; font-weight: 800; vertical-align: -2px; }
[data-theme="dark"] .auc-xbadge { background: #e7e9ea; color: #0f1419; }
.auc-pby { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); }
.auc-x { color: var(--text-dim); text-decoration: none; font-weight: 600; }
.auc-x:hover { color: var(--heading); text-decoration: underline; }
.auc-ph { position: absolute; left: 14px; right: 10px; display: flex; align-items: center; gap: 5px; font-size: 14.5px; color: var(--text-ghost, #9AA0AC); pointer-events: none; white-space: nowrap; overflow: hidden; }
.auc-ph-i { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; }
.auc-ph-i svg { width: 15px; height: 15px; display: block; }
.auc-ph em { font-style: normal; opacity: 0.55; margin: 0; }
.auc-inwrap.is-x .auc-ph, .auc-inwrap.has-url .auc-ph { display: none; }
.auc-inwrap { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 296px; }
.auc-inico { position: absolute; left: 13px; display: none; align-items: center; height: 17px; color: var(--text-dim); pointer-events: none; }
.auc-inico svg { width: 17px; height: 17px; display: block; }
.auc-inwrap .auc-ic-x { display: none; }
.auc-inwrap.is-x .auc-ic-web { display: none; }
.auc-inwrap.is-x .auc-ic-x { display: block; }
.auc-inwrap.is-x .auc-ic-x { display: block; }
.auc-inwrap.is-x .auc-inico { color: var(--heading); }
.auc-inwrap .auc-in { width: 100%; padding-left: 15px; }
.auc-inwrap.is-x .auc-inico, .auc-inwrap.has-url .auc-inico { display: inline-flex; }
.auc-inwrap.is-x .auc-in, .auc-inwrap.has-url .auc-in { padding-left: 38px; }
.auc-match-in.is-x .auc-match-ico img { border-radius: 50%; }
.auc-match-in.is-miss { color: #b4442e; }
.auc-hint { flex: 0 0 auto; width: 100%; margin: 7px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.auc-hint em { font-style: normal; opacity: 0.75; }
.auc-hint strong { color: var(--heading); font-weight: 700; }
.auc-ticker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; margin: 30px 0 18px; border: 0.5px solid var(--border-soft); border-radius: 999px; background: var(--bg-elevated); font-size: 12.5px; color: var(--text-dim); }
.auc-ticker strong { color: var(--heading); font-weight: 700; }
.auc-tdot { width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); animation: aucPulse 2.2s ease-out infinite; flex-shrink: 0; }
@keyframes aucPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.auc-pcard { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.auc-pcard:hover { transform: translateY(-2px); }
.auc-row { transition: background 0.14s ease; }
.auc-row:hover { background: var(--bg-elevated); }

@media (prefers-reduced-motion: reduce) {
  .auc-sheen::before, .auc-pcard.is-r1, .auc-tdot,
  .auc-pcard.is-r1 .auc-ico, .auc-battle-row { animation: none; }
  .auc-pcard.is-dethroned { animation: none; opacity: 0.6; }
  .auc-pcard:hover { transform: none; }
}
.auc-pbody { flex: 1; min-width: 0; }
.auc-pname { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.025em; color: var(--heading); line-height: 1.25; }
a.auc-pname:hover { color: #059669; }
.auc-pdesc { font-size: 13.5px; line-height: 1.5; color: var(--text-faint); margin: 5px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auc-pmeta { font-size: 11.5px; color: var(--text-ghost); margin: 6px 0 0; }
.auc-pamt { flex-shrink: 0; align-self: flex-start; font-size: 24px; font-weight: 800; letter-spacing: -0.035em; color: #059669; font-variant-numeric: tabular-nums; line-height: 1.2; }
/* Empty state: an invitation, not a grey slab. A dashed outline over the page
   background reads as "this slot is waiting for you"; a filled panel reads as a
   broken component. */
.auc-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 28px 0; padding: 32px 20px; border: 1px dashed var(--border); border-radius: 14px; background: transparent; }
.auc-empty-crown { display: block; color: rgba(234,179,8,0.65); margin-bottom: 8px; }
.auc-empty-crown .auc-crown { width: 30px; height: 23px; color: inherit; }
.auc-empty-h { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; color: var(--text-2); margin: 0; }
.auc-empty-s { font-size: 13.5px; color: var(--text-ghost); margin: 4px 0 0; }

/* --- divider between the podium and the rest --- */
/* Elder Futhark: fehu (wealth) and tiwaz (victory). Sized down and dimmed so
   they read as ornament on the label rather than competing with it. */
.auc-rune { font-style: normal; font-size: 14px; font-weight: 400; color: #D4A73A; opacity: 0.9; margin: 0 10px; vertical-align: 0; line-height: 1; }
/* The field and the war band are one block; the divider owns the spacing so
   they cannot drift apart. */
.auc-field + .auc-div, .auc-field ~ .auc-div { margin-top: 6px; }
/* Section label above the rest of the board.
   The previous version was a centred pill floating on a gold rule. Getting a
   pill to sit cleanly on a line means the pill's background has to match the
   surface exactly, and any mismatch shows as the line bleeding around its edges,
   which is what made it look defective. Removed rather than patched: a plain
   left-aligned label over a full-width hairline has nothing to misalign, and
   reads as a section heading instead of an ornament. */
.auc-div {
  margin: 34px 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.auc-div span {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-ghost);
}

/* --- the one CTA --- */
.auc-btn { font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #fff; background: #059669; border: 0; border-radius: 12px; padding: 13px 26px; cursor: pointer; transition: background 0.16s ease, transform 0.12s ease; }
.auc-btn:hover { background: #047857; }
.auc-btn:active { transform: translateY(1px); }
.auc-btn[disabled] { opacity: 0.45; cursor: default; }
/* What the money actually buys, stated plainly. The strongest line here is the
   real one: paid listings write approved=1, while free submissions sit in a
   review queue. That is a genuine benefit, so it does not need a fake deadline
   propping it up. Ticks are drawn in CSS rather than emoji, per the visual rules. */
/* Spacing here was tuned when these were three short lines. They now wrap to two
   lines each on a phone, so a 7px gap made the whole block read as one grey
   paragraph. The gap has to beat the line-height to keep each perk a separate
   item, and the block needs real air above it or it collides with the price. */
.auc-perks { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; text-align: left; }
/* The tick is a flex child and the copy is now its own wrapper span, so wrapped
   lines align under the first character of the text instead of under the tick.
   The tier label must never break across lines -- "$8 and" / "up:" on two rows
   was the alignment bug -- so it is nowrap. */
.auc-perk { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-faint); }
/* One icon per row, all in the same slot.
   This is the version that keeps the uniformity Linear/Vercel/Raycast rely on
   while still saying something: every row has exactly ONE icon, at the SAME
   size, in the SAME position, with the SAME colour and tile, so the left edge
   stays a single rhythm. Only the glyph changes. Uniform in form, distinct in
   meaning, which is different from my earlier attempts where the rows also
   differed in size, colour, indent and container. */
.auc-pi {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  background: rgba(16,185,129,0.13);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.22);
  color: #34D399;
}
.auc-pi svg { width: 12.5px; height: 12.5px; display: block; }
[data-theme="light"] .auc-pi { background: rgba(5,150,105,0.10); box-shadow: inset 0 0 0 1px rgba(5,150,105,0.20); color: #047857; }

/* Group label, the Linear pattern.
   Repeating a "$8+" tag on both paid rows stated the same fact twice, two lines
   apart, and made those rows look different from their neighbours for no reason.
   A tier heading ABOVE a uniform list says it once, and every row underneath
   stays identical: same icon slot, same size, same colour, one left edge. That
   is exactly how Linear, Vercel and Raycast separate what a paid tier adds. */
.auc-perks-label {
  margin: 8px 0 0; padding-top: 13px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: #34D399; line-height: 1.4;
}
[data-theme="light"] .auc-perks-label { color: #047857; }

/* Keyword emphasis in body copy.
   How professional sites actually do this: contrast and weight, never a box or a
   background. The row copy sits at --text-faint, so lifting the key phrase to
   full-strength text at 700 makes it the first thing the eye lands on with no
   chrome at all. Backgrounds and pills were what made the earlier attempts look
   cheap, and accent colour is already carrying the icons and the tier label, so
   reusing it here would flatten the hierarchy rather than sharpen it.
   Scoped as .auc-perk .auc-key, not bare .auc-key: the existing
   .auc-perk b rule sets color to --text-dim and has higher specificity, so it
   was silently winning and rendering the "highlight" at rgb(92,92,102) against
   body text at rgb(110,110,120). Effectively invisible.
   (No backticks in this comment: the whole stylesheet lives inside a JS template
   literal, so a stray backtick terminates it and the build fails.) */
.auc-perk .auc-key { color: var(--text-pure); font-weight: 700; white-space: nowrap; }

/* Subtle shine ON the letters, not behind them.
   The earlier shine attempt needed inline-block + overflow:hidden to clip a
   sweeping pseudo-element, which is what wrecked the line box. background-clip:
   text paints the gradient THROUGH the glyphs instead, so an inline element
   stays inline: no padding, no box, zero layout effect.
   Guarded by @supports and applied on top of the solid colour above, so if the
   clip is unsupported the text simply stays white rather than turning invisible
   (text-fill-color: transparent with no working gradient = an empty line). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .auc-perk .auc-key {
      background-image: linear-gradient(100deg,
        var(--text-pure) 0%, var(--text-pure) 42%,
        #6EE7B7 50%,
        var(--text-pure) 58%, var(--text-pure) 100%);
      background-size: 260% 100%;
      background-position: 130% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: aucKeyShine 6s ease-in-out infinite;
    }
  }
}
/* Long pause, quick sweep: a shine that runs constantly reads as a broken
   gradient, one that passes every few seconds reads as a highlight. */
@keyframes aucKeyShine {
  0%, 72% { background-position: 130% 0; }
  92%, 100% { background-position: -30% 0; }
}

.auc-perk > span:last-child { flex: 1; min-width: 0; }
.auc-perk b { white-space: nowrap; color: var(--text-dim); font-weight: 700; }
.auc-tick { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: rgba(5,150,105,0.14); position: relative; }
.auc-tick::after { content: ''; position: absolute; left: 5px; top: 3px; width: 3.5px; height: 7px; border: solid #059669; border-width: 0 1.7px 1.7px 0; transform: rotate(42deg); }
/* The free route is a different offer, not a fourth perk, so it gets a rule and
   real space above it instead of sitting flush under the tick list. */
/* text-align:left, because the hero centres everything and this line sat centred
   directly under a left-aligned tick list, which is what read as messy. */
.auc-note { font-size: 12.5px; line-height: 1.55; color: var(--text-ghost); margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-soft); text-align: left; }

/* The two perks worth paying for. A tick list flattens everything to the same
   weight, so "dofollow backlink" and "permanent" read no louder than "no review
   queue". These get a marker-pen highlight and a slow shine so the eye lands on
   them first. <mark> rather than a styled span, because that is what the element
   is for and it survives with CSS off. */
/* Highlight that does NOT touch layout.
   The first attempt used display:inline-block with padding and a border, which
   turns a mid-sentence phrase into a box: it inflates the line box, forces its
   own wrap, and leaves the surrounding lines at different heights. That is what
   made the perk list look scattered.
   This is a marker-pen stroke instead: a background gradient that starts partway
   down the line, painted behind the text. display stays inline, there is no
   padding, no border and no shadow, so the text flows exactly as if the
   highlight were not there. */
/* The two things you actually buy, stacked.
   Running them inline meant "instant VibeKing listing" wrapped across two lines
   on a phone, which is the worst possible place to break a value proposition.
   One per row, each on a single line, numbered. A buyer sees two items, not a
   sentence to parse. nowrap is the point of the whole block, so the type steps
   down a little on very narrow screens rather than breaking. */
/* The two things you actually buy, as an "included" panel.
   Loose numbered rows on the page background read as debug output. Wrapping them
   in a faint accent-tinted card with a hairline border and a left rail makes it
   a deliberate offer block, the same shape a pricing page uses for "what's in
   this tier". Accent tint rather than grey, per the house rule against grey
   boxes.
   nowrap on each row is load-bearing: it is what stops "Instant VibeKing
   listing" splitting across two lines on a phone. */
/* Two perk cards rather than one tinted box with rows in it.
   Each perk gets its own surface, its own icon and a line of supporting copy, so
   the block reads as two things you are buying instead of a styled list. The
   titles stay nowrap (that is what keeps "Instant VibeKing listing" on one line
   on a phone); the supporting line is allowed to wrap because it is prose. */
/* The two paid perks, as part of the list rather than boxes dropped into it.
   The card version worked on its own but read as bolted on: the surrounding
   perks are flat text with a small tick, and then two bordered, shadowed,
   tinted panels interrupted the rhythm. Chrome removed entirely. What carries
   the emphasis now is the icon and the two-line hierarchy, not a container, so
   they sit in the same visual language as the lines above and below while still
   being obviously the things you are buying.
   Indented one step past the parent tick so they read as belonging to it. */

.auc-hl {
  display: inline;
  padding: 0; margin: 0; border: 0; box-shadow: none; border-radius: 0;
  /* background-COLOR must be reset explicitly. <mark> ships with a bright yellow
     background in every UA stylesheet, and setting only background-image leaves
     that yellow painted underneath, which is exactly what it looked like. */
  background-color: transparent;
  /* A felt-tip block behind the words looked cheap. This is the restrained
     version: the phrase takes the accent colour and a weight bump, and sits on a
     soft 3px underline that fades at both ends. The band starts at 88% so it
     reads as a rule under the text rather than paint over it, and because it is
     a background there is still zero effect on the line box. */
  background-image:
    linear-gradient(90deg, rgba(16,185,129,0) 0%, rgba(16,185,129,0.55) 12%, rgba(16,185,129,0.55) 88%, rgba(16,185,129,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  color: #34D399; font-weight: 700;
  text-shadow: 0 0 18px rgba(16,185,129,0.28);
}
[data-theme="light"] .auc-hl {
  color: #047857;
  text-shadow: none;
  background-image:
    linear-gradient(90deg, rgba(5,150,105,0) 0%, rgba(5,150,105,0.45) 12%, rgba(5,150,105,0.45) 88%, rgba(5,150,105,0) 100%);
}
.auc-note a { color: #10B981; font-weight: 600; }
.auc-paid { font-size: 13px; font-weight: 600; color: #059669; background: rgba(5,150,105,0.1); border: 0.5px solid rgba(5,150,105,0.32); border-radius: 10px; padding: 10px 13px; margin: 14px 0 0; }

/* Context strip under the board. Deliberately calm: no ambient glow, no gold,
   nothing competing with the auction above it. Its job is to answer "so is this
   whole site just pay-to-rank" for someone who has already scrolled past the
   throne, and to hand them the two free doors (directory, submit). */
.auc-more { max-width: 980px; margin: 64px auto 0; padding: 0 20px; text-align: left; }
.auc-more h2 { font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--text-pure); margin: 0 0 10px; }
.auc-more > p { font-size: 14.5px; line-height: 1.65; color: var(--text-faint); margin: 0 0 22px; max-width: 68ch; }
.auc-more > p b { color: var(--text-pure); font-weight: 700; }
.auc-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.auc-more-card { display: block; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); text-decoration: none; transition: border-color .15s, transform .15s; }
.auc-more-card:hover { border-color: rgba(5,150,105,0.5); transform: translateY(-2px); }
.auc-more-card h3 { font-size: 15px; font-weight: 700; color: var(--text-pure); margin: 0 0 6px; }
.auc-more-card p { font-size: 13px; line-height: 1.55; color: var(--text-faint); margin: 0 0 12px; }
.auc-more-go { font-size: 12.5px; font-weight: 600; color: #10B981; }
@media (max-width: 760px) { .auc-more-grid { grid-template-columns: 1fr; } .auc-more { margin-top: 44px; } }

/* --- the bid form: ONE url field, ONE button, ONE price --- */
.auc-form { margin: 28px 0 0; max-width: none; text-align: left; }
.auc-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.auc-inline > .auc-inwrap { order: 1; }
.auc-inline > .auc-amt-wrap { order: 2; }
.auc-inline > .auc-btn { order: 3; }
.auc-inline > .auc-match { order: 4; }
.auc-in { flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px; color: var(--text-pure); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; }
.auc-in::placeholder { color: var(--text-ghost); }
.auc-in:focus { outline: none; border-color: rgba(5,150,105,0.5); }
.auc-amt-wrap { position: relative; display: flex; align-items: center; flex: 0 0 152px; }
.auc-amt-cur { position: absolute; left: 13px; font-size: 14.5px; font-weight: 600; color: var(--text-ghost); pointer-events: none; }
.auc-amt-in { flex: 1 1 auto; width: 100%; min-width: 0; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--text-pure); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 13px 30px 13px 26px; -moz-appearance: textfield; }
/* Native number spinners are invisible on mobile and tiny everywhere else, so
   the field carries its own always-visible stepper. tabindex=-1 keeps them out
   of the tab order: keyboard users already have up/down arrows on the input. */
.auc-spin { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
.auc-spin-b { display: grid; place-items: center; width: 20px; height: 17px; padding: 0; border: 0; border-radius: 5px; background: var(--border-soft); color: var(--text-dim); cursor: pointer; transition: background 0.14s ease, color 0.14s ease; }
.auc-spin-b svg { width: 9px; height: 6px; display: block; }
.auc-spin-b:hover { background: rgba(5,150,105,0.18); color: #059669; }
.auc-spin-b:active { transform: translateY(0.5px); }
.auc-amt-in::-webkit-outer-spin-button, .auc-amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auc-amt-in:focus { outline: none; border-color: rgba(5,150,105,0.5); }
.auc-min { margin: 8px 0 0; font-size: 12.5px; color: var(--text-ghost); }
@media (max-width: 560px) {
  .auc-inline { flex-wrap: wrap; }
  .auc-in { flex: 1 1 100%; }
  .auc-amt-wrap { flex: 0 0 auto; }
  .auc-btn { flex: 1 1 auto; }

  /* The rank badge overhangs the card by 9px by design. With the board flush to
     a narrow viewport that overhang becomes horizontal page scroll, so on small
     screens the badge moves inside the card instead. */
  .auc { padding: 0 4px; }
  .auc-pcard { gap: 11px; padding: 14px 14px 14px 13px; border-radius: 14px; }
  .auc-badge { position: static; transform: none; width: 30px; height: 30px; border-radius: 9px; font-size: 11.5px; }
  .auc-crown { width: 14px; height: 11px; }
  .auc-ico.is-lg { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
  .auc-ico.is-md { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }

  /* Name and price share a row; the price must not be squeezed to two digits
     per line by a long project name. */
  .auc-pname { font-size: 16.5px; }
  .auc-pdesc { font-size: 12.5px; -webkit-line-clamp: 3; }
  .auc-pamt { font-size: 19px; }
  .auc-amt { font-size: 15px; }

  .auc-page h1 { font-size: 26px; }
  .auc-page .auc-sub { font-size: 14px; }
  .auc-ticker { display: flex; text-align: left; font-size: 12px; padding: 8px 13px 8px 11px; }
  .auc-launch { flex-direction: column; gap: 7px; text-align: center; padding: 11px 13px; }
  .auc-launch-txt { font-size: 12.5px; }
  .auc-row { gap: 10px; padding: 12px 4px; }
  .auc-rank { width: 22px; font-size: 12px; }
  .auc-row .auc-row-name { font-size: 16px; }
  .auc-rdesc { font-size: 12.5px; }
  .auc-empty { padding: 24px 16px; }

  /* 16px minimum on inputs. Below that, iOS Safari zooms the whole page in when
     the field takes focus and does not zoom back out, which strands the user
     mid-checkout on a sideways page. This is the single most common mobile form
     bug and it is invisible on desktop. */
  .auc-in, .auc-amt-in { font-size: 16px; }
  .auc-in { padding: 14px 15px; }
  .auc-amt-in { width: 124px; padding: 14px 34px 14px 26px; }
  .auc-amt-cur { font-size: 16px; }

  /* Steppers are 20x17 on desktop, well under a finger. Bigger hit area without
     making the arrows themselves any louder. */
  .auc-spin { right: 5px; gap: 3px; }
  .auc-spin-b { width: 26px; height: 21px; }
  .auc-spin-b svg { width: 10px; height: 7px; }

  .auc-btn { padding: 15px 24px; font-size: 15.5px; }
  .auc-perk { font-size: 12.5px; }
}
.auc-inline .auc-btn { flex-shrink: 0; white-space: nowrap; }
.auc-match { flex: 1 0 100%; width: 100%; margin: 2px 0 4px; }
.auc-match-in { display: flex; align-items: center; gap: 11px; font-size: 13px; line-height: 1.45; color: var(--text-dim); background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 12px; padding: 11px 13px; text-align: left; }
.auc-match-in strong { color: var(--heading); font-size: 14.5px; font-weight: 700; }
.auc-match-in span { color: var(--text-faint); font-size: 12.5px; }
.auc-match-in.is-new { color: var(--text-faint); border-style: dashed; }
.auc-match-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; font-size: 15px; font-weight: 700; color: #fff; background: var(--fill-subtle); }
.auc-match-ico img { width: 100%; height: 100%; object-fit: cover; }
.auc-msg { font-size: 13px; color: #059669; margin: 8px 0 0; min-height: 18px; }
.auc-msg.is-err { color: #F87171; }

/* --- ranks 2..N: compact, name + amount only --- */
.auc-list { list-style: none; margin: 20px 0 0; padding: 0 8px; }
/* The whole row is the tap target. Only the name was clickable, which on a phone
   is a ~15px-tall strip inside a 70px row, so the logo and the description both
   looked interactive and did nothing. The stretched-link pseudo-element covers
   the row without nesting anchors, which would be invalid markup. */
.auc-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 0.5px solid var(--border-soft); text-align: left; }
.auc-row .auc-row-name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Feedback belongs to the ROW, not the anchor. With a stretched link the pointer
   is never actually over the <a>, so :hover on the name alone meant tapping the
   logo lit up a word on the far side of the row and nothing else. Every cue is
   driven off .auc-row:hover so the whole thing responds as one object: surface
   lifts, an accent rail appears on the left edge, the name takes the accent, and
   a chevron slides in to say the row leads somewhere.
   :active adds a real press, and the whole set is disabled under
   prefers-reduced-motion. */
.auc-row { transition: background .14s ease, transform .1s ease; }
.auc-row::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #059669; opacity: 0; transition: opacity .14s ease; }
.auc-row:hover { background: var(--bg-elevated); }
.auc-row:hover::before { opacity: 1; }
.auc-row:hover .auc-row-name { color: #059669; }
/* TOUCH. Everything above is :hover, which does not exist on a phone, so on
   mobile the only feedback was the browser's own tap highlight -- and that
   highlight is drawn around the <a> element's box, which is the name text. Tap
   the logo, watch the name flash. That is the bug.
   Killing the native highlight and driving the pressed state off :active (plus
   :has() for engines that do not propagate :active to ancestors) makes the whole
   row light up instead. */
.auc-row-name, .auc-pname { -webkit-tap-highlight-color: transparent; }
.auc-row:active,
.auc-row:has(.auc-row-name:active) {
  transform: scale(0.988);
  background: color-mix(in srgb, #059669 9%, var(--bg-elevated));
}
.auc-row:active::before,
.auc-row:has(.auc-row-name:active)::before { opacity: 1; }
.auc-row:active .auc-row-name,
.auc-row:has(.auc-row-name:active) .auc-row-name { color: #059669; }
.auc-row:active .auc-rgo,
.auc-row:has(.auc-row-name:active) .auc-rgo { width: 12px; opacity: 1; margin-left: 4px; }
/* Chevron: hidden by default so the list stays clean, slides in on hover. */
.auc-row .auc-rgo { flex: none; width: 0; overflow: hidden; opacity: 0; color: #059669; font-size: 15px; font-weight: 700; transition: width .16s ease, opacity .16s ease, margin .16s ease; }
.auc-row:hover .auc-rgo { width: 12px; opacity: 1; margin-left: 4px; }
@media (hover: none) { .auc-row .auc-rgo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .auc-row, .auc-row::before, .auc-row .auc-rgo { transition: none; }
  .auc-row:active { transform: none; }
}
[data-theme="light"] .auc-row:hover .auc-row-name, [data-theme="light"] .auc-row::before { color: #047857; }
.auc-row:last-child { border-bottom: 0; }
.auc-rank { flex-shrink: 0; width: 28px; font-size: 13px; font-weight: 700; color: var(--text-ghost); font-variant-numeric: tabular-nums; }
.auc-rbody { flex: 1; min-width: 0; }
.auc-rdesc { font-size: 13px; line-height: 1.5; color: var(--text-faint); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auc-row-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-row-name:hover { color: #059669; }
.auc-amt { flex-shrink: 0; font-size: 14.5px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.auc-seeall { display: block; text-align: center; margin-top: 16px; font-size: 13px; font-weight: 600; color: #059669; }
.auc-seeall:hover { color: #047857; }

/* --- light theme --- */
[data-theme="light"] .auc-eyebrow { color: #059669; }
[data-theme="light"] .auc-top-amt { color: #047857; }
[data-theme="light"] a.auc-top-name:hover { color: #047857; }
[data-theme="light"] .auc-top-name { color: var(--heading); }
[data-theme="light"] .auc-top-tag { color: var(--text-dim); }
[data-theme="light"] .auc-ico { color: #fff; }
[data-theme="light"] .auc-row-name { color: var(--text); }
[data-theme="light"] .auc-row-name:hover { color: #047857; }
[data-theme="light"] .auc-amt { color: var(--heading); }
[data-theme="light"] .auc-seeall { color: #059669; }
[data-theme="light"] .auc-btn { background: #059669; color: #fff; }
[data-theme="light"] .auc-btn:hover { background: #047857; }
[data-theme="light"] .auc-in { background: #fff; color: var(--text-pure); }
[data-theme="light"] .auc-match-in { background: #fff; color: var(--text-dim); }
[data-theme="light"] .auc-match-in strong { color: var(--heading); }
[data-theme="light"] .auc-msg { color: #047857; }
[data-theme="light"] .auc-msg.is-err { color: #DC2626; }
[data-theme="light"] .auc-paid { color: #047857; background: rgba(5,150,105,0.09); border-color: rgba(5,150,105,0.3); }
[data-theme="light"] .auc-note { color: var(--text-fainter); }
[data-theme="light"] .auc-note a, [data-theme="light"] .auc-sub a { color: #047857; }
[data-theme="light"] .auc-more-go { color: #047857; }
[data-theme="light"] .auc-more-card { background: #fff; }

@media (max-width: 900px) {
  .auc-home { padding: 88px 20px 8px; }
  .auc-page { padding: 96px 20px 56px; }
}
@media (max-width: 640px) {
  .auc-hero { padding: 22px 18px 24px; border-radius: 18px; }
  .auc-top { gap: 14px; margin: 18px 0 20px; }
  .auc-ico { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; }
  .auc-top-name { font-size: 19px; }
  .auc-top-amt { font-size: 22px; }
  .auc-page h1 { font-size: 27px; }
  .auc-inline { flex-direction: column; gap: 9px; }
  .auc-inline > .auc-match { order: 2; }
  .auc-inline > .auc-amt-wrap { order: 3; }
  .auc-inline > .auc-btn { order: 4; }
  .auc-inwrap { min-width: 0; width: 100%; }
  .auc-amt-wrap { flex: 0 0 auto; width: 100%; }
  .auc-btn { width: 100%; }
  .auc-inline .auc-btn { width: 100%; }
  .auc-form { max-width: none; }
}